How to tween between images using a loader?

[tjphilli]

Hey all. I've built a photo gallery to run off of xml, loading the images into a loader object that has been added to the stage. I'm doing so by using a variable currentImg to store the index of the XMLList that should be loaded into the loader. But when the next image is loaded by imcrementing the currentImg variable, & re-loading, it is kind of ugly. There is a flash where the BG is revealed, & then the loader updates. I'm wondering if there's any way to do this more attractively by tweening from one image to the next. I'm not opposed to using other tween classes either. Thank you so much, in advance!

[Aurelien]

Hello,

Here is what I would do to create a fading effect : do not put the loader directly on the display list. Instead, keep a reference of the loaded Bitmap and display that.

This way, while your loader is busy loading the next picture, you can still see the current image. This will enable you to create fade to black or cross-fading effects.

Once your next loading is complete, then of course replace the reference of the old object with the new one. Don't forget to clear all references and event listeners, so it can be properly garbaged.

[Alex Lexcuk]

I am use fl.transitions it's work well


package {
import flash.display.*; import flash.events.*; import flash.ui.*; import flash.text.*;
import flash.net.*; import fl.transitions.*; import fl.transitions.easing.*; import flash.utils.*;
import flash.geom.*;
import fl.controls.*;
import fl.data.*;
import fl.controls.listClasses.*;
public class DocGalery extends MovieClip {
private const php:String = 'return-picture.php';// 'http://www.murmadillo.tut.su/pic/return-picture.php';
private const path:String = 'http://www.murmadillo.tut.su/m/gallery/';
private const noCache:String = '?' + new Date().getTime();
private var urlLoader:URLLoader,
progressBar:ProgressBar,
general:Sprite,
picArr:Array,
loadCount:int,
loader:Loader,
picTransCount:int,//transition count
mcArr:Array,//transition target array
myTimer:Timer,
timerStartTrig:Boolean;

public function DocGalery() {
//stage.scaleMode = StageScaleMode.NO_SCALE;
//stage.align = StageAlign.TOP_LEFT;
addChild(general = new Sprite);
//load name file use php, get file in directory
urlLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE, phpUrlLoaderCompleteHandler);
urlLoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
urlLoader.load(new URLRequest(path + php + '?' + new Date().getTime()));
addChild(progressBar = new ProgressBar);
progressBar.mode = ProgressBarMode.MANUAL;
myTimer = new Timer(5000);
myTimer.addEventListener("timer", timerHandler);
myTimer.stop();
mcArr = [];
}

private function progressHandler(event:ProgressEvent):void {
var fakeProgressCount:Number = 100*event.bytesLoaded/event.bytesTotal;
//trace(" progressHandler loaded: " + event.bytesLoaded + " total: " + event.bytesTotal);
progressBar.setProgress(fakeProgressCount, 100);
//trace("fakeProgressCount" + fakeProgressCount);
}
private function phpUrlLoaderCompleteHandler(event:Event):void {
//trace(new String(urlLoader.data));
var i:int;
var pattern:RegExp = /[\w-]+\.[Jj][Pp][Gg]/;
var result:Object;
var strUnSort:String = new String(urlLoader.data);
var pictureArr:Array = strUnSort.split("|");

//var correctArr:Array = [];
picArr = [];
for (i = 0; i < pictureArr.length - 1; i++) {
result = pattern.exec(pictureArr[i]);
trace(result);
if (result!=null) if (result.toString() == pictureArr[i]) picArr.push(pictureArr[i]);
}
trace(picArr);
//file name - OK start gallery
urlLoader.removeEventListener(Event.COMPLETE, phpUrlLoaderCompleteHandler);

urlLoader.addEventListener(IOErrorEvent.IO_ERROR, imageIoErrorHandler);

urlLoader.load(new URLRequest(path + picArr[loadCount] + noCache));
urlLoader.addEventListener(Event.COMPLETE, imageUrlLoaderCompleteHandler);
//goGalery();
}
private function imageUrlLoaderCompleteHandler(evt:Event):void {
loadCount++;
onward(true);
}
private function imageIoErrorHandler(event:IOErrorEvent):void {
loadCount++;
onward(false);
trace("ioErrorHandler " + event);
}
private function onward(ok:Boolean):void {
if (ok == true) {
loader = new Loader;
loader.loadBytes(urlLoader.data as ByteArray);
loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, loaderPicComplete);
}

if (loadCount < picArr.length) {
urlLoader.load(new URLRequest(path + picArr[loadCount] + noCache));
}
else {
trace("Все загружено");
progressBar.visible = false;
}
}
private function loaderPicComplete(evt:Event):void {
var sp:MovieClip;
var i:int,scale:Number,sh:Shape;
general.addChildAt(sp = new MovieClip,0);
mcArr.push(sp);
sp.addChild(loader);
//если маленькая увеличим
if (sp.width < stage.stageWidth && sp.height < stage.stageHeight) {
for (i = 0; i < 500; i++) {
scale = i / 100;
if (sp.width * scale > stage.stageWidth && sp.height * scale > stage.stageHeight) break;
}
loader.content.scaleX = loader.content.scaleY = scale;
}
else
//если большая уменьшим
{
for (i = 500; i > 0; i--) {
scale = i / 100;
if (sp.width * scale < stage.stageWidth && sp.height * scale < stage.stageHeight) break;
}
loader.content.scaleX = loader.content.scaleY = scale;
}
//центровка
loader.x = (stage.stageWidth - sp.width ) / 2;
loader.y = (stage.stageHeight - sp.height ) / 2;
//белый фон
sp.addChildAt(sh = new Shape, 0);
sh.graphics.beginFill(0xFFFFFF);
sh.graphics.drawRect(-100, 0, stage.stageWidth+100, stage.stageHeight);
if (timerStartTrig == false) {
timerStartTrig = true;
timerHandler();
myTimer.start();
}
}


private function setTransition(_bmArr:Array,_index:int):void {
general.addChild(_bmArr[_index]);
var tMc:MovieClip = _bmArr[_index];
var index6:int = int(_index % 9);
switch (index6) {
case 0: {
TransitionManager.start(tMc,{type:Wipe, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
case 1: {
TransitionManager.start(tMc,{type:Fade, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
case 2: {
TransitionManager.start(tMc,{type:Blinds, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
case 3: {
TransitionManager.start(tMc,{type:Iris, direction:Transition.IN, duration:1, easing:None.easeOut, shape:Iris.CIRCLE});
break;
}
case 4: {
TransitionManager.start(tMc,{type:Squeeze, direction:Transition.IN, duration:1, easing:None.easeIn});
break;
}
case 5: {
TransitionManager.start(tMc,{type:Rotate, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
case 6: {
TransitionManager.start(tMc,{type:Zoom, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
case 7: {
TransitionManager.start(tMc,{type:Iris, direction:Transition.IN, duration:1, easing:None.easeOut,shape:Iris.SQUARE});
break;
}
case 8: {
TransitionManager.start(tMc,{type:Fly, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
default: {
break;
}
}
}
private function timerHandler(event:TimerEvent = null):void {
trace("timerHandler: " + event);
if (picTransCount >= mcArr.length) picTransCount = 0;
setTransition(mcArr, picTransCount);
picTransCount++;
}
}
}
/*
<?php
$dd=opendir(getcwd());
$my_string="";
while (true)
{
$cur=readdir($dd);
if ($cur=="") break;
if ( (strpos($cur,"jpg")==true) or (strpos($cur,"JPG")==true) )
$my_string=$my_string.$cur."|";
}
closedir($dd);
echo $my_string;
?>
*/

http://www.murmadillo.tut.su/m/gallery/GalerySmall.swf

[tjphilli]

Hello,

Here is what I would do to create a fading effect : do not put the loader directly on the display list. Instead, keep a reference of the loaded Bitmap and display that.

This way, while your loader is busy loading the next picture, you can still see the current image. This will enable you to create fade to black or cross-fading effects.

Once your next loading is complete, then of course replace the reference of the old object with the new one. Don't forget to clear all references and event listeners, so it can be properly garbaged.

Thank you very much. But how would I approach doing something like that?

[tjphilli]

Thank you very much. But how would I approach doing something like that?

Ok so I've gotten to the point where I've added my bitmap to the display list, but the only thing i'm struggling with is "fading one out while the other loads". What methodology would you advise that I use?

Thanks!

[Glantucan]

Thank you very much. But how would I approach doing something like that?

The loader class has a public property whi references the root display object of the loaded swf or image. (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Loader.html#content)

inside your class methods you could use:


// In your properties
private var myImageReference:DisplayObject;
//...

//...
//... in your onLoad event handler method:
myImageReference=myLoaderInstance.content;
addChild(myImageReference)
This allows you access the loaded image from everywhere in your class throgh the myImageReference property. Hope this helps

Cheers!

[tjphilli]

Thank you very much. I'm able to load and acess that DisplayObject, but i'm struggling with simultaneously loading a new image and fading the old one. Any ideas? Thx again!

[tjphilli]

The loader class has a public property whi references the root display object of the loaded swf or image. (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Loader.html#content)

inside your class methods you could use:


// In your properties
private var myImageReference:DisplayObject;
//...

//...
//... in your onLoad event handler method:
myImageReference=myLoaderInstance.content;
addChild(myImageReference)
This allows you access the loaded image from everywhere in your class throgh the myImageReference property. Hope this helps

Cheers!

Thank you very much. I'm able to load and acess that DisplayObject, but i'm struggling with simultaneously loading a new image and fading the old one. Any ideas? Thx again!

[Aurelien]

Ok so I've gotten to the point where I've added my bitmap to the display list, but the only thing i'm struggling with is "fading one out while the other loads". What methodology would you advise that I use?
Thanks!

Hello,

Let's say you have two declared Bitmap variables :


var oldBitmap:Bitmap
var newBitmap:Bitmap


Let's also say you don't know how to use a tween engine :


stage.addEventListener( Event.ENTER_FRAME, tweenBitmaps )


Then you have your event listener configured :


loader.contentLoaderInfo.addEventListener( Event.COMPLETE, loadComplete )


And your event handler waiting to switch their references :


function loadComplete( e:Event ):void {
if ( newBitmap != null ) {
oldBitmap = newBitmap
stage.addChild( oldBitmap )
}
newBitmap = Bitmap( loader.content )
newBitmap.alpha = 0
stage.addChild( newBitmap )
}


Finally your enterFrame handler to do the tweening :


function tweenBitmaps( e:Event ):void {
if ( newBitmap != null && newBitmap.alpha < 1 ) { newBitmap.alpha += 0.05 }
if ( oldBitmap != null && oldBitmap.alpha > 0 ) { oldBitmap.alpha -= 0.05 }
}


I personally wouldn't use this method. But this is a good start.
I'd more likely use a tweening engine instead, keep a single reference to the current Bitmap, and use the removeChild() method to remove from the display list once its alpha has been tweened to 0.

[tjphilli]

I personally wouldn't use this method. But this is a good start.
I'd more likely use a tweening engine instead, keep a single reference to the current Bitmap, and use the removeChild() method to remove from the display list once its alpha has been tweened to 0.

Thx so much. I too, actually, would prefer to use a tweening engine for what I am trying to accomplish here, and I was wondering if you could show me some dummy code for the method you were describing, so I could see it in more detail? I'd really appreciate it. thanks again!