3 Replies Latest reply on Mar 21, 2010 5:53 PM by Ned Murphy

    How do I make a curvy line "draw itself"?


      I have on stage a drawing of a perfume bottle. I want to have a line of "fragrance" waft up and out of the bottle in curly-cues. I have already made made a guide line, but I don't know how to use tweening to make the line "draw" itself over 70 frames or so starting from nothing until it's completely drawn. I want to keep the line's width the same throughout, like say 2pts. At this point I'm not even trying to make the line sway at all, but of course that would be an additional nice touch...


      Anyone have a clue? I'm pretty new at Flash. I have CS3


      Thanks in advance for any help!


      Mike Storer, an independent perfumer in Los Angeles



        • 1. Re: How do I make a curvy line "draw itself"?
          Ned Murphy Adobe Community Professional & MVP

          Here's two possible timeline-based approaches but they yield a static result (no sway).  The first may be the faster but will still take a bit of time.


          1) Divide the drawn lines into segments and place them on different layers.  For each layer add a layer above it to apply a mask for that segment.  Gradually tween the masks over the pieces in sequence to gradually reveal them.  The segment sizes would be selected based on figuring how much one mask might reasonably reveal with one direction of motion as well as the closness of lines that would not be revealed simultaneously.


          2) Frame by frame - start with the fully drawn lines in frame 1 of a movieclip symbol.  Copy frame 1 to frame 2 and remove a small portion of the line(s).  Copy frame 2 to frame 3, remove a little more... continue along frame by frame until there's nothing left.  Then select all the frames, right click the selection and choose Reverse frames from the menu that appears.


          To get the sway, what you could try is to wait until it's all revealed and replace the lines with a movieclip containing them converted to fills that uses slight shape tweens to make the lines move a little.  First copy the lines to three different keyframes separated by some distance.  Then convert the lines in the first and last frames to fills.  Then take the middle set of lines and modify their curves a bit and then converting that to a fill as well.  Then just apply shape tweens between the frames and in the last frame use a gotoAndPlay(2) command.


          Someone else may come along with an actionscript approach to this, so you may want to wait and see.  Since I don't have one to offer I can only guess you might have to sacrifice the shapes of the lines with an AS approach.

          • 2. Re: How do I make a curvy line "draw itself"?
            mykstor Level 1

            Thank you very much, Ned! It's super that strangers chip in to help strangers... It's much appreciated.

            I'll definitely pass something I can do forward. (I can design fragrances... lol...)


            I'm thinking of trying your idea using dots like a string of tiny pearls instead of line segments. Perhaps I could just keep adding incidents of the same tiny disc-shaped object frame by frame. I like your idea to use "reverse frame order." I would have hunted forever for that feature.. or else done the reversal one frame at a time.


            In any case, I get the idea that there's no easy simple way to do it other than frame by frame manipulation.


            Unless someone knows a set of Javascript functions that could control  the "auto" drawing.


            For the sway, I think I should be able to make a movie clip that gently nudges the entire guideline itself just a little, like seaweed in the current...

            It'll only take me a few weeks to figure how... LOL..


            I'm brand new at using Flash (I'm still struggling to make sharp-looking fade-in/fade-out buttons)..

            I didn't realize before how important Javascript is to it. It seems like if one is a wiz at both Flash and Javascript, he/she can do just about anything.


            Alas, I'm a beginner at both, and stuff doesn't seem to stick so fast now that I'm over 60...  LOL.


            michael storer, los angeles



            • 3. Re: How do I make a curvy line "draw itself"?
              Ned Murphy Adobe Community Professional & MVP

              You're welocme.  The best advice I can offer is to tell you to play with it and try things...  it won't break.  But check back because there's folks here that know more than me and they may have a solution that actually answers the title question.