Adventure

**I. Introduction**
After yet another humiliating defeat at the hands of Captain Hammer, it seems Dr. Horrible's henchmen require more training. While they have mastered the subtleties of evil robot remote control, they lack the decision making skills of an evil genius. Dr Horrible has asked you, nay, //commanded// you, to develop a Desert Island Survival Trainer (TM).

media type="custom" key="7695557" align="center"

II. Learning Objectives //**Knowledge**// //**Skills.** By the end of the lesson, you will be able to...//
 * **States** -- Flex states are a way to add multiple screens to your application.
 * **Font assets** -- To use a special font, you need to include it as an asset in your application.
 * Use Flex states to create a "choose your own adventure" game

**III. Concepts**
Flex states are a way to add multiple screens to you application. You can lay out a set of components one one screen, click a button to go to the next screen, and have a different set of components on the next screen. You can also have components that live on more than one screen. For example, take a look at this application: media type="custom" key="7828537" align="center"
 * States**

Now look at the MXML:

code format="mxml"  

 <![CDATA[ protected function button1_clickHandler(event:MouseEvent):void{ currentState = "Page2"; }

protected function button2_clickHandler(event:MouseEvent):void{ currentState = "Page1"; }       ]]>    

   

      </s:BorderContainer>

</s:Application>

code There are two states in this application: Page1 and Page2. Look at the "//I'm on every page"// label and the "//Page 1//" label. The //Page1// label has an extra property called "includeIn" that specifies that it should only appear in the "Page1" state. Components without the includeIn property will appear on every state. Now look at the click handlers for the buttons. When each handler is called it changes which state is shown by setting the "currentState" property of the application.

That's really all there is to states, but they are incredibly useful for making applications with multiple screens.

If you want to use a special font in your application, you need to embed it. One way to do this is with the following code: code format="mxml" <fx:Style> @font-face { src: url("../assets/Monotype Corsiva"); fontFamily: myFontFamily; advancedAntiAliasing: true; }       global {           font-family: myFontFamily; } </fx:Style> code The //@font-face// section embeds the font. The //global// section makes the font the default for the application.
 * Fonts**

For this to work, the font needs to be in the location you specified. To make the above work, you would have to do something like:
 * Find the original font, for example, on Mac OS X, Monotoype Corsiva is located at /Library/Fonts/Microsoft/Monotype Corsiva
 * In your flex project, create an assets folder and put the font in it

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**IV. Scenario**
Desert Island Survival Trainer (TM)

