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.
Thank you for visiting Otaku World.
Tell your friends about us and please link to us from your web site.
|
Please Link To Us
|