Search code examples
actionscript-3apache-flexflex-mobile

FullScreen Mode in flex mobile project


i have a video stage need to add a full screen button , i added this code :

private function makeFullScreenVideo(e:Event):void
    {
        saveOldestPositionAndSizeOfVideo();
        if(!isFull)
        {
            stage.getChildAt(0).x = 0;
            stage.getChildAt(0).y = 0;
            stage.getChildAt(0).width = stage.fullScreenWidth;
            stage.getChildAt(0).height = stage.fullScreenHeight; 

        }
        else
        {
            if(stage.fullScreenHeight>stage.fullScreenWidth)
            {
                stage.getChildAt(0).x = oldXOfVerticalView;
                stage.getChildAt(0).y = oldYOfVerticalView;
                stage.getChildAt(0).width = oldWidthOfVerticalView;
                stage.getChildAt(0).height = oldHeightOfVerticalView;   
            }
            else
            {
                stage.getChildAt(0).x = oldXOfHorizentalView;
                stage.getChildAt(0).y = oldYOfHorizentalView;
                stage.getChildAt(0).width = oldWidthOfHorizentalView;
                stage.getChildAt(0).height = oldHeightOfHorizentalView;
            } 
        }

        isFull = !isFull;

    }
    private function saveOldestPositionAndSizeOfVideo():void
    {
        if(stage.fullScreenHeight>stage.fullScreenWidth)
        {
            oldWidthOfVerticalView = stage.fullScreenWidth;
            oldHeightOfVerticalView= stage.fullScreenHeight*0.468;
            oldXOfVerticalView= 0;
            oldYOfVerticalView= 0;
        }
        else
        {
            if(oldWidthOfHorizentalView == 0)
            {
                oldWidthOfHorizentalView = stage.getChildAt(0).width;
                oldHeightOfHorizentalView= stage.getChildAt(0).height;
                oldXOfHorizentalView= stage.getChildAt(0).x;
                oldYOfHorizentalView= stage.getChildAt(0).y;    
            }
        }
    }

this code work good when i run it . the problem is when the orientation is changed , if change the orientation of full screen mode it will not do for code i write it inside StageOrientationEvent :

private function changeOrientation(evt:StageOrientationEvent):void
    {
        if(isFull)
        {
            stage.getChildAt(0).x = 0;
            stage.getChildAt(0).y = 0;
            stage.getChildAt(0).width = stage.fullScreenWidth;
            stage.getChildAt(0).height = stage.fullScreenHeight;
        }
    }

Hint : if i run the project on Desktop not on Devise it will work excellent and there is no problem on orientation .


