Preload woes

[ShortBus]

I'm building an app based on tuts & hints from GS, snorkl, zync & others and ran into a bit of a snag. I've got 4 swfs ranging from 118-249K and I'd like to load them all before the preloader ends. Having 2 loader instances (one static for initial image, one dynamic for thumb clicks), I can only figure out how to fire the progress handler from the static loader. The static loader function isn't directly an "event" per se, the event is upstream as a mouse click. Is there any way to push them all into browser cache to start with or am I just a lost newb in a sea of code

Any thoughts welcomed

Karl

[Carl]

I'm not really sure I'm understanding this fully.

 

You could create a LoaderMax that would contain all the ImageLoaders for when you click on your thumbs.

This LoaderMax could have it's own "onChildProgress" event.

When ever you load an item from this LoaderMax list/queue you will be able to track the load progress

[ShortBus]

Hi Carl, thanks for the response. I'm sure I don't make much sense, please bear with lingo ignorance.

I'm looking to load all big images to reduce wait time between views. I'd like to get average load time for the project to about 4-6 seconds via typical DSL & have minimal delay between views.

I'm running a class (1st time doing that), working in FlashDevelop (1st there too, dig it) & CS4. Currently have this as my current code:

package  
{
import com.greensock.events.LoaderEvent;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.data.SWFLoaderVars;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.SWFLoader;
import com.greensock.loading.XMLLoader;
import com.greensock.TweenMax;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
/**
 * ...
 * @author Karl Engstrom and tutorials from snorkl & zync
 */
public class pD7main extends Sprite
{
	private var xImgList:XMLList;

	public var thumbHolder:MovieClip;
	public var mainHolder:MovieClip;
	public var circularPreLoader:MovieClip;

	public function pD7main() 
	{
		//Load up the XML
		var xmlLoader:XMLLoader = new XMLLoader("xml/prodImages.xml", { name:"xmlLoader",
																		maxConnections:4} );
		xmlLoader.addEventListener(LoaderEvent.COMPLETE, loadFirst);
		xmlLoader.addEventListener(LoaderEvent.COMPLETE, xmlLoaded);
		xmlLoader.load();
		circularPreLoader.alpha = 0;
	}

	private function progressHandler(event:LoaderEvent):void 
	{
		circularPreLoader.alpha = 1;
		circularPreLoader.scaleX = event.target.progress;
	}

	private function xmlLoaded(e:LoaderEvent):void 
	{
		var xData:XML = e.target.content;
		xImgList = new XMLList(xData.img);

		//Setup a LoaderMax object
		var thumbLoader:LoaderMax = new LoaderMax( { name:"thumbLoader", onComplete:thumbsLoaded } );

		//Setup variables for our ImageLoaderVars
		var nImgWidth:Number = 80;
		var nImgHeight:Number = 80;
		var nMaxCols:Number = 4;
		var colSpace:Number = 5;

		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var iLoad:SWFLoader = new SWFLoader("thumbs/"+xImgList[i].@url, new SWFLoaderVars()
			.name(xImgList[i].@name)
			.width(nImgWidth)
			.height(nImgHeight)
			.container(thumbHolder)
			.x((i % nMaxCols) * (nImgWidth + colSpace))
			.prop("index", i)
			.prop("url", xImgList[i].@url)
			.alpha(0)
			)

			thumbLoader.append(iLoad);
		}

		thumbLoader.load();
		trace("evertything loaded");
		trace("children of XMLLoader " + e.target.getChildren());
		trace("number of children of XMLLoader " + e.target.getChildren().length);
	}

	private function thumbsLoaded(e:LoaderEvent):void 
	{
		//Setup click events for thumbs
		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var cdImg:ContentDisplay = LoaderMax.getContent("p" + (i + 1));
			cdImg.buttonMode = true;

			cdImg.addEventListener(MouseEvent.CLICK, thumbClick);
			TweenMax.to(cdImg, 0.5, { autoAlpha:1, delay: (i * 0.2) } );
	}

}

	private function thumbClick(e:MouseEvent):void 
	{
		var vars:Object = SWFLoader(e.currentTarget.loader).vars;
		checkOldImage(vars.index)
	}

	private function checkOldImage(index:Number):void 
	{
		//Check if theres already an image loaded
		if (mainHolder.numChildren > 1)
		{
			var oldClip:Sprite = Sprite(mainHolder.getChildAt(0));
			TweenMax.to(oldClip, 0.1, {alpha:0.5, onComplete:function() { mainHolder.removeChildAt(0); loadImage(index)} })
		} else
		{
			loadImage(index);
		}
	}

	private function loadFirst(e:LoaderEvent):void 
	{
		//Setup the first image to display in mainHolder
		var firstImgLoader:SWFLoader = new SWFLoader("images/image1.swf", new SWFLoaderVars()
		.scaleX(.25)
		.scaleY(.25)
		.scaleMode("proportionalInside")
		.container(mainHolder)
		.alpha(0)
		.onProgress(progressHandler)
		.onComplete(firstImgLoaded)
		)
		//Add first image to mainHolder
		firstImgLoader.load();
	}

	private function loadImage(index:Number):void 
	{
		//Get filename
		var file:String = xImgList[index].@url;
		//Setup the main image loader
		var mainLoad:SWFLoader = new SWFLoader("images/" + file, new SWFLoaderVars()
		.scaleX(.25)
		.scaleY(.25)
		.scaleMode("proportionalInside")
		.container(mainHolder)
		.alpha(0)
		.onComplete(imageLoaded)
		)
		//Add clicked thumb image to mainHolder
		mainLoad.load();
	}

	private function firstImgLoaded(e:LoaderEvent):void 
	{
		progressBarMC.visible = false;
		var firstImgClip:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
		TweenMax.to(firstImgClip, 0.75, { alpha:1 } );
	}

	private function imageLoaded(e:LoaderEvent):void 
	{
		var imgClip:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
		TweenMax.to(imgClip, 0.75, { alpha:1 } );
	}
}	
}

 

