Foundation Flash CS4 for Designers- P17 docx

471 VIDEO 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 472 CHAPTER 10 Figure 10-27. The captions will appear over the video. Be careful with this feature, This example assumes the controls will appear under the video. If your controls or skins appear over the video, they will hide the captions. To prevent this, add a dynamic text box to the stage under the video, give it an instance name, and link the captions to it using the CaptionTargetName parameter for the FLVPlaybackCaptioning component. 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. 2. Double-click Preset in the Media Encoder to open the Export Settings window. Click the Video tab. 473 VIDEO 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. 474 CHAPTER 10 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*osb skinAutoHide: true skinBackGroundColor: #999999 (medium gray) source: @eocnqjpha`@]j*bhr 4. Save the file as BqhhO_naajOgej*bh]. 5. Select File ° Publish Settings to open the Publish Settings dialog box, as shown in Figure 10-30. 475 VIDEO 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 476 CHAPTER 10 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_nelph]jcq]ca9f]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 embed- 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_naaj9b]hoa attribute to ]hhksBqhhO_naaj9pnqa. Figure 10-32 shows the changed lines. Figure 10-32. Set two allowFullScreen attributes in the HTML’s <object> and <embed> tags to true to allow full- screen playback. (JavaScript, if present, must follow suit.) 477 VIDEO 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. 478 CHAPTER 10 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. 479 VIDEO 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. Embedding video Earlier, we told you that embedding video in the timeline was, well, evil. Now we are going to show you when this can actually be a good thing. The following exercise demonstrates how this works. 1. Create a new Flash document and change the stage size to 468 pixels wide by 60 pixels high, which is a common banner ad size. 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 480 CHAPTER 10 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. [...]... The UI components that ship with Flash CS4 are an improvement over the previous set, which shipped with Flash 8, in a number of ways: size (much smaller), performance (faster and better), and ease of customization As a bonus, Flash CS4 even gives you the previous set, known as the v2 components, but those only work with ActionScript 2.0 That’s an important point! They’re for publishing older movies if... tell Flash to display a caption 482 VIDEO 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... Skinning Before Flash CS3, the practice of skinning UI components was an exercise in alchemy Only the wisest and purest of wizards would trust themselves to toss mysterious ingredients into the frothing cauldron All of that changed when the components were rewritten for ActionScript 3.0, and the improvement remains intact in Flash CS4 In fact, it couldn’t get much easier Here’s how: 1 Create a new Flash. .. 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... 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. .. 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! 493 CHAPTER 11 Here’s what we’ll cover in this chapter: Using the Flash CS4. .. 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: 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... name something more meaningful—say, or —but for now, will do 4 If you like, use the Free Transform tool to change the dimensions of the button Note that it resizes much like any symbol, but its text label stays the same size Skewing or rotating the button makes its label disappear because font outlines are not embedded by default See Chapter 6 for more information about font outlines 5 Out of the box,... chapter’s folder for a working example of the code just discussed Considering UI component weight One final note before we start playing with the look of this component Unlike normal library assets, UI components add to the weight of your movie whether or not they’re used This is why seasoned Flash developers regard these things in much the same way Dracula regards garlic The reason for this is that... 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 As you started working with the Flash video components, we just know you were wondering, “How do those user interface . (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. used to tell Flash to display a caption. 483 VIDEO 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,. 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