Tài liệu Foundation Flash CS5 For Designers- P13 doc

In this case, video can be imported directly into a Flash movie clip, which makes it fully accessible to Flash as content on the stage.. On the Embedding page, select Embedded video from

5 Click once on the + sign, which is the Add parameter button, and enter AllowFullScreen as the parameter Press the Tab key to go to the Value area of the parameter just entered and enter true As shown in Figure 10-39, this parameter is now added to the lineup Click OK to close the Parameters dialog box, and test the page in a browser

Figure 10-39 Dreamweaver needs to be told that the Full Screen button is live

When video is not video

Up to this point in the chapter, we have treated video as entertainment The user simply watches it In this case, video is a rather passive medium However, sometimes video becomes content and does not require

a player, captions, or even full-screen capability In this case, video can be imported directly into a Flash movie clip, which makes it fully accessible to Flash as content on the stage

Before we start, we want you to be real clear on a fact of video life: video files are large, and importing any

of the files you have worked with so far in the chapter directly onto the Flash timeline would be a major error When considering working with video content on the Flash timeline, think short—loops of about two seconds—and think small The physical size of the video should match precisely the area of the stage where it will be used

The FLV files used in this exercise were all created in Adobe After Effects For details about creating such videos, see From After Effects to Flash: Poetry in Motion Graphics

by Tom Green and Tiago Dias (friends of ED, 2006)

3 On the Select Video page, navigate to the Apparition.flv file in your Chapter 10 Exercise

folder

4 On the same page, select Embed video in SWF and play in timeline You will see a

missive at the bottom of the dialog box warning you of the evils of this technique, but don’t

worry—the file isn’t that big Click the Continue button to open the Embedding page

5 On the Embedding page, select Embedded video from the Symbol type drop-down menu Also be sure the check boxes for Place instance on stage, Expand timeline if

needed , and Include audio are selected, as shown in Figure 10-40 Click the Continue

button

Figure 10-40 Embedding an FLV file in the Flash timeline

6 On the Finish Video Import page, click the Finish button to return to the Flash stage You

will see a progress bar, and when it finishes, the video will be on the stage, and the timeline will expand to accommodate the number of frames in the video

7 Select the video, and in the Properties panel, set its X and Y values to 0 If you open the

Library, you will also see the video is in a video object

8 Add a new layer to the timeline and enter your name

9 Save and test the movie The weird ghostlike apparitions move around behind your name (see Figure 10-41)

Figure 10-41 Embedded video can be used as content

Embedding video as a movie clip

In this next exercise, you are going to create a rainy day in the mountains of Southern California In this example, you will discover the power of matching Flash’s blend modes with video

1 Open the Rainfall.fla file in your Chapter 10 Exercise folder You will see that we have placed an image of the mountains on the stage

2 Click the first frame of the Video layer Select File ➤ Import to stage In the Import

dialog box, select the Rain.flv file, and click Open This will launch the Import Video wizard

3 Embed the video in the timeline, as in this previous exercise, but this time, when you reach the

Embedding page, select Movie clip as the symbol type, as shown in Figure 10-42 This is a

good way to go, because it routes all the necessary timeline frames into a movie clip timeline, rather than expanding the main timeline off a mile to the right

Figure 10-42 Embedded video can be turned into a Flash movie clip

4 The new movie clip will appear in the first frame of the Video layer Using the Properties panel, set its X and Y values to 0 Obviously a big, black movie clip that hides the mountains isn’t

doing the job Let’s fix that

5 Select the movie clip on the stage, and in the Properties panel, set the movie clip’s Blending option to Add The rain becomes visible, as shown in Figure 10-43

6 Save and test the movie Sit back and enjoy the rain fall

Figure 10-43 Use the Add mode to remove the black background in the FLV

Interacting with video content

So far, you have discovered how video content can interact with Flash content In the next exercise, you are going in the opposite direction: Flash content interacting with video content

1 Open the BlobEffect.fla file in this chapter’s Exercise folder You will see we have already

placed an embedded video on the timeline The video is a blobs effect To see it, open the Blobs movie clip in the Library, and when the Symbol Editor opens, press Enter (Windows) or

