Package | com.greensock.plugins |
Class | public class EaselPlugin |
Inheritance | EaselPlugin ![]() ![]() |
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.