Flash CS4 Professional in 24 Hours- P13

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

0
56
lượt xem
7
download

Flash CS4 Professional in 24 Hours- P13

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash CS4 Professional in 24 Hours- P13: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:
Lưu

Nội dung Text: Flash CS4 Professional in 24 Hours- P13

  1. Embedding Video Versus Playing External Video 351 TRY IT YOURSELF ▼ Embed a Video 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. 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
  2. 352 HOUR 19: Using Video 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. FIGURE 19.5 When creating an .flv, you can select from a variety of skins. 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
  3. 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. In this task, you add some standard video buttons that give the user a way TRY IT YOURSELF ▼ to control the video. Follow these steps: Make a Playback 1. Create a new Flash File (ActionScript 3.0), and import a video using Controller for an File, Import Video. Drag the video onto your main Timeline (if it’s not Embedded Video 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.
  4. 354 HOUR 19: Using Video ▼ TRY IT YOURSELF 5. Select the first keyframe in the buttons’ layer and open the Make a Playback Actions panel. Enter the following code into the Actions panel: Controller for an stop() Embedded Video 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. 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.
  5. 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. In this task, you create an .flv and advanced controller with no program- TRY IT YOURSELF ▼ ming. Follow these steps: Create an .flv and 1. Make a new folder in a known location, so all the files you need to Use the FLVPlayback track are easy to find. Component 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.
  6. 356 HOUR 19: Using Video ▼ TRY IT YOURSELF 5. You still need to tell the component which video to play. In the Compo- Create an .flv and nent Inspector, under the Parameters tab, click on Source. Use the FLVPlayback 6. The source parameter needs to be changed to the .flv’s filename. Component 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.” 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.
  7. Using Video 357 In this task, you combine frame-by-frame animation with live action video. TRY IT YOURSELF ▼ Follow these steps: Rotoscope (Draw 1. Embed a video like you did in the task “Embed a Video” earlier this Frames of a Video) 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.
  8. 358 HOUR 19: Using Video ▼ TRY IT YOURSELF 8. The FLVPlayback component for 3.0 has many more features than the Rotoscope (Draw 2.0 version including fullscreen support, among other things. Ensure Frames of a Video) 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 ) ) } 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
  9. Using Video 359 FIGURE 19.6 You can inject cue points into the .flv when you encode the video. 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. You can download the source video (shoe-flip.mov) for this exercise from TRY IT YOURSELF ▼ the book’s website. Inject and Use 1. Open the Adobe Media Encoder. Click Add, and select the shoe- Cue Points 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.
  10. 360 HOUR 19: Using Video ▼ TRY IT YOURSELF FIGURE 19.7 Use these cue point Inject and Use names and times. Don’t Cue Points forget catch3 at 21.25 (not shown). 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).
  11. Using Video 361 10. Return to the main Timeline by clicking Scene 1 in the edit bar, selecting TRY IT YOURSELF ▼ Edit, Edit Document (or press Ctrl+E). Open the Library, and drag an Inject and Use instance of the Content symbol onto the stage near the my_video in- Cue Points stance of the FLVPlayback component. Use the Properties panel to name your instance of the Content symbol content_mc. Naming that instance might be a challenge if you don’t do it immediately after drag- ging it to the Stage because the first frame is empty. The instance on- stage looks like only a white circle. 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 ) When the video plays and a cue point is encountered, it broadcasts an event. The preceding code listens for those events and, when events are received, tells the content_mc instance to jump to the frame label that matches the cue point’s name. In the downloadable files for this hour you find a more extensive example, which also keeps the content_mc updated as you scrub the FLVPlayback component. Optimizing Quality and File Size With all this talk of encoding options and coding tricks, it might be easy to lose sight of the core goal: namely, to produce the best looking video that downloads fast. It might seem quaint to study traditional techniques from decades ago, but that’s exactly what you should do if you want good-looking video. For example, use a tripod and shade the camera lens to reduce flare, which can desaturate the colors. Consider a few strategic cuts instead of special effects that can make transitions long and arduous. Photographers and film makers can share a wealth of experience that all translates to digital video. We also have a few technical tricks that can reduce the file size without hav- ing a huge impact on quality. The two biggest factors that have an immedi- ate impact on file size are the video’s frame rate and its pixel dimensions. For example, a 12 fps video is nearly exactly half the size as a 24 fps video. A lower frame rate is not only smaller, but it doesn’t look quite as good— especially if there’s a lot of motion. The best thing to do is to take a small representative sample and test different framerates. Keep going lower and lower until the quality is unacceptable, then back off.
  12. 362 HOUR 19: Using Video Like any raster graphic, you can also render videos at different dimensions. Similar to how low frame rates make for a smaller video, smaller dimen- sions make the file smaller, too. A great tip that can have a surprising effect: Often, you can render a video at half its final size and then stretch it during playback. For example, you want a video to display at 240×320. You can render it at 120×160, but stretch the video holder (video object or compo- nent) to 240×320. Test it out! Make a video at 240×320 at a particular band- width, and make another at the same bandwidth but only 120×160. Naturally, the smaller one is sharper until you stretch it, but the paradox is that often the stretched one looks way better than the same file-sized un- stretched one. Lastly, 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 in- clude 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 video editors to create .flvs directly (via a plugin that gets in- stalled 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 com- press 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 (though the exact menus differ for each product). You see a dialog identical to the Encoding dialog you saw when you used Flash to do the compression. The stand-alone version should be installed in a folder adjacent to where Flash is installed (C:\Program Files\Adobe for example). Again, the available options are identical to those found when using Flash to perform the compression. However, the stand-alone version adds a batch feature that, at your convenience, compresses a long list of videos you’ve added to
  13. 3D Animation with Video 363 the queue. This means you can take several videos, add them to the queue—even add the same one but select different compression settings for comparison—and then let them compress overnight. Video compressors are always slow, and the On2 VP6 codec is extra slow, but worth the wait, when compressing. 3D Animation with Video We briefly touch on how to use your .flv files with 3D animation. You al- ready have the techniques you need to create an .flv, create a movie clip with the .flv inside it, and to create and motion tween a 3D object. We put those all together to show you how to animate your movie. In this task, you create a video embedded in a Movie Clip that animates in TRY IT YOURSELF ▼ a 3D motion tween. Animate a Video in 3D 1. We rush through this first bit because you already know how to do it. Open a new Flash file, and choose File, Import, Import Video. Choose the Embed FLV option, and select your .flv file. Click Continue. 2. In the Embedding screen, this time choose Movie Clip for Symbol type. Leave everything else checked. Click Continue, and then click Finish on the next screen. 3. You see your Movie Clip on the stage. If you get the frame length warn- ing, agree to extend the length of the clip as needed. 4. Go to Frame 40 or so, and insert a frame by pressing F5. While you’re on that frame, click on the 3D Rotation Tool. Move your movie clip in some fashion. Review Hour 11, “Simulating 3D Animation,” if you’ve forgotten how the 3D tool works. 5. Finally, insert a motion tween in your Timeline. Test your movie. That’s all there is to it. Between being able to embed a video and animate it in 3D, you should be able to create some fascinating effects.
  14. 364 HOUR 19: Using Video Summary Some messages are simply best suited for video. Sometimes only video re- veals the personality of a subject. When a demonstration is needed, there’s just nothing like a video. The majority of this hour dealt with the technical limits of video. Don’t let that stop you. The cost, extra work on your part and extra download time for the user, can definitely be worth it when necessary. In this hour, you learned how to embed a video right into your file as well as how to create a Flash video file (.flv) and play it externally. Embedding a video might be easier and does provide the ability to step through each frame, but when the video is longer, the added file size to your main movie isn’t worth the cost of embedding it. Keeping an external .flv not only pro- vides the best synchronization and video quality, but the user only down- loads the videos they request. There are many more topics worth studying in Flash video, but this hour touched on the primary points. Q&A Q. I realize you recommend against using .avi files, but that’s all I have. Should I first convert an .avi file to a QuickTime file by using a tool such as the QuickTime player? A. First, if the only source file is an .avi file, you might as well use that. If it’s good quality, great; if it’s not, oh well—but converting it to a Quick- Time file can’t make it better. Q. I’ve embedded a video with a great music track. Why does the audio sound so terrible? A. You need to set how the audio is to export via the Stream compression in the Flash tab of the Publish Settings dialog box. See Hour 13 for more about sound compression. The key is that the Stream setting is what affects the audio in an embedded video. Q. I know that the compression stage can take a long time, but even after I’ve compressed the embedded video, my Flash movie takes forever to export. Why is that? A. Audio takes a long time to compress, and it’s likely that Flash is com- pressing the audio at the time you publish. You can temporarily change the Audio Stream setting to Raw so every time you do a Test Movie, it goes quicker. Remember to set it back to a reasonable compression level before you export the final time.
  15. Workshop 365 Q. Every time I attempt to compress a particular video, regardless of whether I select to make an external .flv or embed the video, Flash reports the audio can’t be imported. What’s the problem? A. Depending on the type of audio track in your video, Flash might not sup- port it. You need to get a new source file. Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers. Quiz 1. If On2’s VP6 codec yields better results than the Sorenson’s Spark codec (which it does), why would you ever select Spark? A. You don’t want to pay the additional license fees that accompany the VP6 codec. B. You plan on delivering to Flash Player 7, and the VP6 codec only works on Flash Player 8 or later. C. You don’t like that the VP6-encoded videos are at least twice the size of Spark-encoded videos. 2. How do you change the compression on a video that you’ve already embedded? A. You can’t. Instead, you could re-embed and recompress at that time. B. You access the video item in the Library, select its Properties op- tion, and then click Recompress. C. You need to modify the Video tab of the Publish Settings dialog box. 3. On2’s VP6 is which of the following? A. An old technique where rock bands would begin to play “on two” instead of “on four” as in “one, two, three, four.” B. The compression technology available in Flash and the decom- pression technology used in the Flash player. C. An option that costs extra to compress your videos with super- compression.
  16. 366 HOUR 19: Using Video Quiz Answers 1. B. Requiring users to upgrade to a newer player is definitely an issue. In addition, the VP6 codec requires more resources from your users’ computers. The videos are not necessarily any bigger, in fact, for the same size video the VP6 is always better quality. 2. A. Answer B makes sense; in fact, most imported media enables you to reimport via the Update button on the item’s Properties dialog box—but that is not supported for video and displays a warning. 3. B. A codec has both compression and decompression components. A version called Spark Pro costs extra, but users with the Flash player are still able to view Flash videos that use this version.
  17. PART IV Putting It All Together for the Web 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
  18. This page intentionally left blank
  19. HOUR 20 Linking a Movie to the Web Now that you’ve explored all the basics of creating images, animations, WHAT YOU’LL LEARN IN buttons, and interactivity, you can move on to putting it all together for the THIS HOUR: web. In Hour 1, “Basics,” you learned about getting Flash movies into web . How to publish a Flash pages and linking them to other pages. The knowledge you’ve acquired up movie with the required to this point makes the task at hand easy. It helps, however, if you’ve seen a HTML document few Flash websites so you have an idea where you’re headed. . How to incorporate hy- A Flash movie can be played on your computer, as is the case every time perlinks inside a movie you use Test Movie, but most of the time, you want to upload a Flash or send an email mes- movie to a web server so anyone who has a browser and the free Flash sage player can see it. Not only can your movie be seen by anyone in the world, but you can include links that give the user a way to jump to other sites. . How Flash and HTML can be combined You do all that this hour! A hyperlink is often a word or static picture in a web page that you can click . How to upload files to a to navigate to another web page. In Flash, you can put hyperlinks on but- web server tons or even in keyframes. This way, the viewer has a chance to jump to other parts of the web. 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 File, Publish. Publish not only exports a .swf, but it also creates the HTML file and any JavaScript files that are necessary. HTML stands for Hypertext Markup Language. An HTML file is a text file that uses special code to describe how a web page is to be displayed. A user’s browser program first downloads the HTML, and the code included in it describes how the web page should display. Every web page you visit is really an HTML file that describes what is to be included in the page lay- out. Therefore, to upload a web page, you don’t just upload a Flash .swf.
  20. 370 HOUR 20: Linking a Movie to the Web You upload an HTML file that calls the .swf and displays it in a web page; that is what the user visits. JavaScript is a programming language that an HTML file can trigger to per- form special behaviors on the browser such as resizing a window’s size or changing its position. Playing Flash inside Internet Explorer now requires some JavaScript code to overcome the default behavior where users have to “Click to activate and use this control” when they arrive at a site that has Flash. Luckily, this code is generated for you when you publish and ap- pears as a separate file named AC_RunActiveContent.js. When you type in a web address (www.informit.com, for example), your browser looks for a file named index.html. (It also looks for other similarly named files if it can’t find index.html.) The index.html file is read in by the browser, which makes sense of its contents. Besides containing the actual text that appears onscreen, the index.html file contains the details about which size and style text to use, such as italic or bold. Because the HTML file doesn’t actually have images in it, if the web page includes photographs, the HTML must specify the name and location of the image file, such as trees.jpg. The browser accumulates all the information specified in the HTML file and shows it to the user as an integrated layout of images and text. In the case of a page that includes a Flash movie, it works almost the same way. The HTML file specifies where the Flash movie (that is, the .swf file) is located and how to display it onscreen. This is almost the same as how it spec- ifies a static image, such as a .gif or a .jpg. In the case of the .jpg or .gif im- age, additional information can be included—parameters such as the height and width of the image. Similarly, the HTML referring to a .swf can include parameters, such as width and height, but also details, such as whether the movie loops, whether it should be paused at the start, and more. This HTML basically says to put an image here, a Flash movie there, and so on. The actual code is relatively easy to learn, but it’s unforgiving if you make mistakes. Fortunately, Flash’s Publish feature creates the HTML file for you, so you don’t really have to learn HTML. However, it is a good idea for you to learn some HTML, and one of the best ways to learn is to take a peek at the HTML Flash creates. Publishing in Flash has three aspects. For now, we concentrate on Publish and Publish Preview with which HTML and .swf files are exported; the only difference between the two is that with Preview, you see the results right away in your browser. An important component of publishing involves how you can modify every detail via the Publish Settings command under the File menu. As you see in Hour 24, “Publishing a Creation,” the Publish Settings command enables you to specify details as well as decide what media types to export because Flash can export more than just Flash and HTML files. The
Đồng bộ tài khoản