Creating a Simple Animated Button - Flash Tutorial

This article comes with exercise files. Click on the link below to download:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

Step 1
Open the animated-button.fla file. On the Stage, you will see a smiley face.

Step 2
Use your selection tool to select the smiley face on the stage. MAKE SURE YOU SELECT THE WHOLE ARTWORK. Don't just click on it. Instead, use the selection tool to click and drag a selection area around the smiley face to ensure that the whole drawing is selected.

Then convert it into a button symbol named ButtonSmiley.

Step 3
Now double-click on the ButtonSmiley instance on the stage in order to enter symbol editing mode. In the edit bar, you should now see that you are inside the ButtonSmiley timeline.

Step 4
You will see that the UP state already has a keyframe. Insert keyframes in the OVER, DOWN, and HIT states as well.

Step 5
Then click on the OVER keyframe in order to select it. This is where we will place the animation so that the button becomes animated whenever the user mouses over it. The animation will actually be nested inside a movie clip that's going to be inside this OVER keyframe. We'll learn how to do that in the steps that follow.

Step 6
Once the OVER keyframe is selected, go to the stage and make sure that the smiley face is selected. MAKE SURE THAT THE ENTIRE THING IS SELECTED. Then convert it into a movie clip symbol named SmileyAnimation. We are converting it into a movie clip symbol so that we can place the animation inside it.

Step 7
After converting it into a symbol, double-click on the SmileyAnimation instance on the stage in order go inside its timeline. In the edit bar, you should see that you are now inside the timeline of the SmileyAnimation movie clip.

And remember, this movie clip instance is inside the OVER keyframe of the ButtonSmiley symbol.

Step 8
To animate the smiley face, we can use classic tweens. But first, we'll need to convert the smiley face into a symbol again since we are now actually inside the timeline of the SmileyAnimation movie clip. Inside the SmileyAnimation movie clip, the smiley face on the stage is just a drawing. It's not yet a symbol. We'll need to convert into a symbol so that we can use classic tweens to animate it. So once again, make sure that the whole smiley face is selected and convert it into a movie clip symbol. This time, just name it Smiley.

So now, we have the Smiley symbol, which is inside the SmileyAnimation symbol, which is inside the OVER keyframe of the ButtonSmiley symbol.

Step 9
Then insert keyframes on frames 10 and 20 of the SmileyAnimation symbol's timeline.

Step 10
Then go back to the keyframe on frame 10.

Step 11
Once you are back on the keyframe on frame 10, increase the size of the instance of the Smiley symbol on the stage. Select the free transform tool to be able to scale the instance on the stage.

Once the free transform tool is selected, click on the Smiley instance on the stage to make sure that it's selected. DO NOT DOUBLE CLICK IT. Just click it once.

You should then see adjustment handles on the corners and the sides of the instance.

Place the cursor over any of the corner handles and click and drag outward in order to make the Smiley instance bigger.

Step 12
Once you've increased the size, insert classic tweens in between all of the keyframes. We have 3 keyframes, so we'll insert a classic tween between the first and middle keyframes, and then we'll insert another one between the middle and last keyframes. To insert a classic tween, right-click anywhere in between the keyframes and choose Create Classic Tween.

Once the classic tweens have been added, your animation should now be complete.

To recap, you've created a nested animation inside the SmileyAnimation symbol. And since the SmileyAnimation symbol is inside the OVER keyframe of the ButtonSmiley symbol, this means that the animation is only going to come out when the user mouses over the button.

Step 13
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac). Once the test movie comes out, mouse over the smiley face and watch it animate. When you mouse out of the button, then the animation will stop. Mouse over it again, and the animation starts again.

Congratulations! You have just created an animated button.

Understanding When to Insert Frames, Keyframes and Blank Keyframes - Flash Tutorial for Beginners

This article comes with exercise files. Click on the link below to download:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

In Flash, you have the option to insert frames, keyframes and blank keyframes in the timeline. In this article, I'll show you a couple of examples that will help you understand when you should be inserting which.

Inserting Frames

Step 1
Open the insert-frame.fla file.

Step 2
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac) on your keyboard.

You'll see a jumping stickman animation, but you'll notice that the "jump!" title at the top only appears for a split second and then disappears (you might have to wait until it loops again to see it because it happens pretty fast).

Why is this happening?
If you take a look at the timeline, you'll see a layer called Jump. This is the layer that contains the "jump!" title. You'll see that this layer only has one keyframe at the very beginning.

After that first keyframe, the layer doesn't have any more frames. This is why the "jump!" title only appears for a split second - it only appears in that first keyframe. After that, there are no more frames that show it, so it disappears.

How do we make the "jump!" title appear all throughout the animation?
We'll need to insert more frames.

Step 3
Position your mouse pointer over the empty box on the Jump layer that's right on top of the very last keyframe of the Animation layer, then right-click on it.

From the context menu that pops up, choose Insert Frame.

This is going to insert frames starting at frame 2, all the way up to the frame that you right-clicked on.

There is no need to insert the frames one by one. Flash will automatically fill the frames in between the empty box that you right-click on and the nearest keyframe to the left.

