Presentation is loading. Please wait.

Presentation is loading. Please wait.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 8 "The games of a.

Published byCecilia Thomas Modified over 8 years ago

Similar presentations

Presentation on theme: "AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 8 "The games of a."— Presentation transcript:

1 AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 8 "The games of a people reveal a great deal about them.“ Marshall McLuhan

2 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

3 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

4 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

5 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 " ") { nextFrame(); } on (keyPress " ") { prevFrame(); }

6 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

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

8 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

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

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

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

12 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

13 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

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

15 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

16 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

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

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

19 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

20 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

21 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

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

23 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

24 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

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

26 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 x cos (myAngle ) = ---- 1

27 AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 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

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

29 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

30 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

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

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

33 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

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

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

36 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

37 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

38 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

39 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

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

41 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

42 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

43 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

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

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

46 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”

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

48 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()

49 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

50 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

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

Download ppt "AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 8 "The games of a."

Similar presentations

Trigonometric Functions

Trigonometric Functions
UFCEKU-20-3Web Games Programming Game Math. UFCEKU-20-3Web Games Programming Agenda Revise some basic concepts Apply Concepts to Game Elements.

UFCEKU-20-3Web Games Programming Game Math. UFCEKU-20-3Web Games Programming Agenda Revise some basic concepts Apply Concepts to Game Elements.
Section 10.1 Tangent Ratios.

Section 10.1 Tangent Ratios.
Trigonometry A brief review. 1.4 Trigonometry.

Trigonometry A brief review. 1.4 Trigonometry.
Quadratic & Polynomial Functions

Quadratic & Polynomial Functions
5/5/201510.2: Sine and Cosine Ratios 10.2: Sine and Cosine Expectation: G1.3.1: Define the sine, cosine, and tangent of acute angles in a right triangle.

5/5/ : Sine and Cosine Ratios 10.2: Sine and Cosine Expectation: G1.3.1: Define the sine, cosine, and tangent of acute angles in a right triangle.
Honors Geometry Section 10.3 Trigonometry on the Unit Circle

Honors Geometry Section 10.3 Trigonometry on the Unit Circle
Vectors and Oblique Triangles

Vectors and Oblique Triangles
Chapter 4.1 Mathematical Concepts

Chapter 4.1 Mathematical Concepts
Chapter 4.1 Mathematical Concepts. 2 Applied Trigonometry Trigonometric functions Defined using right triangle  x y h.

Chapter 4.1 Mathematical Concepts. 2 Applied Trigonometry Trigonometric functions Defined using right triangle  x y h.
4.1: Radian and Degree Measure Objectives: To use radian measure of an angle To convert angle measures back and forth between radians and degrees To find.

4.1: Radian and Degree Measure Objectives: To use radian measure of an angle To convert angle measures back and forth between radians and degrees To find.
The World’s Largest Ferris Wheel

The World’s Largest Ferris Wheel
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Intro to Action Script 9 The games of a people reveal.

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Intro to Action Script 9 "The games of a people reveal.
EXAMPLE 1 Finding Trigonometric Ratios For PQR, write the sine, cosine, and tangent ratios for P. SOLUTION For P, the length of the opposite side is 5.

EXAMPLE 1 Finding Trigonometric Ratios For PQR, write the sine, cosine, and tangent ratios for P. SOLUTION For P, the length of the opposite side is 5.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript 3.0 2.Work with instances of movie clip symbols 3.Use code snippets.

Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Where you see the picture below copy the information on the slide into your bound reference.

Where you see the picture below copy the information on the slide into your bound reference.
8-3 8-4 Sine, Cosine and Tangent Ratios Objective Students will be able to use sine, cosine, and tangent ratios to determine side lengths in triangles.

Sine, Cosine and Tangent Ratios Objective Students will be able to use sine, cosine, and tangent ratios to determine side lengths in triangles.
Copyright  2011 Pearson Canada Inc. Trigonometry T - 1.

Copyright  2011 Pearson Canada Inc. Trigonometry T - 1.
Right Triangles and Trigonometry

Right Triangles and Trigonometry
1 Circular Functions Just a fancy name for Trigonometry –Thinking of triangles as central angles in a circle Have done trigonometry ever since grade 9.

1 Circular Functions Just a fancy name for Trigonometry –Thinking of triangles as central angles in a circle Have done trigonometry ever since grade 9.

Similar presentations

Ads by Google