Adobe Flash chuyên nghiệp - p 25 docx

adobe fLash professIonaL Cs5 CLassroom In a book 231 Creating the animation in a movie clip symbol Your button symbols in this interactive restaurant guide already contain a movie clip

adobe fLash professIonaL Cs5 CLassroom In a book 231

Creating the animation in a movie clip symbol

Your button symbols in this interactive restaurant guide already contain a movie

clip symbol of a gray information box in their Over states You will edit each movie

clip symbol to add an animation inside it

1 In the Library panel, expand the restaurant previews folder Double-click the

movie clip symbol icon for gabel loffel over info

Flash puts you in symbol-editing mode for the movie clip symbol called gabel

loffel over info

2 Select all the visual elements on the Stage (Ctrl/Command+A)

3 Right-click/Ctrl-click and choose Create Motion Tween

4 In the dialog box that appears asking for confirmation to convert the selection

to a symbol, click OK

Flash creates a Tween layer and adds one second worth of frames to the movie

clip Timeline

232 Lesson 6 Creating Interactive navigation

5 Drag the end of the tween span back so the Timeline only has 10 frames

6 Move the playhead to frame 1 and select the instance on the Stage

7 In the Properties inspector, select Alpha from the Style pull-down menu in the

Color Effect section and set the Alpha slider to 0%.

The instance on the Stage becomes totally transparent

8 Move the playhead to the end of the tween span at frame 10

9 Select the transparent instance on the Stage

10 In the Properties inspector, set the Alpha slider to 100%.

Flash creates a smooth transition between the transparent and opaque instance

in the 10 frame tween span

11 Insert a new layer and rename it actions.

12 Insert a new keyframe in the last frame (frame 10) of the actions layer

13 Open the Actions panel (Window > Actions) and enter stop(); in the Script pane

Adding the stop action in the last frame ensures that the fade-in effect only plays once

14 Exit symbol-editing mode by clicking the Scene 1 button above the Stage

15 Choose Control > Test Movie > in Flash Professional

When your mouse cursor hovers over the first restaurant button, the gray information box fades in The motion tween inside the movie clip symbol plays the fade-in effect, and the movie clip symbol is placed in the Over state of the button symbol

16 Create identical motion tweens for the other gray information box movie clips so that all the restaurant buttons are animated

 Note: If you want

an animated button to

repeat its animation,

leave out the stop

command at the end

of the movie clip’s

Timeline.

adobe fLash professIonaL Cs5 CLassroom In a book 233

review Questions

1 How and where do you add ActionScript code?

2 How do you name an instance, and why is it necessary?

3 How can you label frames, and when is it useful?

4 What is a function?

5 What is an event? What is an event listener?

6 How do you create an animated button?

review answers

1 ActionScript code resides in keyframes on the Timeline Keyframes that contain

ActionScript are indicated by a small lowercase “a” You add ActionScript through the

Actions panel Choose Window > Actions, or select a keyframe and click the ActionScript

panel icon in the Properties inspector, or right-click/Ctrl-click and select Actions You enter

code directly in the Script pane in the Actions panel, or you can select commands from the

categories in the Actions toolbox You can also add ActionScript through the Code Snippets

panel Select an instance on the Stage, choose an interaction in the Code Snippets panel, and

then click the Add to Current Frame button

2 To name an instance, select it on the Stage, and then type in the Instance Name field in the

Properties inspector You need to name an instance to reference it in ActionScript

3 To label a frame, select a keyframe on the Timeline, and then type a name in the Frame Label

box in the Properties inspector You can label frames in Flash to make it easier to reference

frames in ActionScript and to give you more flexibility If you want to change the destination

of a gotoAndStop or gotoAndPlay command, you can move the label rather than having to

locate every reference to the frame number in the script

4 A function is a group of statements that you can refer to by name Using a function makes it

possible to run the same set of statements without having to type them repeatedly into the

same script When an event is detected, a function is executed in response

5 An event is an occurrence that is initiated by a button click, a key press, or any number of

inputs that Flash can detect and respond to An event listener, also called an event handler, is

a function that is executed in response to specific events

6 Animated buttons display an animation in the Up, Over, or Down keyframes To create an

animated button, make an animation inside a movie clip symbol, and then place that movie

clip symbol inside the Up, Over, or Down keyframes of a button symbol When one of those

button keyframes is displayed, the animation in the movie clip plays

234

7 Using TexT

Lesson Overview

In this lesson, you’ll learn how to do the following:

• Add and edit text on the Stage

• Apply style and formatting options to text

• Create text with multiple columns

• Create text that wraps around objects

