CIS 205—Web Design & Development

FlashChapter 3

Working with Symbols and Interactivity

Chapter 3: Working with Symbols and Interactivity

• Introduction– An original drawing in Flash is called a symbol.– Copies of this drawing are called instances.– The attributes of an instance can change during a

movie.– There are three types of symbols:• Graphic• Button (for interactivity)• Movie clip (for placing a movie within a movie)

Lesson 1: Create Symbols and Instances

• Creating a Graphic Symbol– Use the New Symbol command on the Insert menu, or– Use the Convert to Symbol command on the Modify

menu– Use good naming conventions, such a g_name for a

graphic symbol or b_name for a button symbol– To create an instance of a symbol, drag it from the

Library panel to the stage– A symbol can be changed (color, shape, size) in the Edit

window before instances are created

Lesson 1: Create Symbols and Instances (2)

• Working with Instances– An instance on the stage can be changed to a degree

(rotate, skew, resize)– An instance is a single object without parts– You can use the Break Apart command for an instance,

but it then loses its connection with its symbol

Lesson 1: Create Symbols and Instances (3)• Create a symbol

1. Start Flash, open the file fl3_1.fla where your Data Files are stored, then save the file as coolcar.fla

2. Verify that the Property inspector, the Library panel, and the Tools panel are displayed

3. Click View on the menu bar, point to Magnification, click Fit in Window

4. Click the Selection tool and draw a marquee around the car

5. Click Modify on the menu bar, click Convert to Symbol, type g_car in the Name text box

6. Click the Graphic option button, click OK

Lesson 1: Create Symbols and Instances (4)• Create and edit an instance

1. Drag the car image from the Library panel to the stage below the first car (the new car should be selected)

2. Click the Selection tool, click Modify on the menu bar, point to Transform, click Flip Horizontal

3. Click the Color list arrow in the Property inspector (PI), click Alpha

4. Click the % list arrow and drag the slider to 50%5. Click a blank area of the stage to deselect the object

Lesson 1: Create Symbols and Instances (5)• Edit a symbol in the edit window

1. Double-click the icon for the g_car symbol (just left of the name g_car) in the Library panel to display the edit window

2. Click the Selection tool, click the light gray hubcap inside the front wheel

3. Press and hold [Shift], click the hubcap inside the rear wheel to select both hubcaps

4. Set the Fill color to the blue gradient color swatch in the bottom row of the color palette

5. Click Scene 1 below the Timeline layer to exit the symbol edit window

Lesson 1: Create Symbols and Instances (6)• Break apart an instance

1. Click the Selection tool, drag the marquee around the bottom car

