Create your own Animated Homescreen Part Two

[Guest awarner [MVP]]

Working with the animation

a. Under Ulead GIF Animator

This is the fun part. Working with the animation is synonymous to working with layers and frames.

1. We begin with the background file from step 1 ‘enthusiast.jpg’. This will serve as our ‘main background’ frame. Open the file in Ulead GIF Animator and you’ll get this bare frame…

2. Going back to our objective, we are suppose to combine the 2 animated GIFs into one animated homescreen. So on frame 1 (enthusiast.jpg) we then embed our first object: ‘enthusiast logo.gif’. To do this we hit File > Add Image on Ulead GIF Animator (UGA).

3. Look for ‘enthusiast logo.gif’. Ensure that on the Add Image window, you have ticked ‘Insert in the current frame’ and ‘Distribute to individual frames…’ Click ‘Open’ when ready.

4. There goes object 1! Notice that since ‘enthusiast logo.gif’ is made up of 18 frames, the background file ‘enthusiast.jpg’ has also been replicated 18 times. Our last frame is now ‘18: Frame’

5. Object is not on the center of the background file. You may position the object at the center using individual frames but that would be a tedious job in situatons where you have say more than 20 frames. The easy way to position then is to use the ‘Synchronize Objects Across Frames’ feature of UGA but first you need to move frame 18 to the center. Frame 18 will serve as the source image. Notice that as you move your image, the X and Y coordinates changes.

6. Once the source object is in position, we are now ready to synchronize. So using the ‘Object Manager…’ button, look for the ‘Synchronize Objects Across Frames’.

7. Ensure that you have ticked ‘All Objects’ on the ‘Synchronize Objects Across Frames’ window. Doing so will allow frames 1 to 17 to have the same X and Y coordinate values as the source image; frame 18.

8. This is what happens when frames are synchronized:

Compare it with ‘unsynchronized’ frames…

9. To embed object 2 ‘baby.gif’, you use the same techniques as above. Before you do that, you first have to highlight ‘1: Frame’. This will ensure that the next object to be added will insert on frame 1 and not elsewhere.

10. There goes object 2! Do the same techniques to position the file. It doesn’t have to be at the center this time. You can choose any location depending on your design.

11. We have now embedded the 2 animated GIFs into one animation. Preview the animation using the ‘Play Animation’ button…

12. Looking good… but noticed the awkward movements of the logo on the latter part of the animation? That is because the 2 objects we have embedded does not have equal number of frames. Object 1 is composed of 18 frames while object 2, 21 frames. At this point we get to decide which frames of which object will be deleted. For this tutorial we will delete frames from object 2 (baby.gif). We will retain frame counts of object 1 and since object 2 is composed of 21 frames, the last 3 frames will be sacrificed. Highlight frames 19-21, right click mouse then ‘Delete Frames’.

13. Good! We now have 18 frames. Preview the animation then notice that though object 2 lacks last 3 frames, movement is not as bad as we previously had with 21 frames. One thing I always consider is the animation loop. Animation preview is very important as it will show you which frame/s not in sync with the animation. File below will serve as our full 176 x 200 animation. You can save this file as *.UGA for reference purposes.

14. Going back to our imaginary layout…

‘MB Anim Plugin’ would be on top of ‘Smart Monitor’ plugin. We already have a full 176 x 200 animation, our next move is to extract only the area occupied by the green highlight. To do that we use UGA’s select button. The area in green is exactly 176 x 116 pixel dimension.

15. Use ‘Crop Canvas’ function to crop selected area…

16. Our main animation for the MB Anim plugin area…You can save this file as *.UGA for reference purposes.

17. Our next task is to save the animation as Image Frames…hit File > Save As > Image Frames

18. When the ‘Save As’ window opens, type a file name then tick ‘Export all frames’…

Verify exported frames…this ends ‘Working with animation under Ulead GIF animator’ part.

Part Three MadBeetle Animation Editor