AS3 example Positioning: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(31 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Incomplete}}
<!-- <pageby nominor="false" comments="false"/> -->
== Introduction ==
This example belongs to the [[AS3 Tutorials Novice]] and is part of our [[Actionscript 3]] tutorial series.
You will learn about simple repositioning, e.g move a sprite into another position by changing its x and y properties.
== Program ==
== Program ==


Line 10: Line 18:
     public class Transformations extends Sprite {
     public class Transformations extends Sprite {
   
   
         private var drapeau:Sprite;
         private var sprite:Sprite;
         private var redRect:Sprite;
         private var redRect:Sprite;
         private var whiteVert:Sprite;
         private var whiteVert:Sprite;
Line 16: Line 24:
   
   
         public function Transformations() {
         public function Transformations() {
           redRect = filledRectangle(150,100,0xFF0000)  // width, height, red color
           redRect = filledRectangle(150,100,0xFF0000)  // width, height, red color
           whiteVert = filledRectangle(20,65,0xFFFFFF)  // width, height, white color
           whiteVert = filledRectangle(20,65,0xFFFFFF)  // width, height, white color
           whiteHoriz = filledRectangle(65,20,0xFFFFFF)  // width, height, white color
           whiteHoriz = filledRectangle(65,20,0xFFFFFF)  // width, height, white color
              
              
           drapeau = new Sprite();
           sprite = new Sprite();
           drapeau.addChild(redRect)
           sprite.addChild(redRect)
           drapeau.addChild(whiteVert)
           sprite.addChild(whiteVert)
           drapeau.addChild(whiteHoriz)
           sprite.addChild(whiteHoriz)
              
              
           drapeau.x = 100
           sprite.x = 100
           drapeau.y = 80
           sprite.y = 80
           addChild(drapeau)
           addChild(sprite)
              
              
           var button1:Sprite;
           var button1:Sprite;
           button1 = simpleButton("cart from above");
           button1 = simpleButton("cart from above");
           button1.addEventListener(MouseEvent.MOUSE_DOWN, showCart);
           button1.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoCart);
           addChild(button1)
           addChild(button1)
   
   
           var button2:Sprite;
           var button2:Sprite;
           button2 = simpleButton("swiss flag");
           button2 = simpleButton("swiss flag");
           button2.addEventListener(MouseEvent.MOUSE_DOWN, showFlag);
           button2.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoFlag);
           button2.x = 150;
           button2.x = 130;
           addChild(button2)
           addChild(button2)
   
   
         }
         }
   
   
         private function showCart(event:MouseEvent):void {
         private function transformIntoCart(event:MouseEvent):void {
           whiteVert.x = 0
           whiteVert.x = 0
           whiteHoriz.x = 25
           whiteHoriz.x = 25
           redRect.x = 125
           redRect.x = 125
        }
   
   
         private function showFlag(event:MouseEvent):void {
          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0
 
          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
 
        }
         private function transformIntoFlag(event:MouseEvent):void {
           whiteVert.x = 0
           whiteVert.x = 0
           whiteHoriz.x = 0
           whiteHoriz.x = 0
           redRect.x = 0
           redRect.x = 0
          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0
          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
         }
         }
   
   
Line 72: Line 98:
         textLabel.x = 10;
         textLabel.x = 10;
         textLabel.y = 5;
         textLabel.y = 5;
        textLabel.width = 95;
        textLabel.height = 20;
         textLabel.selectable = false;
         textLabel.selectable = false;
         sprite.addChild(textLabel)
         sprite.addChild(textLabel)
Line 92: Line 120:
   
   
---
---
         private var drapeau:Sprite;
         private var sprite:Sprite;
         private var redRect:Sprite;
         private var redRect:Sprite;
         private var whiteVert:Sprite;
         private var whiteVert:Sprite;
Line 113: Line 141:
---
---
              
              
           drapeau = new Sprite();
           sprite = new Sprite();
           drapeau.addChild(redRect)
           sprite.addChild(redRect)
           drapeau.addChild(whiteVert)
           sprite.addChild(whiteVert)
           drapeau.addChild(whiteHoriz)
           sprite.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.  
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
           sprite.x = 100
           drapeau.y = 80
           sprite.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.  
We reposition the graphic somewhere in the middle of the screen. All ''childs'' of the sprite objects get moved with the sprite object.  


---             
---             
           addChild(drapeau)
           addChild(sprite)


We don't forget to use the addChild() construct to make sure that the flag get drawn on the screen.  
We don't forget to use the addChild() construct to make sure that the flag get drawn on the screen.  
Line 133: Line 161:
           var button1:Sprite;
           var button1:Sprite;
           button1 = simpleButton("cart from above");
           button1 = simpleButton("cart from above");
           button1.addEventListener(MouseEvent.MOUSE_DOWN, showCart);
           button1.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoCart);
           addChild(button1)
           addChild(button1)
   
   
           var button2:Sprite;
           var button2:Sprite;
           button2 = simpleButton("swiss flag");
           button2 = simpleButton("swiss flag");
           button2.addEventListener(MouseEvent.MOUSE_DOWN, showFlag);
           button2.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoFlag);
           button2.x = 150;
           button2.x = 130;
           addChild(button2)
           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.  
