Tweener Easing Types

February 12th, 2008 by Adrian

I’ve been having a play with Tweener in AS3.0 and put together a little movie that demonstrates all the different easing type you can choose from. These are all based on the original Penner Easing Equations. This is very similar to Robert Penner’s Equations Visualizer. The duration for my tweens is set to one second.

Here is the Main class.

package {
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import fl.controls.ComboBox;
    import flash.display.Loader;
    import flash.net.URLRequest
    import caurina.transitions.Tweener;

    public class Main extends MovieClip {

        private var _border:Sprite;
        private var _canvas:Sprite;
        private var _canvasWidth:int = 500;
        private var _canvasHeight:int = 300;
        private var _iNum:int = 100;
        private var _ball:Sprite;
        private var _cb1:ComboBox;
        private var _cb2:ComboBox;
        private var _selectedTween:String = "none";
        private var _loader:Loader;
        private var _folder:String = "graphs/";
        private var _ext:String = ".gif";

        public function Main():void {
            _border = new Sprite();
            var _thickness:int = 1;
            _border.graphics.lineStyle(_thickness, 0x036CB4, 1, true);
            _border.graphics.lineTo((_canvasWidth-(_thickness/2)), (_thickness/2));
            _border.graphics.lineTo((_canvasWidth-(_thickness/2)), (_canvasHeight-(_thickness/2)));
            _border.graphics.lineTo((_thickness/2), (_canvasHeight-(_thickness/2)));
            _border.graphics.lineTo((_thickness/2), (_thickness/2));

            _canvas = new Sprite();
            _canvas.graphics.beginFill(0xFFFFFF);
            _canvas.graphics.drawRect(0, 0, _canvasWidth, _canvasHeight);
            _canvas.graphics.endFill();
            _canvas.addEventListener(MouseEvent.CLICK, onClick);
            _canvas.alpha = 0;

            _ball = new Sprite();
            _ball.graphics.lineStyle();
            _ball.graphics.beginFill(0x0033FF);
            _ball.graphics.drawCircle(0, 0, 10);
            _ball.graphics.endFill();
            _ball.x = _canvasWidth/2;
            _ball.y = _canvasHeight/2;

            _cb1 = new ComboBox();
            _cb1.editable = false;
            _cb1.move(10, 10);
            _cb1.width = 90;
            _cb1.rowCount = 6;
            _cb1.addItem({label:"none"});
            _cb1.addItem({label:"linear"});
            _cb1.addItem({label:"easeIn"});
            _cb1.addItem({label:"easeOut"});
            _cb1.addItem({label:"easeInOut"});
            _cb1.addItem({label:"easeOutIn"});
            _cb1.addEventListener(Event.CHANGE, onComboBoxChange);

            _cb2 = new ComboBox();
            _cb2.editable = false;
            _cb2.move(110, 10);
            _cb2.width = 90;
            _cb2.rowCount = 12;
            _cb2.addItem({label:"none"});
            _cb2.addItem({label:"linear"});
            _cb2.addItem({label:"Sine"});
            _cb2.addItem({label:"Cubic"});
            _cb2.addItem({label:"Quint"});
            _cb2.addItem({label:"Circ"});
            _cb2.addItem({label:"Back"});
            _cb2.addItem({label:"Quad"});
            _cb2.addItem({label:"Quart"});
            _cb2.addItem({label:"Expo"});
            _cb2.addItem({label:"Elastic"});
            _cb2.addItem({label:"Bounce"});
            _cb2.addEventListener(Event.CHANGE, onComboBoxChange);

            _loader = new Loader();
            _loader.x = 352;
            _loader.y = -9;
            _loader.load(new URLRequest(_folder + _selectedTween + _ext));

            addChild(_loader);
            addChild(_border);
            addChild(_canvas);
            addChild(_ball);
            addChild(_cb1);
            addChild(_cb2);
        }

        private function animateToPos():void {
            Tweener.addTween(_ball, {x:mouseX, y:mouseY, transition:_selectedTween, delay:0, time:1, onComplete:tweenDone, onStart:tweenStart, onUpdate:tweenUpdate});
        }

        private function onClick(event:MouseEvent):void {
            if (_selectedTween == null || _selectedTween == "none") {
                _ball.x = mouseX;
                _ball.y = mouseY;
            } else {
                animateToPos();
            }
        }

        private function tweenStart():void {
            trace("tweenStart()");
        }

        private function tweenUpdate():void {
            trace("tweenUpdate()");
        }

        private function tweenDone():void {
            trace("tweenDone()");
        }

        private function onComboBoxChange(event:Event):void {
            if (_cb1.selectedLabel == "none" || _cb2.selectedLabel == "none") {
                _selectedTween = "none";
            } else if (_cb1.selectedLabel == "linear" || _cb2.selectedLabel == "linear") {
                _selectedTween = "linear";
            } else {
                _selectedTween = _cb1.selectedLabel+_cb2.selectedLabel;
            }
            _loader.load(new URLRequest(_folder + _selectedTween + _ext));
        }

    }
}

Download source

Posted in ActionScript 3.0, Sample Code, Tweening | No Comments »

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.