The World Wide Web According to …

May 3, 2007

My presentation schedule

Filed under: CAPFUG, ColdFusion, Flash, Flex, MDCFUG, Presentations — therush @ 11:53 am

Hello World,

I added a new page to my blog called My Presentations. There you can see my schedule of presentations I will be giving throughout the year. I will be adding more of my scheduled presentations to this page as I have time. You can visit this page directly (http://therush.wordpress.com/my-presentations/) or simply click on the My Presentations link in the menu across the top.

</post>

March 28, 2007

March 29th User Group Presentation

Filed under: Apollo, Flash — therush @ 1:27 pm

Hello World,

Technical difficulties (loss of power) caused a rescheduling of this presentation. I apologize to the Nashville User Group member for any inconvenience. We will let you know when this presentation has been rescheduled.

I will be giving a presentation for the Nashville ColdFusion User Group members on Thursday March 29th, 2007. Although I would love to visit Nashville, I will not be presenting in person. I will be connecting with and presenting using Acrobat Connect.

In this meeting I will be presenting a case study of a Flex 2 application I developed for a company in Maryland. I will be talking about the following topics;

  • Lifecycle process of the project
  • Application and Database architecture
  • Select code snippets
  • An Apollo-based application widget

So if you’re in the Nashville area on March 29th stop by the Nashville ColdFusion User Group meeting and catch my presentation. You can get more information about the user group and their meetings by going here: Nashville ColdFusion User Group.

</post>

March 9, 2007

A Coldfusion Flash Wrapper Using SWFObject

Filed under: ColdFusion, Flash — therush @ 12:54 pm

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>

« Previous PageNext Page »

Blog at WordPress.com.