Using hardware scaling with full-screen video

Another very exciting new feature in Flash Player 9 Update 3 is hardware scaling support for Flash Player—which lends itself perfectly to enhancing the video playback experience of HD video in full screen—especially when you consider the size of HD 1080p video (1920 x 1080). The new hardware acceleration was not built solely for the new H.264 video capabilities. It also helps with larger On2 VP6 video files and the display of SWF content in general.

Right-click (Windows) or Control-click (Mac) inside the Flash Player content in your browser window to display the Flash Player context menu and choose the Settings option to access the Adobe Flash Player Settings panel. The first tab shown is the Display tab (see Figure 9).

 

Figure 9. Display tab of the Flash Player Settings panel for toggling hardware acceleration on and off

The only item on the Display tab is a checkbox asking whether or not you'd like to enable hardware acceleration. If the box isn't already checked, check it to enable hardware acceleration—which will be in use if the content triggers it using the new ActionScript API. Unchecking or disabling this option forces software acceleration for the case when the scaling API is used. If hardware acceleration is enabled and the API is used, then Flash Player uses the hardware. The key area where you'll see hardware acceleration in effect is in full-screen mode, whether you're scaling a portion of the movie to full screen or the entire movie.

Now let's put the new hardware acceleration to use by scaling just a portion of your SWF to full screen. For overall advice on the particulars of making your movie go full screen, see Tracy Stampfli's excellent article, Exploring full-screen mode in Flash Player 9. If you would like to see an example of the visual effectiveness of full-screen video, check out this Adobe Labs demo.

Here are the steps to scale a portion of the movie to full-screen video:

1. Open the same file that you worked with in the video metadata example (H264_Video_AS3.fla) or open the H264_Video_AS3_FullScreen.fla file in the sample files folder.
2. Select Frame 1 on the layer ~AS:Main and open the Actions panel (on Windows: F9, on Mac: Option+F9).
3. Import the Rectangle and Stage classes at the beginning of your ActionScript:

   import flash.geom.*;
   import flash.display.Stage;

4. Any attempts to make the Stage go full screen have to be in response to a user interaction, such as an onRelease or onKeyDown event. Right now, however, you can write the function to make the movie go full screen. Your goFullScreen() function will take an event object as its sole parameter:

   function goFullScreen(p_evt:Object):void
   {
   }

5. Inside the function, create a Rectangle that has the same dimensions as the video and place it at the same x and y coordinates:

   var scalingRect:Rectangle = new Rectangle(video.x, video.y, video.width, video.height);

6. Set the fullScreenSourceRect property of the Stage to the Rectangle you just made. Because that property is not yet officially in the class, you must use square bracket notation to do this:

   stage["fullScreenSourceRect"] = scalingRect;

7. After that line of code, create an if conditional statement that checks to see if the display state of the Stage is normal or not, by checking it against the Stage class's NORMAL property, like this:

   if(stage.displayState == StageDisplayState.NORMAL)		      
   {		      		      		      
   }

8. Inside the conditional statement, change the display state of the Stage to full screen using the FULL_SCREEN property:

   stage.displayState = StageDisplayState.FULL_SCREEN;

9. Extend the if conditional statement by adding an else statement that sets the display state of the Stage to normal again:

   else      
         {
         stage.displayState = StageDisplayState.NORMAL;      
         }

   The completed goFullScreen() function looks like this:

   function goFullScreen(p_evt:Object):void
         
         {
       var scalingRect:Rectangle = new Rectangle(video.x,
         video.y, video.width, video.height);      
         stage["fullScreenSourceRect"] = scalingRect;      
         if(stage.displayState == StageDisplayState.NORMAL)
         
         {
       stage.displayState = StageDisplayState.FULL_SCREEN;
        
         }
         else      
         {
       stage.displayState = StageDisplayState.NORMAL;      
         }
       }

10. Return to the Timeline and create a new layer above the output layer. Name the new layer control (see Figure 10).

    

    Figure 10. Naming the new layer control after creating a new layer above the output layer

11. While Frame 1 of the control layer is selected, draw a roughly 30 x 30 rectangle on the Stage. Select the rectangle and invoke the Convert to Symbol dialog box (press F8). Select the type of movie clip to have the rectangle act as a full-screen button. Name the new symbol Button click OK (see Figure 11).

    

    Figure 11. Converting the rectangle to a movie clip symbol named Button

12. Using the Property inspector, position the button with an x value of 40 and a y value of 320.
13. Give the button the instance name of fullScreen_mc.
14. Select Frame 1 of the layer ~AS:Main and open the Actions panel (on Windows: F9, on Mac: Option+F9).

15. The fullScreen_mc button will have to use the addEventListener method to call the goFullScreen() function. Add this line after the goFullScreen() function:

    fullScreen_mc.addEventListener("click", goFullScreen);

16. Select File > Publish Settings to access the Publish Settings dialog box. Select the HTML tab. In the Template drop-down menu, select Flash Only – Allow Full Screen (see Figure 12) and click OK.

    

    Figure 12. Selecting the option Flash Only – Allow Full Screen

17. Test the movie in the browser. Click the fullScreen_mc button. You should see your video go to full-screen display mode.

Where to go from here

To learn more about working with video in Flash Player 9 Update 3, go visit Tinic Uro's blog. To get more details about the high-definition standards and codecs, see the Wikipedia articles on H.264 and AAC.

The addition of H.264 and AAC support in Flash Player 9 Update 3 allows you to easily use high-definition, industry standard video and audio. With this update, Flash Player raises the bar further for video on the web and offers display possibilities across a wide range of devices. Pairing the new video capabilities of Flash Player and future updates to the Adobe Creative Suite workflow—in addition to new products like Adobe AIR and Adobe Media Player—it is safe to say that very exciting times are ahead.

Page 5 of 5

Previous Page