6 Replies Latest reply on Dec 4, 2006 9:04 AM by Sketchsta

    Drawing API  animate??

    Sketchsta Level 1
      Hi guys, i have only recently started with Drawing API, and im getting the hang of it. But i was wondering if it's possible to tween the lineTo method??

      for example, im rounded rectangle at runtime, but i dont want it to just " appear " , say i wanted it to " draw it's self "
      like tween the outline first, then fade in the fill.

      is that possible? if so, what code would i use to animate the drawing process?

      Thanx guys.
        • 1. Re: Drawing API  animate??
          kglad Adobe Community Professional & MVP
          you can't tween it, but you can use the drawing api to "animate" a line or curve drawing. for example, you can create a function (say drawF(mc,x1,y1,x2,y2) ) that draws a line from x1,y1 to x2,y2. you can repeatedly call the function (updating all but the first parameter) to "animate" a line. likewise, for a curve.
          • 2. Re: Drawing API  animate??
            Level 7
            Sketchsta,

            > Hi guys, i have only recently started with Drawing API,
            > and im getting the hang of it. But i was wondering if it's
            > possible to tween the lineTo method??

            You can certainly tween the *result* of a lineTo drawing. :)

            > for example, im rounded rectangle at runtime, but i dont
            > want it to just " appear " , say i wanted it to " draw it's
            > self " like tween the outline first, then fade in the fill.

            Animation of this sort is the visualization of change over time. If you
            wanted to "tween" your lines in the sense of having them "draw themselves
            into place," you would have to draw each line segment in pieces, and each
            piece in succession. For example, if you have a line going from 10,10 to
            60,60 and you want to animate that line, you could first draw a line from
            10,10 to 20,20, then wait 30 milliseconds (or so), then draw a new line from
            10,10 to 30,30, then wait another 30 milliseconds, then draw a new line from
            10,10 to 40,40 -- and so on.

            Once your outline was complete, you could create a new movie clip
            instance, draw that same shape into that new clip -- all in one go, this
            time -- then fill it. Then, update that new clip's _alpha property over
            time from zero to 100.

            > is that possible? if so, what code would i use to animate
            > the drawing process?

            Look into the setInterval() function, which allows you to trigger
            another function repeatedly based on a timer.


            David Stiller
            Adobe Community Expert
            Dev blog, http://www.quip.net/blog/
            "Luck is the residue of good design."


            • 3. Re: Drawing API  animate??
              Sketchsta Level 1
              wouldnt that draw over the previous lines?

              i was looking into the setInterval function could i use that somehow?
              • 4. Re: Drawing API  animate??
                Sketchsta Level 1
                Hey David, i only just saw your post after i replyed.. uum, could you give be the basis of how to use the setInterval ?

                cuz i only used it once, but i didnt know how to stop it, it kept going forever, till my com was struggling.. then i found clear() ... now my comp has no problem, but i still cant stop the line.. anyway, off the point...

                could you give me an example of how to set it up?
                • 5. Re: Drawing API  animate??
                  Level 7
                  Sketchsta,

                  > Hey David, i only just saw your post after i replyed.. uum,
                  > could you give be the basis of how to use the setInterval ?

                  The setInterval() function can be run in more than one way. The basic
                  way is to provide it two parameters: a) another function to run, and b) a
                  time interval at which to run this other function. That's really all there
                  need be to it.

                  > cuz i only used it once, but i didnt know how to stop it, it
                  > kept going forever, till my com was struggling.. then i found
                  > clear() ... now my comp has no problem, but i still cant
                  > stop the line.. anyway, off the point...

                  That's not off the point. ;) Sounds like that's exactly what you need
                  to figure out now. The clearInterval() function stops a particular
                  setInterval() loop. How does it know which loop to stop? The answer is,
                  you provide clearInterval() with a number. This works a bit like those
                  lines at the deli section where you "take a number" and they eventually call
                  it.

                  setInterval() provides a return value, just like many (but not all)
                  functions. The getTimer() function, for example, returns a number that
                  represents how many milliseconds have passed since the Flash movie began.
                  The isNaN() function returns a Boolean (true or false) value that tells
                  whether a given value is "not a number." Well, setInterval() returns a
                  value that indicates the number of its latest usage. The first time you use
                  setInterval(), it sets up a scenario whereby it repeatedly calls the
                  function you pass it at the time interval you pass it. This is the first
                  such scenario, and so the number it returns is 1. The next time you use
                  setInterval(), it sets up a second scenario -- calling some other function
                  you provide, or the same one -- and this time it returns 2. The third time,
                  3, and so on.

                  Conveniently, you don't have to keep track of this. You can store the
                  return value of setInterval() in a variable and use the variable as a
                  parameter to clearInterval().

                  > could you give me an example of how to set it up?

                  var id:Number = setInterval(drawingFunctionHere, 30);

                  In the above line, an arbitrarily named variable id (which will be a
                  number) is set to the return value of setInterval(), which in this case
                  calls an arbitrarily named function, drawingFunctionHere every 30
                  milliseconds. Whenever you see fit (such as when your drawing is finished,
                  and only you'll know that), you can call clearInterval() and pass in that id
                  variable.

                  clearInterval(id);

                  That stops the repeated call to drawingFunctionHere(). Of course, the
                  first time around, you could use clearInterval(1) -- but again, there's just
                  no reason to keep track of the interval numbers yourself. You can re-use
                  that id variable as often as you need.


                  David Stiller
                  Adobe Community Expert
                  Dev blog, http://www.quip.net/blog/
                  "Luck is the residue of good design."


                  • 6. Re: Drawing API  animate??
                    Sketchsta Level 1
                    THANX ALOT David... That really helped me out.. and not only that, you have given me even more info to work on.. Its more "PATHS" for me to take in learning AS2.

                    i always been animating everything in the timeline, and only use the basic code in AS2. but im seeing more and more really kool things that AS2 can do, and i want to learn all i can about it..

                    Thanx for your help David, MUCH APPRECIATED.
                    and kglad, as always, you came to help too, Thanx dude. =)