Using JavaScript to Render Flash Tags

The first time I embedded a piece of Flash into a ColdFusion application, I wrote a ColdFusion custom tag to render the Flash tag for me. Yesterday, I wrote a JavaScript class that essentially does the same thing, but renders the Flash tag client-side rather than generating it on the server. Why encapsulate the process of writing out a Flash tag?

  1. Flash tags are complicated. They have a lot of different options. The FlashTag class supports 17 different properties. You can set the ones you need (only four are required), and defaults are used for the rest. Also, the FlashTag JavaScript class validates the information you set on it to make sure all the values are supported (if not, it throws exceptions).
  2. Flash vars can be a pain. Flash vars are passed into Flash movies at load-time, and have to be formatted as a URL encoded string. The FlashTag makes setting Flash vars much easier (see code below).
  3. Encapsulation is good. What if you wanted to change something across all your Flash tags? Wouldn’t it be better to change it one place?

Here’s some sample code. First, load the required classes like this:

<script type="text/javascript" src="/path/to/Exception.js"></script>
<script type="text/javascript" src="/path/to/FlashTag.js"></script>

The Exception class is required so that the FlashTag class can throw exceptions if something goes wrong. Now, create an instance of the FlashTag and write it out:

<script type="text/javascript">
// The arguments below are path, width, height, and Flash Player version number.
var tag = new FlashTag('/path/to/flashContent.swf', 300, 300, '7,0,14,0');
tag.write(document);
// or
document.write(tag.toString());
</script>

You can set properties like this:

tag.setBgcolor('ff0000');
tag.setMenu(false);

You can add Flash vars like this…

tag.addFlashVar('someName', 'some value');

… or like this…

tag.addFlashVars('a=b&b=c&a=c');

Why use JavaScript rather than rending Flash tags server-side? JavaScript runs everywhere whereas ColdFusion only runs on a ColdFusion server which makes the JavaScript solution more versatile. Also, using JavaScript allows you to render Flash dynamically and on demand, after the page has loaded, which is becoming more relevant as internet applications become richer and more interactive.

I wrote the FlashTag JavaScript class as part of the Flash / JavaScript Integration Kit. You can grab the source from Subversion here:

I tested it fairly well, but if you find a bug, let me know and I’ll get it fixed right away.

Update: As “sang” points out in the comments, this is also a good way to keep your pages W3C/XHTML compliant.

9 Responses to Using JavaScript to Render Flash Tags

  1. sang says:

    nice article, but the script could be useless if the user disabled javascriptalso, using JS to render flash would also make the page w3c valid….

  2. John Giotta says:

    If a user deactivates JavaScript, then it’s more than likely they deactivate everything, including Flash.Plus, if that’s the case then we shouldn’t be overly concerned.

  3. eRom says:

    Hi,Indeed, if user don’t allow Javascript execution, he loose more and more net features and nice sites ;)About Flash / Javascript integration, I start development of small Javascript library helping communication between Flash and Js, and giving some useful tools for js programmation.you can read some explaination/example on my blog http://www.customActions.netProject’s name : jsdk for (JavaScript Development Kit) with some features like.Event delegationXmlHttpRequest WrapperMethod delegationdata structure packageetc…Can it be useful ? I think ^^, it can speed up client side development and gives just useful tools to work with Flash and some net features. (no UI package for example, we work with Flash for that).Some examples will be online as soon as possible, with a jsdk version too ;)Just wait an official release of a future AS2 Framework (jsdk is based on it for few classes).(more infos can be found on my blog ;))Wait and see ^^Bye.

  4. yo says:

    Java Script = bad solutionWhat if the person is browsing with javascript turned off.

  5. If someone is browsing with JavaScript turned off, nothing will happen, however for the sites I work on, that’s ok. I think fewer and fewer people turn JS and cookies off these days, and those who do typically understand that some content won’t work for them. I’m willing to exclude those few people in order to help web applications evolve.

  6. Using Internet Explorer 5.01 I am getting this JS error:Line 98Char 9’undefined’ is undefinedBy changing all occurrences of undefined (no quotes) to “undefined” (with quotes) the problem is fixed.- mga

  7. Josh says:

    Hi all,I am using the Flash/JavaScript Integration Kit and I am using JavaScript to render Flash tags.I am getting this weird visual error where the graphics outside of the Flash stage are appearing. It’s just like the stage dimensions are being ignored.Has anyone encountered this problem before?Regards,Josh.

  8. Josh says:

    Oops!Sorry people for the last post. I had made a simple domensioning mistake.My SWF and my var sample = new FlashTag(“base.swf”, 780, 530, “7,0,14,0”); dimensions were not consistant.Pardon me.Flash / JavaScript Integration Kit ROCKS!Regards,Josh.

  9. Alex says:

    I am communicating with flash through JavaScript. How is the Flash accessible? Is it through OBJECT or EMBED?How can I add an ID for or a NAME for ?