Tài liệu Thiết kế flash với flash cs5 part 23 pptx

Unlike movie clip symbols, an animation contained in a graphic symbol can be seen in the main Timeline without having to export the Flash movie.. Using Graphic Symbols Create a Graphic

Trang 1

Graphic symbols can be used for static images and for animations that are in sync with the main Timeline There are three instance options available to them: Loop, Play Once, and Single Frame Set the instance

to Loop if you want the symbol's Timeline to play continuously Play Once plays the Timeline of a graphic symbol once and then stops

Single frame sets the instance to display as a single frame contained in the graphic symbol's Timeline Unlike movie clip symbols, an animation contained in a graphic symbol can be seen in the main Timeline without having to export the Flash movie However, any ActionScript and sounds that have been included in a graphic symbol's Timeline will not work

Using Graphic

Symbols

Create a Graphic Symbol

Click the Insert menu, and then

click New Symbol.

TIMESAVER Press A+F8

(Mac) or Ctrl+F8 (Win) to create a

new symbol

Type in a name for the symbol

Click the Type list arrow, and then

click Graphic.

Click OK.

Flash enters a symbol editing

mode that contains an empty

Timeline for that symbol

4

3

2

1

3

Did You Know?

Graphic symbol animations are synced

up to the main Timeline For example,

if the animation in the graphic symbol

spans 10 frames, the instance in the

main Timeline must also span 10

frames if the entire animation is to be

seen

Trang 2

Change the Options for Graphic

Symbol Instances

Select a graphic symbol instance

on the Stage

Click the list arrow in the Property

Inspector, and then select from the

following graphic options:

◆ Loop The Timeline in the

graphic symbol will loop

continuously

◆ Play Once The Timeline in the

graphic symbol will play once

and stop If there is no

animation in the symbol or if

there is only artwork on one

frame, it will be treated as a

static graphic

◆ Single Frame Sets the instance

to a single frame in the Timeline

of the master symbol When

this is selected, the graphic

symbol is treated as a static

graphic

2

1

2

Options for graphic symbol instances

Converting a Graphic to a Symbol

In addition to creating a new symbol and adding a graphic, you can also convert an existing graphic to a symbol Select the vector graphic on the Stage, click the Modify menu, and then click Convert

To Symbol In the Convert to Symbol dialog box, enter a name (that you’ll refer to in an ActionScript), and then click the Graphic option

as the type The registration grid within the symbol bounding box dis-plays a small black square to indicate the registration point for the graphic

For Your Information

Trang 3

Use buttons to add interactivity to your movie Button symbols have their own four-frame Timeline The first three frames define the states

of the button: up, over, and down The first frame is the Up state, which

is the appearance of the button when in its normal, non-active state

The second frame is the Over state, which is triggered when the user places their mouse over the button The third frame is the Down state, which appears when the user presses the button with their mouse The fourth frame—which is invisible outside of the symbol editing mode—

defines the active area This is the area that the user must place their mouse over to activate the other states of the button You can assign actions, such as sound or animation, to instances of buttons that tell Flash what to do when the button is clicked

Using Button Symbols

Create a Button

new symbol

Type in a name for the symbol

click Button.

Click OK.

Place artwork in the keyframe of

the first frame

This represents the button's Up

state, its normal, inactive state

Click the Insert menu, point to

Timeline, and then click Keyframe

to add a keyframe in the second

frame (the Over state)

TIMESAVER Press F6 to

quickly add a keyframe and press

F7 to add a blank keyframe

6

5

4

3

2

1

3

4

5 2

Trang 4

Change the artwork or add new

artwork in this frame

to add a keyframe in the third

frame (the Down state)

Alter the artwork or add new

artwork in this frame

to add a keyframe in the fourth

frame (the active area)

Add a simple graphic (a rectangle

or oval, for example) to define the

active area

To assign a sound to a state of the

button, select the state’s frame in

the Timeline, open the Property

Inspector, and then:

◆ Select a sound from the Sound

list arrow menu

◆ Select an event from the

Synchronization list arrow

menu

Click the Control menu, point to

Test Movie, and then click Test.

TIMESAVER Press A+Return

(Mac) or Ctrl+Enter (Win) to test it

13

12

11

10

9

8

7

See Also

