| Package | com.greensock.plugins |
| Class | public class EaselPlugin |
| Inheritance | EaselPlugin  TweenPlugin Object |
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.