We define two buttons. Each button will call a given function, either transformIntoCart or transformIntoFlag. It goes the same for the buttons as for the rectangles. We delegate the task of creating a button-like graphic to a function.  


---  
---  
Line 150: Line 178:


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


This function gets executed whenever the button "show cart" gets pressed. The function does nothing but change the position of the 3 rectangles.  
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 {
         private function transformIntoFlag(event:MouseEvent):void {
           whiteVert.x = 0
           whiteVert.x = 0
           whiteHoriz.x = 0
           whiteHoriz.x = 0
           redRect.x = 0
           redRect.x = 0
          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0
          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
         }
         }


Line 178: Line 222:
By using ''r.graphics.drawRect(-w/2, -h/2, w, h);'', all rectangles get drawn with their center as point of origin (0,0)
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 {
       private function simpleButton(label:String):Sprite {
Line 189: Line 233:
         textLabel.text = label;
         textLabel.text = label;
         textLabel.x = 10;
         textLabel.x = 10;
         textLabel.y = 5;
         textLabel.y = 5;       
        textLabel.width = 95;
        textLabel.height = 20;
         textLabel.selectable = false;
         textLabel.selectable = false;
         sprite.addChild(textLabel)
         sprite.addChild(textLabel)
Line 202: Line 248:
== Variants ==
== Variants ==


...
After ''addChild(button2)'', starting on a new line, add:
 
          var button3:Sprite;
          button3 = simpleButton("computer");
          button3.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoComputer);
          button3.x = 260;
          addChild(button3)
 
After the closing bracket of the ''transformIntoFlag()'' function, starting on a new line, add:
 
        private function transformIntoComputer(event:MouseEvent):void {
          redRect.x = 0
          whiteHoriz.x = 0
         
          redRect.x = 0
          whiteHoriz.y = 70
         
          whiteVert.visible = false  // note that the value is false
          whiteHoriz.visible = true
          redRect.visible = true
        }
 
This will add a third button which when clicked will trigger a third transformation. A drawing that vaguely looks like a computer screen with a keyboard at the bottom will be displayed. The Vertical bar won't be visible on the screen.


== Challenge ==
== 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.  
Choose the one challenge below that you like best.
 
For all challenges, you will need to know about the line drawing functions that sprite objects have.
 
The code bellow would create a triangle
 
      var s:Sprite = new Sprite()
      s.graphics.lineStyle(2,0x000000,100); // thickness, color (here black), opacity.
      s.graphics.moveTo(0,-10); // x, y
      s.graphics.lineTo(20,10);  // x, y
      s.graphics.lineTo(-20,10);
      s.graphics.lineTo(0,-10);
 
There is a similar curveTo function that you won't require for any of the challenges.
 
moveTo moves to a point without drawing anything on the screen (very much like handing your pencil up). lineTo moves to the point specified by the x and y co-ordinates when drawing a line from the current pencil position to that point.
 
x values increase from the left to the right of the screen (0 for the leftmost point within the sprite)
x values increase from the top to the bottom of the screen (0 for the topmost point within the sprite)
 
Both positive and negative values can be used. Positive values corresponds to points that are on the right or bottom of the object's center. Negative values correspond to points that are on the left or top of the object's center. The object's center is the x,y position given to the sprite (by default: 0,0).
 
Take also into account that items are drawn on top of one another. The first item to be drawn within a sprite takes the most backward position. The last one take the frontmost one.
 
=== Views from above ===
 
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.  
 
Google search and here are some smiley versions of it.
 
-O-    A Mexican on a bicycle
-O-O-  Two Mexicans on a tandem
O-o    A mexican cooking a pancake
=O=    A Mexican on skis
^O,    A mexican swimming crawl style  (frontal view)
 
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".
Try to come up with graphs that involve simple shapes like circles and rectangles and that correspond to object "viewed from the sky".
=== Stick Men doing sport ===
Compose a little album of stick men doing sport (3 to 5 poses). You will find an example of [http://www.yogawithamey.com/images/standingposes.jpg stickmen doing yoga]
=== Flower album ===
Compose a little album of flowers made up of simple geometrical shapes like circles, ellipses, lines, rectangles (3 to 5 flowers). Aim for patterns like the ones on this [http://www.thefamilygroove.com/carnival%20platter.jpg image] (banner on top of the page). The point of the exercise is to experiment with positioning rather than complex drawings.
You may need to rotate shapes to obtain the effect you are after. Simply use:
  sprite.rotation = 15
This will present the sprite rotated at an angle of 15 degrees.
== Why not share? ==
If you come up with some cool stuff, why not upload a photo on the [http://www.flickr.com/groups/as3edu/ AS3edu Flicker group]. As always when you put material on the web, avoid any material of a nature to shock an underage age kid.
[[Category: Actionscript 3]]
[[Category:ActionScript tutorials]]
[[Category: ActionScript Code Snippets]]

Latest revision as of 18:09, 22 August 2016

Introduction

This example belongs to the AS3 Tutorials Novice and is part of our Actionscript 3 tutorial series.

You will learn about simple repositioning, e.g move a sprite into another position by changing its x and y properties.

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 sprite: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
           
          sprite = new Sprite();
          sprite.addChild(redRect)
          sprite.addChild(whiteVert)
          sprite.addChild(whiteHoriz)
           
          sprite.x = 100
          sprite.y = 80
          addChild(sprite)
           
          var button1:Sprite;
          button1 = simpleButton("cart from above");
          button1.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoCart);
          addChild(button1)

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

        }

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

          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0
 
          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
 
       }

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

          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0

          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
        }

        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.width = 95;
        textLabel.height = 20;
        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 sprite: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.

