Jump to content
Search Community

constant tween on a path

spycatcher2011 test
Moderator Tag

Recommended Posts

Hello all first time here .

This Tweenmax/Tweenlite seems to what I have been searching for for a long time.

I have had a problem of how to simulate a constant flow of particles on a open ended path such as a circuit path or a simulation of liquid or air passing through pipes.

I have read the documentation regarding multiple tweening items on a path but I cant seem to find out how to make this flow constant,with no slowing down or stopping.

The way I have been doing it in the past is using a animation on the time line then masking the movie clip.

This okay for a small project but becomes difficult when many

branches of flow are involved ,such as simulating an electrical schematic,or air flow through an air conditioning system.

Thanks all for your time

Best regards

Peter

Link to comment
Share on other sites

can you post an example of one of your past projects so that we can better visualize what you mean?

 

for constant speed be sure to set your tween's ease property to ease:Linear.easeNone

 

to have a tween repeat you can use TweenMax with a repeat property as well.

 

Starting with motionpaths is a bit advanced. have you experiemented with the examples?

 

for instance this code from the documentation seems to do exactly what you describe: http://www.greensock.com/as/docs/tween/ ... ath2D.html

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.motionPaths.*;
import flash.geom.Point;

//create a LinePath2D with 5 Points
var path:LinePath2D = new LinePath2D([new Point(0, 0), 
          new Point(100, 100), 
          new Point(350, 150),
          new Point(50, 200),
          new Point(550, 400)]);

//add it to the display list so we can see it (you can skip this if you prefer)
addChild(path);

//create an array containing 30 blue squares
var boxes:Array = [];
for (var i:int = 0; i  boxes.push(createSquare(10, 0x0000FF));
}

//distribute the blue squares evenly across the entire path and set them to autoRotate
path.distribute(boxes, 0, 1, true);

//put a red square exactly halfway through the 2nd segment
path.addFollower(createSquare(10, 0xFF0000), path.getSegmentProgress(2, 0.5));

//tween all of the squares through the path once (wrapping when they reach the end)
TweenMax.to(path, 20, {progress:1});

//while the squares are animating through the path, tween the path's position and rotation too!
//TweenMax.to(path, 3, {rotation:180, x:550, y:400, ease:Back.easeOut, delay:3});

//method for creating squares
function createSquare(size:Number, color:uint=0xFF0000):Shape {
var s:Shape = new Shape();
s.graphics.beginFill(color, 1);
s.graphics.drawRect(-size / 2, -size / 2, size, size);
s.graphics.endFill();
this.addChild(s);
return s;
}

 

just paste that into a project that has access to the greensock classes.

Link to comment
Share on other sites

Thank you for your help

That is the code I have been playing with ,if the time can be set to infinity it would be okay.

This is the part code I am struggling with

//tween all of the squares through the path once (wrapping when they reach the end)

TweenMax.to(path, 20, {progress:1});

can i change the "tween all the squares through the path once (wrapping when they reach the end)" to

"tween all the squares through the path indefinitely (wrapping when they reach the end)

so achieving a constant motion of squares.

Best Regards

Peter

Link to comment
Share on other sites

Dear all

I have been looking at the reference data I have found how to stop the tween ,but not remove the display items .

I have tried remove child method but this does not seem to work as there is no real Movie clip to remove.

Also removing the path only does that ,and will not remove the squares that are on the path.

any help appreciated.

code for stopping tween

 

kill_btn.addEventListener(MouseEvent.CLICK, kill)

function kill(e:MouseEvent):void{

TweenMax.killTweensOf(path)

removeChild(path);

}

 

Best Regards

Peter

Link to comment
Share on other sites

Dear All please help

I have been working on this for a few days and have tried every possible combination and I still cant seem to get it to work.

I have come up with a simpler code example .

I have tried remove follower ,remove Child and remove child at none seem to work .

I have also tried to remove with a loop but this hasn't worked either ,please help I am desperate for a solution.

also when apply the trace for the number of children only shows 1,I thought it should say 6.

 

Code below

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.motionPaths.*;

