COMP : Practical 11 Video

Transcription

1 COMP : Practical 11 Video Flash is designed specifically to transmit animated and interactive documents compactly and quickly over the Internet. For this reason we tend to think of Flash animations as being built of simple geometric and sketched shapes. However, the limitations that the Internet had at the time Flash was first developed (access via slow modems, high cost of traffic) have considerably relaxed in recent years. With broadband access reasonably common it is now feasible to transmit real movie camera footage and high quality sound. Flash permits this kind of work, and it is quite common to see Flash web sites with embedded video segments, and to see live video used with and as part of Flash animations in conjunction with mask effects and dynamic text effects. In this practical we will look at adding sound and pre-recorded video to Flash movies. Of course, not everyone has broadband, and some broadband systems are broader than others, so we still need to be a bit careful about the size of movies we send about. We will experiment with ways of controlling Flash file sizes. Embedding video 1. Find and take copies of the two QuickTime MOV sample files from the Practical 11 folder, named videosamples_high.mov and videosamples_low.mov. These clips were shot with various cameras and microphones, as identified in the audio track. The two files contain identical video clips using different levels of compression, so that you can compare the quality. 2. Create a new document in Macromedia Flash MX. Change the document's frame rate to the video's frame rate (15 fps) in the property panel. (Or choose Modify > Document and change the Frame Rate field to 15.) 3. Now you are ready to import a video file into Flash. Choose menu: File > Import > Import to Library and select one of the two QuickTime files you just obtained. Flash will immediately ask you if you want to embed or link the QuickTime file. - Figure 11.1: Starting to import a video clip The distinction between linking and embedding is very important in Flash. An embedded video is stored as part of a Flash movie (in the same swf file). This can make the movie large and thus slow to download. However, it is convenient. Once download is complete, all the information is there and the video will play immediately at the correct speed. This is the method to use if you definitely want the video to play if it is an integral part of your movie. If, on the other hand, your movie offers the viewer the option of playing one of several videos, or not playing one at all, you usually want the video to be stored (and thus downloaded in a web setting) separately that is Linking. We will experiment with that option later. For the moment: 4. Choose the Embed Video in Macromedia Flash Document option and click next. Flash will then ask you if you would like to import the entire video or edit the video first. There is an option here to run a simple editor. Try it to see the editor, but in this case we want the whole video. Flash now displays to more sections in which you can play around with the settings of your video clip, Compression profile deals with how much the video is compressed, the higher the compression the smaller the file and the worse the quality. Flash offers some per established settings raging from 56kbps to 786kbps. You can either use one of these settings or create your own. We re going to create our own. 5. Select create new profile from the compression dropdown box. This opens a new dialog as shown in Figure 11.2, in which you can define a number of settings regarding the video s quality.

2 Figure 11.2: Setting compression options You can set the following attributes: Bandwidth: This slider and text field allows you to enter a value from 0 to 750. This scale relates to the bandwidth of the target audience, where 750 is the maximum bandwidth (very fast connection) and 0 is the lowest speed connecttion (very slow). For most video, you will find that you don t want to go any lower that 150kb bandwidth. Anything lower than this may be too compressed and appear blocky. Quality: This slider and text field allows you to enter a value from 0 to 100. This scale is similar to JPEG quality, where 100 is the maximum quality and 0 is the least quality. For most video, you will find that 60 is the minimum acceptable quality. Anything lower than this may be too compressed and appear blocky. Keyframe interval: This slider and text field controls how often the Spark codec creates keyframes in the video. A value of 0 inserts no keyframes. Lower values (except 0) insert more keyframes, while higher values insert fewer keyframes. For example, one sample file set to use 0 as a keyframe interval (with all other settings equal) compressed to 42K, while the same file set to use 1 as a keyframe interval compressed to 219K. The same file set to use 48 as a keyframe interval compressed to 45K. for a video with lots of movement or a lot of scene changes you ll want to use a higher keyframe setting to stop the video appearing blocky. High quality keyframes: When you select this option it will give you paramount keyframe quality, meaning all keyframes will not lose any quality. Quick compress: When you select this option it will compress the video quicker, however you will not achieve as good results. Synchronize video to Macromedia Flash document frame rate: When this check box is selected, Macromedia Flash MX adjusts the source video file's frame rate to match the frame rate of the current Macromedia Flash document. For example, if a source file has a frame rate of 15 fps and the Macromedia Flash document has a rate of 12 fps, this selected option will drop three frames from each second of the imported video. If you clear this option, then Macromedia Flash MX assigns each frame of video to one frame of the Macromedia Flash timeline. As such, the video may play slower than real time, because it is keeping the same number of frames but being played back at a slower frame rate. You can see this "delay" effect by watching the Length value change in the Output properties area as you clear the check box or select it. Number of video frames to encode per number of Macromedia Flash frames: This selection box controls the ratio of video frames to Flash frames. This option works hand-in-hand with the Synchronize option to reduce the number of frames that are actually imported into the Macromedia Flash document. By default, a 1:1 ratio is selected, which preserves the original frame rate of the

