Printable Version of Topic

Posted by: klarko4444 Jun 5 2012, 04:05 PM

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.

Posted by: Christian J Jun 5 2012, 06:19 PM

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.

Posted by: klarko4444 Jun 6 2012, 10:45 AM

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.

Posted by: pandy Jun 6 2012, 02:50 PM

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?

Posted by: pandy Jun 6 2012, 02:56 PM

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

Posted by: klarko4444 Jun 6 2012, 10:25 PM

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....

Posted by: Frederiek Jun 7 2012, 02:02 AM

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

Posted by: klarko4444 Jun 7 2012, 02:33 PM

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.

Posted by: pandy Jun 7 2012, 05:00 PM

Put it on your server and link to it.

Posted by: klarko4444 Jun 7 2012, 11:56 PM

http://kovarikracing.files.wordpress.com/2010/10/headerfade.gif

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

Posted by: Frederiek Jun 8 2012, 01:27 AM

Posted by: pandy Jun 8 2012, 06:23 AM

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.

Posted by: klarko4444 Jun 8 2012, 12:26 PM

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.

Posted by: klarko4444 Jun 8 2012, 12:26 PM

Thanks Frederiak, will check it out!

Posted by: klarko4444 Jun 8 2012, 12:28 PM

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.

Posted by: pandy Jun 8 2012, 01:32 PM

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

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

Posted by: klarko4444 Jun 8 2012, 02:06 PM

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

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

Posted by: pandy Jun 8 2012, 03:38 PM

Yeah.

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

Posted by: klarko4444 Jun 9 2012, 11:18 PM

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...