About

bull; bull;Learn quickly by doing and practice what you've learned on challenging, realistic jobs bull;Prepared according to professional standards determined by national associations bull;Written by training professionals and developed specifically for those in the computer arts industry bull;Includes tips from experts in the field

Documents

Macromedia Flash 5

Prepared by Mohamed Radwan
Macromedia Flash 5, the Web standard for vector graphics and animation, is currently one of the hottest programs around for creating highly interactive, animated Web Sites. Whether you are creating animated logos, Web site navigation controls, longform animations, entire Flash Web sites, or Web applications, you find the power ll and flexibility of Flash ideal for your own creativity. Table of Contents: o Difference between Vector and Bitmap graphics o Opening the Macromedia Flash program o The Flash Interface o Quick overview on the Toolbar o Working with Frames o Working with layers o Creating a Movie o Creating Animation 1. Frame by Frame animation 2. Tweened animation a. Motion Tween b. Shape Tween o Symbols 1. What a symbol s 2. Types of symbols o Scenes and Libraries o Layers 1. Normal 2. Mask 3. Guide o Importing and Exporting
Difference between Vector and Bitmap graphics
Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats can help you work more efficiently. Flash lets you create and animate compact vector graphics. It also lets you import and manipulate vector and bitmap graphics that have been created in other applications. Vector is a new type of graphic compression for the World Wide Web. This Leaf is a bitmap graphic. At 100% it still looks clear and crisp. Once this same leaf is blown up to 700% (or x7) the image loses its crispness, and looks jagged. That's because Bitmap graphics need a certain amount of pixels to create an image.

Bitmap graphic

Vector graphic
Vector, on the other hand, just uses measurements." MEANING, that when the image is blown up to a bigger size it's the same image, but different size. Not the same pixels stretched into bigger shape. Vector allows for much faster and cleaner web graphics.
Opening the macromedia Flash program
o o o o To run this program, press the Start button A menu pops up, choose Programs Another menu will pop up, choose Macromedia Flash 5 From the new pop up menu, choose Flash 5

The Flash Interface

Open Flash and you will see the following:
o Like films, Flash movies divide lengths of time into frames. The Stage is
where you compose the content for individual frames in the movie, drawing artwork on it directly or arranging imported artwork.
o The Timeline is where you coordinate the timing of the animation and
assemble the artwork on separate layers. The Timeline displays each frame in the movie.
o Layers act like stacked sheets of transparent acetate, keeping artwork separate
so you can combine different elements into a cohesive visual image
Quick overview on the Toolbar
The image above is Flash's toolbar. Click on the different icons to see what each tool function does. When ever you click on a tool you will notice it's properties appear as icons below the Tool Bar. Make sure you click around to experiment with these so you can gain an understanding of Flash's functionality. Heres a quick overview on the necessary tools:

Arrow:

This tool is used to select individual objects or frames. It also acts as a marquee for selecting multiple objects. It operates the tool bar and menu systems. Etc.

This tool does what the title suggests. It draws lines. Useful for drawing polygons and other weird shapes the Oval and Rectangle tools can't deal with.

Lasso:

This is used for selecting single or multiple objects in hard to reach places by allowing you to draw a line which then becomes the selection.
This tool allows the designer to create text in a movie or to create text fields.
A very useful tool which allows the designer to create circles and ovals of any size. Remember: When you draw a oval, Flash creates a border around it if you have a border color selected. So if you don't want it, you can either turn the border color off or click on the border of the object, this will highlight the border, and delete it.

Rectangle:

Another useful tool and you guessed it! It draws squares. You can change the background and border color using the color options in the toolbar. If you wish to s select the border, using the Arrow tool, click on the border once to highlight one side, double clicking will highlight the entire border.

Pencil:

This tool draws freehand lines. Useful for strange Motion paths etc. In addition some bright sparks at Macromedia have granted you the ability to straighten and smooth the ravages of your unsteady hand.

Brush:

The Brush tool is similar to the pencil but it allows you to create thicker objects

Ink Bottle:

This tool creates lines around objects. For example, after selecting the tool and clicking on a circle object it will create a circular line around it. This can then be turn into a separate object.

