Robot+Army

**I. Introduction**
Excellent. Based on the results of the pretest, Dr. Evil has chosen a select group of henchmen for advanced training. He needs you to develop the Evil Robot Training Simulator (TM) Mark III for training super-evil henchman to control a whole robot army at once.

media type="custom" key="7723479" align="center" ****II. Learning Objectives**** //**Knowledge**// //**Skills**//
 * Display List (Tree)
 * Z-order
 * Add and remove items from the display list
 * Manipulate the z-order of items in the display list

**III. Concepts**
When you create a GUI, you are nesting visual components inside each other likes folders inside folders. This collection of visual components is called the display list. For example, we could represent a portion of the display list for the program above in the following tree:
 * Display List (Tree)**

The //stand, clap, stomp, jump,// and //make army// buttons, the //field,// and //radio// are called //children// of the Application component. The Application is the //parent// of the buttons, field, and radio. The //field// also has 10 //robots// as children (although only 4 are shown in the diagram). In the other programs you've made, you manipulated the display list by nesting mxml tags inside each other. In most of your previous programs the display list doesn't change during the life of the program. Although, in the choose-your-own-adventure program, you did dynamically change the display list by using Flex's //states//. You can also manipulate the display list programmatically using actionscript. Most of the visual components in Flex (or at least the ones that extend //DisplayObjectContainer//) have two methods called //addChild// and //removeChild// which can be used to add and remove children from a component. For example, when you click on the //make army// button in the program above, the program calls //addChild// on the //Field// object to add robots to the field, and //removeChild// on the //Field// object to remove the old robots from the field. This is also what Flex states do behind the scenes to dynamically change the appearance of the GUI.

What happens when two visual components overlap? Which get's drawn in front of the other? The answer is that the components are drawn depending on their order in the display list. For example, the child at position 0 is drawn first, the child at position 1 is drawn next, and so on. So an children with lower positions are drawn in back of children with higher positions. This is sometimes called the z-order, (you know, like coordinates x, y, and z).
 * Z-order**

We can manipulate the z-order of a child by using the addChildAt method, for example, if we have a robot and field, we can say field.atChildAt(robot, 0) to add the robot to the back of field behind any other children. By default, when we call the addChild method, we add the child to the highest position in the list so it will appear in front.

All the GUI components in Flex are essentially 2-dimensional, although we get another half dimension via the z-order. The program above creates the illusion of three dimensions by making the robots at the back of the display list smaller than the robots at the front of the list. All the Flex visual components have a //scaleX// and //scaleY// property. If you set the values of these properties lower than 1, the component will be shrunk//.// The program first calculates each robot's vertical position on the field. Robots that are closer to the top of the screen are moved to the back of the display list and shrunk more, while robots closer to the bottom of the screen are moved to the front of the display list and shrunk less.
 * Scale**

**IV. Scenario**
**Evil Robot Training Simulator (Mark III)**

Use Case 1. Henchman clicks on "make army" button and 10 robots are created 2. Henchman clicks on "make army" button again and previous 10 robots are removed, and 10 new robots are added 3. Henchman clicks on the jump/clap/stomp button and the robots listening for the given action do the action 4. Henchman clicks on the stand button and all the robots stand

Before you start, you should know of some useful methods ...

Field has the following methods:
 * getPointOnField returns a Point somewhere on the field. A Point object has an x and y value.
 * getScaleForPoint(point:Point) takes one of the points created by getPointOnField and calculates a percentage between 0 and 1 for how large a robot at the given point should appear, with robots higher on the field being smaller than robots lower on the field, to create the illusion of depth.

RobotAction has the following methods and constants:


 * RobotAction.getRandomAction
 * RobotAction.STAND

RobotData has the following methods:
 * RobotData(actions:Array) defines the actions the robot will respond to. All the actions should be from RobotAction

