Jump to content
Search Community

Flash CS6 to HTML5 - EaselJS & AutoAlpha

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

I'm still learning and searched but didn't find my issue. I'm not sure if this is coder error or not possible... I'm very familiar with the AS3 version of TweenMax/Lite but still learning JS/GSAP/etc.

 

I used Flash CS6 to layout my and create my objects. I've successfully integrated GSAP for the tweening engine but autoAlpha is not working for me.

 

Basically I want to use autoAlpha on an object. Here is the newly created object in my .js file (code simplified to highlight issue):

 

(lib.map5 = function() {

this.initialize();

// popups
this.ptInfo_A = new lib.ptInfo_A();
this.ptInfo_A.setTransform(176.5,141.5,1,1,0,0,0,134.5,73.5);

this.addChild(this.ptInfo_A);
}).prototype = p = new cjs.Container();

p.nominalBounds = new cjs.Rectangle(42,68,469,201.5);

 

In another JS file, where I setup interactions and initial stage properties, I'm trying to do this but it's simply not working:

 

TweenLite.to(exportRoot.ptInfo_A, .2,{{css:{autoAlpha:0}}});

 

I've been able to "manually" make the object do what I want it to do but it seem clunky using anonymous funcions:

 

TweenLite.to(exportRoot.ptInfo_A, .2, {alpha:0,
onComplete:function(){exportRoot.removeChild(exportRoot.ptInfo_A);}});

 

Does anyone have any insight into this? Is autoAlpha not possible on objects?

 

Thanks in advance!

 

(I've attached the files if anyone if feeling especially ambitious to help!)

map5_deploy.zip

Link to comment
Share on other sites

Howdy,

 

Sorry to hear you are having problems. It seems that you are trying to mix and match some tools that simply won't work together.

 

If you are using EaselJS you can certainly use GSAP to tween the properties of the easelJS objects.

 

EaselJS uses the HTML5 canvas and not the DOM, so as you noted above there is no need to be using the CSSPlugin or setting any css properties in your tweens.

 

Furthermore, autoAlpha doesn't have any meaning in the world of EaselJS. From their docs it appears that their display objects (shapes, sprites etc) have an alpha property. So something like this should work fine:

 

TweenLite.to(shape3, .2, {alpha:0});

Link to comment
Share on other sites

Thanks Carl,

 

I've certainly used alpha properties on my objects and it works great. I was just trying to avoid objects layered over each other with alpha:0 and still be clickable.

 

HOWEVER, with more exploration I've since discovered that once an object's alpha = 0 it can't be interactive with. It's as if it's doing what autoAlpha does...fade it out and then remove it.

 

I know it's not removing the object but at least it's not clickable. I suppose this is because of easelJS? Or is that a characteristic of Canvas in general?

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