Intro to Action Script 2

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007

Intro to Action Script 2

"The games of a people reveal a great deal about them.“ Marshall McLuhan


Movie clip playback control movie_clip_control.fla

Movie clips contain timeline with layers and most of elements of main Flash movie

By default the movie clip will loop frames in its timeline in the flash movie

View the example “movie_clip_control.fla” in the Pickup folder

Notice myMovieClip symbol in the library and two instances of this movie clip on the stage:

Left instance has no name ( properties panel > instance name is empty)

Right instance is named “myMovieClip”

Test movie


Movie clip playback control movie_clip_control.fla

The second instance “myMovieClip” is controlled by Action Script commands applied for the buttons

Select Play button on the stage and review the following Action Script command in the Actions window

Play button plays myMovieClip timeline

on (press) {_root.myMovieClip.play();

}

_root addresses the main timeline of the Flash movie

_root.myMovieClip addresses myMovieclip on the main timeline

.play() plays the myMovieclip timeline


Movie clip playback control

Select Stop button on the stage and review the following Action Script command in the Actions window

Stop button stops myMovieClip timeline

on (press) {_root.myMovieClip.stop();

}

.stop() stops myMovieClip timeline at the current frame



Select First Frame button on the stage and review the following Action Script command in the Actions window

First Frame button returns myMovieClip to the first frame of its timeline and stops

on (press) {_root.myMovieClip.gotoAndStop(1);

}

. gotoAndStop(1) returns myMovieclip to the first frame (1) and stops



Select Next Frame button on the stage and review the following Action Script command in the Actions window

Next Frame button moves myMovieClip one frame forward

on (press) {_root.myMovieClip.nextFrame();

}

. nextFrame() moves myMovieclip forward one frame



Select Previous Frame button on the stage and review the following Action Script command in the Actions window

Previous Frame button moves myMovieClip one frame backward

on (press) {_root.myMovieClip.prevFrame();

}

. prevFrame() moves myMovieclip backward one frame


The Cartesian coordinate system

Given a fixed point of reference or ORIGIN an axis of direction PLUS (+)or MINUS (-), and a UNIT MEASURE, the Cartesian Coordinate system assigns to the screen a HORIZONTAL and VERTICAL AXIS.


The Flash coordinate system

ORIGIN ( 0, 0) top left cornerPositive Y is down, negative Y is up


The Flash coordinate system

A screen location can be specified by X and Y coordinate pairs.


Movie clip properties

a short-list of visible read/write properties

_x Horizontal position of a movie clip, in pixels. Measured from the left side of the clip's _parent's stage to the registration point of the movie clip. Zero, the left side of the stage.

_y Vertical position, in pixels. Zero, the top of the stage.

_xscale Horizontal scaling of an instance relative to the original symbol placed on stage. 100% of original horizonal scale.

_yscale Vertical scaling of an instance relative to the original symbol. 100% of original vertical scale.



_width The width, in pixels, of the space occupied by the movie clip. Completely relative, that is, once changed, there is no stored value representing the original width of the element

_height The height, in pixels, of the space occupied by the movie clip. Completely open

_alpha Transparency percentage.0 being completely transparent; 100 being completely opaque

_rotation Degrees of rotation.note: Yes, you can set _rotation to 360; _rotation can be set to any number, but one complete revolution looks the same as two, or three, or seventeen ... -180 to 0 to 1800 being the original rotation of the instance.



_visible True and False are Boolean values.When a clip's _visible property is set to false, buttons inside the clip will no longer detect events. 1 or 0; also, true or false0 or false being invisible, 1 or true being visible.


Movie clip properties control mc_properties.fla

Action Script can control external properties of the movie clip

Open “mc_properties.fla” file from the Pickup folder and save it on your flash drive



Note the movie clip name is “fox”

Check the movie size:Modify > Document > dimentions

width=550 height = 400

Select buttons on the stage and study the action script commands in the Actions window

sets horizontal location of the fox to 200

on (press) {_root.fox._x = 200;

}



sets horizontal location of the fox to 275middle of the stage ( 550 / 2= 275)


}

sets horizontal location of the fox to 350


}



sets angle of rotation of the fox to 0

on (press) {_root.fox._rotation = 0;

}

sets angle of rotation of the fox to 30 degrees clockwise

on (press) {_root.fox._rotation = 30;

}



sets proportional scale of fox to 50%

on (press) {_root.fox._xscale = 50;_root.fox._yscale = 50;

}




