Tags

Lesson Plan Industry Sector
Arts, Media & Entertainment

Lesson Plan Originally Created By: Courtney Curtis

Animating Objects Programmatically-Animating an Analog Clock face: Part1

Part of Unit: Animation Production

Lesson Plan Overview / Details

 

Lesson Introduction

In this lesson, students will begin learning the basics of Object Oriented Programming and  learn how and why an animator would instantiate an object using the properties inspector. This lesson is the first of the unit: Animating Objects Programmatically-Animating an Analog Clockface.

Time

Time
45 Minutes

Objectives and Goals

  • Students will be able to use media design software, in order to begin the process of building a 2-dimensional animation in Flash.
  • Students will be able to identify basic programming language in order to solve an error in the code
  • Students will be able to explain how technology and the arts are interrelated in the development of applications
  • Students will be understand digital applications appropriate to specific media and projects.

Activities in this Lesson

  • The "Hook"

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

    Resources and Materials

    • 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, by 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 ]
  • Lecture Overview

    1. Explain to students that before an animator animates objects via script, the animator must first have a basic foundation of the scripting language.
    2. Explain that the students will learn some basic aspects of objects in actionscript 3.0, which marks the beginning of their unit: "Animating Objects Programmatically-Animating an Analog Clockface".

    Explaining Instantiation

    The teacher will begin by explaining object instantiation…

    1. An object is a “thing” like a car is a “thing”
    2. Objects have the ability to “do” and to “know”
    3. An object comes from a class (kind of like a blueprint)
    4. So, if your car is the object, then its “class” is of type “Car”
    5. The class describes the characteristics of an object including the object’s ability to “do” and to “know”
    6. What an object can "do" are its "functions". So if your object is a car, one function it may have would be to accelerate.
    7. Objects also have properties, which describe the object’s attributes. In our case, our “car” object may have a property that describes its “year”, “make” or “model”
    8. In order for us to even “use” an object, we need to first Instantiate it.
    9. Object instantiation can be best described using a car as an analogy...

    Yes, your car might be the same year, make and model as your friend’s car, but your car may have more miles on it or less tread on its tires. So for us to “use” our specific object (such as myCar, and instance of the “car” class), we need to first give it a unique name, such as myCar. Lets say your friend has the same car from the same car class…In order to “use” her car to do something with it to change it in some way, we must give it a unique name such as “suesCar” (which again, is an instance of the car class).

    Think of object instantiation as asking the "Car" factory to produce you a new car with a specific set of properties based on one a pre-defined blueprint (class).

  • Video: Demonstrating Basic OOP Concepts Using Real-Life, Practical Analogies:

    1. Provide the students with the handout titled: “Object Oriented Programming: fill-in-the-blank Activity”
    2. Before playing the video: OOP: PART 1, explain to students that they will need to pay special attention to the video, so that they fill in the blanks of their worksheet.
    3. Play the video titled OOP: Part1. Explain that this video further explains the information regarding objects, classes, properties and functions.

     

  • Checking for Understanding Check Understanding

    Checking For Understanding

    After the video is finished, 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.

    Ask the following questions that go beyond recall:

    “Okay, so I have a car. My car was manufactured from a blueprint. This blueprint could be considered. A what?”

    (answer: a class)

    “Sue has a car just like mine; but my car is unique. It’s not the same color as Sue’s car. My car is red and Sue’s is blue. My car comes from the car class.”

    "My unique car can now be used in a script, where the script itself alters some aspect of my car, because I have instantiated my car by giving it a specific name of 'myCar' ”

     

     

  • Guided Practice Guided Practice

    Guided Practice Introduction

    The teacher will then guide the students through a step-by-step process of  importing and instantiating the layers in the layerd Photoshop document.

    As students work individually to follow the teacher, the teacher will then stop at various times and walk around the room, guiding and facilitating the students as they work the importing and instantiation process. After students complete this process, they will be asked to do the process over again, later in the lesson.

    Guided Practice: Dialog

    The teacher will then go on to say …

    “The objects that we must instantiate are the hands of the clock itself. In the animation of the clock, we saw that each hand moved at its own pace.

    To animate each hand (the hour, minute and second hand) we must provide a unique name for each hand."

    Guided Practice: Step-By-Step Process

    The teacher will guide the students through the following demonstration using the document resource "importing and instantiation"

    Make sure the students save their work at this point!

    Make sure students save their work after importing and instantiating. It is important that students know where they have saved their work, because they will be working with their Flash file over the next few days.

  • OOP_Part1 Lecture
  • Independent Practice Independent Practice

    After students have saved and exited their flash document of the clock...

    Independent  Practice and Assessment

    Tell the students they will then open a Flash document with an error in it and that they have to figure out what the error could be. (do not tell the students this, but the error is  that an objcet has not been instantiated).

    When they open the Flash document "minuteHand.fla", they will quickly see that the object on the stage looks indeed like a minute hand.

    Students will then test their movie to see the error appear in the compiler window.

    Observe the error.

    The teacher will say...

    "What do you think access of undefined property minutes_mc means?"

    (hopefully, the students will say sometihing along the lines of "the object was not instantiated")

    confirm that students understand that the error explains the object was not instantiated

    Then the teacher has the students exit out of the flash player and then open the actionscript (by pressing the F9 key).

    Students observe the actionscript

    The teacher will then say

    "What this code means is that there is this object called minutes_mc and it has an associated property which tells the object to rotate by 6 degrees."

    "By the way, as a side note, the rotation property takes values ranging from -180 to 180 degrees"

Assessment

Assessment Types:
Demonstrations, Observations,

Assessment

The teacher will then have each student properly instantiate the 'minutes_mc' object.

Tell the students that you will like to see if they can now properly instantiate their minutes_mc object

Walk around the room and observe which students understood the process of instantiating the object.

(to properly instantiate the object, students must click the object on the stage and give it an instance name in the properties panel of: minutes_mc)