AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 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 Masking 01setMask.fla The movie clip can be masked by another movie clip setMask() can turn a movie clip into a mask and specify movie clip to be masked mc_1. setMask ( mc_2 ) ;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 01setMask.fla Movie clip “end”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 01setMask.fla Movie clip “mask”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 01setMask.fla Movie clip “mask” on top of the movie clip “end” to be masked

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 01setMask.fla The “mask” movie clip will mask the “end” movie clip on the stage the user can see sections of the “end” mc through the unblocked windows of the “mask” Add the script command to the first frame in the main timeline: end.setMask(mask);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 02dragMask.fla

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 02dragMask.fla Draggable masks are used to make the user uncover the image in the movie clip “end” movie clip to be unmasked “mask” movie clip to be dragged and to mask the “end” Open 02dragMask.fla flash file and assign the following script to the first frame in the actions layer

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Masking 02dragMask.fla end.setMask(mask); mask.onPress = function() { mask.startDrag(); } mask.onRelease = function() { stopDrag(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dynamic menu 03dynamicMenu.fla Dynamic menus interface design easily updated user control more buttons mouse responsive “Menu” movie clip consists of long row of buttons that extends off the stage. The menu scrolls left and right to provide access to the “out of stage” buttons depending there the mouse pointer is located.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dynamic menu 03dynamicMenu.fla Open the file 03dynaicMenu.fla and study the buttons inside the “menu” movie clip

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dynamic menu 03dynamicMenu.fla Open the file 03dynaicMenu.fla and add the following script on the first frame _root.onEnterFrame = function() { menu._x = menu._x + (0.5 * Stage.width - _root._xmouse) / 10; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dynamic menu 03dynamicMenu.fla _root.onEnterFrame = function() { menu._x = menu._x + (0.5 * Stage.width - _root._xmouse) / 10; } When we subtract the horizontal position of the mouse from half of the stage width, we get a number that is positive if the mouse is on the left, and negative if the mouse is on the right. We use this value to move the horizontal position of the “menu” movie clip. The division by 10 makes the increments smaller and hence, the movement of the menu slower.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla Open the file 04ballonshoot.fla flash file The player controls a character that moves left-right Other objects move left-right or up-down on the stage The player must control the character that shoots other moving objects direct shooting aim and shoot classic arcade game Objects can move Randomly or follow the certain pattern of the movement

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla Fox moves right and left on the stage with the arrow key And shoots balloons with the bullets coming from the straw shoots directly from fox position The balloons flow from left and right at random speeds and altitudes Fixed number of balloons – once the are gone, the game is over Successfully shoot balloons define the score

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla 3 frames: 1“start” 2play 3“game over” “fox” movie clip “bullet” movie clip “balloon” movie clip

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla 1 frame “start”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla 2 frame play

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla 3 frame “game over”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla Fox movie clip 1 frame “stand”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla Fox movie clip Frames 2 -7 “walk”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla Balloon movie clip 1 frame “normal” Balloon movie clip instances are assigned different colors

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla Balloon movie clip 5 frame “pop”

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla The bullet being shot from the tip of the fox’s straw The new movie clip is created at the tip of the straw and moves upward The button is used to react to the space bar on the keyboard to determine when player fires Timer is used to make sure player shoots only once per second

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla “actions” movie clip script onClipEvent(load) { _root.initGame(); } onClipEvent(enterFrame) { _root.newBalloon(); _root.moveBalloons(); _root.moveFox(); _root.moveBullets(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla “button” script on (keyPress " ") { _root.shootBullet(); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function initGame() { // init balloon variables nextBalloonTime = 0; nextBalloon = 0; balloons = []; numBalloons = 10; // init bullet variables nextBulletTime = 0; nextBullet = 0; bullets = []; // init score score = 0; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function newBalloon() { // more balloons? if (nextBalloon < numBalloons) { // time for next? if (getTimer() > nextBalloonTime) { // 50% chance of a new balloon to be created at this //instant if (Math.Random() <.5) { // create new balloon clip attachMovie("balloon", "balloon"+nextBalloon, nextBalloon);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla // choose which side to come from and random speed if (Math.Random() <.5) { _root["balloon"+nextBalloon]._x = -30; dx = int(Math.Random()*3)+3; } else { _root["balloon"+nextBalloon]._x = 580; dx = -int(Math.Random()*3)-3; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla // choose random height of the new balloon _root["balloon"+nextBalloon]._y = int(Math.Random()*100)+20; // choose random color of the new balloon balloonColor = new Color("balloon"+nextBalloon); r = int(Math.Random()*5)+1; if (r == 1) { balloonColor.setTransform({rb: 255}); } else if (r == 2) { balloonColor.setTransform({gb: 255}); } else if (r == 3) {

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla balloonColor.setTransform({bb: 255}); } else if (r == 4) { balloonColor.setTransform({rb: 255, gb: 255}); } else if (r == 5) { balloonColor.setTransform({rb: 255, bb: 255}); } // add balloon to array balloons.push({clip: "balloon"+nextBalloon, d: dx}); // set things up for next balloon nextBalloon++; nextBalloonTime = getTimer() ; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function moveBalloons() { // loop through balloons in array for(i=balloons.length-1;i>=0;i--) { // get speed and clip dx = balloons[i].d; balloon = _root[balloons[i].clip]; // move balloon balloon._x += dx; // balloon exit left if ((dx < 0) and (balloon._x < -20)) { balloon.removeMovieClip(); balloons.splice(i,1);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla // balloon exit right } else if ((dx > 0) and (balloon._x > 570)) { balloon.removeMovieClip(); balloons.splice(i,1); } // see whether all balloons gone if ((nextBalloon >= numBalloons) and (balloons.length < 1)) { gotoAndStop("game over"); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function moveFox() { // move fox to left, no flip if (Key.isDown(Key.LEFT)) { dx = -10; fox._xscale = Math.abs(fox._xscale); // move fox to right, flip } else if (Key.isDown(Key.RIGHT)) { dx = 10; fox._xscale = -Math.abs(fox._xscale); // stop moving } else { dx = 0; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla // move fox fox._x += dx; if ((dx == 0) and (fox._currentFrame != 1)) { // set fox to stand fox.gotoAndStop(1); } else if ((dx != 0) and (fox._currentFrame == 1)) { // set fox to move fox.gotoAndPlay(2); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function shootBullet() { // see whether there has been enough time to reload if (getTimer() > nextBulletTime) { // create bullet clip attachMovie("bullet","bullet"+nextBullet,nextBullet+9999); // set location _root["bullet"+nextBullet]._x = fox._x+2; _root["bullet"+nextBullet]._y = fox._y-55; // add to array bullets.push(nextBullet);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla //get set for next bullet nextBullet++; nextBulletTime = getTimer()+1000; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function moveBullets() { // loop through all bullets for(i=bullets.length-1;i>=0;i--) { // get clip bullet = _root["bullet"+bullets[i]]; // move clip bullet._y -= 10; // see whether it reached top if (bullet._y < 0) { bullet.removeMovieClip(); bullets.splice(i,1);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla // see whether it hit a balloon } else { if (checkCollision(bullet)) { bullet.removeMovieClip(); bullets.splice(i,1); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function checkCollision(bullet) { // loop though all balloons for(j=balloons.length-1;j>=0;j--) { balloon = _root[balloons[j].clip]; // see whether the bullet is close to the balloon if (distance(bullet,balloon) < 10) { // go to "pop" frame of balloon balloon.gotoAndPlay(2); // remove balloon from array balloons.splice(j,1);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla // add to score score += 1; // return true, because there was a collision return(true); } // return false, because there was a collision return(false); }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Aim and shoot games 04ballonshoot.fla function distance(clip1, clip2) { // find distance between two movie clips dx = clip1._x - clip2._x; dy = clip1._y - clip2._y; return (Math.sqrt(dx*dx+dy*dy)); } stop();