AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Intro to Action Script 3 "The games of a people reveal a great deal about them.“ Marshall McLuhan

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Scaling buttons buttons.fla Main timeline Script attached to the movie clip Movie clip timeline script attached to the button button

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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; }