Suppose you want a mascot that displays different types of behavior depending on what state it is in. For example, maybe you want a mascot who changes into different outfits each time you click on her and has a whole set of animations for each outfit. Or maybe you want a mascot with different moods or magical transformations. For each state of the mascot, you want the behavior to be different and you want the state-change in the click-animation to be smooth and seamless. This tutorial will explain how to make a simple Multi-State Mascot.

This tutorial assumes that you already know how to make both a basic mascot as described in the How to Create a Mascot tutorial and a mascot with multiple click animations as described in the How to Make Multiple Click Animations tutorial.

For the purposes of this tutorial, we'll create a mascot of Futaba Shimeru from Aro Hiroshi's manga "Futaba-kun Change!" Thank you, Aro-sensei!

First we need our basic no-click mascot. Let's start with a simple mascot of the male Futaba with a blink animation.

This simple mascot sits still for three seconds, then blinks, as illustrated in this animated gif:

So now we have a very simple mascot of the male Futaba. We'll call this the first state of the mascot. Notice that I explicitly told it to go back to frame 1 after showing frame 4. More on why I did that later. For now, we just want this state to be all by itself.

Now let's add the second state for our mascot - the female Futaba. Again, we'll just make it a very simple mascot that blinks.

We add the female mascot animation onto the end of mascot like this:

Notice that I've explicitly told it to go back to frame 5 from frame 8. Once it gets somewhere in frames 5 to 8 (the girl frames), it won't go back to frame 1 to 4 (the boy frames). The jump at frame 4 also keeps it from ever getting to the girl frames. That's good because now we have a mascot with two different states and nothing in the mascot will make it go from one state to the other until we want it to.

The part we added would behave something like this:

Right now, because of the explicit frame jump at frame 4, we'll never see the girl frames.

Let's add our click-animation to make the male Futaba change into the female Futaba.

We add our new frames to the end of the mascot (frames 9 to 11) and then set the Click Animation To and From values to match them.

As it is now, our mascot will start as the male Futaba and will sit, blinking, until we click on him. Then he'll change into the female Futaba and stay that way:

The image shown here jumps back to male form after showing the female form but that's not exactly what will happen in the mascot. Once our mascot is in female form, if we click on her again, we just see the male-to-female transformation again and we're still stuck in the female form (the second state, frames 5 to 8).

What we really want to happen is, after Futaba changes from male to female, if we click again, she should change from female back to male.

If you recall from the How to Make Multiple Click Animations tutorial, we can use multiple click-animations and cycle between them.

Let's insert some new frames of animation before frame 9 to show the female to male transformation and a decision frame to toggle between them:

Now, our Futaba mascot starts male, then we click on him and he changes to female and, when we click on her again, she changes back to male.

One problem: Since the decision frame, frame 9, which starts the click-animation, uses the BOY.BMP image, we see the male version of our mascot at the beginning of both transformations. That's fine for the male Futaba turning into the female Futaba but it looks bad the other way around.

The solution is easy! Just select the text BOY.BMP in frame 9, the image in our decision frame and delete it by highlighting it and pressing the Delete key on your keyboard:

When Otaku Mascot encounters a frame which has no image, it just keeps showing the same image it was already showing. Now we can have a decision frame without having to worry about the wrong image being shown while it's deciding what to do next.

Now, each time we click on our mascot, it will change back and forth between each state, showing only the right animation as it changes from one state to the other.

You should now understand the basics of creating a multi-state mascot. You can use the techniques presented here and in the How to Make Multiple Click Animations tutorial to make mascots with as many states as you like. Maybe you could use it to make mascots with different outfits or mascots with different transformations. Or maybe you'll come up of a nifty new application that I haven't even thought of. I look forward to seeing what mascots everyone produces next!