Introduction To Flash MX 2004

University of Florida 2005 Jennifer Smith CITT

Table of Contents
Objectives ................................................................................................. 3 Flash Applications .................................................................................... 3 Challenges................................................................................................. 3 Getting Started .......................................................................................... 4 Tool Bar ........................................................................................................ 4 Editing Shapes .............................................................................................. 5 Screen Elements............................................................................................ 6 Animation ................................................................................................. 7 Timeline Elements ........................................................................................ 7 Document Setup............................................................................................ 7 Shape Tween................................................................................................. 8 Creating Motion........................................................................................ 9 Symbols ........................................................................................................ 9 Motion Tween............................................................................................. 10 Changing the Properties of an Instance ...................................................... 10 Movie Control......................................................................................... 11 Actions Panel .............................................................................................. 11 Buttons ........................................................................................................ 12 Motion Guides ........................................................................................ 13 Publish .................................................................................................... 13 Resources ................................................................................................ 14 Common Shortcuts ................................................................................. 14

University of Florida 2005 Jennifer Smith CITT

Introduction to Flash
Objectives Workshop participants will learn some of the features of Flash and how to create a basic animation. Upon completion of this class, participants will be able to draw shapes, edit them, animate them and control the movement with a button. During this workshop, we will create an animation showing two Hydrogen molecules combining with an Oxygen molecule to create water. Flash Applications Create animations. Manipulate imported images. Incorporate audio. Embed video. Provide opportunities for interactivity. Challenges Viewing requires the Flash Player (free). This viewer is preinstalled on many browsers. The Flash Player can be downloaded from the Macromedia website: http://www.macromedia.com A flash file may require significant download time. This is a concern for dial-up users.

University of Florida 2005 Jennifer Smith CITT

Getting Started

Upon opening the program, select Create New > Flash Document from the opening screen. You can also go to the top menu bar and select File > New.

Tool Bar
Flash provides more than one way to do most things. Mouse over each icon to view its name and the keyboard shortcut. Features such as line width and color can be changed in the Properties Panel. Some tools have additional Options which are disiplayed at the bottom of the tool bar. Line Tool: When this tool is selected, click and drag the mouse to draw a line. Change the line color, width, and style in the Properties panel. You can also change the lines you have drawn using the ink bottle tool. Lasso Tool: Select portions of images in a freehand manner using this tool. Pen Tool: Uses Bezier points as handles to create shapes. Text Tool: Add text to your animation using this tool. Select font, size, color, and format in the Properties panel. Oval and Rectangle Tools: Draw the shape starting at the upper left hand corner. Hold the mouse down and drag diagonally to the lower right hand corner. Hold the shift key down to create a perfect circle or a square. Pencil Tool: Allows you to draw freeform shapes with the mouse. Use the Options to straighten or smooth the lines. Click on the Colors to change the color of the line.

TASK Create circle with a blue outline and red fill. Change the solid red fill to a gradient. Move the highlight of the gradient to the top of the circle.

University of Florida 2005 Jennifer Smith CITT

Paint brush: This tool allows you to draw a very wide shape. Use the Fill color to select the paint brush color. Change the width and type of line using the Options menu. Free TransformTool: Select your object and use this tool to change its shape. Fill Transform: Use this tool to manipulate gradients. Create gradients by using the Color Mixer panel (Window > Design Panels > Color Mixer). Ink Bottle Tool: This tool allows you to add or change the outline of a graphic. Paint Bucket Tool: Use the paint bucket to add a fill or to change the fill color of a graphic. Eyedropper Tool: Select this tool to match an existing color. It will change the fill in the colors portion of the tool panel to the selected color. Erase Tool: Erase areas of your drawing. Double click the eraser to erase everything on the stage. Hand Tool: Move the stage around on the work area using this tool. Zoom Tool: This tool allows you to zoom in or zoom out (press the Alt key while clicking the mouse to zoom out). Stroke Color: The outline color is indicated by the pencil icon. It can be changed by clicking on the color box next to the pencil. Fill Color: The inner color of a shape is indicated by the paint bucket. It can be changed by clicking on the color box next to the paint bucket.

Editing Shapes
Selection Tool: Use the Black Arrow to select portions of objects to edit. Click on the upper left hand corner and drag to the lower right hand corner to select an area to edit. Double click on an object to select the entire object. Subselection Tool: Use the White Arrow to edit objects using the Bezier handles. Overlapping Objects: Overlapping objects with the same fill and stroke properties will be joined together. An object overlapping another object

University of Florida 2005 Jennifer Smith CITT

TASK Draw a circle. Select the circle with the subselection tool. Use the Besier handles to change the circles shape.

