Making a frog go "poof". Part 2.    11 Aug 00


(Note: an Illusion project file containing all of the emitters and the background image used here can be found at the end of the tutorial, and CAN be loaded by the demo version of Illusion.)


back to part 1


Step 5: Illusion

Let's get these images into Illusion now. The first thing we'll do is get the background image with no frog in there so we have a reference for positioning the other elements. Start a new project, then double-click the empty (grey) thumbnail image in the layers window. Then select the no-frog image. You could instead load a 320x240 version of the original image (with frog) if you want so you can more easily position and size the frog emitter once we add it. I chose not to.

Now add any emitter to the middle of the stage (where you think the frog will go). If you can add an emitter that uses a "single" particle such as the "mouse" emitter, that would make things a little easier, but you can add any emitter (the simpler it is the less work you'll have).

R-click on the stage emitter and select "Properties" to open the emitter properties dialog. In the hierarchy, you need to have only one particle type, so if there are others, delete them (using the buttons below the hierarchy). When only one particle type remains, select the "Particles" tab, then check the "single" option. Next select the "colors" tab and check the "link transparency to color" option, then delete all but the first color point in the color gradient. Set the first (and only color point) to white (255, 255, 255). In the hierarchy select the particle type "visibility" property and set it to 100%. Do the same for the emitter visibility property.

Now we'll import the frog image. Click the "Change Shape" tab on the "Particles" page. Click the "New shape (do not add to library)" button that is under the larger shape preview window and load the frog TGA that we created earlier. Make sure you import the image as a "Full-color shape". Depending on how the other particle and emitter properties are set, you should now have a single frog particle in the preview window. We will adjust the size shortly, but first you need to make sure that velocity, velocity variation, weight, weight variation, spin and spin variation are all set to "min" (which is "off"). Also make sure that the "size over life" property doesn't change. If it does, r-click on the size over life graph and select "reset". You can close the properties dialog now by clicking OK, because we'll adjust the frog size in the stage window (so we can see the background image).



As you can see, my frog is quite a bit too small:



Just increase the particle size and/or the emitter size properties in the hierarchy until the frog is the size you want it -- the same size as it was in the original image, or maybe a little bit bigger. (You can also use Size Over Life to make the size bigger. Just keep the graph unchanging.)



Only one last thing to do with the frog emitter, then it's done: make it appear to "breathe" when it says "ribit". We'll just increase the size slightly to get this effect. In my anim I made the first "ribit" happen at frame 90, so at frame 90 we want to add a little "bump" in the emitter Size graph. In my project the emitter Size was set to 150, and an increase in size to 155 looks good (too much of a change looks goofy -- well, more goofy than I want). Select emitter Size in the hierarchy, jump to frame 87 (Press "F" then type 87) and create a data point on the size graph there (press "N" and type 150). Then move to frame 90 and create a data point at 155 there, and move to frame 94 and bring the size graph back down to 150.



Repeat this Size "bump" at frames 180, 270 and 387 (each of the ribits). Hit PLAY and you'll see a pretty boring animation. Oh, the last thing is to make the frog disappear when it will explode. Use the Active property for that. Jump to frame 390, select the Active property in the hierarchy, and click in the graph window at frame 390. If you click in the wrong spot, just drag until the data point moves to frame 390. If you've never used the Active property before, you may wonder why the graph ends at this point. That's because the Active property is a toggle -- either the emitter is active or it's not. When an emitter goes inactive, all of its particles immediately go away. (I guess we could also have stepped the emitter Visibility graph down to 0 at that frame, but using Active is easier.)

Since we're at that frame now where the frog disappears, let's add the blast mark. Since the blast mark emitter needs to be a single particle emitter just like the frog emitter is, let's use a copy of the frog emitter and save ourselves some work. Select the frog emitter (it's the only one so it's probably already selected) and COPY it (using the toolbar button, the Edit menu command, or the keyboard shortcut Ctrl+C). Make sure you're still at frame 390, then PASTE (toolbar, Edit menu, or Ctrl+V). There is now a copy of the frog exactly on top of the other one. Press Alt+ENTER (or r-click on the upper Frog emitter in the hierarchy window -- can't r-click on the stage emitter because the first one will be selected) to open the emitter properties dialog. Now click the Particles tab and the Change Shape tab. Click the "New Shape (do not add to library)" button as before, and load the blast mark TGA we created earlier. Import it as a "Full-color shape". Click OK to close the properties dialog.

Since we used a copy of the frog emitter which changed size and we want the blast mark to remain the same size, select the blast mark emitter Size property, r-click on the graph and select Reset. Now you can adjust the graph to make the blast mark the correct size (and it won't change over time). You'll probably need to reposition it too.



Looks good, except there is a little light "halo" around the blast mark (remember we saw this when we made the image, but I said we'd fix it in Illusion?). To fix this, just make the blast mark particle black instead of white. Open the props dialog (emitter properties dialog) for the blast emitter, select the Particles page, then the Colors page, then select the first (and only) color point in the color gradient and make it black. Uncheck the "link transparency to color" option and make the first point in the transparency gradient white (so the blast mark will be visible). Close the props dialog by clicking OK.



Notice that the blast mark already is semi-transparent, just how we want it. Why? The visibility properties are all set to 100 and the particle type transparency color is white (completely visible), so where is the partial visibility coming from? The image alpha channel itself. It's been a few days since I've created that image, and I don't remember adjusting the alpha channel in any way -- it was just semi-transparent for me when I created the blast mark. Maybe because it was on a separate layer in PSP? Anyway, if your blast mark is not semi-transparent already, just use the emitter Visibility property and set it to 50 or something like that.

If you PLAY the animation now, you'll see the frog "breathe" 4 times then disappear leaving a blast mark.

Let's make him "ribit" now. Although the "ribit" looks like a "single" particle in the animation, it's not. It can't be, because particles flagged as "single" are always attached to the emitter, and I want the "ribit" to move as it grows. The answer is to just create a few particles (or one). This is done with the particle type Number property. Here's the graph:



You can see that the Number graph has a spike at its first frame, then goes to 0. The Size and Life graphs are also shown. The Velocity graph isn't shown, but it should be set to Max.

(I'm going to skip all of the details of importing the "ribit" shape image. Just remember to import it as a "regular grayscale shape" in this case.) Now set the color of the particle to black, uncheck the "link transparency to color" option, and make the transparency start black then fade to white (so the particle is invisible at first, then is fully visible after a short while).



Since I wanted the word to grow as it moved out of the frog's mouth, then stop growing and stop moving at the same time, I played with the Size Over Life and Velocity Over Life graphs until I got it to look right.



To make the "ribit" The last detail is to get the word to move in the correct direction. Use the Emission Angle for this (and make sure the Emission Range is set to 0):



That's it for the "ribit" basics. You'll notice in the graphs that the "ribit" is active at frame 1, but in the frog anim the first ribit doesn't occur until frame 90. Well, when I create a new emitter for an anim (as opposed to just tweaking an existing one slightly, or adding one that needs no changes), I'll usually create add it at frame 1, then when I've gotten it looking the way I want it I'll either CUT it then PASTE it at the frame I want, or add it to the library then delete it from the stage. Either way works fine. Use whichever method you want to get "ribit" emitters at frames 90, 180, and 270. You'll probably want the "ribit" emitters to be "behind" the frog, so after adding the ribits r-click on the frog emitter in the hierarchy window and select "move up". Repeat this until the frog emitter is the top emitter in the hierarchy.

If you play the anim now, you should have a frog that "breathes" as it ribits, then disappears and leaves a mark on the floor. Just one thing left to add: the "smoke blast".

(Don't forget to save your project as you go along. When I'm working on a project like this, I'll usually save under different filenames at various stages of work. That way if I really screw something up I can go back to a previous version pretty easily.)


For the "smoke blast", I knew I wanted something subtle -- not a fiery fireball type explosion. The scale of a frog exploding just doesn't lend itself to a Star Wars type space explosion, you know? Ok, so I knew I wanted smoke, but wasn't sure if there should be any "fire" in it. Since I almost always create new emitters from existing ones, I started with the explosion from my last tutorial.

After adding that explsoion to the stage of the frog project, I knew 3 things immediately:

1) The explosion occurs too slowly (something that I noted at the end of the explosion tutorial)
2) The "fire" particles have to go.
3) The smoke needs to be darker.

So fix those 3 things and we're set. We'll do the easy ones first: delete the "fire" and make the smoke darker. Open the props dialog for this emitter, select the fire particle type in the hierarchy (named "Copy of plumes" since I never renamed it) and delete it. Now select the "colors" page for the smoke particle type, select the initial point in the color gradient and make it black instead of white.



Now the harder part: making the explosion quicker. This means cranking up the velocity properties, but the smoke needs to slow down pretty quickly, so velocity over life must decrease pretty fast. The particle type velocity is already set to MAX, and the Velocity Over Life graph looks pretty good, so that leaves the emitter Velocity graph to change. Here's what the old Velocity setting looked like (in the referece graph) and the new Velocity graph:



I used the "scale" function (r-click in graph window) to increase the velocity values, and again to "compress" the frame values of the data points. Why did I need to compress the frame values? Because the emitter was "on" too long, so I needed to modify the Number graph too:



Here are the remaining particle type properties that are important to getting the look of a short quick blast:





(Set particle type Velocity and Number to MAX.)



The last thing to set is the visibility. A final value of about 20% worked for me (Emitter visibility set to 50, and Particle Type visibility set to 40). You will probably also want to limit the Emission range to 180 and set the Emission angle to 90 so the smoke mostly moves out and up instead of down.

Now we just need to get the blast to occur at the correct frame. CUT it from the project, then jump to frame 389 and PASTE. The smoke and frog will both be visible for a frame, but that looked best to me. (Leave the smoke blast on top of the frog.) That's it!

Now PLAY the anim, or click here to watch the anim again.

That's how to make a frog go "poof". Hope this was useful.





The project file:    (80 KB)
(This project file CAN be loaded by the demo version of Illusion.)




Alan Lorence    11 Aug 00