Creating Graphics - Animated Banner

In this tutorial you will create a simple animated banner. Before you complete this tutorial please make sure you have completed the static web banner tutorial by Macromedia.

Step 1
Open the file banner.png

Step 2
Export the image. Save it with the file name banner1

Step 3
Change the font colour of THE WILDLIFE PROJECT to green (this links to wildlife / nature etc – remember it is important to consider the purpose / audience)

Step 4
Export this images and save it as banner2 (this is because it will be the second frame in the animation).

Step 5
You are now going to produce a simple animated web banner using these two images (banner1.gif and banner2.gif). To do this open JASC Animation Shop 3.

Go to File > Animation Wizard. Choose the settings as below.

Step 6
Click Next. In the next window click Opaque. Click Next. Then Click Next again.

Select Yes, repeat the animation indefinitely (this will loop the animation). Set the frame display to 10th second. You can experiment with the frame display later.

Next add the two images you exported earlier. Remember we numbered the files? This helps us to put them in order now (although we are only working with two files here, as you build up complex animations it can become confusing later if you are working with lots of files).

Click Next. Click Finish.

Step 7
To view your animation go to View > Animation.

Notice how fast the images are changing causing the text to appear to flash very quickly. You can reduce the frame rate to slow down the animation by going to Animation > Frame Properties. Experiment with this now.

Step 8
You should now save the file. To do this go to File > Save As. Give the image an appropriate file name and save it in an appropriate folder. You will then be prompted to optimise the image. This is an opportunity to reduce the file size of the animated banner. To change the quality use the slide bar. The screenshot below shows a reduction from level 4 to 3.

Select Next. Then Next. The window will now display the impact your opimisation hashad on the image (remember to take a screen shot of this when you produce your portfolio evidence). Then click Finish.

Top Tip
When you first save your web banner save it at the highest resolution. You can then go to Save As and save it with a different file name and at a lower resolution later. This means you can always go back and work on your original, higher resolution animation.