Tutorial
Click on thumbnailed images to enlarge
You may have seen my [link] skin where I've used Flash to animate the banner. If you're interested in learning how this is done, here is a good tutorial to get your started.
With this tutorial, I will show you the basics of flash animation, including shapes, symbols and motion tweening. Keep in mind this is only lesson one. I plan to release more tutorials in the future to enhance what you've learned and also to teach you new concepts.
Here's a [link] of what I hope to have you accomplish by the end of this tutorial.
=================================================
[size=14]LESSON ONE[/size]
=================================================
[size=7]CREATING MOTION[/size]
First things first, let's make something move. :smile:
1) Launch Flash and create a new document: File >> New.
2) Rearrange your palettes: Window >> Panel Sets >> Designer [1024x768].
3) Select the oval tool (
) from the tools palette and note the color options available on the lower half of the tool palette.
Set the stroke color to black and the fill color to red as shown above.
4) Draw a ball on the top left corner of the stage. To draw with the oval tool, click and drag diagonally on the stage.
5) Click on frame 1 of layer 1 on the timeline to select the ball.
If selected correctly, there should appear to be a dotted pattern over your ball as shown above.
6) Convert the ball object into a symbol: Insert >> Convert to Symbol. Enter a name for the symbol and choose 'Graphic', then hit OK.
Once converted into a symbol its appearance changes. It is contained in a light blue box and also has a center point.
NOTE: In order to create a MOTION tween the object MUST be SYMBOL.
7) Select frame 10 on the timeline.
8) Insert a new keyframe at frame 10: Insert >> Keyframe.
9) With frame 10 still selected drag the ball to the bottom right corner of the stage.
10) Click on frame 1 and you'll note that the ball returns to the left edge of the stage. With frame 1 highlighted, select the Property palette on the bottom of your screen. Select the 'Tween' drop down menu and select 'Motion'.
After tweening has been turned on, you should now see an arrow between frame 1 and 10 on the timeline.
11) Play the animation: Control >> Play.
[link]
Notice that the ball is moving a bit too quickly.
12) Let's slow down the animation. We can do this by adding more frames to the animation. Select frame 1 and hit the 'F5' key 10 times or until the last frame is on frame 20 on the timeline.
13) Play the animation: Control >> Play.
[link]
Notice the ball is moving more slowly across the screen as before.
----------------------------------------------------------------------------
[size=7]CHANGING SIZE OVER TIME[/size]
Now I'll show you how to make your ball change size over time.
1) Click once on frame 20 on the timeline to select your ball.
2) Choose the Free Transform tool () from the tool palette.
Use the handle bars that appear around the object to increase the size.
3) Play the animation: Control >> Play.
[link]
Notice the ball gets larger as it moves across the screen.
----------------------------------------------------------------------------
[size=7]CHANGING COLOR OVER TIME[/size]
Now I'll show you how to make your ball's color change over time.
1) With the properties palette visible, select the 'Color' tab.
Select a tint color and set the transparency to 100%.
3) Play the animation: Control >> Play.
[link]
Notice the ball gets larger and changes color as it moves across the screen.
----------------------------------------------------------------------------
[size=7]CONGRATS ON YOUR FIRST FLASH ANIMATION![/size]
Experiment with some other color options, size, rotation, and shapes. Get a good feel for how things work and with a little practice, you'll be coming up with some interesting animations in no time. Enjoy!
----------------------------------------------------------------------------
Here are some examples of what I've done with motion tweening:
[url=http://rlabajo.computed.net/flash/southpark.html]South Park Movie[/url]
[url=http://rlabajo.computed.net/flash/intro.html]Coming Soon Splash[/url]
[url=http://rlabajo.computed.net/]My Old Design Portfolio[/url]
----------------------------------------------------------------------------
Copyright ?2004 Xquizit
You are not authorized to copy or distribute any content from this tutorial.
With this tutorial, I will show you the basics of flash animation, including shapes, symbols and motion tweening. Keep in mind this is only lesson one. I plan to release more tutorials in the future to enhance what you've learned and also to teach you new concepts.
Here's a [link] of what I hope to have you accomplish by the end of this tutorial.
=================================================
[size=14]LESSON ONE[/size]
=================================================
[size=7]CREATING MOTION[/size]
First things first, let's make something move. :smile:
1) Launch Flash and create a new document: File >> New.
2) Rearrange your palettes: Window >> Panel Sets >> Designer [1024x768].
3) Select the oval tool (
) from the tools palette and note the color options available on the lower half of the tool palette.
Set the stroke color to black and the fill color to red as shown above.
4) Draw a ball on the top left corner of the stage. To draw with the oval tool, click and drag diagonally on the stage.
5) Click on frame 1 of layer 1 on the timeline to select the ball.
If selected correctly, there should appear to be a dotted pattern over your ball as shown above.
6) Convert the ball object into a symbol: Insert >> Convert to Symbol. Enter a name for the symbol and choose 'Graphic', then hit OK.
Once converted into a symbol its appearance changes. It is contained in a light blue box and also has a center point.
NOTE: In order to create a MOTION tween the object MUST be SYMBOL.
7) Select frame 10 on the timeline.
8) Insert a new keyframe at frame 10: Insert >> Keyframe.
9) With frame 10 still selected drag the ball to the bottom right corner of the stage.
10) Click on frame 1 and you'll note that the ball returns to the left edge of the stage. With frame 1 highlighted, select the Property palette on the bottom of your screen. Select the 'Tween' drop down menu and select 'Motion'.
After tweening has been turned on, you should now see an arrow between frame 1 and 10 on the timeline.
11) Play the animation: Control >> Play.
[link]
Notice that the ball is moving a bit too quickly.
12) Let's slow down the animation. We can do this by adding more frames to the animation. Select frame 1 and hit the 'F5' key 10 times or until the last frame is on frame 20 on the timeline.
13) Play the animation: Control >> Play.
[link]
Notice the ball is moving more slowly across the screen as before.
----------------------------------------------------------------------------
[size=7]CHANGING SIZE OVER TIME[/size]
Now I'll show you how to make your ball change size over time.
1) Click once on frame 20 on the timeline to select your ball.
2) Choose the Free Transform tool (
) from the tool palette.
Use the handle bars that appear around the object to increase the size.
3) Play the animation: Control >> Play.
[link]
Notice the ball gets larger as it moves across the screen.
----------------------------------------------------------------------------
[size=7]CHANGING COLOR OVER TIME[/size]
Now I'll show you how to make your ball's color change over time.
1) With the properties palette visible, select the 'Color' tab.
Select a tint color and set the transparency to 100%.
3) Play the animation: Control >> Play.
[link]
Notice the ball gets larger and changes color as it moves across the screen.
----------------------------------------------------------------------------
[size=7]CONGRATS ON YOUR FIRST FLASH ANIMATION![/size]
Experiment with some other color options, size, rotation, and shapes. Get a good feel for how things work and with a little practice, you'll be coming up with some interesting animations in no time. Enjoy!
----------------------------------------------------------------------------
Here are some examples of what I've done with motion tweening:
[url=http://rlabajo.computed.net/flash/southpark.html]South Park Movie[/url]
[url=http://rlabajo.computed.net/flash/intro.html]Coming Soon Splash[/url]
[url=http://rlabajo.computed.net/]My Old Design Portfolio[/url]
----------------------------------------------------------------------------
Copyright ?2004 Xquizit
You are not authorized to copy or distribute any content from this tutorial.
Tutorial Comments
Showing latest 1 of 1 comments
