Foundation Flash CS4 for Designers- P17 docx

The type of video where a green or blue background is removed, or “keyed,” is called alpha channel video.. The HTML file also contains JavaScript that allows Flash to play in the browse

the caption becomes visible.” The `qn attribute means “This is how long the caption remains visible.” Alternatively—and this is really a matter of taste—you can omit `qn and replace it with aj`, which means “This is where the caption stops being visible.”

Where do you get those numbers? You can use the time code in the Adobe Media Encoder to find them, or you can use the time code displayed in the QuickTime or Windows Media Player interfaces Another place would be in the video- editing software used to create the video in the first place

Follow these steps to apply the captions in the preceding XML example to a video:

1. Open a new Flash document and save it to the ?]lpekjejcRe`ak folder in your Chapter 10 Atan_eoa folder

2. Drag an FLVPlayback component to the stage Using the Parameters tab of the Component Inspector, set its source to ?]lpekjo*bhr (make sure the Match source dimensions check box is selected) and the skin parameter to OgejQj`anLh]u?]lpekj*osb Name the layer video

3. Add a new layer named Captions Drag a copy of the FLVPlaybackCaptioning component to this new layer

4. Select the FLVPlaybackCaptioning component, open the Component Inspector and click the Parameters tab (see Figure 10-26) You will see the following parameters:

autoLayout: A value of true

lets the FLVPlayback

com-ponent determine the size

of the captioning area

captionTargetName: This

parameter identifies the

movieclip or text field

instance where the captions

can be placed The default

is auto, which means the

component will make that

decision

flvPlaybackname: This is the

instance name for the

FLVPlayback component,

which is set in the Property

inspector If there is only one

instance of the component, leave the value at the default of auto

showCaptions: If this is set to false, the captions will not display (they can be turned on with ActionScript)

simpleFormatting: If you have no formatting instructions in the XML document, set this to true Otherwise, leave it at the default value of false

source: The location of the Timed Text XML document used to supply the captions

5. Click the source parameter and enter captionsFLV.xml as the value for the parameter Make sure the showCaptions parameter is set to true

6. Save and play the video The captions will appear, as shown in Figure 10-27

Figure 10-26 The FLVPlaybackCaptioning component and its parameters

Preparing and using alpha channel video

There will be times when you need a talking head video or you want to move the subject of the video from the studio to another location These are the instances where an alpha channel video fits the bill

If you watch the weather on your local television station, you are seeing this in action The weather reporter stands in front of a green wall and starts pointing to fronts and cloud formations But the stuff being pointed at isn’t actually on the wall To create the scene, the weather reporter is pulled out

of the green background location and superimposed on the radar image

The type of video where a green or blue background is removed, or “keyed,” is called alpha channel

video If you are a Photoshop CS4 or Fireworks CS4 user, you are quite familiar with the concept of an

alpha channel or masking channel The difference in a video- editing application is that the channel or mask is in motion

How do you know you have been handed a video containing an alpha channel? Open it in the QuickTime player and check the movie information If the codec used to prepare the video is Animation and the number of colors is Millions+, the channel is there

The ability to use this type of video was introduced in Flash 8 Professional To use this feature in Flash CS4, you need to select the On2 VP6 codec in the Adobe Media Encoder This means that if your tar-get Flash Player is Flash Player 7 or lower, you can’t use alpha video

To see alpha channel video In action, let’s try it with a short video You will encode a small clip of

a young adult who has just been informed by his friend that he is dead as the result of being hit by

a bus Then you will place the video over an image in Flash

1. Open the Adobe Media Encoder and import the =hld]*ikr file from this chapter’s Atan_eoa folder into the render queue

3. Select the On2 VP6 codec and the Encode Alpha Channel option, as shown in Figure 10-28 If you fail to select this check box, you will lose all transparency in the background.

Figure 10-28 Make sure you select the Encode Alpha Channel option.

4. Twirl down the Bitrate Settings Select VBR encoding and Two encoding passes Reduce the Bitrate setting to 300 kbps and change the frame rate to 15 fps

5. Click the Audio tab and change the Output Channels setting to Mono and the Bitrate to

64 kbps

6. Click OK to return to the render queue

7. Click the Start Queue button When the render process is finished, quit the Adobe Media Encoder

8. Open the =hld]At*bh] file in Flash You will see we have tossed an image of a store into the Background layer

9. Select the Video layer and drag an FLVPlayback component to the stage In the Component Inspector panel, set the source parameter to your alpha video, and set the skin parameter to None With the component selected, in the Property inspector, set its X and Y values to 0,38

10. Save and test the movie The video appears as if filmed over the background image, as shown

in Figure 10-29

Figure 10-29 Alpha video in action

Going full screen with video

In the autumn of 2006, Adobe quietly announced that full- screen Flash video was no longer a dream Full- screen video was released as a part of the Adobe Flash Player 9 beta But even though it was well received, many felt the process was a bit too convoluted Guess what happened on the way to Flash CS3? Full- screen video became more straightforward, and it continues to be in Flash CS4

Depending on how you wish to approach the application of full- screen video, it can be either dead simple or require a bit of poking around with ActionScript and in the web page’s HTML Let’s explore both methods

Full-screen video the ActionScript/HTML way

Here’s how to achieve full- screen video using code:

1. Open a new Flash movie and save it to the BqhhO_naajOgej folder in your Chapter 10 Atan_eoa folder

2. Set the stage size to 400  300 pixels and set the stage color to #006633 (dark green)

3. Drag an FLVPlayback component to the stage and specify the following parameters:

skin: OgejKran=hhJk?]lpekj*osbskinAutoHide: true

skinBackGroundColor: #999999 (medium gray)source: @eocnqjpha`@]j*bhr

