5 Replies Latest reply on Aug 19, 2009 10:56 AM by NSurveyor

    Drawing circle using actionscript

    Sreelash Level 1

      Hi,

       

                I am created a circle using the following script,

       

      this.createEmptyMovieClip("circle_mc", 10);
      circle_mc._x = 0;
      circle_mc._y = 0;
      drawCircle(circle_mc, 100, 0x000000, 100);

       

      function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
          var x:Number = radius;
          var y:Number = radius;
          with (target_mc) {
              beginFill(fillColor, fillAlpha);
              moveTo(x + radius, y);
              curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
              curveTo(Math.tan(Math.PI / 8) * radius + x, radius + y, x, radius + y);
              curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
              curveTo(-radius + x, Math.tan(Math.PI / 8) * radius + y, -radius + x, y);
              curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
              curveTo(-Math.tan(Math.PI / 8) * radius + x, -radius + y, x, -radius + y);
              curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
              curveTo(radius + x, -Math.tan(Math.PI / 8) * radius + y, radius + x, y);
              endFill();
          }
      }

       

       

      Now what i want to know is that  can I increase the radius of the circle by applying tween class?

       

      Thank and Regards,

                          Sreelash

        • 1. Re: Drawing circle using actionscript
          Ned Murphy Adobe Community Professional & MVP

          Yes, you can make the circle_mc change in size using the Tween class, effectively changing the radius.  You could probably specify a radius value to change to, in terms of using the _width/height properties, which you can tween (radius = _width/2).

          1 person found this helpful
          • 2. Re: Drawing circle using actionscript
            Sreelash Level 1

            Hi,

             

                      Can you explain a little bit more for implemeting this. How should i give this in tween class. Can you explain a little bit more.

             

            Thanks and Regards,

                            Sreelash

            • 3. Re: Drawing circle using actionscript
              NSurveyor Level 2

              If we really wanted to make a "radius" property that could be set for this MovieClip so that when we change the value, the MovieClip's radius is re-set, we could. Using Object.addProperty(); and slightly modifying the drawCircle function (so that it clears() before drawing), we get the following:

               

              //Import Tween class
              import mx.transitions.Tween; 
              import mx.transitions.easing.*; 
              
              this.createEmptyMovieClip("circle_mc", 10);
              circle_mc._x = 0;
              circle_mc._y = 0;
              //Create getter/setter property, 'radius'
              circle_mc.getRadius = function():Number{
                  return this._radius;
              }
              circle_mc.setRadius = function(r:Number){
                  this._radius = r;
                  drawCircle(this,r,0x000000,100);
              }
              circle_mc.addProperty('radius',circle_mc.getRadius,circle_mc.setRadius);
              
              //Now, create tween on the 'radius' property.
              var radiusT:Tween = new Tween(circle_mc, "radius", Elastic.easeOut, 0, 200, 6, true); 
              
              //Modified drawCircle function
              function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
                  var x:Number = radius;
                  var y:Number = radius;
                  with (target_mc) {
                      clear();
                      beginFill(fillColor, fillAlpha); 
                      moveTo(x + radius, y);
                      curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
                      curveTo(Math.tan(Math.PI / 8) * radius + x, radius + y, x, radius + y);
                      curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
                      curveTo(-radius + x, Math.tan(Math.PI / 8) * radius + y, -radius + x, y);
                      curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
                      curveTo(-Math.tan(Math.PI / 8) * radius + x, -radius + y, x, -radius + y);
                      curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
                      curveTo(radius + x, -Math.tan(Math.PI / 8) * radius + y, radius + x, y);
                      endFill();
                  }
              }
              

               

              While this may work, it certainly isn't the best way to go about it. For one, it would seem more logical to make a Circle class that had a radius property instead of a sole MovieClip. And also, we assume a fixed colour of black in this way (which could have been made into another property I assume). Though, I guess it's easier to see what the Tween is doing in the above code: changing the 'radius' from 0 to 200 in 6 seconds.

               

              The easier and simpler way would be to simply tween the width and the height, where width and height are simply double the desired radius:

               

              //Import Tween class
              import mx.transitions.Tween; 
              import mx.transitions.easing.*;
              
              //Draw initial circle
              this.createEmptyMovieClip("circle_mc", 10);
              circle_mc._x = 0;
              circle_mc._y = 0;
              drawCircle(circle_mc,100,0x000000,100);
              
              //Do the tween
              var startR:Number = 0;
              var endR:Number = 200;
              var duration:Number = 6;
              var widthT:Tween = new Tween(circle_mc, "_width", Elastic.easeOut, startR*2, endR*2, duration, true); 
              var heightT:Tween = new Tween(circle_mc, "_height", Elastic.easeOut, startR*2, endR*2, duration, true);
              
              //drawCircle function
              function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
                  var x:Number = radius;
                  var y:Number = radius;
                  with (target_mc) {
                      beginFill(fillColor, fillAlpha); 
                      moveTo(x + radius, y);
                      curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
                      curveTo(Math.tan(Math.PI / 8) * radius + x, radius + y, x, radius + y);
                      curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
                      curveTo(-radius + x, Math.tan(Math.PI / 8) * radius + y, -radius + x, y);
                      curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
                      curveTo(-Math.tan(Math.PI / 8) * radius + x, -radius + y, x, -radius + y);
                      curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
                      curveTo(radius + x, -Math.tan(Math.PI / 8) * radius + y, radius + x, y);
                      endFill();
                  }
              }
              


              The key note to make here is the syntax of the Tween constructor: new Tween(object, property_str, init_val, final_val, duration, in_seconds);

              If you would like to use the Tween class, you should be tweening a property of the object, not just some arbitrary variable. This can be accomplished by either making our own property, or using the ones already in our disposal to create an identical effect.

               

              Note: If you want to have it tween from the centre of the circle instead of the top-left corner, simply change the drawCircle function to begin with:

               

              var x:Number = 0;
              var y:Number = 0;
              
              • 4. Re: Drawing circle using actionscript
                Sreelash Level 1

                Hi Nsurveryor. Thank you very much for ur reply.

                 

                Regards,

                    Sreelash

                • 5. Re: Drawing circle using actionscript
                  NSurveyor Level 2

                  You're welcome.