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

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

3. © 2010 Delmar Cengage Learning 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

4. © 2010 Delmar Cengage Learning 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

5. © 2010 Delmar Cengage Learning 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

6. © 2010 Delmar Cengage Learning 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

7. © 2010 Delmar Cengage Learning Fig. 1: Convert to Symbol Dialog Box

8. © 2010 Delmar Cengage Learning 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

9. © 2010 Delmar Cengage Learning 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

10. © 2010 Delmar Cengage Learning Fig. 4: Newly Created Symbol in the Library Panel Preview of g_car symbol in item Preview window Icon indicating a graphic symbol

11. © 2010 Delmar Cengage Learning 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

12. © 2010 Delmar Cengage Learning Fig. 7: Edit Widow Name of symbol Graphic symbol indicates you are in the edit window

13. © 2010 Delmar Cengage Learning Understanding the Library The Library provides a way to view and organize symbols –Change symbol names –Display item properties –Add or delete symbols

14. © 2010 Delmar Cengage Learning 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

15. © 2010 Delmar Cengage Learning 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

16. © 2010 Delmar Cengage Learning The Library Properties Icon –Displays the Symbol Properties dialog box for the selected symbol Delete Item Icon –Deletes the selected symbol or folder

17. © 2010 Delmar Cengage Learning Fig. 11: The Library Panel Title 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

18. © 2010 Delmar Cengage Learning Fig. 12: The Options Menu

19. © 2010 Delmar Cengage Learning 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

20. © 2010 Delmar Cengage Learning 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

21. © 2010 Delmar Cengage Learning 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

22. © 2010 Delmar Cengage Learning Fig. 18: The Four Button States Up OverDownHit

23. © 2010 Delmar Cengage Learning Fig. 19: The Button Timeline

24. © 2010 Delmar Cengage Learning Creating and Previewing Buttons Create a button symbol Edit the button symbol Return to the main timeline Preview the button

25. © 2010 Delmar Cengage Learning Fig. 22: Specifying the Hit Area Drag to here

26. © 2010 Delmar Cengage Learning 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

27. © 2010 Delmar Cengage Learning 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

28. © 2010 Delmar Cengage Learning Assigning Actions to a Button Select the appropriate category Select the desired action Specify the event that triggers the action

29. © 2010 Delmar Cengage Learning 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

30. © 2010 Delmar Cengage Learning 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

31. © 2010 Delmar Cengage Learning 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

32. © 2010 Delmar Cengage Learning Fig. 29: The Actions Panel Toolbox paneHide/Display arrow for the Toolbox pane Button that the code will be applied to ScriptAssist off

33. © 2010 Delmar Cengage Learning Fig. 34: Assigning an Event and Action to a Button Button selected Action assigned to the button named b_signal

34. © 2010 Delmar Cengage Learning Fig. 35: Assigning a Go To Action to a Button Frame 1 specified ScriptAssist active Event on (release) Action gotoAndPlay(1)

35. © 2010 Delmar Cengage Learning Understanding Graphic Types Two Types of Graphic Files Bitmap Vector

36. © 2010 Delmar Cengage Learning 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.

37. © 2010 Delmar Cengage Learning 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.

38. © 2010 Delmar Cengage Learning Fig. 37: Bitmap Graphic Enlarged

39. © 2010 Delmar Cengage Learning Fig. 38: Vector Graphic Enlarged

40. © 2010 Delmar Cengage Learning 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.

41. © 2010 Delmar Cengage Learning Fig. 39: Position the Sailboat Image on the Stage

42. © 2010 Delmar Cengage Learning 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