4. Save the file as BqhhO_naajOgej*bh]

Figure 10-30 The Publish Settings dialog box

6. Make sure the Flash and HTML options are selected Click the Use Default Names button to trim off the path, if there is one, and click the Publish button When the progress bar finishes and closes, click the OK button to close the dialog box When you return to Flash, save the file

You have completed the first part of the process The skin chosen contains a Full Screen button in the bottom- right corner The next step is to let the browser know that the video is to be played full screen

7. Minimize Flash and navigate to the folder where you saved the SWF and HTML files

When you published the HTML file, you actually created more than one document: the HTML file and the SWF file, which is embedded in the HTML The HTML file also contains JavaScript that allows Flash to play in the browser without user interaction (some browsers require users to click in order

to indicate their intent to play active content) At the time this book was written (shortly before the commercial release of Flash CS4), this JavaScript appeared as inline code inside the HTML document

Be aware that it might appear as a separate document by the time Flash CS4 hits the shelves If so, it will be the one with the *fo file extension among your other published files This JavaScript originally entered the scene when Microsoft made a change to Internet Explorer 7—eventually reversed in an update in mid- 2008—to let users bypass the annoying “click to activate this control” message that plagued Flash content, QuickTime videos, Java applets, and any other content that required a plug- in Technically, these files can all be placed in separate folders, but it requires custom coding Do yourself

a favor and place all of these files (the FLV, SWFs, and HTML documents shown in Figure 10-31) in the same directory when you upload the project to a web server.

If you are a Dreamweaver CS4 user, you can skip the HTML step in the Publish Settings dialog box When you place a SWF into a Dreamweaver page, Dreamweaver will handle the active content unblocking chore automatically.

Figure 10-31 The only file that doesn’t get uploaded

to your web server is the FLA

8. Open the HTML file in either your favorite HTML editor (such as Dreamweaver CS4) or a word processing application

9. Locate the 8o_nelph]jcq]ca9f]r]o_nelp: tag inside the 8^k`u: tag (not the 8da]`: tag)

In the =?[BH[Nqj?kjpajp area near the end of the code, change ]hhksBqhhO_naaj#(#b]hoa#,

to #]hhksBqhhO_naaj#(#pnqa# Again, the actual JavaScript in use, by the time Flash CS4 is commercially available, might change The key is the allowFullScreen parameter

What you have just done is to make the Full Screen button functional as far as the JavaScript ding is concerned Now you need to follow through and give the HTML the same instructions

10. Scroll down to the 8jko_nelp: area of the HTML where the 8k^fa_p: and 8ai^a`: tags can be found Find the 8k^fa_p: tag and then locate its nested 8l]n]i: tag whose j]ia attribute is ]hhksBqhhO_naaj In that 8l]n]i: tag, change the r]hqa attribute from b]hoa to pnqa

11. Scroll down to the companion 8ai^a`: tag and change its ]hhksBqhhO_naaj9b]hoa attribute

to ]hhksBqhhO_naaj9pnqa Figure 10-32 shows the changed lines

12. Save the HTML file and open it in a browser

13. When the video starts, click the Full Screen button in the bottom- right corner of the controller The video fills the screen, as shown in Figure 10-33 You can either press the Esc key or click the Full Screen button again to reduce the video to actual size

Figure 10-33 Full- screen video is a reality with Flash CS4.

The choice of an OverAll skin is deliberate This controller only becomes visible when the user rolls over the video If the user clicks the Full Screen button, the video will expand to full screen, without the controller interfering in the screen area

Full-screen video the easy way

This previous exercise may have seemed like a bit of work, but the steps are necessary when you are using a text editor or an HTML editor to write the code If the video is going to be the only content on the page, you might want to let Flash handle the duties for you Here’s how:

1. Open the BqhhPkccha*bh] file found in this chapter’s Atan_eoa+BqhhO_naajPkccha folder You will notice we have already placed an FLVPlayback component on the stage, given it a skin, and linked it to the Rqhpqnao*il0 file