Paint Bucket:

This will fill objects with a color of your choosing. Also can be used to create gradients.

Dropper:

Use the eyedropper tool to copy fill and stroke attributes from one shape or line and immediately apply them to another shape or line. The eyedropper tool also lets you sample the image in a bitmap to use as paint.

Eraser:

Pretty self explanatory.
This tool moves your whole movie around the stage and saves you from having to select everything or move individual frames.
You will be able to zoom in on your stage and objects with this tool. Holding down the "Alt" key will change the pointer to a "minus" sign. This will enable you to zoom out. The Toolbox still contains modifiers for Stroke and Fill color, and three new buttons let you quickly set the default stroke (black) and fill (white), choose no color for stroke or fill, and swap the current stroke and fill colors.

Working with Frames

A key frame is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a key frame. In key frame (tweened) animation, you define key frames at important points in the animation and let Flash create the content of frames in between. Flash displays the interpolated frames of a tweened animation as light blue or green with an arrow drawn between key frames. Flash redraws shapes in each key frame. You should create key frames only at those points in the artwork where something changes. In order to create a Key Frame, select the relevant frame and choose Insert> Insert Key frame or right click your mouse on the frame for the same menu. Once you've inserted the key frame a hollow dot will appear in the frame.
Tips: o You can also left click the frame and press the F6 key. o When the dot is: 1. Hollow - it means no symbol is present in that frame. 2. Solid - it means a symbol is present in that frame.

Working with Layers

Layers are simply transparent sheets that are placed on top of each other. These layers can be shuffled and moved around, added and deleted. Layers organize your movie and allow you to affect an object without affecting the rest of your movie. Special layers can be created which allow you to draw and edit with greater ease and create some really nice effects. However, this will be dealt with later.
To begin with, a new Flash movie only contains one layer. Flash graphically represents each layer as one horizontal section of the Timeline and provides several controls for viewing and manipulating these layers. Flash layers offer several features that make it easier to work with graphics on layers, such as viewing the items on layers as outlines and assigning different colors to those outlines so you can easily see which items are on which layers. You can lock layers so you don accidentally edit t their contents, and you can hide layers to make it easier to work with individual graphics in a welter of other graphics. You can create special guide layers for help in positioning elements, masks for selectively hiding and revealing layers, and guides for animating motion along a path.

Add / Delete Layers

To add a new layer to your movie, choose Insert> Layer. You'll see "layer 2" appear above "layer 1". Keep this in mind for when you're inserting layers in a movie with heaps of layers. Alternatively you can click on the small white page icon that has a "+" sign on it. To remove these layers click on the trashcan icon to the right of the "plus" button.

Types of Layers

Normal layer
The normal layer is just a simple layer that contains frames loaded after each other

Mask layer

For spotlight effects and transitions, you can use a mask layer to create a hole through which the contents of one or more underlying layers are visible.

Guide layer

For help when drawing, you can use guide layers. Guide layers do not appear in a published Flash Player movie. You can also create a motion guide layer to control the movement of objects in a motion tweened animation.

Creating a Movie

Each time you open Flash, the application creates a new file, with the FLA extension. You can create additional new movies as you work. To set the size, frame rate, background color, and other properties of a new movie, you use the Movie Properties dialog box.
To create a new movie and set its properties: 1 Choose File > New.
2 Choose Modify > Movie. The Movie Properties dialog box appears. 3 For Frame Rate, enter the number of animation frames to be displayed every second. For most computer-displayed animations, especially those playing from a Web site, 8 fps (frames per second) to 12 fps is sufficient. (12 fps is the default frame rate.) 4 For Dimensions, choose one of the following options: o To specify the Stage size in pixels, enter values for Width and Height. The default movie size is 550 x 400 pixels. o To set the Stage size so that there is equal space around the content on all sides, click Match Content. o To set the Stage size to the maximum available print area, click Match Printer. 5 To set the background color of your movie, choose a color from the Background color swatch. 6 Select the unit of measure from the Ruler Units pop-up menu for rulers that you can display along the top and side of the application window.

Creating Animation

