"The games of a people reveal a great deal about them.“
Marshall McLuhan
Intro to Action Script 2
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip playback control
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip playback control
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip playback control
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
The Flash coordinate system
ORIGIN ( 0, 0) top left corner
Positive Y is down, negative Y is up
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
The Flash coordinate system
A screen location can be specified by X and Y coordinate pairs.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip properties
_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 180
0 being the original rotation of the instance.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip properties
_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 false
0 or false being invisible, 1 or true being visible.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip properties control mc_properties.fla
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;
}
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip properties control mc_properties.fla
sets horizontal location of the fox to 275
middle of the stage ( 550 / 2= 275)
on (press) {
_root.fox._x = 275;
}
sets horizontal location of the fox to 350
on (press) {
_root.fox._x = 350;
}
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip properties control mc_properties.fla
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;
}
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Movie clip properties control mc_properties.fla
sets proportional scale of fox to 50%
on (press) {
_root.fox._xscale = 50;
_root.fox._yscale = 50;
}
sets proportional scale of fox to 100%
sets proportional scale of fox to 150%
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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)
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dragging and Dropping Movie clips drag_function.fla
Go back to the main timeline by clicking on the Scene1 button:
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dragging and Dropping Movie clips drag_function.fla
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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dragging and Dropping Movie clips multiple_MC.fla
Open “multiple_MC.fla” file from the Pickup folder
Select dummy “actions” movie clip on the stage and study the following script
applied:
onClipEvent (load) {
// create 10 movie clips
for(i=0;i<10;i++) {
_root.attachMovie("sample","sample"+i,i);
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dragging and Dropping Movie clips multiple_MC.fla
_root.attachMovie("sample","sample"+i,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.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dragging and Dropping Movie clips multiple_MC.fla
// 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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dragging and Dropping Movie clips multiple_MC.fla
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.
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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 folder
Note “target” and “bullet” movie clips
Select dummy “actions” movie clip on the stage and study the following script
applied:
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Collision Detection collision.fla
onClipEvent (enterFrame) {
// see if the bullet hit the target
if (_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;
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Collision Detection collision.fla
_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
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Collision Detection collision.fla
if ( _root [ "target“ ] . hitTest ( _root [ "bullet“ ]) )
If bullet hits the target this condition is TRUE
the 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;
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Collision Detection collision.fla
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 left
towards the target
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009