Creating Graphics - Animated Banner 2

In this tutorial you will devlop your animated web banner to incorporate further aditional animation.

Step 1
Open the file banner.png

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

Step 3
Add the text You can make a difference... Use the font Palatino Linotype (to maintian the housestyle) and set the font size to 20.

Step 4
Export the image. Save it with the file name bannernew2

Step 5
Change the text to ...by donating only £2 per month

Step 6
Export the image. Save it with the file name bannernew3

Step 7
Change the text to CLICK HERE TO HELP

Step 8
Export the image. Save it with the file name bannernew4

You are now ready to put these image together to create the animated the web banner.

Step 9
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). This time we are going to slow down the rate of the animation so that each frame is displayed longer. To do this set the frame rate to 200 (2 seconds)

Next you need to add the 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). In order to make CLICK HERE TO HELP appear to flash you need to be creative with the images you add. Add the images in the following order:

Click Next. Click Finish.

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

Optional Activity
Experiment with Effects (if you want to apply effects to all of your images you should click the first image, then hold down shift and click the last image to select them all, then go to effects and experiment).

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.