curveTo

1

Can I use curveTo on a line that already exists?

I want to make a line bend as animation…

thanks

2

No, curveTo is a drawing API function to dynamically draw a curved line, so it cannot be used on pre-existing lines.

3

then how can I make a line bend as animation?

4

You could take 2 points and put the control point in the middle. Then all you have to do is move that control point around. Something like this (I don’t have Flash so there might be mistakes):

start_x = 100 ;
start_y = 100 ;
end_x = 100 ;
end_y = 300 ;
control_x = (start_x+end_x) / 2 ;
control_y = (start_y+end_y) / 2 ;

this.onEnterFrame = function () {
this.clear () ;
this.lineStyle (0) ;
this.moveTo (start_x, start_y) ;
this.curveTo (control_x + 20 * Math.sin (a+=.01), control_y, end_x, end_y) ;
}

pom :slight_smile:

5

To explain that concept a little more based on what lost said and what pom has given, lines, once drawn, are there for good, like taking a pen on a piece of paper and drawing a line on that paper. Once there, you cant change it, you really cant even erase it (well you can but Im going to use a different metaphor). Its there and theres nothing you can do but add more lines - and these lines can be curves or straight lines.

Now, when making cartoons, cartoonists draw frames of animation and play each one of those frames in succession to give the appearance of movement. Similarly, in Flash, with the drawing methods, you too would need to use new pages to draw your lines on and play them in succession.

The advantage Flash drawin API gives is not needing to have pre-drawn those lines to animate them; you can do it all dynamically at run-time. Making a new ‘page’ with the drawing api is using the clear() command to wipe clean the drawing board to make way for new lines. Then you can begin drawing, through code, the line that needs to be drawn, slightly different from the one before it, to create the appearance of movement.

So the process follows a pattern of:
[list][]Clear the ‘page’ (call clear() for your movieclip)
[]Draw your lines based on certain x and y values (using lineTo and curveTo)
[]Adjust or move the x and y values so they can be drawn again differently on the next frame
[]Repeat[/list]

You can see poms example uses start_x, start_y, end_x and end_y for x and y values that are drawn to and change each frame. Each time the movieclip is cleared, the new lines are drawn to the new values and you have yourself, over time, an animating line!

btw pom, good example, especially without testing :wink: but its a little slow, the following correction for that last line will speed it up a bit:

start_x = 100 ;
start_y = 100 ;
end_x = 100 ;
end_y = 300 ;
control_x = (start_x+end_x) / 2 ;
control_y = (start_y+end_y) / 2 ;

this.onEnterFrame = function () {
        this.clear () ;
        this.lineStyle (0) ;
        this.moveTo (start_x, start_y) ;
        **this.curveTo (control_x + 100 * Math.sin (a+=.1), control_y, end_x, end_y);**
}
6

Hm…in the past, the clear function never really worked well for me, so I always ended up recreating the movieclip and then manipulate it. I guess i might’ve been using it incorrectly.

7

Good explanation Sen =)

8

Haha! That’s a great explanation! :beam:

9

So I know how to animate a line. Now I want to do the same thing but with a whole shape like a square.

Example:

You have a square.

If the mouse starts getting close to a side of the square, the side pokes in( the line and the color inside the square).

I know how to bend the line in, but how can I bend the color in too?!

Thanks