When building html related projects, you accustomed yourself with the fact that you need to think about your deployment environment. You’ll need to make sure you use relative linking so your new and shiny site also works after putting it on a remote server e.g.

This also applies to developing flash related projects. Especially when you find yourself using multiple swf’s which are loaded inside a preloader for example.

For example, i am currently using a deliverable directory structure like below:

You can see i am giving every app used in the site it’s own main directory inside my ’swf’ directory. The ‘index.swf’ file is my preloader, which loads the ‘lib.swf’ by using loadMovie():

loadMovie("_assets/lib.swf", _root);

Yup, this will work. The ‘index.swf will go the the ‘_assets’ dir and load ‘lib.swf’.

The Problem
Well the problem I came across, is that it’s impossible to predict which html file in the site will be using the swf file…. let me explain.

The Cause
A swf always needs a html file to house it. In smaller projects, you will probably use a simple html file with the swf tags in it, only for the sake of serving the swf. Let’s say you called it ‘index.html’ and resides in the same directory as your main swf. Nothing will change with the example above. Everything will still work fine.

But what happens if you decide you want to use the ‘index.swf’ inside another html, which is located in a completely different folder of your wwwroot folder? You will use your normal flash html tags, and let it point to the correct directory and the correct ‘index.swf’ file.

And this is where the trouble is. When using a loadMovie like above, the relative path is completely scr*wed. The ‘index.swf’ will now try to load the ‘_assets/lib.swf’ but cannot find it because it will try to load relative to the html file which contains it……The html is the boss in this case and you are suddenly stuck with a non-working flashApp. Bummer huh.

The Solutions
There are solutions for this problem though. The first is to use absolute url’s in the loadMovie commands e.g.:

loadMovie("http://www.myurl.com/swf/myApp/_assets/lib.swf", _root);

This will work if your site is not too dynamic and you are not using too many different swf’s. The downpart of this solution is, that you need to know in advance where your swf will go and that it’s impossible to move if after it has been deployed.

The second and better solution is to use a handy dandy feature of the flash player.

Although the html is indeed defining the relative paths, flash still keeps it’s actual url stored inside in the ‘_url’ property of your main swf. You can use this to calculate the absolute url dynamically at runtime. All you need to do is use some AS magic :)

	public function getAbsoluteUrl(urlInput:String):String {
		var strResult:String = "";
		if(urlInput.indexOf("http://") > -1) //only convert when online
		{
			if(urlInput.indexOf(".swf") > -1) // only convert when an actual .swf file is used
			{
				strResult = urlInput.substring(0, urlInput.lastIndexOf("/")+1); // find absolut path minus filename of .swf
			}
		}
		return strResult;
	}

What this function example does, is take the absolute ‘_url’ property of the used index.swf and returns the path (without the actual ‘index.swf’). You can use the result to use the loadMovie command with absolute url’s without it’s downsides:

loadMovie(getAbsoluteUrl(_root._url) + "_assets/lib.swf");

Great, another problem solved. Up to the next one!

I am curious about any stories you might have about getting into trouble when you moved your app/movie from development environment to deployment environment. So if you have any good ones, be sure to share :)

Always open for better solutions as the one I described above, I’m learning as i go too!