2008

Foundation Flash CS3 Video

Creating and Playing Flash VideoYou are not creating a video; you are encoding a

video. This means you will be simply converting a video from one format – MOV - to another – FLV - which is the Flash video format. This conversion process is referred to as encoding.

FLV files can be encoded using the Import Video Wizard built into Flash CS3 Professional. The wizard is really nothing more than a series of panels that carefully walk you through the process of creating the FLV.

FLV files can also be encoded using the standalone Flash CS3 Video Encoder. When you installed Flash CS3 Professional onto your computer you also installed a separate application called the Flash CS3 Video Encoder.

With two encoding choices, you might be wondering which way to go. Either one is acceptable, but if you are new to using the video features of Flash CS3 Professional, it is suggested you start with the wizard. Once you start moving into more complex video use and special effects, the standalone Video Encoder will become your tool of choice.

What we’ll cover...Video formats used by Flash CS3Importing a video into Flash using the Video Import

WizardEncoding a video using the Flash CS3 Video EncoderUsing the Flash CS3 FLV Playback component to play

video

Before you import...Flash can import video only if you have QuickTime 7, QuickTime 6.5, or (for Windows users) Direct X 9 or higher installed on your computer. If you don’t have them, things might not work as expected, so you might need to visit the Microsoft or Apple sites to download and install the software.

The other thing you need to do is to make sure the video you are using is as uncompressed as possible. That might sound odd, but it really has a lot to do with the quality of the final product. The encoders used by Flash actually compress the file. Video that is compressed has already lost some information, which is why video compressors are called lossy. If you compress an already compressed file, you will lose a lot of information, which will have a direct impact upon the quality of the finished product. What does the compression job is a codec, which is short for enCOder - DECoder or Compressor - DECompressor, depending upon who you are talking to.

Importing a video with the FlashImport Video WizardThe source video for this exercise is a music video

named “Tortoise.” It is a QuickTime video that is 3 minutes and 43 seconds long, and has a file size of 41.3 megabytes, which puts it in the realm of really big web files.

When importing video, it is important that you closely match the frame rate and physical dimensions of the source video. These two values are easily obtained by opening the video in QuickTime and selecting Window > Show Movie Info. The Movie Info window, will open, and all the information you need will be presented. Matching the values here will ensure smooth playback later on.

The sample video is opened in QuickTime, and the Movie Info window is displayed.

Import Video1. Open Flash CS3 Professional and create a new

Flash File (ActionScript 3.0) document. The first thing to check is the frame rate of the Flash movie. It should closely match that of the video. In this case, it is 15 frames per second, which just happens to closely match the default frame rate of 12 frames per second on the Flash timeline. If the video is shot using the PAL standard, you obviously won’t have Flash play at 29.97 frames per second. In this situation, setting the Flash frame rate to 24 or even 30 frames per second will work.

2. The next step in the process is to select File > Import > Import Video, which will open the Import Video Wizard.

Import Video WizardThe Import Video Wizard is a rather clever series of screens that walks you through the entire video encoding process, starting from locating the video to actually placing it on the stage and having it ready to play. You will be asked some rather interesting questions along the way, such as “Is the video to be played from your web server?” and “What style of video controls would you like to use?”

DeploymentNow that Flash knows where the video is located, you need to decide where it will be sent for playback. The next screen you see, the Deployment screen, determines how the FLV file will be created.Progressive download from a web server: This option assumes that the FLV file will be sitting in a directory on your web server and playing from that server.Stream from Flash Video Streaming Service: This option assumes that you have an account with one of these companies.Stream from Flash Media Server: This option assumes that the FLV file will be located in your FMS account.

Embed video in SWF and play in timeline: Essentially this option will move the FLV file into the Flash library and put the video on the main timeline or (if the video is in a movieclip) on the movieclip’s timeline. In many respects, this is not recommended. When a video is placed on a Flash timeline, the timeline will expand to the full content of the video. In this case, the video will require thousands of frames to play. That might not seem like much, but when a SWF file loads in a web page, it won’t start playing until a large portion, if not all, of the video has loaded. The other nasty aspect of this option is a corresponding increase in the size of the SWF file to accommodate the video. Still, if the video is short - five to ten seconds - or if you want to play with it in some manner, this option works.

Linked QuickTime video for publishing to QuickTime: In the early pre-video days of Flash (Flash Player 5 and lower), you could actually convert the Flash movie to a QuickTime video with a Flash track. This feature is more of a “legacy” feature than anything else because Flash Professional CS3 has greatly improved the ability to export your Flash movie as a QuickTime video. This explains why it is available only in Flash 5 format or lower.

