© 2011 delmar, cengage learning chapter 3 working with symbols and interactivity
TRANSCRIPT
© 2011 Delmar, Cengage Learning
Chapter 3
Working with Symbols and Interactivity
1. Create symbols and instances
2. Work with Libraries
3. Create buttons
4. Assign actions to frames and buttons
5. Import graphics
© 2011 Delmar Cengage Learning
Chapter 3 Lessons
• Introduction– Flash allows you to keep a movie file small by
creating reusable graphics, buttons, and movie clips
– Flash allows you to create a graphic (drawing) of a movie file, and then make unlimited copies of that file
© 2011 Delmar Cengage Learning
Work with Symbols and Interactivity
© 2011 Delmar Cengage Learning
Work with Symbols and Interactivity
• Introduction– The original drawing is called a symbol and is
stored in the Library panel– The copied drawing is called the instance and
only its size, shape, and color are stored– A link is established between the symbol and
the instance so that the instance has the same properties as the symbol
© 2011 Delmar Cengage Learning
Tools You’ll Use
Work with Symbols and Interactivity
© 2011 Delmar Cengage Learning
Create Symbols and Instances
• Three categories of symbols– A graphic symbol allows you to reuse a
single image and make changes in each instance of the image
– A button symbol allows you to create buttons for interactivity
– A movie clip symbol allows you to create complex animations
© 2011 Delmar Cengage Learning
• You can use the New Symbol command on the Insert menu to create and then draw a symbol.
• You can draw an object and then use the Convert to Symbol command on the Modify menu to convert the object to a symbol.
Create Symbols and Instances
© 2011 Delmar Cengage Learning
Using the Convert to Symbol dialog box to convertan object to a symbol
Create Symbols and Instances
© 2011 Delmar Cengage Learning
• After you complete the Convert to Symbol dialog box, Flash places the symbol in the Library panel.
Create Symbols and Instances
© 2011 Delmar Cengage Learning
A graphic symbol in the Library panel
Click to display list of all open Flash movies
Name of Flash movie the Library is associated with
Preview of symbol
Symbol name
Icon identifies symbol as a graphic
Create Symbols and Instances
© 2011 Delmar Cengage Learning
• To create an instance of a symbol, you can drag a symbol from the Library panel to the Stage.
• To edit a symbol, you can double-click it in the Library panel or use the Edit Symbols command on the Edit menu.
Create Symbols and Instances
© 2011 Delmar Cengage Learning
• An instance is a single object with no segments or parts, such as stroke and a fill.
• You can rotate, skew, and resize instances, as well as change their color, brightness, and transparency.
Create Symbols and Instances
© 2011 Delmar Cengage Learning
• Stacking other objects on top of an instance can change its appearance.
• If you use the Break Apart command on the Modify menu, you will break the link between the instance and the symbol and changes can then be made to the instance.
Create Symbols and Instances
© 2011 Delmar Cengage Learning
• To create an instance:– Open the Library panel– Drag the desired symbol to the Stage– Select the instance by using the Selection
tool to drag a marquee around it. A blue box indicates that the object is selected
– Use the Free Transform tool options to modify the instance
Create Symbols and Instances
© 2011 Delmar Cengage Learning
Creating an instance Newly created symbol in the Library panel
Drag the car image, the name of the symbol, or its icon from the Library panel below the original instance to create a second instance of the symbol
Create Symbols and Instances
© 2011 Delmar Cengage Learning
Work with Libraries
• The Library panel in Flash contains the symbols and other items such as imported graphics, movie clips, and sounds.
• It allows you to view and organize items, change the item name, display item properties, and add and delete items.
© 2011 Delmar Cengage Learning
• Parts of the library:– Tab title: Identifies the panel title– Panel options menu: Provides access to
several features used to edit and organize symbols
– Display movies list arrow: Allows you to use items from one movie in another movie
Work with Libraries
© 2011 Delmar Cengage Learning
Work with Libraries
• Parts of the library:– Item preview window: displays the
selected item– Name text box: Lists the folder and item
names– Toggle Sorting Order icon: Allows you to
reorder the list of folders and items within folders
© 2011 Delmar Cengage Learning
Work with Libraries
• Parts of the library:– New Symbol icon: Displays the Create
New Symbol dialog box, allowing you to create a new symbol
– New Folder icon: Allows you to create a new folder
© 2011 Delmar Cengage Learning
• Parts of the library:– Properties icon: Displays the properties
dialog box for the selected item– Delete icon: Deletes the selected item or
folder
Work with Libraries
© 2011 Delmar Cengage Learning
The Library panel
Tab title
Item Previewwindow
Name listbox
Panel options list arrow
Properties icon
Toggle Sorting Order icon(position may vary)
Display movies list arrow; click to displaylist of all open Flash movies; click a movieto open Library panel for that movie
New Symbol icon
Delete icon
New Folder icon
Work with Libraries
© 2011 Delmar Cengage Learning
Create Buttons
• You can use button symbols to provide interactivity.
• When you click a button an action occurs.
• You can make any object, including Flash drawings, text blocks, and imported graphic images into buttons.
© 2011 Delmar Cengage Learning
• Four states of buttons:– 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– Down—Represents how the button
appears after the user clicks the mouse
Create Buttons
© 2011 Delmar Cengage Learning
– Hit—Defines the area of the screen that will respond to the pointer. In most cases, you will want the Hit state to be the same or similar to the Up state in location and size
Create Buttons
© 2011 Delmar Cengage Learning
The Button Timeline
Create Buttons
© 2011 Delmar Cengage Learning
• The process for creating and previewing buttons:– Create a button symbol– Edit the button symbol– Return to the Main Timeline– Preview the button
Create Buttons
© 2011 Delmar Cengage Learning
Assign Actions to Frames and Buttons
• Provide users with the ability to interact with a movie by assigning an action to the Down state of a button.
• Whenever the user clicks a button with an assigned action, the assigned action occurs.
© 2011 Delmar Cengage Learning
• ActionScript is a powerful scripting language that allows those with even limited programming experience to create complex actions.
• A basic ActionScript involves an event (such as a mouse click) that causes some action to occur by triggering the script.
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• ActionScript 2.0 and 3.0 address the different needs of both designers and developers.– AS3 is used by developers because it
provides a programming environment that is more familiar to them
– AS2 allows new Flash users to create compelling applications without expertise
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
The Actions panel displaying an ActionScript
Action assignedto this buttonsymbol
Eventon (release
ActiongotoAndPlay(2)
Script Assist
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• An advantage of using AS2 is a feature called Script Assist, which provides an easy way to use ActionScript without having to learn the scripting language.
• The Script Assist feature within the Action panel allows you to assign basic actions to frames and objects.
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• Adobe has two types of Flash CS5 users, designers and developers.– Designers focus on the visual features of
a Flash movie– Developers focus on the programming
aspects of a Flash movie– Together they create sophisticated Flash
applications
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• Button actions respond to one or more mouse events, including:– Release– Key Press– Roll Over– Drag Over
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• You can assign actions to frames that you can execute when the playhead reaches the frame.
• Stop is a common action that you can assign to the first and last frame of a layer on the Timeline.
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
The process for assigning actions to buttons
2. Display the Actions panel
4. Click the Add a new itemTo the script button
Hide/Display arrow, click tohide or display the Toolboxpane
1. Select the button
3. Click the Script Assistbutton to toggle between on (seen here) and off
5. Select the Actions menu,the Actions category, andthe action
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• The Actions panel has two panes:– The left pane (also called the Toolbox
pane) uses folders to display the Action categories
– The right pane (also called the Script pane) uses the Script Assist features and displays the ActionScript code as the code is being generated
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• When using the Script Assist feature, it is best to close the left pane. To do this click the Hide/Display arrow.
• The lower-left corner of the Script pane displays the symbol name or the frame to which the action(s) will apply.
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
• Frame labels can be referenced in the ActionScript code.
• Adding or deleting frames will not disrupt the navigation to a frame reference, since the label remains attached to the frame even if the frame moves.
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
The Timeline with a frame label
Frame label“StartRace”In frame 2
Code thatreferences theframe label
Script Assist on
Assign Actions to Frames and Buttons
© 2011 Delmar Cengage Learning
Import Graphics
• Bitmap images are made up of a group of tiny dots of color called pixels (picture elements).
• 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.
© 2011 Delmar Cengage Learning
Import Graphics
• Flash drawing tools create vector images which can be resized without distorting the image.
• Filename extensions:– Bitmap graphic file types: .jpg, .tif, .bmp,
and .gif– Vector graphic file type: .ai
© 2011 Delmar Cengage Learning
Import Graphics
Bitmap graphic enlarged
© 2011 Delmar Cengage Learning
Import Graphics
• To bring a graphic into Flash use the Import feature.
• Bitmap graphics are not easy to edit in Flash so you should edit them in another program, like Photoshop, to obtain the desired size, color, and other enhancements.