Smooth Fades in Flash

Hi Pellepiano,

I tried downloading it but it won't open, suggest stuffing or zipping it. Shipstern zipped his, it opened ok.

thanks again.

Coolness! So those images are actually seperate jpgs that are being loaded like buttons with a seperate URL for each? The URL part is more than I need but the external jpg loading is (as I mentioned to pellepiano) the next step I would like to try.

I am looking over the file you furnished me. I have to go spend some time with my son now before he forgets who his father is.

Mark

Hi mg_TIW,
Yes the images are loaded dynamicly into a holder within a holder. ie.

this["holder"+imageNumber].img.
they are loaded into img.
And holder is assigned the button action.
this["holder"+imageNumber].onRelease=function(){
getUrl(.................);
}

Good on you ... life is far more important than our intellectual gymnastics.

"Death surrounds us every day yet we live as though we were imortal"
The Mahabarata

Shipstern

Ok, that was enough kid time, he's off to bed. I have been picking apart your code to understand how it works. I have pasted sections of it below with comment/questions after.

First let me state that I really like the way the disolves are looking now, they are sexy smooth but, is it possible to make one disolve out while another is already in? The effect of this would look like one image blending to the next instead of fading down to the background color and fading in the other image at the same time. I understand that the black I'm seeing is my black box and drop shadow. What we should be seeing is one image blending into another without any hint of the background image or color.

I'm guessing that the reason we are seeing the background is becuase one image is fading down while another is fading up at the same time. What I would ultimately like to see is:

FPO 001 presenting while FPO 002 is at alpha 100 but is below FPO 001 so when FPO 001 goes to alpha 0 FPO 002 is already there and so forth.

Make sense? Here are my comments and questions:

stop();
//how many images you have
numberOfImages=3;
//mg_TIW//If I have more images I would put the total number here, correct?

//pause length you may want to change this currently set to aprox 4 seconds.
pauseLength=400;
//mg_TIW//100 equals 1 second? Does it matter what the frame rate is? 1 fps vs 24 fps or is the AS independent of the frame rate and is time based?

//start with only image 1 visible and alpha 100
fpo_003mc._visible=false;
fpo_002mc._visible=false;
fpo_002mc._alpha=0;
fpo_003mc._alpha=0;

//mg_TIW//Three questions:
1. If I had more images, I would indicate them here correct? Like this:
fpo_008mc._visible=false;
fpo_007mc._visible=false;
fpo_006mc._visible=false;
fpo_005mc._visible=false;
fpo_004mc._visible=false;
fpo_003mc._visible=false;
fpo_002mc._visible=false;
fpo_002mc._alpha=0;
fpo_003mc._alpha=0;

2. Why is fpo_002. written twice and why is there no fpo_001 written?

3. Does _visible=false; mean the image is not visible? Alpha 0?

MovieClip.prototype.fadeInterval=undefined;
MovieClip.prototype.fadeSpeed=50;
//mg_TIW//The higher the number the longer the fade? Or the higher the number the shorter the fade?

MovieClip.prototype.fadeIncr=2;
//mg_TIW//What does the "2" represent and what happens if I change it to a 1 or higher? Is there a limit?

//variables to keep track of images
var currentImage=1;
var nextImage=2;
var counter=0;
//mg_TIW//How does this work? Should I see an image number in the presentation or is it some kind of support item for the rest of the script so it knows where it is?

This is awesome!!!!! I hope you can figure out the transition so the background image/color doesn't show.

Mark

Hi mg_TIW,
I am sure I can get the effect that you want. But I will first answer your questions.

Yes numberOfImages=3; you increase this for the number of images.

pauseLength=400; This is independant of the frame rate.
By using the MX function setInterval() all timing and animation is independant of the frame rate!!! So you can have a .swf with a frame rate of 12 but running animation at a higher frame rate.
If you look at the script line:
function startSlideShow(){slideInterval=setInterval(imageCh anger,10);}
The 10 is the speed in milliseconds that the setInterval calls the function imageChanger(); So 400 X 10 = 4000 milliseconds (4 seconds).