EncodingThe next screen, is the Encoding panel, in

which you have to decide which codec will be used to create the FLV file, the streaming rate, the frame rate, and a number of other choices that will have an impact on playback. The decisions you make here will have a direct impact upon your viewer’s experience, so let’s spend some time looking at the panel.

EncodingThe first thing you see is the default encoding profile.

If you click the drop-down menu, you will see ten presets, each targeted at the Flash 7 or Flash 8 Players or at a DV capture. If you select a preset, the settings are outlined in the Information area directly below your choice. Essentially the choice of Flash Player comes down to a choice of codec. Flash Player 7 uses only the Sorenson codec, and the new On2 VP6 codec can be used only in Flash Player 8 or higher.

The default you are looking at essentially says that the video will be playable only in Flash Player 8 or higher because it is encoded using the On2 VP6 codec. The rest of the information tells you that the video will stream at a rate of 400 kilobytes per second (kbps), and the sound in the video will be converted to an MP3 stereo format and streamed out at 96kbps.

At the top of the screen you see the first frame of the video and three sliders under it. The top slider lets you move forward and backward in the video. The two sliders under it set the In and Out points.

The top slider is commonly called a Jog Control, and if you move it to the right you will see that you can advance through the video. The other important thing that happens is the time under the image changes to show you exactly where you are in the video. This time measurement is quite precise: hours: minutes: seconds: milliseconds. This measurement will come in very handy later when you create a movie that triggers events based on the current time of the video and when you create captioned video.

The In and Out points are also quite useful. They establish the start and end of the video, and can be used to remove unwanted footage at the start or end of the video—or even to extract a short piece in the middle of the video. Using the In and Out sliders to remove footage also has the pleasant side effect of reducing the final size of the FLV file.

The bottom half of the screen contains a number of tabs that allow you to precisely control many of the streaming values and other properties used when a video is encoded.

Click the Next button to advance to the Skinning panel. When the panel opens, select the SkinUnderAllNoFullScreen.swf option from the drop-down menu.

The Skinning panel has a rather confusing name because it allows you to choose the playback controls used to play the video. The look of the controls, such as the buttons used and the colour of the controller, is called a skin. In this panel you actually determine whether playback controls will be added to the video.

Flash CS3 Professional offers you 35 different controller styles or skins that come in a variety of button combinations. In addition, you can even create a custom skin—put your client’s logo in the controller or whatever—or click the Colour chip and add the client’s corporate colour to the controller.

You will be prompted to save your Flash file. Navigate to the folder where this file is to be saved, name the file, and select OK. The window will close and, you will see the progress of the video-encoding process as well as a review of the options chosen in the Encoding panel.

The encoding process actually does two things: it creates the FLV file used in Flash and places it in the same folder as the Flash file you just saved. It also places a copy of the SkinUnderAllNoFullScreen.swf skin (or whatever skin you have chosen) in that folder.

When the encoding process finishes, you are returned to the Flash stage, and the video is placed on the stage in the FLVPlayback component. Press Ctrl+Enter (PC) or Cmd+Return (Mac) to preview the video.

Playing back the video that hasbeen imported into Flash.

Using the Flash CS3 Video EncoderThe Video Encoder and the Import Video

Wizard are somewhat similar, but are also completely different. The purpose of the Encoder is to create the FLV file and nothing more. Skins and so on are added in Flash.

The Encoder is available in both Macintosh and PC versions of the application.

Navigate to the Flash Video Encoder.

Flash VideoEncoder icon

The first screen that opens, is where you add the video to be encoded. Click the Add button and navigate to the folder containing the video you’ll be using. Navigate to the tortoise.mov file in your Exercise folder and click Open. When your video appears in the dialog box, click the Settings button to open the Encoding Settings panel.

The first screen of the Flash Video Encoder is used to locate the video to be encoded.

You don’t have to use the Add button to navigate to videos in the Encoder. When theEncoder opens, you can open the folder containing the video or videos and simplydrag them into the Source File area. Notice the use of the word videos. This handylittle application can be used to batch process the encoding of any number of videos.

The first reaction you might have to the Encoding Settings panel is this: “Hey, haven’t I seen this before?” You have. It is the same panel used by the Flash Video Wizard you used to encode that earlier FLV file. We will use settings that are quite different from the presets. Name the video to be created Tortoise. In fact, the first thing you should always do is name the file. This is a great way, for example, of creating a video targeted at a variety of bandwidth situations.You could have a copy of this video aimed at users who have dial-up and limited bandwidth named TortoiseLow and another aimed at the high-speed user named TortoiseHi.