back

Designer perspective:
How to approach ActionScript

by Doug Winnie

Designers and animators have relied on Adobe Flash Professional to create amazing visual content for the web or desktop. Many have taken advantage of Flash's support of Creative Suite native file formats, while others have maximized 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 and with your existing workflows. In fact, Flash Professional support for ActionScript directly supports the way you already work.

By day, I work at Adobe. By night, I teach ActionScript 3.0 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 students 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 that 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:

As you get deeper into ActionScript, you'll find that linear code will only be an option for very small projects.

Typically in ActionScript projects, you'll have pieces of code that will 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 will be 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 thirty seconds.

Now there is an obvious flow to this project:

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

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:

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". Objects 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, and you can later import this into Flash Professional:

screenshot

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

Now we have all of the visual and non-visual objects defined.

Putting it all together

Now that we have defined the events and actions of the application 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 fully define what the application will do with all of the objects based on the actions and events that happen.

When using Flash Professional, 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:

For this step, we need to do the following:

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:

For this event, we need to remember that we have four different buttons. These buttons are nearly identical with only the text inside the text fields differentiating them. 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:

We have one final event we need to flesh out with more details:

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 will help you write your ActionScript more efficiently, because you will have already mapped out the objects, actions and events of your application.

ActionScript 1:1

To help you get up and running quickly with ActionScript, I am pleased to announce the launch of my new Adobe TV series ActionScript 1:1 with Doug Winnie. The first topic we will cover is learning ActionScript. In the series, we will go into how you can use ActionScript to manipulate objects, create event handlers, timers, and create a simple and complete project. Below you'll find the first episode embedded.



Hopefully, 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 Adobe 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 Professional projects the interactive capabilities you need.

Upcoming Flash events

 

‹ Back

 


Doug Winnie is a principal product manager at Adobe focusing in interactive design for HTML5 and the Flash Platform. Doug has worked in the web and interactive industry for over ten years focusing on front-end web design and development. During his time at Adobe, Doug has lead numerous teams to make web and interactive design workflows more efficient and powerful leading the Flash Catalyst, Fireworks, and Dreamweaver teams.