How to view source for an embedded SWF hosted on a different domain

This is second in a series of blogs that attempt to capture all the aspects of making a good blog even better. The first one covered how to Add SWFs to your blogger posts.

Today we will cover how to allow the SWFs in your blog to provide the users with the option to with the source. You can start by following the instructions provided here, in order to make sure that when users right-click on a SWF file, they would see the "View Source" option.

But this brings up a new challenge if your SWF file itself is embedded in the blog but is actually hosted elsewhere because right-clicking and selecting "view source" results in a URL which is broken because it is generated relative to the blog (http://www.blog.com/article/srcview/index.html) ... instead of the hosting webspace url (https://some.website.com/hosting/srcview/index.html).

1. You might notice that when you use Flash Builder to publish the code, it adds the viewSourceURL property to your main application file. What you need to do in addition to that is:
   
   1. Leave the original property in place because setting it later for the first time in an event handler, such as the one for applicationComplete, does not add it to the context-menu so one must still have the original attribute/propety in the application tag.
   2. Set the viewSourceURL again in a handler for the applicationComplete event so that the value is updated correctly.
   3. Build the host URL as shown here in the handler when updating the viewSourceURL value.

   <s:Application
                  ...
                  viewSourceURL="srcview/index.html"
                  applicationComplete="applicationCompleteHandler(event)"
                  >
       <fx:Script>
           <![CDATA[
               protected function applicationCompleteHandler(event:FlexEvent):void
               {
                   var swfURL:String = FlexGlobals.topLevelApplication.loaderInfo.url;
                   swfURL = swfURL.substr(0, swfURL.lastIndexOf("/") + 1)
                   var tempDom:Array = swfURL.split("/");
                   var domURL:String = tempDom.slice(0,3).join("/") + "/";
                   viewSourceURL = domURL+ "srcview/index.html";
               }
           ]]>
       </fx:Script>
       ...
   </s:Application>

2. A workaround is to use the <iframe/> tag instead of <embed/> tag because that way the url generated to "view source" will be relative to the hosting website and not the embedding website.
   
3. Also there is some speculation that if one uses swfobject instead of the embed tag. This blog seems to have a non-standard URL specified for the source versus the SWF but it is relative and not absolute, so again it may or may not work for absolute URLs. Following this example, it could probably be accomplished like so:
   

   var flashvars = {};
   flashvars.srcUrl = "https://some.website.com/hosting/srcview/index.html";
   ...
   swfobject.embedSWF(arg1,arg2,arg3,arg4,arg5,arg6,flashvars,arg8,arg9);

As a side-note here's an article that makes a very convincing argument for using SWF Object 2.

Adding SWFs to your blogger posts

1) Find a location to host your swf files.
For example, you can log into Google Sites and host your content by uploading the swf files as attachments:
http://sites.google.com/site/yourUsernameGoesHere/system/app/pages/admin/attachments

2) Make sure to upload the following swf files in addition to your main swf file.

2.1) spark_4.0.0.14159.swf
2.2) textLayout_1.0.0.595.swf
2.3) rpc_4.0.0.14159.swf
2.4) sparkskins_4.0.0.14159.swf
2.5) framework_4.0.0.14159.swf
2.6) playerProductInstall.swf
2.7) osmf_flex.4.0.0.13495.swf

These are dependencies without which you will face various errors when trying to run your main swf file.

a) Error: Error #2030: End of file was encountered.
at flash.net::URLStream/readBytes()
at flash.net::URLLoader/onComplete()

b) Error #2048: Security sandbox violation: http://...-s-sites.googlegroups.com/site/usernam/blah.swf?attachauth=...&attredirects=0 cannot load data from http://sites.google.com/site/username/some_missing_dependency.swf

3) Afterwards, get the link to your swf and to embed it in your blog as outlined here.

4) After embedding the SWFs in your blog, you may feel that your posts load significantly slower that they did before. You can remedy this situation and speed-up the load times if you place a div tag around your embedded tags and have the default mode set to be collapsed. This will give your readers the option of expanding the content and causing the flash player to load the swf files on demand.

Here's an example of all the code that I had to put into this post.

<style type="text/css">
  .commenthidden {display:none}
  .commentshown {display:inline}
</style>
<script type="text/Javascript">
  function togglecomments (postid)
  {
    var whichpost = document.getElementById(postid);
    if (whichpost.className=="commentshown")
    {
      whichpost.className="commenthidden";
    }
    else
    {
      whichpost.className="commentshown";
    }
  }
</script>

<a href="javascript:togglecomments('1')">Expand/Collapse Example</a>
<div class="commenthidden" id="1">

<embed src="http://sites.google.com/site/pulkitsinghal/Bounds1.swf" quality="high" bgcolor="#869ca7" width="650" height="100" name="Main" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>

</div>

To get the following to work as I described above: Expand/Collapse Example