Animated Gif Trick

For those of you who have both Xara X and Photoshop:

Intructions to make a transparent animated gif have a fringe of pixels of your chosen background color around the anti-aliasing. In the same way you create drawings in Xara with the background a certain color, and Xara exports transparent gifs with a fringe of pixels with the background color around the anti-aliasing, the following procedure does the same with animated gifs.

Requires using Xara and Photoshop. The procedure may be translatable into other bitmap programs that produce animations, too.

There are two reasons for using Xara and Photoshop:
a - Xara cannot import transparent gifs with actual transparency (they come out with white backgrounds)
b - Xara cannot export a background color for animation frames (neither can PS)

NOTE: This entire procedure could be done in Photoshop, but Xara X handles small text and small drawings much better than Photoshop, and produces cleaner results.

I use a two frame animation example to make it simple to follow.

Here it is: http://talkgraphics.infopop.net/1/Op...&ul=3001938225


1 - Take your .xar animation file and make each frame of the animation into one regular .xar drawing, with each different element in the animation on a separate layer, so that the different elements can be turned on & off at will.

Example: Maya's CROW was the element of animation in her signature, so I put each version of the crow on a separate layer from the text, making it possible to make each version visible or invisible as needed.

2 - Make the background the color of your web page(Ctrl+Click & Drag from the Color Line to the Background), so that the exported transparent gifs will have some colored pixels around the anti-aliasing instead of white pixels. That is the whole point of this! I used light grey for Maya's signature.

3 - Line up the different elements in the drawing perfectly, then turn one element off. In Maya's sig, I also had to make sure that both exported gifs would come out the exact same size, so I had to drop the level of the crows, so that the top wing of the wing-up crow did not go higher than the text. The gifs have to be the same size to line up right in Photoshop.

3 - Save a transparent gif version for each frame of the animation. I saved two versions of Maya's, one with wing up(wing-up layer visible and wing-down layer not visible), one with wing down(wing-down layer visible and wing-up layer not visible), as transparent gifs.
Export two gifs for two frames of animation

4 - Photoshop/ImageReady can import these with the background transparent. Bring them into ImageReady, the sub-program of PS that is used for image slicing and animations.

5 - I opened both gifs in ImageReady. I took one and started to make an animation with it. I added an extra frame to the animation(which defaults to copy the last frame), and then had to turn off the visibility of that gif in the second animation frame.

6 - I created a new blank layer for the second animation frame. I then selected the other gif using Select All, and copied and pasted it into the second animation frame of the first gif, into the new layer I created. I lined the two animation frames up to match, set the timing, and exported the animated gif.

It's a bit of trouble to get the hang of it, but works great! You can now have a transparent animated gif go onto any color of background, and look like it is part of that background, without any annoying fringe of white pixels.

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

[This message was edited by Dale Landry on June 26, 2002 at 18:08.]

I don't quite understand what you're trying to achieve here. Surely if you set the background colour you want in Xara and export the animation directly from XaraX, you're achieving exactly the same results, but without having to resort to PS?
Egg