3 source video. You can use this control to reduce the frame rate of your source video by choosing an appropriate ratio. I recommend that your final video frame rate be at least 12 fps for reasonably smooth video playback. However, the effect of frame rate settings varies with video content, so it is not possible to give fixed rules. 6. Set your compression to the following: bandwidth to 128, keyframes 45, check high quality keyframes, uncheck quick compress, check synchronize and click on next. Now name your new custom setting and click next again. This will take you back to the previous dialog. 7. Now click on the advanced settings dropbox and select create new profile. This will take you to the advanced settings section. Here you can change the Hue, Saturation, Gamma, Brightness and Contrast values of your video. You are also able to adjust the dimensions of your video by either scaling it up or down, or by cropping it. Track option permits you to define where you want to import you video; into the main timeline or into a symbol and also allows you to define how you want to integrate the audio of the video. You can return to experiment with these later, but for the moment the idea was just to have seen where this setting can be done. 8. Click back to cancel and return to the previous dialog. 9. Click finish. Macromedia Flash MX will now compress the video with the Sorenson Spark Basic edition codec. As you'll see later in this tutorial, we're keeping the video as small as possible so that it can stream over a 128 Kbps (kilobits per second) broadband modem connection. 10. When the video file compression is finished, you should be able to see your video in the document library. Drag the video to your stage. Flash displays a message box, asking if frames should be added to the current timeline to show the entire video: Figure 11.3: Adding your video to the stage 11. Click Yes. Macromedia Flash MX adds enough frames to the current layer to display the video file. The video appears on the stage. You can "scrub" the video by dragging the playhead in the Timeline window. The image quality you see in the authoring environment is exactly what you will see in Macromedia Flash Player. Let's test the Macromedia Flash document to see how large the Flash movie (SWF file) is. Choose Control > Test Movie to play the video in the Test Movie window. Open the Bandwidth Profiler by choosing View > Bandwidth Profiler. The Macromedia Flash movie is just over 366K, which is ok for a video file that's almost 20 seconds long. 12. You can continue to optimize the file size of the Macromedia Flash movie by choosing a different audio compression for the embedded video. Go back to the Macromedia Flash MX authoring environment and choose File > Publish Settings. Click the Flash tab and click the Set button for the Audio Stream option. The audio track of an embedded video is treated as Stream audio. Therefore, any changes you make to this option in the Publish Settings will be applied to the audio track of the video. By default, Macromedia Flash MX uses MP3 compression at a 16 Kbps bit rate. Try using 8 Kbps with a Quality setting of Best. Retest your Macromedia Flash movie, and you'll notice that the file size drops below 90K. Because the audio for this video track is narration, rather than music, this extremely low bit rate for MP3 is fairly acceptable. 13. When you're finished experimenting with the audio track, save your Macromedia Flash document in your lesson 12 folder as prac11a.

4 Controlling video playback in ActionScript You can control embedded video in a Macromedia Flash movie just as you would any timeline playback. Let's add play and stop controls to the Macromedia Flash document (videosample_test.fla) you created in the last section: 13. Add a new layer and name it buttons. 14. Create a stop and play button or open the Buttons library (Window > Common Libraries > Buttons) and select the library's Circle Buttons folder, drag instances of the Play and Stop buttons to the Stage. Position your stop and play buttons under the video, as shown below: Figure 11.3: Video with control buttons 15. Select the Play button and open the Actions panel (F9). Add: on (release){ play(); } 16. Select the Stop button and add: on (release) { stop(); } 17. Test your movie. Click the Stop button to stop the video and click the Play button to resume play. 18. Try adding other controls, like rewind, step forward and step backward buttons. You'll find these suitable buttons in the same Common Libraries folder you used earlier. 19. Challenge: Change your movie so that it starts with the movie not playing, and only starts to play when you click the Play button. 20. Save your movie as prac11b.

5 COMP : Practical 11 ActionScript: Video Review Page. Question 1: What is the difference between embedded and linked video? Question 2: If a Flash movie file is 400 Kbytes (kilo-bytes), and is downloaded at 100 kbs (kilo-bits per second), roughly how long would you expect it to take to download? Question 3: Movies and other files often download more slowly than we would expect. Provide two possible reasons. Question 4: Show prac11a(playing a video), prac10b(video with controls), and your load-movie result to your demonstrator. VERIFICATION Show the demonstrator your finished versions of the exercises in this practical. You may also be asked to demonstrate how you performed a specific task from this practical. Name: ID: (demo sign & date)