---

          sprite = new Sprite();
          sprite.addChild(redRect)
          sprite.addChild(whiteVert)
          sprite.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. ---

          sprite.x = 100
          sprite.y = 80

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

---

          addChild(sprite)

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, transformIntoCart);
          addChild(button1)

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

We define two buttons. Each button will call a given function, either transformIntoCart or transformIntoFlag. 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 transformIntoCart(event:MouseEvent):void {
          whiteVert.x = 0
          whiteHoriz.x = 25
          redRect.x = 125

          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0

          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
        }

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 transformIntoFlag(event:MouseEvent):void {
          whiteVert.x = 0
          whiteHoriz.x = 0
          redRect.x = 0

          whiteVert.y = 0
          whiteHoriz.y = 0
          redRect.y = 0

          whiteVert.visible = true
          whiteHoriz.visible = true
          redRect.visible = true
        }

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.width = 95;
        textLabel.height = 20;
        textLabel.selectable = false;
        sprite.addChild(textLabel)
        return sprite; 
       }         

---

    }
}

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

Variants

After addChild(button2), starting on a new line, add:

         var button3:Sprite;
         button3 = simpleButton("computer");
         button3.addEventListener(MouseEvent.MOUSE_DOWN, transformIntoComputer);
         button3.x = 260;
         addChild(button3)

After the closing bracket of the transformIntoFlag() function, starting on a new line, add:

       private function transformIntoComputer(event:MouseEvent):void {
         redRect.x = 0
         whiteHoriz.x = 0
         
         redRect.x = 0
         whiteHoriz.y = 70
         
         whiteVert.visible = false  // note that the value is false
         whiteHoriz.visible = true
         redRect.visible = true
       }

This will add a third button which when clicked will trigger a third transformation. A drawing that vaguely looks like a computer screen with a keyboard at the bottom will be displayed. The Vertical bar won't be visible on the screen.

Challenge

Choose the one challenge below that you like best.

For all challenges, you will need to know about the line drawing functions that sprite objects have.

The code bellow would create a triangle

     var s:Sprite = new Sprite()
     s.graphics.lineStyle(2,0x000000,100); // thickness, color (here black), opacity.
     s.graphics.moveTo(0,-10); // x, y
     s.graphics.lineTo(20,10);  // x, y
     s.graphics.lineTo(-20,10);
     s.graphics.lineTo(0,-10);

There is a similar curveTo function that you won't require for any of the challenges.

moveTo moves to a point without drawing anything on the screen (very much like handing your pencil up). lineTo moves to the point specified by the x and y co-ordinates when drawing a line from the current pencil position to that point.

x values increase from the left to the right of the screen (0 for the leftmost point within the sprite) x values increase from the top to the bottom of the screen (0 for the topmost point within the sprite)

Both positive and negative values can be used. Positive values corresponds to points that are on the right or bottom of the object's center. Negative values correspond to points that are on the left or top of the object's center. The object's center is the x,y position given to the sprite (by default: 0,0).

Take also into account that items are drawn on top of one another. The first item to be drawn within a sprite takes the most backward position. The last one take the frontmost one.

Views from above

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.

Google search and here are some smiley versions of it.

-O-     A Mexican on a bicycle 
-O-O-   Two Mexicans on a tandem
O-o     A mexican cooking a pancake
=O=     A Mexican on skis
^O,     A mexican swimming crawl style  (frontal view)		

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".

Stick Men doing sport

Compose a little album of stick men doing sport (3 to 5 poses). You will find an example of stickmen doing yoga

Flower album

Compose a little album of flowers made up of simple geometrical shapes like circles, ellipses, lines, rectangles (3 to 5 flowers). Aim for patterns like the ones on this image (banner on top of the page). The point of the exercise is to experiment with positioning rather than complex drawings.

You may need to rotate shapes to obtain the effect you are after. Simply use:

 sprite.rotation = 15

This will present the sprite rotated at an angle of 15 degrees.

Why not share?

If you come up with some cool stuff, why not upload a photo on the AS3edu Flicker group. As always when you put material on the web, avoid any material of a nature to shock an underage age kid.