13
Hello!
Welcome to my guide on Flash Animation.
In this Tutorial, we will make a simple animation of a ball bouncing.
So, stick along, and you may learn something to impress your friends!
Step 1
Go download and install Vectorian Giotto. It's Free!
http://vectorian.com/downloads/
If you are on Mac/Linux, sadly, you cannot run Giotto.
However, all is not lost, as I will be making a Mac/Linux Compatibility Tutorial shortly.
Step 2
Launch it. When you first start it up, it should look something like this.
It looks complicated, but it's not. Let's move on.
Press Ctrl and J at the same time. A box labeled "Document Properties" should come up.
Copy all the settings from this picture.
Hit OK.
Done? Good. Let's move on to Step 3.
Step 3
Now, when you return, you should be greeted by a big green box.
Click on that box once, then scroll out until you see the entire box.
Now, to the right of that, you should see 2 Color Pickers.
Using the bottom Color Picker, pick any Color you want. For this example, I'm using Red.
Now, Press O (Or use the oval tool to the left.).
Your cursor should turn to a crosshair.
Click and drag, and make a ball inside the Green box.
It should look something like this.
Now, press V and click on the ball once.
Now, right click the ball, and click "Convert to Symbol".
Name it "Ball" and click OK.
Now, look near the top of the screen, and look for this thing:
See It? This thing is going to become your best friend. You will see why in a second.
To the right of the little thing that looks like a piano key with a black dot, (this is a "Keyframe") just a little bit, right click and click "Insert Keyframe".
After, it should look like this:
If the second keyframe is long, you didn't do it correctly. simply click and drag the second one close to the first one.
Now, make sure the second keyframe is highlighted. If it is, move the ball down to the middle of the green box.
It should now look like this:
Now, insert another keyframe right next to the second one. this will be the third keyframe.
Make sure the third keyframe is highlighted, and then move the ball to the bottom of the green box.
It should look like this:
Good. Now, we need to spread out the keyframes.
Click and drag each of the keyframes until they are 2 apart.
Use this picture for reference:
Done? Good. here comes the fun part.
Right click on each keyframe, and click on "Create Motion Tween"
Now, if you press the "Rewind" and "Play" buttons at the top of the screen, you now have an animation of a ball falling.
If the animation feels choppy, increase the FPS in the Document properties.
Time for step 4.
Step 4
Now that you have the ball falling, you need to create a "Squish" effect.
Create another keyframe, and press Q. Click on the ball once, and use the boxes to shape it to
make it look squished.
Add another keyframe. Using the boxes, revert the ball back into a ball shape.
Move the ball to the middle of the green box.
Add another keyframe, and move the ball to the top of the green box.
Add a motion tween to all of the keyframes (Right click -> Create Motion Tween)
Space out all of the keyframes, using this picture as a guide.
Almost done!
Export your Flash Animation to where ever, and done!
You're Done!
Congrats! If you followed these steps correctly, you have just made a flash animation!
Open the .swf file you saved, and done! Enjoy your new flash animation!
If you had any problems, leave them in the comments and I will get back to you.
Welcome to my guide on Flash Animation.
In this Tutorial, we will make a simple animation of a ball bouncing.
So, stick along, and you may learn something to impress your friends!
Step 1
Step 1
Go download and install Vectorian Giotto. It's Free!
http://vectorian.com/downloads/
If you are on Mac/Linux, sadly, you cannot run Giotto.
However, all is not lost, as I will be making a Mac/Linux Compatibility Tutorial shortly.
Step 2
Step 2
Launch it. When you first start it up, it should look something like this.
It looks complicated, but it's not. Let's move on.
Press Ctrl and J at the same time. A box labeled "Document Properties" should come up.
Copy all the settings from this picture.
Hit OK.
Done? Good. Let's move on to Step 3.
Step 3
Step 3
Now, when you return, you should be greeted by a big green box.
Click on that box once, then scroll out until you see the entire box.
Now, to the right of that, you should see 2 Color Pickers.
Using the bottom Color Picker, pick any Color you want. For this example, I'm using Red.
Now, Press O (Or use the oval tool to the left.).
Your cursor should turn to a crosshair.
Click and drag, and make a ball inside the Green box.
It should look something like this.
Now, press V and click on the ball once.
Now, right click the ball, and click "Convert to Symbol".
Name it "Ball" and click OK.
Now, look near the top of the screen, and look for this thing:
See It? This thing is going to become your best friend. You will see why in a second.
To the right of the little thing that looks like a piano key with a black dot, (this is a "Keyframe") just a little bit, right click and click "Insert Keyframe".
After, it should look like this:
If the second keyframe is long, you didn't do it correctly. simply click and drag the second one close to the first one.
Now, make sure the second keyframe is highlighted. If it is, move the ball down to the middle of the green box.
It should now look like this:
Now, insert another keyframe right next to the second one. this will be the third keyframe.
Make sure the third keyframe is highlighted, and then move the ball to the bottom of the green box.
It should look like this:
Good. Now, we need to spread out the keyframes.
Click and drag each of the keyframes until they are 2 apart.
Use this picture for reference:
Done? Good. here comes the fun part.
Right click on each keyframe, and click on "Create Motion Tween"
Now, if you press the "Rewind" and "Play" buttons at the top of the screen, you now have an animation of a ball falling.
If the animation feels choppy, increase the FPS in the Document properties.
Time for step 4.
Step 4
Step 4
Now that you have the ball falling, you need to create a "Squish" effect.
Create another keyframe, and press Q. Click on the ball once, and use the boxes to shape it to
make it look squished.
Add another keyframe. Using the boxes, revert the ball back into a ball shape.
Move the ball to the middle of the green box.
Add another keyframe, and move the ball to the top of the green box.
Add a motion tween to all of the keyframes (Right click -> Create Motion Tween)
Space out all of the keyframes, using this picture as a guide.
Almost done!
Export your Flash Animation to where ever, and done!
You're Done!
Congrats! If you followed these steps correctly, you have just made a flash animation!
Open the .swf file you saved, and done! Enjoy your new flash animation!
If you had any problems, leave them in the comments and I will get back to you.
| Tags |
1 Update Logs
Update #1 : by dude58 08/31/2012 9:44:58 pmAug 31st, 2012
Divided into spoilers
1373652
6
EccentricEremite
Kraggle09
TheFirstACT
TravisaInc
ghostoftheglade
JDEE008
ScotsMiser
Espresso778
MaximusPrime23
Dinosaurboy20007
Create an account or sign in to comment.
This is my first tutorial, after all.