Director MX - Flash Integration - Using Flash Objects to Access Flash Components
 

 

Flash Objects From Scripting
Flash Objects From Scripting is a new feature in Director MX that allows the Director developer to store references to various Flash objects within Lingo itself and then access the properties and methods of that object directly within Director or Shockwave. This allows the Lingo developer the ability to tie in to or enhance the functionality of their Director authored pieces using available Flash elements. One thing that many developers may want to utilize are Flash's component movies. In this demo we demonstrate how you can store a reference to a component within a SWF sprite and then to make use of a few of that component's available methods.

For the sake of this demonstration the SWF file found within the Director movie is the bar chart component and the demo movie uses Lingo to change either of the axis names (horizontal or vertical) as well as to delete one of the columns of data from the display.

Demo files created by Dan Sadowski.

 

 

Step 1: Know something about your imported SWF file
Step 2: Store a reference to the component object
Step 3: Access the methods and properties of that object.
Step 4: Going a little deeper...

Demo in Action
Downloadable Files

 


Step 1: Know something about your imported SWF file

In order to store a reference to a component object you will need to know the instance name of the component you are interested in. In the demo files provided the bar chart component has been added to the Flash file and an instance name of gBarChart was used.


Step 2: Store a reference to the component object

With the release of Director MX the Flash sprite getVariable method has been modified so that now instead of only returning a string representation of a variable's value it will now actually return a value reference. This allows you to store references to Flash objects in Lingo. Here is the code required to do this:

-- store a reference to the named bar chart component
chart = sprite(1).getvariable("gBarChart", false)

As you can see we access the component via the instance name used (note that the component is not nested within another movie clip - it exists at the root level of the Flash file), but we did so by using an extra argument in the getVariable method. In previous releases you merely provided the name of the variable, now if you additionally provide a boolean parameter you can control the type of result returned. Providing no boolean or a value of true results in the same behavior as previous releases, a string representation of the value is returned. If you provide a false value then the command returns an actual value/object reference, in this case a reference to the component instance being used. Once you've stored a reference to that object you are free to access its properties and methods.


Step 3: Access the methods and properties of that object

We can now begin access the methods and properties of the object using the stored reference. In the case of this demo movie there are three separate methods that are invoked: setXAxisTitle, setYAxisTitle and removeItemAt. The first two allow you to rename either the horizontal or the vertical labeling of the chart while the last allows you to remove a specified column of data. Here is the Lingo used to access those three methods:


-- store a reference to the named bar chart component
chart = sprite(1).getvariable("gBarChart", false)

-- use the chart component's removeItemAt method to
-- remove the item at the specified index position
chart.removeItemAt(tIndex) -- use the chart component's setXAxisTitle method to change
-- the name of the horizontal axis
chart.setXAxisTitle(tName) -- use the chart component's setYAxisTitle method to change
-- the name of the vertical axis
chart.setYAxisTitle(tName)

In all cases a _string_ value is provided for all arguments. Therefore in the case of using removeItemAt where the Flash method expects an integer value, the value tIndex provided is really a string representation, "3" for example. That's all there is to this movie. Have a look at the movie and its code, each of the three buttons on stage has a behavior containing the appropriate code from above.


Step 4: Going a little deeper...
So far we've glossed over a few important issues in order to make the general point clear: once you've stored a reference to a particular ActionScript object you can access its properties and methods off that stored reference directly in Lingo. The difficulty here is with exactly how you know what properties and methods are in fact available off a particular object. In order to gain this information you must consult with the Flash documentation, or with the documentation for the particular component you are using. In the case of this demonstration we're using the Bar Chart component and therefore the documentation for that component was used to determine what methods were to be used in order to change the X or Y-axis titles, or to remove a particular column of data. But once you've gone as far as this you should realize that a wide range of possibilities opens up. In order to demonstrate more advanced access to the Bar Chart component this demo also uses techniques to push an entirely new data set on the chart as well as giving the chart itself a new title. These efforts require some of the same techniques as above but with additional twists found in the component's documentation.

The first item of interest was to see about pushing an entirely new data set on to the chart, this is done by creating a dataproviderClass object of the Chart Component object:

-- dataProviderClass is part of the chart component
dpc = sprite(1).newobject("dataProviderClass")

The data provider class object is where you will now store data for the bar chart to display, this is done by populating the object with sub-objects, each containing various name/value pairs:

-- now we populate our dataprovider with some objects
-- these objects are used like lingo property lists
-- i decided to have two properties: rgb and value

-- create the first data object and add it to the dpc
x = sprite(1).newObject("object")
x.rgb = "red"
x.value = 55
dpc.additem(x)

-- create the second data object and add it to the dpc
x = sprite(1).newObject("object")
x.rgb = "green"
x.value = 33
dpc.additem(x)

-- create the third data object and add it to the dpc
x = sprite(1).newObject("object")
x.rgb = "blue"
x.value = 77
dpc.additem(x)

 

 


Demo in Action
Below you will a link for the demo file created.

barChart_demo


Downloadable Files
Here are links for the source files used to produce this demo. There are two separate files, the first is the Flash source file (*.fla) that contains the bar chart Flash component while the Director movie serves as a host for the SWF file, accessing the methods of the component object:

BarChartComponent.dir
Component_bar_chart.fla

 

page last updated 11-Dec-2002 | tom higgins - thiggins@macromedia.com