4. Click OK to close the Advanced Settings area of the Flash Video Encoding Settings dialog box. Click the Start Queue button to start the encoding process. When it fin- ishes, quit the Video Encoder. Adding and using alpha channel video in Flash Adding alpha video to Flash is no different from adding any other video to the application; it is what you can do with it that moves it from “regular” to “cool” on the Flash technique scale. 1. Open a new Flash document, pull an FLVPlayback component from the Components panel to the stage, and link the FLV created in the previous exercise to the component. 2. Test the video, and you will see the black background you saw in the Video Encoder preview is gone and the white background of the Flash stage is visible (see Figure 4-14). Now that you understand how to create, encode, and deploy the video, you are probably wondering, “What else can I do with it?” The answer is, “Quite a bit.” When you encode the video, the alpha channel stays with the video and Flash reads it. This means that Flash really isn’t seeing a video, it is seeing a series of colored pixels enclosed within a shape. This is the key to playing with alpha video in Flash. One of the most common shapes used for a Flash animator’s first Flash animation is usu- ally a circle. Flash sees that circle as being no different from a video. It is a circular shape filled with colored pixels. In Flash 8, developers and designers were handed a rather seri- ous set of effects and blend modes that can be applied to objects in movie clips. Knowing how Flash sees a video with an alpha channel and that effects and blends can be applied to movie clips, it doesn’t take a degree in rocket science to come to the realization that alpha video, placed in a movie clip, allows you to apply the Flash blends and effects to the video. Here ’s how: Figure 4-14. An alpha channels removes the background in a video. I f you are going to be encoding an alpha channel video, you must use the advanced encoding settings. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 130 7486CH04.qxd 11/7/06 3:07 PM Page 130 1. W ith the Flash file open, right-click (PC) or Cmd-click (Mac) the component on the stage and select Convert To Symbol from the Context menu. When the Convert To S ymbol dialog box opens, name the symbol S hadow , and select M ovie Clip as its Type. Click OK. 2. Click the component on the stage to select it and click the Filters tab in the Property inspector. 3. Click the + sign once in the Filters tab to open the Filters pull-down menu. Select Drop Shadow. 4. Change the Quality setting to High and test the movie. The talking head now has a shadow (see Figure 4-15). In this next exercise, you will apply a blend mode to the video. That major difference here will be the use of a video object, not the component, in the movie clip. This way you can see that the blends and effects can be applied to video playing through the video object, not just the FLVPlayback component. The interesting area of intersection between both techniques is the use of a movie clip to stream the video. 1. Open the Blend.fla file found in the Blends_Filters folder of your Chapter 4 Exercise folder. 2. Select the video object on the stage and, in the Blend pull-down on the Property inspector select Screen (see Figure 4-16). When you apply a filter or blend to the FLVPlayback component, don’t get alarmed when you see the effect or blend applied to the entire component on the stage. The component is seen as the object until the Flash Player takes over. Figure 4-15. You can apply effects, such as a drop shadow, to a video containing an alpha channel. CREATING ALPHA CHANNEL VIDEO FOR FLASH 131 4 7486CH04.qxd 11/7/06 3:07 PM Page 131 Figure 4-16. The blend mode can be applied directly to the movie clip containing the video. 3. Test the movie. The video looks somewhat ghostlike. You don’t need to use the Filters or Blend pull-down to apply these effects. They can just as easily be applied through the use of ActionScript. Let’s apply the screen mode using code. Here’s how: 1. Open the Blend_AS.fla file in your Chapter 4 Exercise folder. The only difference between it and the file you just used is the inclusion of an Actions layer, and the symbol on the stage has been given the name of mcMyVid. 2. Select the first frame in the Actions layer and open the ActionScript window. Click once in the Script pane and enter the following code: mcMyVid.blendMode = "screen"; 3. Save and test the movie. As you can see, applying a blend mode is really quite simple. All you need to do is identify the movie clip to which the blend mode will apply , apply the blendMode property to each pixel of the movie clip, and then identify the mode. You can also use a number for the mode instead of the name. In this instance the code would be mcMyVid.blendMode = 4; If you are wondering where the code that drives this video is located, double- click the video’s movie clip in the Library. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 132 7486CH04.qxd 11/7/06 3:07 PM Page 132 Here is a list of the modes and their integer values: " normal" o r 1 "layer" or 2 "multiply" or 3 "screen" or 4 "lighten" or 5 "darken" or 6 "difference" or 7 "add" or 8 "subtract" or 9 "invert" or 10 "alpha" or 11 "erase" or 12 "overlay" or 1 "normal" or 13 "hardlight" or 14 Applying a filter using ActionScript is a bit more complicated than tossing a blend mode onto a movie clip. Filters have their own class in ActionScript, and, to apply a filter, you have to import the class and then apply the filter. When you first apply the filter, you are going to be prompted to enter what seems like a confusing number of values as the parameters for the filter. They really aren’t that confus- ing because they are exactly the same values you would enter in the Drop Shadow filter menu (see Figure 4-17). The only difference is the boxes requiring you to add a check mark will have a value of True or False in the code. Figure 4-17. The parameters in ActionScript and the dialog box are an exact match. Be aware the order of the modes and the integers doesn’t follow that in the Blend pull-down. If they did, the integer value for hardlight would be 8, not 14. CREATING ALPHA CHANNEL VIDEO FOR FLASH 133 4 7486CH04.qxd 11/7/06 3:07 PM Page 133 Here’s how to apply a Drop Shadow filter to the video using ActionScript: 1. Open the Shadow_AS.fla file in your Chapter 4 Exercise folder. 2. Select the first frame of the Actions layer and open the ActionScript Editor. 3. Enter the following code: import flash.filters.*; This line imports the entire filter package into the Flash Player. This leaves you the flexibil- ity to apply multiple filters to a video without having to import each one, as you need it. 4. Press the Return/Enter key and add the following line of code: var ds:DropShadowFilter= new DropShadowFilter(20,45,0x000000,.8,15,➥ 15,1,3,false,false,false); What you have done is to give the filter a name and created a new instance of the filter. Let’s go through this to help you understand what you did. The first thing you may have noticed is the tooltip (shown in Figure 4-18) that appeared when you pressed the bracket key. This tooltip gives you the order of the values to be entered and the type of value to be entered. distance: The distance for the shadow, in pixels. angle: The angle of the shadow; the values range from 0 to 360. color: The hexadecimal color of the shadow. alpha: The alpha transparency value of the shadow. Values are any number between 0 and 1. In this example, the .80 means the alpha value is 80% transparency. blurX/blurY: The horizontal and vertical blue values. strength: The strength of the shadow’s spread. The higher the value, the more contrast there is. Valid values range between 0 and 255. quality: The quality of the shadow. 1 is low quality. 2 is medium quality. 3 is best quality. inner: Determines whether the shadow is an inner shadow. Values are either True or False. knockout: Applies a knockout effect if the value is True. hideObject: If set to True, the video is hidden, but the shadow isn’t . I f you are going to use a code-based approach to using a filter and are unsure what the final result will be, use the dialog box to set the values, and, if they are what you are looking for, write them down. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 134 7486CH04.qxd 11/7/06 3:07 PM Page 134 Figure 4-18. The parameters you need to enter are contained in the tooltip. 5. Press the Return/Enter key and enter the following line of code: mcMyVid.filters = [ds]; The filter is applied to the movie clip. 6. Save the movie and test it. Note the shadow as shown in Figure 4-19. Figure 4-19. Applying a filter using ActionScript Create an iPod-style video Up to this point in the chapter, you have pretty well mastered the basics of creating an alpha channel video, encoding it, and getting it to play in Flash. The balance of this chap- ter is designed to get you thinking about what you have learned and taking it to the next level. The genesis for this exercise starts with a CD of video outtakes from the Studio 8 release. One of the authors had casually mentioned to a friend of his at Adobe that finding green screen material for a book was not exactly easy. About a week later, the CD arrived on his desk and a note with the CD simply said, “Think you will enjoy these. Have fun.” Though there were a lot of hilarious clips of the actors “flubbing” their lines and generally cutting up, the one that caught his attention was a very short clip of one of the actors doing a “muscle man” routine. Like most creatives, his first thought was, “What can I do with this?” A couple of nights later, an iPod ad appeared during a TV show he was watching and the proverbial lightbulb lit up. CREATING ALPHA CHANNEL VIDEO FOR FLASH 135 4 7486CH04.qxd 11/7/06 3:07 PM Page 135 1. O pen the i Pod.aep f ile in the i PodAd f older found in your Chapter 4 E xercise folder. This clip is actually quite typical of the material that will be handed to you. Though it is a green screen video, there is an area on the left edge of the clip (see Figure 4-20) that shows the edge of the screen and some of the equipment on the set. This will have to be removed before you start. Figure 4-20. You start with a “problematic” green screen video clip. 2. Click the Comp once, select the Pen tool, and draw a shape by clicking the mouse around the subject in the video. As you draw the shape, you will notice anything outside of the vector disappears from the Comp. The Pen tool is also a masking tool, and what you have just done is to create a garbage matte to get rid of any- thing on the screen you don’t need. 3. Click the RAM Preview button or scrub across the timeline, and pay careful atten- tion to the subject as the video plays. What you don’t want to do is to have the matte cut off any part of the subject. If, for example, you notice the top of his hat is cut off, click the vector point once and select the Covert Vertex tool in the Pen tool pull-down menu. Click-drag the point to add a curve that goes above his hat (see Figure 4-21) and do another RAM preview or scrub through the timeline to be sure this solves your problem. Figure 4-21. Use the Pen tool to create a garbage matte. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 136 7486CH04.qxd 11/7/06 3:07 PM Page 136 4. D rag the Keylight f ilter onto the Comp and, using the eyedropper t ool, select the green area behind the actor. 5. When the green disappears, use these Keylight settings to clean up the mask: Screen Pre-blur: .5 Screen Matte —Clip Black: 42 Screen Matte —Clip White: 52 Screen Shrink/Gro : 5 6. Select Screen Matte from the View pull-down, and you will see you have a clean mask (as shown in Figure 4-22). The next step is to turn the subject black. Figure 4-22. The masks and the Keylight settings in the Effect Controls panel Working with color in After Effects is, unsurprisingly, similar to using the color control fea- tures of Photoshop. In fact, if you twirl down the Color Correction area of the Effects & Presets panel, you will see that many of the plug-ins are the same features found in Photoshop. To turn the subject black, all we have to do is put on our “Photoshop hats” for a moment . A rather common method to bring up the blacks (shadows) or the whites (highlights) in a Photoshop image is to open the Levels dialog box in Photoshop and adjust the white or the black point of the histogram. It really is no different here. 7. Drag the Levels filter from the Color Corr ection list onto the Comp. When you release the mouse, you will see a similar dialog box to that found in Photoshop. 8. Twirl down the Input White category in the Effect Controls panel and drag the slider from its current value of 255 to 0. The figure in the image will turn black. What you have just done is to tell After Effects, “ All pixels with a value between 1 and 255 now have a value of 0,” which is black. CREATING ALPHA CHANNEL VIDEO FOR FLASH 137 4 7486CH04.qxd 11/7/06 3:07 PM Page 137 9. Click the Toggle Transparency Grid button in the Comp window to see the effect (as shown in Figure 4-23). To get the “muscle man” moving, click the RAM Preview button. Figure 4-23. Use the Levels plug-in to change to color. To finish up this project, render the video out as a QuickTime movie using the Animation codec with Millions of Colors+. Save the project and encode the video in Flash. When the video is encoded, open Flash and set the stage color of a new Flash file to a rather vibrant solid color. (We used a bright red, FF0000.) Add an FLVPlayback component to the stage or create and code up a video object. Link the iPod.flv file to the component and test the video. As you can see in Figure 4-24, you, too, can create an iPod-style ad. Figure 4-24. The final product playing in the Flash Player I f you are a Photoshop purist, you can also get the same effect by dragging the White Point slider under the histogram all the way to the left. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 138 7486CH04.qxd 11/7/06 3:07 PM Page 138 Trimming Flash video and using cue points to trigger Flash events In this exercise, you are going to learn how to use cue points embedded in an alpha chan- nel FLV file to trigger events on the Flash stage. The plan is to have a young woman walk across the Flash stage, and, when she stops to look at the massive TV behind her, a video starts to play on the TV screen. She will then continue her walk, look at another TV, and trigger a second video. There is an issue that will have to be dealt with before she takes her walk. The video con- taining the woman is over 700 pixels wide and just over 200 pixels high. The Flash stage is only 400 pixels wide. This means the FLV file will have to be trimmed. The next aspect of this exercise deals with a feature that is new to Flash Video: the ability to add cue points to a video. The neat thing about cue points is they can be used to trig- ger events—a video starts playing when the cue point is reached—in the Flash movie. Like any new feature of an application, it has its good points and its bad points. Cue points can be regarded as being either destructive or nondestructive. By destructive, we mean the cue point is hardwired into the FLV file and can’t be changed or removed from it. If the timing is out, you will have to add another cue point, and if that one is wrong . . . yet another. The other method of using cue points is to use ActionScript. This is the nondestructive method. If a cue point is out of synch, you open the code and change the time for the cue point. We are going to show you both methods and let you decide which one best fits your needs. Finally, this exercise answers a very common question: “Can I play multiple videos in a Flash movie?” The answer is obviously yes. For example, Microsoft is starting the buzz around their new Vista operating system and has hired the actor Tom Skerritt to be their spokesperson. When you arrive at the Vista page— www.seewindowsvista.com/—Skerritt stands in the middle of the screen, and behind him seven small videos play while seem- ingly hovering in space—check it out! If you have been following this chapter so far, you know how the video for the actor on this site was created and how to create the shadows under the videos. What we haven’t told you is how each of the small videos plays. The answer requires you once again to think a bit differently about video. Remember, when you place a video into Flash, you aren’t controlling the “video,” you are controlling its data stream into the Flash 8 Player . This stream is turned on and off by using the NetStream class in ActionScript. What you may not realize about this class is it can control only one video per stream. Thus the Flash movie on this site is not one big Flash video. It is a collection of eight Flash videos, each having its own NetStream object. Pull the videos out of the image and replace them with eight separate pipes, and you will get the idea. The other aspect of this piece is the actual size and length of the small videos. They are about 90 pixels wide and 60 pixels high for a reason: performance in the user ’s browser . CREATING ALPHA CHANNEL VIDEO FOR FLASH 139 4 7486CH04.qxd 11/7/06 3:07 PM Page 139 [...]... videos start to play (see Figure 4- 3 0) as she turns to look at the TV sets Figure 4- 3 0 Note the different screens of the videos playing in the TV sets 147 748 6CH 04. qxd 11/7/06 3:07 PM Page 148 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Using ActionScript to add cue points In this exercise, you are not going to hardwire the cue points into the FLV You are going to add them using ActionScript... can do, though, is to add a cue point or to change its type from Event to Navigation 9 Select the component on the stage and give it the instance name of Betina Save the file 145 748 6CH 04. qxd 11/7/06 3:07 PM Page 146 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Was that a cue point I just heard? Just because the FLV has cue points embedded in it doesn’t mean the videos in the video objects... Page 144 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS The Type pull-down gives you an idea of the power of cue points in an FLV video They can be used to trigger other videos, movie clips, and so on while the Flash movie plays These are known as events The other thing cue points can do is to navigate through the movie or other movie clips 4 Drag the jog controller to the point where Betina... 748 6CH 04. qxd 11/7/06 3:07 PM Page 140 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS If you step away from the project and just consider it from a technical point of view, you need to understand the Flash Player 8 is doing a huge amount of work It is managing the overall data stream into the user’s browser and simultaneously managing the data stream of eight FLV files As we have pointed... Betina All of this space is not needed, and it, too, needs to be reduced 141 748 6CH 04. qxd 11/7/06 3:07 PM Page 142 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Figure 4- 2 6 Get the dimensions of the video in the QuickTime Player The Video Encoder won’t give you this information Now turn your attention to the video as it plays You will see that as Betina walks across the screen, she will stop,... into the FLV In the next chapter, the dragon hunt continues as we explore the creation of movie titling sequences, a few effects, and how to add closed captioning to video 150 748 6CH 04. qxd 11/7/06 3:07 PM Page 151 748 6CH05.qxd 11/10/06 10:00 AM Page 152 748 6CH05.qxd 11/10/06 10:00 AM Page 153 5 CREATING TEXT ANIMATIONS FOR FLASH 748 6CH05.qxd 11/10/06 10:00 AM Page 1 54 FROM AFTER EFFECTS TO FLASH: POETRY. .. with the cue point in the text box 5 Save and test the video The captions from the XML document will appear below the video, as shown in Figure 5-2 Figure 5-2 The captions appear under the talking head 157 748 6CH05.qxd 11/10/06 10:00 AM Page 158 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Playing with text We are going to start this section of the chapter not by digging into some of the... 30 to 60 Click the Scene 1 link to return to the main timeline 163 748 6CH05.qxd 11/10/06 10:00 AM Page 1 64 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Figure 5-8 The Blur filter is applied to the movie clip Though you can apply filters, in Flash, to both text and movie clips, the blur won’t tween if you just use text This explains why the text block was placed in another movie clip 7 Select... 5-6 , will appear in the middle of the Comp 161 748 6CH05.qxd 11/10/06 10:00 AM Page 162 FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Figure 5-6 A lens flare Obviously a static lens flare is right up there with counting the needles on a pine tree Let’s put it in motion The plan is to have it rotate around the screen, brighten, and then fade out as it comes to its final resting position 5 In. .. turn around to look at something, and then move on The points in the video where she stops are where you are going to start the videos playing in the TV screens 1 Open the Flash 8 Video Encoder and add the betina.mov file to the Encoder Queue 2 Click the Settings button, and, when the Flash Video Encoding Settings window opens, name the video Betina Click the Show Advanced Settings button to open the . clips. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 144 748 6CH 04. qxd 11/7/06 3:07 PM Page 144 6. C lick the OK b utton to return to the Video Encoder and click the Start Queue b ut- ton. write them down. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 1 34 748 6CH 04. qxd 11/7/06 3:07 PM Page 1 34 Figure 4- 1 8. The parameters you need to enter are contained in the tooltip. 5. Press. points into the FLV file. FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 148 748 6CH 04. qxd 11/7/06 3:07 PM Page 148 Betina.addEventListener( "cuePoint", ourListener ); Betina.addASCuePoint(5.701,"First"); Betina.