Groups | Blog | Home
all groups > flash actionscript > january 2006 >

flash actionscript : Cross Fade Images



alfonce
1/29/2006 3:36:44 PM
Hi this code I am trying to develop to cross fade 13 movie clip images in a
continuous loop.

The image movie clips all sit on the time line in their own layers in frame
one.
In frame one I have an action layer with the following code. Note I have only
gone as far as image 2 as my method aint working.

stop();
this.banner_clip_1._alpha = "100";
this.banner_clip_2._alpha = "0";
this.banner_clip_3._alpha = "0";
this.banner_clip_4._alpha = "0";
this.banner_clip_5._alpha = "0";
this.banner_clip_6._alpha = "0";
this.banner_clip_7._alpha = "0";
this.banner_clip_8._alpha = "0";
this.banner_clip_9._alpha = "0";
this.banner_clip_10._alpha = "0";
this.banner_clip_11._alpha = "0";
this.banner_clip_12._alpha = "0";
this.banner_clip_13._alpha = "0";

var speed = 1;

banner_clip_1.onEnterFrame = function() {
if (this._alpha>0) {
this._alpha -= this._parent.speed;
}
}

banner_clip_2.onEnterFrame = function() {
if (this.banner_clip_1._alpha<=99) {
this._alpha += this._parent.speed;
}
else if (this._alpha=100) {
this._alpha -= this._parent.speed;
}
}

banner_clip_3.onEnterFrame = function() {
if (this.banner_clip_2._alpha<=99) {
this._alpha += this._parent.speed;
}
else if (this._alpha=100) {
this._alpha -= this._parent.speed;
}
}

You can see that I am begining with one image at 100 alpha and then fading
this and as I hit 99 the next images is told to start fading in - so far so
good this bit works. However everything just halts on the second image?? What
should happen is that when the second image realises it is 100 it also starts
to fade and in turn the next images sees that its previous image has hit 99 and
so it starts to fade in.

Also, when it all gets to image 13, how then can the whole thing loop back so
that image 1 fades in over image 13?

Help appreciated,

Ta,

Alex.


kglad
1/29/2006 3:57:58 PM
alfonce
1/29/2006 4:18:53 PM
Hi kglad and thanks,

well I am presuming that the variable

var speed = 1;

Sets my speed.

But the method stops at clip2 and the fade from clip 1 to clip 2 has a glitch
at the end once I added in this bit

else if (this._alpha=100) {
this._alpha -= this._parent.speed;

which doesnt work anyway and so is probably messing with the prior fade.

Any ideas how I can tweak my method - I am pretty poor at action script.

Ta

Alex
kglad
1/29/2006 6:37:53 PM
are the movieclips "supposed" to fade at different speeds? ie, is there some
reason you're using this._parent.speed instead of _root.speed or some other
variable that's identical for all your movieclips?
alfonce
1/29/2006 6:51:19 PM
Hi,

yeah all these mentioned movies are supposed to cross fade fairly slowly and
smoothly.
I saw the speed variable in some other code and thought it would be a good way
to control the speed of the fades - but all fades should be the same speed.

Basically one mc fades in slowly while another fades out untill all 13 have
been gone through and the the first one needs to fade back in over the last one
in order to create the loop. Speed isnt an issue as long as its fairly slow -
it's the fade and loop functionality that the quandry.


Any ideas?

Thanks a lot,

Alex.
kglad
1/29/2006 7:01:03 PM
mctoFade = 1;
fadeI = setInterval(fadeF, 50);
function fadeF() {
if (mctoFade<13) {
nexttoFade = mctoFade+1;
} else {
nexttoFade = 1;
}
this._alpha -= speed;
this._alpha += speed;
if (this._alpha<=0) {
this._alpha = 0;
this._alpha = 100;
mctoFade = nexttoFade;
}
updateAfterEvent();
}
alfonce
1/29/2006 7:33:44 PM
Hi and thanks,

hmm dont mean to seem dim but I dont have a clue how to implement that code.
I have dumped mt code from the frame and placed yours instead - is there other
things I need to do in order to get this working?
I havent renamed anything.

mctoFade = 1;
fadeI = setInterval(fadeF, 50);
function fadeF() {
if (mctoFade<13) {
nexttoFade = mctoFade+1;
} else {
nexttoFade = 1;
}
this._alpha -= speed;
this._alpha += speed;
if (this._alpha<=0) {
this._alpha = 0;
this._alpha = 100;
mctoFade = nexttoFade;
}
updateAfterEvent();
}

Is exactly what i used.

Ta

Alex
kglad
1/29/2006 9:36:04 PM
just your initialization statements:

stop();
this.banner_clip_1._alpha = "100";
this.banner_clip_2._alpha = "0";
this.banner_clip_3._alpha = "0";
this.banner_clip_4._alpha = "0";
this.banner_clip_5._alpha = "0";
this.banner_clip_6._alpha = "0";
this.banner_clip_7._alpha = "0";
this.banner_clip_8._alpha = "0";
this.banner_clip_9._alpha = "0";
this.banner_clip_10._alpha = "0";
this.banner_clip_11._alpha = "0";
this.banner_clip_12._alpha = "0";
this.banner_clip_13._alpha = "0";

var speed = 1;

mctoFade = 1;
fadeI = setInterval(fadeF, 50);
function fadeF() {
if (mctoFade<13) {
nexttoFade = mctoFade+1;
} else {
nexttoFade = 1;
}
this._alpha -= speed;
this._alpha += speed;
if (this._alpha<=0) {
this._alpha = 0;
this._alpha = 100;
mctoFade = nexttoFade;
}
updateAfterEvent();
}
alfonce
1/30/2006 12:00:00 AM
Hi and thanks again.

I have used this code in my frame bu an odd thing has occoured.

stop();
this.banner_clip_1._alpha = "100";
this.banner_clip_2._alpha = "0";
this.banner_clip_3._alpha = "0";
this.banner_clip_4._alpha = "0";
this.banner_clip_5._alpha = "0";
this.banner_clip_6._alpha = "0";
this.banner_clip_7._alpha = "0";
this.banner_clip_8._alpha = "0";
this.banner_clip_9._alpha = "0";
this.banner_clip_10._alpha = "0";
this.banner_clip_11._alpha = "0";
this.banner_clip_12._alpha = "0";
this.banner_clip_13._alpha = "0";

var speed = 1;

mctoFade = 1;
fadeI = setInterval(fadeF, 50);
function fadeF() {
if (mctoFade<13) {
nexttoFade = mctoFade+1;
} else {
nexttoFade = 1;
}
this._alpha -= speed;
this._alpha += speed;
if (this._alpha<=0) {
this._alpha = 0;
this._alpha = 100;
mctoFade = nexttoFade;
}
updateAfterEvent();
}


if you go here you will see the strange result - a red screen?

http://www.mediaminx.com/test/bannersa.html

If you go here you will find the fla that I am working on

http://www.mediaminx.com/test/banner_sa.fla

ANy ideas why it just shows redscreen and not the fading images?

Thanks a lot,

Alex.
kglad
1/30/2006 3:32:47 PM
"this" was undefined in fadeF(). change the code to the following (and you
have no banner_clip_1):

stop();
this.banner_clip_1._alpha = "100";
this.banner_clip_2._alpha = "0";
this.banner_clip_3._alpha = "0";
this.banner_clip_4._alpha = "0";
this.banner_clip_5._alpha = "0";
this.banner_clip_6._alpha = "0";
this.banner_clip_7._alpha = "0";
this.banner_clip_8._alpha = "0";
this.banner_clip_9._alpha = "0";
this.banner_clip_10._alpha = "0";
this.banner_clip_11._alpha = "0";
this.banner_clip_12._alpha = "0";
this.banner_clip_13._alpha = "0";
var speed = 1;
mctoFade = 1;
fadeI = setInterval(fadeF, 50);
thisMC = this;
function fadeF() {
if (mctoFade<13) {
nexttoFade = mctoFade+1;
} else {
nexttoFade = 1;
}
thisMC._alpha -= speed;
thisMC._alpha += speed;
if (thisMC._alpha<=0) {
thisMC._alpha = 0;
thisMC._alpha = 100;
mctoFade = nexttoFade;
}
updateAfterEvent();
}
alfonce
1/30/2006 7:09:04 PM
Thats great - many many thanks.
I could have tweened it with pauses at the tops of thr tweens but as is much
better.

If you go here you will see the result

http://www.mediaminx.com/test/bannersa.html

One thing seems odd with it though - near the top of each fade in the movie
clips jerk to what seems full alpha. Whay would this be? Is it because the
movie underneath has faded out first and its affecting the fade in?

Any ideas how to get rid of the animation jerk?

Thanks again!!!!!!!!!

Alex.

Also, clip 1 was there but the bmp had somehow corrupted - odd - so I reloaded
into the fla dnit was fine...
kglad
1/31/2006 1:52:43 AM
that's a result of the internal way flash handles _alphas. to remedy use:

thisMC._alpha = 100-thisMC._alpha;

instead of:

alfonce
2/1/2006 7:37:34 PM
Hey,

works really well - youre a star!!!!!

Thousand thanks,

kglad
7/25/2006 1:56:01 AM
it's not clear from your post what images will load into what movieclips and
it's not clear which should cross-fade with each other.

however, in general, you'll need a loop to check that an image is loaded
before you initiate its fade.
kypsul
7/25/2006 2:43:33 AM
The way I have it now is I've built a grid of 9 different movie clips that sit
in frame 1 of home.swf. All they are, are holders for the images. Each movie
clip will load 5 images from an images directory. Inside each movie, I need the
images to cross fade into eachother. Then on the home.swf I will have nine
different movie clips cross fading 5 different images in each movie clip. I
need to be able to control their timing as well because at one point in time I
will have them all make one large picture over the nine different movie clips.
Its kind of like a large digital sign in Times square that can play nine
separate video in small sqaures or can play a large video accross all nine
squares.

Click on this link to see a picture of the gird and it might make more sense:

http://www.aerolitestudios.com/images/grid.jpg

Thanks,

Kyle
kypsul
7/25/2006 2:43:49 AM
The way I have it now is I've built a grid of 9 different movie clips that sit
in frame 1 of home.swf. All they are, are holders for the images. Each movie
clip will load 5 images from an images directory. Inside each movie, I need the
images to cross fade into eachother. Then on the home.swf I will have nine
different movie clips cross fading 5 different images in each movie clip. I
need to be able to control their timing as well because at one point in time I
will have them all make one large picture over the nine different movie clips.
Its kind of like a large digital sign in Times square that can play nine
separate video in small sqaures or can play a large video accross all nine
squares.

Click on this link to see a picture of the grid and it might make more sense:

http://www.aerolitestudios.com/images/grid.jpg

Thanks,

Kyle
AddThis Social Bookmark Button