Jump to content
Search Community

Tween Max differences AS3 to JS

Spycatcher2018 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Dear All I have been recently using AS3  in Adobe Animate to create engineering systems simulations  the main thing I use is Tweenmax to animate 

a path flow .As AS3 is on the way out I would like to the same type of simulations  with Tweenmax JS ,but I cant seem to find the 

same script there .

Here is my code in as3

As it is a fairly long code list I will show a small part with the type of actions I would like to achieve.

 

first i create a path

 

var hydbpath1:LinePath2D = new LinePath2D([
new Point(683.45,478.45),
new Point(703.45,478.45),
new Point(703.45,120),
new Point(790,120)
]);
then I create an array and populate it

var hydbp1:Array = [];
for (var n:int = 0; n < 12; n++)
{
   
    hydbp1.push(createCircle(trvmc,5,0x2310E9));

    

};

Then I distribute the array to the path

hydbpath1.distribute(hydbp1, 0, 1, true);

Then I add a tween

 

var myTweenhydb1:TweenMax = new TweenMax(hydbpath1,10,{progress:2,repeat:-1,ease:Linear.easeNone});

I change the visibility of the path

hyd1path1.visible = false;

 

Add it inside a empty movie movie clip

 

Object(this).trvmc.addChild(hyd2path1);
hydbpath1.visible = false; 

 

add a button

 

start_btn.addEventListener(MouseEvent.MOUSE_DOWN,begin);
function begin(e:MouseEvent){
    trvmc.visible=true

myTweenhydb1.play();

 

};

create my circle

function createCircle(myCircle:MovieClip,d:Number,color:uint=0xFF0000):Shape
{
    var circle:Shape = new Shape();// The instance name circle is created 
    circle.graphics.beginFill(color, 1);
      circle.graphics.lineStyle(2, 0x000000);
       circle.graphics.drawCircle(0, -0,d);
       circle.graphics.endFill();
     myCircle.addChild(circle);
    

    return circle;
}
I can change the visibility of the circle path follower buy changing the visibility of the array itself

 

for each (var obj9:Object in hyd1p1)
{
    obj9.visible = true;
}

 

I have been searching the docs ,can find some things like create the path but other things do not seem to be available or are performed differently.

Very new to JS trying to migrate any help appreciated.

Thank you for your time peter

 

Link to comment
Share on other sites

Hi @Spycatcher2018

 

Check out the docs. The API for the ActionScript and JavaScript version of TweenMax is mostly the same. Note that JS doesn't have types unless you're using TypeScript.

 

The big difference is that there are several ways to render stuff to the screen, HTML, SVG, and canvas. HTML is good for text and input, like buttons. SVG and canvas are good for graphics, and each medium has pros and cons. SVG is easier to work with, but slower than canvas. Canvas is fast, but can be JS heavy because it uses a lot of boilerplate code.

 

Note that you can layer stuff on top of each other to create a composite, so you're not limited to one medium, but your GSAP code will be slightly different depending on what medium you are animating. 

 

Here's a good tutorial for SVG.

http://tutorials.jenkov.com/svg/index.html

 

And canvas.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

 

I don't think there's much of a need to use a library for SVG, but there are several canvas libraries that might make your transition easier. PixiJS and CreateJS have an API that is similar to flash. I think CreateJS is the default canvas library used by Adobe's Animate CC.

http://www.pixijs.com/

https://www.createjs.com/easeljs

 

Some other canvas libraries that focus on vector graphics.

https://p5js.org/

http://paperjs.org/

 

 

  • Like 4
Link to comment
Share on other sites

1 hour ago, Spycatcher2018 said:

Some i see there but cant find the distribute to path function seems only in AS3 not listed in JS docs.

Can this be done in in JS GASP ?

 

For that you can use the BezierPlugin and then set the progress of the tween. Note that the BezierPlugin comes with TweenMax so you don't have to load it separately.

 

A cubic Bezier is probably the most common type of motion path. There are 2 control points (P1, P2) in between each set of anchor points (P0, P3).

 

Bezier_curve.svg

 

 

 

 

Lets say you wanted to move something using these points.

 

var points = [
  { x: 100, y: 100 },
  { x: 400, y: 300 },
];

 

 

You would need to add the 2 control points, which should be placed at 1/3 and 2/3 the distance between the points.

 

var dx = 400 - 100;
var dy = 300 - 200;

var points = [
 { x: 100, y: 200 },
 { x: 100 + (dx * 1/3), y: 200 + (dy * 1/3) },
 { x: 100 + (dx * 2/3), y: 200 + (dy * 2/3) },
 { x: 400, y: 300 },
];

// Tween an object
TweenMax.to(someObject, 10, {
  bezier: {
    values: points,
    type: "cubic"
  },
  ease: Linear.easeNone,
  repeat: -1
});

 

 

For Club GreenSock members, there is the MorphSVGPlugin which could simplify that by using SVG path data.

 

var points = MorphSVGPlugin.pathDataToBezier("M100,200 L400,300");

 

 

Give me a few, and I'll throw an SVG demo together for you.

  • Like 4
Link to comment
Share on other sites

Thank you very much for your help ,much more than i expected.

With respect to the morph svg plugin this would then make the code a lot simpler ,how many steps would the code be reduced to .

Would it then be similar to the AS3 script ?

I have many paths need to animate ,looking at away to make the the easy to manipulate as some paths need to be turned off and others on inside the movie clip (AS3 allows this functionally)  ,this is dependent on the operators selection.

 

Thank you your time

BRG Peter

Link to comment
Share on other sites

5 hours ago, Spycatcher2018 said:

With respect to the morph svg plugin this would then make the code a lot simpler ,how many steps would the code be reduced to .

 

If you're going the SVG route, then you can move a lot of code into SVG markup. You can also use software like Adobe Illustrator or Inkscape to generate SVGs.

 

See the Pen zJwXrg by osublake (@osublake) on CodePen

 

 

 

5 hours ago, Spycatcher2018 said:

Would it then be similar to the AS3 script ?

I have many paths need to animate ,looking at away to make the the easy to manipulate as some paths need to be turned off and others on inside the movie clip (AS3 allows this functionally)  ,this is dependent on the operators selection.

 

 

JavaScript doesn't have movie clips and a lot of other stuff like AS3 does. Well, some canvas libraries do, but if you want something similar to a movie clip with SVG, you'll probably need to code up your own version. Maybe something like this. You can set the visibility of the path, and start and stop the animation.

 

See the Pen wEdRYY by osublake (@osublake) on CodePen

 

 

 

  • Like 6
Link to comment
Share on other sites

Just to clarify some things based on the original question.

 

The GSAP API syntax for AS3 and JavaScript is nearly identical for all the core tools from simple TweenLite tweens to more complex TimelineMax sequences.

 

However, when using HTML5 canvas in Animate you need to use the Easel.js canvas library and not AS3. Easel.js is very closely tied to AS3 in that it offers an API for DisplayObjects (like MovieClips) a familiar drawing API, similar mouse events and more.

 

Check out the docs here: https://www.createjs.com/docs/easeljs/modules/EaselJS.html

 

The JavaScript version of GSAP plays very nicely with Easel.

 

Its worth noting though that the AS3 GreenSock tools such as LinePath2D and other "path follower" tools do not exist in the JS version of GSAP.

 

Replicating what Blake has already done for you with SVG is not going to be a simple task if you need to only use Animate and the html5 canvas tools available. 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...