Changes to the Macromedia Flash Asset Xtra in Director MX 2004

Macromedia Flash MX 2004 Playback Support

Providing support for the currently shipping version Macromedia Flash has been an important consideration in recent Director releases. Director MX 2004 maintains this tradition through its support for Macromedia Flash MX 2004 assets. Director developers to take advantage of the unique capabilities offered by the most recent release of Macromedia Flash:

• Playback performance improvements
• ActionScript 2.0
• PrintJob API
• Expanded web services support
• Improved Flash video performance
• CSS style sheets support in Flash text fields
• Inline display of images with text

These are just a few of the features that Macromedia Flash MX 2004 offers to Director users; it is not intended to be a comprehensive feature list. Please see the Macromedia Flash MX 2004 product page for more detailed information.

In addition to being able to play Macromedia Flash 2004 content, Macromedia Flash Player 7 included many performance improvements. The Director Flash Asset Xtra is a wrapper for the Flash player engine, and therefore Flash assets running in Director also benefit from many of the performance improvements associated with the Flash Player 7.

Direct Support for a Subset of Macromedia Flash V2 Components

One of the unique new features of Director MX 2004 is the ability to use a some of the v2 components that shipped with Macromedia Flash MX 2004 within Director without including them in a separate Flash asset. Director MX 2004 does not support the entire range of v2 components, however, it currently supports the following Flash v2 components:

• Button
• CheckBox
• DateChooser
• Label
• List
• NumericStepper
• RadioButton
• ScrollPane
• TextArea
• TextInput
• Tree

In addition to these standard Macromedia Flash components, Director includes a DVDController component that ties into the new Director MX 2004 DVD support and implements the Halo skin, making it consistent with other v2 components. You can add v2 components to a Director project through either the Tool palette or the Library palette.

The Director MX 2004 Tool palette has undergone a major makeover and now includes three views. The three Tool palette views are: Macromedia Flash component, default, and classic. The Flash component view provides easy select and draw access to several of the commonly used Flash components. The default view contains the standard drawing tools from previous versions of Director but provides the Flash MX 2004 versions of the CheckBox, Button, RadioButton and TextInput components. The classic view offers the standard Tool palette and UI components Director users are familiar with. Figure 1 shows the two views that contain Flash components.

Figure 1. The Tool palette showing the default and Macromedia Flash component views

You can access the full range of supported Macromedia Flash components through the Library palette under the Components heading. By default, the Library palette is grouped with the Code panel below the Property inspector. Dragging an item from the Library palette and dropping it onto either the Stage or into a cast library adds that component to the Director movie. Once you've added a component to a Director movie, either through the Library palette or the Tool palette, you can adjust the component settings through the Property inspector. Unlike in Flash MX 2004, properties set through the Property Inspector are applied to the cast member and therefore changes are propogated to all instances. Each instance (sprite) can have its cast member properties overridden by changing the sprite's properties through code.

The settings that appear in the component tab of the Property inspector are the same component properties provided by the Macromedia Flash 2004 Component Inspector panel in the Flash 2004 authoring environment. Metadata in the component file (SWC) provides these settings. In addition to the standard properties exposed by the metadata, the Property inspector also displays common Flash cast member properties. In this release of Director, Flash components cannot utilize the new commonPlayer property associated with Flash assets.

Figure 2. Screen shots of Library palette and Property inspectors showing Flash components

If you are familiar with working with version 2 components in Macromedia Flash MX 2004, then you will already have a head start in working with components in Director MX 2004. In Macromedia Flash, when you work with a component, you work with the instance of the component and manipulate its properties and methods. You begin by dragging the component from the Component panel in Flash, drop it on the Stage, and give the instance a name. You might set some static properties using the Component Inspector panel. Then you target the instance by name in your code, calling methods, setting data providers, properties, and so on.

The Director workflow for Macromedia Flash components is similar to the Flash Macromedia 2004 workflow. In Director, you add a component to the Stage either by dragging it from the Library palette or from the appropriate Tool palette. However, in Director, you don't give the instance a name. You have the option of naming the cast member and/or the sprite, but it is not a strict requirement. In most cases, you either attach a behavior to the sprite that will act as the controller, or you use a separate object instance that directly targets the sprite object that contains the component. To set the static properties of the component, you can select either the sprite or the cast member. Then use the Property inspector to set the property values.

To manipulate the component at runtime, simply target the sprite much like you would the instance in Macromedia Flash. Call methods and set properties on the sprite as if it were a component instance in Flash. The following example assumes that you have added a Tree component to sprite channel 1 in the Director Score. For this example, I'll assume that you are targeting the component from a location other then a behavior attached to the sprite.

