28 September 2011

Lab 8 : Guided motion / Motion Guide

1. create a layer named kotak
2. go to key frame 40 and add new frame (shortcut F5)



3. draw a box in that layer
4. go to the last unit of time line (40) an then click F6 (which is add a new keyframe)
5. right click on kotak layer, and click "Add Classic  Motion Guide"
5. Choose Pencil tool from toolbar and draw lines, use your imagination.




6. At  time line 1, Drag the box and you can see a small circle, drag the it until it snaps into the line's starting point. (or the box will automatically aligned to the line starting point)
7. Go to last frame and once again drag the box (small circle) to the line end point.
8. and then right click on the time line and choose "Craete Classic Tween"
9. Press Ctrl + Enter and voila! your box will now moved in the path (line) you drawed.


****Try this : Select the box layer.. and look at the properties.. Ensure the "Orient to path" is selected and then play your movies again. You will see what's the difference now

We have already learnt how to move a ball from the left of the screen to the right, now lets learn how to move an object from the left to right not necessarily in a straight line but in a zig zag motion, let take an object aeroplane on stage and we want it to go from the left to right in a zig zag or a smooth curve motion, we can do that by using a motion path or guide in Flash CS4, we do that by drawing a stroke or curve on a different layer and orient to path,. lets take an object for example like this aeroplane on stage and save it as a graphic symbol called plane, now call this layer1  aeroplane layer, now you must create another layer called guide layer on top of the aeroplane layer.
Right click on aeroplane layer -> Add motion guide
How to create a motion guide in Flash CS4



Lets go and lock the aeroplane layer and also make it invisible by clicking on the lock and eye icon on top of the layers, and work on the guide layer, in this guide layer on frame1 draw a curve in the form of a snake shape, it doesn’t matter what color you use, just draw a curve in a zig zag manner going from left to right of the stage like the one below.
How to create a motion guide in Flash CS4
Now we need to attach this aeroplane to the guide layer, so unlock and make the aeroplane layer visible, and lock the guide layer above the aeroplane layer by clicking on the lock icon. Now with snap objects turned on (as in pic)



click on the little circle in the middle of the aeroplane and take it to the starting point of the guide, it will automatically snap in place, lets make a motion tween and snap it to the right side of the guide, so lets create a new keyframe by pressing F6 in frame 24, now when you look at the stage from frame 24, we cant see the guide layer, now where has the guide layer gone, we need to insert keyframes in the guide layer because only frame 1 has the guide lines showing, but frame 2 to frame 24 does not have the guide lines showing, so go to frame 24 in the guide layer and press F5, now you will see the guide layer visible in the entire animation like the one below.
How to create a motion guide in Flash CS4



So in frame 24 in our aeroplane layer we need to get this aeroplane on the right side, so go to frame 24 and place the aeroplane to the right by clicking in the middle of the aeroplane grab it and drag it till it snaps into place. So in frame 1 it is on the left side of the guide and in frame 24 it is on the right side of the guide like the one below.
How to create a motion guide in Flash CS4



Now make a motion tween by clicking in the middle of Aeroplane the layers and select the motion tween. Now check your movie clip, you will notice that the aeroplane is going from the left to the right along the guide like the one below.
How to create a motion guide in Flash CS4


If you test you movie, the best thing about this guide layer is that it does not show up while running the movie clip. While you run the movie clip, although you see the aeroplane going along the path directed, but it is a little weird that it is wiggling back and forth, and that’s not the way an aeroplane flies.
Let’s use the free transform tool and go to the first frame and rotate the aeroplane in the way the guide is moving, also do this in the last keyframe (keyframe 24) and position it in the way the guidelines end like this one below.
How to create a motion guide in Flash CS4
How to create a motion guide in Flash CS4



When you test you movie clip, the animation is still not working properly as you see below
How to create a motion guide in Flash CS4



To get this properly click anywhere between your first and 24th key frame and go to your properties panel and you will notice that there is something called orient to path,
How to create a motion guide in Flash CS4



just check that option and test the movie clip.
How to create a motion guide in Flash CS4
If you find the animation too fast, that is the aeroplane moving from left to right too fast, you can insert some layers in-between the fist and twenty forth by clicking and dragging both the layers and pressing F5, lets say we want to take it up to frame 48, so insert frames in both the aeroplane and the guide layer till it reaches frame 48, now test you movie clip, you will notice that the aeroplane animates much slower and also looks good.
That’s it you have learnt how to make a motion guide in Flash CS4.

No comments:

Post a Comment