See “Enabling and Disabling Buttons”

on page 152 for information on turning

buttons on and off

Adding Animation to a Button

There are several ways to add animation to a button First, you can place an instance of the button symbol on the Stage and assign actions to it, not to frames in the button’s Timeline Another way is to create a button using a movie clip symbol or a button component You can create more complex animation with the movie clip button The downside is that file size increases The button component provides more pre-built button types, such as PushButton and RadioButton, and customizable features See Chapter 18, “Adding and Modifying Components” on page 427 for information on components and using button components

For Your Information

Trang 5

Flash allows you to test your buttons within the development environ-ment without having to export the movie You can test the behavior of simple buttons by toggling the Enable Simple Buttons feature on and off When buttons are enabled, you can't select them or enter their symbol editing mode normally Disable this feature if you need to enter the symbol mode You can quickly see how the different states of your button behave without having to export the whole flash movie Any ActionScript applied to the button will be ignored

Enabling and

Disabling Buttons

Enable and Disable Buttons

Place a button on the Stage

Click the Control menu, and then

click Enable Simple Buttons to

enable the button

TIMESAVER Press Ctrl+Alt+B

(Win) or Option+A+B (Mac) to

toggle the enabling and disabling

of simple buttons

Place the mouse over the button to

test the Over state

Press down on the button to test

the Down state

To disable the button, click the

Control menu, and then click

Disable Simple Buttons.

5

4

3

2

1

The Up state is the button’s normal, inactive state.

The Over state is active when the mouse pointer passes over it

The Down state

is active when the mouse pointer presses down on it.

2

See Also

See “Using Button Symbols” on page

150-151 for information on creating a

button

Did You Know?

Regardless of whether buttons are

enabled or disabled, they will be

func-tional when you export your movie

The Enable Simple Buttons command

is only relevant to the Flash

develop-ment environdevelop-ment

Trang 6

Buttons do not require graphics to be placed in the hit state frames (the first three frames) As long as the active area contains a shape, the button will be invisible but will be functional and ActionScript can be applied to it The active area is the fourth frame in the button symbol Timeline An instance of an invisible button appears as a transparent blue shape in the main Timeline, but it will not be visible in the exported movie

Creating Invisible

Buttons

Create an Invisible Button

new symbol

click Button.

Click OK.

to add a keyframe in the fourth

frame (the active area)

TIMESAVER Press F6 to create

a keyframe

Add a simple graphic (a rectangle

or oval, for example) to define the

active area

Make sure the first three frames

remain empty

Return to the main Timeline

Drag the invisible button from the

Library to the Stage

Invisible buttons appear as

transparent blue shapes but are

invisible in the final export

8

7

6

5

4

3

2

1

4

The first three frames of the button remain empty.

8

An invisible button appears as a transparent blue square in the Flash development environment.

2

3

Trang 7

Movie clip symbols operate independently on the main Timeline When you want an animation to loop on a single frame in the Timeline, you can store this animation in the Timeline of a movie clip that will sit on this frame Movie clip instances can have actions applied to them and can be controlled from anywhere in the Flash movie through

ActionScript They can contain animations, interactive controls, sounds, and even other movie clips Unlike graphic symbols, you can only see the first frame of the movie clip in the main Timeline Export your movie to see the movie clip play

Using Movie Clip

Symbols

Create and View Movie

Clips Symbols

click Movie Clip.

Click OK.

Add your content to the Movie Clip

Timeline

Return to the main Timeline by

clicking the Back button or the

Scene name on the Edit bar.

Drag the movie clip symbol to the

Stage from the Library

To change movie clip properties,

select the clip on the Stage, and

then change options in the

Property Inspector

◆ Symbol Movie Clip, Graphic, or

Button

◆ X and Y position

◆ Width and Height

◆ Color Brightness, Tint, Alpha,

and Advanced

Click the Control menu, point to

Test Movie, and then click Test.

TIMESAVER Press A+Return

(Mac) or Ctrl+Enter (Win) to test it

8

7

6

5

4

3

2

1

2

3

6

7

5

Trang 8

Sometimes you'll need to break a symbol instance so that it is no longer linked to the master symbol You might do this if you want to add some-thing to the symbol without affecting the other instances In this way, the content inside the symbol will become a simple graphic that you can adjust without affecting the master symbol you made it from or any

