Last week, James Ward from Adobe and I delivered the "Developing Rich User Interfaces on Force.com Using Adobe Flex" webinar. For those of you who missed it, the full recording, slides and associated source code demonstrated can be found here. There were a flurry of questions at the end of the webinar and several of them had to do with using the <apex:flash> tag to display Flex-based Flash objects within Visualforce pages. So I thought I'd address some of the common questions around this.

How do I use the tag?

The tag has three required attributes: src, width, and height all of which are strings. The src attribute is the path to your SWF file. SWF files, much like images, are generally uploaded to Force.com as static resources, then referenced within Visualfoce via the {!$Resource.resource_name} expression. See my article from earlier this year for more info on static resources. The height and width are self-explanatory. 

What if my SWF is larger than that 5MB limit for static resources?

First of all, perhaps you can reduce the size of your SWF using the Modules feature of Flex which allows you to break out your code and resources into smaller SWF files that are lazy-loaded. But assuming that still doesn't get you under the 5MB limit, you can always store your SWF files as Documents which don't have the limit. To link to a Document use the following URL: /servlet/servlet.FileDownload—file={!document.id}

How do I pass information from the page to the flex application?

This is the purpose of the flashvars attribute of the Visualforce tag. Whatever you set in that attribute gets appended as a query string to the path the SWF file which is turns makes that data available via Flex's Application.parameters object. Here's an example.

The page:

Then from within the Flex app, you can access the data like this from the main applicatiom MXML:

var sid:String = parameters.sessionId;

var foo:String = parameters.bar;

I get a security warning in IE because of the way the codebase attribute is rendered, what do I do?

I'm currenty looking into this. It appears that when we render the link to the Adobe site for those clients who don't already have flash, we use an http prefix. This would normally be correct but since all sessions with Force.com are over https, the browser gives you a warning about this. Until I figure out how best the <apex:flash> tag should handle this, I will suggest another way to approach this: writing your own Visualforce component. Below is a sample custom component that emits basically the same thing as what the standard tag does except you can customize any aspect of it that you want. Here we provide an attribute for setting the codebase, which you can set the something https-based or really whatever you want.

<apex:component id="flash">

  <apex:attribute name="src" required="true" type="String" description="The path to the movie displayed, expressed as a URL."/>

  <apex:attribute name="width" required="true" type="String" description="The width at which this movie is displayed."/>

  <apex:attribute name="height" required="true" type="String" description="The height at which this movie is displayed."/>

  <apex:attribute name="flashvars" type="String" description="The flashvars attribute can be used to import root level variables to the movie."/>

  <apex:attribute name="codebase" type="String" description="The path to the download url for the flash player"/>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

  id="{!$Component.flash}" width="{!width}" height="{!height}"

  codebase="{!codebase}">

  <param name="movie" value="{!src}" />

  <param name="FlashVars" value="{!flashvars}" />

  <param name="quality" value="high" />

  <param name="bgcolor" value="#869ca7" />

  <param name="allowScriptAccess" value="sameDomain" />

  <embed src="{!src}" FlashVars="{!flashvars}" quality="high" bgcolor="#869ca7"

    width="{!width}" height="{!height}" name="{!$Component.flash}" align="middle"

    play="false"

    loop="false"

    quality="high"

    allowScriptAccess="sameDomain"

    type="application/x-shockwave-flash"

    pluginspage="http://www.adobe.com/go/getflashplayer">

  </embed>

</object>

<script>

var flashObject = (navigator.appName.indexOf ("Microsoft") !=-1)  ? window["{!$Component.flash}"] : document["{!$Component.flash}"];

var flashElement = document.getElementById("{!$Component.flash}");

flashElement.parentNode.flash = flashObject;

</script>

</apex:component>

Hope this points you folks in the right direction. Happy coding!