var boarder:mcBoarder;//movie clip from library

var i:Number

var path2:LinePath2D = new LinePath2D([new Point(50, 100),

new Point(50, 200),

new Point(100, 300)]);

addChild (path2);

 

 

my_btn.addEventListener(MouseEvent.MOUSE_DOWN,createpath);//(this works ok)

 

kill_btn.addEventListener(MouseEvent.CLICK, kill) //(kills tween but does not remove boarder instances. )

 

function createpath(event:MouseEvent):void{

 

for(var i:Number = 0; i<6; i++){

boarder=new mcBoarder();

//trace(boarder.numChildren);

path2.addFollower(boarder, i / 6, true);

addChild(boarder);

trace(boarder);

}

}

TweenMax.to(path2, 5, {progress:1, repeat:-1, ease:Linear.easeNone});

 

function kill(e:MouseEvent):void{

TweenMax.killTweensOf(path2)

 

for(var k:Number=0;k<6;k++){

boarder.removeChildAt(k);

}

 

}

Thank you all for your time and appreciation

Peter

Link to comment
Share on other sites

You were just referencing things incorrectly. You weren't adding the children to "boarder" but you were trying to remove them from there.

 

There are a lot of ways you could do this, but one of them is to just get the path's followers and loop through them and remove their targets:

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.motionPaths.*;
var boarder:mcBoarder;//movie clip from library
var path2:LinePath2D = new LinePath2D([new Point(50, 100), new Point(50, 200), new Point(100, 300)]);
addChild(path2);


my_btn.addEventListener(MouseEvent.MOUSE_DOWN, createpath);

kill_btn.addEventListener(MouseEvent.CLICK, kill);

function createpath(event:MouseEvent):void {
for (var i:Number = 0; i		boarder=new mcBoarder();
	path2.addFollower(boarder, i / 6, true);
	addChild(boarder);
	trace(boarder);
}
}
TweenMax.to(path2, 5, {progress:1, repeat:-1, ease:Linear.easeNone});

function kill(e:MouseEvent):void {
TweenMax.killTweensOf(path2);
var followers:Array = path2.followers;
for (var i:Number=0; i 		removeChild(followers[i].target);
}
}

Link to comment
Share on other sites

Thanks For your help

Also if I can indulge is there a way of masking the tweened path directly without having to put in a movie clip.

The animations I do have many crossing paths so to be able to show these crossings would be a real bonus.

 

Thanks again for you patience with me

I have been using AS2 for a while mainly using functions and some masking to set up the animations,this will take me another step forward.

All the best

Peter

Link to comment
Share on other sites

Also if I can indulge is there a way of masking the tweened path directly without having to put in a movie clip.

The animations I do have many crossing paths so to be able to show these crossings would be a real bonus.

I read your question 3 times and still can't understand what you're asking (probably my fault). You don't have to put the MotionPath into a MovieClip. You can mask it just like anything else if you want. It's just a Shape object (kinda like a lightweight version of a MovieClip). You can use one Shape/Sprite/MovieClip to mask another by setting its "mask" property. I hope something in there helped. Again, I'm not quite sure what you're looking for exactly so you might need to rephrase your question or post an example FLA if you need more help.

Link to comment
Share on other sites

Dear All thanks for your help

I have attached a zip file of what i am trying to accomplish

The fla consists of two path crossing over one another ,what i would like to do is have the backs paths alpha be bought to 0 as the paths cross

so it looks as if they are passing over each other.

I tried to change the alpha of the path at that particular point with an if statement if path .x>number

but it ended up changing the whole paths alpha.

any help appreciated.

Best Regards Peter

Link to comment
Share on other sites

I really don't understand your recent question at all. I assume there are some innocent typos.

 

after reading greensock's response I will go ahead and assume you want the horizontal (red) path to go BELOW the blue gradient.

 

as greensock mentioned it all has to do with stacking order. you need to make the blue and red gradients into movie clips so that you can stack paths above and below them as you need.

 

I'm assuming the order you want is:

 

redBg

red path

red path followers

 

