[HELP] Fading Between 3 Images (Nearly Works!)

[BENBOB]

Hi,

 

I have a FLA doc which features a 'shuffle effect' between two images assigned in an external XML file. However, I would like to modify the code so that it just has a simple fading effect but between three images (tho needs to be easy to add more in future).

 

My ActionScript knowledge is kinda lacking but I had a go at modifying some of the code. To my surprise it actually nearly works! It just messes up the first time it runs and skips one of the images, but after that works perfectly. So I guess its just missing an initial condition statement? Heres the code Ive got so far:

 

 

/////////////////////////////////////////Shuffle Effect////////////////////////////////
function Shuffle():void
{
var anotherTimer:Timer= new Timer(5000);
anotherTimer.addEventListener(TimerEvent.TIMER, changeAnotherPic)
anotherTimer.start();
}
function changeAnotherPic(e:TimerEvent)
{
var pic1 = another_group.getChildAt(another_group.numChildren-1);
var pic2 = another_group.getChildAt(another_group.numChildren-2);
TweenMax.to(pic1,0.5,{alpha:1,onComplete:resetImg1,onCompleteParams:[pic1]});
TweenMax.to(pic2,0.5,{alpha:0,onComplete:resetImg2,onCompleteParams:[pic2]});
}
function resetImg1(img:MovieClip)
{
another_group.setChildIndex(img,0);
TweenMax.to(img,0.5,{alpha:0,onCompleteParams:[img]});
}
function resetImg2(img:MovieClip)
{
another_group.setChildIndex(img,another_group.numChildren-1);
TweenMax.to(img,0.5,{alpha:1});
}

function txt_Click(e:MouseEvent):void{
var txt_name = e.currentTarget.name;
if(txt_name == "txt_girl")
	navigateToURL(new URLRequest(XMLList4.forHerTEXT.link),"_self");
else
	navigateToURL(new URLRequest(XMLList4.forHimTEXT.link),"_self");
}
///////////////////////////////////////////////////////////////////////////////////////

 

Please help!

Thanks, Ben.

[GreenSock]

It's tough to say for sure without seeing how things are structured in your file(s), but I'll take a shot in the dark here...maybe just change the changeAnotherPic()method to:

 

function changeAnotherPic(e:TimerEvent) {
  var pic1 = another_group.getChildAt(another_group.numChildren-1);
  var pic2 = another_group.getChildAt(another_group.numChildren-2);
  TweenMax.to(pic1, 0.5, {alpha:0, onComplete:another_group.setChildIndex, onCompleteParams:[0]});
  TweenMax.to(pic2, 0.5, {alpha:1, onComplete:another_group.setChildIndex, onCompleteParams:[another_group.numChildren - 1]});
}

 

(and you can delete the resetImg1() and resetImg2() methods altogether)

 

I'd actually recommend going back to the original author and asking him/her about how to edit their files most effectively.

[BENBOB]

Thanks for the reply Jack. I tried your suggestion but unfortunately it still didnt work correctly - it just faded once through two images simultaneously then stopped.

 

Since its so close to working with my modified code (it just messes up the first time it runs) I think its probably just missing something to set up the initial state??

 

In case the original code is putting people off, to explain it more clearly, all I want to do is simply fade between three images, referenced from an external xml file. For example: Display Image 1 for 5 seconds -> Fade to Image 2 -> Display Image 2 for 5 seconds -> Fade to Image 3 -> Display Image 3 for 5 seconds -> Fade to Image 1 and repeat indefinitely. Compared to the examples of what Greensock can do I would have thought this would be fairly simple! lol

 

Anyone got any thoughts?

[Carl]

i have an approach which is bit different then the code in your FLA but it is much more flexible and will crossfade between 100s of images if necessary.

 

the code looks like this:

 

import com.greensock.*;

//list all the images you want to fade in sequence here
var mcs:Array=[mc1,mc2,mc3];

//set all their alpha's to 0
TweenMax.allTo(mcs, 0, {alpha:0});




function showImage(index:Number):void {
var mc:MovieClip=mcs[index];
mc.alpha=0;
addChild(mc);
TweenLite.to(mc, 1, {alpha:1, onComplete:getNextImage, onCompleteParams : [index]});
}


function getNextImage(index:Number):void {
if (index		index++;
} else {
	index=0;
}
       //wait 2 seconds before telling the next image to fade in
TweenLite.delayedCall(2, showImage, [index]);
}

showImage(0);

 

first image fades in, then second image fades in on top of it, then third image fades in on top of 2...

 

attached is a sample fla

 

 

--------

 

if a cross fade isn't important, meaning an image fades completely out BEFORE the next image fades in like:

 

image 1 fades in > image 1 fades out and then

image 2 fades in > image 2 fades out and then

image 3 fades in > image 3 fades out etc...

 

that can be done in very little code with

 

import com.greensock.*;

var mcs:Array=[mc1,mc2,mc3];
TweenMax.allTo(mcs, 0, {alpha:0});

var tl:TimelineMax=new TimelineMax({repeat:-1});

tl.appendMultiple(TweenMax.allTo(mcs, 1, {alpha:1, repeat:1, repeatDelay:5, yoyo:true}, 7));

[BENBOB]

Thanks for the help Carl. In the end I had a bit of brainwave and modified the original code and added an if statement to determine what happened the first time it runs, and now seems to work fine

 

Btw I checked out your website and subscribed to you on YouTube. Some interesting effects I might have to try out sometime

 

Bit offtopic but does anyone happen to know if theres a similar type plugin for Adobe After Effects? Id like to try out all these super smooth bouncing type animations in there too!

[Carl]

hey benbob, thanks for checking out snorkl.tv and subscribing to youtube channel. dig your video game mashups

 

unfortunately I don't know anything about after effects:(

[swagger]

@ benebob

 

Hey man I use easenwizz for my tweening in after effects. its an expression library. check it out!