Animation workflow question: imported video or movie clip

[paul_james123]

Hi All,

I must preface this with "I'm may not know what I'm talking about and I may be misusing terms."

I've been working on an HTML5 canvas final product (theuplink.org). I'm using Animate CC to build this interactive website and GreenSock tweens to make some bitmaps animate.

I've noticed what look like performance issues in the tweened animation when running on some devices/browsers. (For example,  bitmaps don't swap back after the tween's timeline reverses.) I've been told by a mobile content developer that to avoid performance issues, I should make the animations into "videos." I'd like a second opinion on that because I don't understand how that would work with my project. For example, I need to have interactivity: The user clicks on one of many bitmap images of wheels and the one clicked spins and bounces and then stops.

In trying to convert the script-based (Greensock tweened) animations into "videos," I've used Animate CC to make the wheel spin and bounce using (traditional) timeline-based animation using Motion Tweens, etc.

1.) Do I then export that spinning/bouncing wheel as a video from Animate CC and then import that video into the main project (making it a movie clip and then use an eventListener to make the video play upon click)?

I2.) f so, do I export it as a quicktime.mov? (I'm getting a "file was not imported because there was a problem reading it" error when I try to import into my main project.)

3.) Can videos have transparency so you can see thru the wheel's spokes to the background of the main project?

Am I misunderstanding the whole principal here?

Thanks much!

[Colin Holgate · Accepted solution]

Motion tweens will lead to the poor performance. If you could replace those with Classic tweens that don't have custom easing, you would solve the problem and not have to come up with other solutions.

I'm not sure about whether you'll need to do similar fixes to the Greensock tweens. Normally you would just use the tweens that are already built into CreateJS.

[paul_james123]

Thanks, Colin.

I'll try to avoid Motion Tweens as I build and stick with tweens from the  CreateJS library.

I've been told that 'createjs is native to Animate.' What does that mean?

[Colin Holgate]

With Greensock and other non-createjs libraries you would have import lines for the library, then call out to those from within your Animate code. With CreateJS the tweens are part of the library that drives HTML5 Canvas that you publish from Animate, and so you can call the tweens with code inside Animate. No need to add extra import lines or to call out to another library.

[paul_james123]

Ok I'm understanding.

Does calling out to those other non-createjs libraries actually cost in performance of an HTML5 Canvas animation....or is the negative just that it's inconvenient to have to add the 'import lines'?

Thanks

[Colin Holgate]

Even Animate uses jquery these days, and there's no performance problem. It's just another thing that could go wrong, and in asking questions here about CreateJS things, everyone will know. Asking about external libraries might have more success in those third party library forums. But when you get there you have to explain to them what Animate is.

So, using a CreateJS built in function might be easier to get help on than using a selection of not build in libraries.

Having said that, Greensock is known by a lot of people here, and tweens in general work in similar ways. It would get tricky when you start using Greensock specific features. Then you might need to ask over here too:

GreenSock Community Forums

[paul_james123]

Thanks again, Colin