I’m currently building a video player and have built this simple player as a proof-of-concept to test the full-screen capability of the new Flex 4 sdk. I’m having trouble with my particular project as it doesn’t seem to want to trigger the FullScreenEvent.FULL_SCREEN event when the user uses the ESCAPE key to change the display state. This example was my way of testing for a bug. This example seems to work however.

What I have enjoyed about this exercise and the main reason for publishing it is the use of the new state model in Flex 4 to change the layout and properties of the components. First take a look at the example …

(Note: IFrames are not visible in RSS feeds)

Notice when you enter full-screen mode the layout changes from a vertical layout to a basic one with the controls floating on top of the video. Now take a look at the code …

That’s all of the code for this example. The two different layout objects are declared in the declarations tag.

… and within the main content Group tag there’s a property called layout which is set for each of the two possible states. Changing the state will change the layout. The states are set in the states tag and the names are the same as the StageDisplayState.FULL_SCREEN and StageDisplayState.NORMAL string properties. Unfortunately you can’t bind to the stage.displayState property or I probably would not have needed the script tag.

So this is a much easier way of adjusting the layout dynamically and the same principle is used to change the position and size of the VideoElement and controls. The transparent rectangle below the controls is rendered only when in full-screen mode because the includeIn property is set to the fullScreen state and because this state uses the BasicLayout the children need to be positioned absolutely so the x & y coordinates are required also.

You may notice that when you exit fullscreen mode you need to click into the SWF to give it focus before you can re-click the button. I’m not entirely sure if this is a bug in the FlashPlayer or the browser (I’m in FF3.5).

Anyway, hope this helps people understand some of the great new features in Flex 4. Don’t forget to grab the source from the example above.