Jump to content


Change fill color with ColorProps plug in Flash Pro/Create Js

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to change the fill color of a movieclip I created using Flash Pro with the canvas tag / Create JS.


This is what I'm trying:

TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}});

TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}});

But nothing seems to be working. I saw an older post in the from (2012) that was using :

TweenLite.to(circle, 3, {y:150, easel:{tint:"#0000FF", tintAmount:0.5}});

That also doesn't seem to do anything. I don't see any errors so I'm guessing this line is just being ignored.




Link to comment
Share on other sites

Can you change anything else besides the color?

  • Like 1
Link to comment
Share on other sites

In CreateJS which is what Flash CC outputs the canvas too. You must use the ColorFilter class which is part of EaselJS




Check out the GSAP EaselPlugin Docs:



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

Taken from an example on the EaselPlugin Docs page, to show proper usage:

//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);

//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

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

//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});

//then animate the saturation down to 0
TweenLite.to(circle, 2, {easel:{saturation:0}, delay:6});


  • Like 2
Link to comment
Share on other sites

In the example above, it's shown by creating the graphic with javascript, but what about if I was using flash's IDE to create the object (movieclip) and I wanted to change the tint of that. Would I still need to cache the object? I guess that's the only part I'm not 100% sure about.

I tried to use this code, but nothing happens:

TweenLite.to(instructions.demoColor, 1, {easel:{tint:"#279133", tintAmount:1}});
Link to comment
Share on other sites

I think the best thing to do is provide a codepen demo example so we can see your code in context to better help you. Then we can test your code live.


Here is a video by GreenSock on how to create a codepen demo example.




Link to comment
Share on other sites

Hey Jonathan,

I'm building this project out of Flash Pro, which is where my questions is coming from. I'm not sure I can replicate the issue with a codepen, as I'm not able to create movieclips inside the html framework. Does that make sense?

Link to comment
Share on other sites

Here is a demo created with Flash Pro CC with all GSAP code written in Actions Panel.




This is the only code you need to write in Flash Pro

this.box.cache(0, 0, 200, 200);
TweenMax.to(this.box, 3, {x:300, rotation:90, easel:{tint:"green"}});

pls note in the html tab that all these scripts are being loaded


<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/EaselPlugin.min.js"></script>

attached is the Flash CC 2015 Fla and all files zipped




  • Like 3
Link to comment
Share on other sites

Thanks, had no idea I could create a codepen like that. One question I have with the cache function, the x, and y params, don't seem to calculate when the project runs. The example file has an x value of 47.95 and a y of 102. But it doesn't seem to start at a x,y position of 0,0? Does this make sense what I'm asking?  I read up on this: http://createjs.com/docs/easeljs/classes/DisplayObject.html#method_cache but it didn't seem to clear up my confussion.



Link to comment
Share on other sites

the cache coordinates / values are relative the object's own coordinate space, based on its own registration point, not where it is on the stage.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.