1. Code
  2. Media

Treat Your Viewers to a Full Screen HD Video Experience


In this beginner to intermediate tutorial I'm going to show you how to play HD video without the inevitable blurring that occurs when the video is enlarged.

The reason for this is that I'm getting a bit tired of visiting YouTube or other sites that present HD video with a full screen option only to discover, when I click the Full Screen button, that I suddenly need the prescription for my glasses changed.

The issue is not the video but how the Flash Player handles the process of going full screen. Let's find out how to do things properly..


When you play video in the Flash Player, the video, for all intents and purposes, is laid into the stage. Click the full screen button and the stage gets bigger. When the stage gets bigger it brings the video along with it. Enlarge a 720 by 480 video to 1280 by 720 and is it any wonder that the video gets fuzzy?

Adobe wrestled with this issue when they were introducing the ability to play full HD video through the Flash Player. Their solution, introduced in Flash Player , was extremely elegant. Instead of enlarging the stage, why not "hover" the vid in a rectangle "above" the stage and have the designer or developer decide whether to enlarge the stage or just a piece of it. This is accomplished through another piece of clever engineering on Adobe’s part: Hardware acceleration and scaling.

Hardware acceleration is applied through the Flash Player. If you right-click (PC) or ctrl-click (Mac) on a swf playing in a web page you'll open the Flash Player context menu. Select Settings and you'll be presented with the the settings window shown in Image 1. If you select Enable hardware acceleration you are able to view full screen HD video. If you leave it deselected, clicking a full screen button results in the Player using the Scaling API used when an FLV file is taken out to full screen. The neat thing about this is even though you have selected hardware acceleration, it is only used when needed. Thus, when a Full Screen button is clicked only the rectangle and it contents - a video in this instance - are scaled to full screen and hardware acceleration takes over to play the video.

Having given you the briefing on how we got you reading this tutorial, follow these steps to create a full screen HD video experience:

Step 1: Download the the Exercise files

Included with the download is an .mp4 file- Vultures.mp4. It is a clip from a TV series produced by my College, Humber institute of Technology and Advanced Learning. We'll be using this file for the project though mov, f4v and physically large FLV files can also be used.

You may have heard a lot of "buzz" around HD video and the .mp4 format over the past couple of years and wondered what the chatter is all about. Here’s a brief "elevator pitch":

The key to the .mp4 format is the AVC/H.264 video standard introduced to the Flash Player in August 2007. The .mp4 standard, to be precise, is known as MPEG-4 which is an international standard developed by the Motion Pictures Expert Group (MPEG) and the format also has ISO recognition.

What makes these files so attractive to Flash designers and developers is that MPEG-4 files aren’t device dependent. They can just as easily be played on an HD TV, iPod or Playstation as they can be played in a browser. Also, thanks to hardware acceleration and multithreading support built into the Flash Player, you can play video at any resolution and bit depth up to, and including the full HD 1080p resolution you watch on HD TV’s.

The one aspect of the MPEG-4 standard that I find rather intriguing is that, like the XFL format just coming into use throughout the CS4 suite, it is a "container" format. What's meant by this is .mp4 files can store several types of data on a number of tracks in the file. What it does is synchronize and interleave the data meaning an .mp4 file can also include metadata, artwork, subtitles and so on that can potentially be accessed by Flash. That’s the good news. The bad news is even though the MPEG-4 container can contain multiple audio and video tracks, the Flash Player currently only plays one of each and ignores the rest. The other bit of bad news is this format does not support transparency meaning, if you want to add an alpha channel, you are back to the FLV format.

Finally, H.264 .mp4 files require heavy duty processing power. Adobe has been quite clear in letting us know this content is best viewed on dual core PC’s and Macs. The shift to these processors has been underway for a couple of years but it will still be a couple of years before all computers will be able to manage the processor demands this format requires.

I have barely skimmed the surface of this format. If you want to take a "deep dive" into this format, check out H.264 For The Rest Of Us written by Kush Amerasinghe at Adobe. It's a tremendous primer for those of you new to this technology.

Step 2: Big It Up!

Open the BigItUp.fla file located in the download. If this is your first time working with an H264 file or going full screen, you may find the Flash stage dimensions - 1050 by 500 - to be rather massive. We need the stage space to accommodate the video which has a physical size of 854 x 480 and to leave room for the button in the upper left corner of the stage.

Step 3: Geometry

Add the following ActionScript to the actions layer:

We start by bringing in the geometry package and the Stage class in order to take the "hovering" video to full screen. The next two variables - mySound and myVideo - are going to be used to set the volume level of the audio and to create a Video Object.

With that housekeeping out of the way we set up the NetConnection and NetStream objects that will allow the video to play. The final line puts the movieclip used to get the video to full screen into buttonMode.

Step 4: Functions

Add the following ActionScript:

