graphicshtml-emailanimated-giffireworks

last state Animated Gif designed for html email in Fireworks cs5 fails in some clients


This is my second question, and I’m hoping to resolve an issue that I haven’t found addressed, though I did search for an answer.

Links and screenshots to problem are below. Using Fireworks CS5, I have created an animated gif consisting of 3 states that loops 3 times. It is built on layers, with the 3 states sharing only a background border. They do not share the background (the background is grouped layer consisting of a red box with a clipping path of white, which seems to work in the first two states, but fails in the third state) itself, or any other element.

It is a tile ad for an html e-newsletter, and it works on some clients (gmail, for instance), but the final state does not render properly in other clients (mac mail, for instance). To add to the issue, the same file was rendering correctly in Mac Mail earlier. The gif works if I open it in a browser (usually), as well.

I thought that animated gifs were very stable across platforms except for problems with looping in Outlook 2007 and I've never had this issue before (granted my experience is limited). Has anyone else had this experience? Does anyone have advice on this issue?

Many thanks,
Andrew.

Link to the good. This is the animated gif file. It may not work in all browsers (I did test the file thoroughly, but the weird issue just seems completely sporadic), but renders correctly in latest Firefox for Mac OS 10.7x.

Link to the bad. The third state is see-through, the background layer is not rendering.


Solution

  • Turn Off the Alpha Transparency in the optimization panel. After carefully examining each state, I realized that I had Alpha Transparency turned ON in the export. Even though each state had a solid red back ground, and even though the other states correctly rendered the solid red background, the Alpha Transparency was messing up the last state of the animation. To correct it, I simply turned OFF the Alpha Transparency. I don't know why I didn't think about that as the solution before. I hope this answer helps someone!