23 Replies Latest reply on Jul 21, 2011 10:07 AM by Amy Blankenship

    Create a circle class

    chriswillis100

      Hey guys,

       

      I'm trying to do something very simple which isnt working

       

      I've got a custom class that creates a circle:

       

       

      package create

      {

      import flash.display.Shape

       

      public class circle

      {

       

      public function circle()

      {

      var circle:Shape = new Shape();

      circle.graphics.lineStyle(5, 0, 1);

      circle.graphics.drawCircle(50,50,20);

       

      }

      }

      }

       

       

       

      And i have a main mxml file that has a button that when pushed should run the code in the custom class's costructor and add the circle to the stage:

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx">

       

      <fx:Script>

      <![CDATA[

      import creat.circle

       

       

      protected function createCircle_clickHandler(event:MouseEvent):void

      {

       

      }

       

      ]]>

      </fx:Script>

       

      <s:Button id="createCircle" x="27" y="122" width="35" label="Button"

        click="createCircle_clickHandler(event)"/>

      </s:WindowedApplication>

      What code would have to go in the createCircle function to make it work? I've tried creat.circle(); and it's given me the error that says i need 1 argument in the () part. Which is confusing
      Anyone help?
      Thanks
      Chris
        • 1. Re: Create a circle class
          ShardulSingh Level 3

          Hi,

          Create your  circle class as below:-

           

          Circle Class:-

           

           

          package
          {
              import flash.display.Sprite;
             
              import mx.core.UIComponent;

           

              public class Circle extends UIComponent
              {
                  public function Circle()
                  {
                      var circle:Sprite = new Sprite();
                     
                      circle.graphics.lineStyle(5, 0, 1);
                     
                      circle.graphics.drawCircle(50,50,20);
                      this.addChild(circle);
                  }

             
              }
          }

           

           

          And Use it in your Application as below:

           

          YourApplication:-

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx">

           

              <fx:Script>
                  <![CDATA[
                      protected function btnHandler(event:MouseEvent):void
                      {
                          var circle : Circle = new Circle();
                          circleConatiner.addChild(circle);
                      }
                  ]]>
              </fx:Script>

           

              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
              <mx:VBox>
              <mx:Box id="circleConatiner" width="150" height="150" backgroundColor="0xCCCCCC"/>
              <s:Button id="btn" label="Create Circle" click="btnHandler(event)"/>
              </mx:VBox>
          </s:WindowedApplication>

           

           

           

           

           

           

          with Regards,

          Shardul

          • 2. Re: Create a circle class
            Amy Blankenship Level 4

            That's a good solution, along the lines of the question.  But I wonder if maybe just using the Ellipse primitive might not work better? Check out http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8fee1b36612357de97a3-8000.html for MXML usage.

             

            You could also use it in AS like so:

             

            var circle:Ellipse = new Ellipse();

            circle.width = 50;

            circle.height = 50;

            circle.stroke = new SolidColorStroke(0, 5, 1);

             

            myGroup.addElement(circle);//myGroup defined elsewhere, perhaps in MXML

             

            Note that Spark WindowedApplication implements IVisualElementContainer, so it has an addElement method that works the same way as Group's does.

             

            You can change the width of an Ellipse at runtime.

             

            HTH;

             

            Amy

            • 3. Re: Create a circle class
              chriswillis100 Level 1

              Thats brilliant!

               

              Thank you for you help

              • 4. Re: Create a circle class
                chriswillis100 Level 1

                Ok i've got this:

                 

                package create

                {

                 

                import mx.core.UIComponent;

                import mx.graphics.SolidColorStroke;

                 

                import spark.primitives.Ellipse;

                 

                public class circle extends UIComponent

                {

                 

                 

                public function circle()

                {

                var circle:Ellipse = new Ellipse();

                circle.x = 0

                circle.y = 0

                circle.width = 50;

                circle.height = 50;

                circle.stroke = new SolidColorStroke(0x00FF00, 5, 1)

                 

                }

                }

                }

                 

                 

                 

                and this is my main.mxml

                 

                 

                <?xml version="1.0" encoding="utf-8"?>

                <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                   xmlns:s="library://ns.adobe.com/flex/spark"

                   xmlns:mx="library://ns.adobe.com/flex/mx">

                 

                <fx:Script>

                <![CDATA[

                import create.circle;

                 

                import mx.core.UIComponent;

                protected function btnHandler(event:MouseEvent):void

                {

                var circle1:circle = new circle();

                circleConatiner.addChild(circle1);

                }

                ]]>

                </fx:Script>

                 

                <fx:Declarations>

                <!-- Place non-visual elements (e.g., services, value objects) here -->

                </fx:Declarations>

                <mx:VBox>

                <mx:Box id="circleConatiner" width="150" height="150" backgroundColor="0xCCCCCC"/>

                <s:Button id="btn" label="Create Circle" click="btnHandler(event)"/>

                </mx:VBox>

                </s:WindowedApplication>

                 

                 

                But nothing is happening when i click the button

                • 5. Re: Create a circle class
                  Amy Blankenship Level 4

                  Probably the easiest thing is to just make circleContainer look like this:

                   

                  <s:BorderContainer backgroundColor="#CCCCCC" borderVisible="false" id="circleContainer">

                       <s:Ellipse width="50" height="50">

                            <s:stroke>

                                 <s:SolidColorStroke color="0" weight="5" />

                            </s:stroke>

                       </s:Ellipse>

                  </s:BorderContainer>

                   

                  However, if you want to make it a separate Class, try this:

                   

                  public Class Circle extends Ellipse {

                       public function Circle() {

                            stroke = new SolidColor(5, 0, 1);

                       }

                  }

                   

                  Then you can either add it to the MXML similar to above, or you can use addElement to add it to an IVisualElementContainer (which Box is not).

                   

                  HTH;

                   

                  Amy

                  • 6. Re: Create a circle class
                    chriswillis100 Level 1

                    As my class i've got this:

                     

                     

                    public function circle()

                    {

                    var circle:Ellipse = new Ellipse();

                    circle.x = 0

                    circle.y = 0

                    circle.width = 50;

                    circle.height = 50;

                    circle.stroke = new SolidColorStroke(0x00FF00, 5, 1)

                    addElement(circle);

                     

                     

                    and it's saying that addElement is a possibly undefined method

                     

                     

                    And i've got this in my Main.mxml file:

                     

                     

                    var circle1:circle = new circle();

                    circleConatiner.addChild(circle1);   //<mx:Box> container

                     

                     

                    And it's saying Implicit coercion of a value of type create:circle to an unrelated type flash.display:DisplayObject

                    • 7. Re: Create a circle class
                      chriswillis100 Level 1

                      If i put this code into the Main.mxml file it works perfectly:

                       

                      var circle1:Ellipse = new Ellipse();

                      circle1.x = 50

                      circle1.y = 50

                      circle1.width = 50;

                      circle1.height = 50;

                      circle1.stroke = new SolidColorStroke(0x000000,5,1);

                      addElement(circle1);

                       

                       

                      But if i put it in the class file it says that addElement is possibly undefined

                      • 8. Re: Create a circle class
                        Rangora Level 3

                        The class would have to extend Ellipse. Then you just create a new Circle (your class) and call addElement(circle) in your view.

                        • 9. Re: Create a circle class
                          Amy Blankenship Level 4

                          Chris;

                           

                           

                          I think you're kind of missing the "core" of what I am trying to tell you:

                           

                          1. You're not going to be able to add an Ellipse to a mx container, because Ellipse is too low level.  You need to use a Spark container as the parent.
                          2. Please consider just using the mxml syntax I gave you.  You don't really need a circle Class, because there is already an Ellipse class you can just use.
                          3. If you absolutely have to have a circle Class (which suggests this is a school assignment and not a real problem), it should extend a Class that can be added to the parent container.  If you must use box for some reason, you're better off going with the UIComponent/shape solution. Or you need to return something from your function (note that none of your functions ever has a return) that the calling Class can then use to add to some part of itself.
                          4. The Circle will never be able to add itself to anything, because it lacks any knowledge of what to add to and any methods that would allow it to do any adding.  The calling Class will need to handle that.

                           

                          Good luck!

                          • 10. Re: Create a circle class
                            chriswillis100 Level 1

                            Ok, but using the mxml syntax wont allow me to create lots of instances of the circle.

                             

                            Basically what i'm working towards is a tool that allows you to create a circle by clicking and dragging it (like in MS Paint), and do it multiple times. Am i going down the right route for this?

                             

                            I thought I needed a class to make multiple instances of a circle

                             

                            I'm not very experienced in as3/mxml, but i really do appreciate your help

                            • 11. Re: Create a circle class
                              Amy Blankenship Level 4

                              Yes, and that Class already exists, so there is no reason for you to write it.  It's called Ellipse.

                               

                              Try something like this (in your MXML file):

                              protected static const stroke:IStroke = new SolidColorStroke(0, 5, 1);

                              protected function createCircle(e:MouseEvent):void {

                                   var newEllipse:Ellipse = new Ellipse();

                                   newEllipse.stroke = stroke;

                                   newEllipse.x = e.localX;

                                   newEllipse.y = e.localY;

                                   newEllipse.width = newEllips.height = 50;

                                   someSparkContainer.addElement(newEllipse);

                              }

                               

                              Note that you CANNOT use this code to add an ellipse to an MX container.  It HAS to be a Spark container (such as BorderContainer).

                               

                              HTH;

                               

                              Amy

                              • 12. Re: Create a circle class
                                chriswillis100 Level 1

                                Oh i see, sorry about all the confusion

                                 

                                Just one more thing:

                                 

                                Is there a way of getting the coordinates of the mouse when the events MOUSE_DOWN and MOUSE_UP have been fired?

                                I need them to do this draggable resizeable circle

                                 

                                 

                                Many Thanks

                                Chris

                                • 13. Re: Create a circle class
                                  chriswillis100 Level 1

                                  There's another problem:

                                   

                                  I've got three functions - mouseDown (defines and adds the circle),  mouseMove (drags the circle to the right size) , mouseUp (sets the circle at that size)

                                  To make multiple instances of the circle the variable has to be defined in the mouseDown function, but then the mouseMove and mouseUp instances can't use it.

                                   

                                  I also need to know how to get coordinates when the mouseDown and mouseUP is fired, because to set the size of the circle i do mouseUpCoordinates - mouseDownCoordinates

                                   

                                  Using variables wouldn't work because of the multiple instances of the circle, i think

                                   

                                   

                                  Thanks

                                  Chris

                                  • 14. Re: Create a circle class
                                    Rangora Level 3

                                    vars can work since you edit the circles 1 by 1

                                    • 15. Re: Create a circle class
                                      chriswillis100 Level 1

                                      I dont understand what you mean

                                       

                                      Is this the best way of creating circles that drag to the right size?

                                      • 16. Re: Create a circle class
                                        Amy Blankenship Level 4

                                        You might find it useful to search the docs for MouseEvent for examples of how to use this object.

                                        • 17. Re: Create a circle class
                                          chriswillis100 Level 1

                                          I have, and all ive got is event.localX/event.localY

                                           

                                          This is getting really confusing :/

                                          • 18. Re: Create a circle class
                                            chriswillis100 Level 1

                                            Basically whats the easiest way to make a circle that onMouseDown creates the circle (a really small one), onMouseMove resizes it and onMouseUp sets the size?

                                             

                                            I feel like i'm making it a lot more difficult than it needs to be

                                             

                                            Thanks for all your help though

                                            Chris

                                            • 19. Re: Create a circle class
                                              Rangora Level 3

                                              Those examples might help you. It's not exactly what you need, but it draw using mouseEvents so...

                                               

                                              http://www.jamesward.com/2010/03/22/flex-paint-updated-to-flex-4/ (simpler example)

                                               

                                              http://flexaired.blogspot.com/2008/08/simple-drawing-tool-in-flex.html

                                               

                                               

                                              What I tried to explain to you is that since you only create 1 circle at the time, you could use vars to keep a reference on this circle and the x,y. When you press the mouse button, you just create a new circle and replace the old one in the var...

                                              • 20. Re: Create a circle class
                                                chriswillis100 Level 1

                                                Ok, i've sorted the mouse coordinates.

                                                 

                                                But i'm back to the other problem where if i declare the Ellipse outside the mouseDown everytime i create a new circle the one i created before dissappears, but if it inside the mouseDown, no other function (mouseMove, mouseUp) can use it, which creates errors

                                                 

                                                Sorry if i've misunderstood anything    

                                                • 21. Re: Create a circle class
                                                  Rangora Level 3

                                                  I hope you will learn by STUDYING this code to understand what it does... If it's what you need, I want my correct answer (already gave it... my helpful)

                                                   

                                                   

                                                  <?xml version="1.0" encoding="utf-8"?>
                                                  <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                          xmlns:s="library://ns.adobe.com/flex/spark" title="DrawingView">
                                                      <fx:Script>
                                                          <![CDATA[
                                                              import mx.events.FlexEvent;
                                                              import mx.graphics.IStroke;
                                                              import mx.graphics.SolidColorStroke;
                                                             
                                                              import spark.primitives.Ellipse;
                                                             
                                                              private var currentCircle:Ellipse;
                                                              private var x1:int;
                                                              private var y1:int;
                                                              private var isDrawing:Boolean = false;
                                                              protected static const stroke:IStroke = new SolidColorStroke(0, 5, 1);
                                                             
                                                              protected function createCircle(e:MouseEvent):void {
                                                                 
                                                                  var newEllipse:Ellipse = new Ellipse();
                                                                 
                                                                  newEllipse.stroke = stroke;
                                                                  newEllipse.x = e.localX -25;
                                                                 
                                                                  newEllipse.y = e.localY -25;
                                                                 
                                                                  newEllipse.width = newEllipse.height = 50;
                                                                 
                                                                  currentCircle = newEllipse;
                                                              }
                                                             
                                                              protected function resizeCircle(newSize:Number):void
                                                              {
                                                                  currentCircle.x = x1 -newSize/2; //reposition the circle. The center won't move this way.
                                                                  currentCircle.y = y1 -newSize/2;
                                                                  currentCircle.width = currentCircle.height = newSize;
                                                              }
                                                             
                                                              protected function view1_mouseDownHandler(event:MouseEvent):void
                                                              {
                                                                  createCircle(event);
                                                                  draw.addElement(currentCircle);
                                                                  isDrawing = true;
                                                                  x1 = event.localX;
                                                                  y1 = event.localY;
                                                                 
                                                              }
                                                             
                                                              protected function view1_mouseUpHandler(event:MouseEvent):void
                                                              {
                                                                  isDrawing = false;
                                                              }
                                                             
                                                              protected function view1_mouseMoveHandler(event:MouseEvent):void
                                                              {
                                                                  if (isDrawing)
                                                                  {
                                                                      var radius:Number = Math.sqrt((event.localX -x1)*(event.localX -x1) + (event.localY - y1)*(event.localY - y1));
                                                                      resizeCircle(radius*2); //radius is half way to mouse coordinates
                                                                  }
                                                              }
                                                             
                                                          ]]>
                                                      </fx:Script>
                                                      <fx:Declarations>
                                                      </fx:Declarations>
                                                      <s:Group id="draw" left="0" right="0" top="0" bottom="0" mouseDown="view1_mouseDownHandler(event)"
                                                               mouseMove="view1_mouseMoveHandler(event)" mouseUp="view1_mouseUpHandler(event)"/>
                                                  </s:View>

                                                  1 person found this helpful
                                                  • 22. Re: Create a circle class
                                                    Amy Blankenship Level 4

                                                    You'll want to create two variables

                                                     

                                                    1. circles (an Array of Circles)
                                                    2. currentCircle (the most recently created circle).

                                                     

                                                    Add the circle to the array in mouse down but store a reference to it in currentCircle, then manipulate currentCircle in the other handlers.

                                                     

                                                    For example

                                                     

                                                    protected var circles:Array = new Array();

                                                    protected var currentCircle:Ellipse;

                                                     

                                                    protected function createCircle(e:MouseEvent):void {

                                                         currentCircle = new Ellipse();

                                                         //size, position, and add the circle

                                                         ...

                                                         circles.push(currentCircle);

                                                    }

                                                     

                                                    protected function resizeCircle(e:MouseEvent):void {

                                                         var dx:int = e.localX - currentCircle.x;

                                                         var dy:int = e.localY - currentCircle.y;

                                                         currentCircle.width = dx;

                                                         currentCircle.height = dy;

                                                    }

                                                     

                                                    HTH;

                                                     

                                                    Amy

                                                    • 23. Re: Create a circle class
                                                      chriswillis100 Level 1

                                                      Thank you so much, sorry that it took so long for me to get

                                                       

                                                      You've been really helpful