New media
Converting video to Flash
Plus: How to give readers playback options, and how to load SWF files into a master SWF
By Mindy McAdams
University of Florida
 |
The tutorial also explains how to create a separate Flash interface that allows your users to choose from multiple videos and play any one of them. You could have your video online in a single afternoon!
I'll also explain how to load external SWF files into a master SWF. That's rather advanced, but for some people, it's the primary function they want to learn.
These instructions are specific to the Windows operating system, but Mac users can certainly figure out where the slight differences occur.
Video file
Start with a finished, edited video file that has already been exported from a video editing program, such as Premiere, iMovie, Windows Movie Maker, or Final Cut Pro.
- Output the file at a width of 320 pixels.
- Use the 4:3 or 16:9 aspect ratio to get the proper proportions for the video you shot. How to choose this option varies in different editing programs.
- Choose a frame rate for export that is half the frame rate of your video — 15 for NTSC (the standard in the United States) and 12 for PAL (the standard in Europe, for example).
- The most common file types for export are AVI and MOV. Either one is OK.
FLV format
- The best format for the compressed video in Flash (best quality and smallest file size).
- Native format to Flash (FLV not used for any other software).
- Can be created from AVI, MOV, etc.
- To convert video to FLV, use Flash Professional edition (Flash 8 Video Encoder comes with the Flash 8 Professional package), or video compression software such as Sorenson Squeeze ($500).
Note: If you have Macromedia Flash Professional 8 and QuickTime 6.1.1 or later installed on the same computer as the video editing program, you may be able to use the Flash Video Exporter (QuickTime Export plug-in) to export FLV files directly. See the Help files in Flash 8 Video Exporter for details.
Use of Flash 8 Video Encoder (create an FLV)
This is a separate program that is not accessible from inside Flash. Find it (on your Desktop in this workshop; in Program Files on any other computer) and open it.
- 1. Click the Add button on the right side.
2. Find the video file you want to encode and select it (click Open).
3. Settings should be Flash 8 – Medium Quality (400kbps). You can change this if you click the Settings button.
4. You may add more than one video file to the list (queue).
5. Click Start Queue.
6. When the encoding is complete, you will see a green check mark to the right of the filename. Now in the same folder, you have a new file in the .flv format.
Create a new folder for your Flash project, and copy your new FLV file into that folder.
Simple video in Flash
1. Open Flash — File menu > New — then select “Flash Document.”
2. Save this file into the same new folder you created for the FLV file:
File menu > Save As
3. File menu > Import > Import to Stage
4. Find your FLV file and select it. The “Import Video” dialog opens.
5. Select Video. In the field labeled “File path” you should have only the video filename and not the complete path. For example: mymovie.flv (not C:\My Documents\ … etc.) Reason: When you upload all the files to the Web, there will be no “C:\” Click Next.
6. Deployment. Select “Progressive download from a Web server.” With this option, you do not need any special type of Web server software. Flash will manage the download for you. Click Next.
7. Skinning. You have 32 choices for a “skin” (or surface appearance) for your video controller. Try any selection from the menu to see how it looks. You can select another if you don’t like the way it looks. (Skins that include the word “Over” in the name will overlay your video; skins that are “External” will not. Skins that include “All” have a minimum width of 270 pixels. Skins that include “PlaySeekMute” have a minimum width of 155 pixels.) Click Next.
8. Click Finish to complete the dialog.
Position the video on the Stage
1. On the Stage in Flash, click the video once to select it.
2. In the Properties panel below the Stage, change X and Y position to 10 (pixels). This will position the video near the top left corner. (If you are precise about the X and Y values, you can easily make all future videos consistent in appearance.)
3. Now change the size of the Stage to match the width and height of your video more closely. First, click on the gray area outside the white Stage. This selects the Stage. In Properties, click the button labeled “Size.”
4. Then change the width and height of your Stage to extend a little wider than the video and a little taller than the video plus the controller.
Save and test your video
- 1. To save this Flash file: File menu > Save
2. To test it, press and hold the Ctrl key and press Enter (on a Mac: Press and hold the Cmd key and press Return). The test version pops up in a new window. When you close that test window, be careful not to close the Flash application!
When you test your movie (the Flash file), Flash generates a new file in the SWF format.
This is the file that will be uploaded to the Web server. (The working file is in the FLA format. Never upload the FLA to the Web server.)
• You can edit an FLA in Flash.
• You cannot edit a SWF.
• The SWF is the file we put on the Web.
• The SWF file size is much, much smaller than the FLA file size.
You can create all your video SWF files this way. Make sure you name each file with adifferent filename. Filenames should have no spaces, no punctuation, and no capital letters in them.
This SWF is ready, as is, to use in a Web page. You can skip ahead if you have only one video file.
Create a display interface for all your videos
You will now make a completely new Flash file to display any number of videos. That is, you can place the SWF from this exercise on a Web page and use it to “load” multiple video files.
1. Open Flash — File menu > New — then select “Flash Document.”
2. Change the Stage size to 700 pixels wide and 450 pixels high.
After you click the Size button in the Properties panel, a dialog box opens. In the dialog box, you can change width and height of the Flash movie.
3. Change the frame rate to HALF the frame rate of your original video. For NTSC digital video, this is 15 fps. For PAL digital video, it is 12 fps. (This should be the same rate as the exported video file.)
4. Change the background color of the Stage.
5. Click OK to close the Document Properties dialog box.
6. Use the Text tool to create a headline and other text for your interface. (For example, provide a short summary of the videos, or list the names of all the members of your team.) The Text tool can be found in the Tools panel.
7. After you type some text, select it (click and drag). Then you can change its properties in the Properties panel.
Make sure it says “Static Text” on the left side, as shown above. You can change the Font Family and Font Size and Color.
8. Save your file.
Add a container for your video SWFs
Flash allows you to create a symbol called a “movie clip.” The movie clip symbol is very powerful and can be used for many different purposes. One of those purposes is to load external SWFs.
To load an external SWF, you need to create an empty movie clip.
- 1. Create a new layer in the Timeline and name it “clip.” To create the layer, click the icon indicated with the cursor arrow. To name the layer, double-click the words “Layer 2” and type the new layer name.
2. Insert menu > New Symbol
Select “Movie Clip” and name it Empty Clip, as shown below. Then click OK.
3. Now the new symbol is in your Library, but not on the Stage. You must drag it from the Library to the Stage. But first, please make sure that Frame 1 in your “clip” layer is selected.
4. Open the Library panel (Window menu > Library). Find your Empty Clip and drag it to the Stage. Place it where you would like the upper left corner of the loaded SWF (the one containing your FLV video) to be.
5. You must give an instance name to this instance of Empty Clip on the Stage. (Reason: ActionScript needs a name for loading the external SWF. Look at the illustration below to see the space where you type the instance name for the movie clip named Empty Clip .)
Make sure you type the instance name without any spaces. In this example, the instance name is: loader_mc (it is important to use this exact name, because we will use it soon in some script, below).
6. Press the Tab key or Enter key after you type the instance name.
7. Save your file.
8. Make a new layer and name it “buttons.” (See step 1 above.)
9. You will use a different button for each video you want to play in this project.
Begin with one button. Flash provides some ready-made buttons for you. Open the Buttons panel: Window menu > Common Libraries > Buttons. This panel contains some ready-made buttons for you to use. You can find some good ones inside the “Classic Buttons” folder. (I like the Oval buttons.)
10. Drag a button from the Buttons panel to the Stage.
11. Open the Actions panel (Window menu > Actions, or press F9).
12. Click only once on your first button to select it. (If you accidentally click twice, press Ctrl-E to exit and return to normal editing mode.)
13. In the Actions panel, type these three lines of script exactly:
on (release) {
loader_mc.loadMovie("video1.swf");
}
If you named your first video file something other than “video1.swf,” then use that filename instead, of course! (This is the file you saved earlier.)
14. You should understand three things about this script:
- a. The first line and the last line are the same for any button in Flash.
b. The phrase “loader_mc” is the instance name you gave to your Empty Clip in Step 4 above, under "Add a container for your video SWFs." (The name there must match this name.)
c. The filename inside quotation marks must match the filename of the SWF you want to play. (So if you named your file “myvideo.swf,” then use that filename instead.)
Note: Make sure you use the name of the SWF file, not the FLV file, and not your original video file.
15. Save your Flash file.
16. Test your Flash movie (Ctrl-Enter). When you click your new button, the video should open. Remember that the upper left corner of your video will be at the location of your Empty Clip. If you want to reposition your video, you must reposition the Empty Clip.
If you see any errors, you may have made a typing mistake in Step 13. Check the quotation marks (") and the parentheses. Fix the script, save, and test again.
Check the layout of your first SWF file. You may find that in your original SWF (the one with your video in it), everything is too far from the upper left corner. Open the FLA to fix this. See Step 2 under "Position the video on the Stage," above, for the cause of this error.
Then save the file again, and press Ctrl-Enter to generate a new SWF.
Generate an instant Web page
In Flash, with the display interface FLA open:1. File menu > Publish Settings.
2. Make sure both “Flash” and “HTML” are checked in the Publish Settings dialog box.
3. Click the Publish button at the bottom of the dialog box.
Now you will find a new HTML file inside the folder with your other Flash files. The files for one project like this must stay together inside the same folder, or they will not work.
Double-click the new HTML file to open it in your Web browser.
Important: If you upload these files to the Web, make sure all of the SWFs, all of the FLVs, and the HTML file stay together in one folder. Do not upload the FLAs to the Web server. The name of the folder can be changed. The name of the HTML file can also be changed. The design of the HTML page can be changed using normal HTML markup and CSS.
Add additional videos to your interface
To add more videos to your second FLA, simply add more buttons. You can drag the same button out of the Library more than once (e.g., Oval buttons - blue). You will need to write script each time for a new button, and make sure you are using the filename of a different SWF video file on each button. Of course, you will need to build more SWFs too — see below.Create additional video SWFs
For each new video, follow the steps outlined through the "Save and test your video" heading above. You will:
1. Create an FLV using the Flash 8 Video Encoder (or some other software).
2. Start a new Flash Document (FLA).
3. Import the FLV to the new FLA.
4. Go through the steps in the Import Video dialog.
5. Position the video on the Stage, and re-size the Stage.
6. Save and test your new movie.
Make sure to name the new file with a different file name!
More information
• Flash Journalism• Adobe Flash Pro
• Design Center
• Sorenson Media
• On2
Update: Bryan Murley of Innovation in College Media tested my handout and created a nice, clean example of what you can do with it. You won't see a video until you click one of the four yellow buttons. Each button plays a different video. I get some starting and stopping on DSL at home with his video, but maybe the frame rate (or the data rate) was set too high.
Please comment on, correct or expand upon this article. Contact us.
Also by Mindy McAdams:
• Super-fast guide to audio editing
• Adding an audio player toa nonWordPress blog
| Attachment | Size |
|---|---|
| flash1.jpg | 35.01 KB |
| flash3.jpg | 23.04 KB |
| flash4.jpg | 19.65 KB |
| flash5.jpg | 22.7 KB |
| flash6.jpg | 34.43 KB |
| flash7.jpg | 23.91 KB |
| flash8.jpg | 40.6 KB |
| flash9.jpg | 23.75 KB |
| flash10.jpg | 26.14 KB |
| flash11.jpg | 23.7 KB |
| flash12.jpg | 30.25 KB |