• Add hyperlinks to text

• Use editable text for user input

• Dynamically change text content

• Embed fonts and understand device fonts

• Load external text

This lesson will take approximately two and a half hours to complete If needed, remove the previous lesson folder from your hard drive and copy the Lesson07 folder onto it

235

Words are integral to any Flash site Learn how to use

the new Text Layout Format to create titles,

sophis-ticated layouts, and dynamic text content that can

change to suit diff erent situations.

236 Lesson 7 Using Text

getting started

To begin, view the finished project to see the different kinds of text elements that you’ll create in this lesson

1 Double-click the 07End.swf file in the Lesson07/07End folder to play the animation

The finished project is an interactive realtor site for the fictional city of Meridien, whose restaurant guide you completed in the previous lesson

Viewers can read about the featured property and its neighborhood or figure out how much they can afford to pay every month using the mortgage calculator

at the bottom right Enter a new rate, a new value for the percent down, and click the Calculate button to display the estimated monthly payment

2 Close the 07End.swf file

3 Double-click the 07Start.fla file in the Lesson07/07Start folder to open the initial project file in Flash

adobe fLash professionaL Cs5 CLassroom in a book 237

The Stage already includes some simple design elements to divide the space,

with several assets already created and stored in the Library panel

4 Choose File > Save As Name the file 07_workingcopy.fla and save it in the

07Start folder Saving a working copy ensures that the original start file will be

available if you want to start over

Understanding TLF Text

Flash Professional CS5 introduces a way of working

with text that is different and much more powerful

from previous versions Flash uses a feature called

Text Layout Format (TLF) When you choose the

Text tool ( ) in the Tools panel to add text to the

Stage, you must choose either TLF Text or Classic Text

Choose TLF Text when you want to use more sophisticated controls for text

formatting such as multiple columns or wrap-around text You’ll learn many of the

features unique to TLF Text in this lesson Choose Classic Text when you don’t

need that degree of layout control or if you need to target an older version of the

Flash Player

TLF Text depends on a specific external ActionScript library to function properly

When you test a movie or publish a movie that contains TLF Text, an additional

Text Layout SWZ file ( ) is created next to your SWF file The SWZ file is the

external ActionScript library that supports TLF Text

238 Lesson 7 Using Text

When a SWF file that contains TLF Text is playing from the Web, the SWF looks for the library in a couple of different locations The SWF looks for the library on the local computer it is playing on, where the library is usually cached from normal Internet usage The SWF also looks on Adobe.com for the library file, and if that fails, looks in the same directory as the SWF

You should always keep the SWZ file with your SWF file so the TLF Text features work properly when you test your movies locally You should also have the SWZ file accompany your SWF file when you upload it to your Web server, just to

be safe

Merging the TLF Text library

If you don’t want to maintain the separate SWZ file, you can merge the required ActionScript library with your SWF file However, doing so adds significantly to the size of your published SWF file and is not recommended

1 Choose File > Publish Settings Click the Flash tab and choose Settings for ActionScript 3.0 You can also click the Edit button next to ActionScript settings in the Properties inspector

The Advanced ActionScript 3.0 Settings dialog box opens

2 Click on the Library path tab

adobe fLash professionaL Cs5 CLassroom in a book 239

3 Click the arrow next to the textLayout.swc listing in the display window

The arrow points downward, expanding the information about the TLF Text

feature Note that the Link Type shows that the file uses a runtime shared

library, and the URL for the library is on Adobe.com

240 Lesson 7 Using Text

4 In the Runtime Shared Library Settings section, choose Merged into code for the Default linkage

The Link Type changes to Merged into code

The current Flash file will merge the TLF Text ActionScript library into the published SWF if you click OK to accept these settings For the project in this

lesson, do not merge the code Click Cancel to leave the default setting, Link

Type as a Runtime Shared Library

Adding simple Text

You’ll start by adding simple, single lines of text for display Add text to the Stage with the Text tool in the Tools panel When you add text, whether TLF Text or Classic Text, the text remains fully editable So at any point after you create your text, you can return to it and change it or any of its properties, such as its color, font, size, or alignment

As with other Flash elements, it’s best to separate text on its own layer to keep your layers organized Having text on its own layer also makes it easy to select, move, or edit your text without disturbing the items in the layers below or above it

Adding the titles

You’ll add titles to various sections of the realtor site and learn about the different formatting and style options

1 Select the banner layer and click the New Layer button Rename it text.

 Note: You can break

apart text (Modify >

Break Apart) to convert

each letter into separate

drawing objects whose

stroke and fill you can

modify However, once

broken apart, your

text will no longer be

editable