The first function lets us do some error checking. Not all mp4 files are created alike and if the video doesn’t play it would be nice to know what the problem might be. In this case we are going to listen for a couple of error messages from the NetStream class that are germane to mp4 files. The first one is a check to make sure the file is not corrupt or is a format that is not supported. Just because a file will play in the Quicktime player does not mean it will play in Flash.

The next one makes sure the audio and video tracks are supported. For example if the H.264 encoding is not used on the video track or AAC encoding is not applied to the audio track, you'll have issues.

The next function goes into the video file’s metadata to obtain the width and height values for the Video Object.

Step 5: goFullScreen

Enter the following ActionScript:

This is where the "magic" happens. This function creates the rectangle used to hold the video and its size is set to match those of the Video Object’s dimensions pulled out of the second function in the previous code block. The next line sets the fullScreenSourceRect property of the stage to the dimensions of the rectangle just created.

The conditional statement making up the remainder of the code block checks the current state of the stage size from normal to full screen or vice versa. This is how the video goes full screen. The Video Object is laid into this source rect, not the stage, which means it can expand or contract without the stage doing likewise and "fuzzing" the video.

The last line uses the button on the stage to go full screen.

Step 6: myVideo

Enter the following ActionScript:

The first code block tells Flash the variable "myVideo" is the name for a Video Object which is located 185 pixels fro the left edge of the enormous stage and is 5 pixels down from the top. The addChild() method puts the Video Object on the stage and the remaining two lines connect the video object to the NetStream and start the video playing.

The final code block looks into the video’s audio track which is being fed into the project through the NetStream and lowers the audio volume to 80%.

Step 7: Save

Save the file to the same folder as the video.

Normally, at this stage of the tutorial I would also tell you to test the swf. You can, but the button won’t work. The best you can expect is to see the video play in the swf. The Full Screen feature is driven by the HTML wrapper of your swf, not Flash. Let’s deal with that one.

Step 8: Publish Settings

Select File > Publish Settings. When the Publish Settings dialog box opens, select the SWF and HTML options.

Step 9: Player Version

Click the Flash tab. Select Flash Player 9 or Flash Player 10 in the Player pop down. Remember HD video can only be played in Flash Player 9 or later.

Step 10: HTML

Click the HTML tab. In the Template pop down menu select Flash Only-Allow Full Screen.

Click the Publish button to create the SWF and the HTML file.

Step 11: Test

Save the file, quit Flash and open the HTML page in a browser. Go ahead, click the "Big it up!" button.

What about the Component?

What about it? Real Flash designers and developers don’t use no "steenking" components.

In December of 2007, Adobe quietly released Update 3 for the Flash Player 9. I use the word "quietly" because mixed in with the usual bug fixes and tweaks, they slipped in an updated version of the FLVPlayback component that allowed it to play HD video. Here’s how:

Step 12: New Document

Open a new Flash ActionScript 3.0 document and save it to the same folder as the Vultures video.

Step 13: FLVPlayback Component

Select Window>Components and in the Video components, drag a copy of the FLVPlayback component to the stage.

Step 14: Component Inspector

Open the Component Inspector. You need to do two things here. Select the SkinUnderAllNoCaption.swf in the skin area, in the source area navigate to the Vultures.mp4 file and add it to the Content Path dialog box. Click the match source dimensions check box and click OK. Flash will go into the video and grab the metadata. When that finishes, the dialog box will close and the component will grow to the dimensions of the video. Close the Component Inspector.

Step 15: Modify > Document

Select Modify > Document and click the Contents button to resize the stage to the size of the component .... sort of. When the stage is set to the size of the component it only resizes to the size of the video. The skin will be left hanging off the bottom of the stage which means it isn’t going to be visible in a web page. Change the height value to 525 pixels to accomodate the skin. Click OK to accept the change.

Of course, now that you have changed the stage dimensions the component is hanging off the stage. Select the component and in the Properties Panel set the X and Y coordinates to 0.

Step 16: Publish Settings

Select File >Publish Settings and choose the SWF and HTML file types.

Step 17: Player Version

Click the Flash tab and select Flash Player 9.

Step 18: HTML

Click the HTML tab and select Flash Only- Allow Full Screen in the Templates pop down.

Step 19: Publish

Click the Publish button. When the SWF and the HTML file are published click OK. Save the file and quit Flash.

Step 20: Test

Open the HTML file in a browser. Click the Full Screen button to launch into Full Screen mode.


In this tutorial I've showed you two ways of smoothly going into full screen mode with Flash. The first method used ActionScript to make this possible and the key was creating a rectangle that "hovered" over the stage and was used to hold the video.

The second example showed you how to use the FLVPlayback component to go full screen.

As you've discovered, the key for both projects was not the ActionScript but the HTML wrapper that enabled the full screen playback.

These tutorials always work locallly but I'm sure you're wondering if they would actually work online. I've posted both to prove that "Yes indeed, it can be done."

The code approach in the first example can be found here. The video is kindly provided by Adobe and Red Bull and is a full 1080p production.

The Vultures appear in an example that uses the component here.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.