Create your own Animated Homescreen Part One

[Guest gpcarreon (MVP)]

Requirements:

1. Ulead GIF Animator (Commercialware)

2. Madbeetle Animation Editor (Freeware)

3. XMLWriter - Notepad will do

4. 4. Adobe Photoshop

5. Graphic files (jpg, animated gifs) - you have the World-Wide-Web to search for desired background graphics and animated GIFs.

Some of the really obvious requirements:

1. Application-unlocked Microsoft Smartphone (OS 2003 / 2003 SE)

2. Microsoft ActiveSync program

3. Madbeetle Demo plugin - to play the animation

For this particular article, we are going to use the following:

1. Main background graphic file ‘vista.jpg’ - 176 x 200

2. Animated GIF 1 ‘baby.gif’ - 50 x 50

3. Animated GIF 2 ‘enthusiast logo.gif’ - 68 x 110

Our Objective:

To combine the bare background graphic file plus the 2 animated GIFs into one animated homescreen just like this one…

..that basically translates to learning how to create an animated homescreen.

Steps / Flow of Tutorial:

1. Designing the homescreen

2. Working with the animation

- Under Ulead GIF Animator

- Under Madbeetle Animation Editor

3. Working on the XML

4. Signing the animation

Let’s begin…

Designing the homescreen

1. To better understand concepts, we need to be familiar first with the parts of the Smartphone homescreen; the homescreen layout. From the screenshot you will notice iconbar, date and time, MRU etc..those are homescreen plugins.

2. Since our target device is a non-QVGA Smartphone, the size of the background graphic file would be 176 x 200. Plugin arrangement doesn’t necessarily have to be the one on the screenshot. Deciding which plugin to include and where to position them is a matter of personal preference. When you get to know the basic principle, you will find yourself designing your own homescreen with different plugins at different locations on the homescreen. Imagine your homescreen this way…

3. Alright, we have an idea where to position the plugins but is our background graphic file good enough? If not, then this is where Photoshop comes in. Open your file in Photoshop then do your graphic enhancements. Add shapes for the MRU and SmartMonitor plugin, set opacity and then add those small icons for SmartMonitor. Save your work as JPG file.

I guess that ends the ‘designing’ part. With an enhanced background file at hand, we can now proceed to the next step…

Part Two, Working with the Animation