Animation - Motion Tween	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Motion Tween

Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

Free Flash Tutorial

The aim of the tutorial is to show people who are new to Flash how to create a simple animation using technique called Tweening. Tweening enables you to move objects, change their colour, size and transparency. In this tutorial I will show you how move text around. This tutorial is designed to teach the beginner fundamental processes used in creating Flash Movies, in particular an introduction to Motion Tweening, the Timeline and Symbols.

Quick Links: 01. Start the Tutorial

Quick Links: 07. Changing the Animation Speed
Quick Links: 08. Ticker Tape - On and Off Stage Animation
Quick Links: 09. Changing the Symbols Properties: Free Transform Tool
Quick Links: 10. Changing the Symbols Properties: Transform Panel
Quick Links: 11. Changing the Symbols Colour
Quick Links: 12. Easing
Quick Links: 13. Rotation

Full Version: This is a shortened click by click version of a: Full Length Tutorial

Examples of each Option: Sample Movies

Step One: Setting up the Document

1. Go to: File > New > General Tab > Flash Document > OK (Ctrl N)
2. We are now ready to customise the document. Go to: Modify > Document (Ctrl J)
3. Type in the dimensions that you want for your Movie. The one above is: 550 x 400 px
4. Select a: Background Color
5. Click: OK
6. Go to: File > Save

Step Two: Creating a Symbol

1. If the Edit Bar is not open, open it: Window > ToolBars > Edit Bar
2. Go to: Insert > New Symbol
3. Give your Symbol a name: Bounce Grafx
4. For behavior select: Graphic
5. Click: OK
6. Select the Text Tool:
7. Click on the Stage and Type: Bounce
8. Once you have finished typing (or drawing) go back to the Selection tool:
9. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
10. Select any Font, text styles or colour that you might want: Font Styles
11. It is usually better to use: Static Text
12. Return to the Main Stage by clicking on the Scene 1 button in the Edit Bar:

Step Three: Placing your Symbol on the Main Stage

1. If the Library is closed, open it: Window > Library
2. Drag your Symbol onto the: Main Stage
3. Drag the Symbol to the left side of the Main Stage: Move left

Step Four: Animating your Symbol

1. Right click (Mac Ctrl click) in Frame 10 in the Timeline and select: Insert Keyframe
2. Select the Instance of your Symbol that is on the Main Stage: Bounce Grafx
   
3. Drag the Symbol (in Frame 10) to a new position: Move Right
4. Return to Frame 1 by clicking in: Frame 1
5. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
   
6. In the Property Inspector Select: Tween > Motion

Step Five: Test your Animation

1. If the red Playhead is not in Frame 1, Click on Frame 1 to place it back at the beginning of the Movie.
2. On your Keyboard press: Enter

Step Six: Extending your Animation

1. Right click on Frame 10 and select: Create Motion Tween
2. Right click on Frame 20 and choose: Insert Keyframe
3. Drag the Symbol in Frame 20 to a new position: Move Symbol
   
4. Test your Movie by pressing on your Keyboard: Enter
   
5. Right click on Frame 35 (or similar) and choose: Insert Keyframe
6. Drag the Symbol in the last Frame to a new position: Move Symbol
   
7. Continue to repeat this:
   
   
• Insert Keyframe
• Move Symbol
• Press Enter to Test
  

Step Seven: Changing the Speed of your Animation

The longer the Timeline is the longer it takes for the Playhead to get to the end. So slow animations have long Timelines. To slow the animation down you need to insert more Frames between the two Keyframes. Two do this:

Slowing Your Animation Down

1. Go to the Timeline and click in-between two Keyframes: Select Between Keyframes
2. On your Keyboard press: F5 (press repeatedly or continuously)

Speeding Your Animation

1. Go to the Timeline and click in-between the any two Keyframes: Select Between Keyframe
2. On your Keyboard press: Shift F5 (press repeatedly or continuously)

Step Eight: Ticker Tape - On and Off Stage Animation

1. In Frame 1 Move Symbol off Stage to the: Right
2. In the last Frame move Symbol off Stage to the: Left

Step Nine: Changing the Symbols Properties - Free Transformation Tool

1. Select the Free Transform tool:
2. Highlight your: Symbol
3. Then do one or a combination of the following: Resize, Rotate & Skew

Step Ten: Changing the Symbols Properties - Transform Panel

1. Go to: Window > Transform (Ctrl T)
2. Select the Symbol on Stage with the Selection tool:
3. Change some of the settings in the Transform Panel
   
4. Test your Movie by pressing: Enter

Step Eleven: Changing the Symbols Colour

1. Go to: Window > Properties (Ctrl F3)
2. Select the Symbol on Stage with the Selection tool:
3. Select the drop down arrow next to the word: Color
   
4. Select: Either:
   
   
   • Brightness: To make a Symbol dull or bright.
   • Tint: This will effect the colour of the Symbol.
   • Alpha: This will effect the transparency of the Symbol.
   • Advanced: You can set both Tint, Brightness and Alpha at the same time

Step Twelve: Easing

1. Create a: Motion Tween (see beginning of this tutorial)
2. In the Timeline select: Frame 1
3. If the Timeline is closed, open it: Window > Properties > Properties (Ctrl F3)
4. Select the: Ease Option
5. If you wish to customise your Ease press the: Edit Button
6. Drag the: Graph Line
7. Click: OK
   
8. Test your Movie by pressing: Enter

Step Thirteen: Rotation

1. Create a: Motion Tween (see beginning of this tutorial)
2. In the Timeline select: Frame 1
3. If the Timeline is closed, open it: Window > Properties > Properties (Ctrl F3)
4. Select the: Rotation
5. Select either: CW (Clockwise) or CCW (Counter Clockwise)
6. Test your Movie by pressing: Enter
7. Select the: Second to last Frame
8. Right click and select: Insert Keyframe
9. Right click on the last Frame and select: Remove Frames
10. Test your Movie by pressing: Enter

Full Version (including extensive notes) of this: Tutorial