Jump to content
GreenSock

Applauz

BezierThrough - Best Option? Prevent Upside Down?

Recommended Posts

So I've been playing with the bezierThrough plugin. It's awesome.

 

I'm trying to make a fish animation. I need the fish to constantly be moving to random coordinates. It's working. However sometimes the fish goes upside down. Is there a way to prevent this from happening ?

 

Appreciate any answers. Thanks.

Link to comment
Share on other sites

not directly through the BezierPlugin. I'm assuming you are using autoRotate:true which means the BezierPlugin controls the x,y and rotation of the fish.

You might put the fish inside a parent_mc, tween the parent_mc and then write some code senses when the parent_mc is upside down and then you can counter-rotate the child fish. My guess is that it would be fairly difficult to do it in a way that looks good.

Link to comment
Share on other sites

Here is what I am using 

 

TweenMax.to(fish1, 20,{bezierThrough:{type:"cubic", values:[{x:-400, y:700}, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight}, {x:0, y:Math.random()*stage.stageHeight},{x:500, y:Math.random()*stage.stageHeight}, {x:Math.cos(angle) * radius + xCenter, y:Math.sin(angle) * radius + yCenter},{x:1200, y:Math.random()*stage.stageHeight},], autoRotate:["x","y","rotation",false]}, ease:Linear.easeNone,onComplete:tweenFish1});

 

It's weird...  everything works fine when the fish is moving to the right.... when it gets to the end of the animation is when it flips upside down.  So it happens when the onComplete is fired.

 

Is there a better way to keep the fish swimming randomly without having to do a hard onComplete reset the animation ?

Link to comment
Share on other sites

i guess I misunderstood what you were doing. please zip a super simple fla that contains just the code and assets necessary to replicate the problem and I will take a look. you can attach a zip to this post using the "more reply options" button.

Link to comment
Share on other sites

I've attached my file..  with everything stripped out. You will have to add your own   com folder with greensock plugins.

 

When you compile you will see the fish swims from left to right .. but when it finishes and starts to go back to the left.. its upside down. 

Sample.fla.zip

Link to comment
Share on other sites

I've noticed also .. when I use onComplete..  it fires the event at the right time... however.. is there a way for me to fire an event when it resets itself back to the left hand side of the screen ?

 

Basically .. my bezier params tell the object to move from the left to the right of the screen and then calls the same function again. onComplete fires when it reaches the right side of the screen... but then an animation occurs to send the object back to the left of the screen. How can I know when that animation completed ?

Link to comment
Share on other sites

I think the best way to solve the issue of the fish swimming back to the left in an awkward fashion is to set the position to the first values you are using in your bezierTween

 

function tweenFish1():void {
 
trace("The scaleY of fish 1 = " + fish1.scaleY);
//fish1.scaleY = -1;
var angle:Number = Math.random() * Math.PI * 2; //random angle in radians
var radius:Number = Math.random() * poolRadius;
 
//new
 
fish1.x = -600;
fish1.y = 700 ;
 
//end new
 
//TweenLite.to(fish1, 5, {x:Math.cos(angle) * radius + xCenter, y:Math.sin(angle) * radius + yCenter, ease:Quad.easeInOut, autoRotate:true, onComplete:tweenFish});
TweenMax.to(fish1, 5,{bezierThrough:{type:"thru", values:[{x:-600, y:700}, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight}, {x:0, y:Math.random()*stage.stageHeight},{x:500, y:Math.random()*stage.stageHeight}, {x:Math.cos(angle) * radius + xCenter, y:Math.sin(angle) * radius + yCenter},{x:1200, y:Math.random()*stage.stageHeight}], autoRotate:["x","y","rotation",false]}, ease:Linear.easeNone, onComplete:tweenFish1});
 
}
 
When you do a thru tween it has to tween the fish FROM wherever the fish is thru the first point in your array of points. 
There isn't anything in the api that will fire an event when the object reaches the first point in the array. 
Link to comment
Share on other sites

The other thing I thought of that might work.. is onUpdate.. check if the fish has left the right side or left side of the screen and fix the position. 

 

function checkFish1Position():void{
 
if(fish1.x >= 1200){
fish1.scaleY = -1;
}
if(fish1.x <= -100){
fish1.scaleY = 1;
}
}
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.
×