Jump to content
Search Community

Cannot get the EaselPlugin color plugin to work

Monnone test
Moderator Tag

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

Hey everyone! Long-time user and fan of TweenMax, et al for Flash. I'm building my first real project in Canvas and am using the CreateJS plugin for Flash as my asset layout manager. I'm trying to change the color of a hotspot on onmouseover:


To cover all bases:


I've included the EaselPlugin.min.js file. Here are all the GSAP files included:

<script type="text/javascript" src="libs/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="libs/plugins/EaselPlugin.min.js"></script>
<script type="text/javascript" src="libs/easing/EasePack.min.js"></script>
<script type="text/javascript" src="libs/TweenMax.min.js"></script>


The object I'm trying to tween doesn't seem to respond to this code:

TweenMax.to(e.target, .3, {easel:{tint:0x00FF00}});


I know e.target is correct because I can apply GSAP transforms on it like so:

TweenMax.to(e.target, .3, {scaleX:2, scaleY:2});


and it works fine.


Also, I'm getting this error when I try: easel:{tint:0x00FF00}


uncaught exception: EaselPlugin error: The EaselJS ColorFilter Javascript file wasn't loaded.


Maybe I'm missing something small? Also, just to be sure, I can't use CSS properties on elements that are not part of the DOM right? Like this object I'm trying to tint.


Any help is greatly appreciated!

Link to comment
Share on other sites

It sounds to me like you've just got a stale version of the EaselPlugin - the EaselJS folks changed the way they packaged their stuff in a more recent version, so we needed to accommodate that in the plugin. Please download the latest GSAP js files and let us know if they work well for you.

Link to comment
Share on other sites

Weird - would you be able to post a very simple set of files that demonstrate the issue? Just a SUPER simple example. Zip up the whole directory and post it here so that we can take a peek and see the error for ourselves. Sorry about the hassle - I'm sure we can get to the bottom of it once we see your files.

Link to comment
Share on other sites

That makes a ton of sense. Being so new to easelJS I guess I assumed all that was packaged into easeljs-0.5.0.min.js.


I loaded the ColorFilter script and now I'm getting the following error:


uncaught exception: EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. [Container (name=null)]


*scratching head...

Link to comment
Share on other sites

We posted at the same time...


Yeah, I've researched both of those pages. I think since I'm generating objects from the createJS Flash plugin something is different.


For example, I'm trying this inside my onmouseover:


e.target.cache(e.target.x, e.target.y, e.target.width, e.target.height);


and I get this error:


InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Link to comment
Share on other sites

Good Grief. Sorry to hear you are having so much trouble.


I'd imagine that doing a simple console.log(e.target) would produce the same error.


If you can't do any simple adjustments to e.target, like rotation or scale I'd suggest posting a zip of your latest files (without any TweenMax code) over on the easelJS forums.


The reason I suggest stripping out the TweenMax-related code is just so that you can provide an easy to troubleshoot file that doesn't have any external dependencies which will help them narrow down the issue.


I regret that I don't know more about the inner workings of easelJS in order to help more. It seems at this point that the latest issue has to do with something wonky happening during the flash export or that is inherent to EaselJS.

Link to comment
Share on other sites

Yeah, EaselJS has some pretty rough edges. One of them is that objects don't have any "width" or "height" properties! I'm pretty sure that's why your code was breaking. You were using e.target.width and e.target.height. The lack of width/height properties makes it awkward to figure out what to plug into your cache() call for sure. In your example, I just called e.target.cache(0, 0, 100, 100); and it seemed to work just fine.

Link to comment
Share on other sites

Hey guys, I truly appreciate your help! I guess I wasn't using the cache method correctly. It seem that the parameters, height and width are a PERCENTAGE not an actual px value. So this works:


