SWF Based Relative URLs in Flash or Flex – taterboy
January 17th, 2009 | Filed under: ActionScript 2, ActionScript 3, Flash, Flash AS2 to AS3, Flex, Tips

When a Flash/Flex app loads into a browser, all urls for the swf are now relative to the file that is hosting the swf and not the location of the swf file itself. This can create issues between testing the swf locally and viewing it on the live site.

Case Study:
When building a demo to display on this blog I have to create one version with relative urls to distribute as source and a separate sample for preview using absolute urls. This is because of the setup of the blog, some files like the index page display from the root of the blog while all the article files have unique urls based on title and date.

In the process of developing web applications your files can be moved from a local dev environment, to a staging environment and then to a final live server. It is efficient to keep all your swfs and external files together, packaged in their own directory. During migration, directory structures of the hosting files may change causing your relative urls to break and your absolute urls to point to the wrong domain.

Solution:
In AS3’s LoaderObject class there is a url property which will display the url of root swf. This is nice to know because now I can place files relative to the swf file and one version will work offline, in the testing environment, one the final server and best of all my blog.

The same property is available in AS2, see below.

How to make your relative urls work based on the swf url:
The “url” property returns the url to the root swf file. This is too much information, but with a little trimming we can get exactly what we need.

AS3 Method:

?View Code ACTIONSCRIPT
var swfURL:String = this.loaderInfo.url;
swfURL = swfURL.substr(0, swfURL.lastIndexOf("/") + 1)
trace(swfURL);

AS2 Method:

?View Code ACTIONSCRIPT
var swfURL:String = this._url;
swfURL = swfURL.substr(0,swfURL.lastIndexOf("/") + 1);
trace(swfURL);

Now add the swfURL variable as a prefix to all your urls like so:
var imgUrl:String = swfURL + “images/image1.jpg”;

Tip:
To get the hosting domain url you can use this (AS2 & AS3):

?View Code ACTIONSCRIPT
var tempDom:Array = swfURL.split("/");
var domURL:String = tempDom.slice(0,3).join("/") + "/";
trace(domURL);

Technorati Tags: , , , , , , ,

Other Related Articles:

|

5 Comments »

  1. Here’s monkey patch to force relative URL’s in Flex

    Although as Josh pointed out in the comments…

    Try out setting base parameter in the embed code to “.”

    This will tell Flash Player to search relative to the SWF rather than to the document URL. More info at TechNote: Flash OBJECT and EMBED tag attributes.

    That said because I was displaying my SWF’s in WordPress and using the WP-SWFObject plugin, I wasn’t able to set this parameter (unless I edited the plugin).

    Anyway you might find some of the stuff useful.

    Comment by Tink — January 18, 2009 @ 1:20 pm

  2. When is this data (loaderInfo) available? I’ve tried to access this property on initialize and creationComplete of my application, but it is null both times. How can I get this value?

    Comment by Eric Belair — January 20, 2009 @ 8:05 am

  3. Try applicationComplete. This event is triggered after all the children and stage is fully loaded and ready to initialize. This will have to fire form the Application tag and not a child component.

    Comment by taterboy — January 20, 2009 @ 8:35 am

  4. many thanks. Script is work

    Comment by Alex — October 30, 2009 @ 3:17 am

  5. This is a grate post for all flash designers..
    this working script is very good…

    Comment by flash designer — June 17, 2010 @ 4:00 am

RSS feed for comments on this post. TrackBack URL

Leave a comment