blue bg

blue path

blue path followers

 

------

 

the code looks like this:

 

    import com.greensock.*;
   import com.greensock.easing.*;
   import com.greensock.motionPaths.*;

   var boarder:mcBoarder;
var boarder1:myBoarder;//movie clip from library

//blue bg
var path2:LinePath2D = new LinePath2D([new Point(200, 100), new Point(200, 300)]);



//red bg	
var path3:LinePath2D = new LinePath2D([new Point(100, 200), new Point(400, 200)]);


   my_btn.addEventListener(MouseEvent.MOUSE_DOWN, createpath);



   function createpath(event:MouseEvent):void {

addChild(redBg);	
addChild(path3);
	for (var k:Number = 0; k          boarder1=new myBoarder();
         path3.addFollower(boarder1, k / 6, true);
         addChild(boarder1);
         trace(boarder1);
      }


addChild(blueBg); 
addChild(path2);
      for (var i:Number = 0; i          boarder=new mcBoarder();
         path2.addFollower(boarder, i / 6, true);
          addChild(boarder);
         trace(boarder);
      }






   }


   TweenMax.to(path2, 5, {progress:1, repeat:-1, ease:Linear.easeNone});
TweenMax.to(path3, 5, {progress:1, repeat:-1, ease:Linear.easeNone});

 

 

 

zipped cs4 fla attached

Link to comment
Share on other sites

I believe spycatcher need something like I've done in the attached file. The boxes and the path should be added to a MovieClip and than you can apply masks and color effects to this movie.

I have a question for greensock: It is possible to use a complex path created using the pencil tool not just a path defined programatically?

Thank you very much!

Link to comment
Share on other sites

Thanks all for your help ,it is really appreciated.

 

Sorry but I was unable to open the file Opamint so kindly attached in flash CS3 ,or run the file in Flash CS4 ,as I kept on getting errors.

(I converted the file to CS3 for my work computer)

CS3 Error 1061: Call to a possibly undefined method distribute through a reference with static type com.greensock.motionPaths:LinePath2D.

 

(Before any one asks I do have the com folder in the same folder as the fla.)

 

I have attached a diagram of the Aircraft system I am working on at the moment.

As you can see ,the air flow pipes intersect at many locations,I do not only wont to change the level of the

tween path followers ,but also as the paths followers cross .

My aim is to make the underneath paths followers alpha zero then return the alpha back to 1as it continues on its way.

The picture shows that there are many paths crossing each other ,if I leave all the path followers visible as they cross it not only looks untidy

but makes the circuit path hard to follow.

 

This can also be seen as the engine bleed air passes through the heat exchanger and out .

To have the bleed air path flow stay at the same alpha as it passes over the heat exchanger ,does not really describe the actual path flow.

Changing the alpha as it passes through the heat exchanger gives the impression that the air flow goes through not on top of the heat exchanger.

 

Opamint says you can do it with mask which I totally agree with,but is there a way to make the lower paths alpha go to zero for specific section

where the paths cross ,like if path followers are between x 1 and x 2 make alpha 0 ,or if less than x 1 or greater than x 2 make path followers Alpha 1.

 

I apologize that I have not made myself clearer in the past , my background is in the Avionics systems on aircraft,

not with program language ,also as I live in Asia I have had to teach myself flash and am now trying to come to grip with AS3 after learning AS2.

 

Best Regards

Peter

Link to comment
Share on other sites

your greensock files are quite old. opamint is using more recent ones. that is why your swf wouldn't compile. you can download the latest greensock files from http://www.greensock.com/tweenlite

 

it seems your project is much more complex than my initial misunderstanding. I don't even know that it is possible to adjust the alpha of a section of a movie clip.

 

there may be someone more experienced around here that can help you further.

Link to comment
Share on other sites

Here is a CS3 version with two tubes. You have to use the latest greensock classes inside the com folder.

You don't need to make the tweens transparent. A mask can be used instead.

 

There is someone who knows how to use a path generated with the pencil tool not programmatically like in greensock example?

 

Thank you!

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