1 / 27

Frame, Timeline and Vector Animation

Frame, Timeline and Vector Animation. Purposes of Animation. Capture viewers attention example Explain a system or process example Set a mood or on-screen environment Example Entertain Example NOT TO INTERFERE OR ANNOY. Three Applications for Creating Animations. Dreamweaver Photoshop

dannyi
Download Presentation

Frame, Timeline and Vector Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Frame, Timeline and Vector Animation

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

  3. Three Applications for Creating Animations • Dreamweaver • Photoshop • 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.

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

  6. 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

  7. Flash AnimationExample Project

  8. Flash Workspace File -> Import to Library

  9.  Creating shape tweens: www.adobe.com/go/vid0124  Creating motion tweens: www.adobe.com/go/vid0125

  10. Flash Tutorials

  11. 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.

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

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

  14. 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

  15. The Following Slides AddressAnimation in Dreamweaver

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

  17. Insert -> Layer (AP Div)

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

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

  20. Adding Motion to a Layer Keyframes

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

  22. Record Layer MotionModify -> Timeline -> Record Path of Layer

  23. Dreamweaver Timeline examples Reveal Pool Balls

More Related