Return (Mac) As you can see in Figure 10-44, green blobs ooze from the top of the window and coalesce into a giant blob, which then splits apart into smaller blobs

Figure 10-44 We start with some green blobs, which is an FLV file embedded into a movie clip

2 Click in the Text layer, select the Text tool (or press T), and enter your name Use a font and size of your choosing In the Properties panel, change the color of the text to #FFFF00 (bright

yellow)

3 With the text selected, convert the text to a movie clip symbol named Name

4 With the Name movie clip symbol selected, select Overlay from the Blending drop-down

menu

The text will disappear This is because the Overlay mode either multiplies or screens the colors,

depending on the destination color, which is the color immediately under the text In this case, the yellow text is against a black background, so you can’t see the effect

5 Save and play the movie Notice how the text changes and becomes visible as the blobs pass under it, as shown in Figure 10-45

Figure 10-45 A classic example of Flash content interacting with video content

Adding cue points

You can add cue points to an FLV file in four ways:

Add them when you create the FLV file in the Adobe Media Encoder

Add them using the FLVPlayback component’s parameters

Add them using the addASCuePoint() method in ActionScript

Add them using an XML document

The first two methods are what we call destructive Once you add a cue point using those two methods, it

can’t be removed This means if your timing is off, the video will need to be reencoded and new cue points added Here’s some self-defense if you go with either of those methods: don’t remove the video from the render queue until the video is approved for play In this circumstance—and it works only for cue points

added in the Adobe Media Encoder—you select the video in the render queue and choose Edit ➤ Reset

Status When you return to the Cue Points tab, all the cue points will be there, and they can be

removed and changed

The second method is one we showed you earlier in the chapter You can use the cue points feature of the

Properties panel to add them The downside to this is if changes need to be made you need to have ready access to the original FLA

The last two ways are the most flexible because, if the timing is off, you simply open the code and change

a number

Here, we will concentrate on using an XML document to insert the cue points Before we dig into the XML, you should know that in Flash video, there are three flavors of cue points:

Navigation cue points: These cue points do exactly what the name implies: they are used to

navigate, seek, and trigger ActionScript methods If you create a navigation cue point, Flash will actually insert a keyframe at that point in the video

Event cue points: These are the most common They tell Flash and/or ActionScript to do

something when they are encountered

ActionScript cue points: These can be used only if you are using the Cue Points area in the Properties panel They can be used either for navigation or to initiate events while the video plays

In the upcoming exercise, you will create event cue points that will be used to tell Flash to display a caption

An alternate XML format for cue points

We tend to think the Timed Text format described earlier in this chapter is the way to go for cue points, if only because it’s a nonproprietary specification However, it’s good to know your options You may just decide to use the alternate approach described in this section instead If you do, there is a very specific format you must follow Let’s look at it

Open the CuePoints.xml document in this chapter’s Exercise/YourTurn folder You can use Dreamweaver CS5, a simple text editor, or even a word processor for this purpose Just make sure that when you save the file, you save it as plain text When the document opens, the first “chunk” of code you will encounter is the following:

<?xml version="1.0" encoding=“UTF-8” standalone="no" ?>

<Value><![CDATA[<font face="Arial, Helvetica, _sans"

size="12">Look up in the sky look </font>]]></Value>

This is the syntax that must be used Deviate from it at your own peril The first line specifies the encoding for the document, and the second line tells Flash that anything between the <FLVCoreCuePoints> tags is

to be considered within the context of a cue point

Each cue point you will add must be enclosed between <CuePoint> and </CuePoint> tags The <Time> tag is the start of the cue point, and this number must be expressed in milliseconds The next tag, <Type>, tells Flash that the cue point is to be an event cue point, and the tag following it, <Name>, is the name of the cue point

The rules regarding naming are rigid The <Name> tag must be fl.video.caption.2.0 followed by a series of sequential numbers to guarantee unique values In our sample XML, it goes fl.video caption.2.0.0, fl.video.caption.2.0.1, and so on

The parameters contain the styling data for the text that will appear in the caption and an end time for the caption Later in the actual XML document, you’ll see that we used the <i> tag to identify who is speaking