Solution

  • Here's some code I put together for my own project after I was having some difficulties with the built in StageOrientationEvents. Please note this is a WIP so if you have any suggestions please let me know. There's two classes I made one Singleton and one Event it dispatches, to use it I get the instance of the singleton and add listeners for the events:

    [AccelerometerManager.as]

    package com.shaunhusain.fingerPainting.managers
    {
        import com.shaunhusain.fingerPainting.events.AccBasedOrientationEvent;
    
        import flash.events.AccelerometerEvent;
        import flash.events.EventDispatcher;
        import flash.sensors.Accelerometer;
    
        /**
         * Centralizes the handling of accelerometer changes, limits events
         * dispatched to avoid extraneous jiggle/dithering.
         */
        public class AccelerometerManager extends EventDispatcher
        {
            //--------------------------------------------------------------------------------
            //              Constants
            //--------------------------------------------------------------------------------
            public static const LANDSCAPE_LEFT:String = "landscapeLeft";
            public static const LANDSCAPE_RIGHT:String = "landscapeRight";
            public static const PORTRAIT_DEFAULT:String = "portraitDefault";
            public static const PORTRAIT_FLIPPED:String = "portraitFlipped";
    
            public static const TURNED_RIGHT:String = "turnedRight";
            public static const TURNED_LEFT:String = "turnedLeft";
            public static const FLIPPED:String = "flipped";
    
            //--------------------------------------------------------------------------------
            //              Variables
            //--------------------------------------------------------------------------------
            private var acc:Accelerometer;
            private var registeredStageListener:Boolean;
            private var previousOrientation:String=PORTRAIT_DEFAULT;
            private var degreeAllowance:Number = 20;
            private var previousAngle:Number=270;
    
            //--------------------------------------------------------------------------------
            //              Constructor
            //--------------------------------------------------------------------------------
            /**
             * Used to coordinate all the updates to the buttons without having
             * multiple instances of accelerometer objects.  Creates the handle
             * to the Accelerometer.
             * 
             * @param se Blocks creation of new managers instead use static method getInstance
             */
            public function AccelerometerManager(se:SingletonEnforcer)
            {
                acc = new Accelerometer();
            }
    
            //--------------------------------------------------------------------------------
            //              Singleton
            //--------------------------------------------------------------------------------
            private static var instance:AccelerometerManager;
            public static function getIntance():AccelerometerManager
            {
                if( instance == null ) instance = new AccelerometerManager( new SingletonEnforcer() );
                return instance;
            }
    
            //--------------------------------------------------------------------------------
            //              Properties
            //--------------------------------------------------------------------------------
    
            private var _currentlyActive:Boolean;
            /**
             * Allows the manager to be turned on or off from the outside.
             */
            public function set currentlyActive(value:Boolean):void{
                if(_currentlyActive == value)
                    return;
                _currentlyActive = value;
                if(_currentlyActive)
                    acc.addEventListener(AccelerometerEvent.UPDATE, handleAccelerometerChange);
                else
                    acc.removeEventListener(AccelerometerEvent.UPDATE, handleAccelerometerChange);
            }
    
            private var _currentOrientation:String = AccelerometerManager.PORTRAIT_DEFAULT;
            public function get currentOrientation():String
            {
                return _currentOrientation;
            }
    
            public function set currentOrientation(value:String):void
            {
                _currentOrientation = value;
            }
    
    
            //--------------------------------------------------------------------------------
            //              Handlers
            //--------------------------------------------------------------------------------  
            private function handleAccelerometerChange(event:AccelerometerEvent):void
            {
                if(Math.abs(event.accelerationZ)<.75)
                {
                    var angle:Number = Math.atan2(event.accelerationY, event.accelerationX);
                    var degrees:Number = angle*180/Math.PI+180;
    
                    if(Math.abs(degrees - previousAngle)<degreeAllowance)
                        return;
    
                    previousAngle = degrees;
    
                    var accEventExtra:AccBasedOrientationEvent = new AccBasedOrientationEvent(event.type,event.bubbles,event.cancelable);
                    if(degrees>225&&degrees<315)
                        currentOrientation = PORTRAIT_DEFAULT;
                    else if(degrees>45&&degrees<135)
                        currentOrientation = PORTRAIT_FLIPPED;
                    else if(degrees>=135&&degrees<=225)
                        currentOrientation = LANDSCAPE_LEFT;
                    else if(degrees>=315||degrees<=45)
                        currentOrientation = LANDSCAPE_RIGHT;
    
                    if(currentOrientation == previousOrientation)
                        return;
    
                    accEventExtra.oldOrientation = previousOrientation;
                    accEventExtra.newOrientation = currentOrientation;
                    accEventExtra.directionOfChange = determineDirectionOfChange(previousOrientation,currentOrientation);
    
                    previousOrientation = currentOrientation;
    
                    dispatchEvent(accEventExtra);
                }
            }
            private function determineDirectionOfChange(oldOrientation:String, newOrientation:String):String
            {
                var turned:String;
                switch(oldOrientation)
                {
                    case PORTRAIT_DEFAULT:
                        switch(newOrientation)
                        {
                            case LANDSCAPE_LEFT:
                                turned = TURNED_LEFT;
                                break;
                            case LANDSCAPE_RIGHT:
                                turned = TURNED_RIGHT;
                                break;
                            case PORTRAIT_FLIPPED:
                                turned = FLIPPED;
                                break;
                        }
                    break;
                    case LANDSCAPE_LEFT:
                        switch(newOrientation)
                        {
                            case PORTRAIT_DEFAULT:
                                turned = TURNED_RIGHT;
                                break;
                            case LANDSCAPE_RIGHT:
                                turned = FLIPPED;
                                break;
                            case PORTRAIT_FLIPPED:
                                turned = TURNED_LEFT;
                                break;
                        }
                        break;
                    case LANDSCAPE_RIGHT:
                        switch(newOrientation)
                        {
                            case LANDSCAPE_LEFT:
                                turned = FLIPPED;
                                break;
                            case PORTRAIT_DEFAULT:
                                turned = TURNED_LEFT;
                                break;
                            case PORTRAIT_FLIPPED:
                                turned = TURNED_RIGHT;
                                break;
                        }
                        break;
                    case PORTRAIT_FLIPPED:
                        switch(newOrientation)
                        {
                            case LANDSCAPE_LEFT:
                                turned = TURNED_RIGHT;
                                break;
                            case LANDSCAPE_RIGHT:
                                turned = TURNED_LEFT;
                                break;
                            case PORTRAIT_DEFAULT:
                                turned = FLIPPED;
                                break;
                        }
                        break;
    
                }
                return turned;
            }
        }
    }
    
    internal class SingletonEnforcer {public function SingletonEnforcer(){}}
    

    [AccBasedOrientationEvent.as]

    package com.shaunhusain.fingerPainting.events
    {
        import flash.events.Event;
    
        /**
         * Added a property to store the current linearRotation pre-computed so
         * each handler doesn't have to compute it.
         */
        public class AccBasedOrientationEvent extends Event
        {
            public var oldOrientation:String;
            public var newOrientation:String;
            public var directionOfChange:String;
            public function AccBasedOrientationEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, oldOrientation:String=null, newOrientation:String=null, directionOfChange:String=null)
            {
                super(type, bubbles, cancelable);
                this.oldOrientation = oldOrientation;
                this.newOrientation = newOrientation;
                this.directionOfChange = directionOfChange;
            }
        }
    }
    

    Usage should end up looking something like this:

                       {
                       ...
                       var accManager:AccelerometerManager = AccelerometerManager.getIntance();
                    accManager.addEventListener(AccelerometerEvent.UPDATE, handleAccelerometerChange);
    
                    var locRot:Number;
                    switch(accManager.currentOrientation)
                    {
                        case AccelerometerManager.PORTRAIT_DEFAULT:
                            locRot = 0;
                            break;
                        case AccelerometerManager.PORTRAIT_FLIPPED:
                            locRot = Math.PI;
                            break;
                        case AccelerometerManager.LANDSCAPE_LEFT:
                            locRot = Math.PI/2;
                            break;
                        case AccelerometerManager.LANDSCAPE_RIGHT:
                            locRot = -Math.PI/2;
                            break;
                    }
    
                    var ge:GenericActuator = Actuate.tween(this, 1, {rotateAroundCenter:locRot});
                                ...
                            }
    
    private function handleAccelerometerChange(event:AccBasedOrientationEvent):void
            {
                var locRot:Number;
                switch(event.newOrientation)
                {
                    case AccelerometerManager.PORTRAIT_DEFAULT:
                        locRot = 0;
                        break;
                    case AccelerometerManager.PORTRAIT_FLIPPED:
                        locRot = Math.PI;
                        break;
                    case AccelerometerManager.LANDSCAPE_LEFT:
                        locRot = Math.PI/2;
                        break;
                    case AccelerometerManager.LANDSCAPE_RIGHT:
                        locRot = -Math.PI/2;
                        break;
                }
    
                var ge:GenericActuator = Actuate.tween(this, 1, {rotateAroundCenter:locRot});
                //rotateAroundCenter = event.linearRotation;
            }
    

    Note: I'm using the Actuate library in the example to animate the rotations, this isn't at all necessary, everything else here should be built in or supplied above.