AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 3 "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 Assignment - Confinement 1.Create an interactive animation using Action Script in Flash with a small bouncing object (box) inside the larger object (cube). Cube and box are just examples here – create your own objects to deliver the idea of confinement. The concept of this assignment revolves around the idea of being constrained in a box. The box is a metaphor for the physical, social, political or psychological constraints that we and/or others place upon us. The box also represents a sense of place in the realm of the virtual as well as in our conscience. InterPlay: Loose Minds in a Box SIGGRAPH2005 Use: Variables &&/|| Functions &&/|| Collision detection &&/|| movie clip properties

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement Optional for extra grade: 2,3,4. Add more bouncing boxes. Use different speeds. Change size of the boxes each time it bounces from the cube. If the box becomes larger then the cube, create an animation to brake the cube.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement New movie clip “box” Draw a container box width=200 height=200 Position: X 100Y 100 Actions applied to the “box” movie clip onClipEvent(load) { // two variables to add horizontal and vertical position increments dx=10; dy=10; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement onClipEvent (enterFrame) { _x+=dx; //move the ball in the x direction _y+=dy; //move the ball in the y direction if (_x>290) // is the ball hits the right side of the screen { dx=-10; //change the direction of the ball to the left } if (_x<110) // is the ball hits the left side of the screen { dx=10; //change the direction of the ball to the right } }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement if (_y>290) // is the ball hits the right side of the screen { dy=-10; //change the direction of the ball down } if (_y<110) // is the ball hits the left side of the screen { dy=10; //change the direction of the ball up } }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement Add another box – new movie clip “box1” Actions are same as on the first box, but the distance increments are 20 and 22 pixels for faster motion: onClipEvent(load) { dx=20; dy=22; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement Convert right and left edges of the container to movie clips. Change scale of the “box” upon collision with “right” or “left” movie clips: if (this.hitTest(_root.right)) { this._xscale += 5; this._yscale += 5; } if (this.hitTest(_root.left)) { this._xscale += 5; this._yscale += 5; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement Check box size, if larger then 150, send movie to play frame “explosion” with broken container animation. Send “box” outside of the stage. if ( this._xscale>150) { _root.gotoAndPlay("explosion"); this._x=400; this._y=400; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Scaling buttons buttons.fla Open buttons.fla movie and save it as scale_buttons.fla Select “play” button on the stage and convert into movie clip “play_mc” Select “stop” button on the stage and convert into movie clip “stop_mc” Double click on the play_mc on the stage to enter its timeline. Select “play” button and apply the following script: on (rollOver) { // set up for grow newscale = 150; } on (rollOut) { // set up for shrink newscale = 100; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Scaling buttons buttons.fla Double click on the stop_mc on the stage to enter its timeline. Select “stop” button and apply the same script: on (rollOver) { // set up for grow newscale = 150; } on (rollOut) { // set up for shrink newscale = 100; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Scaling buttons buttons.fla Go back to the main timeline on the movie (Scene1 button) Select the play_mc movie clip on the stage and apply the script onClipEvent(load) { // set initial scale to 100 newscale = 100; } onClipEvent(enterFrame) { if (this._xscale > newscale) { // shrink this._xscale -= 10; this._yscale -= 10; } else if (this._xscale < newscale) { // grow this._xscale += 10; this._yscale += 10; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Scaling buttons buttons.fla Apply the same script to stop_mc movie clip. Save and test the movie When the cursor rolls over each button it gradually changes its scale to 150 % on (rollOver) { newscale =150; } When the cursor rolls outside of each button it gradually changes its scale back to 100 % on (rollOut) { newscale =100; } The buttons go from 100% to 150% in intervals of 10%.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Scaling buttons buttons.fla Main timeline Script attached to the movie clip Movie clip timeline script attached to the button button

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla Create new movie clip on the stage NAME “colorclip” Select the first frame on the main timeline and apply the following script myColorObject = new Color("colorclip"); myColorObject.setRGB(0xFF0000); 0x in front of the number tells Flash that hexadecimal value follows FF0000pure red color in hex system Save and test the movie. Regardless of original color, the colorclip changes to red if movie runs

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Hexadecimal color system color.fla There are 16.7 million different colors in the hexadecimal color system. # is black #FFFFFF is white. Each of the 6 digits in the hexadecimal code is broken into 3 seperate groups... # XX xxxx - Red Color Value # xx XX xx - Green Color Value # xxxx XX - Blue Color Value A B C D E F 0 null value F highest value

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Hexadecimal color system color.fla So if the first two digits (red values) are full (FF) and the other four are null (00) the color will be red. #FF0000 red #00FF00 green #0000FF blue #FFFF00 yellow

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla The transformation includes separate numerical values for Red, Green, Blue and Brightness. The advantage of setTransform over setRGB is more control over color values that could be changed dynamically. 1.Create a color object myColor = new Color(this); 2. Create a transform object myColorTransform = {rb:255, bb:0, gb:0}; 3. Use both to change a movie clip color myColor.setTransform(myColorTransform);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla Drag the second instance of the movie clip to the stage and apply the following script onClipEvent(load) { myColor = new Color(this); //Create a color object myColorTransform = {rb:255, bb:0, gb:0}; // Create a transform object n = 0; } onClipEvent(enterFrame) { myColorTransform.rb = n; myColor.setTransform(myColorTransform); n++; } // n increases red value of movie clip from 0 to 255 and beyond

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla To make a movie clip cycle through many colors we can gradually decrease and increase color values of each color component. Drag a new instance of the movie clip to the stage and name it “cycle” Red, green and blue will start with 255 initial value -- white 1.Red is decreased from 255 to 0--cyan 2.Blue is decreased from 255 to 0--green 3.Red is increased from 0 to 255--yellow 4.Green is decreased from 255 to 0--red 5.Blue is increased from 0 to 255--magenta 6.Green is increased from 0 to 255--white

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla onClipEvent(load) { // create the color object and transform spiralColor = new Color(this); colorTransform = {rb:255, bb:255, gb:255}; // starts in mode 1 n = 1; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla onClipEvent(enterFrame) { // depending on which mode we are in, alter the transformation if (n == 1) { colorTransform.rb -= 5; if (colorTransform.rb == 0) n = 2; } else if (n == 2) { colorTransform.bb -= 5; if (colorTransform.bb == 0) n = 3; } else if (n == 3) { colorTransform.rb += 5; if (colorTransform.rb == 255) n = 4; } else if (n == 4) { colorTransform.gb -= 5; if (colorTransform.gb == 0) n = 5; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Color property color.fla else if (n == 5) { colorTransform.bb += 5; if (colorTransform.bb == 255) n = 6; } else if (n == 6) { colorTransform.gb += 5; if (colorTransform.gb == 255) n = 1; } // set the new color spiralColor.setTransform(colorTransform); // rotate the clip this._rotation = this._rotation += 5; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Random random.fla Create a new movie and new movie clip on the stage. This script uses Math.random() function to position the movie clip anywhere on the stage between x=550 and y=400 (movie size) Math.random return a floating point number between 0.0 and 1.0 The way to use it is to multiply by larger number: onClipEvent(load) { this._x = Math.random()*550; this._y = Math.random()*400; } Save and test the movie several times to see different random positions

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Random random.fla Drag a new movie clip instance on the stage. The script moves movie clip in random directions. onClipEvent(load) { dx = Math.random()*10-5; dy = Math.random()*10-5; // set values of dx and dy from -5 to 5 } onClipEvent(enterFrame) { this._x += dx; this._y += dy; // change x and y location of clip by those random amounts if (Math.random() >.9) { dx = Math.random()*10-5; dy = Math.random()*10-5; // in addition 10% of the time the values dx and dy and renewed }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Film effect film.fla Create a new movie with black background color and two movie clips: The white line vertical and two small ovals (scratches) on the stage Line script: onClipEvent(load) { wanderAmount = 300; leftLimit = 10; rightLimit = 540; chanceOfJump = 50; xPosition = 275; speed = 10; chanceOfChange = 0; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Film effect film.fla onClipEvent(enterFrame) { xPosition += speed; this._x = xPosition; chanceOfChange++; if ((Math.random()*wanderAmount rightLimit)) { speed = -speed; chanceOfChange = 0; } if (Math.random()*chanceOfJump == 1) { xPosition = Math.random()*(rightLimit-leftLimit)+leftLimit; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Film effect film.fla Script for the scratch oval clip onClipEvent(load) { chanceOfAppearing = 10; chance = 0; } onClipEvent(enterFrame) { chance++; if (Random(chanceOfAppearing) < chance) { this._x = Math.Random()*550; this._y = Math.Random()*400; chance = 0; } else { this._x = -100; }