How to cross fade in Flash I am making?

[m.mckernan]

I have a gallery I am working on and it is my first foray into Flash in quite some time. The original gallery only had static images and the main image displayed would change on mouse rollovers as well as clicks. I stared to detour from the tutorial to make the gallery a little more insteresting and the images now only change on click and they fade in (well the first two do so far, the others I haven't got to just yet).

What I wanted to know is that at the moment which a user clicks on one of the two clips that fade in instead of holding the previous image and fading the new one over the top Flash clears the screen first and then fades the image in. How would I crossfade the images?

Any help would be greatly appreciated :-)

The sameple is here:

www.mypage.tsn.cc/mckernan/sample-gallery.fla

PS: Also can anyone advise how to make the file size smaller? It's 600k at the moment with only 4 large and 4 small images

[smoseley]

Sounds like something that will require actionscript.

onmouseover, you'll move the current image from layer order 2 to layer order 1, load the new image into layer order 2, with alpha 0, and then fade it in. Then on the next movement, you'll do the same.

I just did this script for the site www.lavishliving.com - which does something similar (rotates images on the homepage).

Frame 1:

_root.attachMovie("title", "title", 1000000000);

var images = ['mansion', 'aircraft', 'limo', 'yacht', 'massage'];
var i = -1;
var d = 1;

Frame 2:

i++;
d++;
if (i >= images.length) i = 0;
_root.attachMovie(images[i], images[i], d);
var r = i - 2;
if (r < 0) r = r + images.length;
_root[images[r]].removeMovieClip();
_root[images[i]]._x = 540;
_root[images[i]]._y = 200;
_root[images[i]]._alpha = 0;

Frame 3:

var x = _root[images[i]]._x;
if (x <= 482) gotoAndPlay(2);
_root[images[i]]._x--;
var a = _root[images[i]]._alpha;
if (a < 100) _root[images[i]]._alpha = a + 10;

Frame 4:

gotoAndPlay(3);

I also created objects holding the images with the linkage names 'mansion', 'aircraft', etc., to be referenced by the script.

[m.mckernan]

Correct me if I am wrong, but the code above is written for a looping series of images right? I only want the images to change when the user clicks the next photo - which could mean that the next image loaded could be any image in the gallery.

However, the effect you are using on the site you mentioned is exactly what I am looking for :-)

[smoseley]

Yes. It only rotates images. I realize it's not exactly what you need, but I figured it's a start. All you have to do is program the effect into the mouseover effect handler. :-D

[smoseley]

When I think about it, your best bet is probably to create a 2-frame movie clip that continuously loops back on itself, containing two image-holder clips.

When you mouseover one of your buttons, send a parameter to the clip specifying the name of the image to load.

In the first frame, you could check for the parameter. If it is set, move the front image to the back holder clip at full alpha, then load the specified image into the front holder clip at 0 alpha.

In the second frame, you + the alpha on the front clip, unless it's > 100%, and then loop back to frame 1.

That oughta do it for ya.

[m.mckernan]

i think my brain just melted....lol