Ad Banner - Animation Lesson

The first lesson involves creating an ad banner which would display on a Web site. The standard size for this type of banner is 468 x 60. Make sure the document you create is that size.

Although I will create the animation in ImageReady I usually begin in Photoshop where I create my layers. Here is the ad banner before the animation is created. I have several layers which will display when the file loads, and 4 layers which will be turned on during the animation cycle.

I switch to ImageReady and bring up the animation window. Window > Show Animation

A thumbnail of the ad appears

Now I select the new frame icon at the bottom of the animation window.

Another thumbnail of the banner appears. I turn off the layer which contains the word "RETIREMENT" and turn on the layer which displays the phrase "share your best years".

I repeat this step 3 more times:

I add a frame which displays the text "in the best place"

Another frame which displays the word "GREENSPACE" plus a photo of an elderly couple

A final frame which again displays the word "RETIREMENT." Since I want this word to display when the animation stops cycling I need to place it at the end of the animation.

Here is the animation so far.

There are 2 animation settings I need to bring to your attention the delay and loop. First let's discuss how fast the animation moves from one frame to another (the delay). Under each frame is a setting which indicates how long the animation will display that frame before moving on to the next frame. All my frames currently display at 1 second.

If I want to change the delay from the second frame to the third, I would press down on the current setting so this pop out window can appear. Now I can select another delay value.

The other setting is loop, which determines how many times the animation will cycle through. To modify the number of times the animation cycles thru, I locate the loop setting in the lower left corner of the animation window and can select "Once", "Forever" or "Other". Since I previously selected "Other" and then set the value to 3, that is also a menu option. I recommend you never ask an animation to cycle "Forever," most visitors find constant animation to be annoying.

Next I would like to use the animation software to create a transition from one frame to the next. I select frame 3, hold down the shift key and then select frame 4. Now I access the animation pop out menu by selecting the arrow in the upper right hand corner. This menu appears, I select "tween".

This dialog box appears which allows me to determine how the "tween" will occur. I select "All Layers", since I need all my visible layers to appear for this animation to display correctly. Next I select "Opacity" for the parameters setting. The opacity of frame 3 will decrease while the opacity of frame 4 increases. I am tweening with the selected frames (3 and 4). Finally I set the Frames to Add at 5 which insures a gradual transition.

I notice that several new frames have been added to the animation. After the original frame 3, I now have frames 4-8 which are the tweened frames.

Here are the frames which make up the tween. The original frame 3

new frame #1 (beginning of tween)

new frame #2

new frame #3

new frame #4

new frame #5 (end of tween)

original frame 4

Next I add another frame to the end of the animation and place the word RETIREMENT on the screen. I move the word so it is partially displayed at the right edge of the screen. Look below:

I plan to tween this frame and the final frame which contains the word RETIREMENT centered on the screen.

To accomplish this I select the 2 frames shown above, and use the tween icon located at the bottom of the animation window to launch the tween dialog box. I select "position" as the parameter, and create 3 additional frames.

These 3 new frames are created.

I run thru the animation a few times to see if I like it and then save the file. File > Save Optimized As the file must be saved in the GIF format for the animation to display.

To view the Photoshop file access CD > CIS 58.53B Advanced Class > PSD Files > animation > ad-retire.psd. You will need to be in ImageReady to view the animation frames.