Assignment in Brief
1. Create an animation splash screen for one of your clients
2. Create an ad banner for the other client
3. Turn in animation homework
4. Take Quiz 2

Reading
Read the Animation section of the CD
Read this Lesson 5 page all the way through
Read Chapter 13 on Amimated GIFs in the Lynda Weinman Book (this Chapter is particularly good, I recommend doing the exercises)

Creating an Animation

An animation cycles thru frames which are equivalent to the drawings of the dog. The illusion of movement is created by cycling thru the animation frames. Each frame is created by turning on or off layers.

Here are the steps you follow:

• Make all the layers you will need to create the frames in Photoshop
• Save the file
• Switch to ImageReady.
• Make sure the Animation Window is displaying (Window > Show Animation)
• Create the look you want for the first frame in the animation
• Select the new frame icon (a piece of paper which displays at the bottom of the animation palette)
• Turn on or off the layers for the second frame
• Continue on in this pattern until the major frames are created
• If you want to create intermediate frames between 2 existing frames, highlight them, select the pop out menu and select "tween"
• If you want to copy frames, highlight the frames, select the pop out menu and "Copy Frames" and then "Paste Frames"
• To change the time that a frame appears on the screen, highlight the frame and access the time which displays at the bottom of the frame
• To change the number of times the animation cycles, look in the lower left corner of the animation palette and select a looping option
• There are controls at the bottom of the animation window which resemble a VCR which you can use to play the animation, stop it, or step thru the frames

top

Love em, hate em, they are a part of the web and you may need to create one sometime in the future. I have found a wealth of articles written regarding ad banners and encourage you to visit the links and WWW examples sections of the notes to explore this subject in depth.

Review the animation features of ImageReady when creating ad banners. Open the animation palette, it lives with the slice and rollover palettes, select the animation tab in the palette window.

The standard ad dimensions are 468 pixels by 60 pixels, please create an ad banner with those dimensions.

Here are my recommendations for creating ad banners

1. use large blocks of solid color
2. place a single black pixel border around the banner
3. keep the file size small
4. spend time experimenting with file format and optimization setting to reduce the file size
5. feature the product name or logo
6. use a clever phrase
7. try and achieve a balance between eye catching and obnoxious

Creating a Splash Screen Animation

Many of the same principles which were applied to an ad banner are also true of a splash screen animation. Use large blocks of solid color and try to keep the file size under 50K. It is also useful to provide a link on the page that allows folks to skip the animation.

A splash screen is entertaining the first few times you watch it, however for frequent visitors to the site, it becomes an annoying delay.

Since you already have a page named "index.html" you can name the page which displays the splash animation "splash.html".

We have intentionally asked you to create Ad Banner and Splash screen animations because we wanted the animations for both clients to be SEPARATE from the opening screen or second level pages. Beginners who place animations and rollovers on the same page can often create unexpected results. A common problem is for the animation to reload when you roll over some of the navigation. By keeping the splash screen and ad banners on separate pages we avoid this problem.

Advanced students are encouraged to experiment with combining rollovers and animations on their own. We will not have time to cover this combination in class or lab. The lab staff does not have the expertise to assist you with this concept.

Turning in Homework
You do not need to show your instructor where the animations will be placed at the site. For now, just create 2 animated gif files (one for the client site and the other as an ad banner). Place these files in the "templates" folder. Create a web page titled "animation.html" which displays the 2 animated gifs. Place this page into the "templates" directory.

Add this code to your homework page.

<A HREF="templates/animation.html"> view my animations </a >