Hello,

It's me again I am a full time athlete and part time designer so I am still learning some basic things here, thanks for your patience and thank you in advance for your help

I have created a simple animated GIF using Fireworks CS3 for a website I am updating. It is a bunch of images, chosen by my client, that loop around and around. I have added a bit of a fade between them by using varying opacity degrees of duplicate frames. It plays perfectly in Fireworks but when I preview in browser, the fade does not show up. I have tried reseting safari and emptying the cache...any suggestions as to what is going wrong?

Thanks again.

Claire.

The GIF image format doesn't support varying opacity.

You might achieve a fade effect with a javascript slideshow instead of using a single GIF image.

Interesting, I've done this before in other websites I've done. Actually, I have an animated GIF on the side bar that I created using varying opacity. http://www.nsdynamics.com.au/

But I will look into a javascript slideshow. Thank you.

Claire.

I think Christian thought you meant "true transparency" when you can see the background through the image. Your individual images are flattened. You have overlayed one image with another semi-transparent image and merged them into one. That you can obviously do. I may not use the right terms here, but I hope you get what I mean.

Can you show the animated GIF that isn't working?

BTW I think what you've done is called Onion Skin. At least it's very close to an Onion Skin effect.

Hello, I have tried to attach the file in both png and animated gif format but it won't upload, I think the file is too big....

You can zip (archive) it and upload that. It then should weigh less.

Yeah, I tried that and it still doesn't work

I still want to get to the bottom of it as it worked in the sidebar with another animated gif so I don't know where I've gone wrong here. But maybe I should just move on. Any favourite javascript slideshows with a fade transition? There are so many out there....

Thanks,

Claire.

Put it on your server and link to it.

http://kovarikracing.files.wordpress.com/2.../headerfade.gif

Here is the animated gif but it is totally wonky! And the nav rollovers dont work.

How about Nivo Slider: http://nivo.dev7studios.com/ ?

First, sorry! I made a mistake. I had onion skin enabled in my animation program, so it added it to your animation. In the GIF itself there is none.

I'm confused now. The old image doesn't seem to have any fading or what it should be called, but the new image have plenty of it. In the new GIF it's also visible to the eye. But the faded image isn't overlayed the previous image, it's on it's own and takes many frames.

That is, the old GIF has no image effect at all. In the new one each new image starts with a frame with a very faded copy that grows to a normal image over a number of frames.

Click to view attachment

It is built so that each image has 10 frames in sequence from 10% opacity to 100% opacity. All frames are set at 3/100 of a second except the last frame(at 100% opacity)shows for 4 seconds. So you are correct that the "new image" starts with a frame with a very faded copy that grows to a normal image over a number of frames.

But why won't it play or show in a web browser? Do you see anything wrong with it? If you go to the website http://www.nsdynamics.com.au/ you can see that in the right sidebar there is a little animation, "Cane Creek Service & Warranty Center". I built that little star animation and optimized it the exact same way. Bizarre...

Thanks,

Claire.

Thanks Frederiak, will check it out!

Pandy,

That is what it is doing! It previews in browser like the "old image" but it is built like the "new image" and plays properly in Fireworks.

I see it like that in browsers. The fading is very visible.

But you said the old GIF had opacity. It hasn't.

I might be misunderstanding about the old image/new image thing...nevermind.

But did you say it is working in your browsers? really?

Yeah.

By old image I mean the one you use as logo/header now, the one you said has working opacity.

The header that is live on the site right now does not have a fade/transition between images. I wanted to add the fade/transition feature so I copied the file and began adding the opacity layers/frames. Before uploading it to replace the current header, I previewed it in browser and it did not show the fade, still doesn't in fact. But if you said it works in browsers, I wonder why it doesn't work in my browsers? Interesting...