by setting the person’s name in italics

The endTime property, which must be expressed in seconds, will be the time when the caption disappears from the screen This number can be an integer (no decimals) or can contain up to three decimal places Finally, you may optionally contend with using color in captions, and there are a couple of rules involving this as well If you scroll down to caption 2.0.7 in the file, you will see the text in the caption uses

#FF0000, which is a bright red A couple of lines later, the backgroundColor parameter changes the background color of the caption to 0x01016D, which is a dark blue

The key here is how the colors are identified Colors are specified by hexadecimal values, but the

indication that the color is in hexadecimal notation—# or 0x—depends on where it’s being stated The first change to the red uses the pound sign, #, as traditionally used in HTML Why? It’s because it appears within HTML-formatted content The second change—to the dark blue—uses the format for specifying hexadecimal notation in ActionScript, 0x

If you do change the background color of a caption, that color will “stick.” This means all subsequent captions will use this background color If you need only a single change, as in our example, change the backgroundColor parameter back in the next cue point In our case, we changed it to black again (0x000000), as seen in caption 2.0.8

Do your sanity a favor and separate each caption with an empty line or two in the XML This makes the

captions easier to read and locate The blank space, called whitespace, will be ignored by Flash

What does all of this have to do with cue points and FLV files? You are about to find out First, though, you need to download a cartoon

HTML TAGS AND FLASH HTML tags may be used only if they’re supported by Flash They are as follows:

• Anc ho r ta g ( <a> )): If you want to make a hyperlink without using the Properties panel, this

is your tag This tag supports two attributes:

• href: An absolute or relative URL, up to 128 characters in length This attribute

corresponds to the Link setting of the Properties panel and is required if you want

the hyperlink to actually do something If you’re opening a web document, use the http:

or https: protocol If you want to trigger ActionScript instead, use the event: protocol More on this in the section “Hyperlinks and Flash text.”

• target: One of four values that correspond to the Target setting of the

Properties panel: _blank (opens the URL in a new browser window), _parent

(opens the URL in the parent frameset of an HTML frameset), _self (opens the URL in the same window or frame as the current HTML document that holds this SWF; this is the default behavior), and _top (opens the URL in the topmost window of a frameset, replacing the frameset with the new URL)

• B o l d ta g (<b>) : Makes text bold, if the current font supports it Yes, even though HTML jockeys are all using <strong> nowadays, Flash Player doesn’t support it Use the <b> tag

• B r e a k ta g (<br>) : Represents a line break

• F o nt ta g (<font>) : Provides three ways to format the styling of text, by way of the following attributes:

• color: A hex value representing a color

• face: The name of a font

• size: The size of the font in pixels You may also use relative sizes, such as +2 or –1

• I ma ge ta g (<img>) : Displays a graphic file, movie clip, or SWF inside a text field Supported graphic formats are JPEG, GIF, and PNG This tag may be configured by way of quite a few attributes:

• src: This, the only required attribute, specifies the URL of an external image or SWF, or the

linkage class for a movie clip symbol in the Library (see the “Symbol essentials” and

“Sharing assets” sections of Chapter 3) External files do not appear until they are fully loaded, so depending on your needs, you may want to embed content in the SWF itself To

refer to embedded Library content, simply use the linkage class as the value for the src

attribute—<img src='MyLinkageClass' />—instead of the path to an external file

• id: If you want to control the content of your image tag with ActionScript, you’ll need to know the instance name of the movie clip that contains that content This is where you provide that instance name

• width and height: These specify the width and height of the image, SWF, or movie clip

in pixels If you like, you may scale content along the x axis and y axis by setting these

• align: This determines how text will flow around the image, SWF, or movie clip The default value is left, and you may also specify right

• hspace and vspace: Just as with HTML, these values determine how much “padding”

appears around the image, SWF, or movie clip Horizontal space is controlled by hspace, and vertical space is controlled by vspace The default is 8 pixels A value of 0 gets rid of the padding, and negative numbers bring in the edges, pulling in adjacent content with them

• checkPolicyFile: This instructs Flash Player to check for a cross-domain policy file on the server associated with the image’s or SWF’s domain

• I ta l ic ta g (<i>) : Makes text italicized, if the current font supports it Like our note for the <b> tag, use <i> for italics in text field HTML, as opposed to the <em> tag generally preferred by web developers nowadays

• List i te m ta g (<li>): Indents text and precedes it with a round bullet In the case of normal HTML,

<li> tags may be further managed by parent list tags The bullets of unordered lists (<ul>), for example, may be specified as circle, disk, or square The bullets of ordered lists (<ol>) may be specified as numbers, roman numerals, or letters This is not the case in the microcosm of Flash HTML

Lists require neither a <ul> nor an <ol> tag, are unordered only, and feature only round bullets

• Pa r a gr a p h ta g (<p>) : Our good, old-fashioned paragraph tag Paragraphs come with a built-in line break, and you get two attributes with this tag:

• align: This affects the text alignment Valid settings are left, right, center, and justified—the same alignments available in the Properties panel

• class: This specifies the name of a CSS class selector, which can be used to stylize content

• Spa n ta g (<span>) : This tag doesn’t do anything on its own, but it accepts a class attribute that supports CSS, and that attribute is styling

• Te xt fo r ma t ta g ( <textformat>) : In many ways, this is the HTML version of the TextFormat class Use the following parameters to stylize text content:

• blockindent: Determines block indentation

• indent: Determines indentation of the first line only and accepts both positive and negative values

• leading: Affects line spacing It accepts both positive and negative values

• leftmargin, rightmargin: Determines the left and right margins of the text

• tabstops: Specifies tab stops

• U n de r l ine ta g ( <u> )): Makes text underlined This tag is the easiest way to underline text in Flash (other than through CSS styling)

Your turn: create XML captions for video

In the 1940s, the original Superman cartoons were produced by a gentleman named Max Fleischer A small number of these cartoons have entered the public domain, which means that they are free for you to download and use One of them, “Superman: the Mechanical Monsters,” is the cartoon you will be captioning To remain purer than pure, we aren’t including the cartoon in the Exercise downloads We would respectfully ask that you head over to www.archive.org/details/superman_the_ mechanical_monsters The download options are on the left side of the page, offering files in different

compressions and sizes In theory, it doesn’t matter which file you download We used the 256Kb MPEG4

(27MB) version

We find it rather fascinating that the copy of the video that plays on the page is Flash video It’s a low-quality one, but it’s Flash video all the same

Now that you have downloaded the source video, proceed as follows:

1 Open the Adobe Media Encoder, and drag the video from its location into the render queue

2 Open the Export Settings window Enter Superman as the output filename, and select FLV

as the format

3 Click the Video tab Ensure you are using the On2 VP6 codec, Deselect Resize Video if it is selected; in the Bitrate settings, use VBR and Two encoding passes Reduce the Bitrate value to 300

4 Click the Audio tab Change Output Channels to Mono, and reduce Bitrate to 64 kbps

Let’s now turn our attention to the cue points area under the preview This is where all of the pain, sweat, and aggravation that went into creating the XML document comes into play The care and diligence you put into ensuring all of the tags in the XML document are correct are about to pay off How so? Let’s add the first cue point manually to give you the idea

5 Scrub the playback head of the FLV to the 00:00:09;500 mark of the video

6 Click the + button (which is the Add Cue Point button) Enter fl.video.caption.2.0.0 as the name of the cue point Notice how the default value for Type is Event

7 Click the Add Parameter button, and enter Text into the name area Click in the Value area, and enter <font face="Arial, Helvetica, _sans" size="12">Up in the sky,

look!</font>

8 Click the Add Parameter button, and enter endTime as the name and 10.9 as the value The

cue point appears in the cue point area, as shown in Figure 10-46

Now repeat steps 6, 7, and 8 about 30 more times to add the remaining cue points (Yeah, we are kidding.)

Figure 10-46 Manually adding cue points to an FLV

Obviously, going the manual route is tedious at best Surely there must be an easier method There is: embed the CuePoints.xml document directly into the FLV file Let’s use that technique

