How to Tween with Actionscript 3 in Animate?

Forum|Forum|4 years ago
November 5, 2021
2 replies
885 views

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.

This topic has been closed for replies.

N

Nick Gioia

Community Expert

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

L

Long ConAuthor

Known Participant

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ésar17023019

Community Expert

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

JoãoCésar17023019

Community Expert

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