Jump to content
GreenSock

Applauz

Drawing Line ( Adjusting with other Tween )

Recommended Posts

Take a look at this example... 

 

http://www.snorkl.tv/2011/04/tweenlite-meets-flash-drawing-api-for-animated-line-drawing-fun/

 

 

The advanced option at the bottom in yellow.

 

I'm looking to do something very similar except instead of drawing the lines.. I want the lines to already be present and then adjust when the circles  y value changes.

 

Any ideas how I can keep the line attached to the circles when the circles perform their Tween animation ?

Link to comment
Share on other sites

Hi

 

What do you mean by adjusting the lines when the y value changes?

 

What type of adjustment?

Link to comment
Share on other sites

to simpy draw the line before the animation plays use this code

 

import com.greensock.*;
import flash.events.MouseEvent;


//create line
var line:Shape = new Shape();
addChild(line);


//position mc at first point
mc.x = p1.x;
mc.y = p1.y;


var tl:TimelineMax = new TimelineMax({paused:true});


tl.appendMultiple([
  TweenLite.to(mc, 1, {x:p2.x, y:p2.y}),
  TweenLite.to(mc, 1, {x:p3.x, y:p3.y}),
  TweenLite.to(mc, 1, {x:p4.x, y:p4.y})
  ], 0, TweenAlign.SEQUENCE);








play_btn.addEventListener(MouseEvent.CLICK, playTl);


function playTl(e:MouseEvent):void
{


tl.restart();


}


function drawPath() {
line.graphics.lineStyle(5, 0xFFFF00, .5);
line.graphics.moveTo(p1.x, p1.y);
    line.graphics.lineTo(p1.x, p1.y);
line.graphics.lineTo(p2.x, p2.y);
line.graphics.lineTo(p3.x, p3.y);
line.graphics.lineTo(p4.x, p4.y);
}
drawPath();
 
the drawPath method simply uses the x and y 
Link to comment
Share on other sites

  • 2 weeks later...

Very close but not quite what I was talking about..... 

 

In your example .. the movie clip follows along the path of the line.

 

I'm talking more about making a graph, the line connects to each movie clip...   when the Y value of any of the movie clips change.. the line always stays connected to them.

 

Hard to explain verbally... Take a look at http://www.chartjs.org   ..  The example under "Simple and Flexible" is exactly what I want to achieve.

Link to comment
Share on other sites

oh ok, from the examples above you can see how to draw a line between 2 points.

 

All you need to do is constantly (onUpdate or ENTER_FRAME) re-draw the line and pass in the x/y values of all your movie clips.

 

Just paste this into a blank fla with the GreenSock classes close by

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.display.Sprite;
import com.greensock.motionPaths.CirclePath2D;
import flash.display.Shape;


var circle1:Sprite = circle();
var circle2:Sprite = circle();
var circle3:Sprite = circle();


var line:Shape = new Shape();
addChild(line);


circle1.x = circle1.y = 50;
circle2.x = circle2.y = 200;
circle3.x = circle3.y = 400;






function circle():Sprite {
var mySprite:Sprite = new Sprite(); 
mySprite.graphics.beginFill(0xFFCC00); 
mySprite.graphics.drawCircle(0, 0, 30);
this.addChild(mySprite);
return mySprite;
}




TweenMax.to(circle1, 1, {y:200, repeat:-1, yoyo:true});
TweenMax.to(circle2, 2, {y:20, onUpdate:drawLine, repeat:-1, yoyo:true});
TweenMax.to(circle3, 3, {y:100, repeat:-1, yoyo:true});




function drawLine() {
  line.graphics.clear();
  line.graphics.lineStyle(5, 0xFF0000, .5);
  line.graphics.moveTo(circle1.x, circle1.y);
  line.graphics.lineTo(circle2.x, circle2.y);
  line.graphics.lineTo(circle3.x, circle3.y);
}
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.
×