There are two methods for creating an animation sequence in Flash: o Frame-by-frame animation o Tweened animation

Frame by Frame Animation

In frame-by-frame animation you create the image in every frame. A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. When running those frames quickly, any one sees it, will feel that it really moving. s To start creating an animation, carry out: 1. Run Flash 5 from the start menu, Click on Modify, then Movie from the pulldown menu to set the movie properties. 2. Use the Ellipse tool to create a small circle (using Shift key) on the lower-left side of the stage. Choose a Blue Gradient Fill Color. 3. Use the Edit, Select All command (or double-click over the ellipse) to select this object. Use the Modify Group command to make a grouped object. 4. Create a keyframe every five frames up to Frame 25 using the F6 key. 5. Go to Keyframe 5 and move the ellipse to the right and up to the top of the stage. Repeat this at Keyframes 10, 15, 20 and 25 so that when you are done, you have moved the ellipse all the way across the stage from left to right. 6. Play the Play button from the Control options to view this animation.

Tweened Animation

In tweened animation, you create starting and ending frames and let Flash create the frames in between. Flash varies the object's size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement.Tweened animation is an effective way to create movement and changes over time while minimizing file size. In tweened animation, Flash stores only the values for the changes between frames. In frame-by-frame animation, Flash stores the values for each complete frame. There are two types of tweened animation: motion and shape. In motion tweening, you set properties such as position, size, and rotation of a symbol at one Keyframe and then change these properties at another Keyframe. In shape tweening, a shape is drawn in one Keyframe and then changed in another Keyframe. Flash then interpolates the information from the first Keyframe to the second Keyframe causing the changes to take place, thus creating the animation.

Motion tween

You can create a motion tween using one of two methods: o Create the first keyframe for the animation, and then choose Insert > Create Motion Tween and move to the last frame of the animation and press F6 to create a keyframe, then in this last frame, move the object to the new location on the Stage.
o To create a simple Motion tween, we can reuse the file we made while making frame by frame animation: 1. Open the file that you worked with earlier. 2. Right-click over Keyframes 1, 5, 10, 15, 20 and choose Create Motion Tween. 3. A solid arrow between the Keyframes will appear and the Frames turn blue, indicating a Motion Tween.

Shape tween

Shape tweening is turning one shape into another over time. To achieve this in flash we tween shapes and its attributes like, size, location and color of shapes between two keyframes. As a general rule it is best to separate your shape-tweens in different layers to keep things nice and simple. Flash can tween numerous shapes on one layer. To tween a shape: 1. Create a new layer, name it and create a blank keyframe. This will be the starting point for your shape-tween. In this keyframe use the drawing tool or the text tool to create your initial image. Ensure that, what ever you create is broken apart. To do this chooses Modify> Break Apart. 2. Create a second blank keyframe, and in it place your final image. Again ensure that your text or drawing is broken apart. At this point you can also add any changes to position and color. 3. To create the tween we now select the first keyframe and open the Frame Properties box (Modify> Frame) and click on the FrameTab. 4. Next select Shape from the Tweening pop-up menu. The dialog box should look like this.
Here you can select the Blend Type. This determines how flash will perform the tween: Distributive is a smoother transition and a lot more irregular. Angular maintains corners and straight lines during the transition. You can also modify whether the animation is faster at the beginning of the tween, constant throughout or faster toward the end of the tween with the use of the Easing Slider. 5. A solid arrow between the Keyframes will appear and the Frames turn green, indicating a Shape Tween.
6. Play the Play button from the Control options to view this animation.
Note: Flash can't shape-tween symbols, groups, text blocks, or images.

Symbols

What a symbol s
A symbol is a graphic, button, or movie clip that you create once and then can reuse throughout your movie or in other movies. Any symbol you create automatically becomes part of the library. An instance is a copy of a symbol located on the Stage or nested inside another symbol.

Types of symbols

