Kasra Yousefi

Introduction

Designers usually tend to avoid working directly with the Adobe ®Flash® programming language called ActionScript®, because there is a misconception that programming in general, and object oriented programming in particular, are complex subjects in realm of software engineering, not art and design.

Contrary to general belief, object oriented programming and design fundamentals are easy concepts to learn and all the core concepts can be explained roughly in a single short session. In the following text, I’ll try to explain the basics of OOP in the simplest form for designers who are interested in learning an OOP language in order to prove my point. Let’s begin!

Define the problem before solving it

Another common stereotype about programming is that every program consists of a flowchart-like set of procedures like this:

1-Do task A

2-Do task B

3-If we still didn’t reach the results, go to line #1

4-Do task C

While this is not completely untrue, in reality solving every problem using flowchart-like procedures creates great complexities. For Instance, just imagine the complexity of breaking down the activities of a car driver when starting a car into a flowchart.

0-Search for your car

1-Go to your car

2-Is it your car?

3- If so, take out the key

4-if negative, go to line #0

5-…

You can clearly see that we can create a book as thick as an encyclopedia and still be unable to begin defining the actual activity of driving. In other words, procedural problem solving is a weak tool for modeling the complexities of the real world. That’s why developers call complex procedural programs “Spaghetti code”!

OOP to the rescue

OOP approaches the real world problems by breaking them down into “objects”. The meaning of the term “object” in OOP is very similar to its meaning in the physical world; Objects, say, a car, have properties like color, material type, name, physical dimensions and owners. Some objects can be broken down into smaller subsets of objects. For[R1] example, in case of a car, we can break down it into gearbox, steering wheel, engine, etc. However, for the sake of simplicity, sometimes we prefer to “see” the entire set of related objects as bigger object which have grouped the entire smaller objects inside it. Also note that each part of a car doesn’t necessarily “know” about inner workings of another part, but they all work together. Developers call this feature “encapsulation”.

Objects can produce “events” like “brakes active”,” door open”, “airbag active” . In addition, you can control objects by predefined “statements” (i.e. commands) which developers call “methods”, like ” start”,” stop”, “accelerate” or “turn left”. Please see the basic possible structure of a typical object:

Object:

Car:

As you can see now, starting a car, in this case our red Ford, can be easy as this:

car.start();

In this example, “car” is the object, “start()” is the method, the dot(.) indicates that we are activating the start() method of the car and finally, semicolon (;) indicates the end of our statement.

Now let’s see how we can change the car’s color:

car.color=”red”;

As you can see, we changed the property color of the car object to red.

We can also define our car a little more:

car.brand=”Ford”;

car.maximumSpeed=150;

car.hasAirBags=true;

car.currentSpeed=0;

Event listeners and Event Handlers

Now let’s see how we can check if our car is running. First, we have to attach a “Listener”, something which actually “listens” to the event like a sensor, to the car:

car.addEventListener(EngineEvent:running, announce);

Developers call this statement an” event listener”. The statement attaches a “listener” using the addEventListener “method” or statement. This method listens to see if the “running” event is triggered. The “running” event is inside the subcategory of “EngineEvent”. When the event actually happens, the “announce” function will be activated.

The function is a block of code which actually does the thing we want to do when the event happens. We call this block of code an “event handler”.

function announce (eventObject:EngineEvent):void{

Trace (“car is running”);

}

The function name is “announce” and the event type that it will accept for processing is “EngineEvent”, because back in the previous line of code we stated that we want to listen to that specific type of event. Please ignore the “:void”, because it’s not directly related to our discussion. Inside the curly braces { } , which define the beginning and end of the function, is the statement that we want to activate when the car actually starts running:

trace (“car is running”);

The trace statement is a simple but very useful ActionScript® statement that simply prints what we enclose inside the parentheses, which in our case is a string (A set of characters or numbers) announcing that the car is running.

Now that we know the trace statement, guess, what this statement will do?

Trace (car.maximumSpeed);

The result is the number 150, which we assigned earlier in our code.

As the last sample of code to show you how easy OOP is to understand and use, guess what this block of code will do?

i

f (car.currentSpeed>car.maximumSpeed) {

trace(“Warning, You are exceeding car’s maximum speed!”);

}

Conclusion

Now, imagine every element of a Flash animation or application you see is an object or a set of objects that are grouped together; a player in a game, a user in an application or a movie that is played inside a flash animation are all examples of objects. These objects can have their own properties, events and methods just like the car we used as our example.

Like a child that learns how to interact with the real world objects one by one, learning flash objects are a step-by-step process. However, before that, you should learn the syntax of the ActionScript® language, issues like when and why to use dots, curly braces and correct character cases and also study more about the fundamentals of OOP.

I hope this short article has encouraged you to enter the interesting world of working with multimedia projects, using OO ActionScript®.