Warning: this post is for client-side engi­neering geeks. This is not for designers. Run away now.

Using Flash, I have devel­oped a widget that can easily be applied to a web­site. The widget loads data from an XML file and cre­ates an inter­ac­tive inter­face for viewing the data. For my latest client, I decided to modify the widget to read data from the HTML page con­taining the widget, rather than from an sec­ondary file. I want the HTML page to dis­play the data for vis­i­tors who do not have the Flash browser plug-in and serve as the source of data when the widget is dis­played for vis­i­tors who do have the Flash plug-in.

To make this happen, I tried to send the HTML-structured data to Flash using SWFOb­ject and flash­vars. jQuery code iden­ti­fied the HTML ele­ment con­taining the data, assigned it to a vari­able, and passed that vari­able to Flash when the widget was loaded into the page. Within Flash, the func­tion nor­mally used to process XML was mod­i­fied to parse the data in its HTML format. This was a failure. I was unable to get Flash to rec­og­nize the con­tents of the vari­able as and XML object.

For my second attempt, I tried some­thing more sophis­ti­cated. I used jQuery to parse the HTML struc­tured data and con­vert it into an array of objects. Each object rep­re­sented a data point. I thought this would be easier. Instead of parsing the data using Action­Script, I could send Flash “pre-packaged” infor­ma­tion. Unfor­tu­nately, I failed to realize the limits of the SWFOb­ject and flash­vars. Flash­vars is an object but the object nodes must be strings. When I tried to pass my array to Flash using flash­vars, the array was con­verted into one very long string.

Banging my head against the prover­bial wall did finally yield a solu­tion with many poten­tial uses. Instead of trying to pass data to the SWF all at once, I used jQuery to process the data and pass each data point to the SWF as a func­tion call. This is pos­sible using Flash’s Exter­nal­In­ter­face object.

Exter­nal­In­ter­face allows Flash to interact with JavaScript in the con­taining page. In addi­tion, you can access  Action­Script func­tions in the SWF by cre­ating a ref­er­ence to the <object> in the HTML that con­tains the SWF. Using jQuery, doing so is simple.

var pointer-to-swf = $("body").find("object").get(0);
(assuming the only <object> tag in the page is for the swf)

Once the pointer is cre­ated, you can access Action­Script func­tions like so:

pointer-to-swf.ASFunction(params);

To solve my par­tic­ular problem, I used jQuery to gather data from the HTML in the page. The data was then passed to Flash as a func­tion call. The Action­Script func­tion accepted the data and added it to the display.

Exter­nal­In­ter­face is not a new thing. Com­mu­ni­cating between Action­Script and JavaScript has been pos­sible for a while now. How­ever, jQuery has only recently made it pos­sible to easily manip­u­late HTML and per­form AJAX methods. Com­bining jQuery with the ability to com­mu­ni­cate with and con­trol Flash opens up some big doors.

The biggest dis­covery, for me, is an alter­na­tive to flash­vars or data loading methods within Action­Script. I can, instead, pass infor­ma­tion to Flash as needed using jQuery.