Easy Flash Remoting Part Four

The Basics - Making Dynamic Links, Flash MX Style

In the previous part to this series we output data onscreen received from Flash Remoting. This was a listing of departments from a fictitious company that could have been used as site navigation.

Previously with Flash we would have used button symbols to provide clickable links within a Flash movie.

Button symbols have their own unique timeline consisting of four frames: up, the default state; over which reacts to the presence of the mouse; down, a pressed cue for the user; and hit which allows for definition of a hot spot for the mouse.

Creating dynamic button symbols can mean extra work for the developer, if we were to create a column of links we could have a standard button design which we programmatically loop over changing with each iteration both the button position and text values in the three visible states.

In part three we looped over our query results, outputting each value on screen in a new TextField.

While it is possible to make each of these values a standard html hyperlink that could trigger ActionScript within the movie (made possible with the ActionScript command "asfunction") the TextField object has no methods available for interactivity.

New to Flash MX is the ability to add standard button events to MovieClip symbols, also new is the createEmptyMovieClip method of the MovieClip object which can be used to create a container that content can be loaded into.

For this part of the series we will loop over the query result creating a MovieClip with each iteration, adding to it a TextField to contain a link value. We'll also use new ActionScript to add interactivity to each MovieClip.

First we'll use the for loop from part three of this series. Within the loop create a new MovieClip using the createEmptyMovieClip method. createEmptyMovieClip has two parameters: instanceName to identify the movie and depth.

In the first half of the for loop sample code below you'll see that the getDepartments_Result function from the other tutorials is still being used to handle the Flash Remoting data that has been received.

With each iteration of the loop createEmptyMovieClip is used to create a container movie. Making use of the current loop value both instanceName and depth are dynamically named. In this example we're also adding one to the depth value to ensure that the links we're creating will sit above any other content in the Flash movie.

Loop code - part one

We next create a variable "x" equal to the name of the container movie so that we can, amongst other things, position it setting it's x and y positions. We then, as we did in part three of this series, add a TextField to the container movie setting the text property to the current Flash Remoting value.

The setTextFormat method is used to modify the appearance of the text, with the selectable property being used to stop the link text from being selected from within the movie.

Next we'll add interactivity to the text links. There are a number of button events that can be called by a MovieClip. We're going use both the onRollOver and onRollOut methods for visual cues to the user, and onRelease to trigger an action.

These events execute a function when invoked; the sample below is the second half of the loop code combined with the button event and the function to executed.

Notice that another method is being used here, onDragOut. It's there to ensure that we can execute the same function as the onRollOut event if a user were to click and drag the mouse from out of one of the links, essential when we