monkeyflash.com
Full-Screen Video in Flash CS3
July 10th, 2007 | Posted in Flash & ActionScript, Tutorials
One of the best new features in Flash Player 9 is its ability to play video full-screen, using the same outside-the-browser technique you’ve seen on YouTube and other video sites. One click opens the video to the full width of your monitor with a black background, and even includes a message letting the user know that they can return to their desktop by pressing the Esc key. Here’s the best part: using Flash CS3, you can add full-screen capability to your Flash video without writing a single line of ActionScript, and with only a tiny change to your HTML. Let’s take a look at how easy it can be.
Encode your video to FLV
Even though Flash CS3 can encode your videos when you import them, I prefer to use the Flash Video Encoder for converting my video files to FLV. Using the Video Encoder allows you to encode several files at once using a queue, letting you continue to work in Flash while the conversion is completed. The original video file should be the highest quality possible, preferably uncompressed, and can be saved as .mov, .avi, .mpeg, or .wmv. I’ve already included an FLV for you in the example files, but here’s how it was created.
Begin by pressing the Add… button in the Flash Video Encoder. Browse to the file that you wish to convert, and press Open. Although the default settings will usually produce acceptable results, it’s a good idea to adjust the quality settings, especially since this video will be shown full screen.
Click Settings…. Here you can adjust the encoding rates for video and audio, as well as crop and resize the video if necessary. Under the Video tab, medium or high quality will give you the best results full-screen. I usually reduce the frame rate to 15 FPS as well to keep the file size under control, but you can choose Same as source to leave the frame rate unchanged.
Adjusting the compression settings for the FLV file.
Under the Crop and Resize tab, it’s a good idea to resize your video to more reasonable dimensions if your original is very large. Typically, web video is encoded at 320x240 pixels, but if you are going to display video full-screen, you might consider 480x360 or even 640x480 pixels to provide the best quality. Keep in mind that larger dimensions equal much larger file sizes, and it might be a good idea to experiment to find the settings that work best for your project. For this example, I’m using 320x240 pixels for my video.
Press OK once you’ve made your changes. You can add more files to your queue in the same manner, duplicate the current job and change the settings, or press Start Queue to begin the conversion. This will create FLV files with the same names as your original media in the same folders, unless you specified otherwise.
Importing video into Flash
Once you have an FLV file, it’s time to bring it into Flash CS3. Create a new Flash File (ActionScript 3.0). In the Properties inspector, click the Size button and adjust the document to be the same width as your video file, and the same height plus 40 pixels to leave room for the player controls. In the example here, that will be 320x280 pixels. Change the background color of the document to black. Save the Flash file in the same folder as your FLV.
Adjusting the size of the Flash document in the Properties Inspector.
Import the FLV
Choose File > Import > Import Video. Click Browse, find the FLV file you created earlier, and click OK. (If you didn’t create the FLV file beforehand, you could point to your original file as well. Flash will create the FLV at the end of this wizard, but you’ll have to wait on the process to complete before continuing.) Click Next.
On the Deployment screen, you can choose how the FLV file will be streamed to your viewers. Unless you subscribe to a Flash Streaming Service or own a Flash Media Server, you’ll likely select the first option, Progressive download from a web server. This will allow the viewer to begin playing the video as soon as it begins to load, instead of waiting for the full download to complete. Click Next.
Select Progressive stream from a web server.
On the Skinning screen, you can select a set of player buttons to use to control video playback. There are many different combinations, but to enable full-screen mode, select one with a full screen button. For this example, I’ve selected SkinUnderPlaySeekFullscreen.swf. You can also choose a color for the controls, and I’ve chosen a dark gray. Click Next.
Choosing a playback skin with a full screen button and a color.
You will see a summary of your selections, and you can go back and make any changes you want. Click Finish to complete the video import, and after a few moments, the video will appear on the stage. Click the video, and use the Properties inspector to adjust its x and y positions to 0.
Move the video to the top left corner of the stage.
Save the Flash file, and choose File > Publish Settings. Make sure that Flash (.swf) and HTML (.html) are checked, then click OK. Choose File > Publish Preview > Default (HTML) to create the SWF and HTML files and preview them in a browser. You’ll notice that the video will play, but the full screen button won’t work yet. We need to make one minor change in the HTML page to enable full screen mode.
Edit the HTML file
Open the HTML file that was created in your favorite HTML or text editor. There are three places that allowFullScreen will be set to false by default: once inside the script tags, and twice between the noscript tags, within the object and embed tags. Locate these three variables and change their values to true.
Change the allowFullScreen value in the HTML file to true.
Save the file and reload the HTML page in your browser. This time, when you click the full screen button, you’ll watch your video in complete full screen glory!
If you have JavaScript enabled, you will see the example here.
A few notes
Remember when you upload the files to the server that all of the necessary files will need to be uploaded together: the HTML file, the SWF, the skin SWF file, the FLV, and the AC_RunActiveContent.js file that is used to embed the movie.
Also, if you would like to embed the video on a pre-existing HTML page, simply copy the code from the HTML page that Flash created (everything between the body tags) and paste it into the appropriate place in your existing page. Make sure that the other files are moved into the same folder as that page on the server as well.