Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Ideas on pre-loading a larger swf file

  1. #1
    Join Date
    May 2007
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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.

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    May 2007
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.)
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    May 2007
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  7. #7
    Join Date
    May 2007
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Thanks.

  8. #8
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Thumbs up Hope this Helps

    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.
    Last edited by Medyman; 12-25-2007 at 05:43 AM.

  9. #9
    Join Date
    May 2007
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •