Animation on the Web

After most web pages load, the appearance of the page does not change. The most common exception to this generalization is changes in response to mouseovers, either image rollovers (achieved through JavaScript) and text "rollovers" (achieved through the a:hover CSS psuedo-class). There are three additional common ways to have change occur following the loading of a web page:

1. Animated gifs - These are put on the page just like any other image. They can be created through the use of graphics programs such as Fireworks or Photoshop/ImageReady in which different images are placed in frames. The graphics program combines these into a single gif image which plays the frames in succession. The file size of the single gif image is much smaller than the sum of the file sizes of the individual images. Example and how to make animated gifs in Fireworks.
   
2. CSS Positioning and JavaScript - An item is placed between <div> or <span> tags and given an initial position through the use of CSS positioning. JavaScript is then used to change the CSS position attributes typically using the JavaScript setInterval or setTimeout time functions. The Dreamweaver Timeline uses this technique. The steps in Dreamweaver 8 to do a basic animation are as follows: (1) Choose Insert>Layout Objects>Layer to insert a new layer. (2) Put the content you want to move in the layer (3) Choose Modify>Timeline>Add Object to Timeline (4) Click in the timeline and drag the layer (using the drag handle at the upper left) to the position you want the layer to occupy at this point. (5) Be sure to check the Autoplay button so that the animation will occur when the page loads. An example of this is shown above.
   
3. Flash - Flash is the most commonly used animation program. The .swf file created by the Flash program is typically inserted as part of a web page. Dreamweaver can create simple Flash .swf files which it terms Flash text and Flash buttons. Flash is taught at NVCC Annandale in ITE 170 which transfers to GMU as IT 213 as part of the BSIT degree.

Introduction to Flash MX

Terminology -

• Timeline area - double clicking the frame rate is a quick way to bring up the document properties box; elapsed time is the time elapsed from Frame 1 to the current Playhead location at the current frame rate
• Blank keyframe (F7)- empty locations, ready for content, represented by a hollow circle in timeline
• Keyframe (F6)- points in timeline when actions or animations occur. Keyframes that contain content are represented by solid circle in timeline. The display remains constant until another keyframe or a blank keyframe occurs in the Timeline. If you add another keyframe, the content (except for actions and sounds) is copied from the previous keyframe.
• Frame (F5)
• Clear Keyframe (Shift F6) - removes the content but leaves the frame.
• Remove Frames (Shift F5) - removes frames

Exercise 1- Frame-by-Frame Animation with Keyframes

1. Open Flash. In the Property Inspector, set the frame rate to 22, select a light blue background, and set the dimensions to 700x350 pixels. The number of frames divided by the frame rate = length of movie in seconds - recommended frame rate of between 12 and 25 fps, perhaps 20-22
2. Notice the document has a single layer containing a single blank keyframe - this is the way all new documents appear by default.
3. Select the Brush tool with any color other than white and draw the first part of the capital X on the left side of the Stage.-- notice that the keyframe now contains a small black dot which means that it contains content.
4. Insert Keyframe or press F6. This copies all the content of Frame 1 to the new keyframe - draw the second half of the letter X.
5. Press F6 and continue with the next letter - you can click and drag (scrub) the Playhead back and forth to preview. You can do parts of a letter in a frame-- need not do the entire letter. Save the file.

Exercise 2 - Shape Tweening - Shape tweeing involves putting a shape in one keyframe and another shape in another keyframe, and Flash generates the in-between frames in which the first object morphs into the second. This is in contrast to the frame-by-frame approach in the previous exercise, where we constructed the artwork for each frame.

