GreenSock JavaScript API Docs | All Packages | All Classes | Index | Frames No Frames |
EaselPlugin

Package | com.greensock.plugins
Class | public class EaselPlugin
Inheritance | EaselPlugin TweenPlugin Object

Tweens special EaselJS-related properties like ColorFilter (see http://www.createjs.com/#!/EaselJS for more information about EaselJS). Of course you don't need the plugin to tween normal numeric properties of EaselJS objects, but some filters or effects require special manipulation like ColorFilters (which is currently the only filter supported by EaselPlugin but more will be added in the future).

GreenSock's EaselPlugin exposes convenient properties that aren't a part of EaselJS's API like `"tint", "tintAmount", "exposure",` and `"brightness"`. Simply wrap the values that you'd like to tween in an "easel" object. Here are some examples:

    //setup stage and create a Shape into which we'll draw a circle later...
    var canvas = document.getElementById('myCanvas'),
        stage = new createjs.Stage(canvas),
        circle = new createjs.Shape(),
        g = circle.graphics;

    //draw a red circle in the Shape
    g.beginFill(createjs.Graphics.getRGB(255, 0, 0));
    g.drawCircle(0, 0, 100);
    g.endFill();

    //in order for the ColorFilter to work, we must cache() the circle
    circle.cache(-100, -100, 200, 200);

    //place the circle at 200,200
    circle.x = 200;
    circle.y = 200;

    //add the circle to the stage
    stage.addChild(circle);

    //setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick
    TweenLite.ticker.addEventListener("tick", stage.update, stage);
    stage.update();

    //tween the tint of the circle to green and scale it to half-size
    TweenLite.to(circle, 2, {scaleX:.5, scaleY:.5, easel:{tint:0x00FF00}});

    //tween to a different tint that is only 50% (mixing with half of the original color) and animate the scale, position, and rotation simultaneously.
    TweenLite.to(circle, 3, {scaleX:1.5, scaleY:0.8, x:250, y:150, rotation:180, easel:{tint:"#0000FF", tintAmount:0.5}, delay:3, ease:Elastic.easeOut});

You can tween any individual properties of the ColorFilter object like this:

    TweenLite.to(circle, 3, {easel:{colorFilter:{redMultiplier:0.5, blueMultiplier:0.8, greenOffset:100}}});

Or you can tween things like the "exposure" of an image which is a value from 0-2 where 1 is normal exposure, 2 is completely overexposed (white) and 0 is completely underexposed (black). Or define a "brightness" value which uses the same concept: a value from 0-2. These effects can be very useful for images in particular.

Note: a common mistake is to forget to wrap EaselJS-related properties in an `easel` object which is essential for specifying your intent.

Copyright 2008-2012, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.

Thu Dec 20 2012, 04:30 PM -06:00