Flash CC to html5 canvas

[jwave]

Hi,

 

I have a project where I need to remake a large number of old Flash files in a touch friendly format, by building them with canvas, javascript and so on. I was hoping to figure out how to use the Flash to html5 canvas approach to do this, and make use of GSAP as well. At the moment I am still testing things out, and I am finding that tweens done in my Flash file with createjs work predictably, but those done with gsap are less reliable. Some tweens work reliably (eg rotate) others (eg scale) have no effect. Also, sometimes the entire file breaks down for no obvious reason (at least to me...).

 

Do you think this is because I have set it up wrong, or is there just a basic incompatibility between gsap and Flash to canvas? If it is something I have set up wrong, are there any examples I could take a look at of using Flash to html5 canvas along with gsap?

 

Thanks.

 

ps I realise this is an as3 forum, is there anywhere more appropriate to post this?

[GreenSock]

GSAP is absolutely compatible with CreateJS, canvas, and pretty much ANYTHING that JavaScript can touch. Many people use GSAP with CreateJS. All GSAP does at its core is set object properties 60 times per second. It doesn't care what the property name is, what type of object it is, etc. You just tell it what to tween, and it'll do it. The problem most likely has to do with one (or more) of the following:

1. Perhaps your tweening the wrong property name. For example, if you tween "rotate" instead of "rotation", or "scale" instead of "scaleX" and "scaleY". 
2. CreateJS likely requires that you call a particular method in order for it to actually render the newly-updated properties. So, for example, GSAP may be setting "rotation" to new values 60 times per second, but visually you may see zero changes because CreateJS never bothered to paint those to the screen because it wasn't notified that it needed to. This isn't a problem with GSAP - it's just a matter of you understanding what CreateJS requires and how to pull the right levers. 

To make things easier, we created an EaselPlugin that's specifically for helping folks who want to use EaselJS. See http://greensock.com/docs/#/HTML5/GSAP/Plugins/EaselPlugin/

 

In terms of reliability, that's one of GSAP's strengths as well. I'd be very curious to see an example of something just randomly glitching or ceasing to work. I'm sure there's a reason for it somewhere. 

 

If you're still having trouble, please create a reduced test case (ideally in codepen) and shoot use a link so we can see what's going on. Again, the simpler the better. 

[Carl]

Below is a test I made ages ago using Flash's HTML5 export to CreateJS with hand-coded GSAP in the Actions panel.

You will note that scaleX, scaleY, and rotation all work fine and there is really nothing fancy about the code or unique for CreateJS / Easel.

Perhaps it will help a little.

// **** BEGIN IMPORTANT ANIMATION CODE **** //


    // hand-coded in Flash's Actions panel;) 
    
    var text_mcs = [this.meet_mc, this.the_mc, this.blobs_mc];
    var tl = new TimelineMax({repeat:20, yoyo:true, repeatDelay:0.5})


    //introduce the text
tl.staggerFrom(text_mcs, 0.5, {scaleX:0, scaleY:0, y:70, ease:Back.easeOut}, 0.2);
    //place a label in the timeline to mark where the blobs should go
tl.add("blobs", "-=0.4");


for (i = 0; i < 8; i++) {
var blob = new lib.Blob();
blob.y = 475;
this.addChild(blob);
//create a Timeline animation for each blob
var blobAni = new TimelineLite();
blobAni.to(blob, 2, {x:680, ease:Linear.easeNone})
.to(blob, 0.5, {y:Math.random() * 200}, 0)
.to(blob, 0.9, {rotation:360}, 0.1)
.to(blob, 0.5, {y:230, ease:Quad.easeIn}, 0.51)
      //place each blob's timeline animation into our master timeline (tl) offset by 0.4 seconds.
tl.add(blobAni, "blobs+=" + i * 0.4) 
}


    //get rid of the text
tl.staggerTo(text_mcs.reverse(), 0.6, {x:800, ease:Back.easeIn}, 0.1, "-=0.8");
    
    // **** END IMPORTANT ANIMATION CODE **** //

http://codepen.io/GreenSock/pen/82d4233dc77ef164f7eb455c498504f1

[jwave]

Looks like it must be something I have done wrong then - I'll keep trying. Thanks for the example Carl, I will take a look.

 

10 minutes later - Fixed!

 

I just had the property names slightly wrong.

 

Thanks for the advice.