Topic awaiting preservation: animated waving flag

Hi everyone,

I look after the website for Lions Clubs International in Great Britain and Ireland.

Although I am comfortable with HTML, PhotoShop and animated gifs are still very much a black art to me.

I have a requirement for an animated 'flag waving in the wind' gif of the Lions flag, and wondered if one of you guys could either:

1. Give me a very simple 'idiots guide' in how to create on using ImageReady

or

2. Do it for me (I only have a requirement for the one image)

I have attempted to have a go using Filter/Disort/Wave, but it just looks a mess - and that is even before I try to maker progressive slide images!

Mant thanks in anticipation.

Paul
www.lions.org.uk

hello lionwebmaster,
welcome to the Asylum.

A quick search (left upper cornor) for 'flag' revealed
Animated flag - which indeed does contain a quick tutorial for what you want.

so long,

->Tyberius Prime

Hi Paul, I have been wondering around so much and changed my ISP two or three times since then that the links to sample images I used will be dead I guess.
I did promise myself to do a better sample "sometime"
Is this the kind of thing that you are looking for?

[ed] here is a Word .doc that perhaps explains a liitle clearer[/ed]
Animated Flag

(Edited by Tao on 12-13-2004 17:27)

Tao, great piece of work.

I have just one suggestion:

Instead of moving layers around, you can use the offset filter. This will wrap around the image so you don't have to have part of it protruding off the screen and you can use it to blend the displacement map edges as well.

You're right silence The technique you mention I have not managed to master yet. I am such a slow duffer it takes me ages to get a "trick" down. I really am going to try to get to grips on that procedure. Is it similar to the way poi has done his (On the link Tyberius has given)
If you have a link to a brief explanation that would be fantabulous (far too much xmas TV Mary Poppins)

:::tao::: ::cell::

Thank you Tiberius Prime. And thank you Tao.

I have followed your instructions and got as far as liquify. The pattern I got was very close to that in your guide. I duplicated the layer and switched the first one off. Shortly after that I get stuck.

I can find 'style' and it is set to a square with a red line through it - assume that setting is 'normal'

Cannot find 'feather' to be able to set to 0 though for the life of me!

But reading through the guide I cannot see where the design of the flag image in incorporated. Is it right at the very beginning? If so I assume that the flag pole should be on a layer by itself?

Sorry to be a bit dim.

Oh! And how do you merge two layers?

Hi lionwebmaster and welcome to the Asylum
I've just reread my .doc ^there and I was having a hard time following it! I still haven't perfected the method myself far from it! Perhaps this is the time to nail as many methods of animating a flag as I can muster . Then writing it down is a whole nuther ball game, one in which I fumble quite a lot. If you followed the other thread that was linked to you'll see that there are a good few ways of doing this. I am only average at one of them
Have you got a particular image in mind? For the flag you want animating that is. Also what colour background will it appear on? If it is the Lions Clubs International website the colour is #fff8dc (that foxy colour picker's groovy).
If you can, post or link to the image here and we'll see if we can work on it together.
I know I would like to try the method silence mentioned, and I also wanted to get stuck into the technique poi illustrated so well in the other thread.
Merging Layers Ctrl>E will merge the layer that is selected in the layers pallet with the one beneth it. There are loads of ways of doing this depending on the layer/s in question.

Thanks Tao, that is a very generous offer.



Should you want/need it, my email address is webmaster@lions.org.uk

Tao, I hope you don't mind but I edited and rewrote your document to make it clearer and add the offset parts that I was talking about. I also added some pictures.

Here's my edited version: Animated Flag.doc ~ 209kb

There are three main differences between your version and poi's. The first is that poi uses the clouds filter to produce his displacement maps. The second difference is that he puts the different variations on the same layer in a long row and runs the displacement and other filters only once on that layer.

The biggest difference is in how he simulates lighting. In yours, you use the lighting effects filter with the displacement map as the height map. In poi's, he creates a shadow map and displaces that along with the image. This shadow map can then be placed above the flag layer and set to different blending modes. You can also duplicate the shadow layer again and invert it or change the blending modes to simulate highlights.

I prefer your method because it handles highlights/shadows in one step and you can also use different colored lights for various effects.

I really hope you get a chance to add this to Guru's. It's a beautifully simple technique that creates some great effects.

Here's a quick example I did before I got lazy. The animation isn't complete because I stopped around the 14th frame.

Oooops, try again

Cheers silence I have a hard time trying to write things up so others can follow, but I'm determined to write this up as simply and as well as I can soon
The biggest stumbling block for me in this is the repetition of so many steps. Miss just one step and you end up out of whack for all the other layers/frames/steps.
Thanks for the heads up on poi's technique too, it still has not sunk in fully yet, but that's only because I haven't paid it due attention. I thought I'd keep my head away from other methods untill I have completed this, otherwise I may well become totally bewitched, bothered and bewildered
lionwebmaster, got your email thanks, that .psd was just what I needed. What I intend to do is send you the original PSD of this which is somewhat bigger so you can see the steps I have taken and will be able to use it as a template for different sizes and background colours.
This is what we have so far, it still needs some finishing touches, but I'm not displeased with the results.

That is absolutely fantastic. Thank you very much Tao.

I belive this is the very first animated Lions flag.

And thank you everyone else for your friendly input and advice.

You're welcome. Look apon it as an early Christmas present, and keep up the good work with the Lions.
As I mentioned by email I'll write up the steps later so you may be able to follow what I have done here.

:::tao::: ::cell::