Ideas on pre-loading a larger swf file

I have a 10mb swf file that takes a long time to load due to the amount of jpg images it has to load (A large image gallery). Just wondering if anyone had any ideas on a non standard pre-loading process that would not take the movie so long to load or possible ways of reducing the file size without using less quality jpg publishing settings or less quality source jpg files either?

Thanks.

10MB swf? Yikes!

You can do a number of things, but none will really make it load faster, that is all determined by the CPU speed and connection speed of the user.

One option is to use a normal preloader and at say 25% loaded, give the user something to do, a little game or something that they play while the rest loads.

Another option is to remove the photos and load them from XML so they aren't in the flash itself. This will greatly reduce the initial load time. You can make an image gallery that preloads each image when it is first called, and there are several examples of this out there.

I am having difficulties trying to implement either of these options with the existing gallery. The images are loaded by their frame location and layer, within a masked animation fade in. So I was thinking to possibly have an image loader in place of the image on the frame where the image exists now and then have the image loaded externally. Problem is I don't know how to do this? Any help would be appreciated.

Take a look at this downloadable gallery, as it has individual image preloaders and explains how to incorporate other things of interest.

While this link will explain about preloading, then moving on while the rest loads (for adding your game to it etc.)

There is no source flash file in that first example??

So I finally found a way to get my images to load externally but I know that there is A LOT Better way to do it but this is the only way I have been able to get it to work for me in my existing gallery...

This is the code I'm using (Large image converted to a movieclip and this is the AS on the first frame of MC)...

the html page just has an <img src=""> tag in it.

Code:

---

//xml stuff
gallery = new XML();
gallery.load("weddings-1.html");
gallery.onLoad = function () {       
        image.text = gallery;
}

---

Using this code I'd have to have about 200 individual html pages, is there any way to reference an individual image from an xml file?

And 2nd question is that the "image" instance is referencing a TextArea Component, I was wondering if there was a way to alpha tween the image after it has been loaded into the TextArea Component?

Just to make sure what you want...

You have ~200 images which you'd like to display 1 at a time via Flash?

Well, this could be done one of three ways:

1) Pure PHP

2) Actionscript
Add controls within the Flash movie to go to the next image, previous image, etc...

3) PHP + FlashVars (Actionscript)
Add a variable within the php page which then gets read in my the flash movie via flashvars and tells the flash movie which node of the XML to load.

Let me know which route you want to take, and I'll code up a quick example for you. :)

The 3rd one sounds like it would be the best solution.

Thanks.

Ok, my example just uses 5 images, but the same logic applies to 200, 300, 500 or how many ever images you have.

So there are 3 parts to this working properly:
1. XML
2. Flash
3. PHP

Pay special attention to the highlighted bits of code. These are the things you'll need to modify for the programming to work. At the end there is a link to see what the end product will look like. I've included a zipped folder with the source code, sample folder structure and example files at the end.

Step 1: Input the XML Data

Code:

---

<?xml version="1.0"?>
<images path='images/'>
        <picture src='1.jpg' title='FROSTY TREES' />
        <picture src='2.jpg' title='GREEN FOREVER' />
        <picture src='3.jpg' title='8 BIT GAMING' />
        <picture src='4.jpg' title='DIGITAL SNOWFLAKE' />
        <picture src='5.jpg' title='FORD GALAXIE' />
</images>

---

This is an example XML file. It's important to keep the same structure, otherwise the Flash won't be able to read it. There are three main parts, the relative/absolute file path, the filename, and the title. The path should be the relative filepath to the folder from the location of the webpage showing the flash. If your image files are in seperate folders, leave it blank and add the full path into the "src" attribute. The "src" attribute refers to the filename. The "title" attribute is optional.


Step 2: Code the Flash

Code:

---

// XML Object
var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function(success) {
        if(success) {
                loadImage();
        }
        else {
                trace ("XML ERROR")
        }
}

// FlashVars
var currentImage = Number(currentImage);

// Load Images
function loadImage() {
        Container._alpha = 0;
        var path:String = xml.firstChild.attributes.path  // Path to the images
        var img:String = path + xml.firstChild.childNodes[currentImage].attributes.src // Path + Image Filename
        var titleText = xml.firstChild.childNodes[currentImage].attributes.title // Image Title
        var mcl:MovieClipLoader = new MovieClipLoader();
        var mclL:Object = new Object();
       
        mcl.addListener(mclL);
        mcl.loadClip (img, Container)
       
        mclL.onLoadProgress = function() {
                preloader.alphaTo(100, .1, "easeOutQuad");
        }
       
        mclL.onLoadInit = function() {
                preloader.alphaTo(0, 1, "easeOutQuad", .5, function() { title_mc.title.text = titleText });
                Container.alphaTo(100, 1, "easeOutQuad", 1 );
        }
}


