6 Replies Latest reply on Nov 9, 2009 5:31 PM by zeroskillz

    Simulate drawing a line or growth




      With several flashes I'm trying to create, I find that I need to know how to depict a line being drawn or a plant/vine growing (same concept right). Obviously frame-by-frame animation can be used, but that's quite tedious. There must be some other, more productive way to pull it off.


      Example of the vine: http://www.theunseenvideo.com/Flashtests/swirls.html


      I've tried shape tweens with shape hints but it didn't render very well at all.


      Any help is truly appreciated, thank you

        • 1. Re: Simulate drawing a line or growth
          Ned Murphy Adobe Community Professional & MVP

          One approach is to use a mask to gradually reveal the line.  Or similarly, use backgroundcolored graphics to cover the drawing and gradually move them away.  Another approach, which may be along the lines of what was done in the sample you point to would be to gradually scale objects in some pattern...  for that example you may want to see if you can contact the originators to get a better idea of what they did.

          • 2. Re: Simulate drawing a line or growth
            zeroskillz Level 3

            Here's a a little to plant a seed...

            I got intrigued, now the rest of my day will be blown playing...

            Just copy into the actions of a new as3 movie.

            Dig more into the drawing api for more.



            //CODE START
            //setting the line starting position to the middle of the stage
            var ox:int = stage.stageWidth/2;
            var oy:int = stage.stageHeight/2;


            // setting references for x/y translations
            var tx:int = ox;
            var ty:int = oy;


            // setup a line to draw
            var drawLine:Sprite = new Sprite();


            //add a listener to fire at your framerate
            addEventListener(Event.ENTER_FRAME, startDrawing);


            //draw a goofy red line
            function startDrawing(event:Event):void{
                //set high and low vals for the x/y change
                var high = 5;
                var low = -5;
                // make random numbers between the high and low values
                var goX = Math.floor(Math.random() * (1+high-low)) + low;
                var goY = Math.floor(Math.random() * (1+high-low)) + low;
                // add the new numbers to the old unmbers
                tx = tx+goX;
                ty = ty+goY;
                //draw to the new coords -- I set the line width to the goX random number for fun
                drawLine.graphics.lineStyle(goX, 0xff0000)
            //CODE END 


            HTH, and have fun!


            • 3. Re: Simulate drawing a line or growth

              Key Frame Masking




              Check it out...


              - Rudy

              1 person found this helpful
              • 4. Re: Simulate drawing a line or growth
                thedestro Level 1

                I've tried masks before, but they're not that helpful. And background graphics was actually the first thing I ever tried but I'm trying to resist it since it's not very professional plus I might be transferring symbols through several pieces of work so I need it all to be transparent.

                • 5. Re: Simulate drawing a line or growth
                  thedestro Level 1

                  I've tried masking before, but it never occured to me to use it like that..


                  I'll give it a try,

                  • 6. Re: Simulate drawing a line or growth
                    zeroskillz Level 3