Simple line extend animations

New Here ,
Dec 03, 2009 Dec 03, 2009

Copy link to clipboard

Copied

I am working on a pretty straight-forward motion graphic, that requires lines to extend in various directions via animation. I made one attempt, but feel like my way of doing this – making a small square, then motion tweening it to extend can not be the best way to do this – as I am manually extending each square to make each line, but am running into a lot of alignment / shifts.

Any help, or direction to help would be appreciated. thanks.

TOPICS
ActionScript

Views

483

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 03, 2009 Dec 03, 2009

Copy link to clipboard

Copied

you can use the drawing api to animate lines and curves.  check the graphic's class lineTo(), moveTo() and possibly curveTo() methods.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Dec 03, 2009 Dec 03, 2009

Copy link to clipboard

Copied

One way to do this would be to use a tweening engine like TweenLite - it has an onUpdate feature that will call a function every time the tween is updated... so you can animate some invisible object from point a to point b - and use the graphics api to draw a line to the objects current position. If you have TweenLite give this bit of code a try - it will draw a red line from 0,0 to 550,400 over the course of 5 seconds:

import gs.TweenLite;

var ob:Sprite = new Sprite();
ob.x = 0;
ob.y = 0;

TweenLite.to(ob, 5, {x:550, y:400, onUpdate:drawLine});

function drawLine(){
    graphics.clear();
    graphics.lineStyle(1, 0xFF0000);
    graphics.moveTo(0,0);
    graphics.lineTo(ob.x, ob.y);
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

LATEST

Use a series of shape tweens.

1. Create a short line or square in the first frame.

2. Copy and paste this frame to another frame.

3. Extend the line or shape in the end frame using the transform tool. To keep one end of the shape from moving, while using the transform tool move the white dot in the shape to the end at should not move. Now drag the opposite end of the shape.

4. Repeat this for each direction of the line

 

I was going crazy trying to use classic tweens. Shape tweens are a million times easier to use for this. I think masking would work but is more complicated and would take longer.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines