By Doug Winnie
27 July 2009


User level


Required products

Designers and animators rely on Adobe Flash to create amazing visual content for the web or desktop. Many take advantage of its support of Adobe Creative Suite–native file formats, while others maximize the functionality of the Timeline. There is a point, though, that many Flash users feel is inevitable: they need to learn ActionScript.
First off, let me assure you that learning ActionScript does not mean you need to sacrifice the training and investment you have put into Flash Professional, Creative Suite, or with any existing workflows. In fact, Flash support for ActionScript directly supports the way you already work.
By day, I work at Adobe. By night, I teach ActionScript 3 at San Francisco State University. When I work with students who are approaching ActionScript for the first time, I like to clarify a few concepts before jumping into the code. This helps them get into the groove of AS3 and helps to streamline the learning process. So, here goes.

Life and the Timeline is linear, ActionScript is not

A majority of people that I have met who use Flash every day are masters of the Timeline. They know all of the ins and outs of how to use it and can make it bend by sheer will.
One aspect of the Timeline is in the name: "time." The Timeline is linear, meaning it has a starting point and an ending point. You can redirect its linear flow to a different point, but primarily a Timeline moves in one direction.
ActionScript is a bit different, and this can confuse new coders. While it is true that code executes one line at a time, the execution of all of the code in your application does not start from the first line and run to the last. I cannot write a command in ActionScript that says to go back to a specific line of code like I can do with frames on the Timeline.
When I create code and place it on the first frame of the Timeline (also called a frame script) or create a document class (a separate ActionScript file that contains the code for your file), I can create code in multiple ways, as follows:
  • Create simple code that runs from the first line to the last
  • Create named sets of code called functions
  • Create classes that define the contents and behaviors of different graphics and animations on my stage
As you get deeper into ActionScript, you'll find that linear code is an option only for very small projects.
Typically in ActionScript projects, you'll have pieces of code that start things off. For instance, I may want to get some information from the user before starting the main part of my application. From that point on, the code that I create is based on actions that the user takes.
For instance, let's create a sample project that is a multiple-choice quiz. The quiz has a few items that are displayed to the user: The question itself and four options (A, B, C, and D). There might also be a timer that counts down for 30 seconds.
Now there is an obvious flow to this project:
  • Display the question and answer
  • User tries to answer the question
  • Display if the user is correct or incorrect
This flow is linear, but the way I code it isn't. Generally when I am coding ActionScript, I want to create code that is based on events of the project.
Events are actions that the application itself makes, or that the user creates by interacting with the mouse or keyboard. It is a good idea to map out the actions that can take place in your project in a flow map or outline, so you can get a clear picture of what can happen in your application.
Here is an example:
  • Display the question and answers. Start the 30-second countdown timer.
  • If the timer ends, display the correct answer to the user.
  • If the user clicks the right answer, stop the timer and congratulate the user.
  • If the user clicks the wrong answer, stop the timer and display the correct answer.
When we create our ActionScript for this sample project, we need to create code that will let these four events happen. Unlike some languages, the execution of the ActionScript code doesn't pause when the project needs to get user feedback. All of the code is accessible at the same time. By creating code that is specific to events, we can then get everything moving in the correct order.
Events are triggered by objects on the Stage or through objects you create in your code that reside in memory but aren't displayed on the Stage. An example of the first kind include buttons and movie clips that know when they have been clicked or when the mouse if hovering over it.
The second item could be our timer. It isn't displayed on the Stage (although we could if we wanted to) but instead is kept in memory and is constantly keeping track of time. The timer needs to let the application know when time has run out as an event.
Using these events, we have a better idea of how we can build our outline:
  • When the application starts, display the question, answers and start the timer.
  • When the mouse is clicked on one of the four answer buttons:
  • Check to see if the clicked button is the correct answer.
  • If the selected button is the correct answer, stop the timer and congratulate the user.
  • If the selected button is not the correct answer, stop the timer and display the correct answer.
  • When the timer expires, display the correct answer.
This is basically the same as before, but we are now thinking more in terms of the actions and events of the application. You'll find that as you learn ActionScript and the basics of responding to events, also called event handling, mapping out the event and actions of your application will save you time down the road.

Stuff, things, and objects

