A Coldfusion Flash Wrapper Using SWFObject

Posted: March 9, 2007 in ColdFusion, Flash

Hello World,

I’ve built a lot of Flash applications over the past several years of web development. I’ve had my share of including the Flash-based object tag into my ColdFusion templates. Most of the time it was without incident. However, I’m not the greatest typist in the world and copy and paste sometimes has its own issues. So I created a wrapper using ColdFusion Custom Tags and a Javascript library called SWFObject. This wrapper would allow someone who doesn’t know Javascript to add Flash content to any ColdFusion template.

First, a little bit about how SWFObject works. Here’s an excerpt from the blog.deconcept.com/swfobject site:

SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

Here’s an example of how you would use SWFObject.


<script type="text/javascript" src="assets/js/swfobject.js"></script>

The code above shows the script block that includes the SWFObject Javascript file. This file contains a library of functions that make all of this work.


<div id="flashcontent1"><strong>You need to upgrade your Flash Player</strong>

    This is replaced by the Flash content.

</div>

The code above defines the section of the page that will contain the Flash content. I can also be used to display information to users that do not have the Flash player installed. So far, so good.


<script type="text/javascript">// <![CDATA[

    var so = new SWFObject("antique-analog-clock.swf", "swfid", "206", "246", "8", "ffffff");

    so.addVariable("myName", "Theo Rushin");

    so.write("flashcontent1");

// ]]>

</script>

The code above contains another block of Javascript code. The first line creates a new instance variable of a SWFObject. I pass several parameters to the method such as; the swf name, an object id, width, height, Flash version, and background color. You can get full details about the method and its parameters by visiting this site – http://blog.deconcept.com/swfobject/.

The next line calls a method of the SWFObject instance variable called addVariable. This method allows me to pass a variable name and value into the Flash movie. Normally this is done using FlashVars.

The last line calls the write method of the instance variable to write the completed Object/Embed tag into the div tag shown in the second code block.


<cfimport prefix="socf" taglib="/cfswfobject/com">

Use CFImport to access the custom tags in the cfswfobject folder.


<socf:swfobjectinit />

Call the swfobjectinit custom tag to initialize the SWFObject functionality.


<cfif thisTag.ExecutionMode EQ 'start'>

    <script type="text/javascript" src="assets/js/swfobject.js"></script>

</cfif>

This is the code from with in the swfobjectinit.cfm file. As you can tell, when the Execution mode for this custom tag is ‘start’ we simply include the swfobject Javascript file. In case you are wondering, “what is this Execution mode?” Take a look at the Adobe LiveDocs to get a full explanation about Creating and calling custom tags.

So how do I call the custom tags to include my Flash movie?


<socf:cfswfobject name="antique-analog-clock.swf" width="206" height="246" version="8" bgcolor="ffffff">
    <socf:sovar varname="myName" value="David Bailey" />
</socf:cfswfobject>

Use the cfswfobject and sovar custom tags to include the Flash movie in the template. As you can see I use the prefix specified in the cfimport tag to refer to the cfswfobject custom tag. I use several user defined attributes to pass values inside the custom tag. I then have a child custom tag that allow me to set a variable name/value that will be passed into the Flash movie.

So what does the cfswfobject custom tag look like?


<cfif isDefined('ThisTag.ExecutionMode')>

    <cfif ThisTag.ExecutionMode IS 'Start'>
    <cfelseif ThisTag.ExecutionMode IS 'End'>

        <div id="flashcontent">

            <strong>You need to upgrade your Flash Player</strong>

            This is replaced by the Flash content.

        </div>

        <cfoutput>

        <script type="text/javascript">

            // <![CDATA[

            var so = new SWFObject("#Attributes.name#", "swfid", "#Attributes.width#", "#Attributes.height#", "#Attributes.version#", "#Attributes.bgcolor#");

            <cfset len = ArrayLen(ThisTag.assocAttribs)>

            <cfif StructKeyExists(ThisTag, 'assocAttribs')>

                <cfloop index="ndx" from="1" to="1">

                    so.addVariable("#ThisTag.assocAttribs[ndx].varname#", "#ThisTag.assocAttribs[ndx].value#");

                </cfloop>

            </cfif>

            so.write("flashcontent");

        // ]]>

        </script>

        </cfoutput>

    </cfif>

</cfif>

I start off my checking the Execution mode for the custom tag. I have an empty cfif block reserved for any functionality I may need later. The real functionality is contained with the cfelseif code block. I output the div block that serves as a holding place for the Flash movie. I then begin a block of Javascript code that does several things.

First I create a variable instance of the SWFObject, passing into its method the values I passed into the custom tag.

Second I get the number of associated attributes I may have for this custom tag. This code along with the code in the child custom tag, sovar.cfm, allow the parent custom tag (this one) access any attributes passed into the child custom tag. The child custom tag receives a varname and value. Those two values are made accessible due to the code in child custom tag.

As I continue through the loop I call the addVariable method of the swfObject instance in order to pass values into the Flash movie.

So what do this sovar.cfm custom tag do?


<cfif ThisTag.ExecutionMode IS 'Start'>

    <!--- Associate local attributes to <cf_cfswfobject> --->

    <cfassociate basetag="cf_cfswfobject">

</cfif>

The most important thing it does is to define a relationship between the child custom tag (this one) and its parent (cfswlonject.cfm). It does this by using the cfassociate tag. We identify the parent tag by specifying it name (using the prefix of cf_) in the basetag attribute.

And that’s it. Now you can simply include those few lines of CF code to safely include your Flash movie.

View a demo of this sample page here.

Download full code here.

Download version 1.4 of the SWFObject Javascript library here or from their site here.

</post>

Advertisements
Comments
  1. […] post by therush and software by Elliott […]

  2. Geoff says:

    Hey, just a quick note to say that there’s a newer version of SWFObject out, 1.5 that has a small API change you might want to account for with the way Express Install works.

    Nice work!

  3. therush says:

    Hey,

    Thanks for that update. So what’s up with SWFFix?

    Theo

  4. Way over my head ;o/

  5. Ramsey Tapia says:

    The download link is broken, can you repost or email the file. I have a few websites that need this solution and I’d rather not have to go through and change manually. This tag would makes things a breeze. Thanks!

  6. see it’s very define,your one of a kin. Frederik Kyleigh.

  7. pawowgold says:

    very good, it’s very useful to me, thank you very much!

    ———————
    runescape gold, http://www.playersaid.com/runescape-gold/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s