Lesson Plan Industry Sector
Arts, Media & Entertainment

## Lesson Introduction

In this lesson, students will learn to develop an algorithm to calculate the proper rotation for the hands on our clock. They will then use event listeners to bring the hands to life and complete the animation.

Minutes
45 Minutes

### Objectives and Goals

• Students will be able to use the fundamentals of actionscript 3.0 programming language and concepts.
• Students will be able to know the basic design elements necessary to produce an application for Web-based media.
• Students will be able to know the component steps and skills required to design, and produce an application in Flash

### Activities in this Lesson

• 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 algorithm. An algorithm is just fancy "computer nerd" speek for a set of steps that solves a problem. In this case, we will be createing an algorithm 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?

## 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?

• 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?

How many degrees are there in a full circle?

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

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

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?

How many seconds are in a minute’s rotation?

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

what would the expression for this look like?

## 60seconds

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

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.

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.

• 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:

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.

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.

### Assessment

Assessment Types:
student demo

Assessment

Ask the following questions that go beyond recall:

“Okay, so if we were to make a milliseconds hand, instantiate it and then animate it, what would the code look like?"

Type the code into yor actionscript panel and see if your code is the same as your classmate's sitting next to you. Then, modify your code if you think you need to, in order to make it correct.