2. Click Modify on the menu bar, click Break Apart3. Click a blank area of the stage4. Select both blue hubcaps on the bottom car5. Set the Fill color to dark gray (#333333)6. Double-click the g_car symbol icon in the Library

window7. Click the maroon front body of the car, press and

hold [Shift], click the maroon rear body of the car8. Set the Fill color to the red gradient, click Scene 1

Lesson 2: Work with Libraries• Understanding the Library Panel– The Library panel displays all the assets in a Flash movie

• Title tab: The list box below the title tab can be used to display the Library panel for a certain document

• Options menu (upper-right corner of the panel): Contains several features for editing symbols

• Item Preview window: Displays a selected item• Toggle Sorting Order icon (right of Type): For sorting items• Wide Library View and Narrow Library View icons (below the Toggle

Sorting Order icon): For wide and narrow views• Name text box: Lists all the folder and symbol names• New Symbol icon (lower-left corner): To create a new symbol• New Folder icon (bottom of panel)• Properties icon (bottom of panel): Displays the Symbol Properties dialog

box• Delete Item icon: Deletes the symbol or folder

Lesson 2: Work with Libraries (2)• Create folders in the Library panel

1. Open the file fl3_2.fla where your Data Files are stored, then save the file as carRace.fla

2. Verify that the Property inspector, the Library panel, and the Tools panel are displayed

3. Click View on the menu bar, point to Magnification, click Fit in Window

4. Click each item in the Library panel to display it5. Click the New Folder icon, type Graphics in the Name

text box, press [Enter]6. Click the New Folder icon, type Buttons in the Name

text box, press [Enter]

Lesson 2: Work with Libraries (3)• Organize symbols within Library panel folders

1. Click the Toggle Sorting Order icon2. Drag the g_title symbol in the Library panel to the

Graphics folder3. Drag the other graphic symbols to this folder4. Drag the b_reset symbol to the Buttons folder5. Double-click the Graphics folder to open it6. Double-click the Graphics folder to close it

Lesson 2: Work with Libraries (4)• Display the properties of symbols, rename

symbols, and delete a symbol1. Double-click the Graphics folder to open it2. Click the g_car1 symbol, click the Properties icon

(bottom of Library panel)3. Type g_redCar in the Name text box, click OK4. Rename g_car2 to g_blueCar5. Click the g_border icon, click the Delete icon (trash

can) at the bottom of the Library panel

Lesson 2: Work with Libraries (5)• Use multiple Library panels

1. Click the Library panel list arrow (near the top)2. Click coolcar.fla, then click g_car3. Click Frame 1 on the Reset layer, drag the car from

the Library panel to the center of the stage4. Click the Library panel list arrow, click carRace.fla5. Click the g_car symbol in the Library panel6. Click the Delete icon at the bottom of the Library

panel7. Save your work8. Close the coolcar.fla tab

Lesson 3: Create Buttons• Understanding Buttons– Buttons have four states that determine appearance:• Up—when the mouse pointer is not over it• Over—when the mouse pointer is over it• Down—after a mouse click• Hit—defines the area that responds to a click

– When you create a button symbol, Flash creates a Timeline with four frames for the four states

– Process for buttons:• Create a button symbol• Edit the button symbol• Return to the Timeline• Preview the button

Lesson 3: Create Buttons (2)• Create a button

1. Insert a layer above the reset layer and name it signal2. Select the Rectangle Primitive tool, click the Stroke color tool,

click the No Stroke icon in the upper-right of the color palette3. Set the Fill color to the red gradient color swatch4. Click the Reset button in the Property inspector5. Draw the rectangle as shown in Fig. 21 (p. 3-18)6. Click the Zoom tool, then click the rectangle7. Select the rectangle, click Modify on the menu bar, click

Convert to Symbol8. Name the button b_signal, click the Button option button,

click OK9. Drag the b_signal symbol to the Buttons folder

Lesson 3: Create Buttons (3)• Edit a button and specify a Hit area

1. Open the Buttons folder in the Library panel, right-click b_signal, click Edit

2. On Layer 1, click Over, then click Insert on the menu bar, point to Timeline, click Keyframe

3. Set the Fill color to the gray gradient color swatch4. Insert a keyframe in the Down frame on Layer 15. Set the Fill color to the green gradient color swatch6. Insert a keyframe in the Hit frame on Layer 17. Set the Fill color to the blue gradient color swatch8. Click Scene 1 below the Timeline

Lesson 3: Create Buttons (4)• Test a button

1. Click the Selection tool, click a blank area of the stage2. Click Control on the menu bar, then click Enable

Simple Buttons3. Point to the signal button on the stage (it should turn

gray)4. Click and hold the button (it should turn green)5. Click Control on the menu bar, click Enable Simple

Buttons to turn off the command6. Click Window on the menu bar, click Library7. Click the View box list arrow (below and on the right

side of the Timeline) , click Fit in Window, save the file

Lesson 4: Assign Actions to Frames and Buttons• Understanding Actions– A Flash movie plays all layers simultaneously, frame

by frame– A user can perform an action, such as starting or

stopping a movie, or jumping to a particular frame– An action can be applied to the Down state of a

button (mouse click)– The Flash language called ActionScript allows you to

add actions to buttons and frames

Lesson 4: Assign Actions to Frames and Buttons (2)• Analyzing ActionScript– ActionScript is a powerful scripting language– Example:

on (release) {

gotoAndPlay(10);

}

– In the above example, release means ‘mouse click’ and gotoAndPlay(10) means go to frame 10 and play the movie

– You don’t have to learn ActionScript to use it—the Script Assist feature allows you to assign basic actions

– ActionScript 2.0 and 3.0: AS3 is very complex, but AS2 is compatible with Script Assist

Lesson 4: Assign Actions to Frames and Buttons (3)• Assign a stop action to frames

1. Click Control on the menu bar, click Test Movie, close the movie window

2. Insert a new layer, name it stopmovie, click Frame 13. Click Window on the menu bar, click Actions4. Verify the Script Assist button (far right) is off (not outlined),

click the List arrow for the ActionScript options, point to ActionScript 1.0 & 2.0, click

5. Verify stopmovie: Frame 1 is displayed in the lower left corner of the Actions panel

6. Click the Add a new item button (plus sign) in the Actions panel, point to Global Functions, point to Timeline Control, click stop

7. Insert a keyframe in Frame 66 on the stopmovie layer, then repeat Step 6 and test the movie (it will not play due to the stop action at Frame 1), close the movie

Lesson 4: Assign Actions to Frames and Buttons (4)• Assign a goto action to a button

1. Click Frame 1 of the signal layer2. Move the Actions panel to view the signal button3. Click the Selection tool, click the button on the stage4. Verify that the b_signal button is displayed in the lower left of

the Actions panel5. Click the Script Assist button (far right on the Actions panel) to

turn on this feature6. Click the Add a new item button (plus sign), point to Global

Functions, point to Movie Clip Control, click on7. Click the Add a new item button, point to Timeline Control,

click goto8. Change the Frame number to 2 in the Frame text box9. Click Control on the menu bar, click Test Movie10. Click the signal button to play, close the movie

Lesson 4: Assign Actions to Frames and Buttons (5)• Assign a goto frame action to a button

1. Click Frame 66 of the reset layer to display the Reset button on the stage

2. Click the Reset button to select it3. Verify that b_reset is displayed in the lower left of the

Actions panel4. Verify that Script Assist is active5. Click Add a new item button, point to Global

Functions, point to Timeline Control, click goto, verify that Frame 1 is specified

6. Click Control on the menu bar, click Test Movie7. Click the signal button to start the movie8. When the movie stops click the Reset button

Lesson 4: Assign Actions to Frames and Buttons (5)• Assign a goto frame action to a button

1. Click Frame 66 of the reset layer to display the Reset button on the stage

2. Click the Reset button to select it3. Verify that b_reset is displayed in the lower left of the

Actions panel4. Verify that Script Assist is active5. Click Add a new item button, point to Global

Functions, point to Timeline Control, click goto, verify that Frame 1 is specified

6. Click Control on the menu bar, click Test Movie7. Click the signal button to start the movie8. When the movie stops click the Reset button

Lesson 4: Assign Actions to Frames and Buttons (6)• Assign a second event to a button

1. Click the right curly bracket ( } ) in the Actions panel in Step 3 of the ActionScript

2. Click the + in the Script Assist window, point to Global Functions, point to Movie Clip Control, click on

3. Deselect the Release check box, click the Key Press check box and then press the [Home] key on the keyboard

4. Click the +, point to Global Functions, point to Timeline Control, click goto (the Home key now acts like the Reset button)

5. Click File on the menu bar, point to Publish Preview, click Default—(HTML); the movie opens in a browser

6. Click the signal button to start the movie, [Home] to reset