Each symbol has a unique Timeline and Stage, complete with layers. When you create a symbol, you choose how the symbol will behave, depending on how you want to use it in the movie. o Use graphic symbols for static images and to create reusable pieces of animation that are tied to the Timeline of the main movie. Graphic symbols operate in sync with the Timeline of the main movie. Interactive controls and sounds won't work in a graphic symbol's animation sequence. Use button symbols to create interactive buttons in the movie that respond to mouse clicks or rollovers or other actions. You define the graphics associated with various button states, and then assign actions to a button instance. See Assigning actions to objects. Use movie clip symbols to create reusable pieces of animation. Movie clips have their own multiframe Timeline that plays independent of the main movie's Timeline think of them as mini-movies inside a main movie that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons.

To create a new symbol with selected elements:
1 Select an element or several elements on the Stage and choose Insert > Convert to Symbol. 2 In the Symbol Properties dialog box, type the name of the symbol and choose the behavior Graphic, Button, or Movie Clip.

Scenes and Libraries

Scenes
Scenes can be used to organize flash movies. For example you can use 3 separate scenes in one movie. One as an introduction, the second as a loading message, and the third scene as the main movie. You can add, delete, duplicate, rename, and change the order of scenes. To display the Scene panel: Choose Window > Panels > Scene. To view a particular scene: Choose View > Goto and then choose the name of the scene from the submenu. To add a scene, do one of the following: Click the Add Scene button in the Scene panel. Choose Insert > Scene. To delete a scene, do one of the following: Click the Delete Scene button in the Scene panel. Open the scene you want to delete and choose Insert > Remove Scene. To change the name of a scene: Double-click the scene name in the Scene panel and enter the new name.
To duplicate a scene: Click the Duplicate Scene button in the Scene panel. To change the order of a scene in the movie: Drag the scene name to a different location in the Scene panel.

Libraries

You may want to use one of the graphics you made in your movie more than once, or to use it in several movies. So macromedia Flash provides Library for storing graphics that can be used later. Elements saved in the Library can be: text, sounds, animations, rollover buttons, bitmapped graphics, and vector graphics.
To display the Library window, do one of the following: Choose Window > Library. Click the Library button in the Launcher bar at the bottom of the application window. To use a library item in the current movie: Drag the item from the Library window onto the Stage. The item is added to the current layer. To open the library from another Flash file: 1 Choose File > Open as Library. 2 Navigate to the Flash file whose library you want to open, and click O The selected file's library opens in the current movie, with the file's name at the top of the Library window. To use items from the selected file's library in the current movie, drag the items to the current movie's Library window. To resize the Library window, do one of the following: Drag the lower right corner. Click the Wide State button to enlarge the Library window so that it displays all the columns. Click the Narrow State button to reduce the width of the Library window to the Name column only. To change the width of columns: Position the pointer between column headers and drag to resize. You cannot change the order of columns. To use the Library Options menu: 1 Click the triangle in the Library window's upper right corner to view the pop-up menu. 2 Click an item in the menu.

Importing and Exporting

Importing
Flash recognizes a variety of vector and bitmap formats. You can place artwork into Flash by importing or pasting. To import a file into Flash: 1 Choose File > Import. 2 In the Import dialog box, choose a file format from the Show pop-up menu. 3 Navigate to the desired file and select it.

Exporting

When you're ready to deliver your movie to an audience, you must export the Flash FLA file to another format for playback. The Export Movie command lets you export a Flash movie to a still-image format and create a numbered image file for every frame in the movie. You can also use Export Movie to export the sound in a movie to a WAV file To export a movie or image: 1 If you are exporting an image, select the frame or image in the current movie that you want to export. 2 Choose File > Export Movie or File > Export Image. 3 Enter a name for the output file. 4 Choose the file format from the Format pop-up menu. 5 Click Save. If the format you selected requires more information, an Export dialog box appears. 6 Set the export options for the format you selected, as described in the following sections.
The export options and publish settings are identical for Flash movies and Generator templates. For information on other export formats, see About export file formats. 7 Click OK, then click Save.

Macromedia

Tools Panel

To Display Tool Options: Click a tool and select a Subselect tool option from the Lasso bottom of the Tools panel.
Text Rectangle Brush Paint Bucket Eraser Zoom
To Constrain Shapes: Press the <Shift> key while dragging the shape. To End Open Path (Pen Tool): Press <Ctrl> and click to end the path To Convert a Corner Point to a Curve Point: Click the Subselection tool and press <Alt>, click on the point you want to change and drag. To Create a New Corner Point: Click the Arrow tool and press <Alt>, click on the line where you want to create a point and drag.
Stage or Movie Area Tool options
Dropper Hand Stroke Color

Layers

New Layer

Insert Keyframe Clear Keyframe Convert to Symbol New Symbol Copy Frames Cut Frames Paste Frames Duplicate Selection Group Selected Items Break Apart Move to Top of File Play Movie Rewind Movie Show/Hide Timeline Step Forward Step Backward
Insert Blank Keyframe <F7>
To Insert a Layer: Click the New Layer button in the Timeline, or select Insert Layer from the menu. To Insert a Frame: Click an empty frame on the Timeline and select Insert Frame from the menu, or press <F5>. Flash inserts frames from the last frame or keyframe to the selected point. To Delete a Frame: Select the frame(s) and select Insert Remove Frames from the menu, or press <Shift> + <F5>. To Insert a Keyframe: Click an empty frame on the Timeline and select Insert Keyframe from the menu, or press <F6>. To Insert a Blank Keyframe: Click an empty frame on the Timeline and select Insert Blank Keyframe from the menu, or press <F7>.
To Clear a Keyframe: Select the keyframe and select Insert Clear Keyframe from the menu, or press <Shift> + <F6>. The keyframe becomes a regular frame. To Create Frame-by-Frame Animation: Insert a keyframe in the selected layer, place an object on the stage. Insert a keyframe in the next frame, change the object from the first frame, and repeat. To Insert Motion Tweened Animation: Insert a keyframe in the selected layer and place a symbol or grouped object on the stage. Select the symbol and select Insert Create Motion Tween from the menu. Select the last frame you want to include in the motion tween, and move the symbol to the final point of the animation. To Change Timeline View: Click the Frame view button and select a view.
Move to Bottom of File <a> + <End>
CustomizableComputerTraining 9Courseware 9OnlineLearning 9SkillsAssessments
FlashQuickReference2008CustomGuide www.customguide.com|Phone888.903.2432

Panels

To View a Panel: Select Window Panel from the menu and select the panel you want to view. For Movie Explorer, Object Actions or Library, select Window from the menu bar and select the desired window. To View More Options: Click the panels Options menu. To Get Help: Click the Help button for more information on the panel.

Info Panel

Paragraph Panel

Align paragraph buttons Left margin Indent

Movie Explorer Panel

Show movie element buttons Movie outline
Right margin Line spacing
Search for a movie element
View or enter specific information for the selected object or instance, such as size, location, and colors used in the object.
Format the line spacing, margins, indentation, or alignment of paragraphs used in the movie.

Transform Panel

Text Options Panel

Use device fonts rather than embedding text information in the movie.
Use the Movie Explorer as a map of the movie; search for movie content, organize movie contents, view an outline of the movies structure, or select movie elements for modification.

Actions Panel

Add or delete selected actions Available actions Move selected actions up or down Expand window

Stroke and Fill Panels

Format a selected objects stroke or fill properties with various colors and textures.
Edit the behavior, color, actions, or other characteristics of an instance inserted into the movie.
Create or edit actions for an object or frame. There are two modes to choose from when editing: Normal and Expert.

Vertical align buttons

Library Window

Library commands

Symbol preview

Sort by column
Select objects and align and distribute or match size and space relative to one another, or relative to the Stage.
Set color and transparency options for individual instances in the movie.

Expand window

Swap Brush/Fill Colors

Frame Panel
Frame label Color values Alpha value Color bar Tweening type Tweening properties Symbol properties New folder New symbol
Contract window Delete symbol
Create a new color, use a different color model in your document, or create new colors to add to a color swatch.
Label or comment on selected keyframes, or edit tweening properties for the frame.
The Library contains the symbols inserted in a movie. Organize symbols into folders and view symbol details such as when the item was last modified and the number of instances. Insert, edit or delete symbols in this window. FlashQuickReference2008CustomGuide www.customguide.com|Phone888.903.2432