Introduction

The following feature was written to serve two purposes: to provide an easy-to-follow introduction to the Flash / JavaScript Integration Kit and to demonstrate a method for using Flash as an animation underlayer for enhancing web applications. While I have fallen in love with a variety of JavaScript animation libraries developed in the wake of the Web 2.0 buzz, I have never found an implementation that makes me feel like it could truly replace the animation abilities inherent within the Flash player.

HTML Form Builder

While the complexity of the JavaScript files needed to create visual effects consistently across browsers grows ridiculously, I’m finding myself yearning for compromise. Programs like Measure Map and Yahoo Maps Beta show us that the great dynamic promise of Ajax is definitely compatible with the interactive capabilities of Flash. The following implementation illustrates a way to let JavaScript do what it does best—manipulate DOM and make calls to the server—and Flash do what it does best—dance.

See It in Action

In this demo we are using Flash as an animation underlayer to enhance an HTML form. Click on the text fields to see the Flash movie clip resize and move to the appropriate DIV.

Flash Underlayer Demo

Using CSS, we are absolutely positioning a container element over the flash animation layer that holds our SWF. Using JavaScript, we can make sure our Flash SWF is always the same size as our container DIV and, thanks to Peter-Paul Koch’s findPos functions, we can communicate the position of DOM objects we want to highlight with our Flash animation.

Note : The F/J Integration Kit is meant to be used with Flash MX (7) or lower. While you could follow along in a Flash 8 environment (the demos created here were actually created in Flash 8), you’d probably be better off using some of the new fancy pants features that are included in the new platform. If you want to get Flash and JavaScript talking in Flash 8, definitely check out the work done by Paul Colton on AFLAX. It’s good stuff.

How It Works

To follow along, download the F/J Integration Kit from Macromedia’s web site and download the source files for the Flash Underlayer Demo from ours. In this tutorial we’ll go over how to install the Kit and then explain all of the scripts used to create the Flash Animation Underlayer demo.

Installing the Integration Kit

While Macromedia states in their documentation that the “Installation of the JavaScript and Flash Integration Kit is very straightforward,” I could definitely see some places where a few Google queries might be needed to get started. For the most part, there are three steps to getting yourself set up to get Flash and JavaScript talking to one another with the Integration Kit.

  1. Download the files.

  2. Place JavaScriptFlashGateway.js and JavaScriptFlashGateway.swf in your web directory (I place them in a folder called “scripts”).

  3. Install library files into your Flash Authoring or Flex classpath.

Oh, vile Step 3! What and where in the heck is the Flash classpath? For that answer, we’ll need to go to the official Flash MX documentation:

Flash has two classpath settings: a global classpath and a document-level classpath. The global classpath applies to external AS files and to FLA files, and is set in the Preferences dialog box (Edit > Preferences > ActionScript > ActionScript 2.0 Settings).

By default, the global classpath contains one absolute path and one relative path. The absolute path is denoted by $(LocalData)/Classes in the Preferences dialog box. The location of the absolute path is shown here:

(Windows 2000 or Windows XP) \Documents and Settings\user\Local Settings\ Application Data\Macromedia\Flash MX 2004\language\Configuration\Classes

(Windows 98) \Windows\Application Data\Macromedia\Flash MX 2004\ language\ Configuration\Classes

(Macintosh OS X) Hard Drive/Users/Library/Application Support/Macromedia/Flash MX 2004/language/Configuration/Classes

Global and Document-Level Classpaths

What we’re going to do is copy the folder “com” in “/source/flash/actionscript”, which contains the following directory structure:

com/macromedia/javascript/JavaScriptProxy.as
com/macromedia/javascript/JavaScriptSerializer.as

into the appropriate folders listed above for our operating system. And with that, we move on to the code.

Hackery

Before we can create an animation underlayer, we’ll need to tweak the F/J Integration Kit’s JavaScript a bit. Because the Kit needs to create the XHTML markup for inserting the Flash SWF for us, it doesn’t always set the presentation parameters we might need. For the Flash Animation Underlayer, we want our SWF’s background to be transparent and prevent scaling. Just open up the JavaScriptFlashGateway.js and do the following:

Around Line 182 you want to comment out

//flashTag += '<param name="bgcolor" value="#'+this.bgcolor+'"/>';

And add

flashTag += '<param name="wmode" value="transparent"/>'; //added
flashTag += '<param name="scale" value="noscale"/>'; //added  

And then go to the else statement around Line 196 you want to comment out

//flashTag += 'bgcolor="#'+this.bgcolor+'" ';

And add

flashTag += 'scale="noscale" '; //added
flashTag += 'wmode="transparent" '; //added

And done.

CSS and XHTML

Next, we’ll set up our markup and CSS to layer our XHTML content over our Flash Animation layer. In the head, we include the JavaScriptFlashGateway and our JavaScript file.

<script type="text/javascript" src="scripts/JavaScriptFlashGateway.js"></script>
<script type="text/javascript" src="scripts/underlayer.js"></script>

In the body, we need two DIVs. I’ve named one container for our XHTML information and followed it with another called flash.

<div id="container">
// All your XHTML Stuff goes in here ...
</div><div id="flash">
<script type="text/javascript">
    var uid = new Date().getTime();
    var flashProxy = new FlashProxy(uid, 'scripts/JavaScriptFlashGateway.swf');
    var tag = new FlashTag('underlayer.swf', '100%', '100%'); 
    tag.setFlashvars('lcId='+uid);
    tag.write(document);
</script>
</div>

In our CSS file, the only required set of rules is to absolutely position our container in the top left corner of the browser.

#container{
    position:absolute;
    top:0;
    left:0;
    padding:50px 0 0 0;
    z-index:1000;
    width:600px;
}

Inside our container div, I’ve created the following HTML structure for our demo:

`<div id="box1" class="box">1</div>
<div class="field">
<label>Text</label>
<input onfocus="flashHighlight('box1');" />
</div>`

I know, I know. Obtrusive JavaScript alert, but for this tutorial’s purposes it makes it easier to explain what’s going on. This can be easily changed to something more “appropriate” later on. Basically, what we’re doing here is telling the browser that when the input field is onfocus or selected, we want to run a JavaScript function called flashHighlight on an element with an id of box1, which is our numbered DIV.

JavaScript

While the Flash SWF expands to 100% of the flash DIV, there’s no way for the DIV or the SWF to match the size of our container since it is absolutely positioned above our Flash layer. To make this adaptive, we’ll use some DOM manipulation to find the size of our container DIV and have our flash DIV match it.

    function resizeFlash(){
        var oContainer = document.getElementById('container');
        var oFlash = document.getElementById('flash');
        var cHeight = oContainer.offsetHeight + 'px';
        var cWidth = oContainer.offsetWidth + 'px';
        oFlash.setAttribute('style', 'height:' + cHeight + '; width:' + cWidth);
    }

The next function will tell an Actionscript function called “moveBeacon” to manipulate a Flash movieclip to match the size and position of whatever element we give it. In Flash, we will have a corresponding Actionscript capable of receiving all the parameters we’ve just set with JavaScript.

    function flashHighlight(ID){
        var obj = document.getElementById(ID);
        flashProxy.call('moveBeacon', findPosX(obj), findPosY(obj), obj.offsetWidth, obj.offsetHeight);
    }

Inside Flash

After opening the underlayer.fla file, you’ll notice two layers on your timeline—one called Actionscript and another called Movieclips. In the first frame of the Actionscript layer, you’ll see two lines of code that enable the talk between JavaScript and Actionscript:

//Allows AS to call JS functions

import com.macromedia.javascript.JavaScriptProxy; var proxy:JavaScriptProxy = new JavaScriptProxy();

//Allows JS to call AS functions
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);

Since we want our movieclips not to scale proportionally with the stage (since its being manipulated dynamically with JavaScript), the following code is also present. Notice

//Prevent movieclips from resizing proportionally to stage size.
Stage.scaleMode = "noScale";
Stage.align = "TL";

You’ll also notice this frame is also the location of our moveBeacon function referenced in our JS file above.

//Move the beacon. Tell desired size of highlighter.
function moveBeacon(px,py,pw,ph){
    beacon._x = px;
    beacon._y = py;
    targetWidth = pw;
    targetHeight = ph;
}

This function moves a “beacon” movieclip to the desired locating and sets two variables (targetWidth and targetHeight) to the size of the DIV identified in our corresponding JavaScript function.

In the movieclip layer, there are two movieclips you’ll need to make this work. One is a blank one that must be named “beacon.” This can be placed anywhere on the stage. It will be the initial position our highlighter will go to when the SWF is loaded up. And we’ll also need another movieclip (a square or what have you) that will act as our highlighter. To make this quick, I’m using the following Actionscript on that movieclip.

