ActionScript for Designers, Part 5

Believe it or not, we've come a long way. Fresh off our triumphant first script from last time, we're going to follow up today with a more casual discussion of such vague and jelly-like concepts as properties, operators, types, and functions. I'm going to try to make all this stuff as clear (and fun, if that's even possible) as I can, because although it's somewhat dry material, it's crucial stuff to (at least partially) grasp if you want to take the next step and start writing truly useful ActionScript.

Note—previous installments of this series are available from the following links:

Part 1: We have to tear down before we rebuild
Part 2: Who's up for a little target practice?
Part 3: Nothing like a little detour after a really, really long break
Part 4: Targeting (and scripting!) the easy way

Full disclosure time

Before we get going, let me take this opportunity to gently remind you that when it comes to "real" programming, I really don't have any idea what I'm talking about. You see, since this series is ActionScript for Designers and not ActionScript for People Who Have Computer Science Degrees and Already Program for a Living, I'm really not concerned with the fact that I have no formal training in programming at all. Like (what I hope is) the target audience of this series, I was, once upon a time, deathly afraid of anything even remotely related to programming. But necessity is the mother of invention, or in this case, it was the mother of getting off my duff and facing my fears and perceived lack of acumen for such things. Over time, and with no shortage of frustration, I got better, and so will you. But like the title character Jodie Foster played in Nell, I got comfortable with the language by coming up with my own ways of describing things to myself so that they made sense to me. So while I won't even begin to claim that I'm passing along best practices for programming in general (since I don't know what those are anyway), I will claim that the goal here is to augment your design skills with enough ActionScript understanding to allow you to conceptualize and execute some really nice interactive stuff in Flash all by your lonesome. If you want "true" programming lessons, by all means, look anywhere but here. Fair enough? OK, let's get on with it.

Cozy up to the Actions panel

The best way to try and put this highly geeky stuff into perspective is to go through and cherry-pick some of the concepts that would actually be of use to designers, with an eye towards starting with basic interactivity and then delving into things like procedural animation, fluid interfaces, video control, text manipulation, etc. So we're going to keep today's discussion firmly within the confines of the Actions Panel; specifically, the "Add a new item to the script" (the plus icon we've talked about in previous articles) button and what it contains.

So fire up Flash, open the Actions Panel, and point your mouse at the aforementioned "Add a new item..." button (fig. 1). Since that's where most of you will at least initially be starting scripts from, we're going to use that menu's hierarchy to help put things into a little bit of perspective. Don't let the contents of the menu scare you, because I have no qualms about skipping over stuff that should be ignored, at least for those just starting out with ActionScript.

Figure 1

So let's just go down the list, shall we?

1) Global Functions. Generally speaking, functions, unsurprisingly, represent functionality. In other words, these are commands that tell something to do something. Play. Stop. Print. Et cetera. This part of the menu lists functions that can be called at any time, hence the "global" tag.

Functions can also mean something else. You can create your own functions, effectively smushing complex code into a bite size handler that you define. For example, if I wanted to write a function that moved a Movie Clip to a certain set of coordinates on screen, I would write:

function moveClip(myClip, xCoord, yCoord) {
  myClip._x = xCoord;
  myClip._y = yCoord;
}

Then, to call the function and have it work on a clip named circle_mc (for instance), I would just write:

moveClip(circle_mc, 150, 150);

That would call the function I wrote and pass the name of the clip (circle_mc) and the x and y coordinates (150 and 150) as arguments. We're going to be writing functions later on in the series and going over what's happening in depth, but hopefully this is a clear enough introduction. So for now, just remember that a function tells Flash to do something.

2) Global Properties. There aren't a lot of global properties—what's there mostly applies to things that help in targeting (_root, _parent, this, etc., which we've gone over in depth in previous articles). There are also a few things like _quality which have to do with overall playback. For the purposes of what we're doing, though, properties apply to object characteristics. Where is the object on the stage? How transparent is it? What are its dimensions? Stuff like that. Remember way back to our discussion of functions a few sentences ago? I know, it's been ages. Anyway, in the function I wrote, _x and _y were properties of the myClip object; in that case, they were the x and y coordinates I wanted circle_mc to be at on the stage. We're going to use properties a lot once we start the project phase of this series.

3) Operators. These can get a little freaky, what with lots of equal signs and ampersands and just that just screams, "code!" But we're going to use operators a lot too, albeit in limited fashion. There are two ways to think about operators, at least in the context under which we're going to use them. The first way is basic math. Operators like / and * do things like divide and multiply, respectively (I know I don't need to tell you what + and - do). Operators are also used to do things like assign values to variables or test whether conditions are met. For example if you have a variable named foo and you wanted to assign it a value of "Hello World," you would use the = operator to set that:

var foo = "Hello World";

Now, if you wanted to see if the value of foo was equal to some value or not, you would use another operator. For instance,

if (foo != "Hello World") {
  trace("nope");
}

In this case, the operator != means "is not." So, in effect, I'm asking if foo didn't equal "Hello World," and if that condition is met, to trace the word "nope" in the Output window. Other operators mean things like "or" or "is." That's the long and short of operators: math and comparison.

4) Statements. There are four ways we're going to think about statements. Again, I'm going to ask you to think way back to the operator example we just talked about. I was asking if foo was equal or not to some value, and to do something if it wasn't. That's an example of a conditional statement, where certain code is executed depending on whether or not a condition is met. These statements are also commonly known as "if-then" statements.