with different fill and stroke properties will cut away from the object underneath.

Properties Panel: This panel will change depending upon the tool that is selected. Use the selection tool to select an object or portion of an object and choose the desired attributes from the properties panel. Grouping: Shapes can be grouped to keep them together, or to keep them from joining. - Use the Selection tool to select the object(s) to be grouped. - Select Modify > Group (Ctrl + G).

Screen Elements

TASK Add a new layer. Draw a red circle on one layer and a smaller blue circles on the other. Lock the layers.

Stage: The center portion of the screen shows the actual area of the animation. Work Area: The grey area around the stage. Objects can enter the Stage from the work area.

Timeline: Control the entrances and exits of objects. Layers: Organize multiple objects. - Click on the icon at the lower left corner of the layers menu to add a layer. - Layers can be dragged up and down. - Double click on the layer bar to label the layer. - The pencil indicates that you may edit this layer. - Click on the dot underneath the eye to hide the selected layer. - Clicking on the dot underneath the lock will keep you from accidentally editing a layer. - Clicking on the colored box will show the object outlines.

University of Florida 2005 Jennifer Smith CITT

Animation

Timeline Elements

TASK Create a new layer. Copy the keyframe with the blue ball to the new layer.

Playhead: View the changes in the animation by dragging the playhead along the timeline. Keyframe: Indicates a point in time when something changes. - To create a keyframe: right click on the timeline to open the Frames menu, select Keyframe (F6). - To remove frames, left click and drag mouse to select frames, right click to open the Frames menu, select Remove Frames (shift + f5). Blank Keyframe: Create an empty keyframe (F7). Copy Frame: Right click on the frame you wish to copy. This opens the Frames Menu. Select Copy Frame. Then left click on the frame you wish to copy to. Select Paste Frame. Frames Per Second: The speed at which the animation should run under ideal circumstances (the speed is affected by the speed of the computer viewing the animation). Change the frames per second by double clicking on the fps button.

Note: -

Generally, there is more than one way to reach a particular command: Through the main menu at the top of the screen. Use the keyboard short cut. The Properties panel may contain the feature you wish to edit. Right clicking on the object opens up a menu that may contain the command you need. Sometimes the object or tool must be selected before the correct menu or tool is available.

Document Setup
University of Florida 2005 Jennifer Smith CITT

TASK Open the Document Properties dialog box. Change the frame rate to 20 fps.

Document Properties Panel: Open the Document Properties dialog box using one of the following methods: - Select Modify > Document. - Double click on the fps button at the bottom of the timeline. - The keyboard shortcut is Ctrl+ j. Select Frame Rate: A frame rate of 20 frames per second creates a smooth animation that will run on most computers. Make Default: Use the current document properties as the default by selecting the Make Default option.

Shape Tween

TASK Create a shape tween between a square and polygon.

Create a keyframe. Draw an object on the stage with the keyframe selected. Insert a keyframe (F6 or Insert > Timeline > Keyframe) at the point you wish to end the animation. With the last frame selected, change the object in the blank keyframe. Go back to the first keyframe of the animation.

University of Florida 2005 Jennifer Smith CITT

Select Shape Tween from the Properties Panel.

Use the Onionskin tool at the bottom of the timeline to help align objects. Test the movie by: - Select Control > Test Movie. - Use the keyboard shortcut Ctrl + Enter. Creating Motion

Symbols
A symbol is a reusable element. It decreases the file size of your animation. The symbols are stored in the Library. Create a new instance of a symbol by dragging the element from the library to the stage. Convert objects to symbols: - Use the direct selection tool to double click on the object to select the entire object. - Right click to open the edit menu. - Select Convert to Symbol. - Name the symbol. - Select the symbol behavior: Movie clip, Button, or Graphic.

TASK Create a red circle with a blue outline. Change it into a symbol. Drag one instance of the circle onto the stage.

University of Florida 2005 Jennifer Smith CITT

Create a new symbol: - Select Insert from the top menu. - Select New Symbol (ctrl + F8) - Name the symbol. - Select the symbol Behavior: Movie clip, Button, or Graphic.

Motion Tween
TASK Create a motion tween that moves the red circle across the stage. Add two new layers. Draw a blue circle on each layer. Tween the blue circles so they join the red circle.

The motion tween behavior must be applied to a symbol or a group. Insert a keyframe in the timeline (F6). Drag a symbol on the stage with the keyframe selected. Insert another keyframe (F6) in the timeline at the point you wish to end the animation. Move the object to the end position using the direct selection tool. Select the first keyframe of the animation. Select Motion Tween from the Properties Panel. Test the movie by: - Select Control > Test Movie. - Use the keyboard shortcut Ctrl + Enter.

Note: You cannot use Shape Tween with a symbol, nor can you use Motion Tween for a graphic that is not a symbol. Do not worry about whether you are want the shape or motion to change, just use the appropriate tween for the object.

Changing the Properties of an Instance

When a symbol is edited, all instances (appearances) of that symbol are changed. However, it is possible to change the color of a graphic instance using the Properties panel and shape using the Free Transform tool.

University of Florida 2005 Jennifer Smith CITT

10

TASK Change the color of the final instance of the red circle in the previous animation.

Using the direct selection tool, select the instance you wish to edit. Select the color attribute you wish to change from the drop down Color menu. Test the movie by: - Select Control > Test Movie. - Use the keyboard shortcut Ctrl + Enter. Movie Control

Interactivity is one of the most important features of Flash.

Actions Panel

TASK Add a stop action at the end of the previous animation.

Create a stop action to keep the movie from looping. Add a new layer and label it actions. Press F6 to add a new keyframe in the actions layer on the last movie frame. With the last frame selected in the actions layer, open the Actions Panel > Global Functions > Timeline Control, and double click on stop.

University of Florida 2005 Jennifer Smith CITT

11

Buttons
Allow the user to control the movie through the use of buttons. Create a new layer. Label it Buttons. Utilize pre-made buttons by selecting Window > Other Panels > Common
Libraries > Buttons.

TASK Add a replay button to the previous animation.

Select the first keyframe on the Buttons layer. Select the Playback folder from the Buttons.fla library. Drag the playback - loop button onto the stage.

TASK Add a play button the previous animation. Apply an action to the button so that the playhead returns to frame 1.

Add actions to the instance of the button. - Select the stop button on the stage. - From the Actions panel select Movie Clip Control > on > release. - Place the cursor inside the bracket: { }. - Choose Global Functions > Timeline Control > gotoAndPlay(); - The hint box will ask for the frame number. Type 1 inside the parenthesis. - The code should look like this: on (release) { gotoAndPlay(1); } Test the movie by: - Select Control > Test Movie. - Use the keyboard shortcut Ctrl + Enter

University of Florida 2005 Jennifer Smith CITT

12

Motion Guides Control the path of your animation through the use of Motion Guides. Select one of the blue circle layers.
TASK Add a motion guide to one of the hydrogen molecules.

at the bottom of the timeline. This Click on the Motion Guide icon adds a new layer and indents the blue circle layer. Lock all of the layers except the motion guide layer. This will keep you from accidentally drawing in the wrong layer. Select the first frame of the Motion Guide layer. Select the Pencil tool from the tool box. Choose the Smooth option. Draw a line for the blue circle to follow. It does not matter what color the line is. Unlock the blue circle layer and lock the guide layer. Go the first frame of the animation and move the blue circle until the center snaps into place at the end of the motion guide line. If it does not snap, check to make sure that you have the snap enabled by going to View > Snapping. Make sure that Snap to Objects is checked. Repeat the process with the last frame of the animation. Publish

TASK Export your Flash movie as a .swf. Test your movie.

The .fla format is editable. Your flash movie needs to be converted to a different format for use on the web. Select File > Publish Settings > Flash tab Select the options you prefer. Recommended options: - Load order: Select Top down. - Protect from import (there are still programs that can open your .swf). - Compress movie. Select the HTML tab: - Select an HTML template (if animation will be used on website.) - Check Detect Flash Version. Once your settings have been established, select File > Publish. - The .swf file will be saved in the same folder as your .fla file. - The new .swf file will be given the same name as the .fla file.

University of Florida 2005 Jennifer Smith CITT

13

Resources Flash Developer Center: Drawing. Online tutorials. Macromedia, Inc. December 2005 <http://www.macromedia.com/devnet/flash/drawing_graphics.html>. Lynda.com Online Training Library. Home page. December 2005 <http://www.lynda.com>. Rebenschied, Shane. Learning Macromedia Flash MX 2004. Online or CD format training video. December, 2005 <https://movielibrary.lynda.com/html/modPage.asp?ID=63>. Yeung, Rosanna. Macromedia Flash MX 2004 Hands-On Training. Berkeley: Peachpit Press. 2003.

Common Shortcuts Shortcut F5 Shift + F5 F6 F7 F8 F9 Ctrl + 1 Adds a clear frame Remove frame Adds keyframe (duplicate of the frame before) Adds a blank key frame (empty) Convert selection to symbol Open actions panel Zoom to full size

University of Florida 2005 Jennifer Smith CITT

14