Tutorials — How to display SWF, Lock & Load preloaders in your web pages

This tutorial will show you how to display the preloaders generated from SWF, Lock & Load in your HTML web pages.


Export your preloader from SWF, Lock & Load

First, you need to generate your preloader from SWF, Lock & Load. It is highly recommended to output the preloader as a separate SWF file (ie not merged). You can see the following tutorial on how to make your preloader.

Display in your HTML page

At this point you should have your original SWF file that you are wanting to preload, and the preloader SWF file that was generated from SWF, Lock & Load. Both of these files should be in the same folder on your site.

Now to show the preloader, you need to change your HTML code to display the preloader SWF that was generated from SWF, Lock & Load, instead of your original SWF file that you are going to preload. The preloader SWF file will automatically load the target swf file.

Storing your Flash files in a separate folder

If you are storing your Flash files in a separate folder from the HTML page that displays it, you will need to make a minor adjustment to the HTML code so that the Flash files load correctly. Otherwise, you will probably see nothing when you try to view the Flash file. This is due to how the Flash Player resolves relative paths when loading external files. By default it loads relative to the html page that displays the Flash file and not the base swf file which is loading the files.

In order to fix this, you must add the "base" parameter to the <object> and <embed> tags that displays the preloader swf file and set it to "."
This will tell the Flash player to load the files relative to the preloader swf file.

So below is an example with the necesssary changes shown in red. In this examle, we are keeping our flash files in a folder called "FlashFiles".

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240" id="MyMovieName">
<param name="movie" value="FlashFiles/preloader.swf">
<param name="quality" value="high">
<param name="base" value=".">
<embed src="FlashFiles/preloader.swf" quality="high" width="320" height="240" name ="MyMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" base=".">
</embed>
</object>

Vertical Moon Javascript Method

If you use our Vertical Moon Javascript method to display the Flash files as instructed in the Flash ActiveX Microsoft Internet Explorer Fix Tutorial, you will need to modify the javascript call

<script type="text/javascript">
VM_EmbedFlash( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '320', 'height', '240', 'src', 'FlashFiles/preloader.swf', 'quality', 'high', 'name', 'MyMovieName', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'base', '.' );
</script>

Dreamweaver

If you are using Dreamweaver where it uses Javascript to display your Flash files, you will need to modify the javascript call as well. It calls the function AC_FL_RunContent() and would look something similar to the following, where the "base" parameter would again need to be added.

<script type="text/javascript">
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '320', 'height', '240', 'src', FlashFiles/preloader.swf', 'quality', 'high', 'name', 'MyMovieName', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'base', '.' );
</script>