Dragging and Dropping Movie clips simple_drag.fla

Open “simple_drag.fla” file from the Pickup folder

Note the movie clip instance name is “circle”

Study the 1 FRAME script:

startDrag("circle",true);

“circle” name of the movie clip

true locks the object center to the cursor


Dragging and Dropping Movie clips drag_button.fla

Open “drag_button.fla” file from the Pickup folder

Double click on the “circle” movie clip in the library and study the following script applied to the invisible button inside the “circle” movie clip in the button layer:

on (press){

startDrag("",false);}

on (release){

stopDrag();}

Executes the startDrag command when the user presses button down,and stopDrag command when the user lifts up the button


Dragging and Dropping Movie clips drag_button.fla

on (press){

startDrag("",false);}

“ “ Empty quotes addresses the current movie clip.

Because the button is inside the “circle” movie clip, that particular movie clip can be dragged.

false Will maintain the original distance between the cursor and movie clip instead of locking it to the center.This makes it appear as if cursor has grabbed a part of the circle and is dragging the circle by that point.

stopDrag Stops dragging. Only one movie clip can be dragged at the time, so no parameters.


Dragging and Dropping Movie clips drag_function.fla

Open “drag_function.fla” file from the Pickup folder

Double click on the “circle” movie clip in the library and study the following script applied to the invisible button inside the “circle” movie clip in the button layer:

on (press) {drag = true;

}

on (release) {drag = false;

}

drag variable used to determine whether or not the movie clip should follow the cursor.

true – drag (button pressed), false – no drag (button lifted)



Go back to the main timeline by clicking on the Scene1 button:



Select the movie clip “circle” on the stage and study the following script in the actions window:

onClipEvent (enterFrame) {if (drag) {

this._x = _root._xmouse;this._y = _root._ymouse;

}}

This script sets _x and _y properties of the movie clip to _xmouse and _ymouse cursor position in the main timeline


Dragging and Dropping Movie clips multiple_MC.fla

Open “multiple_MC.fla” file from the Pickup folderSelect dummy “actions” movie clip on the stage and study the following script applied:

onClipEvent (load) {

// create 10 movie clipsfor(i=0;i<10;i++) {

_root.attachMovie("sample","sample"+i,i);





“sample” linckage id name of the movie clip

“sample"+I name of the instance of movie clip on the stage

i level of the movie clip instance. Describes an order in which movie clips are drawn

First movie clip drawn at level 0, second at level 1, third at level 2, and so on. Flash won’t let two movie clips be created at the same level.



// set the location of clips

_root["sample"+i]._x = i*50+50;_root["sample"+i]._y = 100;

}}

_root["sample"+i]._y = 100; The vertical location of all movie clips set to 100

_root["sample"+i]._x = i*50+50; The horizontal locations are different starting with 50 and

ending at 500



onClipEvent (enterFrame) {

// loop through and rotate each movie clip

for(i=0;i<10;i++) {_root["sample"+i]._rotation += 5;

}}

The code loops through all movie clips and rotates each one by 5 degrees. The result is all 10 movie clips are rotation on the stage.


Collision Detection collision.fla

The code detecting whether two objects collide, or whether the cursor location collides with an object

Open “collision.fla” file from the Pickup folderNote “target” and “bullet” movie clipsSelect dummy “actions” movie clip on the stage and study the following script applied:



onClipEvent (enterFrame) {

// see if the bullet hit the targetif (_root["target"].hitTest(_root["bullet"])) {

// collision, so target grows_root["target"]._xscale += 5;_root["target"]._yscale += 5;

// bullet resets_root["bullet"]._x = 350;

} else {

// no collision, continue to move bullet_root["bullet"]._x -= 5;

}}



_root [ "target“ ] . hitTest ( _root [ "bullet“ ])

hitTest function to determine if two objects collide or an object is covering a certain point on the screen

_root [ "target“ ] “target” movie clip

_root [ "bullet“ ] “bullet” movie clip



if ( _root [ "target“ ] . hitTest ( _root [ "bullet“ ]) )

If bullet hits the target this condition is TRUEthe target scale increased by 5%

_root["target"]._xscale += 5;_root["target"]._yscale += 5;

And bullet horizontal position is set to 350

_root [ "bullet“ ] . _x = 350;



else {

_root["bullet"]._x -= 5;}

If there is no collision, condition is FALSE , ELSE statement is executed

The code moves bullet -5 pixels at a time to the lefttowards the target


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


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.

Documents

Intro to Action Script 2