1. CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity

2. 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)

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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 Apart 3.Click a blank area of the stage 4.Select both blue hubcaps on the bottom car 5.Set the Fill color to dark gray (#333333) 6.Double-click the g_car symbol icon in the Library window 7.Click the maroon front body of the car, press and hold [Shift], click the maroon rear body of the car 8.Set the Fill color to the red gradient, click Scene 1

9. 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

10. 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 it 5.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]

11. Lesson 2: Work with Libraries (3) Organize symbols within Library panel folders 1.Click the Toggle Sorting Order icon 2.Drag the g_title symbol in the Library panel to the Graphics folder 3.Drag the other graphic symbols to this folder 4.Drag the b_reset symbol to the Buttons folder 5.Double-click the Graphics folder to open it 6.Double-click the Graphics folder to close it

12. Lesson 2: Work with Libraries (4) Display the properties of symbols, rename symbols, and delete a symbol 1.Double-click the Graphics folder to open it 2.Click the g_car1 symbol, click the Properties icon (bottom of Library panel) 3.Type g_redCar in the Name text box, click OK 4.Rename g_car2 to g_blueCar 5.Click the g_border icon, click the Delete icon (trash can) at the bottom of the Library panel

13. 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_car 3.Click Frame 1 on the Reset layer, drag the car from the Library panel to the center of the stage 4.Click the Library panel list arrow, click carRace.fla 5.Click the g_car symbol in the Library panel 6.Click the Delete icon at the bottom of the Library panel 7.Save your work 8.Close the coolcar.fla tab

14. 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

15. Lesson 3: Create Buttons (2) Create a button 1.Insert a layer above the reset layer and name it signal 2.Select the Rectangle Primitive tool, click the Stroke color tool, click the No Stroke icon in the upper-right of the color palette 3.Set the Fill color to the red gradient color swatch 4.Click the Reset button in the Property inspector 5.Draw the rectangle as shown in Fig. 21 (p. 3-18) 6.Click the Zoom tool, then click the rectangle 7.Select the rectangle, click Modify on the menu bar, click Convert to Symbol 8.Name the button b_signal, click the Button option button, click OK 9.Drag the b_signal symbol to the Buttons folder

16. 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 swatch 4.Insert a keyframe in the Down frame on Layer 1 5.Set the Fill color to the green gradient color swatch 6.Insert a keyframe in the Hit frame on Layer 1 7.Set the Fill color to the blue gradient color swatch 8.Click Scene 1 below the Timeline

17. Lesson 3: Create Buttons (4) Test a button 1.Click the Selection tool, click a blank area of the stage 2.Click Control on the menu bar, then click Enable Simple Buttons 3.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 command 6.Click Window on the menu bar, click Library 7.Click the View box list arrow (below and on the right side of the Timeline), click Fit in Window, save the file

18. 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

19. 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

20. 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 1 3.Click Window on the menu bar, click Actions 4.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

21. Lesson 4: Assign Actions to Frames and Buttons (4) Assign a goto action to a button 1.Click Frame 1 of the signal layer 2.Move the Actions panel to view the signal button 3.Click the Selection tool, click the button on the stage 4.Verify that the b_signal button is displayed in the lower left of the Actions panel 5.Click the Script Assist button (far right on the Actions panel) to turn on this feature 6.Click the Add a new item button (plus sign), point to Global Functions, point to Movie Clip Control, click on 7.Click the Add a new item button, point to Timeline Control, click goto 8.Change the Frame number to 2 in the Frame text box 9.Click Control on the menu bar, click Test Movie 10.Click the signal button to play, close the movie

22. 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 it 3.Verify that b_reset is displayed in the lower left of the Actions panel 4.Verify that Script Assist is active 5.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 Movie 7.Click the signal button to start the movie 8.When the movie stops click the Reset button

23. 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 it 3.Verify that b_reset is displayed in the lower left of the Actions panel 4.Verify that Script Assist is active 5.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 Movie 7.Click the signal button to start the movie 8.When the movie stops click the Reset button

24. 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