Project 1. Countdown Clock
You’ve learned a lot about ActionScript so far, and now it is time to apply these new skills in a project that you try on your own. The projects in this book are divided into two parts. The first defines the requirements of the project, and gives you some hints and things to consider before you launch Flash Professional CS5.5 and start cranking out code. This structure is very similar to how you might use Flash in your job. Your client or company has a set of requirements in a document or some other form that you need to include in your finished project. You also probably have some people that you work with that you can get some advice and guidance from as well.
The second part is a walkthrough of a finished project that meets the project requirements and includes how it was completed. The finished example is also available on the book website (www.peachpit.com/actionscript3dd) for you to download and tinker with. Let’s get started.
Project Specification: Countdown Clock
A clock needs to be created for someone to trigger a countdown timer, see an analog representation of the remaining amount of time, and send notification when the clock has completed counting down.
The countdown timer has a fixed duration of 10 seconds, the countdown clock has an analog unit of measurement of 1 second, and it does not show smaller increments of time.
Working like an analog clock or stopwatch, a clock hand starts pointing up at the “12 o’clock” position and rotates clockwise around the analog dial, ending back at the “12 o’clock” position.
The project should have a trigger button that starts the countdown. The button should be removed when the countdown starts, and when the timer is complete.
The user interface design should match the wireframe comps that are part of the design specification for the project. Visual design requirements are not specified and are at the interactive designer’s discretion.
Visual Design Review: Countdown Clock
After reviewing the project spec, the user experience designer created a wireframe (Figure P1:1) that outlines the user interface and defines how the user interacts with the clock.
Kick-Off Meeting Notes: Countdown Clock
Before starting the project, a number of people on the team hold a quick kick-off meeting. These quick meetings allow team members to bounce ideas off each other on how to create the project and to learn from what has and hasn’t worked in previous projects.
A team member suggested that you build the application using three states. Using ActionScript, you can change the visibility and display of objects to create these states. The project will show what is in the wireframe as State 1. When the timer is started, the display changes to show State 2. When the timer expires, the interface changes to State 3.
While discussing the timer, two specific parameters of the timer were covered: The timer has an interval of one second; and the timer will have ten seconds, or ten intervals, each of one second.
A designer reminded you where the second hand rotation point is, and suggested you make sure that the rotation point of the second hand is in the right location to rotate correctly using ActionScript.
Solution and Walkthrough: Countdown Clock
How did you do?
This project incorporated almost everything you have learned so far in ActionScript. Let’s walk through a finished example that I made and see how it works.
Something to consider, and this will apply to all the projects in this book, is that this is just one way to solve this project. There are multiple ways to complete the project using Flash and ActionScript, which is one of the great benefits of Flash. Remember that this is an example, but you might find some techniques that I used that will make doing this project again easier.
Project Setup in Flash Professional
The project file in Flash Professional is pretty simple (Figure P1.2). There are no timelines to speak of, with the exception of the single frame with ActionScript code that you will look at more closely later. The Library is populated with four objects, each exported for ActionScript with a class name.
Figure P1.2. Project setup in Flash Professional
Looking at Figure P1.2, the first item is the face of the clock (ClockFace) and then the second hand (ClockHand). Then there are two MovieClips that are used to start and end the clock. The start MovieClip (TimerStart) is used as a trigger to start the timer. When the timer ends, the TimerExpired MovieClip is displayed to show the user that time is up.
The project itself is set with a light blue background and has been set with the right dimensions defined in the design spec.
One thing that should be mentioned is the setup for the clock hand. When you create graphics in Flash Professional or import them from another product (like Adobe Illustrator), the registration point defaults to the upper-left corner of the MovieClip. The catch is that this is also where the object rotates from, which is not what you want for the hand of the clock.
The hand of the clock needs to rotate from the bottom of the arm, so the registration point needs to be configured there (Figure P1.3).
Figure P1.3. Setting up the hand of the clock
With the rotation point in the right place, the clock hand will rotate correctly around the clock face.
Pretty simple stuff—but let’s take a look at the code next.
ActionScript Setup
The ActionScript for the project is in a single frame on the timeline. Here are the contents:
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
// Create objects to display
var beginButton:TimerStart = new TimerStart();
beginButton.x = 40;
beginButton.y = 148;
beginButton.width = 471;
beginButton.height = 100;
addChild(beginButton);
var clockFace:ClockFace = new ClockFace();
clockFace.x = 99;
clockFace.y = 23;
clockFace.width = 350;
clockFace.height = 350;
clockFace.visible = false;
addChild(clockFace);
var clockHand:ClockHand = new ClockHand();
clockHand.x = 275;
clockHand.y = 202;
clockHand.width = 32;
clockHand.height = 150;
clockHand.visible = false;
addChild(clockHand);
var timerEnd:TimerExpired = new TimerExpired();
timerEnd.x = 40;
timerEnd.y = 148;
timerEnd.width = 471;
timerEnd.height = 100;
timerEnd.visible = false;
addChild(timerEnd);
// Add event listener to start timer
beginButton.addEventListener(MouseEvent.CLICK, startTimer);
// Create the timer object
var clockTimer:Timer = new Timer(1000,10);
// Add event listeners for timer
clockTimer.addEventListener(TimerEvent.TIMER, tickTimer);
clockTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerExpired);
// Start timer
function startTimer(e:MouseEvent):void
{
beginButton.visible = false;
clockFace.visible = true;
clockHand.visible = true;
beginButton.removeEventListener(MouseEvent.CLICK, startTimer);
clockTimer.start();
}
// Timer tick callback
function tickTimer(e:TimerEvent):void
{
clockHand.rotation += 36;
}
// Timer complete callback
function timerExpired(e:TimerEvent):void
{
clockFace.visible = false;
clockHand.visible = false;
timerEnd.visible = true;
clockTimer.removeEventListener(TimerEvent.TIMER, tickTimer);
clockTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerExpired);
}
Ok, to make this easier to work through, let’s focus on specific areas, one at a time.
Auto-Generated Imports
As you may recall, Flash Professional will add import statements to the top of your code automatically. These lines need to stay in your project. You’ll learn what the import statement does later in the book.
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
Display Objects
This next section of code creates instances of the objects in the Library, positioning them on the Stage, setting their visibility, and adding them to the display stack.
// Create objects to display
var beginButton:TimerStart = new TimerStart();
beginButton.x = 40;
beginButton.y = 148;
beginButton.width = 471;
beginButton.height = 100;
addChild(beginButton);
var clockFace:ClockFace = new ClockFace();
clockFace.x = 99;
clockFace.y = 23;
clockFace.width = 350;
clockFace.height = 350;
clockFace.visible = false;
addChild(clockFace);
var clockHand:ClockHand = new ClockHand();
clockHand.x = 275;
clockHand.y = 202;
clockHand.width = 32;
clockHand.height = 150;
clockHand.visible = false;
addChild(clockHand);
var timerEnd:TimerExpired = new TimerExpired();
timerEnd.x = 40;
timerEnd.y = 148;
timerEnd.width = 471;
timerEnd.height = 100;
timerEnd.visible = false;
addChild(timerEnd);
Something important to notice is that the clock face is created before the clock hand. As you add children to the display stack they are placed on top of the previous objects. If you created the clock hand first and then the clock face, the hand would be obscured by the face and you couldn’t see the hand.
Although the design specification defined three states to the application, you are instead using ActionScript to control the objects in the states using the visible property. You can toggle this property when you need to restructure the objects that are displayed in each state of the application.
Event Listener for the Start Button
The next segment of code detects when the user clicks the start button:
// Add event listener to start timer
beginButton.addEventListener(MouseEvent.CLICK, startTimer);
Using a simple MouseEvent.CLICK event, you are attaching a listener to the start button of the project and executing a callback function when the user clicks the button (Figure P1.4).
Figure P1.4. The clock start button
Timer and Timer Event Listeners
This section creates the timer and listens for when the user clicks the start button:
// Create the timer object
var clockTimer:Timer = new Timer(1000,10);
// Add event listeners for timer
clockTimer.addEventListener(TimerEvent.TIMER, tickTimer);
clockTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerExpired);
You create an object called clockTimer and define two properties. You set the interval duration to last 1,000 milliseconds, or one second. You also set a total number of ten intervals in the timer before it broadcasts an event that it is finished.
The two event listeners that are attached to the timer instance will execute a callback function when each interval is complete and when the final interval is finished.
Callback Function for Starting the Timer
This section creates the function to start the timer:
// Start timer
function startTimer(e:MouseEvent):void
{
beginButton.visible = false;
clockFace.visible = true;
clockHand.visible = true;
beginButton.removeEventListener(MouseEvent.CLICK, startTimer);
clockTimer.start();
}
When you click the start button for the project, you need to execute the startTimer callback function. The function disables the visibility of the start button and then displays the clock face and hand. You don’t need the button listener anymore, so remove it and then start the timer (Figure P1.5).
Figure P1.5. Showing the clock face
Callback Functions for Timer Events
This section of code handles the rotation of the clock hand:
// Timer tick callback
function tickTimer(e:TimerEvent):void
{
clockHand.rotation += 36;
}
// Timer complete callback
function timerExpired(e:TimerEvent):void
{
clockFace.visible = false;
clockHand.visible = false;
timerEnd.visible = true;
clockTimer.removeEventListener(TimerEvent.TIMER, tickTimer);
clockTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerExpired);
}
The first callback function, tickTimer, is for when each interval of the timer executes. In this case, you want to change the location of the clock hand to show the passage of a second of time. Since you set up the object to rotate correctly in the MovieClip definition, you need to rotate it around the center point.
A circle measures 360 degrees around, and this clock contains ten intervals, so therefore, each interval is one-tenth of the circle, or 36 degrees. You can add 36 to the current value of the rotation property of the clock hand instance to show it rotating around the clock face.
The second callback function, timerExpired, executes when the final interval takes place. In it, you are hiding the clock face and hand and are displaying the timer expired MovieClip (Figure P1.6). For good measure, you remove the timer event listeners as well, and the project stops at this point.
Wrapping Up
This project combines a lot of concepts that were covered in the first chapters of the book. First, objects were dynamically added to the stage, positioned, and added to the display stack. Then, the types of objects that were displayed were manipulated based on user interactions. The first interaction being that of the mouse to start the timer, the second interaction was based on the timer itself.
Although this is a fairly simple example, this project embodies the core basics that you will be building on in future chapters. Having a strong understanding of the event listener model is the basis for any interactions you’ll create.
You are well on your way—in the next section you’ll learn how to formalize your coding in a method called “object-oriented programming” and then use that to create more complex projects, and eventually learn how to create desktop and mobile applications using Adobe AIR.