Part of Lesson Plan: Animating Objects Programmatically-Animating an Analog Clock face: Part1
Activity Overview / Details
The static Clock
Students will begin by observing a simple, layered analog clock face in Photoshop. This image is static and contains no animation.
The teacher will ask the students: “Have you ever wanted to animate an object such as animate the hands of the clock?”
Then, the teacher will display an animation to the students…
Students will observe the exact same clock, but this time, it will contain moving parts such as the hour, minute and seconds hands; animated using action script 3.0.
Tying in Mathematical Variables and explaining how they relate to the animation
Ask students what they know about variables in math.
they might say: "x", "y", "z", "equations"
Have a student volunteer to write a variable on the board. The teacher will then take that variable and write a simple equation with it on the board (placing the variable on one side of the equal sign as demonstrated below)...
x = 3/4
Then, explain that the clock’s arms animate via. Mathematical variables. Explain that students will eventually learn variables in a future lesson
Why an animated clock?
Ask the students why they think it might be useful to learn how to animate a clock.
Then explain that the desktop clock widget is a very popular application on the Window Vista and Windows 7 desktop. While explaining this, flip through a couple of screenshots of the Windows Vista and Windows 7. These widgets utilize scripting language and the computer's system time, as well as some artwork.
A designer, no doubt, designs these clocks and either they themselves or someone else who understands programming technology, takes the artwork and makes it into a functional, usable application for all to use. This is how technology and the arts are interrelated in the development of applications.
Resources to Download for this lesson...
Materials / Resource
- Video:OOP_Part1 [ Watch Video ] [ Download Original Video ] Video: OOP Part 1-Explaining objects, classes, properties and functions.
- Object Oriented Programming: fill-in-the-blank Activity [ Download ] Classwork resource: Students use this fill in the blank activity sheet to fill out while watching the video
- Importing and Instantiation [ Download ] Notes for the teacher: Dialog for the teacher to read and demonstrate as students follow along
- Resource: Clock.psd [ Download ] The resource students are to download to then import into Flash
- Clock Final animation [ View Flash ] [ Download ] Animated Clock for demonstration
- Final clock flash document with script: Not used in this lesson [ Download ] This resource is not used in this lesson specifically. However, buy the end of this unit, this is the final flash document that the students are to have made
- ScreenShots of Vista an Win 7 [ Download ] Screenshots
- minuteHand.fla [ Download ]