About an Event

This article is meant for those who attend the class IKT2 at Vågsbygd VGS, yet it is still written in english in case anyone else wants to read this post. I do not claim to be an expert on the subject, yet I’ll try here to describe the basics of events in AS3. Also I will touch the subject of Object Orientet Programming (known as OOP).

Eventbased programming

When you’re programming in AS3 against Flash or Flex you want to use an event oriented approach. If I recall correctly the other way of doing things is called flow-based, and you do not want to use that approach in flash. If you are, than I am almost certain you are doing something wrong. Event-based programming means you’re not actually doing anything until an event happens. This might be that a user clicks a button, or a file is finished loading. Events all have certain similarities, their all Event. To truly understand what this means you need to have a basic understanding of the Object Oriented Programming. I’ll explain a bit about that later, but for now, just know that all events are (in flash) Event. The great thing about all events being Event is that once you learn to use one of them, you should in theory understand them all. One similarity all event-funtions have (at least all of witch I’ve seen) is that they all except one parameter of the type Event, and they all return void (nothing). The basic syntax of a event-function is as following:

ActionScript 3 code (example 1) 
1
2
3
4
 
function eventFunc(param1:Event):void
{
    //Do something
}

This is a normal event and could be used for every event-type there is. Many of you would probably call the local variable evt instead of param1, I only called it that because I would like to show you that the naming of the local variables does not affect the code. I could have called param1 anything that is a valid variable name. If i wanted to I could call it eventParam1, or e, or nearly anything else. I will explain this furter in the article “Functions, Parameters and Return types“. Just know for now that you can name it whatever you like.

Another thing probably none of you have seen before is the :void at the end of the declaration of the function. This tells what the function should return. Now this too I will talk about in “Functions, Parameters and Return types”, but know for now that nearly every event (I haven’t seen any exceptions on that yet) returns void (witch means nothing).

Object Orientet Programming (OOP)

AS3 is an Object Orientet Programming language. The OOP aproch tries to use a object oriented model that looks like the one that exists in the real world. The point is that objects inherit from eachother. Like in the real world. A cat is an animal, and contains every feature and actions that an animal contain, and animal is a living creature and so on. This has several benefits. For instance, if I asked you to come to my party and bring a cat, any cat would do. I wouldn’t care if the cat was black or white, small or big. The same way if I asked you to bring an animal, you could bring any animal you could think of. OOP acts the same way. If it expects an animal, and you bring it a cat (witch obviously is a animal), AS3 wouldn’t even think twice before proceeding with what it should do. However, if AS3 is expecting a cat, and you give it an animal you would get an error.

There is another great benefit of using a OOP-language. Because the language is OOP and objects inherit from each other, there is also a building-block witch is at the bottom. A object-type that every other object-type inherits from. And this is the Object. Every object-type in AS3 inherits from Object. That means that that every variable we use in AS3 is an Object. That means that the following code is valid:

ActionScript 3 code (example 2) 
1
2
3
 
var var1:Object = "123";
var var2:Object = 123;
var var3:Object = new MovieClip();

You wouldn’t expect that, now would you? Object itself also have som methods. The most usefull of them is the method toString(). This means that all objects can be represented as a string. This is actually what happens when you run a trace statement on an object. Trace calls toString() on the object and then displays the result in the output-window. The next code is also valid (given that you’ve alreaddy ran the the previous code):

ActionScript 3 code (example 3) 
1
2
3
 
trace(var1.toString()); //123
trace(var2.toString()); //123
trace(var3.toString()); //[object MovieClip]

The comment shows what each line will output. Object also contains some other methods, but I wont get into those now. I rarely use them anyway.

Event

As I said in the start, every event is an Event. That meas that every possible event (MouseEvent, KeyboardEvent, ProgressEvent++) inherits from Event. That means that the function I wrote at the top of this page (example 1), can be used for any event there is. The Event object has some methods and properties that truly are usefull. I won’t discuss all of them, but I’ll try to show you the ones I find most usefull.

Properties

target
“The event target. This property contains the target node. For example, if a user clicks an OK button, the target node is the display list node containing that button.” (Source Adobe Live Docs). This basically means that target contains the target of the event. If the event is that a user clicked a button, the target property of the event would contain that very button.

Methods

preventDefault()
“Cancels an event’s default behavior if that behavior can be canceled.” (Source Adobe Live Docs). The preventDefault is used for instance if you have a link, that when you click it opens a web page, than one time you discover that if var a < 5 you don’t want to open that web page. If that is the case, simply check if a < 5, than call preventDefault();
stopPropagation()
“Prevents processing of any event listeners in nodes subsequent to the current node in the event flow. This method does not affect any event listeners in the current node (currentTarget). In contrast, the stopImmediatePropagation() method prevents processing of event listeners in both the current node and subsequent nodes. Additional calls to this method have no effect. This method can be called in any phase of the event flow.” (Source Adobe Live Docs). The stopPropagation method is used to make sure that the event is not called again. For instance, if you put a button inside a movieclip that lies on the stage and you click the button, click is first called on the button, than on the movieclip, than on the stage. However, if you call stopPropagation on the movieclip, click is never called on the stage.

Event-functions

The functions that is used at events are in many ways similar. I showed you one at the top of this article that could be used to any event at all, yet I would like to show another example. The next example is a flash-movie with two movieclips (mc1 and mc2). When I click any of the movieclips I want the clicked one to schrink by 10px width and 5px height. The code for this could look like this:

ActionScript 3 code (example 4) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
mc1.addEventListener(MouseEvent.CLICK, mc_Click);
mc2.addEventListener(MouseEvent.CLICK, mc_Click);
function mc_Click(evt:Event):void
{
    try
    {
        var mc:MovieClip = MovieClip(evt.target);
        mc.width -= 10;
        mc.height -= 5;
    }
    catch(e:Error)
    {
        trace("An error occurred!");
    }
}

This example is pretty simple. What most of you probably havn’t seen is the try{} catch(e:Error){} block. Try works as follow:

  • The program tries to execute the code in the try-block. If anything fails it jumps to the catch-block right away.
  • The catch-block is never executed if no error occurred in the try-block.

~ by Alxandr on 29. January, 2009.

Posted in Tutorials
Tags: ,

Leave a Reply