Animating in Flash has the potential to seem unnatural at times. For example, if you want an object to go from one spot to another, but curve along the way. Simply tweening a symbol from one spot to another will make it go directly to the other spot in a straight line (no curvature). If faced with this problem, the amateur Flash user would simply revert to Frame by Frame animation. Luckily, we know that Flash has provided us with an answer to this need.
Flash uses motion guides to help use determine a path for our animations to follow. It does this in the form of adding a layer to our timeline. In this lesson, you will see exactly how this feature works.
Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 but change the canvas colour to black. Save this file as orbit.fla in your DropBox or Drive folder.
1. Select the Oval tool change the fill colour to white and the stroke to none.
2. Draw a perfect circle by holding shift as you drag.
3. Use the arrow tool to select the oval and to position it in the middle of your stage area. This will also bring up the oval properties in the property inspector.
4. In the property inspector change the size of the oval to 170 x 170.
5. Choose the Paint Bucket Tool and set the fill colour to the radial blue gradient (preset)
6. Using the Paint Bucket Tool, click in the bottom left corner of the oval.
This should make your oval appear as seen below:
7. Name this layer Planet
8. Select Frame 40 in the Planet Layer and press F5 to insert a new frame.
9. Lock the Planet Layer and create a new layer named Moon.
10. In Frame 1 of the Moon layer, draw a perfect yellow (#FFFF00) cirlce (50 x 50) with no stroke.
11. Use the arrow tool to position it on the bottom left side of the stage.
12. With the Yellow oval selected, choose Modify > Convert to Symbol or press F8
13. Choose Graphic Symbol and name it moon.
14. Select frame 40 on the Moon layer and press F6 to insert a keyframe.
15. Right-Click on the Moon layer between frame 1 and 40 and choose Create Classic Tween
This won’t do anything yet as we have not yet made changes to the second keyframe.
Creating A Motion Guide
16. Right click on the NAME of the Moon Layer (not in a frame on the timeline), and choose the Add Classic Motion Guide.
Notice that the Moon layer gets indented as the motion guide is now attached to the moon layer.
17. Choose frame 1 of the guide layer
18. Choose the oval tool, change the stroke to white and the fill to none.
19. Draw an oval that closely resembles the one seen below:
Notice that as you did this, the moon you drew snapped to the ring. Now we have to cut a section out of the ring using the arrow tool.
20. Select the Arrow Tool and drag over the bottom section of the ring to select it.
21. Use your delete key to cut the selected section.
22. Using the Arrow Tool, select the Moon symbol on frame 1 and drag it to the left opening of the ring.
Notice as you drag, the oval uses a center circle point to keep along your pre-determined path. This is called “snapping to a guide”.
23. Select the moon symbol on frame 40 and drag it to the right opening of the ring.
24. Select Frame 1 in the Moon layer and press the Enter key to play the animation.
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/orbit1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
You may notice that it seems strange because the moon does not pass behind the planet.
25. To fix this, simply drag the planet layer above the moon layer and its guide layer.
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/orbit2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
Note – You don’t have to use the oval drawing tool to create a motion path. You can use the pencil, pen, or any other tool to create a path, so long at the resulting shape drawn on the layer is a line only (no fill colours or closed off shapes).
26. Save your Flash file and go complete assignment3
Completed Work:
Mariel:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/Mariel_motionpath.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
Tyler:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/TylerMotionPath.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]
[/kml_flashembed]
Jordan:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/JordanMotionPath.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]
[/kml_flashembed]