mapHS[mhs].onmouseover = function(e) {
    e.target.cache(0, 0, 100, 100);
TweenMax.to(e.target, .3, {easel:{tint:"#0000FF", tintAmount:1}});

mapHS[mhs].onmouseout = function(e) {
    TweenMax.to(e.target, .3, {easel:{tint:"#0000FF", tintAmount:0}});


I know, the export feature IS wonky to say the least but it's something. So that leads me to another question, a little off-topic...I'd really like to use a tool of some sort to lay out objects, nest them, layer them for various reasons (scaling for responsive design), etc, like this map I'm building...then write all the code to connect everything up. It seems silly to me to have lay out all my objects manually plus what about loosing some level of OOP?


Do you guys have a tool that you've experimented with that you like? I've looked into Hype, Edge and a few others I can't remember and Flash's export option seemed like the way to go for me. I like keeping all of my "apps" sort of self-contained so they plug into our CMS easier on existing sites so really using elements from the DOM might be too ideal. Thoughts?


I'm just looking for some direction on what's the proper way to go about building these Canvas-type apps.

Link to comment
Share on other sites

Ok, I was wrong about EaselJS's cache method. It IS pixels. I just had to find out the hard way as some of my objects were larger than 100x100px and I couldn't figure out why they were rendering bizarre.


I have an object that is 91x173px and plugged this in:


e.target.cache(0, 0, 200, 200);


to cover my bases but this feels like a hack. I can't believe there is no way to get the width & height of objects created with Easel.

Link to comment
Share on other sites

I can't believe there is no way to get the width & height of objects created with Easel.


Amen. I was shocked by that too. Seems so obviously essential. On the other hand, I'm not sure it'd be an easy thing to implement for non-rectangular objects that are rotated so maybe that's why they didn't do it.

Link to comment
Share on other sites

Amen. I was shocked by that too. Seems so obviously essential. On the other hand, I'm not sure it'd be an easy thing to implement for non-rectangular objects that are rotated so maybe that's why they didn't do it.


Yeah there has to be a good reason.


Do you guys have any thoughts on the second part of my post about tools?

Link to comment
Share on other sites

I like keeping all of my "apps" sort of self-contained


Weren't swfs so nice? ;)


I don't have a lot of experience with these new tools that give you a better GUI for html development.


Chris Gannon has been doing a lot of really cool work with Edge Animate and GSAP. He has a very strong Flash background and really enjoys using Edge to layout his assets and get things organized. He does all his animation with GSAP though.


Check out his blog, its packed with cool demos and source files: http://chrisgannon.wordpress.com/?r=gtv


From the "buzz" that I'm exposed to, I get the impression that Adobe is really behind Edge and they want to focus on it being the IDE-of-choice for non-Flash animation. The Toolkit for CreateJS seemed to be all the rage when Flash CS6 came out but I don't really see the Adobe Evangelists or other devs pushing it all that much. From my very shallow experiments with it, it seemed to the job really well with the features it supported. My problem was that it seemed like you had to spend a lot of time trying to figure out exactly what those features were. On a positive note the "spritesheet exporter" seemed to be quite a powerful tool.


Just one guy's anecdotal experience.

Link to comment
Share on other sites

Thanks for the tips guys!


I've played around with Edge in the very early releases (specifically around SXSW last year), isn't Edge based more on webkit/div & dom style rather than a canvas approach? Are there advantages of one over the other? It still seems like the wild west out there.


I really like the idea of being able to somewhat use an OOP approach (like Skinner is trying to do with EaselJS) to some of these web apps and I fear Edge isn't going in that direction.

Link to comment
Share on other sites

Yep, it's definitely "Wild West" out there. I doubt that'll change anytime soon.


As far as canvas being better than dom, it isn't clear-cut at all. For some things Canvas performs very well, but there are limits. There's also compatibility issues, particularly with older versions of IE which just won't seem to go away. Canvas definitely isn't a silver bullet.


As far as Edge goes, the jury is out still. There seems to be a lot of bloat and "interesting" code it spits out, but I appreciate some parts about how it's trying to be a good tool for visually building things. Frankly I have only cracked it open once or twice, so I can't really give a fair assessment yet. I wish I had more to offer you other than...well...make sure you're using GSAP for all your animations :)

Link to comment
Share on other sites

I appreciate the thoughts guys. It's good to know that I'm not the only one feeling like it's a bit of a mess still. I've been researching like a mad man trying to find the right path but it sounds like that path is not a clear one.


And Jack, don't sweat it, I'm a huge fan of your tween classes and the work you and your entourage has done for us. I'm pretty dang excited about GSAP and can't wait to see what happens with it next.


Now that I think about it I think I let my membership accidentally lapse...I need to take care of that. Weird how time flies.


Thanks guys!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Yes, you could do it by tweening the individual matrix values, but I just updated EaselPlugin to make it much easier for you. Just define things like "saturation", "contrast", "hue", "colorize", or "colorizeAmount" and it'll do all the magic for you.


Again, make sure you update your files with the latest. I've attached an example too.




Link to comment
Share on other sites

  • 8 months later...
  • 3 years later...



I've been trying to create an  exposure effect when i hover an image, but to no luck.
Been reading on multiple threads on the topic and as i understand it i need to use the .cache function on my image but i don't understand how it works for images.
I'm already using images on the site (using drupal) so i'm not sure how to make them being displayed via easljs since i load them in drupal. 

Also do i need to use the canvas element in order to get this to work at all?

Any help is much appreciated, thanks

(function ($) {

$('.img-responsive').cache(600, 350);
$('.img-responsive').hover(over, out);

function over(){
    TweenMax.to(this, 2, {easel:{exposure:1.5}});

function out(){
      TweenMax.to(this, 2, {easel:{exposure: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.
  • Create New...