Robot has the following methods:
 * robot.x sets the x position of the robot.
 * robot.y sets the y position of the robot.
 * robot.scaleX sets the magnification of the robot's width where 0 is infinitely small, 1 is full size, 2 is double size, etc.
 * robot.scaleY sets the magnification of the robot's height where 0 is infinitely small, 1 is full size, 2 is double size, etc.
 * robot.antennaVisible shows the robot's antenna if set to true
 * robot.robotData = new RobotData([ RobotAction.STAND, RobotAction.getRandomAction ])

**V. Program**
code format="mxml"       

 <![CDATA[ import edu.nu.easterday.robot.Robot; import edu.nu.easterday.robot.RobotAction; import edu.nu.easterday.robot.RobotData;

//==================================================           // Private //==================================================

/* Makes all ther robots and places them on the field. */           private function makeArmy(e:MouseEvent):void{ removeArmy; for(var i:int = 0; i < 10; i++){ _robots.push(makeRobot); }               _robots.sortOn("y", Array.NUMERIC | Array.DESCENDING); for each (var r:Robot in _robots){ _field.addChild(r); }           }

/* Removes all the robots from the field */ private function removeArmy:void{ for each (var r:Robot in _robots){ _field.removeChild(r); }               _robots = new Array; }

/* Creates a single robot and figures out it's position and the event to which the robot listens */ private function makeRobot:Robot{ var rob:Robot = new Robot; //set the position of the robot var lp:Point     = _field.getPointOnField; rob.x = lp.x - (rob.width/2); rob.y = lp.y - (rob.height) - 10; //set the scale of the robot var scale:Number = _field.getScaleForPoint(lp); rob.scaleX = scale; rob.scaleY = scale; //show the antenna rob.antennaVisible = true; //set the actions the robot will respond to               rob.robotData = new RobotData([RobotAction.STAND, RobotAction.getRandomAction]); return rob; }

/* Makes the radio tower send the signal and robots do the action. * @param action the action you want the robots to do. * @param robs the robots you want to do the action. */           private function doCommand(action:String):void{ _radio.broadcast(action); for each (var r:Robot in _robots){ r.setAction(action); }           }

]]>         <s:Button label="Stomp" click="doCommand(RobotAction.STOMP)"/> <s:Button label="Jump"    click="doCommand(RobotAction.JUMP)"/> </s:HGroup> <s:Button x="266" y="363" label="Make army" click="makeArmy(event)"/>

</s:Application>

code

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VI. Self-explain (Try it!)**
Go over each tag in the MXML program and explain out loud to yourself what it does. If you don't know what a line does, write down a question to ask.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VII. Program Walkthrough (Try it!)**
To create the program above, do the following: Make the //stand, clap, stomp,// and //jump// buttons make the radio broadcast an action.
 * Create a new flex project
 * Add the robot.swc, radio.swc, and field.swc files to the lib directory
 * Create the interface
 * In the event handler for the make army button (e.g., //makeArmy)//, create a robot and add it to the display list of the field. Use the //getPointOnField// and //addChild// methods of the Field to set the x and y position of the robot and to add it to the field. Test it to make sure it works.
 * If you keep clicking the //make army// button, it will keep adding robots. Change //makeArmy// so that it first removes any old robots before adding the new robots. Use the //removeChild//. Now when you click //makeArmy// repeatedly, only one robot should appear.
 * Now change //makeArmy// so that it adds 10 robots each time.
 * At this point, your robots should be overlapping each other in weird ways. Now, when you create your list of robots, sort them based on their y position before you add them to the field. This will make the robots higher on the screen appear in behind those lower on the screen.
 * Now when you create each robot, use getScaleForPoint method to change the scale of the robot.
 * When you create each robot, create a RobotData object with two actions one of which should include RobotAction.STAND. Use the action from the button to set the action of the robot.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**IX. Check yourself**
<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;"> ==<span style="font-size: 1.3em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">****<span style="font-size: 1.3em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**X. Feedback** **** ==