A different type of UI with Flash and Ajax

This example of combining Flash and Ajax (in this case using the Prototype library) exists only to inspire other web developers to start having Flash and JavaScript talk with each other. Ever since Flash 8 the class ExternalInterface makes it easier than ever before to communicate from Flash to JavaScript and back. In this example I will load Flash using Unobtrusive Flash Object (UFO), then have Flash read an XML file, on user interaction send instructions to JavaScript, use Prototype to load the new content, and to top it off use some fine script.aculo.us animations. Sound complicated? If you can master this, you’re ready to build some wild Flash-Ajax sites.

Use the menu to choose another content page.

First off let me clarify that I do not recommend using Flash in this manner on a public website. While these techniques work on most modern browsers, there are too many old browsers out there to solely rely on them. These methods are perfect for restricted business applications, where you know who’s using the system and can determine what browser they need in order to use the site.

Here’s a list of JavaScript packages that I use in this example:

In Flash I use the Menu Component (available only in Flash 8 Pro) to add user interactivity. Drag a Menu Bar Component to the stage and name it menu_mb. In order to control the links that are going to be displayed in the menu bar, I load an external XML file and use it as datasource:

<?xml version="1.0" ?>
<menu>
            <menuitem label="Files">
                        <menuitem label="Upload" pageVar="upload.htm"/>
                        <menuitem label="Download" pageVar="download.htm" />
            </menuitem>
            <menuitem label="Images">
                        <menuitem label="Cars" pageVar="cars.htm"/>
                        <menuitem label="Macs being destroyed" pageVar="macs.htm" />
            </menuitem>
</menu>

This XML file contains the menu structure, as well as the links that the menu items link to. The links are stored in the variable pageVar. In ActionScript I use the following code to load the XML file:

var menu_xml:XML = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(success:Boolean) {
            if (success) {
                        menu_mb.dataProvider = menu_xml.firstChild;
            } else {
                        trace("error loading XML file");
            }
};
menu_xml.load("menubar.xml");

Now in order to create some interactivity, I add event handlers, which use ExternalInterface to call the function update(url) in JavaScript and pass the pageVar from the XML file to the function:

import flash.external.*;
var menu_listener:Object = new Object();
menu_listener.change = function(evt_obj:Object) {
            var menuItem_obj:Object = evt_obj.menuItem;
            ExternalInterface.call("update", menuItem_obj.attributes.pageVar);
};
menu_mb.addEventListener("change", menu_listener);

Now we need to move on to the JavaScript part of the exercise. At this point we created a Flash file that will load and display a menu, which calls a JavaScript function called update(url). In order to add the SWF (in this case menu.swf) to the page, we’ll use UFO:

var FO = { movie:"menu.swf", width:"550", height:"100", majorversion:"8", build:"0", wmode:"transparent" };
UFO.create(FO, "flash_menu");

Be sure to have downloaded all the appropriate JavaScript packages and include them in your HTML file. UFO will try to place the SWF in a DIV with the ID flash_menu. So let’s add that DIV to the page, together with a wrapper DIV and the content body DIV:

<div id="content">
  <div id="flash_menu"></div>
  <div id="flash_body">
    <p>Use the menu to choose another content page.</p>
  </div>
</div>

Now you’ll want to change the style, so that the transparent Flash Menu is layered over content body DIV, by adding the following to the STYLE section:

#content{
            position:relative;
}
#flash_menu{
            position:absolute;
            width:550px;
            height:100px;
            z-index:2;
}
#flash_body{
            width:530px;
            height:300px;
            position:absolute;
            top:22px;
            background-color:#CCCCCC;
            z-index:1;
            padding:10px;
            overflow:hidden;
}

Confused yet? Here comes the best part. So far we have a working piece of Flash sitting on the page, trying to call a JavaScript function that doesn’t exist. So let’s add it:

function update(url){
            $('flash_body').url = url;
            Effect.BlindUp('flash_body', {duration: 0.5, afterFinish:updateComplete});
}
function updateComplete(){
            var url = $('flash_body').url;
            var update_ajax = new Ajax.Updater('flash_body', url, {method:"GET", asynchronous:true});
            Effect.BlindDown('flash_body', {duration: 0.5});
}

There’s two functions here. The first one uses a script.aculo.us effect to hide the content DIV. After that effect is complete, updateComplete() is called. This function then loads the new content into the DIV using the Ajax.Updater function, which is part of Prototype. Then we make the content DIV appear again. Look out for a tweaks here: I store the url variable with as an attribute in the flash_body DIV tag, since the updateComplete callback doesn’t allow me to pass parameters.

And that’s it! If this explanation didn’t work for you, feel free to take a look at the source code of this page.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Now this on is really kool. Need to play around with this
# Posted By vini | 7/15/07 1:44 PM
queria saber como usar el wmode transparent con UFO y funciono
# Posted By posicionamiento en buscadores | 8/23/08 3:30 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.7.002.