© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity

© 2010 Delmar, Cengage Learning

Chapter 3:

Working with Symbols and Interactivity

© 2010 Delmar Cengage Learning

Chapter 3 Lessons

1. Create symbols and instances

2. Work with Libraries

3. Create buttons

4. Assign actions to frames and buttons

5. Importing graphics


Using Flash Symbols

• Create small file sizes• Symbols are graphics that can be re-used

without adding file size– Symbols are the original object– Instances are the copied object

• Flash stores only symbol information (size, shape, color) thus creating a smaller file size


Using Flash Symbols

• Attributes, such as color and shape, can be freely changed for each instance

• You can have as many altered instances as you like

• Symbols reside in the Library– Dragging a symbol from the Library to the

stage creates an instance


Flash Symbol Types

• Three types of symbols– Graphics: effective for single, re-usable

images– Buttons: for interactivity, such as starting

or stopping– Movie Clips: movie within a movie


Creating a Graphic Symbol

• Two ways to create a symbol– New Symbol on the Insert menu– Convert to Symbol on the Modify menu

• “Convert to Symbol” dialog box allows you to name and specify the type of symbol

• Symbol gets placed in the Library– To create an instance, drag a symbol from

the Library panel to the stage


Fig. 1: Convert to Symbol Dialog Box


Editing a Symbol

• Select from the Library and double-click, or use the Edit Symbol command

• Changes made to symbols are reflected in all their associated instances

• Changes made to instances do not affect their symbol


Working with Instances

• Instances can be altered in many ways– Rotate, skew, resize– Change color, brightness, transparency

• Some limitations to editing an instance– Changes must be made to entire instance– Use “Break Apart” for more edibility, but

note that the link to the symbol will be broken


Fig. 4: Newly Created Symbol in the Library Panel

Preview of g_car symbol in item

Preview window

Icon indicating a graphic symbol


Fig. 5: Creating an Instance

Drag the symbol from the Library panel to below the original instance to create a second instance of the symbol


Fig. 7: Edit Widow

Name of symbol

Graphic symbol indicates you are in

the edit window


Understanding the Library

• The Library provides a way to view and organize symbols– Change symbol names – Display item properties– Add or delete symbols


The Library• Title Tab

– Identifies this as the Library panel• List Box

– Used to select an open document and display the Library panel associated with that open document

• Options Menu – Provides access to additional features of the library

• Item Preview window– Displays the selected symbol


The Library

• Toggle Sorting Order Icon– Allows you to reorder the lists of folders and

symbols within folders• Name Text Box

– Lists the folder and symbol names• New Symbol Icon

– Displays the Create New Symbol dialog box• New Folder Icon

– Allows you to create a new folder


The Library

• Properties Icon– Displays the Symbol Properties dialog box

for the selected symbol• Delete Item Icon

– Deletes the selected symbol or folder


Fig. 11: The Library PanelTitle tab

Name list box

Options menu

Click to open Library panel of any open document

Item Preview window

Toggle Sorting Order icon (position may vary)

New Symbol icon

New Folder icon

Properties icon

Delete icon


Fig. 12: The Options Menu


Understanding Buttons

• Button symbols provide interactivity• Any object, including Flash objects, can be turned

into a Button symbol• Button symbols have four states that correspond to

the use of the mouse and recognize that the user requires feedback– Up– Over– Down– Hit


The Four Button States

• Up– Represents how the button appears when

the mouse pointer is not over it• Over

– Represents how the button appears when the mouse pointer is over it


The Four Button States

• Down– How the button appears after the user

clicks the mouse• Hit

– Defines the area of the screen that will respond to the click


Fig. 18: The Four Button States

Up Over Down Hit


Fig. 19: The Button Timeline


Creating and Previewing Buttons

• Create a button symbol• Edit the button symbol• Return to the main timeline• Preview the button


Fig. 22: Specifying the Hit Area

Drag to here


Understanding Actions

• In a basic movie, Flash plays frames sequentially

• To gain greater control, ActionScripting provides interactivity– Button presses can start/stop a Movie– Jump to a frame or scene


Assigning Actions to a Button

• Select the desired button on the stage• Display the Actions panel• Select the Script Assist button to display the

Script Assist panel within the ActionScript panel


Assigning Actions to a Button

• Select the appropriate category• Select the desired action• Specify the event that triggers the action


Fig. 28: Assigning Actions to Buttons

1. Select the button

2. Click the Script Assist button to toggle between on (seen here) and off

4. Select the Actions category and the action

3. Click the Add a new item to the script icon

Hide/Display arrow; click at any time and as needed to hide or display the Toolbox pane


Button Actions

• Release– With the pointer inside the button Hit area,

the user presses and releases the mouse button

• Key Press– With the pointer inside the button Hit area,

the user presses a predetermined key on the keyboard


Button Actions

• Roll Over– The user moves the pointer into the button Hit

area• Drag Over

– The user holds down the mouse button, moves the pointer out of the button Hit area and then back into the Hit

• Using Frame Actions– Actions assigned to frames– Executed when the playhead reaches the frame


Fig. 29: The Actions Panel

Toolbox pane Hide/Display arrow for the Toolbox pane

Button that the code will be applied to

ScriptAssist off


Fig. 34: Assigning an Event and Action to a Button

Button selected

Action assigned to the button named b_signal


Fig. 35: Assigning a Go To Action to a Button

Frame 1 specified

ScriptAssist active

Event on (release)

ActiongotoAndPlay(1)


Understanding Graphic Types

Two Types of Graphic Files• Bitmap• Vector


Bitmap Images

• Bitmap images are made up of a group of tiny dots of color called pixels.

• Bitmap graphics are often used with photographic images because they can represent subtle gradients in color.


Vector Images

• Vector graphics represent an image as a geometric shape made up of lines and arcs that are combined to create various shapes, such as circles and rectangles.

• This is similar to Flash drawings that include strokes and fills.

• Flash drawing tools create vector graphics. An advantage of vector graphics is that they can be resized without distorting the image.


Fig. 37: Bitmap Graphic Enlarged


Fig. 38: Vector Graphic Enlarged


Importing and Editing Graphics

• Import feature brings graphics into Flash• Select the Import command from the File

menu and specify where to import (Stage or library

• Then navigate to the location where the file is stored and select it.


Fig. 39: Position the Sailboat Image on the Stage


Chapter 3 Summary

1. Create symbols and instances

2. Work with Libraries

3. Create buttons

4. Assign actions to frames and buttons

5. Importing graphics

Documents

© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity