Transcript Chapter 3 - PowerPoint

Chapter 3:
Working with Symbols and Interactivity
© 2010 Delmar, Cengage Learning
Chapter 3 Lessons
1.
2.
3.
4.
5.
Create symbols and instances
Work with Libraries
Create buttons
Assign actions to frames and buttons
Importing graphics
© 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
© 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
© 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
© 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
© 2010 Delmar Cengage Learning
Fig. 1: Convert to Symbol Dialog Box
© 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
© 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
© 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
© 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
© 2010 Delmar Cengage Learning
Fig. 7: Edit Widow
Graphic symbol
indicates you are in
the edit window
Name of symbol
© 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
© 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
© 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
© 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
© 2010 Delmar Cengage Learning
Fig. 11: The Library Panel
Title tab
Options menu
Click to open Library panel of
any open document
Item Preview window
Name list box
Toggle Sorting Order icon
(position may vary)
New Symbol icon
New Folder icon
Properties icon
Delete icon
© 2010 Delmar Cengage Learning
Fig. 12: The Options Menu
© 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
© 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
© 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
© 2010 Delmar Cengage Learning
Fig. 18: The Four Button States
Up
Over
Down
© 2010 Delmar Cengage Learning
Hit
Fig. 19: The Button Timeline
© 2010 Delmar Cengage Learning
Creating and Previewing Buttons
•
•
•
•
Create a button symbol
Edit the button symbol
Return to the main timeline
Preview the button
© 2010 Delmar Cengage Learning
Fig. 22: Specifying the Hit Area
Drag to here
© 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
© 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
© 2010 Delmar Cengage Learning
Assigning Actions to a Button
• Select the appropriate category
• Select the desired action
• Specify the event that triggers the action
© 2010 Delmar Cengage Learning
Fig. 28: Assigning Actions to Buttons
1. Select the button
3. Click the Add a
new item to the
script icon
2. Click the Script Assist
button to toggle between
on (seen here) and off
Hide/Display
arrow; click at any
time and as
needed to hide or
display the
Toolbox pane
4. Select the Actions
category and the
action
© 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
© 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
© 2010 Delmar Cengage Learning
Fig. 29: The Actions Panel
Toolbox pane Hide/Display Button that
ScriptAssist off
arrow for the the code will
Toolbox
be applied to
pane
© 2010 Delmar Cengage Learning
Fig. 34: Assigning an Event and
Action to a Button
Button selected
Action assigned to
the button named
b_signal
© 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)
© 2010 Delmar Cengage Learning
Understanding Graphic Types
Two Types of Graphic Files
• Bitmap
• Vector
© 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.
© 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.
© 2010 Delmar Cengage Learning
Fig. 37: Bitmap Graphic Enlarged
© 2010 Delmar Cengage Learning
Fig. 38: Vector Graphic Enlarged
© 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.
© 2010 Delmar Cengage Learning
Fig. 39: Position the Sailboat
Image on the Stage
© 2010 Delmar Cengage Learning
Chapter 3 Summary
1.
2.
3.
4.
5.
Create symbols and instances
Work with Libraries
Create buttons
Assign actions to frames and buttons
Importing graphics
© 2010 Delmar Cengage Learning