Embedding Flash

On the home page of my site, I wanted to place an unspecified number of Flash “teasers”, each linking to somewhere in the site. I also needed to specify an image for each “teaser” to be used as a backup for users without Flash support.

This is how I did it…

My template for these “teasers” looks like this:

So, I have a Droplink which lets the user select a Flash movie from a specified folder in the Media Library, an Image which is also selected from a specified folder in the Media Library, and a General Link which determines where the teaser should link to.

In my content tree, I have a folder where I store “Teaser” objects:

On my “Home Page” template, I use a Multilist which points to this folder, so I can manually select which ones will appear on the home page.

 So, that’s the content structure in place. Now for the presentation stuff.

I decided to use Adobe’s Flash Player Detection script to do the actual embedding (available from Adobe’s web site). Flash movies in Sitecore have a .ashx extension, so I had to modify the script slightly because it hard-codes the extension as .swf in the AC_FL_RunContent() function. Just change the second parameter of the call to AC_GetArgs from “.swf” to an empty string “”:

// ...
// ...
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, "", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
// ...
// ...

I then added a Javascript helper function which calls this function (passing the link path to the Flash movie as a FlashVars parameter), and outputs a linked image for users without appropriate Flash support.

var flashInstance = 0;
function doTeaser (swfPath, swfWidth, swfHeight, swfMajorVersion, swfMinorVersion, swfRevision, swfBgColor, imgPath, imgWidth, imgHeight, imgAlt, linkPath)
{
    var hasRequestedVersion = DetectFlashVer(swfMajorVersion, swfMinorVersion, swfRevision);
    if (hasRequestedVersion)
    {
        AC_FL_RunContent(
        "src", swfPath,
        "width", swfWidth,
        "height", swfHeight,
        "align", "middle",
        "id", ("teaserFlash"+flashInstance++),
        "quality", "high",
        "bgcolor", swfBgColor,
        "name", ("teaserFlash"+flashInstance++),
        "allowScriptAccess","sameDomain",
        "type", "application/x-shockwave-flash",
        'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
        "pluginspage", "http://www.adobe.com/go/getflashplayer",
        'FlashVars', 'linkurl='+linkPath
        );
    }
    else
    {
        var alternateContent = '<a href="' + linkPath + '"><img src="' + imgPath + '" alt="' + imgAlt + '" width="' + imgWidth + '" height="' + imgHeight + '" /></a>';
        document.write(alternateContent);
    }
}

So, now we need a rendering which writes a script tag calling this helper function, and a noscript tag which writes the flat image for users without Javascript. I had to work out how to access specific fields of the Flash and image objects in order to pass the raw values into the Javascript function.

The full rendering code, which iterates through all the selected teasers on the home page, is as follows:

<?xml version="1.0" encoding="UTF-8"?>

<!--=============================================================
    File: Home Page Teasers.xslt
    Created by: sitecore\mike
    Created: 02/07/2008 16:48:43
    Copyright notice at bottom of file
==============================================================-->

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:sc="http://www.sitecore.net/sc"
  xmlns:dot="http://www.sitecore.net/dot"
  exclude-result-prefixes="dot sc">

<!-- output directives -->
<xsl:output method="html" indent="no" encoding="UTF-8" />

<!-- parameters -->
<xsl:param name="lang" select="'en'"/>
<xsl:param name="id" select="''"/>
<xsl:param name="sc_item"/>
<xsl:param name="sc_currentitem"/>

<!-- variables -->
<xsl:variable name="home" select="/*/item&#91;@key='content'&#93;/item&#91;@key='home'&#93;" />

<!-- entry point -->
<xsl:template match="*">
  <xsl:apply-templates select="$sc_item" mode="main"/>
</xsl:template>

<!--==============================================================-->
<!-- main                                                         -->
<!--==============================================================-->

<xsl:template match="*" mode="main">
    <xsl:variable name="ids" select="concat(sc:fld('teasers',.),'|')"/>
    <xsl:if test="string-length($ids)>1">
<ul class="teasers">
            <xsl:call-template name="doTeasers">
                <xsl:with-param name="ids" select="$ids"/>
            </xsl:call-template></ul>
</xsl:if>
</xsl:template>

<xsl:template name="doTeasers">
    <xsl:param name="ids"/>
    <xsl:if test="$ids">
        <xsl:variable name="itm_id" select="substring-before($ids, '|')"/>
        <xsl:variable name="itm_rest" select="substring-after($ids, '|')"/>
        <xsl:variable name="is_more" select="boolean(string-length($itm_rest)>0)"/>

        <xsl:if test="$itm_id">
            <xsl:variable name="itm" select="sc:item($itm_id,.)"/>
            <xsl:if test="sc:fld('flash',$itm)=''">
	<li>
                    <xsl:if test="not($is_more)">
                        <xsl:attribute name="class">last</xsl:attribute>
                    </xsl:if>
                    <sc:link select="sc:item(sc:fld('link',$itm,'id'),.)">
                        <sc:image field="image" select="$itm" />
                    </sc:link></li>
</xsl:if>
            <xsl:if test="sc:fld('flash',$itm)!=''">
	<li>
                    <xsl:if test="not($is_more)">
                        <xsl:attribute name="class">last</xsl:attribute>
                    </xsl:if>
                    <script type="text/javascript">
                        doTeaser("<xsl:value-of select="concat('/',sc:GetMediaUrl(sc:item(sc:fld('flash',$itm),.)))" />", <sc:text field="width" select="sc:item(sc:fld('flash',$itm),.)" />, <sc:text field="height" select="sc:item(sc:fld('flash',$itm),.)" />, <sc:text field="version" select="sc:item(sc:fld('flash',$itm),.)" />, 0, 0, "", "<xsl:value-of select="concat('/',sc:fld('image',$itm,'src'))" />", <sc:text field="width" select="sc:item(sc:fld('image',$itm,'mediaid'),.)" />, <sc:text field="height" select="sc:item(sc:fld('image',$itm,'mediaid'),.)" />, "<sc:text field="alt" select="sc:item(sc:fld('image',$itm,'mediaid'),.)" />", "<xsl:value-of select="sc:path(sc:item(sc:fld('link',$itm,'id'),.))" />");
                    </script>
                    <noscript>
                        <sc:link select="sc:item(sc:fld('link',$itm,'id'),.)">
                            <sc:image field="image" select="$itm" />
                        </sc:link>
                    </noscript></li>
</xsl:if>

            <xsl:if test="$is_more">
                <xsl:call-template name="doTeasers">
                    <xsl:with-param name="ids" select="$itm_rest"/>
                </xsl:call-template>
            </xsl:if>

        </xsl:if>
    </xsl:if>
</xsl:template>

</xsl:stylesheet>

This outputs the teasers inside an unordered list, which I’ve styled up using CSS.

Finally, here’s an example showing how to hook up the “linkurl” FlashVars parameter in the Flash movie. On the first frame of the movie, set _global.linkurl like this:

Then, create a button with a hit area the same size as the teaser, and in its onrelease function, call getURL(linkurl) like this:

Hope all that makes sense!