ActionScript:

var myTree = _level0.Tree_mc;
var rootNode = myTree.addTreeNode("Hello World");
rootNode.addTreeNodeAt(0, "Its a beautiful day!");

Lingo:

	
myTree = sprite(1)
rootNode = myTree.addTreeNode("Hello World")
rootNode.addTreeNodeAt(0, "Its a beautiful day!")

JavaScript Syntax:

	
var myTree = sprite(1);
var rootNode = myTree.addTreeNode("Hello World");
rootNode.addTreeNodeAt(0, "Its a beautiful day!");

In the example above, I have included an example from Macromedia Flash MX 2004 to show the similarities of using a component in Director and using the same component in Flash.

Director automatically routes most component events to the behavior attached to the component, if a behavior exists. The Property Inspector tab for Flash components lists the available component events that are forwarded to Director. You can adjust which messages you wish to listen for in Director by selecting or deselecting the checkbox next to the appropriate event in the Property Inspector. The automatic event listener architecture built into Director differs slightly from the standard event listener architecture for the same components in Flash in that it does not include the event object. In most cases, this will not be a major restriction because you are dealing with a single component and most components expose the item that was selected or clicked through the Flash component architecture. There may be some cases where you will need to recieve the event object in order to perform a specific action such as dynamically populating the tree component as you expand the branches.

The example below shows a basic outline for both Lingo and JavaScript Syntax behaviors that utilize the Director event listening architecture for the Tree component in Director MX 2004. Figure 3 depicts the Property Inspector panel showing the Tree component events currently being routed to the behavior. You can easily recreate this example on your own by adding a Tree component to the stage and create a new behavior of the appropriate script type and add the appropriate code block below. The example adds a root node with two child nodes as folders. Notice the output in the message window as you work with the Tree component at runtime.

Figure 3. Screen shots of Property Inspector hiliting the Component events.

Lingo:

property spriteNum
property _rSprite
property _bInitialized

on beginSprite(me)
 	_rSprite = sprite(spriteNum)
 	_bInitialized = false
end beginSprite

on enterFrame(me)
 	if not(_bInitialized) then
 		_bInitialized = true
 		foRootNode = _rSprite.addTreeNodeAt(0, "Root Node", "the root node")
 		foBranch = foRootNode.addTreeNodeAt(0, "First Branch", "the first branch")
 		_rSprite.setIsBranch(foBranch, true)
 		foBranch = foRootNode.addTreeNodeAt(1, "Second Branch", "the second branch")
 		_rSprite.setIsBranch(foBranch, true) 
 	end if
end enterFrame

on nodeOpen(me)
 	put "nodeOpen"
end nodeOpen

on nodeClose(me)
 	put "nodeClose"
end nodeClose

on change(me)
 	put "change"
end change

on itemRollOver(me)
 	put "itemRollOver"
end itemRollOver

on itemRollOut(me)
 	put "itemRollOut"
end itemRollOut

JavaScript Syntax:

function beginSprite(me){
  this._rSprite = sprite(this.spriteNum);
  this._bInitialized = false;
}

function enterFrame(me){
 	if (!this._bInitialized){
 		this._bInitialized = true;
 		var foRootNode = this._rSprite.addTreeNodeAt(0, "Root Node", "the root node");
 		var foBranch = foRootNode.addTreeNodeAt(0, "First Branch", "the first branch");
 		this._rSprite.setIsBranch(foBranch, true);
 		foBranch = foRootNode.addTreeNodeAt(1, "Second Branch", "the second branch");
 		this._rSprite.setIsBranch(foBranch, true);
 	}
}

function nodeOpen(me){
 	trace("nodeOpen");
}

function nodeClose(me){
 	trace("nodeClose");
}

function change(me){
 	trace("change");
}

function itemRollOver(me){
 	trace("itemRollOver");
}

function itemRollOut(me){
 	trace("itemRollOut");
}

While the above example shows the automatic event forwarding from the Flash component into Director, it is possible to recreate the Flash event listener model in Director in order to recieve both the event call and its associated event Object. The following example demonstrates how to write a behavior that will register to recieve the event objects for the Tree component. It includes a small snippet of code that shows how one might approach building the tree as the end user opens a branch node. Please note that the example provided is written in Lingo, at the time of writing a bug prevents the creation of new objects on a Flash component in JavaScript Syntax. This bug may or may not exist in the final release product. Before using this example, be sure to disable all the events for the Tree component in the Property Inspector (see Figure 3).

