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 Example

Appropriate Use of Animation Do use animation to:  Explain abstract concepts Chemistry simulation  Create subtle special effects or transitions  Add creativity/playfulness to a site  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 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:    What do you think of splash screens that users must click before entering a site?  Example:

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 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 LayersTimelines

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 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 layerDelete 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. a. Timeline b. Frame c. Keyframe d. Playhead e. Stage

A __________ specifies the starting or ending point of an animation sequence. a. Timeline b. Frame c. Keyframe d. Playhead e. Layer

A __________ specifies the appearance and movements of one part of a Flash movie. a. Timeline b. Frame c. Keyframe d. Playhead e. 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. a. Shape, symbol b. Motion, shape c. Shape, motion d. Symbol, shape e. None of the above

__________ tweens can be used to morph one vector image into another. a. Shape b. Motion c. Both a and b d. 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…