"The games of a people reveal a great deal about them.“
Marshall McLuhan
Intro to Action Script 8
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Keyboard detection
Flash allows to detect events occurring from
keypresses
Key class handles the detection of key presses
Navigation based on the keyboard
arrow keys
number keys
Keyboard shortcuts
to duplicate mouse – based interaction
Control live text
real time type in the movie
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Keyboard detection keyobject.fla
Open keyobject.fla file, study the timeline and add the following code in
the first fame.
if (Key.isDown(Key.SPACE)) {
gotoAndStop(10);
}
isDown
checks if key is pressed
Returns true if yes
Try different keys from the
ActionScripts 2.0 classes > Movie > Key > Constants
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Keyboard detection 02twokeys.fla
Open 02twokeys.fla file, study the timeline and add the following code
in the first fame.
if (Key.isDown(Key.SPACE) && Key.isDown(Key.CONTROL))
{
gotoAndStop(10);
}
&&
logical operator
returns true if both operands are true
Try different keys and test the movie
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Keyboard detection 03KeyPressbutton.fla
Before Key class in Flash players 6 and lower event handlers were used
Open 03KeyPressbutton.fla and apply the following script to button1:
on (keyPress "<Right>") {
nextFrame();
}
on (keyPress "<Left>") {
prevFrame();
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Key Listener 04KeyListener.fla
Key Listener object “listens for” events from keys
Open 04KeyListener.fla and apply the following script to the first frame:
stop();
myListener = new Object();
myListener.onKeyDown = function() {
gotoAndStop(5);
}
Key.addListener(myListener);
Whenever keyDown event occurs the listener object is notified
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Key Listener 04KeyListener.fla
Listeners are required for the events of the
Key
Selection
TextField
Stage
classes.
You can combine Key listener with isDown () method to make Flash
respond only to certain keypresses.
First the listener detects where the key is pressed.
Then you can use if statement to test where the certain key has been
pressed.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Key Listener 05KeySpaceListener.fla
myListener = new Object();
//the object myListener is created to detect events from the
Key class
myListener.onKeyDown = function() {
//onKeyDown event is assigned to myListener
if (Key.isDown(Key.SPACE)) {
gotoAndStop(5); }
//when myListener detect SPACE key pressed Flash goes to
frame 5 and stops there.
Key.addListener(myListener);
// registers myListener to the Key class
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Key Listener 05KeySpaceListener.fla
Open 05KeySpaceListener.fla and apply the following script for the first
frame:
stop();
myListener = new Object();
myListener.onKeyDown = function() {
if (Key.isDown(Key.SPACE)) {
gotoAndStop(5);
}
}
Key.addListener(myListener);
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Sine and Cosine for directional movement 06sine_cosine.fla
Open 06sine_cosine.fla and apply the following script for the first frame:
_root.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
car_mc._rotation -= 10;
} else if (Key.isDown(Key.RIGHT)) {
car_mc._rotation += 10;
}
var myAngle:Number = 90 - car_mc._rotation;
xchange= Math.cos(Math.PI / 180 * myAngle) * 5;
ychange = -Math.sin(Math.PI / 180 * myAngle) * 5;
car_mc._x += xchange;
car_mc._y += ychange;
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
Trigonometry is the study of triangles.
Why Learn Trigonometry?
To find the distance between two points or make an object move
Rotating a spaceship or other vehicle
Properly handling the trajectory of projectiles shot from a
rotated weapon
Calculating a new trajectory after a collision between two
such as billiard balls or heads
objects
Determining if a collision between two objects is happening
Finding the angle of trajectory (given the speed of an object in
the x direction and y direction)
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
Knowing the length of any two sides of a right triangle is enough
information to calculate the other two sides of a right triangle.
This is useful when you need to find the cosine, sine, and tangent of a
triangle.
why do you need to find the cosine, sine, and tangent of a triangle?
to calculate points around a circle
Some examples of problems involving triangles and angles
the forces on an aircraft in flight
the application of torques
and the resolution of the components of a vector
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
A right triangle is a three sided figure with one angle equal to 90
degrees. A 90 degree angle is called a right angle which gives the
right triangle its name.
We pick one of the two remaining angles and label it c and the third
angle we label d.
The sum of the angles of any triangle is equal to 180 degrees.
If we know the value of c, we then know that the value of d:
90 + c + d = 180
d = 180 - 90 - c
d = 90 - c
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
We define the side of the triangle opposite from the right angle to be
the hypotenuse. It is the longest side of the three sides of the
right triangle. The word "hypotenuse" comes from two Greek words
meaning "to stretch", since this is the longest side.
We label the hypotenuse with the symbol
h.
There is a side opposite the angle c which we label
a
o for "opposite".
The remaining side we label
for "adjacent". The angle c is formed by
the intersection of the hypotenuse h and the adjacent side a.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
the relations between the sides and the angles of the right triangle
the ratio of the opposite side of a right triangle to the hypotenuse is
called the
sine (sin )
sin = o / h
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
The ratio of the adjacent side of a right triangle to the hypotenuse is
called the
cosine
(cos )
cos = a / h
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
To control how far object moves on the stage based on its angle
racing game with car driving along the track
travels at certain speed and moves to the front direction
Calculating how far car moves in any direction requires Math.sin() and
Math.cos() methods.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
The new location of the car is determined by the x and y components of
the triangle formed by the angle of the car.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
When car is pointing straight up, the y = 1 and x = 0
When car is pointing to the right, the y = 0 and x = 1
When the car is somewhere between, the sin and cos of the triangle will
give the x and y coordinates
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
Sin and cos are based on the angles that begin at 0 degrees from
horizontal axis
The rotation of car is based on the angles that begin at 0 degrees from
vertical axis
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
The y for sin function is
positive + above the origin of the circle
Negative below the origin of the circle
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
To deal with movie clips coordinate space must make 2 transformations:
subtract the rotation property from 90 to get the angle for sin and cos
Use the negative value of sin for the change in vertical y direction:
myAngle = 90 - car_mc._rotation;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
Open 06sine_cosine.fla file and enter the following script for the first
frame:
_root.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
car_mc._rotation -= 10;
// the car_mc movie clip rotates 10 degrees CCW when the left arrow
key is pressed
} else if (Key.isDown(Key.RIGHT)) {
car_mc._rotation += 10;
}
// the car_mc movie clip rotates 10 degrees CW when the right arrow
key is pressed
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
myAngle = 90 - car_mc._rotation;
// variable myAngle is used as the angle for sin and cos
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
myAngle = 90 - car_mc._rotation;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
sin (myAngle ) =
y
---1
x
cos (myAngle ) = ---1
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
y
sin (myAngle ) = -1
y = sin (myAngle ) * 1
y = sin (myAngle )
x
cos (myAngle ) = -1
x = cos (myAngle ) *1
x = cos (myAngle )
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
y = sin (myAngle )
x = cos (myAngle )
xchange= Math.cos(myAngle) ;
ychange = -Math.sin(myAngle) ;
xchange= Math.cos(Math.PI / 180 * myAngle) * 5;
ychange = -Math.sin(Math.PI / 180 * myAngle) * 5;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
xchange= Math.cos(Math.PI / 180 * myAngle) * 5;
//cos of the movie clip’s angle is calculated and passed to
xchange
Math.cos (myAngle)
cos of myAngle
Math.cos (Math.PI / 180 * myAngle)
converts myAngle from degrees to radians
Math.cos(Math.PI / 180 * myAngle) * 5
Multiplying by 5 increases the magnitude of the change
so that movie clip moves a little faster
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
ychange = -Math.sin(Math.PI / 180 * myAngle) * 5;
//the negative sin of the movie clip’s angle is calculated and
passed to ychange
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
car_mc._x += xchange;
car_mc._y += ychange;
// as the movie clip of the car rotates, the x and y
components are calculated from cosine and sine and the
cars new position is defined.
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Trigonometry 06sine_cosine.fla
_root.onEnterFrame = function()
{
if (Key.isDown(Key.LEFT))
{
car_mc._rotation -= 10;
}
else if (Key.isDown(Key.RIGHT))
{
car_mc._rotation += 10;
}
myAngle = 90 - car_mc._rotation;
xchange= Math.cos(Math.PI / 180 * myAngle) * 5;
ychange = -Math.sin(Math.PI / 180 * myAngle) * 5;
car_mc._x += xchange;
car_mc._y += ychange;
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Calculating angles
Knowing the length of any 2 sides of the right triangle is enough info to
calculate the other two angles.
The length of the opposite is often X
The length of the adjacent is often Y
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Calculating angles
We can calculate the x and y coordinates of the point
Once we have x and y coordinates we can calculate the angle (theta)
Using tangent (tan)
Tan (theta) = opposite / adjacent
Tan (theta) = y / x
Theta = arctan (y / x)
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Calculating angles
Theta = Math.atan ( this._y / this._x)
Flash provides even easier function to define x and y position without
the division the atan2()
Atan2 ()
accepts x and y positions as two parameters
to calculate the theta angle
Theta = Math.atan2(this._y, this._x)
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Calculating angles
Theta = Math.atan2(this._y, this._x)
Math returns the value of an angle in radians
Which describe angles in terms of the constant
pi
To use this value to modify the _rotation property we need to convert it
radians to degrees
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Calculating angles
to convert it radians to degrees:
radians = Math. PI / 180 * degrees
degrees = radians * 180 / Math. PI
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Calculating angles 07point2stageangle.fla
Calculating the angle of a draggable movie clip relative to either the
stage or another point and display an angle in degrees in a dynamic
text field.
Angle relative to the stage
07point2stageangle.fla
Note that movie clip called
circle_mc
Note that dynamic text field called
myDegrees_txt
Apply the following script to the first frame
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
circle_mc . startDrag ( true ) ;
StartDrag ()
makes the movie clip circle_mc follow
the pointer and centers it on the
pointer
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
_root.onEnterFrame = function()
{
myRadians= Math.atan2(circle_mc._y, circle_mc._x);
Flash calculates the arc tangent of the y position of the movie
clip divided by the x position of the movie clip and returns the
value in radians.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
myDegrees_txt.text = (myRadians * 180 / Math.PI) + "degrees";
(myRadians * 180 / Math.PI )
converts radians to degrees
The angle is converted from radians to degrees and assigned to to the
contents of the dynamic text field myDegrees_txt with the word
“degrees” concatenated
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
}
_root.clear();
_root.lineStyle(1, 0x000000, 100);
_root.beginFill(0xff0000, 30);
_root.moveTo(0, 0);
_root.lineTo(circle_mc._x, circle_mc._y);
_root.lineTo(circle_mc._x, 0);
Draws the line
_root.clear ();
erases the previous drawing on a movie
clip
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
_root.lineStyle(1, 0x000000, 100);
changes the
characteristics of
your line, such as
its point size, color
(hex) and
transparency
LineTo();
set the end point
beginFill();
fills shapes with solid color according to
2 parameters, color(hex) and
transparency
MoveTo();
sets the beginning point of your line or
curve like placing pen on paper
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
As the player moves pointer around the stage the movie clip
follows the pointer. Flash calculates the angle that the movie
clip makes with the x-axis or the root Timeline and displays it
in the dynamic text field.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to the stage 07point2stageangle.fla
circle_mc.startDrag(true);
_root.onEnterFrame = function()
{
myRadians= Math.atan2(circle_mc._y, circle_mc._x);
myDegrees_txt.text = (myRadians * 180 / Math.PI) + "
degrees";
//
// draw lines to show triangle
//
_root.clear();
_root.lineStyle(1, 0x000000, 100);
_root.beginFill(0xff0000, 30);
_root.moveTo(0, 0);
_root.lineTo(circle_mc._x, circle_mc._y);
_root.lineTo(circle_mc._x, 0);
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to another point 07point2stageangle.fla
To calculate angle relative to another point
Drag a new movie clip instance to the stage , name it “RefPoint”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to another point 07point2stageangle.fla
_root.onEnterFrame = function()
{
myRadians = Math.atan2((circle_mc._y - RefPoint_mc._y),
(circle_mc._x - RefPoint_mc._x));
By subtracting the x and y positions of the RefPoint from the draggable
movie clip positons, Flash calculates the x and y distances between 2
points.
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to another point 07point2stageangle.fla
The difference between the y positions of the circle_mc and RefPoint is
the y parameter for Math.atan2()
The difference between the x positions of the circle_mc and RefPoint is
the x parameter for Math.atan2()
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to another point 07point2stageangle.fla
Often we need to round off decimal values to the nearest whole number
(integer) so that they can be used as parameters for properties.
Math.round()
rounds the value to the nearest integer
Math.ceil()
rounds the value to the nearest integer greater
than or equal to the value
Math.floor()
rounds the value to the nearest integer less
than or equal to the value
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to another point 07point2stageangle.fla
myDegrees_txt.text = Math.round(myRadians * 180 /
Math.PI) + " degrees";
The Expression is rounded to the nearest integer and displayed in the
dynamic text filed myDegrees_txt
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Angle relative to another point 07point2stageangle.fla
circle_mc.startDrag(true);
_root.onEnterFrame = function()
{
myRadians = Math.atan2((circle_mc._y - RefPoint_mc._y),
(circle_mc._x - RefPoint_mc._x));
myDegrees_txt.text = Math.round(myRadians * 180 / Math.PI) +
" degrees";
_root.clear();
_root.lineStyle(1, 0x000000, 100);
_root.moveTo(RefPoint_mc._x, RefPoint_mc._y);
_root.lineTo(circle_mc._x, circle_mc._y);
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007