onClipEvent (enterFrame) {
    //Find distance to beacon clip.
    dx = _root.beacon._x - _x;
    dy = _root.beacon._y - _y;    //Find difference between highligher size and desired size.
    dw = _root.targetWidth - _width;
    dh = _root.targetHeight - _height;    //Close the distance.
    _x = _x + (dx/5);
    _y = _y + (dy/5);    //Adjust the dimensions.
    _width = _width + (dw/3);
    _height = _height + (dh/3);
}

This function turns on the ears of our “square” to listen to any position changes to our beacon movieclip and move it there. When we move the beacon, the highlighter will follow it. Our “square” will also adjust its dimensions according to any changes in targetWidth and targetHeight and morph accordingly to our desired numbers, which in our case will be the dimensions of the DIV we pass it.

Drawbacks to the Flash Underlayer Method

This technique makes creating centered fixed-width layouts rather complicated because the find position function by Peter-Paul Koch seems to always reference distance from the top left corner of the browser window (actually, I believe it’s much more complicated than that and I’m probably dead wrong about it, but just know that it requires making your Flash underlayer movie as large as all the html elements to make it work.

The other drawback is that in Safari, when a Flash movie is positioned underneath an input or textarea element, the element begins to blink in pace with the cursor. You can see this in the demo above. Looks smooth as ice on Mozilla and Internet Explorer, but blinks terribly in Safari. However, this only happens under form elements and so would be entirely okay to use under tables, regular DIVs, spans, etc.

Conclusion

This is a novel approach to injecting Flash into a web application and, while it’s mostly just an interesting experiment, the greater point I’m trying to make here is that there are avenues for integrating the interactivity of Flash that haven’t been discovered yet. With the new Flash 8 environment, this method is actually easier and more responsive thanks to what is essentially a built-in gateway on the Flash 8 player. Web 2.0 is all about mixing and matching technologies, and for those who can’t upgrade to the latest Flash environment, the F/J Integration Kit is a great way to get something dynamic going without any additional expenses. Definitely play with it and let us know if you do anything interesting.

HTML Form Builder
Kevin Hale

Using Flash as an Animation Underlayer by Kevin Hale

This entry was posted 5 years ago and was filed under Features.
Comments are currently closed.

· 37 Comments! ·

  1. Dan Mall · 5 years ago

    This is great! I’m glad someone is finally using Flash to enhance the user experience. Great work, Kevin!

  2. Coda Hale · 5 years ago

    This doesn’t work for me.

    I’m on FF 1.5, Flash 7, SuSE Linux 10.0, and all I get is a flash of what it should look like, then some blocks moving up and to the left, then a blank white square with “X: 0” and “Y: 0” in the upper right-hand corner.

    Smells like some z-index problems to me. Any ideas?

  3. Chris Campbell · 5 years ago

    Are you clicking on the input boxes and nothing happens at all?

  4. Nick Gagne · 5 years ago

    In Firefox the cursor seems to flicker at a seizure inducing rate. Also, the flash highlighter disappears on the bottom box, might have something to do with z-index.

  5. alexander · 5 years ago

    This seems to be another great article from particletree - you guys are skilled :).. but too late for me now, I will take a closer look tomorrow!

  6. Sugar · 5 years ago

    A good technique, but it certainly slows down my Firefox too much.

    Moreover, when I click on text fields the rectangle just goes from number to number without resizing, is this intentional?

    Only by using TAB I got it to work.

  7. Sham Bhangal · 5 years ago

    This seems like an overcomplicated route for something that you could instead do totally in Flash.

    Using multiple technologies for multiple technology’s sake seems questionable here, as it trebles the potential for incompatibility (probability of incompatiblity between JS and the user platform x incompatibility between Flash player and the user platforn x the incompatibility of Flash and javascript (interfaces)). The fact that this doesn’t work for many users (myself included) just underlines this issue - the example breaks very easily.

    (Yeah, I know Ajax is also a multiple technology deal, I’d rather make no comment about that!)

    Another point is that your Actionscript seems to be locked in the ‘looks nothing like javascript style (Flash 5) rather than the JavaScript based modern version of ActionScript used in Flash 6, 7 and 8. If you rewrote the example in that style, Flash might even start to look desirable/understandable for the Ajax crowd.

    S

    Flash web-application developer

  8. rich · 5 years ago

    Not great cross-browser but interesting. I assume it’s a proof of concept, but even in Safari 2.0.2 there is nasty flickering happening on each number as you select the corresponding text box.

    I’d take the opposite approach from Sham and say this is something that should be done entirely in XHTML / Javascript / CSS if it can’t work cross-browser in Flash / Javascript / XHTML / CSS.

    But then I’m not a Flash web-app developer ;-)

  9. Robert Nyman · 5 years ago

    Very interesting approach! And I agree: while I love JavaScript and it’s very capable, it can’t be compared to the smothness of animations in Flash. Can this approach, in the future, be the best mix of both worlds? :-)

    Just one small question: does the JavaScript block (var uid = new Date().getTime(); etc) have to be inline?

  10. Kevin Hale · 5 years ago

    Thanks everyone for the comments so far.

    Robert, that was placed there as recommended by the F/J Integration Kit. From what I can tell, I can’t see why this could be done unobtrusively. I just didn’t have a lot of time to play with it.

    Sham, I totally agree that the implementation above could easily be recreated entirely in Flash. Also, like rich mentioned, this could also be done entirely in XHTML/Javascript/CSS. This method is definitely just an experiment to test the waters to see what kind of interactivity could be accomplished. The aspect I find desirable about this approach is that it creates a line of separation that divides code made for animation from code that does a great job at DOM manipulation and Ajax. I know the new Flash and the recent JavaScript could handle both of these aspects, I just figured I’d play with a method that gives each it’s own space.

  11. Paul L · 5 years ago

    Doesn’t work for me either, in IE6. Seems okay in Firefox 1.5

  12. Kuswanto · 5 years ago

    It works for me. Using Flock beta, Flash plugin 7.

    I will taka a look at this, and might be using it for my website redesign.

    Thanks a lot, PT (Particle Tree) flashy!

  13. adam · 5 years ago

    Very interesting and impressive work - certainly gives me some hope for this type of approach down the track.

    However, I would never actually consider using this approach for a client any time soon. Murphy’s law says that inevitably the first time I put this techique in place the client will turn around and tell me that his chiropractor’s niece cannot see it on her safari browser (or whatever other obscure combinations have issues with this method).

    I think the real issue your experiment raises is that boring old question of standards, and flash IS it’s own standard. That is what is so attractive and superior about working in the microcosm of flash at this stage of the web game. (I just wish they would fix up the bloody IDE!)

  14. Danny Foo · 5 years ago

    This is a really neat and improvisation to Flash. Not to mention that it truly brings out the interactivity and the available added value to make Flash more useful on the Internet.

    But I got a question though, if someone has got a plugin called FlashBlock for Firefox switched on, will this still work?

  15. Coda Hale · 5 years ago

    Sorry for the vague description. On my Linux workstation, there is only a blank white square, with nothing on it but the X/Y coords. No input controls, nothing but the white square.

  16. Chris Fritz · 5 years ago

    I’m in the same boat as Coda Hale. You can see a screenshot of how it appears in Firefox on Linux (as well as the latest Opera). I’m using the “Shockwave Flash 7.0 r25” plugin for Linux.

  17. Chris Fritz · 5 years ago

    When I’ve wrestled with Flash previously (here on Linux, in Firefox, Opera, and maybe also in Konqueror), it was impossible for any elements to overlay Flash. Flash was always on top.

    After very minor playing around with the demo, it seems giving an element “position: fixed;” causes it to ignore z-index and be the “top element” on the z-index pile. This is why in my screenshot the “fixed” header is shown as being over the Flash element in Firefox. However, it’d be a bit daft positioning pages as fixed to make it work with this =P

    Unfortunately, the state of Flash support on Firefox and Opera on Linux is too damaging for this technique to be used anywhere that has a good deal of penguin-geeks =(

  18. someone · 5 years ago

    Yep, Dont work with IE6.

  19. Jason Mock · 5 years ago

    Chris F - I’ve found that on modern browsers (so, not Netscape 6 and I think IE 5.0), and in conjunction with a recent Flash Player (7, I believe) and the use of wmode=transparent, you can get other elemnts to be positions “over” Flash. I’ve also noticed performance hits in Firefox when using wmode, plus the Flash element cannot get the focus in Firefox if the Flash element is within an element set to overflow:auto. Perhaps a narrow focus that won’t apply to most people, but it sure through me for a long loop!

  20. Tyler McMullen · 5 years ago

    My only problem with this is that it is just how slow Flash runs on many older computers. I’m on a 1.4ghz Toshiba laptop… (doesn’t have the best graphics processor) and it runs horribly slow in FF 1.5. I would rather not have great animation in favor of reaching a wider audience.

  21. Roel · 5 years ago

    I have used this script for a website I have to make. Now in IE6 the content shows beside the flash instead over it. While in Firefox it all works fine. Expect for the thing that it’s a bit slow in firefox.

    Can that come because of the frame rate of the flash file ? (24 fps) or the size of it ? (25KB)

    First you see a page with no content then you can go to other pages that have a new flash file with content. The loading of the content takes about 12 sec. online (got adsl) and 6 sec. offline.

    Then I also got the problem in Firefox then when the page is loaded the area where the content is is white. I need to move my cursor over it else it stays white and then you can not read the content.

    But beside those things it works fine. Do you know who to fix those ? (wanna have it working in IE6 as well if possible) Or is there another methode to use a flash as background for your html page.

    Well, even if you can not help me then still keep up the good work…

  22. Nate Faulkenberry · 5 years ago

    I think this is a great article, I have picked through it a few times because I love finding new ways to make JavaScript work with Web Apps. I think Particle Tree is on to something with this type of development however as I have read through the comments I realize it’s not fool proof yet which is unfortunate. I also agree with the person that said why go through the stress of making JS and AS work together when it could all be done in Flash. Very good point, this could be done (and have cross browser support without a doubt) purely in Flash.

    I think as the use of AJAX expands and browsers begin to comply better with w3c standards we will see more of this development.

    Maybe I’m wrong though I’m tired as hell. Great work Particle Tree AS + JS will be a net revolution.

  23. Gabriel banda · 4 years ago

    Hi I have a doubt about flash, can i use a movie flash as background fixed? How I Do It?

  24. Jeff · 4 years ago

    I’m glad you mentioned the classpath location. Kevin mentioned it in one his articles like no big deal everyone knows about the class path lol…

  25. m1HGMksDoL · 4 years ago

    Hi! Very nice site! Thanks you very much! Dk5v5n8kQwU3h

  26. hhxkuiuytq · 4 years ago

    ogkocoswo

  27. Jeremy Sewell · 4 years ago

    wmode=opaque fixes the problem with blinking in safari. and it is faster then wmode=transparent

    Nice Post Tree people :-)

    Sham Bhangal: Maybe here but the type boxes in flash are somewhat lacking, do they even support mouse wheel scrolling out of the box? and CSS support in loaded html in flash type boxes is well… not impressive, so alot of times puting a real html text box is just what the doctor ordered.

  28. Jeremy Sewell · 4 years ago

    Yeah… nevermind sorry

  29. Zack Katz · 4 years ago

    I have a client whose ideas required a Flash integration; they wanted something like an animated splash page, and I wanted to achieve the same effect without actually having a splash page… The client required having a non-interactive moving background, as well as a clickable product slideshow.

    I came up with a solution that involved using transparent Flash in an absolutely positioned DIV for the non-clickable background image (with z-index -1 and Flash menus turned off), then having another div containing another transparent Flash object.

    For some reason, having the Flash be wmode=opaque did not solve the Safari flicker…

    Once the site is complete—and if I remember—I’ll post a link to the website.

  30. DanSeo · 4 years ago

    Works Here, Thanks. http://www.greatwestsports.com

  31. salaheddine · 3 years ago

    Everyone needs a hug.

  32. smita · 3 years ago

    i have flash files containing the java script. these files are not opening neither in flash 8 nor in flash mx 2004. what i need to do for this. can you help me. its very urgent

  33. Zachary Katz · 3 years ago

    http://www.katzwebdesign.net/grownup/ <— Have flash as a background with flicker solved on Safari

  34. Nebod · 3 years ago

    Great stuff for adding animated backgrounds that are non-interactive. Is there any way to use this with FIXED WIDTH and CENTRED pages??

    Thanks for sharing your hard work.

  35. Dan · 3 years ago

    The main problem is Safari as far as I can see. http://www.katzwebdesign.net/grownup/ is fine until you use the navigation in safari at which point it starts jumping around all over the place.

  36. Simplycase · 3 years ago

    Great solution.

  37. Roll Up · 3 years ago

    Everyone needs a hug.