AS3 example Positioning

Program

Copy this text and paste it into a new text file. Save the text file as "Transformations.as".

package {
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.events.MouseEvent;

    public class Transformations extends Sprite {

        private var drapeau:Sprite;
        private var redRect:Sprite;
        private var whiteVert:Sprite;
        private var whiteHoriz:Sprite;

        public function Transformations() {
          redRect = filledRectangle(150,100,0xFF0000)  // width, height, red color
          whiteVert = filledRectangle(20,65,0xFFFFFF)  // width, height, white color
          whiteHoriz = filledRectangle(65,20,0xFFFFFF)  // width, height, white color
           
          drapeau = new Sprite();
          drapeau.addChild(redRect)
          drapeau.addChild(whiteVert)
          drapeau.addChild(whiteHoriz)
           
          drapeau.x = 100
          drapeau.y = 80
          addChild(drapeau)
           
          var button1:Sprite;
          button1 = simpleButton("cart from above");
          button1.addEventListener(MouseEvent.MOUSE_DOWN, showCart);
          addChild(button1)

          var button2:Sprite;
          button2 = simpleButton("swiss flag");
          button2.addEventListener(MouseEvent.MOUSE_DOWN, showFlag);
          button2.x = 150;
          addChild(button2)

        }

        private function showCart(event:MouseEvent):void {
          whiteVert.x = 0
          whiteHoriz.x = 25
          redRect.x = 125
        }

        private function showFlag(event:MouseEvent):void {
          whiteVert.x = 0
          whiteHoriz.x = 0
          redRect.x = 0
        }

        private function filledRectangle(w:uint, h:uint, color:uint):Sprite {
          var r:Sprite = new Sprite()
          r.graphics.beginFill(color);  
          r.graphics.drawRect(-w/2, -h/2, w, h);
          r.graphics.endFill();
          return r;
        }

      private function simpleButton(label:String):Sprite {
        var sprite:Sprite = new Sprite();
        var textLabel:TextField = new TextField()
        sprite.graphics.clear();
        sprite.graphics.beginFill(0xD4D4D4); // grey color
        sprite.graphics.drawRoundRect(0, 0, 105, 25, 10, 10); // x, y, width, height, ellipseW, ellipseH
        sprite.graphics.endFill();
        textLabel.text = label;
        textLabel.x = 10;
        textLabel.y = 5;
        textLabel.selectable = false;
        sprite.addChild(textLabel)
        return sprite; 
       }         
    }
}

Walkthrough

---

package {
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.events.MouseEvent;

    public class Transformations extends Sprite {

Okay, we start to get used to this. Package definition, importing the class definitions for all objects that we will use in this program, definition for the Transformations class that follows.

---

        private var drapeau:Sprite;
        private var redRect:Sprite;
        private var whiteVert:Sprite;
        private var whiteHoriz:Sprite;

Variables that will be used in multiple places in the program need to be declared right after the class definition, with a private var syntax.

---

        public function Transformations() {

Class constructor. The enclosed code gets executed each time the class gets instantiated.

---

          redRect = filledRectangle(150,100,0xFF0000)  // width, height, red color
          whiteVert = filledRectangle(20,65,0xFFFFFF)  // width, height, white color
          whiteHoriz = filledRectangle(65,20,0xFFFFFF)  // width, height, white color

The default graphic is a swiss flag. We need three filled rectangles to make up a swiss flag. Three times, we need to create a filled rectangle. If we were to repeat the code to make one filled rectangle three times, this would clutter our program, making it difficult to read. We delegate the creation of a filled rectangle (stored within a sprite object) to a function written in the same class.

---

          drapeau = new Sprite();
          drapeau.addChild(redRect)
          drapeau.addChild(whiteVert)
          drapeau.addChild(whiteHoriz)

we put the graphic elements within a sprite. This way, we have the ability to treat the flag graphic as one entity that can be manipulated on its own. ---

          drapeau.x = 100
          drapeau.y = 80

---

We reposition the graphic somewhere in the middle of the screen. All childs of the drapeau objects get moved with the drapeau object.

---

          addChild(drapeau)

We don't forget to use the addChild() construct to make sure that the flag get drawn on the screen.

---

          var button1:Sprite;
          button1 = simpleButton("cart from above");
          button1.addEventListener(MouseEvent.MOUSE_DOWN, showCart);
          addChild(button1)

          var button2:Sprite;
          button2 = simpleButton("swiss flag");
          button2.addEventListener(MouseEvent.MOUSE_DOWN, showFlag);
          button2.x = 150;
          addChild(button2)

---

We define two buttons. Each button will call a given function, either showCart or showFlag. It goes the same for the buttons as for the rectangles. We delegate the task of creating a button-like graphic to a function.

---

        }

End of the constructor function

---

        private function showCart(event:MouseEvent):void {
          whiteVert.x = 0
          whiteHoriz.x = 25
          redRect.x = 125
        }

This function gets executed whenever the button "show cart" gets pressed. The function does nothing but change the position of the 3 rectangles. ---

        private function showFlag(event:MouseEvent):void {
          whiteVert.x = 0
          whiteHoriz.x = 0
          redRect.x = 0
        }

This function gets executed whenever the button "show flag" gets pressed. The function does nothing but change the position of the 3 rectangles.

---

        private function filledRectangle(w:uint, h:uint, color:uint):Sprite {
          var r:Sprite = new Sprite()
          r.graphics.beginFill(color);  
          r.graphics.drawRect(-w/2, -h/2, w, h);
          r.graphics.endFill();
          return r;
        }

By using r.graphics.drawRect(-w/2, -h/2, w, h);, all rectangles get drawn with their center as point of origin (0,0)

'---

      private function simpleButton(label:String):Sprite {
        var sprite:Sprite = new Sprite();
        var textLabel:TextField = new TextField()
        sprite.graphics.clear();
        sprite.graphics.beginFill(0xD4D4D4); // grey color
        sprite.graphics.drawRoundRect(0, 0, 105, 25, 10, 10); // x, y, width, height, ellipseW, ellipseH
        sprite.graphics.endFill();
        textLabel.text = label;
        textLabel.x = 10;
        textLabel.y = 5;
        textLabel.selectable = false;
        sprite.addChild(textLabel)
        return sprite; 
       }         

---

    }
}

Closing brackets that have been opened (class definition and package).

Variants

...

Challenge

Not sure they are still in vogue. When I was a kid, there were some popular jokes around circles on a sheet. Circles are not supposed to be any funny, I agree. What was funny about that was that a drawing that looked like nothing but circles toke a completely different meaning when given an interpretation. A big circle with a medium circle in its middle, a medium circle at a bit of a distance with a small circle a bit off center: a mexican cooking an egg. There were also the two mexicans on a tandem (twice a big circle with a medium circle in the center).... and many more that I have forgotten.

Try to come up with graphs that involve simple shapes like circles and rectangles and that correspond to object "viewed from the sky".