AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 9 "The games of a people reveal a great deal about them.“ Marshall McLuhan

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla Open find_a_fox.fla flash file. Pay attention on the 3 scenes: Start Play End

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla Start scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla Play scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla End scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla Locate hidden objects Feedback for found objects Keep track of what has been found and what has not Once all objects are found game goes to “game over” scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla Locate hidden objects Feedback for found objects applied color transformation Keep track of what has been found and what has not array of true and false values starts with 7 false values and each one changes to true once the objects are found Once all objects are found game goes to “game over” scene 7 movie clips are used when a mouse click is detected the code loops through all the movie clips using hitTest to determine which one was clicked

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla Most of effort is the drawing and design of the objects and the background scene Some graphics are on different layers to allow partially hidden objects Movie clips named fox0….fox6 All actions are in the “actions” movie clip outside of the stage

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla onClipEvent (load) { // create array with 7 false values to keep track of // which ones found found = []; for (i=0; i<7; i++) { found[i] = false; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla When the user clicks the location is recorded in the variables x and y onClipEvent (mouseDown) { // record location of click x = _root._xmouse; y = _root._ymouse;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla hitTest is used to check these values against the fox movie clips When the match is found the color of the movie clip transformed to red And the hidden fox stands out from the background // loop through all foxes to see if any hit for (i=0; i<7; i++) { if (_root["fox"+i].hitTest(x, y, false)) { // change color of fox myColor = new Color(_root["fox"+i]); myColor.setTransform({rb:128, bb:0, gb:0}); // record that this one was found found[i] = true; break; } // see if all foxes found gameover = true; for (i=0; i<7; i++) { if (found[i] == false) { // this fox not found, game not over gameover = false; } // go to end frame if all foxes found if (gameover) { _root.gotoAndPlay("Game Over"); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Counter based games find_a_fox.fla After every click the “found” array is searched for a false value. If all foxes have been found, then the movie goes to another frame “Game Over” // see if all foxes found gameover = true; for (i=0; i<7; i++) { if (found[i] == false) { // this fox not found, game not over gameover = false; } // go to end frame if all foxes found if (gameover) { _root.gotoAndPlay("Game Over"); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla Open shoot_a_fox.fla flash file. Pay attention on the 3 scenes: Start Play End

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla Start scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla Play scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla End scene

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla Click on the objects on the screen Objects appear at random times and places Objects move The player must have quick reflexes to catch foxes before they disappear Foxes run through a whole animation sequence that takes them from one part of the screen to another 1 animation- fox running from place to place 2 animation- fox swinging from a tree 3 animation – fox peeking out from behind the tree these animations are triggered each 2-3 seconds

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla The game keeps track of how many shots are left showShotsLeftdynamic text variable And how many hits were done showScoredynamic text variable The cursor is replaced with a movie clip that resembles a gun crosshair Nested fox movie clips animation hit stage

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla Library: Peeking fox Runnign fox Swinging fox Single frame of the fox, followed by a yellow hit fox First part is normal animation Second part shows that the user has hit the fox

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla 7 movie clips fox0….fox6 Animated fox to peek or swing or run The inner clips are labeled “fox” so that the code can address them When the fox is hit, the code tells movie clip instance “fox” inside the movie clips “fox0”, “fox6”, etc to go to frame “hit”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla Layers with trees to partially cover fox movie clips The “actions” movie clip contains most of the code “shotsLeft” are set to 50 to give the user 50 shots Mouse.hide()makes the cursor invisible Mouse.show()visible again Mouse cursor is replaced with movie clip “cursor”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla onClipEvent (load) { // how much time between fox appearances 2 sec timeBetweenFoxes = 2000; // calculate time until next fox // getTimer() returns the milliseconds since the flash movie began nextFox = getTimer()+timeBetweenFoxes;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla // init scores shots left to 50, score to 0 score = 0; shotsLeft = 50; _root.showScore = "Score:"+score; _root.showShotsLeft = "Shots Left:"+shotsLeft; // hide cursor Mouse.hide(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla onClipEvent (enterFrame) { // set the cursor _root["cursor"]._x = _root._xmouse; _root["cursor"]._y = _root._ymouse; // see whether it is time for the next fox if (getTimer()>=nextFox) { // shorter wait next time timeBetweenFoxes -= 5; // see whether the game is over if (shotsLeft < 1) { _root.gotoAndPlay("End");

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla // new fox } else { // loop until a fox is found that is // not in use while (true) { fox = int(Math.Random()*7); if (_root["fox"+fox]._currentFrame == 1) { break; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla // tell fox to move _root["fox"+fox].gotoAndPlay(2); // set time for next fox to appear nextFox = getTimer()+timeBetweenFoxes; } Searches through a 7 movie clips top find one that might have been hit If one does, the “fox” movie clip inside that movie clip is told to play the “hit” animation frame 2

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla onClipEvent (mouseDown) { // show blast _root["cursor"].gotoAndPlay("blast"); // get the location of the click x = _root._root["cursor"]._x; y = _root._root["cursor"]._y; // loop through all foxes to see which was clicked for (i=0; i<7; i++) {

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla // look only at clips that are doing the // pop up animation if (_root["fox"+i]["fox"]._currentFrame <= 1) { // see whether this was the one clicked if (_root["fox"+i].hitTest(x, y, false)) { // have the clip play the "hit" animation _root["fox"+i].fox.gotoAndPlay("hit"); // increase score and show it score++; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla // take away one shot shotsLeft--; // update score _root.showScore = "Score:"+score; _root.showShotsLeft = "Shots Left:"+shotsLeft; } onClipEvent (unload) { // game over, so return cursor to normal Mouse.show(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games shoot_a_fox.fla The game is over when the onClipevent(enterFrame) function attempts to move a new fox and discovers that the player is out of shots. This prevents the movie from ending the instant that the last shot is fired but rather delays the end for about a second or two.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla Background elements: Trees movie clip the closest one will move faster (by factor of 10) Bushed movie clip further will move little slower (by factor of 5) Hills movie clip even farthest will move even slower (by factor of 4)

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla Trees movie clip the closest one will move faster (by factor of 10)

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla Bushes movie clip further will move little slower (by factor of 5)

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla Hills movie clip even farthest will move even slower (by factor of 4)

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla Trees + Bushes + Hills = 3 movie clips in 3 layers

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla first frame actions: stop(); // set pan limits panLimitLeft = -30; panLimitRight = 30; panAmount = 0;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla function moveScene(d) { // check to see whether within pan limits if ((panAmount+d > panLimitLeft) and (panAmount+d < panLimitRight)) { // keep track of pan amount panAmount += d; // move three layers at different speeds trees._x += d*10; bushes._x += d*5 hills._x += d*4; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Sliding background pan_bg.fla “Actions” movie clip function to activate moveScene(d) function Values 1 and -1 are passed to d parameter onClipEvent (enterFrame) { // pan left or right if needed if (_root._xmouse < 50) { _root.moveScene(1); } else if (_root._xmouse > 500) { _root.moveScene(-1); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla Shooting game that allows the user to scroll left and right through a larger scene. Foxes appear a random times and places. Scrolling gives a sense of dimension by moving closer objects faster then distant

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla 10 fox movie clips 7 foxes behind the trees will move with the same sped as the trees 3 foxes behind the bushes will move with the same speed as bushes

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla panAmoutkeeps track of the scroll left or right If the user pans left, the graphics move to the right so the panAmount becomes 1 If the user continue to move in that direction panAmount grows 2, 3, 4 If the user moves right, the panAmount goes -1, -2, -3… panLimitLeft=-30; panLimiright=30; panAmount=0;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla First frame script: stop(); // set pan limits // values gotten through trial and error panLimitLeft = -30; panLimitRight = 30; panAmount = 0;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla function moveScene(d) { // check to see whether within pan limits if ((panAmount+d > panLimitLeft) and (panAmount+d < panLimitRight)) { // keep track of pan amount panAmount += d; // move three layers at different speeds trees._x += d*10; bushes._x += d*5 hills._x += d*4;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla // foxes 0-6 track with trees for(i=0;i<7;i++) { _root["fox"+i]._x += d*10; } // foxes 7-9 track with bushes for(i=7;i<10;i++) { _root["fox"+i]._x += d*5; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla Actions movie clip script: onClipEvent (load) { // how much time between fox appearances timeBetweenFoxes = 2000; // calculate time until next fox nextFox = getTimer()+timeBetweenFoxes; // init scores score = 0; shotsLeft = 50; _root.showScore = "Score:"+score; _root.showShotsLeft = "Shots Left:"+shotsLeft; // hide cursor Mouse.hide(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla onClipEvent (enterFrame) { // set the cursor _root["cursor"]._x = _root._xmouse; _root["cursor"]._y = _root._ymouse; // pan left or right if needed if (_root._xmouse < 50) { _root.moveScene(1); } else if (_root._xmouse > 500) { _root.moveScene(-1); } // see if it is time for the next fox if (getTimer()>=nextFox) { // shorter wait next time timeBetweenFoxes -= 5;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla // see if the game is over if (shotsLeft < 1) { _root.gotoAndPlay("End"); // new fox } else { // loop until a fox is found that is // not in use while (true) { fox = int(Math.Random()*10); if (_root["fox"+fox]._currentFrame == 1) { break; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla // tell fox to move _root["fox"+fox].gotoAndPlay(2); // set time for next fox to appear nextFox = getTimer()+timeBetweenFoxes; } onClipEvent (mouseDown) { // show blast _root["cursor"].gotoAndPlay("blast"); // get the location of the click x = _root._root["cursor"]._x; y = _root._root["cursor"]._y;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla // loop through all 10 foxes to see which was clicked for (i=0; i<10; i++) { // only look at clips that are doing the // pop up animation if (_root["fox"+i]["fox"]._currentFrame <= 1) { // see if this was the one clicked if (_root["fox"+i].hitTest(x, y, false)) { // have the clip play the "hit" animation _root["fox"+i].fox.gotoAndPlay("hit"); // increase score and show it score++; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Shooting games hunt_a_fox.fla // take away one shot shotsLeft--; // update score _root.showScore = "Score:"+score; _root.showShotsLeft = "Shots Left:"+shotsLeft; } onClipEvent (unload) { // game over, so return cursor to normal Mouse.show(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movements of two-legged figure

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movements of two-legged figure