AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 12 "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 Avoid and race games river.fla The player controls an object or a character that moves left-right Other objects move up from the bottom of the stage The player must avoid upcoming objects 4 frames: 1“start” 2play game itself 3“lose” 4“win”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla Frame 1 “start”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla Frame 2 Actual Game Dynamic Tex var “spills”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Catch and race games river.fla Frame 3 “lose” Dynamic Tex var “score”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Catch and race games river.fla Frame 4 “win” Dynamic Tex var “score”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla Objects moving up create an illusion of moving fox The goal is to avoid ALL objects Collisions treated as negative spills The game is over if too many spills occur The game speed decreases with each spill – collision The slowdown delays the end of the game

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla Movie clip fox exported for Action Script as “kayaking fox”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 1 frame of the “kayaking fox” movie clip “stil”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 2 frame of the “kayaking fox” movie clip “right”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 3 frame of the “kayaking fox” movie clip “left”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 4 frame of the “kayaking fox” movie clip “spil”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 3 frames of the “rocks” movie clip

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 3 frames of the “rocks” movie clip

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla 3 frames of the “rocks” movie clip

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla Fox racing down the river with paddles out of the water (frame “stil”) If the user pressed “right” key, fox movie clip goes to frame “right” If the user presses left key, fox movie clip goes to frame “left” If the user hits the upcoming objects fox movie clip goes to frame “spil”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla “actions” movie clip contains the following script onClipEvent (load) { _root.initGame(); } onClipEvent (enterFrame) { _root.moveFox(); _root.newRock(); _root.moveRocks(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla The scond frame of the main timeline (play game) script is similar to the catch apples game script: stop(); function initGame() { // the range of rock clips firstRock = 1; lastRock = 0; // init the number of spills spills = 0;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla // set the number of rocks to pass totalRocks = 50; // init the speed and time delay timeSinceLastRock = 0; riverSpeed = 0; // create the fox so that it is on top of the rocks attachMovie( "kayaking fox", "fox", ); fox._x = 275; fox._y = 200; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla function moveFox() { if (fox._currentFrame > 4) { // if during a spill, don't look at keys dx = 0; } else if (Key.isDown(Key.RIGHT)) { // fox rows right dx = riverSpeed; fox.gotoAndStop("left"); } else if (Key.isDown(Key.LEFT)) { // fox rows left dx = -riverSpeed; fox.gotoAndStop("right");

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla } else { // no key dx = 0; fox.gotoAndStop("still"); } // move the fox and limit that movement fox._x += dx; if (fox._x < 150) fox._x = 150; if (fox._x > 400) fox._x = 400; // go a little faster to increase the speed of the game if (riverSpeed < 20) riverSpeed +=.5; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla function newRock() { // add new one only if it has been long enough if (timeSinceLastRock > 5) { // start if only there are more rocks if (lastRock < totalRocks) { // add only 10% of the time if (Math.random() <.1) {

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla // create next rock and set its location lastRock++; attachMovie( "rocks", "rock"+lastRock, lastRock ); // limits all rocks to appear inside the river _root["rock"+lastRock]._x = Math.random()* ; _root["rock"+lastRock]._y = 450; // decide which frame to show f = int(Math.Random()*_root["rock"+lastRock]._totalFrames) + 1;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla _root["rock"+lastRock].gotoAndStop(f); // reset time delay for next rock timeSinceLastRock = 0; // init whether rock was hit //set to “false” for each new rock. This indicates that kyak has never hit that rock. In the moveRock function this is checked before a collision is allowed. When collision happens, the “hit” variable of that movie clip is set to “true” So it cannot be hit again as the boat passes over it. _root["rock"+i].hit = false;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla } // even if no rock added, get closer to next rock timeSinceLastRock++; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla function moveRocks() { // loop through all existing rock clips for (i=firstRock;i<=lastRock;i++) { // get rock location x = _root["rock"+i]._x; y = _root["rock"+i]._y - riverSpeed; // see whether rock reached past top if (y < -50) { removeRock(i);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla // to have a hit, rock must not have been hit before //the collision happens withing 60 pixels horizontally and 25 pixels vertically of the center of the fox } else if ((_root["rock"+i].hit == false) and (Math.abs(y- fox._y) < 60) and (Math.abs(x-fox._x) < 25)) { spills += 1; // note that rock was hit _root["rock"+i].hit = true; // turn boat over fox.gotoAndPlay("spill"); // stop boat riverSpeed = 0;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla // is game over? if (spills > 5) { removeAll(); gotoAndPlay("lose"); } // continue to move rock _root["rock"+i]._y = y; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla function removeRock(n) { // take away rock movie clip _root["rock"+n].removeMovieClip(); // reset range of rocks to move firstRock = n+1; // see whether this was the last rock if (n == totalRocks) { removeAll(); gotoAndPlay("win"); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid and race games river.fla There are two ends of the game lose and win. In both case the removeAll function is called It removes remaining rocks, and fox movie clip. This is necessary because otherwise they stay on the screen even after the game is over. function removeAll() { // take away all remaining rocks for (i=firstRock;i<=lastRock;i++) { _root["rock"+i].removeMovieClip(); } fox.removeMovieClip(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla 3 frames

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla Straight Dinamic texts timeDisplay score

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla Game over Dinamic texts timeDisplay score

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla The road moves towards the player Illusion of depth is created by scaling objects during the movement The player must hit stars to get points The faster he goes the more stars he can hit If the player hits sides of the road he slows down And the score is reduced The rocks and stars and placed at the bottom of the screen and named “bonus” and “sideObject” Race car movie clipd is named “car” on the stage

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla 4 frames in the “race car” movie clip 1 frame “straight”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla 4 frames in the “race car” movie clip 2 frame “right

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla 4 frames in the “race car” movie clip 3 frame “left”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla 4 frames in the “race car” movie clip 4 frame “crash”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla “car” movie clip script: onClipEvent(load) { // init speed _root.speed = 0; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla onClipEvent(enterFrame) { if (Key.isDown(Key.LEFT)) { // move left this._x -= 10; this.gotoAndStop("left"); } else if (Key.isDown(Key.RIGHT)) { // move right this._x += 15; this.gotoAndStop("right"); } else if (Key.isDown(Key.UP)) { // speed up _root.speed +=.1;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla } else if (Key.isDown(Key.DOWN)) { // slow down _root.speed -=.1; // check for minimum speed if (_root.speed < 0) _root.speed = 0; } else { _root.car.gotoAndStop("straight"); } // check for score if (this.hitTest(_root.bonus._x,_root.bonus._y)) { _root.score++; _root.bonus._y += 100; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla // slow down if sides hit if (this._x < 80) { this._x = 80; _root.speed /= 2; } else if (this._x > 470) { this._x = 470; _root.speed /= 2; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla SideObjects do not interact with the car, they just provide the illusion of depth sideObject movie clip script: onClipEvent(enterFrame) { // move down this._y += _root.speed; // move out this._x += dx*_root.speed; // reset when at the bottom of the screen if (this._y > 600) { this._y = 200; //horizon line

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla if (Math.random() <.5) { // left side this._x = Math.random()*170; dx = -1; } else { // right side this._x = 550-Math.random()*170; dx = 1; } // set scale according to vertical position this._xscale = this._y/4; this._yscale = this._y/4; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla Bonus star movie clip script: onClipEvent(enterFrame) { // move down this._y += _root.speed; this._x += dx*_root.speed; // reset when at the bottom of the screen if (this._y > 600) { this._y = 200;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla if (Math.random() <.5) { // come up left side this._x = 250; dx = -.5; } else { // come up right side this._x = 300; dx =.5; } // set scale according to vertical position this._xscale = this._y/4; this._yscale = this._y/4; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla “Actions” movie clip script handles the game clock. Counts down from the start of the game (15 seconds). When the clock gets to 0 the game is send to game over fame. onClipEvent(load) { // calculate end time endTime = getTimer()+15000; } onClipEvent(enterFrame) { // calculate time left timeLeft = (endTime - getTimer())/1000;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla // game over if (timeLeft <= 0) { _root.speed = 0; _root.timeDisplay = "0"; _root.gotoAndStop("game over"); } else { // display time left _root.timeDisplay = timeLeft; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Avoid, catch and race games racing.fla Second frame movie script moves the car to the front of the screen, so that bonus stars appear under it. Copies the sideObject movie clip 5 times. Eqch copy is given a different _y value so that the rocks do not appear at the same time. // move car to front car.swapDepths(999); // create five rocks for(i=0;i<5;i++) { mc = sideobject.duplicateMovieClip("side object"+i,i); mc._y = 400+Math.random()*200; } stop();