2. Select File ° Publish Settings and make sure that both the Flash and HTML types are selected

3. Click the HTML tab to open the HTML settings.

4. Select Flash Only - Allow Full Screen from the Template drop- down menu, as shown in Figure 10-34 Selecting this will automatically write the tags you manually changed in the previ-ous example

Figure 10-34 Pick this template to enable full- screen playback.

5. Click the Publish button to write the SWF and the HTML file

6. When the publish process is finished, open the HTML page and click the Full Screen button The video expands to full screen, as shown in Figure 10-35 Click the Full Screen button again, and

it shrinks back into place All Flash has done here is perform the previous steps for you

Figure 10-35 Sometimes it is easier to let the software do the work.

When video is not video

Up to this point in the chapter, we have treated video as something to be played 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 movieclip, 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 2 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 7

Professional 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) In fact, Tiago is the technical editor for this book.

2. Select File ° Import ° Import Video This will launch the Import Video wizard

3. On the Select Video page, navigate to the =ll]nepekj*bhr file in your Chapter 10 Atan_eoa folder

4. On the next 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 Next button

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-36 Click the Next button

Figure 10-36 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 Property inspector, 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-37)

Figure 10-37 Embedded video can be used as content.

Embedding video as a movieclip

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 N]ejb]hh*bh] file in your Chapter 10 Atan_eoa 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 N]ej*bhr 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-38 This is a good way to go, because it routes all the necessary timeline frames into a movieclip timeline, rather than expanding the main timeline off a mile to the right

Figure 10-38 Embedded video can be

turned into a Flash movieclip

4. The new movieclip will appear in the first frame of the Video layer Using the Property inspector, set its X and Y values to 0 Obviously a big, black movieclip that hides the mountains isn’t doing the job Let’s fix that.

5. Select the movieclip on the stage, and in the Property inspector, set the movieclip’s Blending option to Add The rain becomes visible, as shown in Figure 10-39

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

6. Save and test the movie

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 >hk^Abba_p*bh] file in this chapter’s Atan_eoa 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 movieclip in the library, and when the Symbol Editor opens, press Enter (Return) As you can see in Figure 10-40, green blobs ooze from the top of the window and coalesce into a giant blob, which then splits apart into smaller blobs

Figure 10-40 We start with some green blobs, which is an

FLV file embedded into a movieclip

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 Property inspector, change the color of the text to #FFFF00 (bright yellow)

3. With the text selected, convert the text to a movieclip symbol named Name

4. With the Name movieclip 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-41

Figure 10-41 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 ]``=O?qaLkejp$% 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 ods, 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 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

meth-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 two 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

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 ?qaLkejpo*tih document in this chapter’s Atan_eoa+UkqnPqnj folder You can use Dreamweaver CS4, 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:

encod-Each cue point you will add must be enclosed between 8?qaLkejp: and 8+?qaLkejp: tags The 8Peia: tag is the start of the cue point, and this number must be expressed in milliseconds The next tag, 8Pula:, tells Flash that the cue point is to be an event cue point, and the tag following it, 8J]ia:, is the name of the cue point

The rules regarding naming are rigid The 8J]ia: tag must be bh*re`ak*_]lpekj*.*, followed by

a series of sequential numbers to guarantee unique values In our sample XML, it goes bh*re`ak*_]l)pekj*.*,*,, bh*re`ak*_]lpekj*.*,*-, 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 8e: tag to identify who

is speaking by setting the person’s name in italics HTML tags may be used only if they’re supported by Flash; a list of these may be found in the “HTML formatting” section of Chapter 6

The aj`Peia property, which must be expressed in seconds, will be the time when the caption appears from the screen This number can be an integer (no decimals) or can contain up to three decimal places.

dis-Finally, you may optionally contend with using color in captions, and there are a couple of rules ing this as well If you scroll down to _]lpekj.*,*3 in the file, you will see the text in the caption uses

involv-BB,,,,, which is a bright red A couple of lines later, the ^]_gcnkqj`?khkn parameter changes the background color of the caption to ,t,-,-2@, 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 ,t—depends on where it’s being stated The first change to the red uses the pound sign, , as traditionally used in HTML Why? Because it appears within HTML- formatted content The second change—to the dark blue—uses the format for specify-ing hexadecimal notation in ActionScript, ,t

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 ^]_gcnkqj`?khkn parameter back in the next cue point In our case, we changed it to black again (,t,,,,,,), as seen in _]lpekj.*,*4

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.

So 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

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 In order to remain purer than pure, we aren’t including the cartoon in the Atan_eoa downloads We would respectfully ask that you head over to dppl6++sss*]n_dera*knc+

`ap]eho+oqlani]j[pda[ia_d]je_]h[ikjopano 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 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 file name and select FLV as the format

4. Click the Audio tab Change Output Channels to Mono and reduce the 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 dili-gence 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-42

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

Figure 10-42 Manually adding cue points to an FLV