I haven't sat down to rethink what I'm doing with this project. Am I making it more complicated that it needs to be? I feel I probably am as I'm basing much on Zync's tutorial & fudging where I need to... Any help would be greatly appreciated but not to lean on y'all too much, I'd dying to learn!

Thanx

Karl

[Carl]

I don't know exactly what you are asking, that code looks pretty solid. you should feel a great sense of achievement.

 

if you don't want to wait for people to click on the thumbs I suppose when you are parsing all the loaders for the thumbnails you could also generate a LoaderMax of all the large SWFLoaders.

when the thumbs are all loaded tell the large LoaderMax to start loading

 

you use the term image a lot in your comments but it looks like they are all SWFLoaders.

 

  for (var i:int = 0; i          {
           var iLoad:SWFLoader = new SWFLoader("thumbs/"+xImgList[i].@url, new SWFLoaderVars()
           .name(xImgList[i].@name)
           .width(nImgWidth)
           .height(nImgHeight)
           .container(thumbHolder)
           .x((i % nMaxCols) * (nImgWidth + colSpace))
           .prop("index", i)
           .prop("url", xImgList[i].@url)
           .alpha(0)
           )

           thumbLoader.append(iLoad);

//do basically the same as above for the large images or swfs or whatever
//add loaders to an loadermax that is created outside this function




        }

 

 

there's a hundred or so lines of code you are working with. I really can't go through it all and guess about how it should look exactly.

hopefully the general suggestion is enough. again, don't get overwhelmed. if its working as is, you should be very happy with it.

[ShortBus]

Thanks for the props Carl I'm always figuring I'm doing less than...

The project I'm reworking is this http://www.nufriday.com/productDisplay6/productDisplay6.html and although it works, the loading bugs me. That's why I turned to LoaderMax. I think I can do the magnification slicker but that may be a pipe dream. That one has layers of sprites & the mask revealing the "large image based on coords... I worked on that little thing for a month but it was a good "russian baby swimming lesson"

I'm gonna take your suggestion & run as far as I can with it, I do appreciate your time, really

From the back of the ShortBus...

Karl