Best way to “flip through” a series of images(image loaders)

[Nickbee]

I have a prototype working with a timeline of 30 images. Based on the yDelta of your mouse after a mouseDown it gotoAndStops at a certain frame. The onEnterFrame function looks like this…

private function onFrame(evt:Event):void

{

var yDelta:Number = stage.mouseY - initY;

var targetFrame:int = Math.floor(yDelta/1.5);

if(targetFrame > 30)

{

targetFrame = 30;

}

bendLeft_mc.gotoAndStop(targetFrame);

}

 

Because I’m going to have a bunch of these in one swf I’d like to move things off the timeline and load from external images. So my plan is to use LoaderMax and populate an Array with all the loader names(30 images in this case).

So based on an array full of LoaderMax image loader names what would be the best way to flip through them based on the above code?

Thanks!

[GreenSock]

Does this help?:

viewtopic.php?f=1&t=4243&p=16869#p16835

 

There's a FrameSequence class and FLA example that will probably help.

 

Or this?:

viewtopic.php?f=1&t=4226&p=16752#p16752

 

There's also some scrolling code in the slideshow example project at http://www.greensock.com/as/LoaderMax/slideshow.zip

[Nickbee]

Thanks for the reply!

 

The whole point of this test is to try and get my images OFF the timeline.

 

I think I'm close.

 

after my 30 images are loaded I fire this function:

private function completeHandler(evt:LoaderEvent):void 
{
var loader:ImageLoader = LoaderMax.getLoader(_animationLoaderNameArrays[0][0]);

veiwBitmap = new Bitmap();
veiwBitmap = loader.rawContent;

addChild(veiwBitmap);
}

 

then on my enter frame I'm grabbing bitmap data from my loaders and coping it over to my veiwBitmap that is sitting on the stage:

 

private function onFrame(evt:Event):void
	{
		var yDelta:Number = stage.mouseY - initY;
		trace("yDelta is " + yDelta);
		var targetImage:int = Math.floor(yDelta/3);
		if(targetImage > 29)
		{
			targetImage = 29;
		}
		if(targetImage < 0)
		{
			targetImage = 0;
		}

		//test
		trace("targetImage is " + targetImage);
		trace(_animationLoaderNameArrays[0][targetImage])
		var loader:ImageLoader = LoaderMax.getLoader(_animationLoaderNameArrays[0][targetImage]);
		var tempBitmapData:BitmapData = new BitmapData(748, 450);
		tempBitmapData = loader.rawContent.bitmapData;
		veiwBitmap.bitmapData.copyPixels(tempBitmapData, new Rectangle(0, 0, 748, 450), new Point());
	}

 

I'm limiting my range for targetImage between 0 and 29 since there is an array of 30 image loader names I'm referencing.

 

This is working for the most part but it seems to be having a hard time returning to the 0 indexed loader even though the trace(_animationLoaderNameArrays[0][targetImage]) is showing the name that is sitting at the 0 index.

 

Any ideas? Or better way to accomplish this?

 

Thanks!

[GreenSock]

Are you saying that targetImage doesn't return to 0 properly? If so, that's an issue with your math. Tough to say since I don't know what initY is and you didn't post any FLA that could be published (please keep it as simple as possible).

 

I definitely wouldn't recommend structuring things like that where you're doing a copyPixels() on every single frame. That's very wasteful in terms of CPU cycles. It would be much cleaner to just put the images on the stage and toggle their "visible" properties accordingly. Or only copyPixels() when the image changes, but definitely steer clear of doing that on every frame regardless of whether or not it changed. See what I mean?

 

By the way, int() is much faster than Math.floor().

 

Hope that helps.

[Nickbee]

great...

 

I'll try the visible thing.

 

I guess I can just load all the images with their visibility off then just turn them off and on as need be.

 

Thanks!

[GreenSock]

I guess I can just load all the images with their visibility off then just turn them off and on as need be.

Exactly. Have fun.