9 Select the cue point, and click the Remove Cue Point button (the – sign) to remove the cue

point you just added

10 Click the file folder icon (the Navigate button) in the cue points area This will open the Load

Cue Points File dialog box Navigate to the 15_YourTurn_CuePoints folder, select the

CuePoints.xml file, and click the Open button

In the cue points area, you will notice all the cue points in the XML document have been added If you select the first one, you will see that the parameters have also been added, as shown in Figure 10-47

Seeing the cue point parameters can be a little tricky Don’t click the cue point’s name

That will select the name Click in the gray area of the strip between the Cue Point

Name and Time areas, and the parameters for that cue point will appear

Figure 10-47 Load the XML, and the cue points and their parameters are added in less than one second

11 Click the OK button to return to the render queue Click the Start Queue button to encode the

cartoon

12 Return to Flash CS5 and create a new document Save this document to the YourTurn folder

13 Drag an FLVPlayback component to the stage, add a skin (we used

SkinUnderAllNoFullScreen.swf ), and set the source parameter to the FLV file you just

created When the dialog box closes, you will see all of the event cue points from the XML document are listed

14 Drag a copy of the FLVPlaybackCaptioning component anywhere onto the pasteboard or

stage (it doesn’t really matter where, because the component is invisible in the published SWF) You will notice you don’t need to add the CuePoints.xml document as a parameter in the

FLVPLaybackCaptioning component All it has to do is be present in the SWF You only need to do configure the parameter when using Timed Text captions

15 Save and test the movie Notice how the captions automatically appear, as shown in Figure 10-48

Figure 10-48 The FLVPlaybackCaptioning component only needs to be in the SWF and doesn’t

require configuration

Bonus round

You don’t need to add the cue points in the XML document in the Adobe Media Encoder There is a new way of doing it Here’s how:

1 Open the CuePoints.xml document in Dreamweaver CS 5 or a text editor

2 Select the word event in the first <type></type> tag, and using the Search and Replace

feature of your software, change the word from event to actionscript

3 Save the file as Superman.xml

4 Open a new Flash document, save it to the 15_YourTurn_CuePoints folder Heave an FLVPlayback component onto the stage, and set the source to the SupermanNoCuePoints.flv file in that folder

5 Select the component on the stage, and in the Cue Points area of the Properties panel, click the Import ActionScript Cue Points button, which opens the Import

ActionScript Cue Points dialog box

6 Navigate to the Superman.xml file you just created, and click Open You will see a small Alert

box telling you that you have just imported 33 cue points Click OK When the alert closes, all of

the cue points and their parameters, as shown in Figure 10-49, will appear

7 Add a Captioning component to the pasteboard and test your movie

What this should tell you is that you need to determine, up front, when the cue points in an XML document will be added to the FLV If it is during the encoding of the video, then you need to put event or navigation between the <type> </type> tags If it is during author time, then use actionscript as the

<type>

Finally, if you think these two exercises are nothing more than “mildly interesting,” you would be making a profound error in judgment One of the reasons Flash video rarely appears on government or other publicly funded/subsidized websites is that video was, for all intents and purposes, inaccessible The ability to easily add captioned video and to turn the captions on and off has opened up a market that was otherwise closed to Flash designers and developers

Figure 10-49 The XML cue points can be added using the Properties panel

Your turn: play with alpha video

In this exercise, we introduce you to a couple of new concepts The first is that video doesn’t necessarily

need to use the FLVPlayback component and reside on the main timeline for it to work The second

concept is that just because it is video is no reason for not having fun with it Let’s start jamming with video:

1 Open the VideoJam.fla file in the Chapter 10 Exercise folder You will notice we have provided the background image

2 Create a new movie clip symbol, and name it Video

3 In the Symbol Editor, open the Library, and select New Video from the Library down menu Just click OK when the Video Properties dialog box opens

drop-4 Drag the video object from the Library onto the stage In the Properties panel, give it the instance name of myVideo, set its X and Y values to 0, and change its Width and Height values to 320 and 214

5 Add a new layer to the movie clip, and name it Actions Select the first frame of the Actions layer, open the Actions panel, and enter the following code:

