The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Animated GIF not working in browser
klarko4444
post 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 wink.gif 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 smile.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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 sad.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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/ ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post 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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:58 AM