Introduction to Macromedia Flash 5.0 Using Macromedia Flash 5.

0
Macromedia Flash 5.0 is a powerful software application that allows users to create original vector animations for web development and other media. Flash is capable of creating animated menus and buttons perfect for any project, as well as website introductions and entire websites. Beyond the World Wide Web, Flash can be used to create self-contained modules that can be distributed on CD, a local intranet, and anything in between.

Menu
The menu used in Flash is very similar to any other windows based program. Exercise: Open a new movie by choosing File and clicking on New. Now save the movie to a location of your choosing by going to File and clicking on Save.

Timeline
Each scene in a Flash movie should be divided into several layers. The timeline is used to organize the scenes and their layers. Within each layer, there are frames and keyframes that contain the graphics, buttons, movie clips, etc.
The Scene Name is used for navigational references and design organization. The Layer Name is used for design purposes only. The Insert Layer button can be used to insert a new layer within the scene. The order of the layers is significant: the first layer in the sequence will appear on top of any other layers, etc. The Frame Label (indicated by a flag image) is used as a navigational reference and a label can be applied to any frame within the scene. A Comment (preceded by //) can be added to any frames within a given scene. The comment is used to aid in design only; it has no meaning in a navigational sense. An Action is marked by an a within a given frame. The presence of this symbol means there is action script associated with this frame. A Keyframe signifies an important frame within each layer.

For more information on how to use the Flash 5.0 timeline, visit http://www.macromedia.com/support/flash/basics/flash_timeline/ Exercise: Within the timeline, locate Layer 1 and rename the layer to Mouse. To do this, double-click on the existing layer name. Next, insert a new layer by clicking on the Insert Layer button, which is located directly below the list of layers. A new layer called Layer2 appears right above the Mouse layer. Rename this new layer to Home.
Page 1 of 5
Hide/Lock Layer Scene Name Label Comment Frame Action Playhead

Layer Name

Insert Layer

Keyframe Begin

Keyframe End

Current Frame Number

Last Modified: 9/13/2005

Toolbar
The toolbar in Macromedia Flash 5.0 is similar to toolbars associated with other Macromedia programs. The toolbar houses tools such as line drawing, text, shape drawing, fill, and erase. This is also where the color to a particular shape or line is changed. Exercise: From the toolbar, select the Circle tool. Draw a small circle on the right half of the drawing area. Make sure to draw the circle on the Home layer at frame one.

Panels
The panels used in Flash 5.0 are associated with various tools throughout the software and provide additional settings for each tool. To open a panel, go to Window, Panels, and then choose the appropriate panel to open. The Info panel provides information such as the size of a particular object as well as the color and position of the object. The Fill and Stroke panels contain information about the color of an object, as well as the color and width of a line. The Transform panel allows the user to change the size, rotation, and skew of a selected object. The user is able to select several objects and align, distribute, and match size within the Align panel. For more information regarding the panels used in Flash 5.0, visit http://www.macromedia.com/support/flash/basics/usingpanels/. Exercise: Double-click the circle you created earlier. Using the Fill panel, change the fill color to a color of your choice.

Library
The library houses three types of symbols: movie clips, buttons, and graphics. Symbols can be used many times throughout a movie and even modified slightly for each instance (each occurrence is called an instance). The use of symbols for reoccurring objects conserves file sizethe program has to remember only one version of the object and then apply the changes to each instance. The library can be separated into custom folders to organize the symbols.
Preview Area

Folder Button

Graphic

Movie Clips: are separate animations that run dependently of the main movie timeline; however, movie clips contain their own Movie Clip unique timeline. Movie clips can be embedded into an existing Insert Symbol/Folder movie to be used as a navigational menu (to control the main timeline) or a self-contained animation. Buttons: use their own timeline that contain the actions and appearances of each stage of a button, including up, over, down, and hit. Buttons cannot be activated without using ActionScript. Graphics: are the most common form of a symbol. Nearly all vector images can be converted to a graphic symbol, which can be used numerous times throughout a movie.

Page 2 of 5

Last Modified: 9/13/2005

To convert an existing graphic into a symbol, select the object, go to Insert, go to Convert to Symbol. On the following screen, type the name of the symbol and then choose the correct type of symbol. Flash will add a copy of this object into the library as a symbol. You can edit a symbol by right clicking on the symbol in the library and choosing Edit. When editing a symbol, keep in mind that the changes you are about to make will affect all instances of that symbol in the timeline. Although you can create a custom library of original symbols, Flash includes several Common Libraries to use that contain default graphics, buttons, and movie clips. Exercise: To open the Common Libraries, go to Window and click on Common Libraries. From the menu, choose Graphics. In the Graphics common library, locate the Mouse graphic. Click and drag the symbol into the Mouse layer of the drawing area; this will add an instance of the symbol to the layer. Make sure the mouse symbol is inserted into frame 1 of the layer. Position the mouse graphic on the left half of the drawing area.

Simple Animation
To create animation from one frame to another, Flash uses a motion tween. A motion tween can be added between two consecutive keyframes on a given layer. You can add a motion tween by right clicking on the keyframe and then choosing Create Motion Tween. Once the motion tween is in place, you may have to add the ending keyframe of the tween. This will complete the arrow within the purple frames (signifying a Motion Tween). With the ending keyframe selected, move the objects within the layer to the ending position. Once this is done, Flash will automatically create the middle positions of the object within each frame of the tween. Exercise: With frame 20 of the mouse layer selected, go to Insert and choose Frame. This should have created a 20frame key frame. Do the same for the Home layer. Next, right click on the key frame in the Mouse layer and choose Create Motion Tween. This should have changed the color of the key frame to purple and added the incomplete dotted arrow. Now, select the last frame of that layer (frame 20) and insert a keyframe (go to Insert, click on Keyframe). By inserting a keyframe, the tween should now appear complete. With frame 20 still selected, move the Mouse symbol so it appears on top of the circle. Move the playhead to frame 1 of the movie, then go to Control and choose Play (or press ENTER). As you watch the drawing area, notice the program plays the movie as it will appear once published. The mouse symbol should have moved to the circle. Now that we have the mouse symbol moving to its new home, lets also make him disappear (by fading away). Click on frame 25 of the Mouse layer. Go to Insert and choose Keyframe. This should add a shorter, 5-frame tween directly after the original tween. With frame 25 of the Mouse layer selected, display the Effect panel (Window, Panels, Effect.) From the pull-down menu, select Alpha. Set the Alpha level at 0%. Move the playhead to frame 1 of the movie and play the movie again (Control>Play or ENTER). Notice that once the mouse symbol moves to the new home, it fades away.
Page 3 of 5 Last Modified: 9/13/2005

Testing Movies
To test a movie, choose Control and then click on Test Movie. Flash will publish the movie into an optimized *.swf format. By choosing View and then making sure the Bandwidth Profiler is selected, you can view a graph of each frame and the respective file size. This helps when deciding which frames and symbols are causing the flash movie to play slowly over the internet. Also in the test movie area, Flash will play the movie as how it will behave over various internet connect speeds. To change the speed it will demonstrate, choose Debug and then click on the connection speed you wish to test. Once you have selected the connection speed, choose View and then click on Show Streaming. This will load and play the movie similarly to how the movie will behave over the internet at the selected speed. Exercise: Now that we have the movie created within the drawing area, we need to test the movie. To do this, go to Control and choose Test Movie. Once Flash is finished publishing the movie into an optimized *.swf format, the movie will begin to play within the Test Movie area. To return to the drawing area, simply close the Test Movie window.

Publishing Movies
Although the Test Movie operation with Flash does create a *.swf file of the movie, you must still publish the movie into a non optimized format when complete. To publish a movie, choose File and then click on Publish Settings. This will display a menu where you can choose which file types you would like Flash to export. Once you click on each file type, another tab will be added at the top of the dialog box. This tab will contain more specific settings for each file type to be exported. The table below explains the most common file types associated with Macromedia Flash and a brief description of each of their uses. Exercise: For the purposes of this tutorial, we would like to publish the movie into a flash format that can be viewed over the internet. To do this, go to File and choose Publish Settings. Make sure that the *.swf and *.html types are selected from the menu. Nothing else should be selected. To finalize the publishing process, click Publish at the right of the dialog box. Once finished, the movie can be viewed by opening the html file within a Flash-capable browser.

Page 4 of 5

Last Modified: 9/13/2005

File Formats Associated with Flash

Extension *.fla *.swf Format raw test movie, published Viewer Flash Flash plug-in; Flash Player Use Version to be edited Commonly embedded in html pages Advantages N/A Most websites use this format for flash movies, can also view without web browser Real Media Player is common and easily downloaded; small file size Fully interactive; Most computers are capable of viewing this file type correctly; Easily distributed on CD Disadvantages N/A Requires plug-in or software

*.smil

published

Real Media Player

Good for linear/automatic presentations CDs

*.exe

published

Window Projector

Does not recognize some action script commands of Flash 5.0 File size too large for web

Online Resources
Macromedia Support Center: http://www.macromedia.com/support/flash/ Flashkit: http://www.flashkit.com/ Flashplanet: http://www.flashplanet.com/ ExtremeFlash: http://www.extremeflash.com/ CNET: http://www.builder.com/

Copyright 2003 by ITRC This document may be reproduced for individual or nonprofit use. Users acknowledge that the manual, and all copyright and other intellectual and proprietary rights therein, are and at all times shall remain the valuable property of Idaho State University Campus Box 8064 Pocatello, ID 83209 208.282.5880 the author. Users agree to respect and not to alter, remove or conceal any copyright, trademark, trade name or other proprietary marking that may appear in the manual. Please send comments to itrc@isu.edu. For more information about the ITRC, visit our Website at http://www.isu.edu/itrc.

Page 5 of 5

Last Modified: 9/13/2005