[Marching ants in greensock]

Dear All

As I am part of the creative coding club, i noticed Carl has posted a "marching ants" tutorial with SVG paths

is there a way of doing this in Adobe Animate CC HTML 5 with GreenSock ?

Thanks for your time

Peter

 

[Adobe animate and GASP3]

Thank you for your reply 

I cant seem to find anywhere how to load the guide path into Animate and how to populate the path with multiple 

targets to produce a stream., this was relatively easy  in AS3 with the greensock plugin . I tried to copy some guide path code but it did not run properly in the Browser via animate, as only the text from the animation showed in browser . I texted Carl about my problem years ago, but at that time there was no motion path plugin for JavaScript in animate, I am excited it is now available for use in Animate, cant wait to use the plugin.

Best Regards

Spycatcher

 

 

[Adobe animate and GASP3]

Dear All

Thank you for your time, this is not my first time here however my last post was many years ago.

I would like to use the GSAP  "motion path " plugin, in "Adobe Animate" ,to  animate a series of shapes flowing along a 

line, the concept, is to simulate a liquid or air flowing through a pipe. I have used a similar GSAP plugin before in Flash, using AS3 script

but since the introduction of HTML 5 and the deletion of AS3 in most websites it is no longer viable.

Will the "motion path" "plug in" work in HTML 5 Animate and if so how will the "plug in" be loaded into Animate.

 

Best regards

Peter

 

 

[Tween Max differences AS3 to JS]

Thank you very much for clearing that up and thank you all for your assistance.

I did not realise those tools where not avaailable in the JS version .

Best Regards

Peter

[Tween Max differences AS3 to JS]

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

[Tween Max differences AS3 to JS]

Thank you for your reply 

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 ?

Regards

Peter

[Tween Max differences AS3 to JS]

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

 

[Setting visibility of tween max]

Dear All thank you for your time ,I am working on a path flow project using tween max .

Is there a way to set the visibility of all the path followers to zero on initial start ,as in "TweenMax.pauseAll();" like TweeMax.visibility=0;

and then convert the visibility of the tween max path follower to 1 visibility using a button.

Been searching for this cant seem to find anything.

I can do it by making the main movie clip that all the tweens reside in visibility=false ,last time i used mask to cover the 

paths just wanted a more eloquent way of doing it.

Thank you 

Spycatcher2018