AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Intro to Action Script 8 "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 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 " ") { nextFrame(); } on (keyPress " ") { prevFrame(); }

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 objects such as billiard balls or heads 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 = c d = 90 - c

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 o for "opposite". The remaining side we label a for "adjacent". The angle c is formed by the intersection of the hypotenuse h and the adjacent side a.

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Trigonometry 06sine_cosine.fla myAngle = 90 - car_mc._rotation; // variable myAngle is used as the angle for sin and cos

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Trigonometry 06sine_cosine.fla myAngle = 90 - car_mc._rotation;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Trigonometry 06sine_cosine.fla y sin (myAngle ) = x cos (myAngle ) =

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Trigonometry 06sine_cosine.fla y sin (myAngle ) = --y = sin (myAngle ) * 1 y = sin (myAngle ) 1 x cos (myAngle ) = --x = cos (myAngle ) *1 x = cos (myAngle ) 1

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Calculating angles to convert it radians to degrees: radians = Math. PI / 180 * degrees degrees = radians * 180 / Math. PI

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