AS3，AIR，Starling滑动面板（如MadComponents）

Question

I am developing an app using AS3/Air for mobile devices. I am using Feathers UI and Starling but I would like to create a panel slide (menu, information panel etc) that comes with MadComponents. I was considering just creating a class which held the 'panel', import that on to my screen and use Greensock for the tweening.

My questions are:

1. Would this be the best way using Starling and Feathers?
2. Can I use MadComponents with Starling considering it is built using Flash display not Starling?
3. Any other suggestions how I could achieve the same result?

Basically I just want a button, user clicks the button and the screen tweens left/right and 'opens' the information panel. Push the button again and it closes it.

Many thanks

Answer 1

If I've understood what you've described correctly then it sounds like the ScreenNavigator Class of Feathers is exactly the thing you need?

See ScreenNavigator API

And the Demo of the Feathers Component Explorer that uses the SlideNavigator in the same way you describe.

Answer 2

It looks like Josh Tynjala is looking to add this feature to Feathers: https://github.com/joshtynjala/feathers/issues/527

In the meantime, I wanted the same thing, so I just whipped this up, and I am happy to share it ( WARNING : Has not been tested extensively):

package com.hiddenachievement.space.components
{
    import feathers.core.FeathersControl;

    import starling.animation.Transitions;
    import starling.animation.Tween;
    import starling.core.Starling;
    import starling.display.Sprite;

    /**
     * Creates a control that emerges from one side of the stage, while moving the main view to show it.
     */

    public class EdgeSlideControl extends FeathersControl
    {
        private var _mainView:Sprite;
        private var _open:Boolean;
        protected var _tween:Tween;
        protected var _side:int;
        protected var _callback:Function;
        protected var _uncover:Boolean;

        static public const NORTH:int = 0;
        static public const SOUTH:int = 1;
        static public const EAST:int = 2;
        static public const WEST:int = 3;


        /**
         * Creates an EdgeSlideControl.
         *
         * @param mainView The main view (possibly a ScreenNavigator) that will move to show the menu.
         * @param side The side that the control will emerge from.
         * @param uncover When true, the main view will slide away to uncover the control.  When false, the control will slide in from the side, as the main view slides out of the way. 
         *
         */
        public function EdgeSlideControl(mainView:Sprite, side:int, uncover:Boolean = true)
        {
            super();
            _mainView = mainView;
            _side = side;
            _uncover = uncover;
        }

        /**
         * Implements the standard FeathersControl's initialize.
         */
        override protected function initialize():void
        {
            _open = false;
            visible = false;
        }

        /**
         * Begin the animation to display the control.
         */
        public function show(callback:Function=null):void
        {
            _callback = callback;
            _tween = new Tween(_mainView, 0.2, Transitions.LINEAR);
            _tween.onUpdate = updateSlide;
            _tween.onComplete = slideComplete;

            switch(_side)
            {
                case NORTH:
                    _tween.animate("y", height);
                    break;
                case SOUTH:
                    _tween.animate("y", -width);
                    break;
                case EAST:
                    _tween.animate("x", -height);
                    break;
                case WEST:
                    _tween.animate("x", width);
                    break;
            }

            Starling.juggler.add(_tween);
            _open = true;
            visible = true;
        }

        /**
         * Begin the animation to hide the control.
         */     
        public function hide(callback:Function=null):void
        {
            _callback = callback;
            _tween = new Tween(_mainView, 0.2, Transitions.LINEAR);
            _tween.onUpdate = updateSlide;
            _tween.onComplete = slideComplete;

            switch(_side)
            {
                case NORTH:
                case SOUTH:
                    _tween.animate("y", 0);
                    break;
                case EAST:
                case WEST:
                    _tween.animate("x", 0);
                    break;
            }

            Starling.juggler.add(_tween);
            _open = false;
        }


        /**
         * If the control is moving (not in "uncover" mode), move the control into place, next to the main view.
         */         
        public function updateSlide():void
        {
            if (!_uncover)
            {
                switch(_side)
                {
                    case NORTH:
                        y = _mainView.y - height;
                        break;
                    case SOUTH:
                        y = _mainView.height - _mainView.y;
                        break;
                    case EAST:
                        x = _mainView.width - _mainView.x;
                        break;
                    case WEST:
                        x = _mainView.x - width;
                        break;
                }
            }
        }


        /**
         * Perform any actions needed after the transition is done animating.
         */ 
        public function slideComplete():void
        {
            if (_callback != null)
            {
                _callback();    
            }

            visible = _open;
        }

        public function get isOpen():Boolean
        {
            return _open;
        }

    }
}

You may need to add an explicit size to the component, in the direction of the sliding, if it's coming up zero. Otherwise, the use should be pretty straightforward. Let me know if you need any more guidance on how to use it.