Flash (ppt)
Upcoming SlideShare
Loading in...5
×
 

Flash (ppt)

on

  • 14,967 views

 

Statistics

Views

Total Views
14,967
Views on SlideShare
14,957
Embed Views
10

Actions

Likes
7
Downloads
1,094
Comments
4

1 Embed 10

http://www.facebook.com 10

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Flash (ppt) Flash (ppt) Presentation Transcript

    • Introduction to Flash Animation CS 318
    • 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
    • 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
    • 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
    • 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/
    • 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
    • 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
    • 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
    • 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
    • Flash Development Environment Properties panel Toolbox "Stage" Other panels Layers Timelines
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Working With Layers Active layer Hide layer Lock layer Insert layer Delete layer
    • 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
    • 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
    • Timelines Playhead Frames Keyframe Colored area and arrow indicates animation
    • A __________ specifies the appearance of a layer at a given time.
      • Timeline
      • Frame
      • Keyframe
      • Playhead
      • Stage
    • A __________ specifies the starting or ending point of an animation sequence.
      • Timeline
      • Frame
      • Keyframe
      • Playhead
      • Layer
    • A __________ specifies the appearance and movements of one part of a Flash movie.
      • Timeline
      • Frame
      • Keyframe
      • Playhead
      • Layer
    • 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
    • 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"
    • Create the layer Create the keyframes Create the tween Create the initial shape With the ending keyframe selected, create the final shape
    • 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
    • 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)
    • 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
    • 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();
    • Stopping an Animation Layer Frame number Command
    • 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
    • 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
    • __________ tweens can be used to morph one vector image into another.
      • Shape
      • Motion
      • Both a and b
      • None of the above
    • 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
    • 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
    • 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
    • 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
    • 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…
    • 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…