Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Extending Flash MX 2004, Part 1: Understanding the JSFL DOM : Page 2

The key to learning to write your own Flash extensions is to understand the Flash DOM and thus the first article in this series will explain the DOM in detail.

Object Relationships
These objects have a parent/child relationship. So for example, each layer object contains references to its child frames, which are grouped together in an array. It is therefore said that a frame object is a child of a layer object. The parent of a layer object is the timeline object, which represents the timeline in which that particular layer resides. These relationships are similar in practice to a nested movieclip hierarchy in a Flash movie.

When a JSFL script is executed, an object is created for each separate element in every Flash document that is presently open in the Flash IDE. Thus your scripts can refer to any element of any of the open Flash documents using dot syntax to traverse that particular document's DOM.

The parent/child relationship between the different elements of a Flash document and the hierarchical tree structure is shown in Figure 2.
Figure 2. Object Relationship Diagram: The Flash Document Object Model.The parent/child relationship between the different parts of a Flash Document.
Think of each section on the diagram as a separate class or type of object. Child objects that are the same color as their parent are simply sub classes of the parent, or an extension the parent object type. So for example, in the diagram above, Shape is a subclass or extension of the Element object, similarly FontItem is a subclass or extension of the Item Object.

You will also notice, that there are some labels pointing to the intersections between various objects. If an intersection represents a subclass or object relationship (the color of the parent and children are the same), then the label will contain the property you need to access to determine the type of object you are working with.

If however, the parent child relationship represents an object type, which can be accessed as a child of the parent, then the label will tell you the property that you need to access to reference each child element. So for example, the relationship between the Library object and the Item object is not a subclass relationship as the colors of parent and child are different. Thus the label tells us, that we can access the child Items of the Library object, using the library.items property, which is an array containing a collection of Item objects.

Here is a simple example: let's say I have a Flash document that contains one Movieclip on the stage, which is on the first frame of the first layer of the first scene. To access that Movieclip's object, I would have to traverse the DOM using dot syntax as follows:


In this particular example, I know that the one and only element on the stage is a Movieclip, but there will be times when there will be numerous elements on the stage. As Figure 2 illustrates, an element can either be of type Shape, Text, or Symbol, and the properties available to those objects differ. Thus I need to determine what type of element I am working with, and to do that I use the 'elementType' property:

theElement=flash.documents[0].timelines[0].layers[0].frames[0].elements[0] elementType=theElement.elementType

The elementType property can have three possible values, "shape", "text" or "symbol." If the element is a movieclip, graphic, or button, I know I am working with a Symbol object and the value of the elementType property will be "symbol." Which means that our element object will contain all the properties that that Symbol object contains.

Top of the Tree
A parent/child relationship has to stop somewhere, therefore there is always one root object—the "top of the tree" or the "daddy of daddies" so to speak. In the Flash DOM, the root object is the object that represents the Flash Application.

Author Note: The Flash Application has its own object, and each Flash document is a child of that object.

This object is always accessible in JSFL scripts and it goes by the name 'flash'. It can also be accessed using the shorter name 'fl.'

The root object contains the child objects that represent each Flash document presently open in the Flash IDE. Each of those document objects are grouped together in a property called 'documents' that is an array: flash.documents So to access the object of the first document open in the Flash IDE with a JSFL script, I would use: firstDocumentObject=flash.documents[0]; The 'flash' object also has various methods, which allow you to manipulate the actual Flash Application and mimic the actual functionality the Flash Application provides. For example, in the Flash IDE it is possible to close the Flash Application by simply opening the File menu and then selecting the Quit option. We can do the same thing with JSFL in our scripts, by calling: flash.quit(); In the Flash IDE, it is also possible to close the currently focused document simply by opening the File menu and selecting the Close option. We can again, do the same thing with JSFL in our scripts, by calling: flash.closeDocument(theDocumentObject); For a full list of all the various objects and their associated, methods and properties checkout Macromedia's official JSAPI documentation.

Guy Watson (or FlashGuru as he is also known) has been an active, well recognized figure in the Flash community for four years, supporting the community with tutorials, source files, forum moderation, and running his own Flash resource Web site, FlashGuru's MX 101. Guy was one of two developers who created the ever popular, award winning zoom interface for Relevare and now works for the leading entertainment company Endemol UK, the creative force behind reality television, producing programs such as Big Brother and The Salon. Guy now spends most of his time developing Flash games and applications for high profile clients such as Channel 5 Television, Ladbrookes, and UK Style.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date