1. Frame, Timeline and Vector Animation

2. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set a mood or on-screen environment –ExampleExample Entertain –ExampleExample NOT TO INTERFERE OR ANNOY

3. Three Applications for Creating Animations 1.Dreamweaver 2.Photoshop 3.Flash

4. Frame Animation Displays a series of still images, or frames, at a certain rate to give the impression of motion. Can be created Photoshop and special GIF animation software.

7. Duplicate Layer Merge Layers Save for the Web -> GIF format -> Check Animate Box Animate object on constant background

8. Vector Animation More complex and used to move an object along a path, or vector Objects defined by mathematical equations rather than drawn “Flash” is a popular software for vector animation

9. Flash Animation Example Project Example Project

10. Flash Workspace File -> Import to Library

13.  Creating shape tweens: www.adobe.com/go/vid0124Creating shape tweens: www.adobe.com/go/vid0124  Creating motion tweens: www.adobe.com/go/vid0125Creating motion tweens:

14. Flash Tutorials

15. See my tutorials for how to “Publish” your Flash Animation as A “shockwave” a.swf file format. Do not try to put the.fla format file on your web page. This format can only be read by Flash.

16. 1, Click in the cell where you want Your Flash animation and select “Plugin” Adding Your Flash Animation to your Web Page 2. Select the.swf file published in M:\Home from Flash

17. The Flash object will appear like this but not play until viewed In the browser

18. Produce Flash Movie -- Minimum acceptable for credit: Author present for Peer Review at start of class Movie available for Peer Review There is a working link from WebEx Page to the movie A “story” at least 10 seconds long – 120 frames at 12 fps Background image At least one motion tween At least one shape tween or morph Includes GIF animation Movie (and Gif) stops at end Contains sound

19. The Following Slides Address Animation in Dreamweaver

20. Timeline Animation with Dreamweaver Window -> Timelines Frames (horiz) Layers (vert)

21. Insert -> Layer (AP Div)

22. Modify -> Timeline -> Add Object to Timeline

23. Timeline Frames Layer may contain Live text, Image text or picture Frame rate, autoplay, loop

24. Adding Motion to a Layer Keyframes

25. Inserting Keyframes Modify -> Timeline -> Add Keyframe

26. Record Layer Motion Modify -> Timeline -> Record Path of Layer

27. Dreamweaver Timeline examples Reveal Pool Balls