Until now, we’ve been using only the main timeline to create tweens and animations. While this works in most cases, sometimes this complicates things. If we use movie clips, we can add animation to individual parts of a larger symbol.

Start by creating a new Flash file, Action Script 3.0, and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 but change the canvas colour to white. Save this file as skateboarder.fla in your Drive or DropBox folder.

1. Change the name of the first layer to Sky.

2. Select the rectangle tool, set the stroke to none, and the fill colour to blue.

Use this to create a sky across your whole stage.

3. Using the pencil tool, draw some clouds onto the upper area of your sky. Use the paint bucket tool to colour them white.

4. Lock your sky layer, and create a new layer. Call this layer Ground.

5. Using the rectangle tool, create some grass on the lower half of the Ground layer. Make sure the stroke is set to black, and the fill to green. Use the Deco Tool to add some trees and flowers. Add different kinds of foliage to change things up.

6. Use the rectangle tool to draw a road on the lower half of the grass.

7. Select the line tool, set the stroke to yellow and the stroke height to 3. Set the stroke style to Dashed.

Click on the pencil to Edit the Stroke Style.

Set the Dash to 40 pts and the Spacing to 40 pts. (you can play around with this if you want to change those settings a bit according to your personal preference.)

Use this to draw some lines on your road.

8. Select Insert > New Symbol. Name this symbol skateboarder, and make sure the type selected is Graphic.

9. You will have a white screen where you can modify your skateboarder symbol. Your timeline bar should look like this:

At the top of the screen, you should see this:

On the left you can click the arrow or Scene 1 to return to the main timeline. On the right, you’ll see the name of the symbol.

10. Rename your first layer to Skateboarder.

Note*** When editing a symbol, you can create layers, just like on the main timeline; the difference is that these layers exist only within the skateboarder symbol, and nowhere else.

11. Draw a person on a skateboard, but without wheels. Use any of the tools in your toolbox. Here is an example:

Recall: The crosshair on the stage is the center of the object, and will determine how your symbols tween. As well, symbols have “Registration Points”, which can also mark the center of the symbol. This will be very important later! If you would like a recap on registration points and the center of a symbol, you can find it here.

We are leaving out the wheels for one important reason: if we want the wheels to spin by themselves, they need to be tweened separately from the rest of the skateboarder. While we could do this on the main timeline, there is an easier way to do this by using movie clips.

12. Select Insert > New Symbol. Create a symbol named wheel, but make the type Movie Clip this time.

13. Select the circle tool. Set the fill colour to grey, the stroke to black, and the stroke height to 3. Draw a circle on the stage of the new symbol by holding down shift while drawing. It should be 30×30.

14. Make sure the whole wheel is selected by double clicking on it, then open the align panel by selecting Window > Align.

By having the whole wheel selected and using these align buttons, your wheel will move itself so that the wheel is centered in the horizontal and vertical directions. This is very important, since when the wheel is spinning, where the center of the symbol is determines how it moves.

 

15. Select the line tool and set the stroke to black and the stroke height to 3. Draw two lines splitting the wheel in half.

Hint: Holding the Option key while you draw will allow you to draw from the center of the circle to the outside edge.

16. If you like, you can select the paint bucket tool, and colour two halves of the wheel to white. Your wheel would now look something like this:

***Note*** You may have noticed earlier that a new timeline appears on the screen when you are editing a movie clip. This is the power of movie clips: they can have their own timeline, which runs separately from the main timeline! So while other things can be going on in the main timeline, your movie clips can have something completely different going on in their own timeline. This will become apparent as we continue.

17. While you are still inside of your wheel symbol, change the name of layer 1 to Wheel.

18. Insert a keyframe at frame 20 on the wheel’s timeline, and create a motion tween between the first and last keyframes.

19. Select any of the frames during the tween. In the property inspector, set the tween to rotate clockwise once.

By pressing the return, you can test your wheel’s motion (it will spin in a circle once). If you need a recap on rotate tweens, you can find it here.

20. Open your library panel by choosing Window > Library and double-click on the skateboarder symbol to edit it.

Your library should now appear as seen below:

 21. Create a new layer, on top of your Skateboarder layer, and name it Wheels.

22. Drag two wheel symbols from your library to the stage, so that your skateboarder symbol is complete.

 23. Go back to your main timeline (click on scene 1 in the edit bar). Create a new layer called Skateboarder.

24. Drag a skateboarder symbol from your library onto your new layer.

If you test your movie, it should now look like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/movieclips1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

25. Move your skateboarder to the left of the stage.

26. Insert keyframes for your Skateboarder, Ground and Sky layers at frame 100.

27. Create a Classic Tween on your skateboarder layer. Go to the keyframe at frame 100 and move the skateboarder to the right of the stage.

If you test your movie, it should now look like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/movieclips2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

For an added challenge (and bonus marks) use the Bone tool to make the skateboarder appear more lifelike – have his arms, legs, even neck bend a bit to appear that he’s reacting to the motion of the board. It’ll look much better!

***Note: Hitting the return key to preview a movie clip tween will only work when you are editing a movie clip (ie. If you are on the main timeline, the animation will not show up). You can only see movie clip animations when you test the movie (Command + Return) or open the .swf file in your folder.

You might notice that the upper and lower half of your wheels sometimes lag behind the upper part of your wheels. That’s OK; when you are previewing a movie in Flash, this error will sometimes arise. When you open the .swf file in your Drive/DropBox folder, it should run without this glitch.

28. When finished, save your flash file and go complete: assignment5

Finished samples:

Tyler:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/mckay_assignment5.swf” width=”400″ height=”300″ targetclass=”flashmovie” play=”true” loop=”true”]

[/kml_flashembed]

 

Jordan:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/tait_assignment5.swf” width=”400″ height=”300″ targetclass=”flashmovie” play=”true” loop=”true”]

[/kml_flashembed]