Hoy me he dado a la tarea de crear un Splash Screen para mi Kubuntu 10.04, no es el mejor splash el que al final ha quedado, pero creo que para empezar está bien, y lo más importante he logrado darle un toque de personalización a mi KDE 8).
Antes que nada advierto que no soy especialista en estos lares, por lo que si alguno de los pasos parecen empíricos, realmente lo son jajaja .
Sin más preámbulo, aquí va el proceso seguido para crear el Tema IknaxioSplash :D:
En nuestro directorio favorito, creamos la estructura de carpetas para nuestro Splash Screen Theme:
Como podemos observar he creado la carpeta IknaxioSplash y dentro de ella los archivos principales son:
- Theme.rc
- main.qml
[KSplash Theme: IknaxioSplash] Name = Iknaxio Splash Screen for KDE Description = My first splash screen theme Version = 0.1 Author = Iknaxio MarxHomepage = http://www.ecualug.org/blog/iknaxio # Theme behaviour settings. Engine = KSplashQML
Según entendí, el KSplash Theme coincide con el nombre de la carpeta de nuestro tema, de allí las siguientes líneas son informativas Name, Description, Version, Author, Homepage. El Engine se refiere propiamente al motor que se va a usar para renderizar el tema, como voy a usar QML, el engine es KSplashQML.
main.qml contiene en sí la "animación" del splash:
import QtQuick 1.0
Rectangle {
id: main
width: screenSize.width
height: screenSize.height
anchors.fill: parent
Image {
id: splashImage
fillMode: Image.PreserveAspectCrop
source: "images/background.jpg"
anchors.fill: parent
Image {
id: iknaxio
width: 732
height: 98
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "images/iknaxio.png"
opacity: 0
}
Image {
id: bob
width: 550
height: 550
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "images/bob.jpg"
opacity: 0
}
}
SequentialAnimation {
id:splashanimation
NumberAnimation {
target: bob;
property: "opacity";
duration: 4000;
to: 1;
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: bob;
property: "opacity";
duration: 4000;
to: 0.05;
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: iknaxio;
property: "opacity";
duration: 4000;
to: 1;
easing.type: Easing.InOutQuad
}
}
Component.onCompleted: splashanimation.start()
}
En la primera parte se declaran los elementos gráficos y se les asigna un id, realizamos algo así como la declaración de las variables que más adelante vamos a usar.
Para el caso del elemento Rectangle le asigno el ancho y alto de la pantalla. Para los Image (fondo de pantalla, la estampa de Bob Marley y las letras que dicen IKNAXIO) es necesario declarar el ancho y alto real de esos elementos, sino los sabemos basta con dar clic derecho sobre la imagen para averiguarlo.
Centro las imágenes a la pantalla y declaro los source, es decir la ruta en la que se encuentran almacenadas, en este caso es la carpeta images. Opacity: 0, significa que el elemento no es visible, opacity puede variar entre 1 y 0, si le asignamos uno el elemento se muestra totalmente.
De allí viene la animación ;)
Se han definido tres etapas en la animación, las mismas que están representadas por cada una de las líneas NumberAnimation:
- En 4 segundos mostrar poco a poco la estampa de Bob Marley, para lo cual se incrementa gradualmente la propiedad opacity hasta llegar a 1.
- En los siguientes 4 segundos ocultar gradualmente a Bob, pero no del todo, ya que lo dejamos con un opacity de 0.05.
- Finalmente en los últimos 4 segundos mostrar la leyenda "IKNAXIO".
Para poner en "producción" nuestro recién creado tema, copiamos toda la carpeta IknaxioSplash hacia la ruta:
~/.kde/share/apps/ksplash/Themes/
Y de allí vamos a activar nuestro tema a System Settings->Workspace Appearance->Splash Screen:
Con esta mega explicación, espero que les despertara la curiosidad de intentar realizar su propio Splash Screen.
Adjunto encontrarán el archivo IknaxioSplash.txt, el cual contiene el tema al que se hace referencia en este Como. Para poder usarlo tienen que renombrarlo de tal manera que luego de quitar la extensión .txt quede asi IknaxioSplash.zip
Saludos y una excelente semana para todos ;)
Referencias:
