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

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


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



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.



New movie clip “box”Draw a container box width=200 height=200Position: X 100 Y 100

Actions applied to the “box” movie clip

onClipEvent(load){

// two variables to add horizontal and vertical position increments dx=10; dy=10;}



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 } }



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 } }



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;}



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;

}



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;

}


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 grownewscale = 150;

}on (rollOut) {

// set up for shrinknewscale = 100;

}



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 grownewscale = 150;

}on (rollOut) {

// set up for shrinknewscale = 100;

}



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 100newscale = 100;

}onClipEvent(enterFrame) {

if (this._xscale > newscale) {// shrinkthis._xscale -= 10;this._yscale -= 10;

} else if (this._xscale < newscale) {// growthis._xscale += 10;this._yscale += 10;

}}



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%.



Main timeline

Script attachedto the movie clip

Movie clip timeline

script attachedto the button

button


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

FF0000 pure red color in hex system

Save and test the movie.Regardless of original color, the colorclip changes to red if movie runs


Hexadecimal color system color.fla

There are 16.7 million different colors in the hexadecimal color system.

#000000 is black#FFFFFF is white.

Each of the 6 digits in the hexadecimal code is broken into 3 seperate groups...

# XXxxxx - Red Color Value # xxXXxx - Green Color Value # xxxxXX - Blue Color Value

0 1 2 3 4 5 6 7 8 9 A B C D E F

0 null valueF highest value


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



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);



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 objectmyColorTransform = {rb:255, bb:0, gb:0};

// Create a transform objectn = 0;

}

onClipEvent(enterFrame) {myColorTransform.rb = n;myColor.setTransform(myColorTransform);n++;

} // n increases red value of movie clip from 0 to 255 and beyond



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 --cyan2. Blue is decreased from 255 to 0 --green3. Red is increased from 0 to 255 --yellow4. Green is decreased from 255 to 0 --red5. Blue is increased from 0 to 255 --magenta6. Green is increased from 0 to 255 --white



onClipEvent(load) {

// create the color object and transformspiralColor = new Color(this);colorTransform = {rb:255, bb:255, gb:255};

// starts in mode 1n = 1;

}



onClipEvent(enterFrame) {// depending on which mode we are in, alter the transformationif (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;

}



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 colorspiralColor.setTransform(colorTransform);

// rotate the clipthis._rotation = this._rotation += 5;

}


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


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}

}


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;

}



onClipEvent(enterFrame) {xPosition += speed;this._x = xPosition;chanceOfChange++;if ((Math.random()*wanderAmount < chanceOfChange) or (xPosition < leftLimit) or (xPosition > rightLimit)) {

speed = -speed;chanceOfChange = 0;

}if (Math.random()*chanceOfJump == 1) {

xPosition = Math.random()*(rightLimit-leftLimit)+leftLimit;}

}



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;

}}

Documents

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