• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to Tween with Actionscript 3 in Animate?

Community Beginner ,
Nov 04, 2021 Nov 04, 2021

Copy link to clipboard

Copied

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.

Views

221

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

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

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

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

Screen Shot 2021-11-05 at 8.26.43 AM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 06, 2021 Nov 06, 2021

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

LATEST

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...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines