Animated GIF not working in browser |
Animated GIF not working in browser |
klarko4444 |
Jun 5 2012, 04:05 PM
Post
#1
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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. |
Christian J |
Jun 5 2012, 06:19 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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. |
klarko4444 |
Jun 6 2012, 10:45 AM
Post
#3
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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. |
pandy |
Jun 6 2012, 02:50 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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? |
pandy |
Jun 6 2012, 02:56 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
BTW I think what you've done is called Onion Skin. At least it's very close to an Onion Skin effect.
|
klarko4444 |
Jun 6 2012, 10:25 PM
Post
#6
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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....
|
Frederiek |
Jun 7 2012, 02:02 AM
Post
#7
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You can zip (archive) it and upload that. It then should weigh less.
|
klarko4444 |
Jun 7 2012, 02:33 PM
Post
#8
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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. |
pandy |
Jun 7 2012, 05:00 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Put it on your server and link to it.
|
klarko4444 |
Jun 7 2012, 11:56 PM
Post
#10
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
http://kovarikracing.files.wordpress.com/2.../headerfade.gif
Here is the animated gif but it is totally wonky! And the nav rollovers dont work. |
Frederiek |
Jun 8 2012, 01:27 AM
Post
#11
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
QUOTE Any favourite javascript slideshows with a fade transition? There are so many out there.... How about Nivo Slider: http://nivo.dev7studios.com/ ? |
pandy |
Jun 8 2012, 06:23 AM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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. |
klarko4444 |
Jun 8 2012, 12:26 PM
Post
#13
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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. |
klarko4444 |
Jun 8 2012, 12:26 PM
Post
#14
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
Thanks Frederiak, will check it out!
|
klarko4444 |
Jun 8 2012, 12:28 PM
Post
#15
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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. |
pandy |
Jun 8 2012, 01:32 PM
Post
#16
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I see it like that in browsers. The fading is very visible.
But you said the old GIF had opacity. It hasn't. |
klarko4444 |
Jun 8 2012, 02:06 PM
Post
#17
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
I might be misunderstanding about the old image/new image thing...nevermind.
But did you say it is working in your browsers? really? |
pandy |
Jun 8 2012, 03:38 PM
Post
#18
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Yeah.
By old image I mean the one you use as logo/header now, the one you said has working opacity. |
klarko4444 |
Jun 9 2012, 11:18 PM
Post
#19
|
Member Group: Members Posts: 50 Joined: 24-November 10 Member No.: 13,231 |
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...
|
Lo-Fi Version | Time is now: 28th March 2024 - 06:58 AM |