California Career and Technical Education Standards

• AME.A.A2.2 Know the component steps and skills required to design, edit, and produce a prod...
• AME.A.A2.3 Use technology to create a variety of audio, visual, written, and electronic pro...
• IT.B.B1.2 Use appropriate software to design and produce professional-quality images, docu...
• IT.B.B1.6 Know the basic design elements necessary to produce effective print, video, audi...
• IT.D.D2.1 Know the fundamentals of programming languages and concepts.

California Academic Content Standards (Reinforced)

• ELA.9-10.R.CAGT.2.6 Demonstrate use of sophisticated learning tools by following technical direction...2
• M.7.MG.1.3 Use measures expressed as rates (e.g., speed, density) and measures expressed as...22
• M.7.NS.1.3 Convert fractions to decimals and percents and use these representations in esti...24

• The Hook - Hooks / Set

  The "Hook"

  The Analog Clockface

  Students will begin by observing an analog clock.

  The teacher will say to the students:in order to make a proper animation, its often helpful for animators to observe the real-life reference.

  Tell the students: “Take a look at this real analog clock and observe how how the hands move.Observe how the minute hand moves in realtion to the second hand. What do you observe?"
• Lecture - Lecture

  Lecture: Introduction

  In this lesson you will learn to create an algorythm. An algorythim is just fancy "computer nerd" speek for a set of steps that solves a problem. In this case, we will be createing an algorythm that calculates the proper rotation of our hours, minutes, and seconds hands for our clock. We will also breifly touch on the concept of event listeners. Event listeners allow us to have our flash application react to user input (like mouse clicks) and important "events" that happen while our application is running (such as the frame changing). So lets get started!

   

  The following is a dialog that the teacher would use to teach the lesson. (for a printable version, click here)

  Provide each student with the handout titled “Degrees of Rotation”

  Explain that they will need to complete the handout as you walk them through understanding the mathematics behind the actionscript 3.0 code.

  Today, we will finally animate our clock's Hour, Minutes and Seconds hands, using actionscript 3.0 and mathematical expressions.

  Lecture:

  As each hour goes by, our hour hand must rotate a certain amount to show the current hour.

  How would we calculate the amount of rotation that the hour hand must rotate each hour?

  To calculate this, we need to know the total number of degrees in a circle and the number of hours on a clock face.

  How many degrees are there in a full circle? (Answer: 360 degrees)

  How many hours are there on a clockface? (Answer: 12 hours)

  We need to know how many degrees per hour the hour hand must rotate. In math, we know that the term ‘per’ means to divide…

  So, if we were to write an expression for this, what would the expression look like?

  Answer:

  360degrees 12 hours

   

   

  So, to find the amount of degrees of rotation per hour, we divide 360 by 12. (Answer: 30 degrees per hour)

  Thus, our hour hand must rotate 30 degrees each hour.

  But this means that on each hour mark, our hour hand will literally jump 30 degrees of rotation. Observe an analog clock. Does the hour hand jump like that? Or, does the hour hand gradually rotate as the minutes go by? (Answer: the hour hand gradually rotates as the minutes go by)

  So, we calculated how the clock’s hour hands should rotate per hour, but what about per minute?

  • hour rotation [ View Image ] [ Download Original ]
  • student handout 2 [ Download ]
• Guided Practice - Guided Practice

  Guided Practice:

  So, we calculated how the clock’s hour hands should rotate per hour, but what about per minute?

  For each minute, the hour hand should move.

  When an analog clock moves from the 1-oclock hour to the 2-oclock hour, the hour hand doesn’t just “jump” from the 1 to the 2 does it? No, the hour hand gradually moves each minute, by a certain number of degrees.

  This means that we need to figure out how many minutes there are in a 12-hour span so that we can then divide 360 degrees by the total number of minutes, to get how many degrees per minute our hour hand should rotate.

  How many minutes are there in 12 hours?

  (Answer: 720 minutes)

  How many degrees are there in a full circle?

  (Answer: 360 degrees)

   

  So, if we were to write an expression for this, what would the expression look like?

  Answer:

  360degrees 720minutes

   

   

  How many degrees per 1 minute should our hour hand rotate? (Answer:  .5 degrees)

   

  The function for the rotation of the hour hand should look like this…

  hours_mc.rotation = (hours * 30) + (minutes * .5);

  

  Where “hours_mc” is that instance name of our Hour hand object and “.rotation” is a built in property in Flash that defines the current rotation of the object on the stage.

  The * symbol means to multiply and the number “30” stands for 30 degrees rotation per hour (360 degrees/12 hours = 30 degrees per hour), and the number “.5” stands for .5 degrees rotation per minute:

  (hours * 30) + (minutes * .5);

  Let’s observe this visually so that it makes more sense…

  The clock on the last page of your handout

  (click here to see the image of the clock)

  has been visually cut into 12, 30 ^o segments (indicated by the blue lines).

  The blue lines indicate an hour. If you take the time to count all the little black lines from within each hour, you would count 60 little black lines per each hour. So, our 360 degree circle has 720 “minute marks” (indicated by the tiny black lines).  So, 360 degrees, divided by 720 minutes = .5 degrees rotation per minute.

  Now for the Minute Hand…

  The minute hand rotates 360 degrees every hour (60 minutes). So, if we want to calculate the amount of rotation for the minute hand, we divide 360 degrees by 60 minutes which equals 6 degrees of rotation per minute for the minute hand.

  minutes * 6;

  Lets look at the code we need for the minute hand…

  minutes_mc.rotation = minutes * 6

  Where “minutes_mc” is that instance name of our Minute hand object and “.rotation” is a built in property in Flash that defines the current rotation of the object on the stage.

  Again, the * symbol means to multiply and the number “6” stands for 6 degrees rotation per minute (360 degrees/60 minutes= 6 degrees per minute), and the number “6” stands for 6 degrees rotation per minute

  Now for the Second Hand…

  Lets see if you can figure out the code for the second hand. Give students some time to answer the following questions…

  How many degrees does the second hand rotate per minute?

  (answer: 360 degrees)

  How many seconds are in a minute’s rotation?

  (answer: 60 seconds)

  So, if we want to calculate the amount of rotation for the second hand,

  what would the expression for this look like?

  Answer:

  360degrees 60seconds

   

   

   

  How many degrees of rotation per second should the second hand rotate?

  (Answer: 6 degrees)

  What would the full line of code look like for the seconds hand? Do not forget to include the instance name as well as the rotation property.

  Answer:

  seconds_mc.rotation = seconds * 6

   

  Where “seconds_mc” is that instance name of our Seconds hand object and “.rotation” is a built in property in Flash that defines the current rotation of the object on the stage.

  Again, the * symbol means to multiply and the number “6” stands for 6 degrees rotation per second (360 degrees/60 seconds= 6 degrees per second), and the number “6” stands for 6 degrees rotation per second.

   

   

  • clock_rotation [ Download ]
• Closure - Closure

  Closure:

  One final thing we need to add at the very top of our code is an event listener.

  Every component broadcasts events when a user interacts with it. When a user clicks a Button, for example, it dispatches a MouseEvent.CLICK event and when a user selects an item in a List, the List dispatches an Event.CHANGE event. An event can also occur when something significant happens to a component such as when content finishes loading for a UILoader instance, generating an Event.COMPLETE event. To handle an event, you write ActionScript code that executes when the event occurs.

  Event registration

  For each event (user action or something else) you would like to intercept, you must register a so-called event listener function.

  The syntax is the following:

  addEventListener(
  Type_of_event.
  Name_of_event, Name_of_function_YOU_define);
  

  Example:

  • Let's say you have a button instance. In the parameters panel you named it hello_button.
  • If you want to tell the button to watch out for user clicks then you have to write something like to register the event with a function (see below).
  • So goto the ActionScript layer and hit F9. Then type:

  hello_button.addEventListener(MouseEvent.CLICK, click_handler);
  
  What Our Event Listener will look like:

  We'll be talking about 'Event Listeners' in a later assignment, but what you need to know for now is that the code (shown below) tells flash to run the 'update' function every time the current frame changes. So if our flash document was set to 15 frames per second, the 'update' function would be called 15 times every second.

   

  this.addEventListener(Event.ENTER_FRAME, update);

   

  Please make sure the above code is the first line of code within your actionscript panel
• Check for Understanding - Check Understanding

  Checking For Understanding

  Ask the students if they have any blanks on their activity sheet.

  Go over the statements and their associated answers.

  Summarize the information on the activity sheet.

  • Teacher_Notes_Rotation [ Download ]