Easy Fullscreen on a specific DisplayObject, deal with overlay and use hardware acceleration

There is several ways to show a specific zone/object in a Flash application in full-screen mode. The problems are to use hardware acceleration (interesting for video), to deal with possible overlay (display object above the target we want to show in full-screen mode) or to avoid with UI pixelization. And we have to consider various player versions and hardwares…


With Flash Player 9, hardware acceleration is only possible using
fullScreenSourceRect.
With a simple implementation we have 2 problems :

  • Our target is scaled, so the bigger the the screen is (or the smaller our target is) the more our UI is pixelized.
  • The DisplayObjects above our target will be included in our full-screen.

With Flash Player 10,  hardware acceleration is possible using direct or gpu mode, but it’s not available for AIR and depends on hardware…
Working with full-screen mode

The overlay can be managed during the application conception, but it can quickly become complicated and even impossible with a component that can be placed anywhere in an application

So I wrote a small class to simplify it (flash/flex).

Example :

Sources

How does it works :

Simple :

var fullscreen:FullScreen = new FullScreen(target);
fullscreen.mode = FullScreen.RESIZE_HARDWARE;
fullscreen.toggleFulScreen();

In resize mode our target must be resizable (Simple component invalidation) :

public class MyComp extends Sprite
{
	private var _width:Number;
	private var _height:Number;
 
	public function MyComp()
	{
 
	}
	public override function set width(value:Number):void {
		_width = value;
		_invalidate();
	}
	public override function get width():Number {
		return _width;
	}
 
	public override function set height(value:Number):void {
		_height = value;
		_invalidate();
	}
	public override function get height():Number {
		return _height;
	}
}

The 4 modes :

FullScreen.RESIZE
Resize the target to screen size and place it at the highest depth in the display list.

  • Benefits :
    Keep a clean UI.
    Resize your target as you want.
  • Drawback :
    Worst for ressources.
    Do not use with video without gpu or direct mode.

FullScreen.RESIZE_HARDWARE
Resize the target at screen size and place it at the highest depth in the display list.
Try hardware acceleration using fullScreenSourceRect on the full stage.

  • Benefits :
    Keep a clean UI.
    Resize your target as you want.
    Use fewer resources than FullScreen.RESIZE.
  • Drawback :
    Use more resources than FullScreen.SCALE.


FullScreen.SCALE

Scale with fullScreenSourceRect (try hardware acceleration).

  • Benefits :
    Best for ressources.
    No need to resize target.
  • Drawback :
    UI pixelisation
    Potential overlays problems.

FullScreen.SCALE_ABOVE
Scale with fullScreenSourceRect (try hardware acceleration).
Place target on highest depth.

  • Benefits :
    Best for ressources
    Avoid overlay
    No need to resize target
  • Drawback :
    UI pixelisation

Links :

Flash fullscreen best practices

Sources

I will soon release a 0.2 version. All ideas are welcome.
Feel free to point out to me the mistakes

Leave a Reply

Your email address will not be published. Required fields are marked *