1 July 2012

Creating animated splash screen in Qt

The QSplashScreen widget in Qt provides a splash screen that can be shown during application startup. A splash screen is a widget that is usually displayed when an application is being started. Splash screens are often used for applications that have long start up times to provide the user with feedback that the application is loading. The splash screen appears in the center of the screen. It may be useful to add the Qt::WindowStaysOnTopHint to the splash widget's window flags if you want to keep it above all the other windows on the desktop.

Many times you might feel to add animated splash screens for better look of the splash screen. This can be achieved in multiple ways. One way is to make your own splash screen class by inheriting from QSplashScreen and painting the screen as you wish. I would show a relatively simple approach just by changing the series of images with changing time.

To get a series of images, use a video making tool like After Effect or Sony Vegas. Design your complete splash screen as a video using these tools. When you are ready, publish this video and in publish settings, change the output to png or jpg mode. This will render your video as series of image files. Now you just need to copy these images in your project folder so that they can be easily available while loading splash.

For my case, I copied all my images in icons/splash/ folder. The image names follow the following pattern
SplashScreen_#####. Where ##### is the sequence of image.


QString name = "./icons/splash/SplashScreen_000";
QStringList fileNames;
for(int i=0; i<100; i++)
{
    if(i<10)
       fileNames << (name+QString("0%1").arg(i));
    else
       fileNames << (name+QString("%1").arg(i));
}


Here I read all the image file names into a list. Make sure you don't add the splash images to your resources file as they will be packaged into your build and would consume a lot of useless space. Moreover, if the count of your splash images is too much, then if would fail to compile. So its better to read it from the folder itself.


QSplashScreen *splashScreen = new QSplashScreen(QPixmap(":/icons/splashscreen.png"));
splashScreen->show();
QTime finishingTime = QTime::currentTime().addSecs(5);
int count = 0;
while(QTime::currentTime()<=finishingTime)
{
    if(count>299)
      splashScreen->setPixmap(QPixmap(":/icons/splashscreen.png"));
    else
      splashScreen->setPixmap(QPixmap(fileNames[count/3]));
    count++;
}
splashScreen->hide();



I have taken a timer of 5 seconds to show how the splash images would change to give a feel of animation. Moreover you can ignore the count/3 part in the code. I rendered my splash images at 20fps, so I had to adjust the timing with number of images. You can adjust this based on your design. This method seems simple but I believe its better and simple to overload the QSplashScreen class and design everthing in modular form.

1 comment: