Friday, May 11, 2012

Add full screen button in flash, AS3



I have design a bouncing ball  in
 http://jiansenlu.blogspot.ca/2012/05/design-bouncing-ball-flash.html
Now I want to add full screen button to make it full screen.
I follow the instruction in:
  http://circlecube.com/2009/03/how-to-use-fullscreen-in-as3-stage-display-state-tutorial/
There is one extra  thing which needs to be token care. When you embed your swf, you needto add
allowfullscreen parameter
<object>
    ...
    <param name="allowFullScreen" value="true" />
    <embed ... allowfullscreen="true" />
</object>
In my case:
<object>
<embed allowfullscreen="true" allownetworking="internal" allowscriptaccess="never" height="400" src="http://www3.telus.net/jianlu58/full_screen.swf" width="550"></embed>
</object>
Result: Click "Go FullScreen" button to see full screen effect.

Extra ActionScript code:
stage.scaleMode    = StageScaleMode.SHOW_ALL;
stage.align    = StageAlign.TOP;

var stageDisplayAdjustCounter:uint = 0;

fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange);

fsb.buttonMode = true;
ssb.buttonMode = true;

//fullscreen buttons need this to adjust the stage display state.
//pressing escape to exit fullscreen bypasses this function
function fullscreenToggle(e:MouseEvent = null):void {
    status.appendText(stageDisplayAdjustCounter+". fullscreenToggle from "+stage.displayState+"\n");
    //normal mode, enter fullscreen mode
    if (stage.displayState == StageDisplayState.NORMAL){
        //set stage display state
        stage.displayState = StageDisplayState.FULL_SCREEN;
    }
    //fullscreen mode, enter normal mode
    else if (stage.displayState == StageDisplayState.FULL_SCREEN){
        //set stage display state
        stage.displayState = StageDisplayState.NORMAL;
    }
    status.appendText((stageDisplayAdjustCounter-1)+". fullscreenToggle to "+stage.displayState+"\n");
    status.scrollV = status.maxScrollV;   
}

//this function is called every and anytime the stage display state is adjusted
//either by pressing our buttons or
function onFullscreenChange(e:FullScreenEvent = null):void {
    status.appendText(stageDisplayAdjustCounter+". onFullscreenChange\n");
    status.scrollV = status.maxScrollV;
    if (stage.displayState == StageDisplayState.FULL_SCREEN) {
        fsb.visible = false;
        ssb.visible = true;
    }
    else {
        fsb.visible = true;
        ssb.visible = false;
    }
    stageDisplayAdjustCounter++;
}

onFullscreenChange();

1 comment:

  1. Is there anyway to add fullscreen button in blogger post

    ReplyDelete