How to Tween with Actionscript 3 in Animate?

[Long Con]

Hi, I'm trying to create a simple alpha fade out/in with Actionscript 3 in Animate, but the resources I can find are not working.  I just find references to the Flash Tween Class, but Animate doesn't recognize that code.

[JoãoCésar]

Hi.

This should work:

import fl.motion.easing.*; // this line can also be import fl.transitions.easing;
import fl.transitions.Tween;

// instance name, property, ease function, start value, end value, duration, use seconds
var tween:Tween = new Tween(yourInstance, "alpha", Linear.easeIn, yourInstance.alpha, 0, 2, true);

Here are some references about the Tween class:

https://code.tutsplus.com/tutorials/an-introduction-to-tweening-with-actionscript-30--active-2022

https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/transitions/Tween.html

I hope it helps.

Regards,

JC

[Long Con]

Yeah, I have tried that, but I get the error: "Uncaught SyntaxError: Cannot use import statement outside a module"

[JoãoCésar]

This means you're working on a HTML5 Canvas document.

Please make sure you're coding in a AS3 document.

[Nick Gioia]

when you are creating a new doc make sure you choose actionscript. 

 

[Long Con]

That would result in a .swf, right?  Honest question, what good is that anymore?

I was a Flash developer back in the day, but I lost my job when Steve Jobs decided to kill Flash... a number of years later, I discovered Animate, where I could work in a pretty familiar environment, but still produce content that will be available on every platform with HTML5.

It has been a bit of a trial adapting my code to what the HTML5 canvas needs, and I'm still finding my way in the dark to some degree.  Most of the help I can search online is still Flash-based.

Is there a way to tween the alpha in HTML5 Canvas mode, similar to the .swf way?

[JoãoCésar]

Hi.

It's because you said ActionScript 3, but HTML5 documents use JavaScript.

And, yeah, SWF files are not suitable for the web anymore - unless smart devs like those of ruffle.rs succeed in their emulation project.

Anyway, you can totally tween instances through code in HTML5 Canvas documents using TweenJS. This library is more powerful and easy to use than the Tween class of AS3.

Example:

createjs.Tween.get(this.yourInstance).to({ alpha: 0 }, 500, createjs.Ease.sineIn);

I hope it helps.

Regards,

JC

[Long Con]

That helps immensely.  I didn't realize it was Javascript... I was using Actionscript 2 last time I was programming, thought it was AS3.  lol

[JoãoCésar]

Awesome!

Don't worry. Many people don't know the difference mainly because there isn't too much official documentation for coding JavaScript in Animate...