animation from photo gallery folder

[Dcoo]

This is a continuation of an older question I had, based on easy infinite scroll part 2 on snorkl.tv

Im trying add my own files with an xml loader and play them back at a high rate giving the pictures an animated look. but so far it will only scroll one picture then resets, any Ideas on what I'm doing wrong would be Would be greatly appreciated 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import com.greensock.TweenMax;
import com.greensock.data.TweenMaxVars;


import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.events.*;


import flash.display.LoaderInfo;
import flash.net.URLLoader;
import flash.net.URLRequest;

LoaderMax.activate([ImageLoader]);


//LoaderMax that will be based upon loaders in the xml
var galleryLoader:LoaderMax;


var queue:XMLLoader = new XMLLoader("http://www.dwcstuff.com/mynameis2_myfile.xml",{name:"xmlDoc",
maxConnections:2,
estimatedBytes:5000,
onComplete:xmlCompleteHandler1
});
queue.load();


function xmlCompleteHandler1(event:LoaderEvent):void
{


buildLoaderMax1();
}


function buildLoaderMax1()
{




galleryLoader = LoaderMax.getLoader("gallery");


galleryLoader.addEventListener(LoaderEvent.COMPLETE, onGalleryLoaded );


galleryLoader.maxConnections = 24;


galleryLoader.addEventListener(LoaderEvent.CHILD_COMPLETE, imageCompleteHandler);
galleryLoader.load();


}






function imageCompleteHandler(event:LoaderEvent):void
{


var loadedImage:ContentDisplay = event.target.content as ContentDisplay;


loadedImage.alpha = 0;


{


TweenLite.to(loadedImage, .25, {alpha:1});
};




galleryArr.push(loadedImage);




}


const PADDING_X:int = 0;
const PADDING_Y:int = 0;


var galleryArr:Array = [];


var parent_mc:Sprite = new Sprite();


addChild(parent_mc);
parent_mc.y = 112;
parent_mc.x = 300;


function onGalleryLoaded(e:Event):void
{


var imageX:int = 0;
var imageY:int = 0;




for each (var image:Sprite in galleryArr)
{


var my_mc:MovieClip = new MovieClip();


my_mc.addChild(image);
var myWidth:Number = galleryArr.length * 400;




parent_mc.addChild(my_mc);


my_mc.width = 400;
my_mc.height = 400;
my_mc.x -= parent_mc.width;
my_mc.y = imageY;




imageX -=  my_mc.width + PADDING_X;
if ( (imageX+my_mc.width) > stage.stageWidth )
{
imageX = parent_mc.width;
imageY = 0;
}
}
}


trace(lastItemX);
var startX:Number = parent_mc.x;
var distanceToScroll:Number = mask_mc.width;
var lastItemX:Number = parent_mc.width;


function scrollIt()
{
TweenMax.to(parent_mc, .5, {x:String(distanceToScroll), onComplete:reset});
}






function reset()
{
//move all clips over to the right


for each (var my_mc in parent_mc)
{


my_mc.x +=  distanceToScroll;
if (my_mc.x >= lastItemX)
{
//this clip is way too far over... send it back
my_mc.x -=  lastItemX;


}
}
//shift the parent so it looks like nothing moved
parent_mc.x = startX;
//scroll it again after 1 second
TweenLite.delayedCall(1, scrollIt);
}


btn.addEventListener(MouseEvent.CLICK, toggleMask);


function toggleMask(e:Event = null):void
{
parent_mc.mask = (parent_mc.mask) ? null : mask_mc;
}


toggleMask();


TweenLite.delayedCall(0, scrollIt);

 

test-fromdwcstuff.fla.zip

[Carl]

Sorry, its very difficult to look at all that code and imagine how it all works together.

If you can create a very simple set of files that we can test I can take a look. 

Typically though, our support is very focused on the GSAP API and this looks like the the problems you are having lie elsewhere.

 

You can zip just the necessary files and attach them to the post.

[Dcoo]

Ok thanks Carl, if you could have a look that would be real nice of you!

[Carl]

The majority of the problems had to do with the fact that you are assigning a bunch of measurement values to things before your images are even loaded.

 

currently at the time this code runs:

trace(lastItemX);

var startX:Number = parent_mc.x;

var distanceToScroll:Number = mask_mc.width;

var lastItemX:Number = parent_mc.width;

 

parent_mc.width = 0 (no images are added to it) so your lastItemX value is 0.

 

----

 

Another big thing was that the code in this for each loop was never runnin:

 

for each (var my_mc in parent_mc)
{

//

//add trace

trace("loop is running")


my_mc.x +=  distanceToScroll;
if (my_mc.x >= lastItemX)
{
//this clip is way too far over... send it back
my_mc.x -=  lastItemX;


}
}

add the trace shown above, you'll see it never fires.

 

I made some minor revisions like making sure the code in the first part of my post didn't run until onGalleryLoaded was loaded and made the loop work.

 

Its closer, but not at all perfect. Unfortunately I spent a good hour looking over this and really can't do much more. I would have to trace out every variable to see where the failure is and probably resize things. Right now your strip of images is 4000 pixels wide and its very difficult to see exactly what is happening at each stage.

 

Try this code, perhaps since you are more familiar with the images and how things should work it will get you closer:

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import com.greensock.TweenMax;
import com.greensock.data.TweenMaxVars;

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.events.*;

import flash.display.LoaderInfo;
import flash.net.URLLoader;
import flash.net.URLRequest;


LoaderMax.activate([ImageLoader]);


var startX:Number;
var distanceToScroll:Number;
var lastItemX:Number;

//LoaderMax that will be based upon loaders in the xml
var galleryLoader:LoaderMax;


	var queue:XMLLoader = new XMLLoader("http://www.dwcstuff.com/mynameis2_myfile.xml",{name:"xmlDoc",
	maxConnections:2,
	estimatedBytes:5000,
	onComplete:xmlCompleteHandler1
	});
	queue.load();


function xmlCompleteHandler1(event:LoaderEvent):void
{

	buildLoaderMax1();
}

function buildLoaderMax1()
{


	galleryLoader = LoaderMax.getLoader("gallery");

	galleryLoader.addEventListener(LoaderEvent.COMPLETE, onGalleryLoaded );

	galleryLoader.maxConnections = 24;

	galleryLoader.addEventListener(LoaderEvent.CHILD_COMPLETE, imageCompleteHandler);
	galleryLoader.load();

}



function imageCompleteHandler(event:LoaderEvent):void
{

	var loadedImage:ContentDisplay = event.target.content as ContentDisplay;

	loadedImage.alpha = 0;

	{

		TweenLite.to(loadedImage, .25, {alpha:1});
	};


	galleryArr.push(loadedImage);


}

const PADDING_X:int = 0;
const PADDING_Y:int = 0;

var galleryArr:Array = [];

var parent_mc:Sprite = new Sprite();

addChild(parent_mc);
parent_mc.y = 112;
parent_mc.x = 300;

function onGalleryLoaded(e:Event):void
{

	var imageX:int = 0;
	var imageY:int = 0;


	for each (var image:Sprite in galleryArr)
	{

		var my_mc:MovieClip = new MovieClip();

		my_mc.addChild(image);
		var myWidth:Number = galleryArr.length * 400;


		parent_mc.addChild(my_mc);
		
		my_mc.width = 400;
		my_mc.height = 400;
		my_mc.x -= parent_mc.width;
		my_mc.y = imageY;


		imageX -=  my_mc.width + PADDING_X;
		if ( (imageX+my_mc.width) > stage.stageWidth )
		{
			imageX = parent_mc.width;
			imageY = 0;
		}
	}
	
	trace(parent_mc.width);
 	startX = parent_mc.x;
 	distanceToScroll = mask_mc.width;
	lastItemX = parent_mc.width;
	scrollIt();
	
}



function scrollIt()
{
	TweenMax.to(parent_mc, .5, {x:String(distanceToScroll), onComplete:reset});
}



function reset()
{
	trace(parent_mc.numChildren);
	//move all clips over to the right

	var num = parent_mc.numChildren;
	for (var i:int = 0; i<num; i++){
	
		var my_mc = parent_mc.getChildAt(i);
		my_mc.x +=  distanceToScroll;
		if (my_mc.x >= lastItemX)
		{
			//this clip is way too far over... send it back
		  my_mc.x =0;

		}
	}
	
	//shift the parent so it looks like nothing moved
	parent_mc.x = startX;
	//scroll it again after 1 second
	TweenLite.delayedCall(1, scrollIt);
}

btn.addEventListener(MouseEvent.CLICK, toggleMask);

function toggleMask(e:Event = null):void
{
	parent_mc.mask = (parent_mc.mask) ? null : mask_mc;
}

toggleMask();

[Dcoo]

Its closer, but not at all perfect. Unfortunately I spent a good hour looking over this and really can't do much more. I would have to trace out every variable to see where the failure is and probably resize things. Right now your strip of images is 4000 pixels wide and its very difficult to see exactly what is happening at each stage.

 

Wow, Carl..that's amazing! THANK YOU SO MUCH! you fine folks at greensock go way, way above and beyond! 

cheers!

Dcoo