« MXNA Flash Services Updated | Main | Macromedia Developer Relations Launches It's First Podcast »

June 24, 2005

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.

Posted by cantrell at June 24, 2005 09:02 AM | References

Related Entries

Comments

nice article, but the script could be useless if the user disabled javascript

also, using JS to render flash would also make the page w3c valid....

Posted by: sang at June 25, 2005 09:43 AM

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.

Posted by: John Giotta at June 25, 2005 08:03 PM

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 www.customActions.net

Project's name : jsdk for (JavaScript Development Kit) with some features like.

  • Event delegation
  • XmlHttpRequest Wrapper
  • Method delegation
  • data structure package
  • etc...

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.

Posted by: eRom at June 30, 2005 04:49 AM

Java Script = bad solution

What if the person is browsing with javascript turned off.

Posted by: yo at July 26, 2005 03:33 PM

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.

Posted by: Christian Cantrell at July 27, 2005 01:28 PM

Using Internet Explorer 5.01 I am getting this JS error:

Line 98
Char 9
'undefined' is undefined

By changing all occurrences of undefined (no quotes) to "undefined" (with quotes) the problem is fixed.

- mga

Posted by: mauricio giraldo at August 2, 2005 01:22 PM

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.

Posted by: Josh at August 4, 2005 12:56 PM

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.

Posted by: Josh at August 4, 2005 02:24 PM

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 ?

Posted by: Alex at October 14, 2005 10:46 AM