var nc:NetConnection = new NetConnection();

7 Save and test the movie

What you have just discovered is video can be put into a movie clip and will still play on the main timeline This is an important concept for two reasons:

The resulting SWF is under 30KB, meaning you can use it in banner ads In fact, if you want it to

be even smaller, remove the image, and the file size drops to 1KB

Objects contained in movie clips are open to creative manipulation

Let’s continue and check out that last point

8 Select the movie clip on the stage, and twirl down the Filters area of the Properties panel Add a Drop Shadow filter, and apply these values:

You’ll see that the people in the video have all developed shadows, as shown in Figure 10-50 This is because the video, like a box drawn in a Flash file, a Fireworks PNG, or a Photoshop image, contains an alpha channel In the case of video, this channel moves, and Flash applies the drop shadow to the channel This looks OK, but let’s give the subjects a bit of depth

Figure 10-50 Filters can be applied to video contained in a movie clip

10 Select the movie clip on the stage, and add a Bevel filter to the video with these values:

Blur X : 6

Blur Y : 6

Quality : High

Distance : 3

11 Save and test the movie

The subjects take on a bit of depth, and you have also added a hint of backlighting, as shown in Figure 10-51 Don’t get aggressive with filters; subtlety counts

Figure 10-51 Multiple filters can be applied to video

Hang on, these guys are ghosts Can you turn them into ghosts? You bet

12 In the Filters area, select the Drop Shadow filter, and select Knockout, Inner Shadow, and Hide Object

13 Test the movie

You have a 3D ghost Interesting, but can you do better, of course

14 In the Filters area, select the Drop Shadow filter and deselect Knockout, Inner Shadow, and Hide Object

15 Twirl down Display in the Properties panel

16 Select the video on the stage, and select Overlay from the Display area’s Blending

drop-down menu

17 Test the video

You’ll see that the subjects take on a “ghost-like” appearance, as shown in Figure 10-52

Figure 10-52 Don’t be afraid to use the blend modes to create some interesting effects

Your turn: think big, really big!

In this final exercise in this chapter, we want you to think big, and we mean really big We are talking

full-screen, HD video Using the FLVPlayback component to go full-screen has one small issue: the stage is

what goes full screen That means the content on the stage scales up with it With HD content—720p and higher—this put a huge strain on the computer The solution, which has been part of Flash Player since Flash Player 9.0.115.0 quietly switched on HD, is to use hardware acceleration

Hardware acceleration is applied through Flash Player Simply right-click (Windows) or Control+click (Mac)

any video playing in a web page to open the Flash Player dialog box Click the Display icon (It looks like a monitor), and you will see the dialog box shown in Figure 10-53 Select Enable hardware

acceleration, and you are good to go

Figure 10-53 Enabling hardware acceleration

We suggest you open the fullScreenRect.fla file in your Exercise folder, and take a peek at the code The “magic” is found in the in the goFullScreen function at the end of the code:

function goFullScreen( e:MouseEvent ):void {

stage.fullScreenSourceRect = screenRect;

stage.displayState = StageDisplayState.FULL_SCREEN;

} The first line of the function—stage.fullScreenSourceRect = screenRect;—essentially tells Flash to create a rectangle that will hover over the stage This rectangle, in extremely simplistic terms, will be filled with the video object and the button The next line tells the stage to pop out to full screen, and when it does, only the rectangle and its contents are scaled out to full-screen, and hardware acceleration takes over to play the video

What we suggest you do is to add this code to your Code Snippets panel and to make the changes

indicated in the comments

Finally you can use the HTML template—Flash Only: Allow Full Screen—in the Publish

Settings or use Dreamweaver to tell the HTML page to permit full-screen video

If you want to try it, open the fullScreenRect.html page in your Exercise folder in a browser

What you have learned

In this chapter, you learned the following:

How video can be streamed from your web server

How to use the Adobe Media Encoder

How to encode video containing an alpha channel

Several methods of embedding and streaming video without using the FLVPlayback component

How to display HD content in Flash Player

