Introduction to  Flash Animation CS 318
Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>C...
What is Flash? <ul><li>Defacto standard for creating complex animation sequences in Web pages </li></ul><ul><ul><li>Use an...
Appropriate Use of Animation <ul><li>Do  use animation to: </li></ul><ul><ul><li>Explain abstract concepts </li></ul></ul>...
Critical Analysis of Animation <ul><li>Poor animation examples: </li></ul><ul><ul><li>http://www.3cgraphics.com/ </li></ul...
What Can a Flash Animation Include? <ul><li>Vector-based graphics </li></ul><ul><ul><li>Has the ability to &quot;tween&quo...
Flash Environments <ul><li>Flash authoring environment </li></ul><ul><ul><li>Design environment (graphics tools) </li></ul...
Flash Files (&quot;Movies&quot;) <ul><li>Authoring file </li></ul><ul><ul><li>.fla  extension </li></ul></ul><ul><ul><li>T...
Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>C...
Flash Development Environment Properties panel Toolbox &quot;Stage&quot; Other panels Layers Timelines
Important Components <ul><li>Stage:  where the action takes place </li></ul><ul><ul><li>Be sure to set the stage dimension...
Important Components <ul><li>Timelines </li></ul><ul><ul><li>Every layer has a separate timeline </li></ul></ul><ul><ul><l...
Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>C...
Creating a Flash Movie <ul><li>Design the movie on paper </li></ul><ul><li>Determine the size  </li></ul><ul><ul><li>Heigh...
Designing a Flash Movie <ul><li>Design layers </li></ul><ul><ul><li>Items that stay static throughout the movie go in a Ba...
Adding a New Layer <ul><li>Click Insert Layer button in the Timeline panel </li></ul><ul><li>Rename the layer (double clic...
Working With Layers Active layer Hide layer Lock layer Insert layer Delete layer
Drawing With Flash <ul><li>Make sure to select the correct layer </li></ul><ul><li>Draw the item and position it on the st...
Timelines <ul><li>Consist of layers divided into  frames </li></ul><ul><ul><li>Frame: location and length of time that a s...
Timelines Playhead Frames Keyframe Colored area and arrow indicates animation
A __________ specifies the appearance of a layer at a given time. <ul><li>Timeline </li></ul><ul><li>Frame </li></ul><ul><...
A __________ specifies the starting or ending point of an animation sequence. <ul><li>Timeline </li></ul><ul><li>Frame </l...
A __________ specifies the appearance and movements of one part of a Flash movie. <ul><li>Timeline </li></ul><ul><li>Frame...
Creating Flash Animation <ul><li>Types of animation: </li></ul><ul><ul><li>Shape:  uses  shapes  you create in Flash </li>...
Creating a Shape Animation <ul><li>Create a new layer  </li></ul><ul><ul><li>Draw the shape at the start position </li></u...
Create the layer Create the keyframes Create the tween Create the initial shape With the ending keyframe selected, create ...
Creating a Motion Tween <ul><li>Same as shape tweening, but uses a  symbol  rather than a shape </li></ul><ul><ul><li>Allo...
Symbols <ul><li>Symbol:  reusable object </li></ul><ul><ul><li>Save an animation image as a symbols  </li></ul></ul><ul><u...
Saving Symbols <ul><li>Create a graphic in Flash then convert it to a symbol </li></ul><ul><ul><li>Right-click the graphic...
Stopping an Animation <ul><li>By default, animations play continuously when published </li></ul><ul><li>To configure an an...
Stopping an Animation Layer Frame number Command
Adding Sounds <ul><li>Create a sound layer </li></ul><ul><li>Create a keyframe when you want the sound to play </li></ul><...
You use a __________ tween to animate vector images, and a __________ tween to animate bitmaps. <ul><li>Shape, symbol </li...
__________ tweens can be used to morph one vector image into another. <ul><li>Shape </li></ul><ul><li>Motion </li></ul><ul...
Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>C...
Publishing <ul><li>Save distribution files </li></ul><ul><ul><li>File – Publish Preview – Flash or HTML to preview </li></...
Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>C...
Using Flash to Create Embedded Multimedia <ul><li>You can embed audio and video files in Flash documents and then publish ...
Creating Embedded Flash Audio <ul><li>Import the audio file to a Flash document </li></ul><ul><li>Create a timeline to sto...
Creating Embedded Flash Video <ul><li>File – Import – Import Video </li></ul><ul><li>You can import either a file or a URL...
Upcoming SlideShare
Loading in …5
×

Flash (ppt)

24,241
-1

Published on

6 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
24,241
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1,955
Comments
6
Likes
11
Embeds 0
No embeds

No notes for slide

Flash (ppt)

  1. 1. Introduction to Flash Animation CS 318
  2. 2. Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>Creating Flash animations </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Timelines </li></ul></ul><ul><ul><li>Creating animation </li></ul></ul><ul><ul><li>Adding sound </li></ul></ul><ul><li>Publishing animations on Web pages </li></ul><ul><li>Using Flash to create embedded multimedia </li></ul>
  3. 3. What is Flash? <ul><li>Defacto standard for creating complex animation sequences in Web pages </li></ul><ul><ul><li>Use animated GIFs for simple animation, Flash for more complex sequences </li></ul></ul><ul><li>Example flash sequence </li></ul>
  4. 4. Appropriate Use of Animation <ul><li>Do use animation to: </li></ul><ul><ul><li>Explain abstract concepts </li></ul></ul><ul><ul><ul><li>Chemistry simulation </li></ul></ul></ul><ul><ul><li>Create subtle special effects or transitions </li></ul></ul><ul><ul><ul><li>http://www.cbe.wsu.edu/~jsv/ </li></ul></ul></ul><ul><ul><li>Add creativity/playfulness to a site </li></ul></ul><ul><ul><ul><li>http://www.greenolive.co.uk/home.html </li></ul></ul></ul><ul><ul><li>Explain a series of events or a process that follows a specific timeline </li></ul></ul><ul><ul><li>Draw attention to a detail in a picture by making it move </li></ul></ul><ul><ul><ul><li>http://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.html </li></ul></ul></ul><ul><li>Don't : </li></ul><ul><ul><li>Use animation just for the sake of doing it </li></ul></ul><ul><ul><li>Force a user sit through a set sequence (always provide an exit or way to turn it off) </li></ul></ul><ul><ul><li>Overdue animation so it takes away from your site's goals </li></ul></ul>
  5. 5. Critical Analysis of Animation <ul><li>Poor animation examples: </li></ul><ul><ul><li>http://www.3cgraphics.com/ </li></ul></ul><ul><ul><li>http://manducatis.com/ </li></ul></ul><ul><ul><li>http://www.alser.co.uk/alserweb_001.htm </li></ul></ul><ul><li>What do you think of splash screens that users must click before entering a site? </li></ul><ul><ul><li>Example: http://www.kendrarenzoni.com/ </li></ul></ul>
  6. 6. What Can a Flash Animation Include? <ul><li>Vector-based graphics </li></ul><ul><ul><li>Has the ability to &quot;tween&quot; </li></ul></ul><ul><ul><ul><li>Automatically generates fill-in frames between a beginning and an ending image </li></ul></ul></ul><ul><li>Bitmap-based graphics </li></ul><ul><ul><li>Can be moved & rotated </li></ul></ul><ul><li>Embedded fonts </li></ul><ul><ul><ul><li>Can be moved, resized, skewed, rotated, recolored </li></ul></ul></ul><ul><li>Sound </li></ul><ul><ul><li>Can synchronize sounds with animation frames </li></ul></ul>
  7. 7. Flash Environments <ul><li>Flash authoring environment </li></ul><ul><ul><li>Design environment (graphics tools) </li></ul></ul><ul><ul><li>Scripting environment (create program code) </li></ul></ul><ul><ul><li>You can download a free trial version at http://www.adobe.com/ </li></ul></ul><ul><li>Flash player </li></ul><ul><ul><li>Users must have this installed on their workstations </li></ul></ul><ul><ul><li>If not present, automatically prompted to install when they start your animation </li></ul></ul>
  8. 8. Flash Files (&quot;Movies&quot;) <ul><li>Authoring file </li></ul><ul><ul><li>.fla extension </li></ul></ul><ul><ul><li>This file creates the design version of your animation </li></ul></ul><ul><li>Published file </li></ul><ul><ul><li>.swf extension (&quot;swiff&quot; file) </li></ul></ul><ul><ul><li>Can't be edited </li></ul></ul><ul><ul><li>Can play on most operating systems </li></ul></ul><ul><ul><li>Fairly small files </li></ul></ul>
  9. 9. Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>Creating Flash animations </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Timelines </li></ul></ul><ul><ul><li>Creating animation </li></ul></ul><ul><ul><li>Adding sound </li></ul></ul><ul><li>Publishing animations on Web pages </li></ul><ul><li>Using Flash to create embedded multimedia </li></ul>
  10. 10. Flash Development Environment Properties panel Toolbox &quot;Stage&quot; Other panels Layers Timelines
  11. 11. Important Components <ul><li>Stage: where the action takes place </li></ul><ul><ul><li>Be sure to set the stage dimensions before you do any development </li></ul></ul><ul><ul><li>This determines the animation's size on your Web page </li></ul></ul><ul><li>Layers </li></ul><ul><ul><li>Allow you to separate and stack objects </li></ul></ul><ul><ul><li>All layers cover entire the stage surface </li></ul></ul><ul><ul><ul><li>Like transparent pieces of paper stacked on each other </li></ul></ul></ul><ul><ul><li>Animation objects move within a layer </li></ul></ul>
  12. 12. Important Components <ul><li>Timelines </li></ul><ul><ul><li>Every layer has a separate timeline </li></ul></ul><ul><ul><li>Timeline is broken into frames that correspond to different times in the animation </li></ul></ul><ul><ul><li>When you select a frame, the stage shows what will appear in that layer at that time </li></ul></ul><ul><ul><li>The playhead shows the current frame that is playing </li></ul></ul>
  13. 13. Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>Creating Flash animations </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Timelines </li></ul></ul><ul><ul><li>Creating animation </li></ul></ul><ul><ul><li>Adding sound </li></ul></ul><ul><li>Publishing animations on Web pages </li></ul><ul><li>Using Flash to create embedded multimedia </li></ul>
  14. 14. Creating a Flash Movie <ul><li>Design the movie on paper </li></ul><ul><li>Determine the size </li></ul><ul><ul><li>Height and width in pixels </li></ul></ul><ul><li>Create the Flash file and configure the stage properties </li></ul><ul><ul><li>Size </li></ul></ul><ul><ul><li>Background color </li></ul></ul>
  15. 15. Designing a Flash Movie <ul><li>Design layers </li></ul><ul><ul><li>Items that stay static throughout the movie go in a Background layer </li></ul></ul><ul><ul><li>Items that have independent movements each go in their own layer </li></ul></ul><ul><ul><li>Sounds go in a separate layer </li></ul></ul><ul><li>Layer analysis: </li></ul><ul><ul><li>Moon Over Lake Nanagook </li></ul></ul>
  16. 16. Adding a New Layer <ul><li>Click Insert Layer button in the Timeline panel </li></ul><ul><li>Rename the layer (double click then type new name) </li></ul><ul><li>Add the content to the new layer </li></ul><ul><li>Layer order determines how items are stacked on each other in movie </li></ul>
  17. 17. Working With Layers Active layer Hide layer Lock layer Insert layer Delete layer
  18. 18. Drawing With Flash <ul><li>Make sure to select the correct layer </li></ul><ul><li>Draw the item and position it on the stage </li></ul><ul><ul><li>To select an item and its outline, double-click it... </li></ul></ul><ul><li>Configure its properties </li></ul><ul><ul><li>Similar to Fireworks </li></ul></ul>
  19. 19. Timelines <ul><li>Consist of layers divided into frames </li></ul><ul><ul><li>Frame: location and length of time that a symbol or graphic in a layer appears </li></ul></ul><ul><ul><ul><li>Default: 12 ms/frame </li></ul></ul></ul><ul><ul><ul><li>An item won't appear in a movie at a particular time unless its layer has a frame at that time </li></ul></ul></ul><ul><li>Playhead </li></ul><ul><ul><li>Indicates the current frame displaying on the stage </li></ul></ul><ul><li>Keyframe </li></ul><ul><ul><li>Frame that defines an object at a given point in time </li></ul></ul><ul><ul><li>Used to define animation starting and ending points </li></ul></ul><ul><ul><ul><li>Empty circle – keyframe with no content </li></ul></ul></ul><ul><ul><ul><li>Filled circle – keyframe with content </li></ul></ul></ul><ul><ul><li>When you make a new layer, it automatically has a keyframe in Frame 1 </li></ul></ul>
  20. 20. Timelines Playhead Frames Keyframe Colored area and arrow indicates animation
  21. 21. A __________ specifies the appearance of a layer at a given time. <ul><li>Timeline </li></ul><ul><li>Frame </li></ul><ul><li>Keyframe </li></ul><ul><li>Playhead </li></ul><ul><li>Stage </li></ul>
  22. 22. A __________ specifies the starting or ending point of an animation sequence. <ul><li>Timeline </li></ul><ul><li>Frame </li></ul><ul><li>Keyframe </li></ul><ul><li>Playhead </li></ul><ul><li>Layer </li></ul>
  23. 23. A __________ specifies the appearance and movements of one part of a Flash movie. <ul><li>Timeline </li></ul><ul><li>Frame </li></ul><ul><li>Keyframe </li></ul><ul><li>Playhead </li></ul><ul><li>Layer </li></ul>
  24. 24. Creating Flash Animation <ul><li>Types of animation: </li></ul><ul><ul><li>Shape: uses shapes you create in Flash </li></ul></ul><ul><ul><ul><li>Can change shape position and/or properties </li></ul></ul></ul><ul><ul><ul><li>Creates straight-line animation between a start position and an end position </li></ul></ul></ul><ul><ul><ul><li>Can only be used with vector images </li></ul></ul></ul><ul><ul><li>Motion: uses symbols you create or import into Flash (bitmaps) </li></ul></ul><ul><ul><ul><li>Can create straight-line animation between a start position and an end position </li></ul></ul></ul><ul><ul><ul><li>Can change the position or rotation of a symbol </li></ul></ul></ul><ul><ul><ul><li>Can &quot;kind of&quot; make a symbol morph into a different symbol </li></ul></ul></ul>
  25. 25. Creating a Shape Animation <ul><li>Create a new layer </li></ul><ul><ul><li>Draw the shape at the start position </li></ul></ul><ul><li>Create a keyframe at the start time </li></ul><ul><li>Create a keyframe at the end time </li></ul><ul><ul><li>With the end keyframe selected, modify the shape to its end size, position, & properties </li></ul></ul><ul><li>Select any frame between the beginning and ending keyframes and then create a &quot;tween&quot; </li></ul>
  26. 26. Create the layer Create the keyframes Create the tween Create the initial shape With the ending keyframe selected, create the final shape
  27. 27. Creating a Motion Tween <ul><li>Same as shape tweening, but uses a symbol rather than a shape </li></ul><ul><ul><li>Allows you to use bitmaps </li></ul></ul><ul><ul><li>Can be moved, resized, rotated, morphed to a different symbol </li></ul></ul>
  28. 28. Symbols <ul><li>Symbol: reusable object </li></ul><ul><ul><li>Save an animation image as a symbols </li></ul></ul><ul><ul><li>This saves file space because the symbol is only saved once </li></ul></ul><ul><li>Types of symbols: </li></ul><ul><ul><li>Graphics (can't be shape tweened) </li></ul></ul><ul><ul><li>Movie clips (self-contained animation within a movie) </li></ul></ul><ul><ul><li>Buttons (Up, Down, Over, OverWhileDown states) </li></ul></ul>
  29. 29. Saving Symbols <ul><li>Create a graphic in Flash then convert it to a symbol </li></ul><ul><ul><li>Right-click the graphic – Convert to symbol </li></ul></ul><ul><li>Import an existing graphic into a Flash symbol library </li></ul><ul><ul><li>File – Import – Import to Library </li></ul></ul><ul><li>To view your symbol library: Window - Library </li></ul>
  30. 30. Stopping an Animation <ul><li>By default, animations play continuously when published </li></ul><ul><li>To configure an animation to play once: </li></ul><ul><ul><li>Select the frame in which you want the animation to stop, right-click, click Actions </li></ul></ul><ul><ul><li>In the ActionScript window, type stop(); </li></ul></ul>
  31. 31. Stopping an Animation Layer Frame number Command
  32. 32. Adding Sounds <ul><li>Create a sound layer </li></ul><ul><li>Create a keyframe when you want the sound to play </li></ul><ul><ul><li>With target keyframe selected, drag the sound onto the stage </li></ul></ul>
  33. 33. You use a __________ tween to animate vector images, and a __________ tween to animate bitmaps. <ul><li>Shape, symbol </li></ul><ul><li>Motion, shape </li></ul><ul><li>Shape, motion </li></ul><ul><li>Symbol, shape </li></ul><ul><li>None of the above </li></ul>
  34. 34. __________ tweens can be used to morph one vector image into another. <ul><li>Shape </li></ul><ul><li>Motion </li></ul><ul><li>Both a and b </li></ul><ul><li>None of the above </li></ul>
  35. 35. Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>Creating Flash animations </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Timelines </li></ul></ul><ul><ul><li>Creating animation </li></ul></ul><ul><ul><li>Adding sound </li></ul></ul><ul><li>Publishing animations on Web pages </li></ul><ul><li>Using Flash to create embedded multimedia </li></ul>
  36. 36. Publishing <ul><li>Save distribution files </li></ul><ul><ul><li>File – Publish Preview – Flash or HTML to preview </li></ul></ul><ul><ul><li>File – Publish Settings to view file types </li></ul></ul><ul><ul><ul><li>.swf, .html, .gif, etc. </li></ul></ul></ul><ul><ul><ul><li>Select desired settings </li></ul></ul></ul><ul><ul><li>File – Publish to actually save files </li></ul></ul><ul><li>Use HTML to create a new HTML document </li></ul><ul><li>Use Flash (.swf) file to insert into an existing HTML document </li></ul><ul><ul><li>In Dreamweaver, Insert – Media - Flash </li></ul></ul>
  37. 37. Topics <ul><li>Introduction to Flash and animation </li></ul><ul><li>The Flash development environment </li></ul><ul><li>Creating Flash animations </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Timelines </li></ul></ul><ul><ul><li>Creating animation </li></ul></ul><ul><ul><li>Adding sound </li></ul></ul><ul><li>Publishing animations on Web pages </li></ul><ul><li>Using Flash to create embedded multimedia </li></ul>
  38. 38. Using Flash to Create Embedded Multimedia <ul><li>You can embed audio and video files in Flash documents and then publish them on Web pages </li></ul><ul><ul><li>Advantages: </li></ul></ul><ul><ul><ul><li>Most people have a Flash player installed on their computer </li></ul></ul></ul><ul><ul><ul><li>Gives you more control over object's appearance </li></ul></ul></ul>
  39. 39. Creating Embedded Flash Audio <ul><li>Import the audio file to a Flash document </li></ul><ul><li>Create a timeline to stop the audio </li></ul><ul><li>You can also create buttons to start and stop it, and add commands so it doesn't automatically play… </li></ul>
  40. 40. Creating Embedded Flash Video <ul><li>File – Import – Import Video </li></ul><ul><li>You can import either a file or a URL to a streaming server </li></ul><ul><li>You can also create buttons to start and stop it, and add commands so it doesn't automatically play… </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×