GreenSock Animation Platform (GSAP) v12 – Now supporting JS

May 16th, 2012 by Adrian

GreenSock Animation Platform (GSAP) v12

Mr Jack “Green Sock” Doyle has just released version 12 of his GreenSock Animation Platform (GSAP) for Flash AS2 and AS3, but the big announcement is that it now supports JavaScript too!

This is awesome news, and the API for JavaScript is the same as we have been using all these years for Flash projects. Plus the performance is amazing! I’ve just quickly run a few tests on my computer and it is way faster than jQuery, YUI 3, MooTools and Zepto. Try running the speed test yourself to see just how fast it is. I’ll post some speed test figures here soon.

Jack has managed to include TweenLite, TweenMax, TimelineLite, and TimelineMax in to the JavaScript version, plus there is also a new CSSPlugin that enables css-related animations.

There have also been some other general improvements, changes and optimisations throughout the platform.

Great work Jack. If you use this library in your work why not help Jack to continue working on it by becoming a Club GreenSock member?

Posted in Actionscript 1.0 & 2.0, ActionScript 3.0, Animation, Javascript, Tweening | No Comments »

GreenSock Tweening Platform has been updated to version 11

October 24th, 2009 by Adrian

GreenSock

The GreenSock Tweening Platform (which includes TweenLite and TweenMax) has recently been updated to version 11. It is still available for AS2 and AS3 and claims to be faster and more capable. There is a huge list of improvements on the GreenSock website (it was great before, even better now) and it has now confirmed to me that it is the best ActionScript tweening engine out there. The website is full of loads of help, examples, documentation, tips, speed tests and faq. I’ve always found the interactive examples on the GreenSock website particularly useful.

Three great new additions to the platform are TweenNano, TimelineLite and TimelineMax. TweenNano is only 1.6k in size and designed to be used where filesize is at a premium (i.e. banner ads). TimelineLite and TimelineMax allow you to build and manage sequences of tweens.

There is a feature comparison on the site and a Getting Started Tweening guide which you may find handy.

Go and check it out, and start using it in your projects.

Great work Jack! Thanks.

Posted in Actionscript 1.0 & 2.0, ActionScript 3.0, Animation, Flash, Flex, Tweening | 2 Comments »

AS3 Code Libraries (APIs)

August 19th, 2008 by Adrian

Here is a round up of some of the most popular ActionScript 3.0 (AS3) libraries out there to use.

Let me know if I have missed an important one off.

NOTE: This list was originally for my personal use (that I thought I would share), it is not intended to compete with or replace the list maintained by OSFlash or RIAForge.

Update 29/10/08: Ted Patrick has put together a list of ActionScript Cloud/Service APIs that he going to highlight during his Adobe MAX 2008 keynote presentation.

Update 28/11/08: I have just come across the Actionscript Classes website. A very handy resource.

Update 11/01/09: Rich Tretola has a small list of AS3 Libs on his blog EverythingFlex.

Update 12/01/09: The Flashchemist has compiled a similar list on his blog.

Update 27/02/09: Check out Spark Project which includes the FLARToolkit for Augmented Reality

Update 11/08/09: I just stumbled across this (old) list of projects.

Update 19/12/09: Sean “theflexguy” Moore has just written a blog entry called ‘List of 34 More ActionScript 3.0 APIs‘. This is a follow-up to his original post ‘List of 22 ActionScript 3.0 API’s‘.

Update 22/12/09: “30+ ‘Must Try’ Open Source Actionscript 3 Libraries” and “30 MORE Awesome Open Source AS3 Libraries

Update 28/01/10: “30 Classes AS3 bem úteis!”

Update 29/01/10: “15 Awesome ActionScript 3 Frameworks To Inspire Your Next Project”

Update 24/02/10: Emanuele Feronato has a good list of Isometric Engines on his blog

Update 19/03/10: Tom Krcha has posted a list of Flash Gaming Engines, plus a few others that were new to me.

Update 09/07/10: FluxDb has a huge list of AS3 Libraries.

Update 15/04/12: Exagone has a list of libraries

Update 16/04/12: 68 Small but Useful Open Source ActionScript Libraries (misc) help Flex/Flash Developers Improve Work Efficiency

Update 17/04/12: List of ActionScript 3.0 APIs

3D Engines

3D Game Engines

2D Engines (utilising the GPU using Stage3D)

2D Game Engines

Isometric Engines

3D Animation Framework

3D Physics Engines

Augmented Reality

Animation Tweening Engines

2D Physics Engines

Security

Audio Libraries

Particle Systems

Data Visualization

Loading Kits

OOP Frameworks

Website Frameworks

Debug / Stats / Trace / Output Panels

Other APIs and libraries

Posted in ActionScript 3.0, AIR, Augmented Reality, Flash, Flex, Papervision 3D, Tweening | 123 Comments »

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 »