A loop is another example of a statement. In a loop, you tell Flash to repeat the same thing a certain number of times, which is helpful in (for example) building an interface with several similar buttons in it without having to drag them onto the stage first. I'm foreshadowing here.

The third way we're going to use statements is when we write functions. I already wrote one earlier, and as I warned you, we're going to do that a lot. So be ready when the time comes, but know for now that a function is also a type of statement.

Finally, the last kind of statement we're going to worry about is the ubiquitous variable. Variables are the bread and butter of ActionScript (and all types of coding, for that matter), but in a nutshell, variables are snippets of code that are used as placeholders (for lack of a better term). For example, if you're making a presentation in Flash, rather than "hardcoding" the page numbers with static text at the bottom of each slide, you can set a variable that can add to and subtract from itself and automatically insert the correct number on the fly. There are thousands of examples of how variables can save your skin, especially when you start to do complex things, but that should suffice for now.

5) ActionScript 2.0 Classes. The meat of ActionScript is all right here in this menu. Basically, everything bit of code that Flash has "built in" is available here. The term Class refers to groupings of functionality and the code available to each group. Examples: the Color class lets you define a clip's color on the fly, and the Media class can stream video and control an end user's camera and microphone. Each class is divided up by functionality—methods (which, as far as I can tell, are more or less synonymous with functions in that they are the commands that do things), event handlers (such as mouse up, key down, and others that are the script "triggers" we've discussed in earlier installments), and properties. Pretty much everything we're going to be doing with ActionScript is defined here.

Of course, real ActionScript gurus (not me, not even close) create their own classes from scratch to create new functionality, and while we're not even going to come near that, it's still a testament to the power and flexibility of ActionScript, and just how far Flash has come in a relatively short amount of time.

6) Compiler Directives. You so don't need to worry about this.

7) Constants. This is a pretty simple concept, which is good, since we'll be making use of them. True is a constant. False is a constant. Infinity is a constant. Relatively basic stuff here.

8) Types. They're not tremendously relevant to the ActionScript 1.0 we're mainly going to be writing, but types are worth a bit of explanation anyway. With ActionScript 2.0, which became an option (and the Macromedia-preferred method of coding) in Flash MX 2004, variables should be "typed." For example, a number is a type, so if you're setting a variable to equal a number, it would need to be written like so:

var myNum:Number = 6;

By placing the colon and "Number" after the variable name, I've effectively "locked in" the type, and Flash will spew forth an error if I try to perform operations on that variable that fall outside those applicable to that type. There are types for all of Flash's Classes, from Color to String to Sound. But again, while I understand how to use types, I've been very lax in following such strict rules, and my bad habits will soon become yours in the interest of simplicity.

9) Deprecated. Not much here to concern ourselves with here, except to say that with every new version of Flash, Macromedia dooms some code to the dustbin of history. Though the stuff here should still work (at least for a while), "deprecated" is a fancy way to say "don't use this."

10) Data Components. I seriously doubt we'll get to these, so they're safe to ignore.

11) Components. I'm sure many of you have used Components before, especially the UI Components (checkboxes, text areas, etc.) and Media Playback Components. Of course, each Component has a set of commands for accessing them via ActionScript, and this menu is where you'll find them. This is very similar to ActionScript 2.0 Classes, with the difference being that Components aren't "built-in" per se and have to be added to a project manually.

12) Screens. And finally, here's one last thing that we won't concern ourselves with.

Bored yet?

Yeah, I know this isn't super exciting stuff, but it's highly worth knowing what it all means anyway, since we're going to actually put a lot of this to practical use in upcoming installments. Speaking of which, next time we're going to start an actual project, so it will be very nice to get out of the realm of the theoretical and start doing something substantive. Until then, folks!

Filed under: Tutorial on November 18th, 2005

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.