ActionScript 101: Events and Functions (Part 5)

Follow @tristarweb

In the last ActionScript 3 101 tutorial we looked at the trace function. This traced out a basic mathematical calculation when the script was first run.

Today we will be taking a huge leap regarding the complexity of your programming by introducing functions and event listeners that trigger a function on an event, such as a mouse click.

Lets Get Started

Create a object on the stage and give it an instance name of MyObjectName.

Now lets look at an event listener string, then we will break it down to be more understandable.


myObjectName.addEventListener(MouseEvent.CLICK, MyNewFunction);

The code line above is quite simple, firstly we define the object we are listening for an event on -  “myObjectName”

The next section is to simply add the event listener to that object – “addEventListener”

Then the parameters for the event listener “MouseEvent.CLICK” is telling the event listener what to look for, then after the comma is the function that event will trigger.

Now we have the event listener lets start on the function.


function MyNewFunction (e:MouseEvent):void

{

trace("Hello World");

}

The above is a basic function, lets break it down. The key word “function” defines the function itself telling Flash what to expect. You then follow that by naming the function itself in our case “MyNewFunction”.

Within the brackets you will tell the function what to to expect. We will look at this section more closely when we do advanced functions, but for now just remember the “e” is a new local variable for this function only – the “MouseEvent” is going to be the value assigned to the variable “e”, in this case the event CLICK. Don’t worry, I didn’t understand this bit at this early stage either, in reality I didn’t truly understand it even upon completing my first multi-touch application. Programming in a new language is a tapestry, and you will understand things better as you gain a broader knowledge of the language; it is difficult to explain certain sections until you learn others, so keep with us and for the moment just make sure you include it.

The final section of the line “:void” is again something we will cover in advanced functions, so include it for now. For the eager of you – it defines what the returning value of the function is, for now there is no returning value so it is good practice to include “:void”

finally open and close your function with “{   }”. I like new lines for the open and close of my function, just  as I have above, as it makes it far easier to read where the function starts and stops. When in complex and longer scripts, being able to just follow the lines up can make life so much easier – so I would urge you to follow suit.

So now run your script and click your object – !!Hello world!! (sorry i did say we wouldn’t do “hello world” in this, but it is appropriate!)

I would take a nice rest and and pat yourself on the back as you are now a programmer.

The next ActionScript 3 101 tutorial will be on advanced functions.

About russell

Web Developer I’m a web developer with 3 years’ experience in the media industry.My Development skills includes flash, AS3, AS2, HTML, CSS, JavaScript, Jquery, XML, PHP, and MySQL. I have a great deal of experience developing interactive user interfaces in PHP Javascript AS3 AS2I have two masters degrees in Computer Science and Multi Media and before my current role I completed a year of research at De Montfort University researching multi touch technology. during this time I developed several multi touch applications for entertainment spaces.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter