Home » ActionScript 2.0, ActionScript 3.0, Flash CS4, Flex

Introduction to AS3 – Part2

30 October 2008 One Comment
Share on Facebook

In this section we are going to cover

  • DOM3 event model
  • Display list API

I recommend going through the introduction to AS3 part 1 before reading part2.

DOM3 event model:

Document Object Model Level 3 event model (DOM3) provides a standard way of generating and handling event messages so that objects within applications can interact and communicate, maintaining their state and responding to change. Patterned after the World Wide Web Consortium DOM Level 3 Events Specification, this model provides a clearer and more efficient mechanism than the event systems available in previous versions of ActionScript.
The above text is from Flash Help. Explains clear about DOM.

SYNTAX FOR EVENT IN AS3:

function eventResponse(eventObject:EventType):void
{
// Actions performed in response to the event go here.
}
eventTarget.addEventListener(EventType.EVENT_NAME, eventResponse);

Let’s see some practical examples.

IN AS2
// If we write a button event in Frame then it will be like this.
button.onRelease = function()
{
trace(“you Clicked me !!”)
}

IN AS3
There is no on() Event, onClipEvent, OnRelease Events in AS3.

function handleClickEvent( event : MouseEvent )
{
trace( "You Clicked Me !!" );
}
button.addEventListener( MouseEvent.CLICK, handleClickEvent );

EXPLANATION:
Here eventTarget is button, to which we are adding event,
EventType is MouseEvent, if we are doing class type programming dont forget to import the package

import flash.events.MouseEvent;

bcoz the events resides in this package.
eventResponse is the function to be called when the event is triggered

NOTE :
If we want to access the event target.
We can use event.target

Example

function handleClickEvent( event : MouseEvent )
{
trace( event.target );//outputs button name
}

button.addEventListener( MouseEvent.CLICK, handleClickEvent );
In detailed tutorial we will see more about creating custom events.

NOTE:
Some time the MovieClip or button inside the parent MovieClip may receive events to avoid to we can use.
button.mouseChildren = false;

To enable handCursor after adding Events

button.buttonMode = true;

Event Flow in AS3
This is an important concept of how event flows when an event triggered.
Before that we will have little knowledge about Display List in AS3.

DISPLAY LIST:
Each application built with ActionScript 3.0 has a hierarchy of displayed objects known as the display list. The display list contains all the visible elements in the application.
The events for the targets flow through hierarchy for objects in display list and triggered directly to object that’s not in the display list.
The above definition is from flash help.

For example event will be triggered directly to URLLoader objects.

And for objects in display list, the event flows from stage to the target node.
That phase of event travel from stage to target is known as Capture Phase.
When event reaches the target object it’s known as Target Phase.
After reaching the target event returns to the stage called Bubbling Phase.
Stage is the topmost object in the display list.
These three phases applicable to objects in display list.

Still some events like enterframe and init events are exceptional.

The event propagation can be handled by
STOPPING EVENT FLOW:

Event.stopPropogation() method to prevent event flow but only after the other event listeners of the target object to execute.

Event.stopImmediatePropogation() method to prevent event flow but does not allow other listeners of the target object to execute.

Display list API:
Each application built with ActionScript 3.0 has a hierarchy of displayed objects known as the display list. The display list contains all the visible elements in the application.
The events for the targets flow through hierarchy for objects in display list and triggered directly to object that’s not in the display list.
The above definition is from flash help.

The above definition is repeated intentionally.
These makes easy rendering of the objects in screen by flash player,
and easy traversal of objects in display list.
One of the new display object called Sprite.
Its new light weight object, same as movieclip and does not has timeline.
Easy way to add created movieclip or other display objects like sprite is to use method
addChild() or addChildAt()
There is no methods like createEmptyMovieClip() and getNextHighestDepth() in AS3. The depth will be added automatically if we use addChild() method and added to particular depth if we use addChildAt();

CREATING DYNAMIC OBJECTS IN AS3:

var _sprite : Sprite = new Sprite();
with(_sprite)
{
graphics.beginFill( 0xFF0000, 1);
graphics.drawRect( 0, 0, 100, 100);
graphics.endFill();
}
addChild(_sprite);

code Explanation:
As I done the code in frame we don’t want to include the package,
Otherwise we need to import
import flash.display.Sprite;

we are using new keyword to instantiate sprite Object, and we are drawing one rectangle using the drawRect method of graphics object.
And finally adding to the display list. Using addChild Method.
Note after adding the display list the object will be rendered on the screen. And if u want to add the sprite created to another display object.
Instance.addChild( _sprite );

Here note we didn’t specify the depth as we do in AS2. In AS3 will maintain the depth of its own.
Suppose there are four display objects in DisplayList and if you add the child at depth 2,
Instance.addChildAt( _sprite, 2 );

ACCESSING DYNAMICALLY CREATED OBJECT:
The display object at 2 position will be moved to position 3 automatically.
If we want to access the objects added dynamically we need to use getChildAt() or getChildByName() methods to access the objects.

var _sprite : Sprite = new Sprite();
_sprite.name = "sprite"
with(_sprite)
{
graphics.beginFill( 0xFF0000, 1);
graphics.drawRect( 0, 0, 100, 100);
graphics.endFill();
}
addChild(_sprite);

trace(” Accessing Dynamically created Object:::”,getChildByName(“sprite”).name);
// if we know the depth we can also access by

trace(" Accessing Dynamically created Object:::",getChildAt(0).name);

We can get the display object index by

getChildIndex( displayObject );

And removing the displayObject from the Display List using removeChildAt( index ); or removeChild(displayObject );
Here index is the depth of the display object in DisplayList.
There is no SwapDepths() in AS3, instead we can use

swapChildrenAt( index, index );

or
swapChildren( displayObject, displayObject );

NOTE: if you create class type programs that extends MovieClip or Sprite.
You need to add the object of the class to DisplayList.

Next Introduction to AS3 part3

Download Source files

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

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

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.