Simple Walk Cycle Using FlashFollow the instructions to make a simple walk cycle using Flash.
1. Launch Flash.
2. Set up a new ActionScript 3.0 document
Look in the middle column for ActionScript 3.0
3. Set the size of the stage (the white area where you work) to what you are instructed. It can be changed in the Properties Panel. We are using 788 pixels x 576 pixels.
 |
| Click on the numbers to change them |
4. Set the Workspace to Animator from the Window Menu.
 |
| Setting up the workspace |
The interface should show the layout as below. Note the Panel names and the position of them.
 |
| The Interface Layout |
5. From the Tools Panel (the middle of the interface) select the Brush Tool and select any colour from the colour swatch next to the bucket tool.
6. Draw a simple leg shape using the Brush Tool.
7. Select the Leg by using the Selection Tool (the black arrow). Then go to the main menu at the top of the screen and choose Modify > Convert to Symbol.
8. Name the Symbol Leg and make sure you have the Movie Clip as the type of Symbol selected. Leave registration set to the middle (the little square boxes). Click OK.
 |
| Convert to Movie Clip Symbol |
9. Look at the Library Panel to the right of the screen. You can see the Symbol you created in there.
 |
| The Library Panel with a Movie Clip Symbol |
10. Double-click on the Leg Symbol in the Library. We are now inside the Leg Symbol. The stage now seems to cover the entire area.
 |
| Inside the Leg Symbol |
11. Go to the menu at the top of the screen and select Modify > Convert to Symbol. This is the second time you have done this! Yes that is right.
12. This time name the Symbol as Leg Graphic. Then select the Graphic as the type of Symbol. Click OK
Look in your Library Panel. You should have two symbols. One is the Leg symbol (a movie clip symbol) and one is the Leg Graphic symbol.
 |
| Two symbols in the Libary Panel |
13. Select the Transform Tool from the Tools Panel. It is the slightly darker one on this example with the dots and arrow.
 |
| The Transform tool |
14. Move the registration point on the Leg from the middle to the top of the leg. Click and Drag. On the picture below it is circled in red
 |
| The registration point moved to the top of the leg |
15. On the Timeline, click with the Selection Tool in Frame 10.
 |
| The Timeline. Frame 10 has been clicked and is orange |
16. Press F6 on the keyboard or go to the main Menu and select Insert > Timeline > Keyframe
 |
| Adding a Keyframe |
17. Click in Frame 20 and add a keyframe. The Time line now looks like this:
 |
| Keyframes added |
Well done! You have rigged everything correctly and now we can animate it.
Now lets make it move!1. Click in Frame 1.2. Using the Transform Tool, click on a corner Anchor point and rotate the leg back.
 |
| Frame 1 |
3. Click in Frame 10 and rotate the leg forward.
 |
| Frame 10 |
4. Frame 20 needs to be in the same position as Frame 1. Rotate the leg back to be in the position as Frame 1.We can copy and paste the frame to make it exactly right. For now just use your judgement.
 |
| Frame 20 |
5. Click in Frame 5 and go to the main menu and select Insert > Classic Tween
6. Click in Frame 15 and chose Classic Tween. The Timeline should look like this:
 |
| Timeline with Classic Tween. Note the blue colour and arrows. |
|
7. Press Command + Return on the Keyboard and watch your leg swinging back and forward. Extension Activities:1. Next we need to repeat the above to have two legs! 2. Add body and head3. Add arms (same principal as the legs!)4. Add a tween to make him walk across the stage
Very thorough. You should do me some tutorials to show the class. Well done. Steve
ReplyDelete