Closed Thread Icon

Preserved Topic: Animated flag Pages that link to <a href="https://ozoneasylum.com/backlink?for=13653" title="Pages that link to Preserved Topic: Animated flag" rel="nofollow" >Preserved Topic: Animated flag\

 
Author Thread
Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-17-2004 00:41

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.

tomeaglescz
Paranoid (IV) Inmate

From: Czech Republic via Bristol UK
Insane since: Feb 2002

posted posted 03-17-2004 00:46

sweet!!!!

Moth
Paranoid (IV) Inmate

From: columbus, ohio, usa
Insane since: Jul 2002

posted posted 03-17-2004 06:48

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....

Ramasax
Paranoid (IV) Inmate

From: PA, US
Insane since: Feb 2002

posted posted 03-17-2004 07:31

Awesome Tao, really nice.

Ramasax

mahjqa
Maniac (V) Mad Scientist

From: The Demented Side of the Fence
Insane since: Aug 2000

posted posted 03-17-2004 08:35

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)

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-17-2004 13:04

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:::

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 03-17-2004 15:18

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.


Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-17-2004 17:20

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::

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-17-2004 20:25

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).]

Moth
Paranoid (IV) Inmate

From: columbus, ohio, usa
Insane since: Jul 2002

posted posted 03-20-2004 06:17

Here's my attempt.

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-20-2004 17:46

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::

Moth
Paranoid (IV) Inmate

From: columbus, ohio, usa
Insane since: Jul 2002

posted posted 03-20-2004 23:34

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....

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-21-2004 01:42

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::

Moth
Paranoid (IV) Inmate

From: columbus, ohio, usa
Insane since: Jul 2002

posted posted 03-21-2004 05:27

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....

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-27-2004 00:35

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::

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 03-27-2004 06:33

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

Ramasax
Paranoid (IV) Inmate

From: PA, US
Insane since: Feb 2002

posted posted 03-27-2004 07:43

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.

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-27-2004 17:53


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).]

Taobaybee
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Feb 2003

posted posted 03-28-2004 01:49

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::

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 03-28-2004 04:18

Much better. I am liking this very much.

Dan
CodeTown.org

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted posted 03-28-2004 04:40

Could someone explain the sequence of doing this to me?

Justice 4 Pat Richard

Ramasax
Paranoid (IV) Inmate

From: PA, US
Insane since: Feb 2002

posted posted 03-28-2004 05:50

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 03-28-2004 14:52

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

Nice motion, nice flow.

Tao
Nervous Wreck (II) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted posted 03-30-2004 01:55

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::

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 03-30-2004 03:33

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).]

Tao
Nervous Wreck (II) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted posted 03-30-2004 23:23

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.

Tao
Nervous Wreck (II) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted posted 03-30-2004 23:34

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.

Tao
Nervous Wreck (II) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted posted 03-30-2004 23:50

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::

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 03-31-2004 11:09

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.



Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

posted posted 04-01-2004 09:28

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


___________________________
Suho: www.liminality.org

Tao
Nervous Wreck (II) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted posted 04-01-2004 23:09

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::

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 04-01-2004 23:43

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).]

lovesMilou
Bipolar (III) Inmate

From: the otherworld
Insane since: Mar 2004

posted posted 04-05-2004 16:36

Tao!!!

man that is a great TUT!!

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

i'm so happy

cheerio!!!

David

Maskkkk
Paranoid (IV) Inmate

From: Willaimsport, PA, US of A the hole in the Ozone
Insane since: Mar 2002

posted posted 04-07-2004 18:47

So put it on Guru's Network!



- Biggie

- Face the Present
- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

posted posted 04-08-2004 22:55

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).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 04-09-2004 05:08
quote:
So put it on Guru's Network!



Gets my vote.

___________________
Emps

The Emperor dot org

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

posted posted 04-09-2004 05:19

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

Tao
Nervous Wreck (II) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted posted 04-09-2004 13:49

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::

« BackwardsOnwards »

Show Forum Drop Down Menu