Jason Wilhelm Flash Final Procedure Document April 1, 2007
Background This Flash project to develop a basketball-themed math game prototype will fulfill part of the vision of the Hoop Magic Sports Academy’s (HMSA) project with GMU. The mission is to improve motivation and academic achievement in STEM disciplines and the vision is to allow K-12 students to participate in the analysis, design and development of sports-themed educational games focused on STEM content. Our project team has decided to design and develop two (2) sports-themed, educational game prototypes in Flash focusing on third and fourth grade Math content (according to the Virginia Standards of Learning), specifically fractions. The Flash project developed by me will focus specifically on “comparing and ordering fractions with like and unlike denominators” of up to twelve. Introduction This project will be a single-level game with a single level of difficulty. Students will be given basketballs, one at a time, with fractions on them. Likewise, the backboard will have a fraction on it. Students will then use their comparing skills to determine if the two fractions with unlike denominators reduce to the same number. If they are the same, the student will click on the backboard to shoot the ball; however, if they are different, the student will pass the ball to his/her teammate. There will be a single teammate standing on the
right of the screen (only this one character will be visible on the screen)—please note that this character will be designed by a graphic designer from the Mason Media Lab; however, it will be incorporated into the Flash solely by me. This character’s attributes (e.g.: hair, uniform) have been decided based on feedback from students in our weekly design workshops. Game Flow The flow of the game will conform to the flowchart below. The game will begin with the “Start” box after which the game will check to see if the student has played all of the balls in the invisible pool (this is a recurring question or ifstatement that will be tested after each iteration of the game play). Assuming the student has not already played all of the balls, a new ball with a new fraction will be pulled at random from the pool. The student will look at the fraction on the ball and at the fraction on the backboard (it will change each time the same as the ball’s fraction changes) to compare and determine whether they can be reduced to the same number. If the numbers are the same, the student will click on the backboard (it is my hope that attractive animation can be introduced at this stage); however, if the numbers are different, the student will click on his/her teammate to pass the ball. The game then checks to see if the student has chosen the correct answer and awards a point if correct or no points if incorrect. It is at this point that the game returns to the recurring question.
Game Objects The basic interface of this game includes the basketball court itself with the player standing at the free throw line. The image of the floor is taken from a photograph at the Hoop Magic Sports Academy’s courts, which has been blurred to fit the motif of a cartoon-like game. The Hoop Magic Logo, with the basketball, hoop, and swoosh motion trails removed, has been placed on the court in front of the free throw line. The lines on the court were created by adapting a model of a standard college basketball court from the web and
clearing all but the lines from the image overlay. A border was used around the edge of the court. Finally, the stands are filled with animated fans, which have been adapted from a Flash movie taken from iStockPhoto.com (a royalty-free image company). There are also the backboard image (a significantly modified Microsoft clipart image), the basketball (also a modified Microsoft clipart image), and the shot clock and score board were inspired by a Flash game developed by Fetelli.com. There is also the blue “Pass” button, which will be later replaced by a animated “Teammate” character, which is currently under development at the Mason Media Lab, and the red confirmation button at the end of every play. Basketball Court
Above is the original picture of the basketball court at the Hoop Magic Sports Academy. The image was lightened, rotated, skewed, and blurred in FireWorks order that it could be included in this game. Hoop Magic Logo
The original Hoop Magic logo (above left) was modified and tweaked extensively in Photoshop to remove the basketball, hoop, and swoosh motion trails. The result is included in the above right. This image was then included in the game just above the free throw line. Basketball Court Lines
The original basketball court from which the lines on the court were taken
is shown above left. Similar to the angles of skewing performed on the basketball flooring, the lines were altered significantly in order to make them gel with the court. Border
The border (shown above) used around the court was created using Fireworks and is used as a divider between the court and the stands. Crowds
The crowds were created by significantly modifying objects from a royaltyfree Flash movie I purchased on iStockPhoto.com (a screenshot of the original movie is shown above left). I created several additional folders and more than 200 additional layers in order to create stands full of fans. The fans’ apparent ethnicity have been changed to match the preferences of my target audience. The fans actions have been altered so that they will all stand and cheer at the same time. Currently, they stand up every five seconds without prompt. In the coming weeks, the fans will be synchronized to stand and cheer when a student chooses the correct answer. Other less significant elements have also been altered to ensure a fluid motion in this motif (the final result is seen in the above right).
Basketball Backboard: Image, Dynamic Text, and Button
The basketball backboard (before and after seen above) is an adapted Microsoft clipart image. I used Fireworks to move the basket down to allow more room for the fractions. Also, the target was removed and replaced with a bar to separate the numerator and denominator of each fraction. Two dynamic text fields each are then used for the numerator and denominator. These text fields were assigned a variable each so that they could be easily updated. Furthermore, the backboard was made into a button and given the following script: on(release) { clearInterval(interval); goToAndPlay(3); choice="shoot"; } The clearInterval() function has the effect of stopping the shot clock, as the student has “shot” the ball (rather answered the question). Frame 3 contains the IF-statements to determine if the answer is correct. Finally the variable “choice” records which answer the student selected. Students will click on this button to
indicate that they believe the fraction on the backboard to be the equivalent to (or reducible to) the fraction on the basketball. Basketball: Image and Dynamic Text
The basketball itself (before and after seen above) is also an adapted Microsoft clipart image. I used Fireworks to change the colors and to place a brown circle and red line for the fractions that will appear atop it. As with the basketball backboard, two dynamic text fields each are then used for the numerator and denominator. These two fields also have unique variables assigned to them. Shot Clock and Score Board The shot clock and score board each employ dynamic text fields. The setInterval() function along with another function which I called “timer()” count the time down from 24 to 0. The score board is relatively non-complex in that the dynamic text field merely displays the cumulative score which is placed in a variable I have named score. “Teammate” Character (“Pass” Element): Button I regret that I do not have any image (or even mockups of the “Teammate” character) from the Mason Media Lab at this time to show. I have instead used a
placeholder button called “Pass” on which a student will click to indicate that they do not believe the fraction on the backboard to be equivalent to (or reducible to) the fraction on the basketball. The Actionscript attached to this button is essentially the same as the button on the Backboard; only that the variable choice receives the value “pass” instead. Confirmation Button There is an additional red confirmation button which appears only in frame 3 that gives the student immediate feedback on their answer selection. This button employs two dynamic text fields. The dynamic text field on top has the following possible messages: You’re Right! Oops! Time’s Up! Score: This message displays when the student chooses the correct answer. When the student chooses the incorrect answer. When the student has not selected an answer before the shot clock runs out. When the student has answered all of the questions and the game is over.
The bottom dynamic text field displays “NEXT” until the game is over at which time it will display the numeric score. When the game is over, the button is disabled. Otherwise, this button is the student’s way to start the next question. Plans for Further Development As this game is developed further, motion will added when the student shoots or passes the ball. Fans might also be programmed to do the “wave” when waiting on the student to select an answer. A difficulty selector may be added in the coming weeks to allow students to decide how complex to make their game. Additional levels, in which students are asked to determine whether the fraction on the backboard is greater than or less than basketball, could also be added.
Actionscripting Frame 1 One of the first, and most important actions undertaken as the game loads is to load the questions and answers into an array. First the array is created using this code: mainArray = new Array(8); for(i=0; i<8; i++) { mainArray[i] = new Array(5); } This creates an array with eight elements, as there are eight separate problems in this game. It then creates another five-element array in each of the original eight elements. The reason for this is that I have chosen to load five pieces of information about each problem: the numerator and denominator for the backboard, the numerator and denominator for the basketball, and whether the basketball and backboard are equivalent. Below is the code for loading the first problem into the array: mainArray[0][0] = 1; mainArray[0][1] = 2; mainArray[0][2] = 2; mainArray[0][3] = 4; mainArray[0][4] = "shoot"; The fraction 1/2 will be loaded on the backboard and the fraction 2/4 will be loaded on the basketball. Finally, “shoot” means that by shooting the ball (i.e.: the backboard), the student will have chosen the correct answer. In frame 1 other variables are declared and initialized. After frame 1 plays, Flash is allowed to continue playing into frame 2.
Frame 2 Frame 2 begins by loading the appropriate numbers into the relevant dynamic text fields on the backboard and basketball (the variable that tells the game which problem to load was initialized in frame 1). The shot clock is set to 24 seconds and started. The game waits until either the shot clock runs out or the student selects an answer. The game then moves to frame 3. Frame 3 In frame 3, the aforementioned red confirmation box appears and displays a message according to the chart previously provided. For reference, this is the Actionscript code for frame 3: if(choice==right_choice) { score++; respons = "You're Right!"; } else { if(choice=="timeout") { respons = "Time's Up!"; } else { respons = "Oops!"; } } if(array_num>7) { respons="Your Score:"; nex=score; } else { stop() } The first IF-statement checks to see if the student’s answer is the correct answer. If so, the score is increased by one point and the text “You’re Right!” displays in
the red box. If the student was wrong, “Oops!” appears. Finally, if the time ran out, “Time’s Up!” appears. The word “NEXT” already appears on the button. The second IF-statement tests to see if the student has completed the last question. If so, the game waits for the student to click the red button to be presented with the next question. If not, the red button changes to display the student’s score and game functionality is suspended. Red Confirmation Button Actionscript The Actionscript relevant to the red confirmation button is as follows: on(release) { if(array_num<8) { goToAndPlay(2); } else { stop(); } } This code tells the button simply to become inactive if the student has already answered the last question. Otherwise, once the student clicks the button, the game returns to frame 2 and the next question is displayed.