spycatcher2011

Tweening to a curved line

Recommended Posts

Gday

Been a way from flash for a while ,and tween max.

I have been asked to write an animation for airflow over a wing surface ,wondering if there is any way I can use a movie clip of a curved line and tween a path follower to it.Tried just adding a movie clip but came up with a warning .

Line is not straight but has many curves ,as I have to show turbulent flow on an obstructed airfoil as well.

Thanks for your help as always.

Regards

Peter

Share this post


Link to post
Share on other sites

Yeah, the MotionPath tools (linePath2D, CirclePath2D etc) don't support any means of using Flash drawing tools to draw the line which PathFollowers should follow.

 

You're best bet is to use the BezierPlugin, and create multiple objects that are tweened along the same Bezier coordinates.

 

This demo is written in JavaScript, but the GreenSock code would be virtually identical in ActionScript.

http://codepen.io/GreenSock/pen/kchfi

 

In simplest terms a TimelineLite is being created that has a whole bunch of Bezier tweens that start at slightly different times.

Share this post


Link to post
Share on other sites

Thanks Carl

Is there in way of having the path start of as a smooth curve then and as chaotic curve as the ice builds up on the wing which increases the turbulence over the wing.

As I do not know Java script which areas of the code would need alteration to work as an AS3 code in Flash.

All the best and a Happy Christmas to you.

Share this post


Link to post
Share on other sites

The AS3 code would look like this:

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;


TweenPlugin.activate([BezierPlugin]);


function getAnimation() {
//symbol in library with class Creature
var creature = new Creature();
creature.x = -50;
addChild(creature);
//bezier magic provided by GSAP BezierPlugin (included with TweenMax)
//http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html
var bezTween = new TweenMax(creature, 6, {
   bezier:{
     type:"soft", 
     values:[{x:150, y:300}, {x:300, y:-10}, {x:500, y:320}, {x:650, y:320}, {x:900, y:100}, {x:1100, y:500}],
 autoRotate:true
   }, 
ease:Linear.easeNone}
);


return bezTween;
}


//create a bunch of Bezier tweens and add them to a timeline
function buildTimeline() {
var tl = new TimelineMax({repeat:4,delay:0.2});
for (var i = 0; i< 30; i++) {
//start creature animation every 0.12 seconds
tl.add(getAnimation(), i * 0.17);
}
}




buildTimeline();

I've attached a Flash CS5 Fla and Swf (compile with your own GSAP classes)

 

As for making the motion more eratic as ice builds up on the wing, that sounds fairly complicated. You may have to have a Bezier tween for the curved motion and then have a separate tween with a RoughEase immediately afterwards. Or maybe your bezier data can contain enough points to make it exactly like you need.

 

 

 

bezierPathFollowers_CS5.zip

Share this post


Link to post
Share on other sites

Gday

Been a way from flash for a while ,and tween max.

I have been asked to write an animation for airflow over a wing surface ,wondering if there is any way I can use a movie clip of a curved line and tween a path follower to it.Tried just adding a movie clip but came up with a warning .

Line is not straight but has many curves ,as I have to show turbulent flow on an obstructed airfoil as well.

Thanks for your help as always.

Regards

Peter

Thanks Carl

That will help me a lot.

Best Regards

Peter

Share this post


Link to post
Share on other sites

Thanks Carl

That will help me a lot.

Best Regards

Peter

Dear Carl

I have tried to work with the code you gave me and modify  to suit my purposes .

The Timeline tween gives you a start and stop feature ,what I am really after is a continuous animation of wind flow over an airfoil surface not a start and stop animation 

more like the tween max to code with a path follower as bellow.Then I will add buttons to change the Bezier curve showing the effect of lift on a ice covered wing.

Thanks in advance

Peter

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

    my_btn.addEventListener(MouseEvent.MOUSE_DOWN, createpath);

    //kill_btn.addEventListener(MouseEvent.CLICK, kill);

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

Share this post


Link to post
Share on other sites

in order to have a continuous looping animation along a bezier curve, replace the code in my previous fla with the following:

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;


TweenPlugin.activate([BezierPlugin]);


var numItems:int = 30;
var offset:Number = 0.17;
var duration = 6;
var repeatDelay = ((numItems - 1) * 0.17) - 6;




function getAnimation() {
var creature = new Creature();
creature.x = -50;
addChild(creature);
//bezier magic provided by GSAP BezierPlugin (included with TweenMax)
//http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html
var bezTween = new TweenMax(creature, duration, {
   bezier:{
     type:"soft", 
     values:[{x:150, y:300}, {x:300, y:-10}, {x:500, y:320}, {x:650, y:320}, {x:900, y:100}, {x:1100, y:500}],
 autoRotate:true
   }, 
ease:Linear.easeNone, repeatDelay:repeatDelay, repeat:-1}
);


return bezTween;
}


//create a bunch of Bezier tweens and add them to a timeline
function buildTimeline() {
var tl = new TimelineMax({});
for (var i = 0; i< numItems; i++) {
tl.add(getAnimation(), i * offset);


}
}


buildTimeline();

This will create a seamless loop of all the "pathFollowers" animating endlessly with no gaps.

 

As for changing the bezier path coordinates while the items are moving along the path, that isn't something that is going to be easy to do. To be honest it would be quite complex to make it happen smoothly. 

Share this post


Link to post
Share on other sites

Thanks Carl

What I was thinking of doing was just creating a fade then start a new bezier pattern .

So function would go like this fade out a and stop first bezier follow path then reinstate next one ,each one a separate path with a separate movie clip attached to the path.

Do you think that would work.

Regards

Peter

.

Share this post


Link to post
Share on other sites

how to convert the AS3 specific codes in Flash HTML5 Script, what things I need to take care their as I am not able to animate the current example given above. Please help me on this.

Share this post


Link to post
Share on other sites

Hi Anol. 

 

Welcome to the GreenSock forums.

 

Our BezierPlugin works in pretty much an identical fashion with HTML5 / JS. Here is a demo:

 

Here is a video explaining how it works

 

 

 

If you want an object to follow a path that you draw in an SVG then you can use MorphSVGPlugins pathDataToBezier() method:

Video and info: https://greensock.com/docs/Plugins/MorphSVGPlugin/static.pathDataToBezier()

 

MorphSVGPlugin is a bonus plugin for Club GreenSock members: http://www.greensock.com/club 

 

If you have any follow up questions, please post them in our HTML5 forums so that the whole support team can help.

 

https://greensock.com/forums/forum/11-gsap/

 

This forum has been archived and we no longer support AS3. 

 

It helps to provide a demo so that the team can best assist you.

 

 

 

 

 

 

 

 

 

Share this post


Link to post
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.