Skip to main content
paul_james123
paul_james123
Inspiring
August 25, 2017
Answered

Animation workflow question: imported video or movie clip

  • August 25, 2017
  • 1 reply
  • 568 views

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!

    This topic has been closed for replies.
    Correct answer Colin Holgate

    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.

    1 reply

    Colin Holgate
    Colin HolgateCorrect answer
    Inspiring
    August 25, 2017

    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
    paul_james123Author
    Inspiring
    August 25, 2017

    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
    Colin Holgate
    Inspiring
    August 25, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices