Flash CS4 Professional in 24 Hours- P13 docx

ptg Embedding Video Versus Playing External Video 351 If all you wanted is a video inside Flash, you could stop after the preceding task. However, embedding the video inside your movie the way you did in step 2 in the preceding task is not always the best choice. You use an .flv Embed a Video TRY IT YOURSELF ▼ FIGURE 19.3 This screen enables you to choose how your video is embed- ded in your Flash movie. FIGURE 19.4 When you place a video on the Stage, Flash asks if you want to extend the Timeline to accommo- date the video’s length. From the Library of Lee Bogdanoff ptg 352 HOUR 19: Using Video Using Video Next, you learn some of the ways to display videos—both embedded into your .swf and created as an .flv that resides outside of your file. In this section, you see how to control the playback of your videos (like giving the user a stop and play button), as well as using special effects such as mask- ing. The creative side of displaying a video is more interesting than the technical details. Because the technical details vary between embedded and external video, we’ve separated the two. Playing an Embedded Video As a review, a sound in a keyframe that has its sync setting set to Event be- gins to play when that frame is reached, and it continues to play until it’s finished—even if the Timeline slows down to display all the frames. Sounds with the sync setting of Stream are locked to the Timeline. This means you FIGURE 19.5 When creating an .flv, you can select from a variety of skins. for external playback in the “Playing External .flv Videos” section later this hour. You’re welcome to repeat this task, but select “Load External Video with Playback Component in step 2. The main difference is you see an addi- tional Skinning dialog before the last step, as shown in Figure 19.5. We step you through these later, but we want to mention it for comparison to the embed technique we just showed. From the Library of Lee Bogdanoff ptg Using Video 353 need to make sure the sound has enough space in the Timeline to finish. The reason to review Stream sounds at this point is that an embedded video placed in a keyframe needs enough space in the Timeline to finish playing. For example, if the video is 10 seconds long and the frame rate is 12 fps, you need 120 frames in the Timeline. Flash tells you exactly how many frames are needed if you drag an embedded video into a Timeline that’s too short. Another reason to remember Stream sounds is that by de- fault all the audio in an embedded video is affected by the global publish setting for stream audio, which you set by selecting File, Publish Settings to open the Publish Settings dialog box, and then select the Flash tab. The visuals in your video behave like Graphic symbols. Embedded videos are not really the same as Graphics, buttons, or Movie Clips because you can’t tween videos or tint them through the color effects, as you can other symbols. You can nest the videos inside a Movie Clip and apply effects to the clip. However, of the symbol types, videos are most like Graphics in several respects. You can scrub to see a preview of videos. Also, you must extend the Timeline far enough for all the video frames to play, as you did in step 6 of the preceding task. These concepts are discussed to help you understand a few of the technical details that follow. You’re about to see how easy it is to build controls for an embedded video. Make a Playback Controller for an Embedded Video TRY IT YOURSELF ▼ In this task, you add some standard video buttons that give the user a way to control the video. Follow these steps: 1. Create a new Flash File (ActionScript 3.0), and import a video using File, Import Video. Drag the video onto your main Timeline (if it’s not already in the Timeline), and enable Flash to add needed frames. 2. You’re about to create three buttons: Stop, Pause, and Play. Put those buttons in their own layer on the main Timeline. Lock the layer the video is in, and then make a new layer for the buttons. 3. Instead of drawing your own buttons select Window, Common Li- braries, Buttons. Inside this Library is a folder called playback rounded . Drag each of the following buttons from that folder to the Stage: Rounded Green Pause, Rounded Green Play, and Rounded Green Stop. You can align these buttons underneath the video any way you want. Use the Align panel to make them line up. 4. Use the Properties panel to give your three buttons the following in- stance names: pauseButton, playButton, and stopButton. From the Library of Lee Bogdanoff ptg 354 HOUR 19: Using Video One fair criticism of the previous task is it dirtied up the main Timeline. That is, the Timeline has as many frames as the video does. Normally we’d suggest putting the video inside a Movie Clip; enable that clip to grow as long as it needs to be; then place the Movie Clip instance in the main Time- line where it only uses one frame. The problem with that approach is when Flash reaches the frame containing the Movie Clip, it must download all the frames contained in that clip before displaying anything. If the clip has a big video, this could mean a long delay. So, doing it the way you did in the task is appropriate for embedded videos. By the way, you can save the pre- ceding task as built, and then in Hour 21, “Designing a Website to Be Mod- ular,” use the MovieClipLoader to load the movie at runtime. Before we move on to playing external .flv videos, all the cool stuff like masking the video into an odd shape works with embedded videos. This is covered later this hour in the “Adding Special Effects” section. TRY IT YOURSELF ▼ Make a Playback Controller for an Embedded Video 5. Select the first keyframe in the buttons’ layer and open the Actions panel. Enter the following code into the Actions panel: stop() pauseButton.addEventListener(“click”, doPause) playButton.addEventListener (“click”, doPlay) stopButton.addEventListener (“click”, doStop) function doPause ( evt ) { stop() } function doPlay ( evt ) { play() } function doStop ( evt ) { gotoAndStop(1) } 6. For a review of ActionScript, revisit Hour 16, “Basic Interactivity.” Test the movie by selecting Control, Test Movie, and you’re able to control the embedded video. From the Library of Lee Bogdanoff ptg Using Video 355 Playing External .flv Videos Earlier this hour you learned that Flash can play external .flv files. Natu- rally, you need to first create the .flv. The simplest way to produce an .flv is to use the Adobe Media Encoder CS4. The tasks that follow concentrate on how to play an external .flv once it’s produced. In the next task, “Cre- ate an .flv and Use the FLPPlayback Component,” you generate the .flv, and use it immediately. Then in subsequent exercises, you can reuse the .flv you produced rather than sit through the compression stage again. Playing an external .flv definitely gives you the best results. Most notably the audio and picture remain synchronized. Playing external .flvs is a bit more involved, however. For one thing, you have to remember to upload both the .swf and the .flv file, plus an additional .swf if you use one of the FLVPlayback component’s skins. You only get a preview of the video frames when the video is embedded. If you want to draw animations on top of live action video, you need to work with embedded video, at least at the stage where you’re producing the animated overlay. You can delete the embedded video once you get the animation done. Be aware there are addi- tional restrictions when playing .flv files. The following task probably seems suspiciously simple after the preceding explanation. The FLVPlayback component gives you great results with little effort. Create an .flv and Use the FLVPlayback Component TRY IT YOURSELF ▼ In this task, you create an .flv and advanced controller with no program- ming. Follow these steps: 1. Make a new folder in a known location, so all the files you need to track are easy to find. 2. Create a new AS 3.0 file, and save it in the folder as my_movie_player.fla. Launch the Adobe Media Encoder. Use this dialog to encode a video file as an .flv file. Save this file to the origi- nal directory you used in step 1. 3. Open the Component palette by choosing Window, Component. Click on the Video folder in the palette, and drag an FLVPlayback component on the stage. 4. Choose Window, Component Inspector. Under the Paramaters tab, click Skin, and then the Magnifying Glass icon on the right. You should see the Skinning dialog, as shown earlier in Figure 19.5. Select the skin SkinUnderPlaySeekFullscreen.swf. Additionally, you can modify the color to complement your video content if you want. Click OK. From the Library of Lee Bogdanoff ptg 356 HOUR 19: Using Video Playing H.264-encoded, .mp4, and .mov Videos You’ve already learned to convert .mov files to .flv files using the Adobe Media Encoder CS4. You can also use H.264 encoding with your movies, and then create .mp4 videos, which can be embedded directly in your movie in the same way as the .flv files you’ve already seen. You can try it for yourself by opening the Adobe Media Encoder and choosing Add to se- lect a .mov file. Then, click on the arrow under the Format column next to your file, and choose H.264 instead of the FLV|F4V setting you chose ear- lier. Choose whatever you like for Preset, and click Start Queue to begin encoding your movie. You end up with a new .mp4 file. Adding Special Effects Now for the fun part—once you’ve embedded a video or set up a compo- nent of video object to display an external .flv, you can perform countless special effects that can dramatically change the way a user experiences your video. We look at just a few. TRY IT YOURSELF ▼ Create an .flv and Use the FLVPlayback Component 5. You still need to tell the component which video to play. In the Compo- nent Inspector, under the Parameters tab, click on Source. 6. The source parameter needs to be changed to the .flv’s filename. 7. Because this skin includes the Fullscreen button, you need to make sure that option is set correctly when you publish. Select File, Publish Settings, and click the HTML tab. From the Template drop-down menu, select Flash Only-Allow Full Screen. 8. Now for the fun part—watch the video. Instead of doing Test Movie this time, do a Publish Preview because the fullscreen option only works in a browser. Select File, Publish Preview, Default (or press Ctrl+F12). When you’re done watching your video, there’s one last step that’s important to understand. 9. Go back to your file folder, and notice in addition to the .flv and the my_movie_player.swf based on your .fla, there’s another .swf (SkinUnderPlaySeekFullscreen.swf) for the component. There’s also the .html file. When you deploy this to the web, you need to up- load all three files, everything except the .fla. You can read more about publishing in Hour 24, “Publishing a Creation.” From the Library of Lee Bogdanoff ptg Using Video 357 Rotoscope (Draw Frames of a Video) TRY IT YOURSELF ▼ In this task, you combine frame-by-frame animation with live action video. Follow these steps: 1. Embed a video like you did in the task “Embed a Video” earlier this hour. At the end, we show you how to convert this task to work with an external .flv, but you have to start by embedding the video. If you plan on playing an external .flv, select Modify, Document, and set the frame rate to match the frame rate at which you’re going to render the video. 2. If you’re planning on leaving this as an embedded video, place the video object in the main Timeline. If you’re planning on converting this to an .flv, then first make a new Movie Clip, and put the video object inside the clip. In either case, make sure you click OK when the dialog asks to add more frames to accommodate the video’s duration (as seen earlier in Figure 19.3). 3. In the Timeline where the video appears, insert a new layer, which should appear above the video’s layer. Ensure the new layer is both above the video and extends the entire length of the video. If not, move the layer, and click a cell above the last frame in the video, and press F5. 4. Click the layer name of the empty layer to select the entire span of frames, and press F6. You now have an empty keyframe above each frame of the video where you can draw. 5. Select the Brush tool, and pick a bright color. Hold the mouse in one hand, and put the other hand on the > key (that is, the period key). Draw right into the empty keyframe of Frame 1 (perhaps draw an out- line around an object in your video, such as a person’s face). After you draw, press >, and draw another frame. Even if you have hundreds of frames to draw, you can do it quickly. It’s definitely possible to insert pauses by removing the keyframes or even do tweens that match the video, but it might be just as fast to simply draw every frame. For this exercise, feel free to stop after 10–20 frames, and come back after you’ve had some practice to finish them all. 6. If you’re going to leave the video embedded, you’re done. Go ahead, and test the movie. If you want this animation to work with an external .flv, you have two steps left. First, remove the video from the Time- line, and create an .flv based on the same source. Second, write the code, so the animation syncs up with the external .flv. 7. Instead of deleting the video, access its Layer properties, and set it to Guide, so you always have the video for reference. If the video object isn’t being used anywhere, then it doesn’t add to the file size. Drag onto the stage an instance of the Movie Clip containing your anima- tion. Name this instance my_animation. From the Library of Lee Bogdanoff ptg 358 HOUR 19: Using Video You can do a lot more synchronizing animation with a video. In the preced- ing task, every frame of the animation is synchronized with a frame in the video. Often, you only need to update an overlaying graphic once in a while. For example, you could display a caption containing the speaker’s name or bullet points that match what the speaker is discussing. In such sit- uations, you don’t need every frame synchronized. Such cases are more ap- propriate for cue points. You can actually inject cue points into an .flv at the time you encode it (see Figure 19.6), as you do in the next task. At the stage when you encode the .flv, two kinds of cue points are Event and Navigation. In both, you’re given the opportunity to insert additional textual data for each cue point. The Navigation cue points additionally in- sert a keyframe that makes that cue point seekable. That is, when users click the Next or Previous button in the FLVPlayback component, they jump to these Navigation cue points. Navigation cue points are appropriate for any point in the video to which you want the user to be able to jump di- rectly, such as the beginning of each chapter in a story. Event cue points are appropriate when you want something to appear or happen at a specific point in time while the video plays. If you’re doing a ton of captioning, there’s a third-party tool called Caption- ate (www.captionate.com), which we highly recommend. It’s especially de- signed to make it easy to inject cue points with captions. Perhaps most TRY IT YOURSELF ▼ Rotoscope (Draw Frames of a Video) 8. The FLVPlayback component for 3.0 has many more features than the 2.0 version including fullscreen support, among other things. Ensure your .fla is set for ActionScript 3.0 by selecting File, Publishing Set- ting. Click the Flash tab, and ensure ActionScript 3.0 is selected in the ActionScript version drop-down menu. 9. From the Components panel, drag an instance of the FLVPlayback component onstage, and name the instance my_video. Place your ani- mation on top of the video either by using the menu Modify, Arrange or by putting the video and the Movie Clip in separate layers. Finally, select the first keyframe in your file, open the Actions panel, and type this code: stage.addEventListener(Event.ENTER_FRAME, updateAnimation) function updateAnimation ( evt ){ var percentage = my_video.playheadTime / my_video.totalTime my_animation.gotoAndStop( Math.floor( percentage * my_anima- tion.totalFrames ) ) } From the Library of Lee Bogdanoff ptg Using Video 359 important is that Captionate plays the audio to make it easy to decide where to inject cue points. It’s nearly impossible to use Flash for this pur- pose because the video plays no audio at the Inject Cue Point stage. Inject- ing cue points using Flash is still quite powerful, as you see next. FIGURE 19.6 You can inject cue points into the .flv when you encode the video. Inject and Use Cue Points TRY IT YOURSELF ▼ You can download the source video (shoe-flip.mov) for this exercise from the book’s website. 1. Open the Adobe Media Encoder. Click Add, and select the shoe- flip.mov you downloaded. 2. Select the movie you just added from the list under Source, and click on the Settings button on the right. You might want to remove the other things from the list by highlighting them, and clicking Remove. 3. In the Settings dialog, notice the Cue Point Name table. Scrub using the large pointer above the video’s Timeline to 6.29 seconds or near 6.29. Press the + (plus) button, and replace the name Cue Point with the word miss. Scrub to 14.28 or so, and press the + button, and name this cue point catch1. Scrub to 17.29, add a cue point, and name it catch2. Finally, scrub to 21.25, and add a cue point named catch3. The complete set of cue points is shown in Figure 19.7. You can click OK when you’re finished injecting the cue points. From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Inject and Use Cue Points 4. Finally, click the Start Queue button, and sit back while Flash encodes the .flv along with your cue points. 5. Upon completing the encoding, you need to reference your new .flv file in an FLVPlayback component onstage. Import your video by choos- ing File, Video, Import. Choose the Load external video with play- back component option. Click Continue, choose a skin, and finish the process. When you’re done, select it, and name the instance my_video. 6. Now you can produce some graphics to appear when the sync points occur. Suppose you want a graphic to appear then fade away that ei- ther reads “oops” or “catch number 1” (or 2 or 3). To do this, start by making four Movie Clip symbols, each with a static graphic image or text to represent “oops,” “catch #1,” “catch #2,” and “catch #3.” 7. After you have created your four symbols, make a single symbol to hold them all. Select Insert, New Symbol. Name it Content, and make sure it’s using the Movie Clip behavior. When you click OK in the New Symbol dialog, you are taken inside the Content symbol. Select Frame 1, open the Actions panel, and type the following code: stop() We put our actual content in later frames, but this code makes Flash stop initially on the first, blank frame. 8. While still inside the Content symbol, click Frame 2, and select Insert, Timeline, Keyframe (or press F6). From the Library, drag an instance of the symbol containing your “oops” graphic. While you’re still in Frame 2, click the keyframe, and use the Properties panel to label this keyframe miss. The user sees this frame when the cue point for miss1 occurs. 9. Next, click in Frame 10, and select Insert, Timeline, Blank Keyframe (or press F7). Drag an instance of the “catch #1” symbol. Click the keyframe, and use the Properties panel to label this frame catch1. Repeat this step for the next two “catch” symbols (go out 10 frames, insert a blank keyframe, drag the symbol onto the Stage, and label the keyframe). 360 HOUR 19: Using Video FIGURE 19.7 Use these cue point names and times. Don’t forget catch3 at 21.25 (not shown). From the Library of Lee Bogdanoff [...]... window As you see in the “Targeting Windows” section later this hour, it’s possible to change the target window to Blank to see the linked page appear in a new window instead 377 TRY IT YOURSELF ▼ Create a Text Hyperlink FIGURE 20.4 You can make a selected block of text a hyperlink by specifying a URL link in the Properties panel Now, you learn the third way you can create hyperlinks: using dynamic text... Bogdanoff Basic Publishing 371 third aspect of publishing involves using, modifying, or creating templates and profiles, which gives you extensive control over the HTML created when publishing Templates and profiles are also covered in Hour 24 In the following task, you try out the File menu commands Publish and Publish Preview In this task, you quickly and easily publish a movie for viewing in a browser Follow... raw videos into flvs in batches Either way, you don’t have to tie up Flash compressing your videos To use the plugin you need to launch one of the supported video editors on the same machine where you have Flash installed The supported software includes Adobe After Effects, Apple FinalCut Pro, and Avid Xpress DV Once you’re finished editing the video, select something like File, Export, Flash Video... after dragging it to the Stage because the first frame is empty The instance onstage looks like only a white circle 361 TRY IT YOURSELF ▼ Inject and Use Cue Points 11 Finally, click the first keyframe in your main Timeline, open the Actions panel, and type the following code: function cuePointReceived ( evt ) { content_mc.gotoAndStop( evt.info.name ) } my_video.addEventListener( “cuePoint”, cuePointReceived... HOUR 24 Publishing a Creation From the Library of Lee Bogdanoff This page intentionally left blank From the Library of Lee Bogdanoff HOUR 20 Linking a Movie to the Web Now that you’ve explored all the basics of creating images, animations, buttons, and interactivity, you can move on to putting it all together for the web In Hour 1, “Basics,” you learned about getting Flash movies into web pages and linking... as a bit of a repeat from Hour 13, “Including Sound in Animations,” stereo sound is twice as big as mono Be sure you need stereo before you include it in your video By the way, when you embed video inside your Flash movie, you set the compression level via the Publish Settings for Stream sound Using Outside Video Editors In addition to using Flash to compress videos into the flv format, you can use outside... flvs directly (via a plugin that gets installed when you install Flash) You can also use the stand-alone Adobe Flash Video Encoder as an alternative to using Flash to create the flv The idea is video professionals can best make final edits and other sweetening in their favorite video editor, and then export directly to flv In addition, you can use the stand-alone version of the Flash 8 Video Encoder to... Quotes In ActionScript, strings always begin and end with quote marks Notice the single quote marks for the nested string around the web address If you need to include regular quote marks within a string, you have to “escape” the nested quote In other words, my_txt.text=”I said “No”” doesn’t work because Flash thinks the quotation mark right before No is the ending quotation mark for the string started... WHAT YOU’LL LEARN IN THIS HOUR: How to publish a Flash movie with the required HTML document How to incorporate hyperlinks inside a movie or send an email message How Flash and HTML can be combined How to upload files to a web server Basic Publishing Flash s Publish feature makes the process of preparing a movie for the web a snap Publishing in Flash is both simple and quick Basically, you select... ways (in addition to using navigateToURL) you can create hyperlinks inside Flash Any static text can have a URL associated with it automatically You learn about this method in the following task ▼ TRY IT YOURSELF Create a Text Hyperlink In this task, you use an automatic feature to associate a hyperlink with a block of text Follow these steps: 1 Create a block of text using any font you like, making . at the Inject Cue Point stage. Inject- ing cue points using Flash is still quite powerful, as you see next. FIGURE 19.6 You can inject cue points into the .flv when you encode the video. Inject. Bogdanoff ptg HOUR 20 Linking a Movie to the Web HOUR 21 Designing a Website to be Modular HOUR 22 Minimizing File Size HOUR 23 Optimizing Performance HOUR 24 Publishing a Creation PART IV Putting It All Together. Clip instance in the main Time- line where it only uses one frame. The problem with that approach is when Flash reaches the frame containing the Movie Clip, it must download all the frames contained