**Use Case** (Since this application has a lot of branches, it's easier to display the use case as a flow chart. Each box is a page and each arrow is a choice.)



<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**V. Program**
code format="mxml" <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="682" minHeight="400" width="682" height="400" currentState="Title" > <fx:Style> @font-face { src: url("../assets/Monotype Corsiva"); fontFamily: myFontFamily; advancedAntiAliasing: true; }       global {           font-family: myFontFamily; }   </fx:Style>

 <![CDATA[

private function goto(aState:String):void{ currentState = aState; }

]]>   </fx:Script>

 <s:State name="Title"/> <s:State name="Start"/> <s:State name="Sink"/> <s:State name="Jump"/> <s:State name="Lifeboat"/> <s:State name="Shore"/> <s:State name="BuildFire"/> <s:State name="Rested"/> <s:State name="Supplies"/> <s:State name="Ship"/> <s:State name="WildPig"/> <s:State name="Drown"/> <s:State name="Win"/> <s:State name="Miss"/> <s:State name="CampGone"/> <s:State name="GiveUp"/> </s:states> <fx:Declarations> </fx:Declarations> <s:BorderContainer x="10" y="10" width="664" height="380" > <s:HGroup width="601" height="39" x="29" y="19" horizontalAlign="center" > <s:Label includeIn="Title" text="Adventure!" fontSize="36"/> </s:HGroup> <s:VGroup x="31" y="65" width="600" height="240" > <s:TextArea includeIn="Title"         text="You are bored with your everyday life, so you booked passage on a ship.  Adventure seems to have found you, as the ship caught fire during the night.  Your survival depends on the choices you make.  Choose wisely!" width="600" borderVisible="false" editable="false" fontSize="28" height="213" textAlign="center"/> <s:TextArea includeIn="Start"         text="Your ship is burning. You feel it beginning to slip into the ocean. You can either try to put out the fire or jump from the ship!" width="600" borderVisible="false" editable="false" fontSize="28" height="240"  textAlign="center"/> <s:TextArea includeIn="Sink"       text="As you pour water on the flames, they only grow in intensity.  You find yourself engulfed in the flames." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Jump"        text="You find yourself in the water.  You see a lifeboat nearby, and some debris off in the distance.  Which do you swim toward?" width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Lifeboat"    text="As you reach the lifeboat, you can see it is already croweded to overflowing.  Still, you climb in, but your weight causes the boat to slip under the waves." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Shore"        text="The floating debris keeps you afloat until you drift to a tiny island.  You are exhausted.  Do you rest to regain your strength or try to start a fire?" width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="BuildFire"    text="You are trying unsuccessfully to build a fire." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Rested"        text="You feel well rested.  Now you must decide what to do next: build that fire, or start exploring the island." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Supplies"   text="As you explore the island, you discover several crates of supplies that drifted from the ship before it sank.  You now have the tools to build a shelter or go hunting. Which will you do first?" width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Ship"        text="As you begin work on your shelter, you see a ship on the distant horizon. Will you swim out to the ship, or build a signal fire?" width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="WildPig"    text="As you trudge through the jungle, you spot a wild pig.  You throw your spear and miss.  The pig charges at you.  Do you tackle it or run away?" width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Drown"        text="You swim towards the ship, but they never see you, and you are pulled into the middle of the ocean by a deadly current.&#xd;You lose." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Win"        text="You build asignal fire with the supplies you found.  The smoke climbs into the sky, and the ship comes in to rescue you.&#xd;You win!" width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="Miss"        text="You miss the pig, and it disappears &#xd;in the jungle" width="600"  borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="CampGone"    text="As you return to your camp, you find the tide has swept away all your supplies.  You now have no chance of survival.&#xd;You lose." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> <s:TextArea includeIn="GiveUp"        text="Fire is Life.&#xd;No fire, no life.&#xd;You lose." width="600" borderVisible="false" editable="false" fontSize="28" height="240" textAlign="center"/> </s:VGroup> <s:HGroup x="31" y="326" width="601" height="45" horizontalAlign="center" > <s:Button includeIn="Title" label="Begin" fontSize="24" height="40" width="148" x="227" click="goto('Start')"/> <s:Button label="Put out fire" fontSize="24" height="40" width="148" includeIn="Start" click="goto('Sink')"/> <mx:Spacer width="100%" includeIn="Start" height="13"/> <s:Button label="Jump" fontSize="24" height="40" width="148" includeIn="Start" click="goto('Jump')"/> <s:Button label="Try again" fontSize="24" height="40" width="148" includeIn="Sink" click="goto('Title')"/> <s:Button label="Lifeboat" fontSize="24" height="40" width="148" includeIn="Jump" click="goto('Lifeboat')"/> <mx:Spacer width="100%" height="13" includeIn="Jump"/> <s:Button label="Debris" fontSize="24" height="40" width="148" includeIn="Jump" click="goto('Shore')"/> <s:Button label="Try again" fontSize="24" height="40" width="148" includeIn="Lifeboat" click="goto('Title')"/> <s:Button label="Rest" fontSize="24" height="40" width="148" includeIn="Shore" click="goto('Rested')"/> <mx:Spacer width="100%" height="13" includeIn="Shore"/> <s:Button label="Build fire" fontSize="24" height="40" width="148" includeIn="Shore" click="goto('BuildFire')"/> <s:Button label="Keep trying" fontSize="24" height="40" width="148" includeIn="BuildFire" click="goto('BuildFire')"/> <mx:Spacer width="100%" height="13" includeIn="BuildFire"/> <s:Button label="Give up" fontSize="24" height="40" width="148" includeIn="BuildFire" click="goto('GiveUp')"/> <s:Button label="Build fire" fontSize="24" height="40" width="148" includeIn="Rested" click="goto('BuildFire')"/> <mx:Spacer width="100%" height="13" includeIn="Rested"/> <s:Button label="Explore" fontSize="24" height="40" width="148" includeIn="Rested" click="goto('Supplies')"/> <s:Button label="Build shelter" fontSize="24" height="40" width="148" includeIn="Supplies" click="goto('Ship')"/> <mx:Spacer width="100%" height="13" includeIn="Supplies"/> <s:Button label="Go hunting" fontSize="24" height="40" width="148" includeIn="Supplies" click="goto('WildPig')"/> <s:Button label="Swim" fontSize="24" height="40" width="148" includeIn="Ship" click="goto('Drown')"/> <mx:Spacer width="100%" height="13" includeIn="Ship"/> <s:Button label="Make signal" fontSize="24" height="40" width="148" includeIn="Ship" click="goto('Win')"/> <s:Button label="Tackle pig" fontSize="24" height="40" width="148" includeIn="WildPig" click="goto('Miss')"/> <mx:Spacer width="100%" height="13" includeIn="WildPig"/> <s:Button label="Run away" fontSize="24" height="40" width="148" includeIn="WildPig" click="goto('CampGone')"/> <s:Button label="Start over" fontSize="24" height="40" width="148" includeIn="Drown" click="goto('Start')"/> <s:Button label="Start over" fontSize="24" height="40" width="148" includeIn="Win" click="goto('Start')"/> <s:Button label="Return to camp" fontSize="24" height="40" width="148" includeIn="Miss" click="goto('campGone')"/> <s:Button label="Start over" fontSize="24" height="40" width="148" includeIn="CampGone" click="goto('Start')"/> <s:Button label="Start over" fontSize="24" height="40" width="148" includeIn="GiveUp" click="goto('Start')"/> </s:HGroup> </s:BorderContainer>

</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 exactly what the tag does, just try to guess for now.

<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!)
<span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">To write the program, do the following:
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Make a bunch of states
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Add the components you want on all states
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">remove the "includeIn" tag from the things you want on each page, this will make them appear on each state
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Click on each state then add/edit the components you want just for that state
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Add click listeners to the buttons -- make all of them use the same event handler
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Instead of passing the event in the event handler, pass it the name of a state
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Inside the click handler, change the currentState property of the application

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VIII. On your own (Try it!)**
Now that you know how to use GUI components and states you can create an amazing range of interfaces. So think up an interface and try making it.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**XI. References**
This game is a flex version of the example in **Andy Harris' <span style="background-attachment: initial; background-clip: initial; background-color: initial; background-origin: initial; background-position: 100% 50%; background-repeat: no-repeat no-repeat; cursor: pointer; padding-right: 10px;">[|Beginning Flash Programming for Dummies] .**