A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Animation - Drawing a Bezier Curve

  1. #1
    Junior Member
    Join Date
    Aug 2005
    Posts
    2

    Animation - Drawing a Bezier Curve

    I have a logo that has a number of curves that outline it, so I thought I would make a simple animation that draws the outline of the logo. I created the logo in Adobe Illustrator, and then imported it into Flash MX. I have the logo, as well as an outline of the logo to use possibly as a motion guide.

    My question is, how do I get a bezier curve to draw out in the animation? With a line, I simply resize it to make the line look like it's growing. But with the curves, I want something different. The best way I could explain it would be: I want the curve to gradually appear along the motion guide, as though a pen were virtually drawing the logo out on the screen.

    Does that make sense? I can't seem to find any tutorials explaining this, though I have found many related to motion guides and shape tweening. Any ideas?

    Thanks!

  2. #2
    Banned NTD's Avatar
    Join Date
    Feb 2004
    Posts
    3,438
    Hi,

    You can use the drawing api with an enterframe event and move the "pen" through a series of precalculated points to simulate drawing.This can be tedious and time consuming calculating the travel path for the line or curve(at least for me). It sounds like what you want is probably easier achieved with movable masks. Create a curved line and play around with sliding a mask on and off to reveal the line.

  3. #3
    Junior Member
    Join Date
    Aug 2005
    Posts
    27
    An animated mask would be the easiest way to go. See this simple example:
    Attached Files Attached Files

  4. #4
    Junior Member
    Join Date
    Aug 2005
    Posts
    2

    Thanks

    Thank you so much for the help. An animated mask is what I will do!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center