1. Select File>New. With the playhead in frame 1, click on the Oval tool and then draw an oval in the Stage. Click on frame 15 in the timeline and press F6 to add a keyframe -- this copies the content from the previous keyframe (in frame 1) to frame 15.
2. Click on the Arrow tool to select the oval in frame 15 and click on the Free Transform Tool and then drag by the handlebars around the oval to change the shape of the oval.
3. Click anywhere between the two keyframes and in the Property Inspector, click the Tween drop down menu, and select Shape. This will turn the timeline green between the two frames (if you see a broken, dashed line appear in the Timeline, this indicates the tween is not working properly.
4. Press Enter to test the tween and save the file.

Exercise 3 - Same as Exercise 2 except that we will use an entirely new shape in the last frame and we will publish the file.

1. Select File>New. With the playhead in frame 1, click on the Oval tool and draw an oval. Click on frame 15 in the timeline and press F7 to add a blank keyframe -- i.e. we don't want to copy the content from the previous keyframe (in frame 1) to frame 15.
2. Click on the Rectangle tool and draw a rectangle in frame 15..
3. Click anywhere between the two keyframes and in the Property Inspector, click the Tween drop down menu, and select Shape. This will turn the timeline green between the two frames (if you see a broken, dashed line appear in the Timeline, this indicates the tween is not working properly.
4. Press Enter to test the tween and or Control>Test Movie to view it in the browser.
5. Choose File>Publish Preview>Default. This creates a .swf file and an html file that references the file. You can then use Dreamweaver to insert the .swf file into an .html page or cut and paste from the html file created by Flash into your html file. You can eliminate the looping behavior either by choosing File>Publish Settings>HTML and uncheck the loop box or by changing the code in the html file.

Exercise 4 - Creating Graphic Symbols and Symbol Instances

1. Select File>New. Draw an round disk with the oval tool (hold down the shift key when you draw). Click on the Arrow tool and then click on the outside of the circle and hit the delete key to delete the stroke around the circle, leaving only the inside (the fill). Click on the inside to select it and choose Insert>Convert to Symbol. Give it a graphic behavior and name it ball.
2. Press F11 to open the Library. You will notice that ball appears in the Library. The ball on the Stage is now an instance of this symbol. Put additional instances of the symbol on the stage by dragging them from the library onto the Stage.

Exercise 5 - Editing Symbols and Symbol Instances - Changes to the symbol change all instances of the symbol, but one can make changes to an instance without affecting other instances of the symbol.

1. In the Library, double click on the Graphic symbol icon to the left of the name of the symbol. The information bar above the Stage now shows Scene 1 and ball. This means you are now editing the symbol. In the Toolbox, change the Fill Color to change the color of the ball. Click on Scene 1 to return to the main Scene and notice that all instances now have the new color.
2. Using the Arrow Tool, single click on an instance of the symbol on the Stage. Click on the Free Transform Tool in the toolbox and resize the ball by using the grab handles that appear around the ball. Notice that the other instances of the symbol are not affected.

Exercise 6 - Creating an Animation within a Symbol - We will create a tween within a symbol and then use multiple instances of this symbol on the Stage.

1. Select File>New. Select Insert>New Symbol and name it boucing ball and give it a Graphic behavior. Using the Oval Tool, draw a circle and delete the stroke around it. In the timeline, press F6 on Frame 10 to insert a new keyframe and F6 on Frame 20 to insert a new keyframe. This copies the content from frame 1 to frame 10 and frame 10.
2. Put the playhead in frame 10 and move the ball down. Click to the right of the layer name to select all the frames in the layer and in the Property Inspector, choose Shape from the Tween drop down menu. Press Enter to preview the animation.
3. Click on Scene 1 in the information bar to return to the Main Timeline. Press F11 to open the Library and drag several instances of the bouncing ball symbol onto the stage. Press Enter to preview the animation.
4. Nothing happens! The problem is that the timeline of a graphic symbol is dependent on the Main Timeline. Here the graphic symbol Timeline has 20 frames whereas the Main Timeline only has 1 frame. Therefore we need to extend the Main Timeline out to at least frame 20 for the graphic symbol animation to occur in full. You can do this by clicking on Frame 20 and pressing F5 to add frames. Press Enter to preview the animation.
5. You can change instances of the symbol -- e.g. use the Arrow Tool to select an instance and in the Property Inspector, select Tint from the Color drop down menu and select a color.

Revised: March 16, 2006 Comments to William Pegram, wpegram@nvcc.edu