of its instances

Breaking Symbols

Apart

Break an Instance

Select an instance on the Stage

you would like to break

Click the Modify menu, and then

click Break Apart.

TIMESAVER Press A+B

(Mac) or Ctrl+B (Win) to quickly

break apart a symbol

2

Symbol broken apart into an editable shape.

See Also

See “Swapping Symbol Instances” on

page 146 for information on swapping

symbol instances

Trang 9

You can alter the properties of an instance of a symbol without affect-ing the master symbol Any transform applied to an instance can be animated with motion tweening Flash will gradually draw the frames in between one transform to another This is how you create movement in Flash Change the scale of an instance or rotate and skew it You can perform these functions interactively with the Free Transform tool You can also add values in the Transform panel, or access additional Transform options in the program's Modify menu Distort and Envelope cannot be applied to instances and are disabled on the Tools panel options when the Free Transform tool is selected

Modifying Instance

Properties

Modify the Scale or Rotation

Select the instance on the Stage

Click the Free Transform tool on

the Tools panel

TIMESAVER Press Q to quickly

select the Free Transform tool

Click the Scale or Rotate and

Skew button in the Options

section of the Toolbar

Drag the small handles around the

bounding box to change the size of

the instance or rotate it

To use the Transform panel, click

the Window menu, and then click

Transform.

TIMESAVER Press Ctrl+T (Win)

or A+T (Mac) to open the

Transform panel

5

4

3

2

1

3

4

2

The Transform panel allows you to enter values for various transforms.

Did You Know?

You can select multiple instances and

change their properties

simultane-ously Press Shift+select each instance

you would like to alter in tandem A

bounding box will appear around all

selected instances

5

Trang 10

Transforms objects freely

Constrain transforms

Rotate commands

Flip commands

Removes all applied Transform effects

Use Additional Transform

Commands

Click the Modify menu, point to

Transform, and then click one of

the following:

◆ Free Transform Transforms the

object freely

◆ Scale Constrains the transform

to scale

◆ Rotate And Skew Constrains

the transform to rotate and

skew

◆ Scale And Rotate Constrains

the transform to scale and

rotation changes

◆ Rotate 90° CW Rotates the

selected object 90° clockwise.

◆ Rotate 90° CCW Rotates the

selected object 90°

counter-clockwise

◆ Flip Vertical Flips the object

along a vertical axis

◆ Flip Horizontal Flips the object

along a horizontal axis

◆ Remove Transform Removes

any transform effects applied to

the selected instance

2

1

Did You Know?

Changing the scale or rotation of an

instance can also be done in the

Transform panel Simply select the

instance, and then access the

Transform panel Click the Window

menu, and then click Transform The

Modify menu includes additional

trans-form commands not available

any-where else

2

Trang 11

You can change the tint, brightness, or transparency of an instance in the Color list arrow located in the Property Inspector This feature appears whenever an instance is selected on the Stage If you would like to add a color to the instance, you can do so by selecting the Tint color style Choose a color and then choose the amount of color that will be applied You can adjust the Brightness (that is, how much white

or black will be added) of an instance by choosing the Brightness color style An instance can also be made transparent by altering the Alpha color style An Alpha of zero will make the instance invisible, though it can still be selected and animated This is useful when you want an object to fade on or off the Stage You can also create unique compos-ite image effects by varying color and transparency and applying a blend to two or more overlapping movie clips instances

Modifying Instance

Color Styles and

Blends

Modify the Brightness

Click the Style list arrow in the

Property Inspector, and then click

Brightness.

Enter a value between -100 and

100 (-100= no brightness, black;

100= maximum brightness, white)

TIMESAVER You can use the

slider to the right of the field to

interactively change the level of

Brightness applied

Modify the Tint Color

Click the Color list arrow in the

Property Inspector, and then click

Tint.

Click a color from the color box list

arrow or enter an RGB value in the

fields

Enter a value between 0 and 100

(0= no color, 100= maximum

saturation)

4

3

2

1

3

2

1

2

Brightness of 75%

Brightness of -50%

3 4 2 3

Tiêu đề	Using graphic symbols
Thể loại	Textbook chapter

Định dạng
Số trang	15
Dung lượng	1,55 MB