How to add Timed Text captions to a video and how to use the FLVPLaybackCaptioning

component

An alternate XML captioning approach

The power of the creative use of filters and blend effects that can be applied to video This has been quite the chapter, and we suspect you are just as excited about the possibilities of Flash video as we are The key to the use of Flash video is really quite simple: keep an eye on the pipe The Adobe Media Encoder is one of the most powerful tools in the Flash video arsenal, and mastering it is the key to Flash video success From there, as we showed you in several exercises, the only limit to what you can do with Flash video is the one you put on your creativity Just don’t overdo it Video need to be regarded as content not entertainment and just because “I can do it” is no reason to use it Video, now, is nothing more than a JPEG image on the stage, and there must be a valid reason for its inclusion

As you started working with the Flash video components, we just know you were wondering, “How do those user interface components work?” Great question, and we answer it in the next chapter

Building Interfaces with the UI Components

Since early in its life, Flash has proven itself the leader in web animation In recent years, that dominance has nudged into the realm of online applications as well For user-facing applications, you need user interface (UI) elements, plain and simple—something to receive input from the person viewing your content or display information in a specific way, such as in a grid or selection box Sure, you’ve already seen how button symbols work, and you’re aware that input text fields accept hand-typed content They are a good start, but they are really nothing more than the tip of the iceberg

The UI components that ship with Flash CS5 are a major improvement over the set that first appeared in Flash 8, in a number of ways: they are smaller (much smaller), they perform better, (faster), and they are much easier to customize

As a bonus, Flash CS5 even gives you the previous set, known as the v2 components, but those work only with ActionScript 2.0 That’s an important point! They’re for publishing older movies if you find that necessary Choosing the Flash document type or changing your publish settings between ActionScript 3.0 and 2.0 automatically updates

the Components panel to offer the correct set You cannot mix and match components

designed for different versions of ActionScript If you were to use ActionScript 1.0, you would lose the UI components altogether!

Here’s what we’ll cover in this chapter:

Using the Flash CS5 UI components

Using ActionScript 3.0 to control components

Changing component skins The following files are used in this chapter (located in Chapter11/ExerciseFiles_Ch11/Exercise/):

lot more, including components not possible in a browser alone A smidgen of ActionScript is required to wire up components, but for the most part, adding them is a drag-and-drop operation

Out of the box, the Flash UI components are styled in a modest, attractive manner that comfortably fits a broad range of designs Of course, Flash being what it is—free from the relative constraints of HTML—you may want to customize their appearance, and you can Designers and developers familiar with Flash 8 might warn you with a shudder that you’re in for a barrel of headaches Tell the old-timers they can breathe easy Things have improved considerably in Flash CS5

We’ll start our exploration with the Button component and spend a bit more time with it than the others,

simply because once you “get it,” you get it To be sure, certain components are more complex than others, and we certainly won’t skimp as we visit each one But if you’re a complete newcomer, you may want to read through the “Button component” section first, and then breeze through the other headings until you find components of interest to you

Button component

At first glance, the Button component is just another button symbol, but the two shouldn’t be confused

As discussed in Chapter 3, button symbols have a specialized timeline, made of Up, Over, Down, and Hit frames As such, button symbols are very flexible: Over artwork can be made to spill over the button’s Up shape, paving the way for quick-and-dirty tooltips and other tricks Hit artwork can make the button invisible—but still clickable—if it is the only frame with content In contrast, the Button component has no

discernable timeline It’s a self-contained component and is much more conservative (at first glance) than

its wild, partying cousin the button symbol Figure 11-1 shows an example of the Button component

We also need you to prepare yourself We are going to be spending what may, to you, seem to be an inordinate amount of time on something so simple In actual fact, much of what we are going to talk about applies to all of the components It is time well spent

Figure 11-1 The Button component—pretty conservative, even without the tie

Using one or more instances of the Button component in your movie will add 15KB to

the SWF if no other components share the load

Using the Button component

What makes the Button component so special? In two words, consistency and toggleability The first of

those, consistency, will be evident in each of the components we visit If you accept the default skin for

every component, you’ll get a reliable uniformity among your UI widgets The second word (OK,