Otaku World Home Otaku Mascot Tutorials
How to Make Multiple Click Animations
with Accursed Toys' Otaku Mascot program
Otaku Mascot Home
Otaku Mascot

Otaku Mascot Navigation
New! Get the Program Tutorials Mascot Guidelines How to Submit a Mascot
Top 20 list by
Artists
list by
Categories
Mascot Library  

This tutorial was written by Dov Sherman, creator of Zillia Tippytoes.

Overview

If you create a mascot with a Click Animation, control always jumps to the same frame when you click on it. That's fine but what if you want to have more than one Click Animation? Good news! It's possible with Otaku Mascot as it is. This tutorial will demonstrate the use of a decision frame to support multiple Click Animations.
This tutorial assumes that you already know how to make a basic mascot as described in the How to Create a Mascot tutorial.

Preparation

First we need our basic no-click mascot. Let's use the simple blinking-only version of Zillia from the first tutorial. As you recall, the blinking animation used 3 images in 4 frames like this:
This simple mascot sits still for six seconds, then blinks, as illustrated in this animated gif:

Blinking, No-Click Mascot

First Click Animation

Now let's add our first Click Animation: Smiling. We add the four frames of animation for the smile, set their properties, and set the Click Animation To and From values.
At this point, the mascot will behave something like this:
Frames 1-4 Frames 5-8
...until you click
and it goes to...
Blinking Smile

Second Click Animation

Up until now, it should all be very familiar. Let's add a second Click Animation: Being Shifty.
We'll be using two new images...
lookleft.bmp lookright.bmp
Look Left Look Right
When used, the animation should look something like this:

Being Shifty
We add it to the end of mascot and update the Click Animation To and From values to include our new frames:
That's all fine and well but, at this point, as you can see, that second Click Animation will never happen because there's nothing to pass control to frame 9. So we make the following change:
We've changed frame 5 so that it thinks the Next frame is frame 9 and that it should loop there exactly one time. What will this do?
The first time we click on our mascot, control jumps to frame 5, just like before. The animation sees that the Next frame is frame 9 and it hasn't looped there yet so it goes straight to frame 9, which is the first frame of our second Click Animation.
When that second Click Animation finishes, control passes back to frame 1. What happens when we click on Zilia a second time?
The second time we click on our mascot, control jumps to frame 5 again but it remembers that it has looped to frame 9 once already and the maximum loop count is set to 1 so now it won't jump to frame 9. Instead, it just goes to the next frame, frame 6, which is the first frame of our smile animation (the first Click Animation). It also resets the number of times it has looped from frame 5 so the next time we come to frame 5, it will be as if it were the first time. (Breathe!)
Now we have a mascot with two Click Animations! Each time you click on the mascot, it will toggle back and forth between the two animations by using frame 5 as a decision frame.
Congratulations! You should now know how to make a mascot with two Click Animations!

Third Click Animation

But wait - there's more! Let's add a third Click Animation: Being Sad.
We're using the same Sad animation from the first tutorial. As you recall, the animation should look like this:

Sad look
We add it to the end of our mascot and update the Click Animation To and From values to include our new frames:
Notice that I've also added a new frame 13 for the Shifty animation. Since that is no longer the last animation in the mascot, we need a frame that tells the mascot to always go back to frame 1 when the Shifty animation finishes.
Again, at this point, that third Click Animation will never happen. Let's make it happen. Watch closely.
First, let's insert a new frame 9. To do that, we select on the existing frame 9 by clicking in the raised "9." button so that it is depressed. Then click on Add Frame and set the properties of the new frame 9 as follows:
As you can see, we're setting up frame 9 to be the same kind of decision frame that we used in frame 5. This time, it will be a toggle between our second and third Click Animations (Shifty and Sad).
When we inserted the new frame 9, frame 5 started pointing to frame 10 (the old frame 9) so adjust frame 5 to point to the new frame 9.
Now what will happen when we click on our mascot? Each time we click, it will toggle back and forth at each decision frame. If you were to keep clicking, the sequence would be: Sad, Smile, Shifty, Smile, Sad, Smile, Shifty, Smile...
As you can see, the Smile happens every second time and, the rest of the time, if switches back and forth between Sad and Shifty. This might be exactly the effect you're looking for.
What if you want it to do each one once in a 1, 2, 3, 1, 2, 3, 1 2, 3 pattern? Just adjust frame 5 to a min/max of 2 as follows:
Do you see what happens? The first two times control reaches frame 5, it will jump to frame 9. If you were to keep clicking, the sequence would be: Sad, Shifty, Smile, Sad, Shifty, Smile...
The complete mascot script should look like this:
And, if you click every time she blinked, it would behave like this:

Click, Click, Click

Wrap up

You should now understand the basics of creating a mascot with multiple Click Animations and, hopefully, you'll see how this can be extended to have as many Click Animations as you like. You could even use it for animations that are non-Click. The only limits are you imagination.
Once you have digested Multiple Click Animations, read How to Create Multi-State Mascots to add even more flexibility and life to your mascot!
Return to Otaku Mascot Tutorials

Otaku Mascot Navigation
New! Get the Program Tutorials Mascot Guidelines How to Submit a Mascot
Top 20 list by
Artists
list by
Categories
Mascot Library  

Thank you for visiting Otaku World.
Tell your friends about us and please link to us from your web site.
Please link to Otaku World
Please Link To Us

Stephen P. Lepisto
e-mail: Master of the Otaku Mascots
(owmaster@otakuworld.com)
Stephen Lepisto, Master of the Otaku Mascots