Jump to content


Drawing Line ( Adjusting with other Tween )

Recommended Posts

Take a look at this example... 





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



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();

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

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

  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



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);
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();

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.drawCircle(0, 0, 30);
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.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.