Your SlideShare is downloading. ×
Flash (ppt)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flash (ppt)

18,899

Published on

5 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,899
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1,502
Comments
5
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×