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

VIDEO 579 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). 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. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 580 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. This book was purchased by flashfast1@gmail.com www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 581 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. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 582 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. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 583 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: www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 584  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" ?> <FLVCoreCuePoints> <CuePoint> <Time>9000</Time> <Type>event</Type> <Name>fl.video.caption.2.0.0</Name> <Parameters> <Parameter> <Name>text</Name> <Value><![CDATA[<font face="Arial, Helvetica, _sans" size="12">Look . up in the sky . look .</font>]]></Value> </Parameter> <Parameter> <Name>endTime</Name> <Value>11.0</Value> </Parameter> </Parameters> </CuePoint> </FLVCoreCuePoints> www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 585 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. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 586 HTML TAGS AND FLASH HTML tags may be used only if they’re supported by Flash. They are as follows: • Anc hor 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). • Bold 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. • Br eak tag ( <br> ): Represents a line break. • Fo nt tag ( <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. • Image 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 attributes arbitrarily. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 587 • 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. • Italic 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 ite m tag ( <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. • Para graph 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 tag ( <span> ): This tag doesn’t do anything on its own, but it accepts a class attribute that supports CSS, and that attribute is styling . • Text for mat 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. • Un derline tag ( <u> )): Makes text underlined. This tag is the easiest way to underline text in Flash (other than through CSS styling). www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 588 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.) www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... 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... Skinning This book was purchased by flashfast1@gmail.com 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 CS5 In fact, it couldn’t get... scripts layer: import fl.managers.StyleManager; import fl.controls.Button; var fmt1:TextFormat = new TextFormat(); fmt1.bold = true; fmt1.color = 0xFF0000; var fmt2:TextFormat = new TextFormat(); fmt2.bold = false; fmt2.color = 0x0000FF; StyleManager.setStyle("textFormat", fmt1); StyleManager.setComponentStyle(Button, "textFormat", fmt2); btn2.setStyle("icon", "star"); 3 Test the movie 613 www.zshareall.com... 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... 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... ➤ Edit Document or click the Scene 1 link to return to the main timeline What the ? In the authoring environment, your button hasn’t changed Folks, this is a fact of life with skins in Flash: there is no preview mode for skinning 5 Test your movie to see that your alteration appears, for both buttons, as the new up skin in the published SWF Click any button to verify that the remaining skins (for example,... 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... other classes you intend to use In contrast, Flash takes care of this for you for the most part—in keyframe scripts This just happens to be an exception Without those first two lines, Flash will get confused about what you mean later when you mention StyleManager and Button directly These hierarchical class arrangements are called packages To find the package for other components so that you can carry... 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... 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 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 . 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. 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