Step 4
Test the movie and you should see the "jump!" title appear all throughout the animation.

So why did we have to insert frames?
Think of frames as extensions of keyframes. Inserting frames will extend the duration of whatever content is on the keyframe that is to the left of the frames. So since we simply wanted to extend the duration of the "jump!" title on the first keyframe, then inserting frames after the first keyframe is what we needed to do.

Inserting Keyframes

Step 1
Open the insert-keyframe.fla file.

Just like in the previous section on inserting frames, the Jump layer in this file only has one keyframe, so the "jump!" title is only going to appear for a split second. We're going to extend the duration of the "jump!" title for this exercise as well. But aside from doing that, we'll also make some changes so that the title changes to a new location after every 1 second or so. To do this, we'll need to add keyframes.

Step 2
This Flash document has a frame rate of 12 frames per second so that means that after every 12 frames, 1 second passes. So let's go ahead and insert a keyframe.

In the Jump layer, position the pointer over empty box no. 13. You'll see numbers after every 5 frames at the top of the timeline, so you can use that as a guide to locate empty box no. 13 in the Jump layer.

Then right-click on it and choose Insert Keyframe from the context menu.

You should now see a keyframe on frame no. 13.

So we now have two keyframes in the Jump layer. There is a keyframe on frame 1 and another keyframe on frame 13. You'll also notice that Flash automatically adds frames in between the 2 keyframes.

Step 3
Then let's add a couple more keyframes. Insert keyframes in the empty boxes for nos. 13, 25 and 37.

Step 4
Then position the pointer on empty box no. 48 of the Jump layer. Right-click on it, but instead of inserting a keyframe, just insert a regular frame. For this exercise, we don't need a keyframe at the end of the Jump layer. We just want to make sure that we have enough frames to match the keyframes in the Animation layer below.

What happens when you insert a keyframe?
When you insert a keyframe, the contents of the previous keyframe (the objects that are on the stage) are copied to the newly inserted keyframe. So just like frames, inserting a keyframe will also end up extending the duration of the contents of the previous keyframe. But the difference is that you can make independent changes to the contents of each keyframe. This is not the case when you make changes to just regular frames. If you make changes to the contents of one frame, the contents of the frames connected to it will change as well. The concept of being able to make independent changes with keyframes will be illustrated in the next steps.

Step 5
So now that we've added a total of 3 new keyframes, we'll go ahead and change the position of the "jump!" title on each of those new keyframes.

First, click on the keyframe on frame 13 in order to select it.

Then make sure you choose the selection tool from the tool bar.

Then click and drag the "jump!" title on the stage and move it to a new location anywhere on the stage.

Then go to the keyframes on frames 25 and 37 and move the "jump!" title on these keyframes to new locations as well.

So in all of the keyframes in the Jump layer, the "jump!" title should be in different locations.

Step 6
Go ahead and test the movie, and you should see that every 1 second, the "jump!" title is going to move to a new location.

So when should we insert keyframes?
Add a keyframe everytime you want to make some kind of change. Each keyframe is independent of the other keyframes. This means that if you make changes to the objects on the stage in one keyframe, the state of the objects in the other keyframes are unaffected. This is why when we move the location of the "jump!" title in one keyframe, the positions of the "jump!" title in the other keyframes are unaffected. So when we play the animation, the title moves to a new location each time the playhead gets to a new keyframe.

Inserting Blank Keyframes

Step 1
Open the insert-frame.fla file.

Step 2
Test the movie, and you will see that the "jump!" title appears all throughout the animation. In this section, we'll make the "jump!" title disappear when it gets to the middle of the animation.

Step 3
Position the cursor over frame 25 of the Jump layer.

Then right-click on it and choose Insert Blank Keyframe.

You should immediately see the "jump!" title disappear from the stage. And you'll also see the remaining frames right after the blank keyframe become blank as well. This means that starting from the new blank keyframe, the "jump!" title will no longer be on the stage.

What is the difference between a keyframe and a blank keyframe?
You can make independent changes with both a keyframe and a blank keyframe. The main difference is that with a blank keyframe, there is simply nothing on the stage (but only for the layer with the blank keyframe - the other layers are unaffected since they have their own set of frames, keyframes and blank keyframes). Whenever you insert a blank keyframe, you start off with a blank slate at that point of insertion. You can then keep it empty, or you can decide to add or draw something new on that blank keyframe. But once you draw something, then it's no longer a blank keyframe since there is already something on the stage. Conversely, if you have a keyframe, but you decide to remove the contents of that keyframe, then that keyframe becomes a blank keyframe.

Step 4
Test the movie to see the "jump!" title disappear in the middle of the animation.

Summary

• Insert frames if you simply want to extend the duration of something that appears on the stage.
• Insert keyframes if you want to make independent changes at certain points in the animation.
• Insert blank keyframes if you want to make a keyframe that is empty.

Try This On Your Own
Create one Flash movie where the following things happen:

