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

[icekomo 2 Likes (Newbie)]

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.

 

 

Thanks!

[OSUblake 9,990 Likes (Superhero)]

Can you change anything else besides the color?

[Jonathan 5,176 Likes (Superhero)]

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

 

http://createjs.com/docs/easeljs/classes/ColorFilter.html

 

Check out the GSAP EaselPlugin Docs:

 

http://greensock.com/docs/#/HTML5/Plugins/EaselPlugin/

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

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

[icekomo 2 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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.

 

 

[icekomo 2 Likes (Newbie)]

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?

[Carl 9,066 Likes (Superhero)]

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

 

http://codepen.io/GreenSock/pen/WQaWjp?editors=001

 

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

 

 

easel-tint.zip

[icekomo 2 Likes (Newbie)]

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.

 

Thanks!

[Carl 9,066 Likes (Superhero)]

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.