Something is going wrong (but I can't say what)

[vyger]

Hi, this post requires attention and patience, so if you're not in the right "mood", please skip it

 

I must load several images:

when an image is fully loaded, using a mask and a tween, I cover the preceding image loaded, so that if I originarily loaded 1.jpg, when the loading of 2.jpg is complete a mask starts covering 1.jpg at the same time and fully showing 2.jpg. When the tween is complete it should be UNLOADED 1.jpg and its container, empty again, should change its index inside the main container (it should get an higher value while waiting for the next image to load).

 

So, I created a container for two MovieClip loaders (they act as image loaders and containers) that in my intentions should, as I said, swap their indexes: the container's name is loaderContainer_mc. Inside this container there are two empty MovieClip loaders, loader0_mc and loader1_mc.

 

The following is all the code: very few lines, but I don't undestand what's going on because for some reason I can't get this simple test working.

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import com.greensock.easing.Back;
import flash.events.MouseEvent;
//
var images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
//
var counter = 1;
var currentLoaderNum = 1;
[b]// when you press the button a new image should be loaded[/b]
btn.addEventListener(MouseEvent.MOUSE_DOWN,LOAD);
var queue;
//;
function LOAD(e:MouseEvent)
{
       // 
loadTester(images[counter],currentLoaderNum, "loader"+currentLoaderNum);
counter++;
}
//
loadTester(images[0],currentLoaderNum, "loader"+currentLoaderNum);
//
function loadTester(imagePath, currentLoaderNum, loaderName)
{
trace("currentLoaderNum:"+ currentLoaderNum);
trace("loader: "+loaderName);
trace("mc loader: "+"loader"+currentLoaderNum+"_mc");
//
queue = new LoaderMax({name:"q",onProgress:progressHandler,onComplete:completeHandler,onError:errorHandler});
queue.append( new ImageLoader(imagePath, {name:loaderName, container:loaderContainer_mc.getChildByName("loader"+currentLoaderNum+"_mc")}) );
queue.load();
}

function progressHandler(event:LoaderEvent):void
{
//trace("progress: " + event.target.progress);
}

function completeHandler(event:LoaderEvent):void
{
trace("loader0_mc width: "+loaderContainer_mc.getChildByName("loader0_mc").width+"***");
trace("loader1_mc width: "+loaderContainer_mc.getChildByName("loader1_mc").width+"***");
trace("loader0_mc index: "+loaderContainer_mc.getChildIndex(loaderContainer_mc.getChildByName("loader0_mc"))+"***");
trace("loader1_mc index: "+loaderContainer_mc.getChildIndex(loaderContainer_mc.getChildByName("loader1_mc"))+"***");
//
var image:ContentDisplay = LoaderMax.getContent("loader" + currentLoaderNum);
//
image.mask = mask2_mc;
//
TweenLite.to(mask2_mc, 3, {height:375, ease:Back.easeOut});
trace(event.target + " loaded");
// the mask is reduced
mask2_mc.height = 1;
// 
var num = currentLoaderNum == 0 ? 1:0;
currentLoaderNum = num;
//
if (loaderContainer_mc.getChildByName("loader" + num + "_mc").width > 0)
{
	LoaderMax.getLoader("loader" + (num)).unload();
	trace(LoaderMax.getLoader("loader" + (num)));
}

var temp = loaderContainer_mc.getChildByName("loader" + currentLoaderNum + "_mc");
//
loaderContainer_mc.setChildIndex(temp,loaderContainer_mc.numChildren-1);
//
trace("loader0_mc index: "+loaderContainer_mc.getChildIndex(loaderContainer_mc.getChildByName("loader0_mc"))+"***");
trace("loader1_mc index: "+loaderContainer_mc.getChildIndex(loaderContainer_mc.getChildByName("loader1_mc"))+"***");
trace("__________________________________________________________________");
}

function errorHandler(event:LoaderEvent):void
{
trace("error occured with " + event.target + ": " + event.text);
}

 

What happens: this code:

1. doesn't unload the previous image when the tween on the most recent ends;

2. doesn't show the previous image while the tween is executing;

 

What am I doing wrong?

To facilitate you, I post a temporary link to a folder with the code (images and library are provided):

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B1EWtqLO5hiWNDE4NDg4ZmEtMWI4Yy00NDY2LTkwMTktMTkxMWVhNTkzNWY2&hl=en_US

(you'll find a list of files: from the upper left menu click File > Download original to get the zip).

 

Thanks in advance.

 

EDIT: I found I can load any image I want in a single clip: this way problem 2 would be solved. It'd remain problem 1: if I load multiple images inside the same movieclip, how do I delete them? I tried unload and dispose but they seem to unload anything contained in the movieclip. This one is working:

 

if (myclip.numChildren > 2)
{
	trace(myclip.getChildAt(0).name);
	myclip.removeChild(myclip.getChildAt(0));
}

 

but is there any LoaderMax-way to perform this action?

[GreenSock]

There were a few problems with your code. You were unloading the previous loader too soon (as soon as the new one finished loading) and...I can't remember the other stuff, but I tweaked your code and here's what it should look like:

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import com.greensock.easing.Back;
import flash.events.MouseEvent;
import flash.display.MovieClip;

var images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];

var counter:int = 1;
var currentLoaderNum:int = 1;
btn.addEventListener(MouseEvent.MOUSE_DOWN, LOAD);
var loader:ImageLoader;

function LOAD(e:MouseEvent) {
loadTester(images[counter], currentLoaderNum, "loader"+currentLoaderNum);
counter = (counter + 1) % images.length;
}

loadTester(images[0], currentLoaderNum, "loader"+currentLoaderNum);

function loadTester(imagePath, currentLoaderNum, loaderName) {
loader = LoaderMax.getLoader(loaderName);
if (loader != null) {
	loader.dispose(true);
}

loader = new ImageLoader(imagePath, {name:loaderName, container:loaderContainer_mc.getChildByName("loader"+currentLoaderNum+"_mc"), onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler});
loader.load();
}

function progressHandler(event:LoaderEvent):void {
//trace("progress: " + event.target.progress);
}

function completeHandler(event:LoaderEvent):void {
var container:DisplayObject = loaderContainer_mc.getChildByName("loader" + currentLoaderNum + "_mc");
var oldLoaderNum:int = (currentLoaderNum == 0) ? 1 : 0;
var oldContainer:DisplayObject = loaderContainer_mc.getChildByName("loader" + oldLoaderNum + "_mc");

container.mask = mask2_mc;

mask2_mc.height = 1;
TweenLite.to(mask2_mc, 3, {height:370, ease:Back.easeOut});
trace(event.target + " loaded");

loaderContainer_mc.setChildIndex(container, loaderContainer_mc.numChildren - 1); 

currentLoaderNum = (currentLoaderNum == 0) ? 1 : 0;
}

function errorHandler(event:LoaderEvent):void {
trace("error occured with " + event.target + ": " + event.text);
}

 

If I were building this from the ground up, I'd probably structure things a bit differently to make it more flexible and streamlined, but it works Like probably wouldn't use containers and a single mask because what if the user clicks very fast and more than one image is in the process of transitioning in? I'd create a distinct mask for each image and then dump it once the image is finished transitioning. Anyway, I hope this helps.

[Carl]

darn, greensock beat me to the punch.

 

I took a stab at this as well, but didn't have time to post before going to dinner.

 

here's what I did:

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import com.greensock.easing.Back;
import flash.events.MouseEvent;
import flash.display.MovieClip;

//
var images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
//
var counter = -1;

var loaderContainer_mc:MovieClip = new MovieClip();
addChild(loaderContainer_mc);
addChild(btn);

btn.addEventListener(MouseEvent.MOUSE_DOWN,LOAD);



//;
function LOAD(e:MouseEvent)
{
loadTester();

}
//
loadTester();

//
function loadTester()
{
counter++;

var img:ImageLoader = new ImageLoader(images[counter], {name:"loader" + counter, onComplete:completeHandler})
img.load()



}

function progressHandler(event:LoaderEvent):void
{
//trace("progress: " + event.target.progress);
}

function completeHandler(event:LoaderEvent):void
{
var thisContent:ContentDisplay = event.target.content


	loaderContainer_mc.addChild(thisContent);
	//reset mask height
	mask2_mc.height = 0;

	//apply mask to new content
	thisContent.mask = mask2_mc;

	//tween the mask
	TweenLite.to(mask2_mc, 1, {height:370, onComplete:removePrevious});

}

function removePrevious(){
if(counter  > 0){
	trace("remove previous");



	LoaderMax.getLoader("loader"+(counter-1)).dispose(true);

	//this trace proves there is always just 1 ContentDisplay in loaderContainer_mc
	trace("loaderContainer only has " + loaderContainer_mc.numChildren + " child");

	}else{
		trace("nothing to remove, you've only loaded the first image");
		}
}

function errorHandler(event:LoaderEvent):void
{
trace("error occured with " + event.target + ": " + event.text);
}

 

 

zip attached. note I removed the loaderContainer_mc and its children from the fla stage.

 

I didn't consider how it would hold up to a quick-click-load situation as greensock had pointed out. perhaps you can pick up a tip or two from each of our approaches. (his is probably better)

[vyger]

If I were building this from the ground up, I'd probably structure things a bit differently to make it more flexible and streamlined, but it works Like probably wouldn't use containers and a single mask because what if the user clicks very fast and more than one image is in the process of transitioning in? I'd create a distinct mask for each image and then dump it once the image is finished transitioning. Anyway, I hope this helps.

 

 

 

First of all, thanks for your patience and code. I'm the "data guy", so I don't generally feel very comfortable with masks and graphics.

Anyway, in my case the "very fast click" is disabled: when a user clicks a menu item, all the menu is disabled until the image gets totally loaded. The website has many different menus and every menu behaves this way.

[vyger]

 

 

zip attached. note I removed the loaderContainer_mc and its children from the fla stage.

 

I didn't consider how it would hold up to a quick-click-load situation as greensock had pointed out. perhaps you can pick up a tip or two from each of our approaches. (his is probably better)

 

 

 

Hi Carl, thanks very much for taking the time to test, modify the sample and reply. I'm playing with it and it works like a charm.