1. When the Flash movie begins, a green circle appears for 1 second and then disappears. Place this green circle in the lower-left corner.
2. When the Flash movie begins, wait 1 second, and then a blue circle appears in the center of the stage and stays there for 2 seconds. After that, it will disappear for the next 2 seconds, and then it will reappear again in the exact same spot, and stay there for 1 more second.
3. When the flash movie begins, wait 3 seconds and then a red circle appears and stays there for 2 seconds, and then disappears again after that. Place this red circle in the lower-right corner.

Creating a Frame by Frame Animation | Flash CS5 Video Tutorials for Beginners

In this Flash CS5 video tutorial for beginners, you'll learn how to create a simple frame by frame animation.

Topics covered in this short video:

• Inserting blank keyframes
• Onion skin
• Copying, pasting and reversing frames
• Previewing your Flash movie

Thanks for watching. If you liked the video, please share it with your friends.

Video transcript:

0:06 an animation
0:07 is really made up of a series of images
0:10 these images
0:11 referred to as frames
0:13 are then played in rapid succession, creating the illusion of movement
0:18 let's go ahead and learn how to create one in flash
0:22 i've got a new flash document open
0:24 and let's first take a look at the timeline
0:28 here, you see a blank keyframe represented by this empty circle inside a box
0:34 in flash
0:35 you'll need a keyframe
0:37 to be able to draw on the stage
0:39 whenever you start a new flash document
0:41 you'll always have one blank frame by default
0:45 now let's go ahead and draw a stickman
0:47 on the stage
0:49 select the brush tool
0:51 choose your desired color, size, and shape, and draw your stick man
0:59 once you've drawn your stickman
1:00 let's add another blank keyframe right after the first one
1:05 right click on the next empty box
1:07 and choose insert blank keyframe
1:10 you'll see the stickman disappear
1:12 that's because we are now on the second frame of our animation
1:16 the stickman that we just made is on the first frame
1:19 so now we start drawing the second frame of our animation
1:25 before we continue
1:26 let's activate the onion skin feature
1:28 by clicking on this button right here
1:31 after you click on the button
1:33 you're going to see a lighter version of
1:35 the stickman that you just drew appear on the stage
1:39 the onion skin feature
1:40 allows you to see what's the inside the other frames
1:43 so that you can use it as a guide
1:45 when you draw the rest of your animation
1:48 so the stickman that you see here
1:50 is not actually on the second frame
1:52 so what we want to do here is
1:54 draw over the stickman
1:56 but make some small changes in order to make our character
2:00 appear as if it's moving
2:02 for this one, i'm simply going to raise one arm slightly higher to begin the
2:06 waving action
2:08 and then we simply repeat the same process of adding a blank keyframe and
2:12 changing the position of the stickman's arm to complete the animation
2:16 so now i've got six keyframes
2:19 but my animation isn't complete yet
2:22 i've only finished half of the needed frames
2:25 what i have here so far
2:27 is the stickman
2:28 moving his arm up
2:30 to complete the waving action i now need to draw the frames that show
2:34 the stickman moving his arm down
2:37 basically what i need to draw
2:40 are the same frames i already have
2:42 except that i need to draw them in reverse
2:46 but instead of drawing the rest of the frames manually
2:49 i'm going to show you a neat little trick
2:52 that will help us finish the animation faster
2:56 i'm first going to select all of the existing frames
2:59 i'm going to click on the first one
3:02 then i'll hold down the shift key on my keyboard
3:05 and i'll click on the last one
3:07 in order to select the entire range
3:10 now that i have all these frames selected
3:13 i'm going to right click on the selection
3:16 and choose
3:17 copy frames
3:20 once the frames are copied
3:22 i'm going to right click on the next available empty box
3:26 and i'll choose
3:27 paste frames
3:29 and now that these new frames have been added
3:32 i'm going to need to reverse them
3:34 so that the arm will
3:35 move in the opposite direction
3:38 make sure that the new frames are selected
3:41 then right click on the selection and choose reverse frames
3:47 and now
3:48 the animation is complete
3:50 if we scrub through the timeline by clicking and dragging the playhead
3:54 we'll see that the arm moves up until frame six
3:58 and then moves down
3:59 as we go through
4:01 the next frames
4:03 in order to preview the animation
4:05 choose control test movie
4:08 in flash professional
4:10 or you can also press command + return on a mac or control + enter on a pc
4:16 and there's the animation
4:18 you'll notice that the animation keeps running even though we only have twelve frames
4:23 that's because by default
4:25 a flash animation is going to keep looping until you close the movie

Nesting Animation Inside a Movie Clip Symbol - Flash CS5 Video Tutorial

In this Flash CS5 video tutorial, I will explain the concept of nesting animation inside a Movie Clips symbol's timeline. I'll take you through the process of creating a very simple animation that will teach you how to do this.

Adding a Motion Guide - Flash CS5 Video Tutorial

A motion guide allows you to make an object move along a path, instead of on a straight line. In this Flash CS5 video tutorial, I'll show you how to use classic tweens and the pencil tool in order to add a classic motion guide layer to your Flash CS5 project.

Creating a Layer Mask - Flash CS5 Video Tutorial

In this Flash CS5 video tutorial, I'll explain what a layer mask is, and I'll show you how to create one that's animated.

Welcome to FlashPotential.com

Tutorials to help you reach your potential as a Flash designer.