A realistic rising air bubbles animation with AS (f5)

[ericinho]

hello all...

This is what I am trying to do:

I want to make a light animation where air bubbles come out of a bucket (which slowly moves from left to right)

and they float till a certain height untill they dissolve (fade to 0%).

I want to have 3 different kind of bubble MC's which I want to generate (duplicate MC???) at random.

Further I don't want them to clog eachothers, so they should not be able to move on top of eachothers.

For filesize reasons I want to do this as much as possible with an actionscript...

But how? Your suggestions and help are much appreciated :)

[claudio]

download thoriphes bubles attachment here:
http://www.kirupaforum.com/forums/showthread.php?s=&threadid=24173&highlight=bubbles

it might help you

[jingman]

Everything was lookin easy until you said that bubbles can't be on top of eachother. Now you're looking at checking the location of all these bubbles and comparing each to the location of every other bubble.

This will make your bubbles sloooowwwww... it is, of course, entirely doable.

[ericinho]

can't that be done with a hittest?

[ericinho]

really cool script btw :)

have some questions though :)

- what should I do when I want them to go only till the border of the MC i will place them in (which is not the border of the actual main.SWF)

- instead of simply disappearing, i would like em to fade to alpha 0%... how would I do that?





onClipEvent (load) {
a = 0;
i = 0;
// randomizes the x-motion and y-motion (for the y, how
// fast it moves up, for x, how far back and forth the
// bubble moves.
xMove = random(100)+1;
yMove = random(10)+1;
// size = random(100)/100;
if (_name == "bubbles") {
_visible = false;
}
}
onClipEvent (enterFrame) {
// the script for all the movieclips except the main one.
if (_name != "bubbles") {
// this makes the bubbles move back and forth and
// centers the motion.
_x = Math.sin(a)*xMove+400;
// this moves it up
_y -= yMove;
// this increments what goes into the Sine function
// above which makes the values go back and forth,
// which is what you see when the bubbles are moving.
// if you have a graphing calculator, graph y=sin(x)
// and you'll see what i mean.
a += 0.1;
if (this._y<0) {
// once is goes offscreen, take it out
this.removeMovieClip();
}
} else {
// the script for the main clip
// (what you see on the stage)
++i;
// this makes the bubbles
duplicateMovieClip (this, "bub"+i, i);
// limiter, there can only be 75 bubbles on the screen
// at once (processor saver)
if (i == 75) {
// resets counter so the bubble in layer 0, if it's
// still on the screen gets replaced, so disappears
i = 0;
}
// randomizes the size
size = random(100)/100;
_parent["bub"+i]._width *= size;
_parent["bub"+i]._height *= size;
}
}

[jingman]

It can kinda be done with hitTest, but it's the same idea there, you will have to hitTest each bubble against every other bubble.

To make it fade out - make the bubble an MC with the first frame a normal bubble, then the next 20 or so (whatever you want) frames are the tween out to 0 alpha. Then tell the MC that it should play() when it get's to a certain _y.

[ericinho]

hmmm, yes, but this would result in all bubbles fading out at the exact same height... while then I would prefer that it would fade out more randomly... if that is possible...

but code-wise, how would that be done... and wouldn't that imply that the code would have to loop?

[jingman]

Sure it's possible.

Just have some kind of random trigger, like

onEnterFrame = function(){
// other stuff you want, movement, etc.
random(10) == 0 ? bubble.play() : null;
}

Yes the code would have to loop, that's what the 'onEnterFrame' function does for you.

If I didn't have to go to class I would make an fla for you, sorry. Maybe later.

[ericinho]

thanks :)

but where should I put this code and could you more or less explain what this snippet of code does?

[ericinho]

oh, and is it possible to first let the bubbles go down a bit before they start to rise (to suggest that they are being blown out with force)

onClipEvent (enterFrame) {
// the script for all the movieclips except the main one.
if (_name != "bubbles") {
// this makes the bubbles move back and forth and
// centers the motion.
_x = Math.sin(a)*xMove+380;
// this moves it up
_y -= yMove;
// this increments what goes into the Sine function
// above which makes the values go back and forth,
// which is what you see when the bubbles are moving.
// if you have a graphing calculator, graph y=sin(x)
// and you'll see what i mean.

[jingman]

Well every time I start getting into really realistic stuff, I just write out the AS for gravity and force.

I would do that in this situation - and give your bubbles an initial downward velocity. Since you're underwater, you are basically going to use -gravity (bouyancy). Don't forget to bind the upward speed of your bubble so it doesn't just keep going up faster and faster.

[ericinho]

Hey Jingman, thanks for your reply.

Writing an AS for gravity... rrrrright. Well, I am happy you have so much confidence in my scripting skills :thumb:
However, it couldn't be much further from reality.
I didn't even know there was a function in AS for simulating gravity????

Anyway, I fear that might be a tat to ambitious for me.

However, I did fix the fade thing. A simple alpha tween fixed it marvelously.

I do have however a thing i can't seem to fix:

For some reason the bubble animation stays on top of all the content in this MC. I can put object on a higher layer. I can swapdepth, but for some reason they stay infront of the other objects, while ofcourse I want to to appear from behind an object.

Do you have any ideas how I can solve this???

Thanks for your help so far
:flower:

[jingman]

There isn't any actual function in AS for gravity, but since physics is just math, and AS can do math, AS can do physics :)

As for your 'on top' problem, make an empty container MC for the bubbles, and put it under the bucket layer - then attach/duplicate all of your bubbles into that MC (the empty container).

[ericinho]

yeah, you should see my grade card for math and physics... :)

#1: but basically I should change the following lines in the script:


this.removeMovieClip();
}
} else {
// the script for the main clip
// (what you see on the stage)
++i;
// this makes the bubbles
duplicateMovieClip (this, "bub"+i, i);

and change 'this' to _root.containerMC

and

_parent["bub"+i]._width *= size;
_parent["bub"+i]._height *= size;

to _parent.containerMC["bub"+i]...

and so on?

#2: and should I put the MC containing the bubble image instance named 'bubbles' put into that container. Or put the container into the same MC as in which the bubbles MC is, and only duplicate the bubbles MC into that container????

thanks (he said while scratching behind his ears :h: ) ;)

[jingman]

An updated fla would really help a lot, could you attach one?

[ericinho]

sure, no problem :)

here it is...

[ericinho]

hmmm, i tried to put the bubbles MC inside another MC, but this results in no bubbles showing at all. Just the source bubble flashing a bit (though this time indeed behind the bucket).

i tried to fiddle with the numerous paths of the script, but no luck there.

hopefully you can help me out.

[ericinho]

funny, can make that old script useful again after some years.

But would it be possible to make this script move from right to left instead from down to up?