Handling full-screen mode and layout controls

The ActionScript 3 FLVPlayback component can play your FLV video in full-screen mode. With the click of a button, the SWF file fills the screen and shows the video scaled in the center. You can control the video layout, background color, and skin delay using ActionScript.

To use the full-screen feature, you'll need to work with the FLA file's publish settings, the FLVPlayback custom UI components, and a little bit of ActionScript.

Follow these steps to set up a video user interface with a full-screen button:

1. Create a new ActionScript 3 FLA file and rename the default layer 1 to assets.
2. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
3. Name the instance display in the Property inspector.
4. Drag an instance of the FullScreenButton component from the Components panel to the Stage. Position the button as desired.
5. Name the button instance fullScrn_btn.
6. Create a new layer and name it actions.
7. Select frame 1 of the actions layer and open the Actions panel. Enter the following code in the text editor:
   

   import fl.video.*;
   				
   // 1. Video component instance name
   var flvControl:FLVPlayback = display;
   var flvSource:String = "Call_to_Action.flv";
   
   // 2. Set video parametes
   flvControl.fullScreenButton = fullScrn_btn;
   flvControl.source = flvSource;
   

8. Update the flvSource path to match the video you're using.
9. Export the SWF and test the movie. Notice that the button does not work at this point. This is because the full-screen feature requires that a parameter be set in the HTML code which allows full-screen support.

Note: Using the enterFullScreenDisplayState method has the same effect as using the FullScreenButton UI component.

Follow these steps to set the HTML parameters to allow for full-screen video:

1. Continuing in the file from the last step, select File > Publish Settings from the main menu.

2. Click the HTML tab in the Publish Settings dialog box and choose the Flash Only – Allow Full Screen option from the Templates pop-up menu (see Figure 1).

   

   Figure 1. Choosing the Flash Only – Allow Full Screen option for full-screen video

3. Click the Publish button to publish the HTML and SWF file and then click OK to commit the settings.
4. Open the resulting HTML file in a browser to view the feature. Click the full-screen button to see the video fill the screen.
5. Click the Escape button on your keyboard to exit full-screen mode.

You can change the align and scaleMode properties of the FLVPlayback instance to change how the video layout looks during scaling and full-screen layout.

To apply the recommended defaults for full-screen viewing, follow these steps:

1. Return to the code in the FLA file that you built in the last set of steps.

2. Add the following code below the fullScreenButton assignment line:

   flvControl.align = VideoAlign.CENTER;
   flvControl.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;

3. Export the SWF and look at the results while viewing the movie on the HTML page. Experiment with changing these settings to see varying results in the layout. Usually the width and height proportions of the video determine how drastic the changes in layout become.

If you are interested in pursuing further layout controls for your video, take a look at the registration height, width, x, and y properties in the FLVPlayback section of the Help pages. You can use these properties along with the align and scaleMode properties to fine-tune how your videos look while scaling, switching from video to video, and so on.

To see a working example, see flvplayback_programming5.fla in the sample ZIP file linked to at the beginning of this article.

Note: Full-screen mode requires the use of Flash Player 9,0,28,0 or later, the ActionScript 3 version of the FLVPlayback component, and an HTML file set up correctly for full-screen viewing. For more information, you can read Exploring full-screen mode in Flash Player 9.

Page 6 of 7

Previous Page

Next Page