The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies Chapter 8 Flash: Part II

Objectives • Learn how frames and layers are used in a document’s Timeline to create animations • Learn how symbols are stored in a document’s library • Create animations including frame-by-frame and tweened animations • Create a mask layer and a motion guide layer • Create buttons with simple actions and sounds

Using the Timeline, Frames, and Layers

Using the Timeline, Frames, and Layers • The Timeline is used to control and coordinate the frames and layers that make up a Flash document • A frame represents a particular instant in time and contains the content of the Stage at that instant • each framemay contain different images or different states of the same image • each frame is displayed in succession, creating the appearance of movement • keyframes contain content that has changed from a previous frame • the frame rate determines how many frames are displayed each second

Using the Timeline, Frames, and Layers • Layers are used to organize the various graphic objects such as shapes, lines, and text that are part of a document • each row within the Timeline represents one layer • each document starts with one layer • more layers may be added as needed • modifying the content on one layer will not affect the content on other layers

Using the Timeline, Frames, and Layers • To extend the length of an animation you add more frames to a layer • Playhead • the playhead moves along the Timeline header indicating which frame is currently being displayed • Scrubbing • testing an animation by dragging the playhead back and forth through the frames

Using the Timeline to Test an Animation • Document vs. Movie • a document is the file you edit to create the animation; it is saved as a .FLA file • a movie is a published document; it is saved as a .SWF file and played by the Flash Player plug-in • the Flash Player comes installed with most new computers and can also be downloaded from the Macromedia Web site

Using the Timeline to Test an Animation • Other elements of the Timeline • Eye column: display or hide the contents of a layer • Lock column: lock or unlock a layer; the contents of a locked layer cannot be changed • Outline column: display the contents of a layer in an outline format

Using the Timeline to Test an Animation

Understanding Symbols and the Library • A symbol is a graphic element with special properties • Symbols are used to create certain types of animations and to add interactive elements to a document; there are three types of symbols • Movie clip symbols • contain their own Timeline and operate independently of the Timeline of the document in which they appear • Graphic symbols • can be either static images or animated images • they operate in sync with the Timeline of the document in which they appear • Button symbols • have their own four-frame Timeline • may be used to make the published movie interactive

The Library • Symbols are stored in a document’s library • The library also stores imported bitmap images and sounds • The Library panel is used to access, organize, and modify symbols in a document’s library Options menu control Symbol preview Symbols Delete icon New symbol button Properties icon

Symbol Instances • To use a symbol on the Stage you drag a copy of it from the Library panel • Instance • an instance is a copy of a symbol • you can have multiple instances of a symbol • the symbol is stored only once regardless of the number of instances created

Editing a Symbol • You can edit a symbol by placing it in symbol-editing mode • Changes made to a symbol are applied to all instances of that symbol • Changes made to an instance of a symbol do not affect the symbol or other instances of that same symbol

Animation • Animation is accomplished by changing the content of the Stage from one frame to the next and then displaying this content one frame at a time • Types of animation • Frame-by-frame animation • Tweened animation

Frame-by-Frame Animation • In a frame-by-frame animation you create the content for each frame • some of the content can be repeated in each frame • the content in other frames can be slightly modified to create the perception of movement • frame-by-frame animations are usually used to build more complex animations • frame-by-frame animations tend to produce larger sized files

Tweened Animation • In a tweened animation, Flash creates the in-between frames (hence, the term “tweened”) • content created based on the content of the starting and ending frames • tweening is the process Flash uses to create the individual frames • easier and quicker to create than a frame-by-frame animation • you only to need to create the content for two frames, the one at the beginning of the animation and the one at the end

Tweened Animation • There are two types of tweened animations • Motion tweens • used to create animations in which an object changes its position, rotates, changes in color, or fades in or out • Shape tweens • used to change a shape over time

Creating a Motion Tweened Animation Create an object in the first frame of the animation Convert the object to a symbol Symbol created Object in first frame

Creating a Motion Tweened Animation Create a keyframe in the frame where the animation will end and move the object to a different position or change its properties Keyframe Object repositioned

Creating a Motion Tweened Animation Instruct Flash to create a motion tweened animation starting in the first frame additional frames are created that contain the different states of the object as it transitions between the first and last frame Motion tweens

Creating a Motion Tweened Animation Adjust the motion tween using the Property inspector set the rotate to CW or CCW and specify how many times to rotate set the Ease value to control how fast the object starts or ends within the animation sequence Change the object’s Brightness Amount to make it fade in or out the Brightness Amount affects the relative lightness or darkness of an object An object’s Alpha Amount can also be used to create a fade effect

Creating a Shape Tweened Animation Create an object in the first frame of the animation Do not convert the object to a symbol Create a keyframe in the frame where the animation will end and change the shape of the object Use the Property inspector to instruct Flash to create a shape tweened animation starting in the first frame Text can also be used in a shape tween but it must first be converted to fills using the Break Apart command