// Load XML
xml.load("xml/images.xml")

---

I tried to do some basic commenting on this. I used mcTween for the alpha tweens and the MovieClipLoader class to load in the images. The only thing that you might have to change is the filepath to the xml if you choose to put it somewhere else.

Step 3: Pass the variables to Flash through PHP

Code:

---

<?php
$total = 5;
$limit = $total - 1;

$img = $_GET["img"];

if ($img>$limit) {
        $img = $limit;
        $next = $limit + 1;
        $prev = $limit - 1;
}
else {
        $img = $_GET["img"];
        $next = $img + 1;
        $prev = $img - 1;
}

?>

<html><head></head><body >

<div id="links">
<?php        if($prev>=0) { echo "<a href='image.php?img=$prev'>PREVIOUS</a> /"; }  ?>
<?php        if($next<=$limit) { echo "<a href='image.php?img=$next'> NEXT</a>"; }  ?>
</div>

<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="480" height="272" id="Image" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="movie" value="Image.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <param name="FlashVars" value="currentImage=<?php echo $img ?>">
        <embed src="Image.swf" quality="high" bgcolor="#000000" width="480" height="272" name="Image" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

</body>
</html>

---

I've included a previous / next button functionality in the PHP to allow for some navigation. To target specific images you just have to append the url. For example images.php?img=0 will take you to the first image, images.php?img=1 will take you to the second and so on. Since XML is read with the first node being node 0, the counting starts at 0 (it can be tweaked if you really need the counting to start at 1).

The one thing you'll need to modify is the $total variable to equal the total number of images. Otherwise, the flash won't display properly should someone try a url like images.php?img=10000 (i.e. a number greater than the total number of images). With the correct $total value set, if someone tries to point to a URL which speficies a $img number larger than your image library, it'll take them to the last image in your set.

To explain the whole technique of FlashVars, see the text highlighted in red. Bascially, we're taking a variable out from the URL using PHP and then sending that into Flash. Flash then treats it as a regular variable and we can use it to tell Flash which node of the XML to read (i.e. which image to show).

This method should cure your woes as it's only loading in one picture at a time on request. So, if someone doesn't want to look at all 200, they don't have to download them all. Using a databse, this could be turned into a very robust image gallery.

You can see an example of the page here.
You can download all of my source files here.

Is it possible to pass the variables only through flash and xml?

I totally forgot that the image gallery is loaded from within an existing flash page , I don't really want to load a php page instead of just being able to load the swf itself. If that makes sense, unless there is a way to call the php when the swf is loaded.

Sure, that's possible. I didn't realize that you were loading the gallery from within flash. I'll post something soon.

Ok, so I'll save the long explanation this time. If you need further explanation, please ask of course.

I've created three examples, two of which suits your needs more than the other. The 2nd one was just for my own practice.

Example 1. XML Driven Photo Gallery with Controls & Captions
Example 2. XML Driven Photo Gallery with Controls, Captions & Scrolling Thumbnails
Example 3. XML Driven Photo Gallery with Controls & Captions (on a Timer)

All three have the same basic functionality (as shown in example 1) -- a previous button, a next button, and a "jump to" button (which allows you to jump to any image in the XML array; you'll need to input any number less than the total number of images minus 1 and hit the button underneath. In this example, there are 5 images so enter any number between 0 and 4. As mentioned before, if this needs to start at 1 for convienence sake, the code can be tweaked to allow for this).

Of course, since you have hundreds of images, the scrolling thumbnail isn't the best way to go because you'll run into the same sorts of problems as before.

Note: There is one variable in the source code that you should change. It's on the first line of the first frame of the "Actions" layer.

Code:

---

var total:Number = 5 // Insert total number of images here

---

Change the 5 to whatever your total is. If you plan to update the number of images often, this can be done automatically, through AS, i just didn't code it. If you need help with that, let me know.

Edit: I just realized that I didn't put in a check to make sure that when a user enters a number into the jump to box that is larger than the amount of images you have, that it does something productive. It's a simple fix. If you need it, let me know what you would like to happen -- it goes to the last image, the first image, displays a warning, etc...

Thanks Medyman but I figured out a workable option on my own.