I attach a screen grab of your animation imported into XaraX with the background set to red. As you can see there is no white background, just your grey edgings. (I've moved one image up just to make it clear.)
On your second point there is an annoying bug in XaraX re the background colour disappearing, which Xara have never got around to fixing. I tend to revert to CorelXara in this case.
Egg

Of course I tried that, Egg! It does not work, and leaves white pixels around the elements of a transparent animated gif.

I have not been able to get Xara to export animated gifs using a colored background. And after I have tried that, Xara acts all funky, and changes the background back to white. Photoshop will also NOT do this.

That is only true of the animation function in Xara. If I wanted to give my transparent animation red pixels around the anti-aliasing, I would build a separate regular drawing with a red background for export, so that the anti-aliasing pixels would have red pixels around them.

The whole purpose of this is to make the animation elements blend into a background, without a fringe of white pixels.

http://www.eyesitewebdesign.com/crowflies_3.gif

http://www.eyesitewebdesign.com/maya-pixeled.gif

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

I wonder if I could do something like that in PhotoPaint or PhotoImpact??? Sounds good and I agree, every time I have imported a transparent .gif from PhotoPaint into Xara the invisible box is there again, even if I exported it as an object.

I wonder though, maybe you could export an object as an .ai or something that BOTH programs could read with out the pixelated border appearing THEN when you have all your work done do the animation in Xara???

BTW I did a client tonight that missed an appointment, she works for Adobe, she is a "Leader" and keeps people informed of changes with in the company and how to impliment those changes. She came in tonight with a gift for missing the last appointment (hilight and hair cut, about 3 1/2 hours missed and money out the door) So I come out of the back room to greet her and get her color card to start mixing up the formulas that I use on her hair to hilight it. There on my work station is a box. You will never believe what she gave me............GoLive/Live Motion Pack (versions 8.0 and 2.0 respectively) worth a pretty penney. I was floored!! And she gave me a check for $60.00 to cover missed cash flow (1/2 the cost of the missed appointment). I'll tell you one thing, she left the salon with EXTRA nice looking hair tonight!!!!! The box must weigh about 20 pounds with all the manuals and software.

Frankly it's overwhelming to me and I don't know if I will use it, maybe, most definitely the GoLive web authoring software but the flash software, not so sure!!

Nice huh??? [img]/infopop/emoticons/icon_smile.gif[/img]

Richard [img]/infopop/emoticons/icon_wink.gif[/img]

http://www.imira.com/Album/photo.asp...0810&ImgType=0

Dale

I have been able to export Animated GIFs for ever from Xara with no white fringe. This is why Egg is so flaberstounded.

The ability to do this in Photoshop was just added a few versions ago and is now being touted in version 7 as a big new feature.

Just make sure your page background is close to the background color of your web page background.

Hold down the Ctrl key and drag a color from the screen palette onto the screen.

Xara always anti-aliases to this color. If your page is white, that is what Xara will anti-alias to. If your page is blue, orange, puce, etc. Xara will anti-alias to that color.

Are you doing this when you create your animations?

Gary

Gary Priester

Moderator Person

<a href="http://www.gwpriester.com">
www.gwpriester.com </a>


XaraXone

Of course I changed the color of the background! This works great with a regular drawing, but does NOT work with transparent animations. At least it doesn't work with my Xara X.

I know to Ctrl+Click & Drag a color from the Color Line to the background. I have done that countless times in the past few days.

I found that the only way to get the animation background color changed with Xara not complaining about it, was to change the background color before building or pasting any objects and text into an animation. But it doesn't help, and the animation always comes out with a white fringe of pixels, and Xara reverts back to a white background after exporting. The white pixel problem is slight, but definitely there, as you can see from the example of Maya's signature.

If Xara would allow the selecting of which parts of an animation were exported in an animated gif, then I could just create a colored rectangle behind the main objects and text, and not select it upon export, a procedure that works for a regular Xara drawing, and colors the fringe of anti-alias pixels.

Gary, if you have an example of a transparent animation that is done with background color fringe pixels, please post the example and .xar animation file. I played with this on and off for three days before I got it to work. Make sure it is comparable to the sig I did for Maya. Blocky letters don't show the fringe of white. It must be fairly small and have irregular text to really show the fringe of pixels.

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

[This message was edited by Dale Landry on June 27, 2002 at 07:20.]

Just to show how long it has been since I have created any GIF animations. You are right Dale, and I am dead wrong.

I have asked Xara to address this point in this thread. I can only hope they do. One can never tell.

Something very odd is happening there and not at all the way it is supposed to.

Sorry to have doubted you.

Gary

Gary Priester

Moderator Person

<a href="http://www.gwpriester.com">
www.gwpriester.com </a>


XaraXone

I was hoping you knew some "secret" I didn't!

Well at least I have a workaround to the problem, and it's pretty fast once you get used to it.

I am checking into the Photoshop capabilities in this area. I have versions 5.5 and 6, but I use 5.5 most of the time, because I am familiar with it. I will explore the capabilites of 6, and see if it has the capability of "matting" transparent animations.

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

I haven't created a transparent animation in XaraX, but have one created in Xara2 on my webpage
on a dark background with no white showing. So it must have been something that got broken in X.

You can view it from the link on my opening webpage by scrolling down to Monarch Butterfly.

Judi

http://fasolt.mtcc.com/~mom/xsquirrel.gif


My Stuff

Went to have a look see and the browser keeps displaying that "the page cannot be displayed" error message!!

Richard [img]/infopop/emoticons/icon_wink.gif[/img]

http://www.imira.com/Album/photo.asp...0810&ImgType=0

Here is the correct address.
web page

I goofed it can't have www. in it. I fixed my sig.

http://fasolt.mtcc.com/~mom/xsquirrel.gif


My Stuff

What you and Gary are refering to is the major bug in XaraX that I mentioned earlier. XaraX allows you to set the background colour in an animation, but very shortly after annoying defaults to a white background. If you try to return it to the original colour that you set you get a warning message saying something like "this layers locked etc" and you can't do anything about it. You can work around it but it's a pig. As proof I attach an transparent animated gif set to a blue background. You will see that the fringe is definetly blue, not white, so it can be done, but this bug is my biggest gripe with XaraX at present.
Egg

Thanks for all the work and discovering the work-around for the sig---never doubted ya!!! [img]/infopop/emoticons/icon_biggrin.gif[/img]

http://talkgraphics.infopop.net/1/Op...&ul=3001938225

You are exactly right, and that was the problem I was running into.

I would love to know how you did that animation in Xara alone!

I tried everything, to no avail.

Judi, love your butterfly! Now that is an animation that fits right into the background color.

Maya, you are welcome. It was great fun! [img]/infopop/emoticons/icon_biggrin.gif[/img] [img]/infopop/emoticons/icon_biggrin.gif[/img] [img]/infopop/emoticons/icon_biggrin.gif[/img]

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

Weird bug there, had a quick go and you can get the coloured background back from the default white by setting the animation to 'all frames visable' in the frames gallery, then scrolling up and down the page a bit to remove the white.

If you then set animation properties for colours to optimised palette per frame the antialiasing is restored to normal for the coloured background. Although this has the problem of making the animation larger than it would be for say global optimised palette. I have attached a sample to show that the gif is antialiased to a cyan coloured background.

Lets hope Xara Ltd have a look at this bug.

Regards

Su

One of the problems is that of the disappearing background. Once it's disappeared you can't retrieve it by Ctrl-dragging from the colour bar as you get the message attached below. A workaround as Sue states is to set all layers visible and editable. You can then Cntrl-drag the background colour into the window.
Another helpful thing I've found is if you've previewed the image in a browser, it places bitmaps in the bitmap gallery. If you delete these, save the file and close it, then reopen it you should have be able to save the animated gif with the transparent background intact.
Sorry I can't find a better workaround than this.
Egg

I'll attach the xar file to see if you can get it to work. I recommend that you keep all layers visible and editable when exporting the animation.
Egg

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

..you might find it helps to close XaraX completely and reopen it.
Egg

Hi Egg - when you tried this out, did you need to have the frames all editable as well for the coloured background to stay coloured? Although I had 'edit all frames' selected too at first (I was trying everything at this point!), I subsequently found that it worked okay with just the 'all visible' option. Although on a separate note, why this should work is anybody's guess. Perhaps for some reason Xara thinks that the background (ie the page) is actually some sort of hidden layer (hence the layer error message?), which as layers are not used in animations causes problems?

I didn't need to redo ctrl+drag the colour back onto the page background, when I clicked on 'all frames visible' the colour returned in a box around the animated part and then after scrolling up and down it returned to the whole page.

Just curious as I wondered if it was working differently on your system.

I also found that it doesn't really matter about the 'all frames visible' to actually export the gif as antialiased against the background colour. As long as I had 'optimised palette per frame' selected in animation colour properties it still exports colour antialiased gifs even though the background has gone white. But it is nice to actually see the background anyway and also to be able to change it's colour without those odd error messages.

Regards

Su

What worked for me was to select "All Frames Visible" and choose the option in the tab - Animation Colors: "Optimized palette per frame."

Thanks so much! Works like a charm! [img]/infopop/emoticons/icon_biggrin.gif[/img] [img]/infopop/emoticons/icon_biggrin.gif[/img] [img]/infopop/emoticons/icon_biggrin.gif[/img]

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll

I can confirm that it's not necessary to have the editable tag selected.
This particular bug has been present since the beta version of XaraX and Xara never seems to have addressed it. I suspect it's to do with the absence of a "background" layer in the animation frame as opposed to the presence of one in normal Xarax mode.
I see your a late bird too.
I haven't tried the optimised pallette workaround, but there are so many variables it get's my head spinning.
Regards
Egg

You must have been posting your reply whilst I was posting mine.
Glad to hear it works for you. Now if only Xara could get around to giving us a patch !!!!
Egg

... to hear it works for you Dale.

Been playing around with this conundrum for a while now, since I saw your signature stuff in the Test Forum. Although at first I discovered that the 'all visible' option worked to get the background back, it was frustrating as the text was still not antialiasing properly on export! So it didn't seem particularly useful except to change background colour. I was getting a lot of other weird things happening like 'internal program error 310.z' ... whatever that is, so there are possibly other bugs as well?

I also had a problem with using a hidden frame as a background. Unless I used the 'optimised colour per frame' setting, objects in the background frame often went odd colours. And the antialiasing seemed to give up altogether!

Egg - thanks for your feedback, yes let's hope there is going to be a patch worked out for this.

Regards

Su

[This message was edited by Su Lawrence on June 27, 2002 at 22:22.]

I also tried using a hidden frame, with no luck.
(And almost everything else I could think of!) The workaround is something only someone who had tried all the variables would know, because it does not seem sensible.

"Optimized palette per frame" doesn't seem like it would have anything to do with fringe pixels.

This procedure should be included in the Xara X Online Manual under "Animation," and also in the tips and tricks section.

Thanks again Su and Egg!

http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll