We’re going to make a really easy set of flash cards. Flash, flash cards. This would be great for anyone who wants to maybe make something interactive for kids to learn from, or a frame-by-frame click through cartoon or comic or something. Today, we’re making the beginning of the alphabet. Easy as A, B, C, 1, 2, 3!
We’re going to separate all of our elements to this animation to make editing easier.
Since we want the letter on each card to be in the same place, we’ll put the letter on one layer. On another layer we have the text “is for”, since that remains consistent through the whole animation. And then, on a third layer we have our subject for each piece (A is for Apple, with a picture of an apple).
On yet another layer, we’re going to have our navigation, which is going to consist of two arrows: one pointing left, and one right. To do this we create one arrow.
Select the arrow, outline and all if it has one, and either hit F8 or go to Insert>Convert to Symbol. Name it “arrow” and make its behavior “Button”.
Now that we have converted it into a symbol, we can reuse this symbol however many times we want and it doesn’t increase the file size of the end product.
Open your Library by hitting CTRL+L or go to Windows>Library.
Click and drag the arrow onto the stage with the other layer, making sure it’s on the correct layer of the animation. Then rotate it so it faces the other direction.
Note: You might want to lock all of the other layers while you’re working on one in particular, so you don’t add something where you don’t want it.
When you keep the navigation on one layer, you can just extend where the arrows are by adding empty frames after it. You always want the arrows visible, be sure the length of the navigation’s timeline is as long as your animation.
Create your other layers.
For the sake of this tutorial, I am only making A, B, and C. You are welcome to make this as detailed as you’d like though! You could even add some animations to make it more entertaining.
We’re almost done.
It’s important that we defined the arrow symbol as a “Button” because that’s what we’re using it for. You can’t make an actual button out of any other symbol behavior.
Click on the left arrow so it is outlined with the box.
Open your Actions window by going to Windows>Actions.
In the open typing space type:
on (release) {
prevFrame ();
}
The code means that when you click and then release the button, it goes to the next frame in the animation. The release part of the code is especially important because without it the button won’t react at all.
Do the same thing with the right-hand arrow. Select it, and type the following:
on (release) {
nextFrame();
}
Finally, create one last layer and call it “actions”. On the first keyframe, in the actions panel, type:
stop();
This stops the animation from flying through all of the frames immediately, and allows you to control it.
Well, there you have it, we’re finished! Enjoy your super-easy frame-by-frame buttons.