In Flash, you can create movie clips, graphics, buttons, animations, and other elements on the Stage. These are all referred to in ActionScript as objects. They are the basic building blocks of every Flash project, regardless if you use ActionScript or not.
Movie clips and buttons are objects that you may already be used to—but, actually, text fields, data values, timers, and the project itself are all objects too. Let's take the quiz example and break that down in the the objects that we'll need to have on the Stage, and also in ActionScript.
It may be helpful to draw a sketch of your outline or use an application like Adobe Fireworks to identify the parts of the layout. Fireworks lets you build out the objects and layout of your project, which you can later import into Flash (see Figure 1).
Figure 1. Sketch of your quiz (using Fireworks CS4)
Let's step through what we have here. We have a text field that displays the question and then we have four buttons that—inside of each—have a text field that displays a possible answer. These buttons are our A, B, C and D options. We have another text field that displays feedback to the user after they have attempted to answer the question. What isn't displayed here is the countdown timer, since that isn't displayed on the Stage.
There are a couple other objects that we need to consider as well, and these refer to values. As I mentioned earlier, data values are objects too—just as much as the buttons and text fields we just outlined. In our quiz there is one specific data value that we need to know: Which answer is correct? If we take our list of visual objects, we can add our non-visual object and know all of the objects that will be part of the project:
Question Text: Text field
Answer A: Button
    Answer Text: Text field
Answer B: Button
    Answer Text: Text field
Answer C: Button
    Answer Text: Text field
Answer D: Button
    Answer Text: Text field
Countdown Timer: Timer
Feedback Text: Text field
Correct Answer: Data
Now we have defined the events and actions of the application.

Putting it all together

Along with the various visual and non-visual objects, we can start creating a complete definition of what we are about to build. This definition is called a specification, or spec. For a good spec, we want to define fully what the application will do with all of the objects based on the actions and events that happen.
When using Flash, we can create objects on the Stage and then create code that changes or manipulates the objects. The visual objects that are part of our project can already exist on the Stage, but some of the objects need to be created that are non-visual. We can define these in our spec as well.
Let's do this step by step, referring to our previous outline:
  • When the application starts, display the question, answers and start the timer.
For this step, we need to do the following:
  1. Display the question in the Question Text Field object.
  2. Display the four option buttons.
  3. Display the possible answers in the Answer Text Fields in each button.
  4. Create the Countdown Timer object, set the duration of the timer and start it.
  5. Create the Correct Answer object and set its value based on the correct answer, A, B, C, or D.
With this, we have defined the start up of the application, also called the initialization. Now it is on to the events themselves. Our original outline contained the following event:
  • When the mouse is clicked on one of the four answer buttons, check to see if the clicked button is the correct answer:
    • If the selected button is the correct answer, stop the timer and congratulate the user.
    • If the selected button is not the correct answer, stop the timer and display the correct answer.
For this event, we need to remember that we have four different buttons. These buttons are nearly identical, differentiated only by the text inside the text fields. The answer to the question is contained in the correct answer data object, and we need to display the results to the user using the feedback text field:
  • When the user clicks Answer A, Answer B, Answer C, or Answer D, check to see if the selected answer matches the value of the correct answer data object:
    • If the values match, hide the answers that are incorrect and display a congratulations message to the user in the feedback text field.
    • If the values do not match, hide the answers that are incorrect and display a message to the user in the feedback text field.
We have one final event we need to flesh out with more details:
  • When the timer expires, display the correct answer. This is almost exactly the same as the incorrect answer option above, except it is being triggered by the timer, not the user.

  • When the timer expires, hide the answers that are incorrect, display a message to the user in the feedback text field.
Now we have the major elements of a complete specification complete. Obviously for a simple quiz, this can seem like overkill—but as you start to create larger and larger projects, creating a specification helps you write your ActionScript more efficiently because you have already mapped out the objects, actions and events of your application.

Where to go from here

To help you get up and running quickly with ActionScript, check out my Adobe TV series, ActionScript 1:1 with Doug Winnie. The series goes into how you can use ActionScript to manipulate objects, create event handlers and timers, and create a simple and complete project.
I hope that after reading this article you'll have a better perspective on how to approach ActionScript. Thinking of your project in terms of objects—an outline of events—is the first step. Creating specifications and mockups in Fireworks is a great way to speed up your training in ActionScript, and will help you be a more efficient developer in the future. The techniques introduced here combined with your ActionScript training with Adobe TV or other resources will give your Flash projects the interactive capabilities you need.
Note: This article originally appeared in the Edge newsletter.