Lingo:

property spriteNum
property _rSprite
property _bInitialized
property _foEventListener

on beginSprite(me)
 	_rSprite = sprite(spriteNum)
 	_bInitialized = false
 	_foEventListener = 0
end beginSprite

on enterFrame(me)
 	if not(_bInitialized) then
 		_bInitialized = true
 		_foEventListener = _rSprite.newObject("Object")
 		_rSprite.setCallBack(_foEventListener, "nodeOpen", #nodeOpen, me)
 		_rSprite.setCallBack(_foEventListener, "nodeClose", #nodeClose, me)
 		_rSprite.setCallBack(_foEventListener, "change", #change, me)
 		_rSprite.setCallBack(_foEventListener, "itemRollOver", #itemRollOver, 	me)
 		_rSprite.setCallBack(_foEventListener, "itemRollOut", #itemRollOut, 	me)
 		_rSprite.addEventListener("nodeOpen", _foEventListener)
 		_rSprite.addEventListener("nodeClose", _foEventListener)
 		_rSprite.addEventListener("change", _foEventListener) 
 		_rSprite.addEventListener("itemRollOver", _foEventListener) 
 		_rSprite.addEventListener("itemRollOut", _foEventListener) 
 		foRootNode = _rSprite.addTreeNodeAt(0, "Root Node", "the root 	node")
 		foBranch = foRootNode.addTreeNodeAt(0, "First Branch", "the first 	branch")
 		_rSprite.setIsBranch(foBranch, true)
 		foBranch = foRootNode.addTreeNodeAt(1, "Second Branch", "the 	second branch")
 		_rSprite.setIsBranch(foBranch, true)
 	end if
end enterFrame

on nodeOpen(me, foListenerObject, foEventObj)
 	put foEventObj.node.attributes.data && "opening"
 	if (foEventObj.node.childNodes.length = 0) then
 		foEventObj.node.addTreeNodeAt(0, "First Leaf", foEventObj.node.attributes.data & "'s first leaf")
 		foEventObj.node.addTreeNodeAt(1, "Second Leaf", foEventObj.node.attributes.data & "'s second leaf")
 		foEventObj.node.addTreeNodeAt(2, "Third Leaf", foEventObj.node.attributes.data & "'s third leaf")
 	end if
end nodeOpen

on nodeClose(me, foListenerObject, foEventObj)
 	put foEventObj.node.attributes.data && "closing"
end nodeClose

on change(me, foListenerObject, foEventObj)
 	put _rSprite.selectedNode.attributes.data && "selected"
end change

on itemRollOver(me, foListenerObject, foEventObj)
 	put foEventObj.dbgPropList() && "itemRollOver"
end itemRollOver

on itemRollOut(me, foListenerObject, foEventObj)
 	put foEventObj.dbgPropList() && "itemRollOut"
end itemRollOut

on endSprite(me)
 	_foEventListener = 0
end endSprite

In the above example, I created a FlashObject using the Lingo spriteReference.newObject() method to act as a "proxy" event listener for the Tree component. It is very important that the FlashObject be created using the sprite reference of the sprite containing the Tree component. Failure to create the listener object using the sprite reference method ie.. using the global newObject method, will result in a void or undefined variable being passed into the Tree component when calling the Tree.addEventListener() method. FlashObjects can not be passed between seperate Flash asset instances including the global Flash Asset instance created when newObject is called without a sprite reference.

The event listener object _foEventListener is just a generic Flash object that contains no properties or methods. I added the event listener methods to it using the setCallBack() method that simply redirects a call to a Flash function to a Lingo method. When the Tree component sends out an event to the event listener object, it is automatically redirected to the Lingo behavior. Both the proxy event listener object reference and the Tree event object are passed to the appropriate behavior event handler method. In this case we simply ignore the proxy object and concentrate on the event object. If you recreate the above example, you will notice that the openNode handler in the Lingo behavior adds 3 leafs to the First Branch node the first time it opens. This could only be done by using the event object method in order to get access to the branch node that was opened.

I hope the above examples provide a basis upon which you can use as a stepping stone to understanding Flash components in Director MX 2004. This is by no means intended to be a comprehensive reference on using Macromedia Flash components in Director MX 2004. Please consult the Director documentation on Flash components as well as the Macromedia Flash MX 2004 documentation for detailed help on setting up and using components.

Page 3 of 8

Previous Page

Next Page