_alpha=0; means the alpha is set to zero
_visible=false; means that the mc is invisible.
There is a difference here _alpha is trancparency but ._visible means the the clip is not only visually invisible but also that any button events on the clip are also invisible. The reason to have it _visible=false; as well as _alpha=0; is Flash will have to determine by calculateing all the alphas of each image what the final pixel RGB value should be. This can KILL your processor speed with a lot of images. So unless you need them to have event functionality (even when not seen) better to make them _visible=false; to save Flash having to calculate them into the final picture.

Your 3 questions:
1: Yes you would add to the list;
fpo_008mc._visible=false;
fpo_008mc._alpha=0;
But I only used this method to keep things simple and inline with your setup. I would not do this manualy as you can create all your Movie Clip holders dynamicly like this.(using the numberOgImages in a for() loop)

for(j=1;j<numberOfImages+1;j++){
this.createEmptyMovieClip("fpo_"+j,j);
//now set their properties
if(j>1){
//but leaving the first image visible
this["fpo_"+j]._visble=false;
this["fpo_+j]._alpha=0;
}
}
This is a lot easier and also it means that if you have more images you just increase the numberOfImages. No need to adjust the script beyond that.

I think I have already answered 2: and 3:

The fadeSpeed and fadeIncr work together the fadeSpeed is the time in milliseconds that the fadeIncr is added/subtracted from the Movie Clips _alpha. Adjusting either will give different fade effects. The
fadeSpeed has a range of 1 - infinity but I don't think that Flash can execute animation at a frame speed of 1000 fps. The fadeIncr range is any number greater than 0 and less than 100.

The variables:
var currentImage=1;
var nextImage=2;
var counter=0;
Are only for internal use they will not be seen ... but you can use them to gives some information if you are loading images dynamicly.ie:

You could use them to indicate which image was loading or which is the next image. I often use an external text file that I load in dynamicly at run time before the slideShow starts.(less than a few Kb)
It has some information in it. The total number of images(which means I don't ever have to touch the .swf/.fla. And the image name or a brief description of the image. Then I can output to the user such information as.
"Loading ... image1.jpg"
or something more informative".
"Loading image of giant surf in Hawaii"
and indicate what the next image will be.
"Next image small surf in Florida"

Hope this answers some of your questions. If you want to go through with loading your images dynamicly which I think is best (keeps your .swf file size down to nothing and is way easier to maintain. Let me know ... as the script would be slightly altered for the end result you want. Think about it ... come up with a wish list and I will make it happen.
Shipstern

Hi me again,
Just read over it looking for errors.
Flash CAN NOT execute a frame rate of 1000 fps.
Shipstern

Ill try and zip it. It may come in handy in other projects.

Quote:

---

Originally posted by pellepiano
Ill try and zip it. It may come in handy in other projects.

---

This is awesome man! But, it to has one little snafoo, like Shipstern's version when one image fades out, another fades up...during that transition, the background is revealed.

This is an exelent version but how about one more crack at it where there are two images at alpha 100 (one on top of the other) so that you only see the first image and then when it fades out, the second image is revealed becuase it is already there (it was just hidden below the first one). Once the second image is revealed the next image loads below (out of site) the current one. When the second image fades, the third image is already there then loop back to the start.

Gosh was that easy to load images to as well. When this is complete, we should probably post a note siting the specific diffences and advantages of both you and Shipstream's versions. The are both awsome yet completely different approaches. I can see now, how far off I was with my file...I am not worthy...I just need a lot of practice.

One more thing: Why is it important that the background doesn't show through the trasition? This should be pretty obvious, you don't want any other element, albiet psychodelic background or a plain boring color to contaminate the presentation. Folks want to see on image to the next, not one photo, a hint of the background, another photo, another hint of the background and so forth. Make sense?

Thanks for sticking to this.

It will require some scripting and either a smart swapDepths function for the movieclips or the creation on the fly for new movieclips that always are at a depth lower that the previous.

Quote:

---

Originally posted by shipstern
Hi mg_TIW,
Think about it ... come up with a wish list and I will make it happen.
Shipstern

---

Ok, here it is, first, thanks for all your input and help, I can now see how truly clueless I am. My wislist is as follows:

1. Base on the current work, which looks fine accept for the background showing through during the transition dissolves, loose the background showing through, there shouldn't be any. As I explained to Pelle Piano, people don't want to see a photo, then an hint of the background, a photo and then a hint of the background. The transition from image to image should be that, image to image not image to background. After reading your note above, it almost sounds like this might take up processor speed because you would have to have the other image alpha set instead of using visible=false but what do I know, I'm taking a newly educated guess at it.

2. Item two would be to be able to still have the images make nice smooth (no background showing) transitions but have the image load dynamically instead of being embedded.

3 & 4: I might as well ask for this as well, would both versions be able to use the same preloader or would each have to have a different one. I guess that would do it.

You guys are awesome...thanks for all the help.

Quote:

---

Originally posted by pellepiano
It will require some scripting and either a smart swapDepths function for the movieclips or the creation on the fly for new movieclips that always are at a depth lower that the previous.

---

I feel like I've fallen into rocket science now...ooh la la!

Hi mg_TIW,
The image to image fade is not that bad really you have no need for the fadeDown() so by removing that and a little change no problems.
I am currently doing some work on this for you. So should be finished tomorrow.
I will build it with a preloader script for the images built in. You can think about a progress bar bytes loaded text and let me know what you want in that line. Such a bar/text can just be plugged into the preloader script.

Just one thing though for the sake of simplicity and portability ie so you can use this over with different images sets in different directories. Your images should be named
theImageName_[n].jpg where n is the image number starting at 0.
ie:
Method 1:
houseImages_0.jpg houseImages_1.jpg houseImages_2.jpg etc etc
Method 2:
image_0.jpg image_1.jpg image_2.jpg etc etc

Though if you end up handling a large data base of different image "sets" I think you are better off using Method 1. Otherwise it can become very confusing and easy to mix up image sets.
Shipstern

Quote:

---

Originally posted by shipstern
Hi mg_TIW,
You can think about a progress bar bytes loaded text and let me know what you want in that line. Such a bar/text can just be plugged into the preloader script.

---

Hmm, how about "bytes loaded..." for the text and a bar for the...bar. I suppose I'll be able to disect it and change it later.

I had a movie loader like that once from someone that I was able to change.

Quote:

---

Just one thing though for the sake of simplicity and portability ie so you can use this over with different images sets in different directories. Your images should be named
theImageName_[n].jpg where n is the image number starting at 0.
ie:
Method 1:
houseImages_0.jpg houseImages_1.jpg houseImages_2.jpg etc etc
Method 2:
image_0.jpg image_1.jpg image_2.jpg etc etc

Though if you end up handling a large data base of different image "sets" I think you are better off using Method 1. Otherwise it can become very confusing and easy to mix up image sets.
Shipstern

---

I've done a fair amount of work in After Effects and here we would typically number everything in 3 digits becuase with a single diget, after a list gets to 10, the number 10 named image will actually list after the number 1 image. By placeing zeros (two of them) everything stays in order, up until 1000 but I won't ever go that high. So if you could place two more zeros that would make more sense to me in a weird sort of wayÑmake sense?

image_001.jpg
image_002.jpg
image_003.jpg
image_004.jpg
image_005.jpg
image_006.jpg
image_007.jpg
image_008.jpg
image_009.jpg
image_010.jpg
image_011.jpg
image_012.jpg
yadda, yadda, yadda. I don't need that many, just three, I just wanted you to see how the progression would look if there were 12 or more images.

Mark

Hi mg_TIW,
Well here it is uploaded.
Check it out then read on.
http://users.ozwide.net.au/~mpelic/e...WloadFade.html

The preloader bar is just basic you will no doubt design something that suits. Just alter the loaderBar MC thats in the library.

As for the .jpg names ....
It makes it more difficult to script if your images are named
image_001.jpg
image_002.jpg
image_003.jpg
rather than
image_0.jpg
image_1.jpg
image_2.jpg

Not that it's impossible or anything but I will have to work on that.

Right now as the script stands they have to be
yourImageName_0.jpg etc. I will work on making it fit your system but not today.

There are some control variables at the top of the script to adjust to your needs.
The first two variables are all you will need to change.
numberOfImages=9;
theImageUrl="img";
The next two will alter your fade speed.
theFadeSpeed=50;
theFadeIncr=2;
The next one will alter your length of pause at full alpha
pauseAtFullAlpha=30;

Beyond that point you may need to ask some questions as I have not commented the script.(yet).

I have made it all as an independant clip in the library so you can just drag the folder into any .fla library and then just dump it on the timeline where you want it.
The only things you really need to change to use it are.
1. theImageUrl="img"; needs to reflect the path to your images. In my example the images are named img0.jpg img1.jpg. If you have your images in a different directory then you will have to add that path ie.
theImageUrl="images/img";
And of course change the number of images you have. As your images MUST start at 0 for this current version the numberOfImages=; variable must be set to the actual number of images you have.

I am sure you may have some ??? And may want it tweaked for you design.
Shipstern

The transition looks great and having the control over it's speed is a big help!

In regards to the numbering, now that I think of it, I guess it doesn't matter if it uses single digit numbers because the script is calling the specific numbers and not independently adding another digit so I don't see a problem with your method.

Triple digets make the files organize better for the user but that's about it. You might consider using triple digits just for this reason alone i.e. becuase when someone is creating the files, they will initially want them neatly arranged in a folder and in order, 000 (triple digits) will do that for them. Modifying the script to compliment this workflow would help the user. I guess, for me, tripple digits would make more sense becuase I come from a bit of a video background and when I export or import a batch of images they are always numbered in this fashion, I apply the same workflo to Flash since it is animation.

For the preloader, it appears that the preloader becomes visible as each image is loaded in. I was thinking that it would appear once at the front only. When you think about it, the prealoader doesn't really need to be seen for the additional images becuase the transitions are seamless, no trace of images not being preloaded or perhaps that is becuase I'm on cable modem. I guess what I'm saying is, I suppose each image does need to be preloaded, that's fine, but beyond the first preloaded file, we really don't need to see the progress bar/text any more, just let the images preload as they are without the visual. One more analogy: Users don't need to know that the other images are preloading, they just want to see the show at that point, they would expect the progress bar at the front.

Make sense? I hope I explained that well.

Mark

This is awesome!

Hi mg_TIW,
As for the preloader only on the first image I guess this is a design choice based around your understanding of your client base and their bandwidth etc. I usually do a benchmark of the clients bandwidth and base my need for a preloader upon those results. If they are on low bandwidth I would give some indication (perhaps very subtle) as to what lies ahead and even some control over it. Ie low bandwidth clients may find slideshow back forward buttons appear which their broadband counterparts will not see. But anyway ....

To make the preloaderbar and text only apprear on the first image change line 50 of the .fla to the following.

if(slideshowPlay && !this["h"+nextImage].loadStatus && nextImage==0){

and line 63 to the following

if(!mc.loadStatus && nextImage==0){

Here are the changes needed for your .jpg naming system. It replaces line 51:

newUrl="";
if(nextImage>=0 && nextImage<10){newUrl=theImageUrl+"00"+nextImage+". jpg";}
else if(nextImage>=10 && <100){newUrl=theImageUrl+"0"+nextImage+".jpg";}
else{newUrl=theImageUrl+nextImage+".jpg";}
this["h"+nextImage].loadMovie(newUrl);

This assumes that files will be named (replacing yourName of course).
yourName000.jpg - yourName099.jpg
and beyond yourName099.jpg
yourName100.jpg - yourName101.jpg yourName102.jpg etc etc

The variable at the top of the script will still have to hold the yourName portion of the path to your images that can be what ever.ie.
theImageUrl="img";
theImageUrl="image_";
theImageUrl="../../flashcontent/advertiser/images/book";

Hope this all works how you want it.
Shipstern

Hi Shipstern,

What a busy week. I wanted to tell you the file you sent is terrific! I've added some notes to it so even I can understand how to work with it. I need your help one more time. I've dummified two versions of it. The first uses the naming convention you set up image_0.jpg, image_1.jpg and so forth. The second version (hopefully attached to this note, if not I'll tell you where I'll put it) I'm doing with the three digit numbering image000.jpg, image001.jpg, image002.jpg etc.

In your previous note, you mention to replace line 51 with:
---------------------------------------
newUrl="";
if(nextImage>=0 && nextImage<10){newUrl=theImageUrl+"00"+nextImage+". jpg";}
else if(nextImage>=10 && <100){newUrl=theImageUrl+"0"+nextImage+".jpg";}
else{newUrl=theImageUrl+nextImage+".jpg";}
this["h"+nextImage].loadMovie(newUrl);
-------------------------------------

and to change the variable at the top to:

theImageUrl="img";

Since I will be using "image000.jpg" name convention, I changed the variable to "image".

My problem is Line 51. Since I had addedn some additional notes in the actionscript, line 51 has become line 92 (I think). I pasted the code in there but am getting an error in the output window. Could you take a look at it? Oh heck, here's the entire code, in case the attachment doesn't attach:

---------------------------------------
stop();
//ON LINE 3...enter the total number of images you are going to present. Currently it is set up for 3 images total.
numberOfImages=3;
//ON LINE 5...NOTE: NAME THIS THE SAME WAY ON LINE 38...two things to consider. A) the path to the file you want to load and B) the file name. As it is currently set up each file should be named "image_0, image_1, image_2" and so forth. All you have to do is type "image_" preceded by the path to the image.
theImageUrl="image";
//ON LINE 7...leave this line alone. If you were to raise this to 500, it would fade one step at a time, very slowly. Leave it at 50.
theFadeSpeed=50;
//ON LINE 8...this really has more control over the disolve. Set it to 1 and it will disolve very, very slowly. Set it to 50 and you will get a hard cut. You will have to tweak this control and the one above this based on the size of your images.
theFadeIncr=8;
//ON LINE 11... at 30, the slide will pause for 6 seconds before going to the next image. I think this number is a multiple of 5 i.e. 30/5=6"
pauseAtFullAlpha=30;

/////////////////////////////////////DANGER ENTER WITH CAUTION ///////////////////////////////////
currentImage=undefined;
nextImage=0;
lastImage=undefined;
slideshowPlay=true;
pauseCount=0;
loaderBar._visible=false;
MovieClip.prototype.fadeInterval=undefined;
MovieClip.prototype.fadeSpeed=theFadeSpeed;
MovieClip.prototype.fadeIncr=theFadeIncr;
MovieClip.prototype.fadeUp=function(){
clearInterval(this.fadeInterval);
this._visible=true;
this.fadeInterval=setInterval(fadeU,this.fadeSpeed ,this);
function fadeU(mc){
if(mc._alpha<100){
mc._alpha+=fadeIncr;
updateAfterEvent();
}
else{loadNextImage();clearInterval(mc.fadeInterval );}
}
};

for(j=0;j<numberOfImages;j++){
this.createEmptyMovieClip("h"+j,j);
this["h"+j].createEmptyMovieClip("image_",0);
this["h"+j].imageNum=j;
this["h"+j]._visible=false;
this["h"+j]._alpha=0;
}

this.createEmptyMovieClip("topBuffer",numberOfImag es+3);
this.createEmptyMovieClip("currentBuffer",numberOf Images+2);
this.createEmptyMovieClip("lastBuffer",numberOfIma ges+1);

topDepth=this.topBuffer.getDepth();
currentDepth=this.currentBuffer.getDepth();
lastDepth=this.lastBuffer.getDepth();

function startSlideshow(){slideshowPlay=true;loadNextImage( );}
function stopSlideshow(){slideshowPlay=false;}
function loadNextImage(){
if(slideshowPlay){
this["h"+nextImage].loadMovie(theImageUrl+nextImage+".jpg");
preloaderBar.bar._xscale=0;
preloaderBar.percent="";
preloaderBar._visible=true;
pauseCount=0;
loadInterval_ID=setInterval(loadCheck,100,this["h"+nextImage]);
}
}
function loadCheck(mc){
pauseCount++;
BL=mc.getBytesLoaded();
BT=mc.getBytesTotal();
if(BL >= BT && BL>0){
if(pauseCount>=pauseAtFullAlpha){
changeImage();
preloaderBar.percent="";
preloaderBar._visible=false;
clearInterval(loadInterval_ID);
}
}
preloaderBar.bar._xscale=(BL/BT)*100;
preloaderBar.percent="Percent loaded " + Math.floor((BL/BT)*100);
}

function changeImage(){
if(currentImage!=undefined){
if(lastImage!=undefined){
this.lastBuffer.swapDepths(this["h"+lastImage].imageNum);
this["h"+lastImage]._visible=false;
this["h"+lastImage]._alpha=0;
}
this.currentBuffer.swapDepths(lastDepth);
lastImage=currentImage;
this.topBuffer.swapDepths(currentDepth);
}
this["h"+nextImage].swapDepths(topDepth);
this["h"+nextImage].fadeUp();
currentImage=nextImage;
newUrl="";
if(nextImage>=0 && nextImage<10){newUrl=theImageUrl+"00"+nextImage+". jpg";}
else if(nextImage>=10 && <100){newUrl=theImageUrl+"0"+nextImage+".jpg";}
else{newUrl=theImageUrl+nextImage+".jpg";}
this["h"+nextImage].loadMovie(newUrl);
if(nextImage>=numberOfImages){nextImage=0;}
}
startSlideshow();


---------------------------------------

Hi mg_TIW,
I have just been down the coast surfing (in ocean).
So only just now recieved you message.
You just placed the script changes in the wrong place. So I have fixed that.

Also read through your texts about the movie.
And thought it could do with an upgrade ... not the texts but the movie ...... which may mean an update of the texts ... if you think you like slideshowSuperDeluxeV1.

Additions:
1: Pertaining to your text about preparing the images sizes in PhotoShop.
As this can actualy be done at runtime/when the images loads I have added functionality in this area. Using 3 new variables.
resizeImages=true;
imageWidth=300;
imageHeight=300;
If resizeImage is set to true the images will be resized to the sizes stipulated by imageWidth imageHeight. If resizeImages is set to false the images will retain their original size.

2: You mention that you need to add a border to original image files if you want this effect. As Flash has the drawing API this can also be done at runtime when the image is loaded. So I have also added this functionality to the slideshow. Using these three variables.
withBorder=true;
border_thickness=2;
border_color=0xCC0000;
border_alpha=50;
If withBorder is set to true then a border will be drawn around the image at runtime with the thickness of border_thickness the color of border_color and an alpha of border_alpha. If withBorder is set to false then no border will be drawn around the image.

Hope you think this is way cool!!!!
If not let me know and I will just remove the script. If you want to see how this is accomplished just check out the function ProccessImages() at the very bottom of the script.

Needless to say you can do other image processing at runtime. Like scale rotate flip and even with a little math skew!!
Anyway here is the .fla let me know what you think.

Oh yeh the image names work now with image001.jpg image002.jpg .....image100.jpg etc. If you wanted it to be image_001.jpg then you would just add that to the theImageUrl variable
like so theImageUrl="image_";
Shipstern

Excellent! Let me play with the text a little more and I'll hand it back to you.


Where are you surfing, it's freezing where I am, Northern Virginia and there's not a swell for miles.

Hi mg_TIW,
Glad you thought so. Looking forward to see new text. Also I am wondering about another question you put forward before. ie:
The preloader bar should only appear on the first image??
Do you still want it that way ???
I live in Australia and its summer here.Down the coast this time was to a small coastal town called Coffs Harbour.
Catch you soon.
Shipstern