tutorial: creating a state capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc ·...
TRANSCRIPT
![Page 1: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/1.jpg)
Tutorial: Creating a State Capital gameMy goals in creating this game was to build a Flash ActionScript 3.0 version of the game I had done in an older version of Flash and to separate the coding so that a different map, say countries and capitals of Central America, could be swapped in with a minimal amount of effort. I then realized that some of the text messages used the term 'state', which would be inappropriate in a quiz involving countries. I decided to separate the text messages from the code and input them using an XML file.
Note: my separation of text could be used for different languages, but only if the grammar corresponds to English.
The opening screen is the following:
Here is the screen after a wrong answer (clicking on Florida, say) after a question in which the correct answer is to click on New Mexico.
![Page 2: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/2.jpg)
The two Identify questions are presented by fading out all but one state:
![Page 3: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/3.jpg)
The correct answer in this case would be Oregon, which the player would indicate by typing in Oregon into the box. The game would respond:
![Page 4: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/4.jpg)
The most intricate question is the List neighbors (no map). All the states except one are made invisible (actually, alpha set to zero).
![Page 5: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/5.jpg)
As the player correctly types in the names of the neighbors, they re-appear on the map and the names are included. The game indicates "Okay" and not "Correct" because the question is not completely answered. For this and for other questions, it is possible to correct a wrong answer.
![Page 6: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/6.jpg)
The player must indicate explicitly when he or she is done by typing in an X. At this point, the game will produce "Correct".
Note: the game requires perfect spelling. This is a potential area for improvement! A related possibility is to allow the official 2 letter abbreviations.
Implementation
The implementation consists of 3 files: usstatesnew.fla, State.as, and texts.xml. The texts.xml is accessed during run time to populate the various variables holding Strings used for the questions and the follow-ups (e.g, CORRECT!). The State class definition is part of a package called statepuzzle. In concrete terms, this means the State.as file is in a folder named statepuzzle. The .fla file has a statement:
import statepuzzle.*;
and the Publish Settings are set to point to a folder containing the statepuzzle folder. The State.as file has code to load the texts.xml file.
![Page 7: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/7.jpg)
I added the questions one by one and that would be the best way to implement such a game. However, I will describe the final (for now) implementation. The first step in any case is designing the how information is kept and creating the map elements. I took a map of the United States and cut out each state and made it into its own movie clip symbol. Unlike the jigsaw puzzle (see the jigsaw tutorials), the registration point/transformation point is not changed. All state symbols have the same registration point. The following screen shot of the Flash environment shows the symbol for New York (symbol name newyork and instance name newyork) as well as the colorado movie clip symbol in the Library. Notice the position of the cross-hairs for each one.
This means that the states are all put together when they are at the same place—that is, when their x,y are the same. Actually, I moved Hawaii and Alaska slightly. They are not to scale nor positioned accurately in most maps, so this game is no different.
NOTE: it is important to be able to select the individual states within the map image. Images created within Flash have the characteristic that a patch of the same color can be selected. This is part of so-called vector graphics. Bitmaps do not have this characteristic. To turn a bitmap into a base that you can work with to select the individual states, do the following:
1. Insert New Symbol (movie clip). You can call it base.
![Page 8: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/8.jpg)
2. Click on File/Import/Import to Stage. Then browse to the image file you have identified.
3. Click on Modify/Bitmap/Trace Bitmap. This will produce a vector graphic version of the image.
My way of encoding the information is to define a State class. The object variables for each State would include the state name, capital and a reference to the movie clip symbol that shows the state graphically. There would be many class variables as well as several class methods. One of the class variables is an array that holds for each state an array that lists all the border (neighboring) states. It is in alphabetical order by state. [Note: alphabetical order by the full state name. This is slightly different than by abbreviation.] Put more exactly, this array is set up through a call to the setup method. The State.as file is independent of any particular geographic data. The names and capitals and the borders was laborious to put in. For the previous version, I wrote code that calculated the borders and output the information using traces but I wasn't that confidant and did it this time 'by hand'.
Building the usstatesnew.fla file
The usstatesnew.fla file, then, consists of symbols for each state in the Library. Bring an instance of each one to the Stage and give it a name. Make the X Y for each state be the same thing. This will have the effect of reconstructed the map. As I indicated, you can take liberties with Hawaii and Alaska.
Go to Insert/New Symbol and create a new symbol called hook. Move an instance to the Stage and name it hook. Place this on the Stage right below the map. It will be used to position the rest of the interface. Specifically, the State class method setup is invoked with hook as one of the parameters. The code for setting up the radio buttons and other parts of the interface are generated during runtime.
![Page 9: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/9.jpg)
Go to Window/Component and move a Radiobutton and a Button to the Library.
Go to File/Publish Settings Flash Settings and browse to the as3 folder (this is my standard that I do for all of these. It will contain a folder named statepuzzle that has a file named State.as).
The code for usstatenew.fla (go to Windows/Action and put the code in the first and only frame) is:
import statepuzzle.*;var neighbors:Array = [];
var s1:State = new State("Alabama","Montgomery",alabama);neighbors.push(["Florida","Georgia","Tennessee","Mississippi"]);var s2:State = new State("Alaska","Juneau",alaska);neighbors.push([]);
![Page 10: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/10.jpg)
var s3:State = new State("Arizona","Phoenix",arizona);neighbors.push(["New Mexico","Colorado","Utah","Nevada","California"]);var s4:State = new State("Arkansas","Little Rock",arkansas);neighbors.push(["Louisiana","Mississippi","Tennessee","Missouri","Oklahoma","Texas"]);var s5:State = new State("California","Sacramento",california);neighbors.push(["Arizona","Nevada","Oregon"]);var s6:State = new State("Colorado","Denver",colorado);neighbors.push(["Arizona","New Mexico","Oklahoma","Kansas","Nebraska","Wyoming","Utah"]);var s7:State = new State("Connecticut","Hartford",connecticut);neighbors.push(["New York","Rhode Island","Massachusetts"]);var s8:State = new State("Delaware","Dover",delaware);neighbors.push(["New Jersey","Pennsylvania","Maryland"]);var s9:State = new State("Florida","Tallahassee",florida);neighbors.push(["Georgia","Alabama"]);var s10:State = new State("Georgia","Atlanta",georgia);neighbors.push(["Florida","Alabama","Tennessee","South Carolina","North Carolina"]);var s11:State = new State("Hawaii","Honolulu",hawaii);neighbors.push([]);var s12:State = new State("Idaho","Boise",idaho);neighbors.push(["Washington","Oregon","Nevada","Utah","Wyoming","Montana"]);var s13:State = new State("Illinois","Springfield",illinois);neighbors.push(["Wisconsin","Iowa","Indiana","Kentucky","Missouri"]);var s14:State = new State("Indiana","Indianapolis",indiana);neighbors.push(["Illinois","Michigan","Ohio","Kentucky"]);var s15:State = new State("Iowa","Des Moines",iowa);neighbors.push(["Missouri","Illinois","Wisconsin","Minnesota","South Dakota","Nebraska"]);var s16:State = new State("Kansas","Topeka",kansas);neighbors.push(["Oklahoma","Missouri","Nebraska","Colorado"]);var s17:State = new State("Kentucky","Frankfort",kentucky);neighbors.push(["Missouri","Tennessee","Virginia","West Virginia","Ohio","Indiana","Illinois"]);var s18:State = new State("Louisiana","Baton Rouge",louisiana);neighbors.push(["Mississippi","Arkansas","Texas"]);var s19:State = new State("Maine","Augusta",maine);neighbors.push(["New Hampshire"]);var s20:State = new State("Maryland","Annapolis",maryland);neighbors.push(["Delaware","Pennsylvania","Virginia","West Virginia"]);var s21:State = new State("Massachusetts","Boston",massachusetts);neighbors.push(["New Hampshire","Vermont","Connecticut","Rhode Island","New York"]);var s22:State = new State("Michigan","Lansing",michigan);neighbors.push(["Ohio","Indiana","Wisconsin"]);var s23:State = new State("Minnesota","St. Paul",minnesota);
![Page 11: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/11.jpg)
neighbors.push(["North Dakota","South Dakota","Iowa","Wisconsin"]);var s24:State = new State("Mississippi","Jackson",mississippi);neighbors.push(["Alabama","Louisiana","Arkansas","Tennessee"]);var s25:State = new State("Missouri","Jefferson City",missouri);neighbors.push(["Arkansas","Oklahoma","Kansas","Nebraska","Iowa","Illinois","Kentucky","Tennessee"]);var s26:State = new State("Montana","Helena",montana);neighbors.push(["Idaho","Wyoming","North Dakota","South Dakota"]);var s27:State = new State("Nebraska","Lincoln",nebraska);neighbors.push(["Wyoming","Colorado","Kansas","Missouri","Iowa","South Dakota"]);var s28:State = new State("Nevada","Carson City",nevada);neighbors.push(["California","Oregon","Idaho","Utah","Arizona"]);var s29:State = new State("New Hampshire","Concord",newhampshire);neighbors.push(["Vermont","Massachusetts","Maine"]);var s30:State = new State("New Jersey","Trenton",newjersey);neighbors.push(["Pennsylvania","Delaware","New York"]);var s31:State = new State("New Mexico","Santa Fe",newmexico);neighbors.push(["Texas","Arizona","Colorado","Utah","Oklahoma"]);var s32:State = new State("New York","Albany",newyork);neighbors.push(["Vermont","Massachusetts","Connecticut","New Jersey","Pennsylvania"]);var s33:State = new State("North Carolina","Raleigh",northcarolina);neighbors.push(["South Carolina","Georgia","Tennessee","Virginia"]);var s34:State = new State("North Dakota","Bismarck",northdakota);neighbors.push(["Minnesota","South Dakota","Montana"]);var s35:State = new State("Ohio","Columbus",ohio);neighbors.push(["Michigan","Indiana","Pennsylvania","West Virginia","Kentucky"]);var s36:State = new State("Oklahoma","Oklahoma City",oklahoma);neighbors.push(["Texas","New Mexico","Colorado","Kansas","Missouri","Arkansas"]);var s37:State = new State("Oregon","Salem",oregon);neighbors.push(["Washington","Idaho","Nevada","California"]);var s38:State = new State("Pennsylvania","Harrisburg",pennsylvania);neighbors.push(["New York","New Jersey","Delaware","Maryland","West Virginia","Ohio"]);var s39:State = new State("Rhode Island","Providence",rhodeisland);neighbors.push(["Connecticut","Massachusetts"]);var s40:State = new State("South Carolina","Columbia",southcarolina);neighbors.push(["Georgia","North Carolina"]);var s41:State = new State("South Dakota","Pierre",southdakota);neighbors.push(["Iowa","Minnesota","North Dakota","Montana","Wyoming","Nebraska"]);var s42:State = new State("Tennessee","Nashville",tennessee);neighbors.push(["Mississippi","Alabama","Georgia","North Carolina","Virginia","Kentucky","Missouri","Arkansas"]);var s43:State = new State("Texas","Austin",texas);neighbors.push(["Louisiana","Arkansas","Oklahoma","New Mexico"]);
![Page 12: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/12.jpg)
var s44:State = new State("Utah","Salt Lake City",utah);neighbors.push(["New Mexico","Arizona","Nevada","Idaho","Wyoming","Colorado"]);var s45:State = new State("Vermont","Montpelier",vermont);neighbors.push(["New York","New Hampshire","Massachusetts"]);var s46:State = new State("Virginia","Richmond",virginia);neighbors.push(["Maryland","West Virginia","Kentucky","Tennessee","North Carolina"]);var s47:State = new State("Washington","Olympia",washington);neighbors.push(["Idaho","Oregon"]);var s48:State = new State("West Virginia","Charleston",westvirginia);neighbors.push(["Pennsylvania","Maryland","Virginia","Kentucky","Ohio"]);var s49:State = new State("Wisconsin","Madison",wisconsin);neighbors.push(["Michigan","Minnesota","Iowa","Illinois"]);var s50:State = new State("Wyoming","Cheyenne",wyoming);neighbors.push(["Idaoho","Montana","South Dakota","Nebraska","Colorado","Utah"]);
State.setup(hook,neighbors);
NOTE: you can omit the setting up of neighbors and get the rest of the game working.
Building the State.as file
The State.as file contains the working code for the game. This code will work for any map.
Recall that static methods and variables mean that there is just one for the whole application. The other methods and variables are one for each object instance. So there is just one states array that holds all the states. In contrast, the variable statename exists for each State. There are two object methods: the constructor State and the function handleclick that detects that the movie clip instance representing the State was clicked on. All the other methods are class methods.
The setup method sets up the board, most specifically the radio buttons and a text field for input and 3 places for information for the player. The texts used in each of these were originally spread throughout the code. I then put them in variables. Finally, I include code that reads in the information from an XML file and replaces what is there. You can look at what is in the code to see the intent of the messages.
internal static var leadins:String = "Select type of question then click NEXT button ";
internal static var questiontexts:Array=["Find state","Find state with capital","Identify state", "Identify capital","List neighbors", "List neighbors (no map)", "Pick your own" ];
![Page 13: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/13.jpg)
internal static var correctokwrong:Array = ["Correct","Okay","Wrong"]
internal static var nextlabel:String = "NEXT";internal static var moretexts:Array = [
" Now click what you named. ","Click on state named ","Click on state with capital ","Type name of highlighted state","Type capital of highlighted state","Type one at a time neighbors of ","Neighbors: ","Type one at a time neighbors of ","Type a state name then click on it in the map",". Type X when done."
];
There are 7 questions, represented by the array questiontexts that holds what will be the labels for the radio buttons and the array methods
internal static var methods:Array=[askstate, askcapital, namestate, namecapital, listneighbors, listneighborsnomap, pick];
These are the names of the methods that set up the handling for the questions. In most cases (all but the last, pick), this includes using Math.random to choose a State at random on which to base the question. The questiontexts and the methods arrays are what are called parallel structures. IF YOU WANT TO ADD ANOTHER QUESTION: you need to add an element to both arrays. This would mean adding to the xml file, also, to get the appropriate texts. You would need to modify and add to one or both of the handleclick and the getinput methods. The handleclick is the handler for clicking on a state and the getinput is the handler for typing in and clicking the enter key for the input text field named ans.
The handling of the interface after set up and during play can be thought of as being in three time periods: waiting for a radio button to be clicked determining the type of question, setting up the question, and then handling the player response. The responses are either clicking somewhere on the map or filling in the text input field. The methods that detect responses use various Boolean variables to determine which type of question is being asked or, to put it more precisely, how to check the answer. Note: I made this a rather loose design: a player can try again after getting something wrong (or after getting something correct). A player can call for a new question (click on the NEXT button or select a different one of the radio buttons and click on the NEXT button) even before answering a question. I saw this as more of a way to test myself on the states than as a
![Page 14: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/14.jpg)
contest. The code would need to be changed to make the game strict. I did make the find neighbors puzzle produce the complete list of neighboring states if the player clicked the X prematurely.
General comments on [my] jargon: A Boolean value, that is, one that can be true or false, is often called a flag. Something constructed using a class definition is called an object. The method named State is termed the constructor method for the class State. In Flash, movie clip instances also are objects. There also are Radiobutton objects, Button objects, etc. These things also may be called object instances. It is important to make sure the movie clip instances are given names. In this application, there are State objects. They are constructed by calls to the State method passing in the state name, the capital name and the movie clip instance name. Each constructed State will contain a reference to a movie clip instance. The reference is in the object variable mclip. Note that the use of the variable names statename, states, etc. are not shown to the player, so if you re-do this game (use the State.as file, but make your own .fla file) with countries and change the texts.xml file, everything should work. HOWEVER, do note that the coding assumes that a player is asked to use X to indicate he/she is through with naming neighbors.
package statepuzzle{ package openimport flash.text.*;import flash.events.*;import fl.events.*;import flash.display.*;import fl.controls.*;import fl.events.ComponentEvent;import flash.net.*;public class State { class definition open
internal static var states:Array=[]; array of all state objects constructed
internal static var hook:MovieClip; used for displaying the interface
internal static var ins:TextField; instructionsinternal static var ans:TextInput; player inputinternal static var work:TextField; where the neighbors will gointernal static var results:TextField; correct or wrong or okayinternal static var rbg:RadioButtonGroup=new
RadioButtonGroup("gp");The group for the radio buttons (holding the questions)
internal static var rbystart:int=62; for vertical placement of radio buttons (relationship to the hook object passed in)
internal static var borderq:Boolean; indicates if this is a neighbor question
internal static var pickq:Boolean; indicates if this is a pick your own question
internal static var bordernomapq:Boolean; indicates if this is a neighbor with no map question
![Page 15: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/15.jpg)
internal static var myXML:XML = new XML(); For the texts.xml fileinternal static var XML_URL:String = "texts.xml"; name of fileinternal static var myXMLURL:URLRequest = new
URLRequest(XML_URL);the request to fetch the file
internal static var myLoader:URLLoader = new URLLoader();
the URLLoader object
internal static var leadins:String = "Select type of question then click NEXT button ";
The initial message
internal static var questiontexts:Array=["Find state","Find state with capital","Identify state", "Identify capital","List neighbors", "List neighbors (no map)", "Pick your own" ];
Texts for the questions
internal static var correctokwrong:Array = ["Correct","Okay","Wrong"]
Texts for the results
internal static var nextlabel:String = "NEXT"; Text for the next question button label
internal static var moretexts:Array = [ Miscellaneous texts" Now click what you named. ","Click on state with capital ","Click on state with capital ","Type name of highlighted state","Type capital of highlighted state","Type one at a time neighbors of ","Neighbors: ","Type one at a time neighbors of ",
"Type a state name then click on it in the map",". Type X when done."
];internal static var
methods:Array=[askstate,askcapital,namestate, namecapital,listneighbors, listneighborsnomap,pick];
Holds the method names corresponding to the questions indicated by the radio buttons
internal static var nextbtn:Button=new Button; Part of interfaceinternal static var answertoquestion:State; Used for certain questionsinternal static var textanswer:String=""; Used for certain questionsinternal static var bd:Array; Used for the neighbor
questionsinternal static var borders:Array; Holds the neighbor information
(set in setup)internal static var n:int; Set to be number of state
objects constructed. This is to save calling states.length again and again.The next 3 are the 3 object variables: one per state
![Page 16: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/16.jpg)
constructedinternal var statename:String; name of stateinternal var capital:String; name of state capitalinternal var mclip:MovieClip; the movie clip symbol that
shows the state
public function State(sn:String,cn:String,mc:MovieClip):void {
Constructor function
statename=sn; Sets object variable for the state name
capital=cn; …. the capital namemclip=mc; …. the movie clip symbol
mclip.addEventListener(MouseEvent.CLICK,handleclick);sets up event handling for the mouse click on this state
states.push(this); add this state to the states arrayn = states.length; re-sets n so it will hold
states.length. } close the State method
public static function setup(ahook:MovieClip,bd:Array):void {
Class method (just one) to do the setting up of the interface (radio buttons, next button, text fields, input text field)
borders=bd; Set borders datahook=ahook; Set hookins=new TextField ; Create new text fieldans=new TextInput ; Create new text input fieldwork=new TextField ; Create new text fieldresults=new TextField ; Create new text fieldhook.addChild(ins); Add to display list, using hook.
this also positions each object in terms of hook
hook.addChild(ans);hook.addChild(work);hook.addChild(results);ins.width=430; reset widthswork.width=630;ans.width=200;results.width=200;ans.x=640; move overwork.y=40; move downresults.x=640; move overresults.y=40; …. and down
ans.text=""; Put in initial text of blanks.
![Page 17: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/17.jpg)
work.text="";results.text="";
ans.addEventListener(ComponentEvent.ENTER,getinput);Set up event handling for the text input field
myLoader.load(myXMLURL); Start loading of the xml file
myLoader.addEventListener(Event.COMPLETE,finishsetup);Set up event handling for the xml file. NOTICE: no error handling
} Close setup method
internal static function finishsetup(ev) { Method that finishes the setup. This is the handler for the xml file complete loading
var i:int; Used for iterationsmyXML=XML(myLoader.data); Creates an XML object.
NOTICE: no error handling such as try and catch.
//trace("myXML is "+myXML); You can uncomment this line to see the XML file
leadins = myXML.leadins; Set this value and ins.text= leadins; … use it immediately. This is
done to make the coding consistent. The leadins value does not need to be saved.
nextlabel = myXML.nextlabel; Set this value and nextbtn.label=nextlabel; … use it immediately for the
button label. This is to make the coding consistent.
correctokwrong[0] = myXML.correct; Set values used for results: the good value
correctokwrong[1] = myXML.okay; the okay valuecorrectokwrong[2] = myXML.wrong; the wrong/bad valuei=0; Because this is a for each, the
iteration for questiontexts needs to be done explicitly
for each (var qt:XML in myXML.qtext) { Sets successive elements of the questiontexts array
questiontexts[i] = qt[0]; Set the value from the xml i++; increment i
} close for eachfor (i=0; i < questiontexts.length; i++) { This iteration builds the
RadioButton objects, positions them, sets the label
var rb:RadioButton=new RadioButton; create a new radiobutton
![Page 18: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/18.jpg)
rb.group=rbg; associate it with the grouprb.x=10; position it horizontallyrb.y=rbystart; position verticallyrbystart+= 25; … then increase rbystart for
the next onerb.setSize(200,30); set the sizerb.label=questiontexts[i]; get the label from questiontextsrb.value=i; set the valuehook.addChild(rb); display by adding to hook
} close for loop
hook.addChild(nextbtn); display the buttonnextbtn.x=200; position the button horizontallynextbtn.y=rbystart; and vertically below the last
radio buttonnextbtn.addEventListener(MouseEvent.CLICK,getquestion); Event handling is done for the
next button (not for clicking on the radio buttons)
} close the finishsetup method
internal static function getquestion(ev):void { method for handling clicking on the button
var q:int=Number(rbg.selectedData); picks up the data that will indicate which question
methods[q](); Now use that number to invoke a specific method
} close getquestion method
internal function handleclick(ev) { handleclick method for handling (responding to) the event of clicking on a state
if (pickq) { Determination done differently depending on if this is a pick your own or one of the find questions
if (this.statename==ans.text) { (pick your own) does the name of this state match what the player typed into the ans field
results.text = correctokwrong[0]; …good} else {results.text = correctokwrong[2]; … bad}
} else if (this == answertoquestion) { Not a pick your own, so use the answertoquestion data to compare with this
![Page 19: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/19.jpg)
results.text=correctokwrong[0]; … good} else {
results.text=correctokwrong[2]; … bad}
} close method
internal static function getinput(ev) { class method getinput. Handles the player typing and then clicking on the enter key.
if (pickq) { If this is a pick your ownins.text=moretexts[0]; output a message
} else if (borderq) { if one of the two neighbor questions
if (ans.text == "X") { is the player saying it is all done?
if (bd.length == 0) { If this is true,
results.text=correctokwrong[0];…. good
} else { if not
results.text=correctokwrong[2];… bad
for (var j:int = 0; j<bd.length; j++) {
and then output the remaining neighboring states
work.appendText(" "+bd[j]);append to the work field text
} close iteration} close the else
} else { if the player didn't type Xif (bd.length == 0) { but there were no more
neighbors
results.text=correctokwrong[2];…. indicate bad answer
} else { else…var nf:Boolean = true; will search to see if the player
did put in a valid neighbor. The nf variable stands for not found
for (var i:int=0; i<bd.length; i++) { iterate over the bd arrayif (bd[i]==ans.text) { is it on the list?
nf = false; flip the nf flag
results.text = correctokwrong[1];output the "okay" result. This is meant to convey: okay so far.
work.appendText(" "+ans.text);Add the just named state to the work area
![Page 20: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/20.jpg)
if (bordernomapq) { If this is the name neighbors without benefit of the map, will find the corresponding mclip and make it visible
for (var k:int=0; k<n; k++) {iterate over all the states
if (states[k].statename==ans.text) {if this is the one just named
states[k].mclip.alpha = 1;make it visible (set alpha to 1)
break;break out of for loop
}close if
} close for k loop} close if bordernomapq
ans.text= "";erase input area
bd.splice(i,1);//remove item foundremove from bd
} close if bd[i]==ans.text} close for i loop
if (nf) { Was the answer correct (was it found on bd)?
results.text = correctokwrong[2]; not yet found: output bad} close if
} close } not a X
} else if (textanswer == ans.text) { not a neighbor questionresults.text=correctokwrong[0]; output … good
} else { not right answerresults.text=correctokwrong[2]; … bad
} close else} close method
internal static function askstate():void { askstate method for setting up to identify a random state
var ch:int=Math.floor(Math.random() * n); Get random valueanswertoquestion=states[ch]; Set up for checkingtextanswer=""; set this value to blankfor (var i=0; i < n; i++) { Iterate over all the states ...
states[i].mclip.alpha=1; ... to make them all visible} close for
ins.text=moretexts[1] + answertoquestion.statename; Display the question
![Page 21: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/21.jpg)
ans.text=""; blank out inputresults.text=""; resultspickq = false; set flag to false
} close method
internal static function askcapital():void { askcapital method for setting up question using capital
var ch:int=Math.floor(Math.random() * n); get random valueanswertoquestion=states[ch]; set up for checkingtextanswer=""; set this to blankfor (var i=0; i < n; i++) { Iterate over all the states
states[i].mclip.alpha=1; ... to make them all visible} close for
ins.text=moretexts[2] + answertoquestion.capital; display the questionans.text=""; blank out inputresults.text=""; … resultspickq = false; set flag to false
} close method
internal static function namestate():void { namestate methodvar ch:int=Math.floor(Math.random() * n); Get random valuefor (var i=0; i < n; i++) { Now iterate
states[i].mclip.alpha=.3; ... to make all states faded} close forstates[ch].mclip.alpha=1; make the chosen state be full
alphatextanswer=states[ch].statename; set up the answerins.text=moretexts[3]; display questionans.text=""; blank the input fieldresults.text=""; resultsborderq=false; set flag to falsepickq = false; set flag to false
} close method
internal static function namecapital():void { namecapital method for setting up a question on the capital
var ch:int=Math.floor(Math.random() * n); Get random valuefor (var i=0; i < n; i++) { Now iterate
states[i].mclip.alpha=.3; ... to make all states faded} close forstates[ch].mclip.alpha=1; Make the chosen state be full
alphatextanswer=states[ch].capital; set up the answerins.text=moretexts[4]; display questionans.text=""; blank the input field
![Page 22: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/22.jpg)
results.text=""; resultsborderq=false; set flag to falsepickq = false; set flag to false
} close method
internal static function listneighbors():void { listneighbors method for setting up question on neighbors
for (var i=0; i < n; i++) { Iteratestates[i].mclip.alpha=1; .. to make all states fully
visible} close forvar ch:int=Math.floor(Math.random() * n); pick a random state
ins.text=moretexts[5] + states[ch].statename + moretexts[9]; display questionborderq=true; set this flag to truebordernomapq = false; set this flag to falsepickq= false; set flag to falsebd=borders[ch]; save the borders (neighbors)
for this choiceresults.text=""; blank resultsans.text = ""; blank inputwork.text = moretexts[6]; display question
} close method
internal static function listneighborsnomap():void { listneighborsnomap method for handling the question about neighbors that displays map with all the other states not visible
for (var i=0; i < n; i++) { Iteratestates[i].mclip.alpha=0; make all states not visible,
that is, alpha of zero} close forvar ch:int=Math.floor(Math.random() * n); choose a state
ins.text=moretexts[7] + states[ch].statename + moretexts[9]; display question (constructed using two texts with state name in the middle)
borderq=true; set flag to truebordernomapq = true; set this flag also to truepickq= false; set flag to falsebd=borders[ch]; save the borders (neighbors)
for this choicestates[ch].mclip.alpha = 1; make chose state fully visibleresults.text=""; blank out resultsans.text = ""; blank out input field
![Page 23: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/23.jpg)
work.text = moretexts[6]; display question} close method
internal static function pick():void { pick method for the do-it-yourself question
for (var i=0; i < n; i++) { Iteratestates[i].mclip.alpha=1; make sure each state is fully
visible} close forins.text=moretexts[8]; display questionans.text=""; blank out input fieldresults.text=""; resultswork.text=""; work areapickq=true; set flag to trueborderq = false; set flag to false
} close pick method} close class definition
} close package
Remember to save this file (it MUST be named State.as) in a folder named statepuzzle in another folder (I make mine as3) at the top of the drive for the PC and in the same folder as the .fla file for the MAC.
Building the texts.xml file
The texts.xml file could serve to make the messages appropriate for a map of countries and capitals or in another language. The messages do assume a similarity to English grammar and word order. For example, the phrase Click on state with capital is to be followed by the name of the state. You can change the word state to country but if the word order doesn't work to have the state/country name follow, the message will not work. Note also that the player is asked to type X when done naming neighbors.
The file here is essentially the same as the original texts. There are some changes I put in to convince myself that the code was working—that the xml file was being used for the messages. This file as listed below may not be the one in use on the website.
<?xml version="1.0" encoding="utf-8"?><texts><nextlabel>NEXT</nextlabel><qtext>Find state</qtext><qtext>Find state with capital</qtext><qtext>Identify state</qtext><qtext>Identify capital</qtext><qtext>List neighbors</qtext><qtext>List neighbors (no map)</qtext>
![Page 24: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/24.jpg)
<qtext>Pick your own</qtext><leadins> Select what type question you want. Then click NEXT button.</leadins><correct>CORRECT!</correct><okay>Okay</okay><wrong>WRONG (sigh)</wrong><mtext>Now click what you named. </mtext><mtext>Click on state with capital </mtext><mtext>Click on state with capital </mtext><mtext>Type name of highlighted state.</mtext><mtext>Type capital of highlighted state.</mtext><mtext>Type one at a time neighbors of </mtext><mtext>Neighbors: </mtext><mtext>Type one at a time neighbors of </mtext><mtext>Type a state name then click on it in the map.</mtext><mtext>. Type X when all done.</mtext></texts>
Remember that this file is accessed at runtime, so it must be uploaded to the same folder on the server as the .swf and .html files.
Opportunities for improvement
Error handling for the xml file, including using the text already in the code if there is no file or the file is not proper xml.
Error handling for typing in a non-existent state for the pick your own question.
Option for the player to choose among xml files, appropriate for different languages.
Some tolerance on mis-spelling, perhaps constructing some sort of closest match if nothing found.
NOTE: I made changes to disregard case. For example, if (textanswer.toLowerCase() == ans.text.toLowerCase()) I also changed to allow X or x to signal termination of a list and if the player did not enter all the neighbor states, I put the remainder in uppercase:
![Page 25: Tutorial: Creating a State Capital gamefaculty.purchase.edu/jeanine.meyer/as30/statecapitals.doc · Web viewMy goals in creating this game was to build a Flash ActionScript 3.0 version](https://reader036.vdocuments.site/reader036/viewer/2022071113/5fe9de957d7cf75267182e7d/html5/thumbnails/25.jpg)
for (var j:int = 0; j<bd.length; j++) {work.appendText(" "+bd[j].toUpperCase());
}
This may be too forgiving.
Optional use of 2 letter state abbreviations.
Add questions (in one or both directions) on the 2 letter abbreviations.
Add a 'give up option'.
Design and implement a strict-mode with no or restricted chances to try again. When this is done, add scoring.
???