Special Layers • Guide layer • can serve as a guide as you draw • example: a guide layer with a diagonal line which can be used as a guide to align graphic elements • the contents of a guide layer are not displayed in the final movie • Motion guide layer • a special kind of guide layer that provides a path for an object to follow when it is used in a motion tween • useful when you want to animate an object to move along an irregular path • draw the path with a tool such as the Pencil tool in the guide layer

Special Layers • Mask layer • contains a graphic object, such as an oval shape, through which the contents of one or more underlying layers will show • the content of the underlying layers is only visible when the mask layer’s graphic object is over it

Special Layers Mask layer example text will only be visible when the circle is over it Mask layer Masked layer

Special Layers • Motion guide layer • provides a path for an object to follow • draw a path in the motion guide layer using a tool such as the Pencil tool • create a motion tween of an object in the guided layer which is below the motion guide layer • the object in the guided layer follows the path in the motion guide layer

Special Layers Motion guide layer example object will follow path in the motion guide layer Motion guide layer Guided layer

Using Buttons, Actions, and Sounds • Buttons • provide an interactive element to a movie • buttons are symbols with the Buttonbehavior • button symbols have a Timeline consisting of only four frames • each frame represents a state of the button

Using Buttons, Actions, and Sounds • Each button has four frames in its Timeline • Up frame contains the button’s normal state • Over frame contains the content that shows what the button will look like when the mouse pointer is moved over it • Down frame contains the content that shows the button’s appearance when it is clicked • Hit frame does not affect the appearance of the button; it represents the clickable area of the button Four button frames

Using Buttons, Actions, and Sounds • Actions • code elements of ActionScript, Flash’s programming language • Flash provides many preprogrammed actions that you can access through the Actions panel • the Actions toolbox, located on the left side of the Actions panel, contains a list of folders that represent different action categories

Using Buttons, Actions, and Sounds • Actions panel • double-click a specific action to enter its code into the script pane on the right side of the Actions panel • add actions to button instances and not to button symbols Actions Action code Script pane

Using Buttons, Actions, and Sounds • Adding Sounds • add sound effects to buttons or add sounds that play during certain frames • sounds cannot be created within Flash • import sounds using the Importcommand from the File menu • sound files formats that can be imported • WAV, MP3, or AIF • a sound from a different document’s library can be dragged to the current document • sounds reside in the document’s library

Using Buttons, Actions, and Sounds • Adding Sounds • to add a sound from the library to a specific frame in your document • create a new layer • select the layer’s frame where the sound will play • use the Sounddrop-down list in the Property inspector to select the sound • the frame where the sound will play must be a keyframe

Using Buttons, Actions, and Sounds • Adding Sounds • to add a sound effect to a button • edit the button instance • select the button’s frame where the sound will play • drag the sound from the Library panel to the Stage or select the sound using the Property inspector

Using Buttons, Actions, and Sounds Adding Sounds the Sounds library contains sounds that can be added to a document

Using Buttons, Actions, and Sounds Button sound effect example a sound can be added to a button’s Down frame the sound will play when the button is clicked Waveform of sound added to Down frame

Using Buttons, Actions, and Sounds Adding Sounds a background sound can be added to a document place a background sound in a keyframe Waveform of background sound added at Frame 1

Publishing Your Movie Publishing publish a document in order to distribute it for use on the Web a published movie will play within an HTML page use the Publish Settingsdialog box to specify how to publish a document click Publish to create the necessary files, such as the .swf and .html files

Publishing Your Movie Select the file types in the Publish Settings dialog box The filenames for the published files can also be changed Filenames used when movie is published Select file types to publish

Summary • Animations can be created by placing different states of an image in different frames and then displaying the frames one after another • A document’s frames are coordinated by the Timeline • the Timeline’s playhead indicates which frame is currently being displayed • Layers are used to organize the images, animations, and other objects that make up a document • special types of layers include guide layers and mask layers

Summary • Types of animations include • frame-by-frame: create the content for each frame • tweened: create the content for the beginning and ending frames and Flash creates the in-between frames • Types of tweened animations • motion tweened animations are used to make an object move, rotate, or change in size or color • shape tweened animations are used to make an object change its shape

Summary • Objects used in motion tweened animations must be converted to symbols • Symbols are stored and organized in a document’s library • instances or copies of a symbol are created on the Stage • multiple instances can be created of the same symbol • an instance’s properties can be changed without affecting the symbol or other instances of the same symbol

Summary • Buttons are symbols with their own four-frame Timeline; buttons allow user interaction • rollover effects as well as sound effects can be added to buttons • actions are added to buttons to control a movie • A document is published to make it available on the Web • movies published for the Web have the .swf file extension • Flash creates the necessary HTML to play the movie in a browser

The Web Warrior Guide to Web Design Technologies