Preserved Topic: Animated flag

This is my second attempt, the first one got swallowed in the learning curve. The idea came from watching or should I say waiting heh hint hint. the Heraldic Sig thread. It's a bit too big , but now that I have the basic effect down I'm sure I can work on that.

sweet!!!!

Very nice. I was thinking about trying a flag too. Would you be put out if I tried it?


You are getting sleepy...sleepy. You will go to the North Wing....

Awesome Tao, really nice.

Ramasax

Maybe make the shadowed areas a bit brighter next time... you can easily do that by turning up the setting "ambient" in the lighting effecs filter. (presuming you used lighting effects)

You're spot on about the lighting effects Mahjqa. I was concentrating on getting the order of layers to match with the displace maps so I overlooked the darkness of the shadows.
Moth, I would not be put out at all, work away my friend, but thanks for asking.
I was thinking of trying to write up the steps I took to make the animation, but i think I'll wait untill I get it looking a bit better. That way, we could compare notes.
Thanks for the comments tomeaglescz and Ramasax.
::tao::

:::tao:::

I think it's a good start.

Like Mahjqa said, the dark parts a bit too dark.

It also suffers from a bit of 'exactness' and repitition. You can immediately see the pattern sweeoing across the image.

I think what it needs is a pattern that is a bit less stagnant and perfect. SOmething that ruffles the edges a bit more, some vertical movement, etc. Something to give it more fluidity and more action.

Not to say it's not nice work so far - just needs to go further.

Yeah I agree DL. There is such a wide margin to play with in the displace maps and lighting effects that I should be able to get it more variable.
Here's the latest variation.

::tao::

Whoa a bit of a tornado going on up there^.
I experimented with a displace map I Liquified on this one. Still a little on the large side.

::tao::
[edit] blargh! where did that little jitter come from? [/edit]

[This message has been edited by Taobaybee (edited 03-17-2004).]

Here's my attempt.

I think the pole and the flag itself are looking really good, but the "wind" is blowing a little too much for me.
Now comes the time to experiment with the animation. I see you have used 14 frames, I imported it into IR and changed the frame delay to 0.1, but that did not make much difference.
I have found it is a balance between how many frames you use, how many colours you use, and the overall dimensions of the image.
In my last flag ^above^ I used 20 frames and 128 colours.
I would suggest some more tests on these lines, to get a smoother animation.
Nice one Moth
::tao::

What are the displacement percentages you are using? I'm using 1% for both.


You are getting sleepy...sleepy. You will go to the North Wing....

I'm not completly sure about this Moth.
I used a displacement setting of 3%, I seem to remember, both vertical and horizontal. This was however, on the image before I resized it. I usually work on an image at least 50% larger than the final size. So once I have it looking the way I like in PS, I resize it before I switch to IR.
I'm going to try another one, so this time I will make a note of the settings and dimensions I use, and include them in the post.

::tao::

I'm sure the values change according to the image size and the actual displacement map. I was asking out of curiosity.




You are getting sleepy...sleepy. You will go to the North Wing....

I seem to have lost it here again, I'm sure I've followed the same steps as before, but I can't seem to get a slower smoother animation as I did in the last one.
I was going to write up a short tutorial or walkthrough to show how this animation was made, but it's not worth doing yet untill I've got it looking right.
Anyone have any suggestions? I'm flagged out.


::tao::

I would think that it might be levels you are looking for. You would want your regions of dark and light for the displace maps to be larger. Once you have the larger displace maps your animations should be slower and far less chaotic in appearance.

You might also try to increase the size of your map so that the regions of color differenciation are larger. You simply have to many ripples, and your frames are changing too fast and or you need more frames in the animation.

I might be completely mistaken though, I am not 100% sure how you are achieving this effct, but I think it is along the lines of the Mahjqa fire type of animation.


Dan
CodeTown.org

Tao: I love the one above. Combine that design with the wind levels of the second to last one, and I think you might have perfection. I love that intertwined yinyang/music note in there.

Thanks for the advice WarMage and Ramasax. I had already done this one before I read your posts so have not put the suggestions to work yet.
With this one I have used 15 frames, and I blurred the DMap, but I think you may be right about less waves and the waves being deeper. I'll try that next time with a few more frames.
Cheers
::tao::

[This message has been edited by Taobaybee (edited 03-27-2004).]

This is getting closer to the effect I was after.

Now I have another little mess to sort out elsewhere, and I'm not too sure if I can do it.
::tao::

Much better. I am liking this very much.

Dan
CodeTown.org

Could someone explain the sequence of doing this to me?

Justice 4 Pat Richard

It would improve if the rope to appeared to move more with the flag I think. But other than that perfect man. Well, almost perfect.

Ramasax

Very nice Tao - I think you've got it =)

Nice motion, nice flow.

Skaarjj, I'm in the process of writing it up now. As it is a bit fiddly I'm making another example and writing down the steps as I go.
::tao::

Let's jump in the bandwagon

The Dmaps needs some refinements.

edit: Skaarjj: Basically the technique is similar to warjournal's heat waves which themselves are an extension of mahjqa's fire technique.

I'll try to make it short :

First create a long stripe with all the frames of an animated Displace map. ( it can as simple as a difference cloud with another one sliding above it in Difference )
Then, duplicate the flag you want to animate and create a similar stripe.
Finally displaces the duplicated flags with the long stripe created earlier.
To light up the whole thing I created a long stripe with a duplicated spot of shadow ( a dark soft brush ) displaced it and set it in Overlay above the displaced flags.
And voilà, you just have to change the Canvas Size, and animated the stripes in ImageReady.



[This message has been edited by poi (edited 03-30-2004).]

Yeah, the more the merrier poi
Thats a great flag animation I really like it. I have used a slightly different method which I'll try to explain, here is the result


This is my first attempt at explaining the technique so you will have to forgive the times when I have explained the obvious and overlooked some other things. This turned out to be a lot harder than actually doing the animation.

To Start
New Doc 200x200 px, with a background colour #2b0404.
I?ll leave the actual design to you. Here is what I have decided to go with, the ?TaoBoogie? sig on a ?V? flag on one layer and the pole on another.

Make another new document with the same dimensions as the first, in this case 200x200 px, this time with a white background, we are going to make the displacement map with this. I find it useful to save both the flag .psd and the displacement map .psd in the same folder and save often.
Select the Gradient Tool, I made my own custom gradient for this.

Holding down the Shift Key drag across the document a couple of times so you get something like this.

Next, Filter>Liquefy. Play with the settings, this is what I got.

Duplicate the layer and turn the other one off (so you can better see what your about to do next). With the duplicated layer active, select the Rectangle Tool; make sure Feather is set to ?0? and Style to Normal. Show Ruler, Ctrl>R, and dragging from top left select half. I find working in full screen mode helps with this. Cut and Paste on a new layer. Move this layer to the right and the other half to the left, so you will now have something like this.

Make a new layer and link with the ?left? and right? layers, make sure no other layers are showing and press Ctrl+Alt+Shift+E, to make a new merged layer.

Then play with it, I used brush and smudge, till the middle looks smoother, this is mine.

Duplicate the merged layer, select the Move tool, and move the top layer all the way over to the left so it just goes off screen. If you press Shift>Left Arrow 20 times, that should also do it.
Link the two layers and merge, Ctrl+E, save.
Duplicate this layer and with the Move Tool selected, Shift>Right Arrow, this will move the layer 5 px to the right. Duplicate this layer and Shift>Right Arrow again to move it a further 5px. Do this until you have 19 layers, each layer shifted 5px from the last. I find numbering each layer 1 to 19 really helped me not to get mixed up in the next steps. Turn off all the layers except the first in our sequence and save.

Go back to the flag .psd and duplicate the flag layer 18 times so we now have 19 layers with the flag on, number the layers 1 to 19. Turn off all the flag layers apart from the first.
Now go back to the displace .psd select all, Ctrl+A, copy Ctrl+C, switch to the flag .psd go to Channels create a new channel and paste the DMap into it. Return to the first flag layer, select Filter>Distort>Displace, in the dialogue box I used these settings;

It is well worth experimenting with your own values as the effect varies dependent upon the DMap you are using. When you click OK select the DMap .psd you have just saved.
If you are happy with the result, shift click the layer again to select the distorted flag and go to Filter> Render>Lighting Effects. These are the settings I have used; you will need to experiment here too to get the effect the way you want it to look.

When you have done that, deselect and make the next flag layer active.
Switch to the displace .psd, select the next layer in the sequence, save it, select all, copy. Switch back to the flag .psd go to channels and paste to DMap into the same channel as the last one. Select the flag layer again and repeat the process, Filter>Displace with the same settings. Shift click the layer to select the flag again and go to Filter>Render>Lighting Effects, and apply the same settings.
Repeat till all 19 layers are done

Now it?s almost time to go to ImageReady. Resize the flag .psd to it?s final size, mine is 90x90px and turn off the background layer and all the flag layers except the first one in the sequence.
Switch to Image Ready, and duplicate the first frame. In the layers pallet turn off the first layer and turn on the second. Duplicate the 2nd frame, go to the layers pallet and turn off the second layer on turn on the third. Repeat this process until you have 19 Frames in the animation, with the corresponding layer showing in each.
Select all the Frames (Shift click 1to19) and set the frame delay of all to 0.1 second.
Preview and save optimized as a .gif, I used 128 colours. Make sure when you save that you have selected 2b0404 as the matte colour. These are the setting I used.


Again I'm not sure how clear this is to read. If you find any flaws or areas I have explained badly, let me know and I'll try to correct it.
::tao::

Tao: Thank you for your commment.
I wondered exactly how you did you Dmaps.

The fact that I unroll the animation in a stripe saves me to do XX times the same displace + lighting operation.
My lighting pass uses a method used in the demo scene to simulate Phong illumation that is to use an image representing the impact of light on the surface and project it according to the geometry ( the Dmap ) of the surface you want to lit. That way I can create all the frames of displaced lighting at once.

The illustration below may help some people.

Great mini-tut, Tao. Thanks for taking the time to write this up!


___________________________
Suho: www.liminality.org

Hey Suho, great to hear from you . It's still not completely right, there is a tiny jump in it that bugs me so I'll have to make another.

poi, thanks for showing how you create your waving flag. I have never used that method before I also have never heard of "Phong illumination" or Phong anything come to think of it. I did a quick google and found this Phong illumination explained but this just made my head hurt.

::tao::

Tao: Using a "stripe" method have the advantage to be fast and to avoid repetitive tasks.

The Phong like method I mentionned is also refered as environment mapping. To make it short, it consist in mapping on a surface what can be seen from that surface. If we want to light ( reflect a light in fact ), we simply have to place correctly a bright brush in the environment map. But we can also reflect a 3d scene if we render it in the environment map.
In the current case, I wanted to cast the shadow of the folds of the flag so my environment map is a dark brush on a white background.



[This message has been edited by poi (edited 04-02-2004).]

Tao!!!

man that is a great TUT!!

i can make animated flags now!!!!! hahaha!!

i'm so happy

cheerio!!!

David

So put it on Guru's Network!



- Biggie

- Face the Present
- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011

Hmmm...





Nice. Thanks Tao for sharing this

You definitely have to write this tutorial.

----
If wishes were fishes, we'd all cast nets.



[This message has been edited by Moon Shadow (edited 04-08-2004).]

[This message has been edited by Moon Shadow (edited 04-09-2004).]

quote:

---

So put it on Guru's Network!

---

Gets my vote.

___________________
Emps

The Emperor dot org

Well, if we're voting, I'll toss my ballot into the hat.

Thanks for the suggestions, I think it needs a little more work to tighten it up, but I am delighted you think it may be good enough for the GN.
I did sign something somewhere along the line to say I would allow anywork I have used here for such purposes.
I'm committed to a lot of family stuff for the next week or two, so I've not got much computer time to work with. That coupled with my year old monitor flickering really badly means I will not be able to participate as much as usual in the forseeable future.
::tao::