Bacteria Effect

by ilyas usal a.k.a. pom   | filed under Flash and ActionScript

I got this effect from a very good French Flasher. I found the code on his site, flasheur.com , broke it down, and improved it a little bit, all this just for you.
You'll find that in this tutorial, I also took the code from the Random motion tutorial, that I use the swapDepths and duplication functions, and a lot of actionscript-based motion.

So that's not an easy tutorial, and you'd better check the other tutorials before attempting this one.

Take a look at the effect:
 

 
[ see the bacteria melt? ]

You can grab an incomplete source to get you started by clicking here.
The Main Idea
If you went through the random motion tutorial, that part shouldn't be a problem any more. The tricky part is that thing when the bacteria seem to melt one into each other. What we need to do is separate the outline of the bacteria from the fill. We'll put the fill on a high level, and the outline on a low level, so that the outlines can never get on top of the fills. You didn't get that ? That's normal.
The Tutorial:

1. When you open the .fla, you'll see 4 layers : top, circle, shadow and background. On the top layer, there's a blue shape. This movie clip is equivalent to a mask, since it will hide everything under it. It is called top in the library. On the circle layer there's a blue circle, a movie clip called circle in the library.  On the shadow layer, you'll find a shadow, a movie clip called shadow in the library. On the background layer, there is a background. Everything's normal.
   
   You can notice that the outline and the fill of the bacteria are two separate movie clips on two separate layers.
   
   We'll need to give instance names to our objects. Give the instance name circle to the circle, top to the top, and shadow to the shadow. If you don't know how to do that, check that link.

Now, what we want is that the bacteria move randomly. We need to put Supra's random motion code to the circle, and make so that the outline follows somehow the fill. We also need to duplicate our bacterium, so that there are more than one on the scene
 

1. First things first : random motion.
   The motion function we'll use is quite similar to Supra's. It's a little bit different in the way that the motion is not steady, but slows down as the clips gets close to the target.

Create a new layer that you'll name code and add this code:

                      //Random Movement: kirupa.com
//Thanks to Suprabeener for the original code!

function getdistance (x, y, x1, y1) {
 var run, rise;
 run = x1-x;
 rise = y1-y;
 return (hyp(run, rise));
}
function hyp (a, b) {
 return (Math.sqrt(a*a+b*b));
}

MovieClip.prototype.reset = function () {
var dist, norm, movie_height, movie_width;

//   movie_height: refers to the height of your movie
//   movie_width: refers to the width of your movie

//---------------------------------

movie_height = 200;
movie_width = 400;

//---------------------------------

speed = Math.random()*4+2;
targx = Math.random()*(movie_width-_width);
targy = Math.random()*(movie_height-_height);
dist = _root.getdistance(_x, _y, targx, targy);
};

MovieClip.prototype.move = function () {
var cycle;

// cycle: specifies speed of the movement. The smaller
//         number, the faster the objects move.

//--------------------------------------------

cycle = 200;

//--------------------------------------------

diffx = (targx-_x);
diffy = (targy-_y);
if (_root.getdistance(_x, _y, targx, targy)>speed) {
 x += diffx/7;
 y += diffy/7;
} else {
 if (!this.t) {
  t = getTimer();
 }if (getTimer()-t>cycle) {
  reset();
  t = 0;
  }
 }
_x = x;
_y = y;
}

If you look very closely, you'll see that I removed two or three lines from the move() and reset function.
 

 
[ The code layer is dedicated to code only, and I have a French version of Flash ]

3. Right click the fill, that is to say the movie clip circle and open its Actions Panel. Enter the code :

onClipEvent (enterFrame) { move () ; }

Save your work. If you test your movie now, you'll see a blue down move around the scene. Fine. Now we want the outline to follow the fill. In order to do so, we'll use a controller clip.
Create a new clip (Ctrl + F8), and name it controller. You won't need to give it an instance name. Leave it blank, and get back to the main scene (press the little Scene 1 vignette above the timeline).

Open your library (Ctrl + L) and drag and drop the clip inside the code layer. Open the Actions panel of the clip and add the code:

onClipEvent (enterFrame) { _root.shadow._x = _root.circle._x; _root.shadow._y = _root.circle._y; // this makes the outline follow the fill }

Note

_root. in front of shadow is necessary, because we are now in _root.controller, so writing shadow._x would be equivalent to _root.controller.shadow, which doesn't exist (arrow with the X on it). To get to shadow, you have to go through _root. See the difference ?

4. Save your work and test your movie. The outline is now following the fill, with a little delay. I don't know where that come from.

We get to the real actionscript part of the effect. We want to duplicate our little bacteria, and make them all move, and also make it so that it looks like they melt one into each other.

In the code layer, under the random motion code, we are going to put the duplication code.

// 1 : first level i = 1; // MAX : number of bacteria. Don't put too much, or you're going to kill your computer MAX = 11 ; // duplication loop. We could have used a for loop too. do { duplicateMovieClip (_root.circle, "circle"+i, 50+i); duplicateMovieClip (_root.shadow, "shadow"+i, i); _root["circle"+i].num = i ; _root["shadow"+i].num = i ; i++ ; } while (i<MAX); _root.circle._visible = 0 ; _root.top.swapDepths(1000) ;

Everybody OK? I admit this isn't really simple.

duplicateMovieClip (_root.circle, "circle"+i, 50+i);

This means you duplicate the movie _root.circle under the name "circle"+i in level 50+i.
At the beginning, i=1, so the name of the duplicate will be circle1 and it will lay on level 51. Logical. And so on and so forth 11 times because of the do... while loop.

 

_root["circle"+i].num = i ;
_root["shadow"+i].num = i ;

Those lines just set a number so that a circle and its outline have a common number. We'll see about the notation in the next note.
num is used in the controller because the circle number i has to tell the outline number i to follow it.

_root.circle._visible = 0 ;

This makes the first circle invisible because it's on level 0.

_root.dessus.swapDepths(1000) ;

This makes so that the top movie clip gets always to be on top. Otherwise the outlines would be over it.

5. Save your work and test your movie. Your movies are duplicated all right, but the outlines don't follow their fill. We have to modify the code in the controller. Hang on because it's not easy as well.

That's it ! Finished ! Save your work, and test the movie.

That last bit of code looks a lot like the one we first put in the controller. The difference is that we loop so that all the shadows follow their circle, and that we have to give a general formula of the path to get to the shadows and the circles. I like those NOTE things...
 

You can find here all the source code of the bacteria effect.

This tutorial is written by Ilyas Usal. Ilyas is also known as ilyaslamasse on the kirupa.com forums!
pom

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