Page 2 of 3 The example application we are going to build is a simple interface that transfers list items from one list to the other. This is a pretty simple concept, but we are going to add a twist. One of our lists will be in Flash and the other will be in HTML/JavaScript.
We'll start by creating the Flash part of this interface.
Figure 2 The property inspector for our List
component
The first thing we must do is create an instance of the JavaScriptProxy class. This class handles sending and receiving data between Flash and JavaScript. When creating this instance we pass in two parameters to the constructor. The first is a unique identifier that will be passed into the SWF from the host page via FlashVars. This identifier will be used behind the scenes to enable proper communication with the LocalConnecton object. The second parameter is a reference to the object that will be receiving the method calls from JavaScript. In our case, the receiving functions are on the main timeline, so we will just pass in the this scope. The following code shows how this should look:
import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
Listing 1 Creating an instance of the JavaScriptProxy class
Next, we will create a function that adds items to our list. This function will be called from the JavaScript code through the JavaScriptProxy class. This function takes an object as its only argument. The object will have the display and value properties necessary to create a new list item. The following example shows how we will add items to our List component:
function addItem(item:Object):Void {
list.addItem(item);
}
Listing 2 This function adds items to the List component
The last piece of ActionScript code we need to create is the code that transfers an item from our Flash List component to JavaScript. The function first checks to make sure an item is selected in the list. If there is a selected item, then we call the JavaScript addItem function using the JavaScriptProxy.call method. We will pass the List component's selectedItem property as this function's only parameter. Finally, we must register our transferItemToJavaScript function as a listener to our transfer button. This allows our function to be called when the transfer button is clicked. The following example shows this final piece of code:
function transferItemToJavaScript():Void {
if(list.selectedItem != null) {
proxy.call("addItem", list.selectedItem);
list.removeItemAt(list.selectedIndex);
}
}
transferButton.addEventListener("click", mx.utils.Delegate.create(this, this.transferItemToJavaScript));
Listing 3 Calling the JavaScript addItem function from Flash
The transferItemToJavaScript function also removes the selected item from the List component using the List.removeItemAt method.
Page 2 of 3 Previous
1
2
3
Next
Keywords
Flash, JavaScript, Integration Kit, FSCommand, ActionScript, Communication, LocalConnection, chambers, cantrell
