Welcome to our Ohio media's flash tutorials. In this tutorial, we will learn about motion guides and we are going to learn it with a very interesting example. Here's what we want to achieve by using a motion guide. We are going to animate a leaf as it floats in the air and finally rests on the ground like it on rigo. Here we have a file with a sketch of a leaf already. So we are going to open it you can choose to open a new file, press Ctrl plus n and then draw your own leaf.

In this tutorial, along with motion guides, we will also touch on how to think when we are drawing for animation and other basics. Okay, so if you have a leaf here, you can see that the outlines in the leaf are black Leaves outlines should be colored in a darker shade of its main color. So let's edit it. Double click on the stroke of the leaf to select all outlines in the leaf. Go to the stroke color scratch in the toolbar and drag the color picker onto the main color of the leaf. The stroke color is now the same as the leaf color.

Now, again click on the stroke color Tool and choose the custom color option. At the extreme right of the color dialog box, you can see the brighter and darker shades of the color we have selected. Now, you can select the right dark shade for the inner and outer lines done. Now remember how leaves fallen on the ground look like. Select the free transform tool from the toolbar. Stretch and skew it till you feel it's looking good.

Now let's reduce the size Have the leaf to suit our stage by using the scale and rotate option. For this, press Ctrl plus alt plus s and enter the value less than hundred. Repeat till you're satisfied with the size they should be okay. Keep the leaf at the side of the screen and lock the layer. This helps to protect the leaf object from getting edited accidentally. Now double click on the layer name in the layer stack and name the layer as leaf.

Since we are going to animate the leaf we need to specify its duration. Scroll the timeline and click on the hundred frame. Press f5 to create the frame. Okay, off to create a motion guide. At the bottom of the layer stack, you will find an add motion guide I can just beside the insert layer I can when you click on it, you will observe that the software automatically names it as guide leaf. This means that what we draw on this layer will guide the motion of the leaf.

That's what emotion guide is. It's a shape that defines a path for a symbol to move. So, you use motion guides when you want your object to move in a loop, or in a swirl on an irregular path. On our motion guide, we want to draw a path for the leaf as it slowly falls from a tree and then rests on the ground. Click on the first frame of guide leaf and select the pencil tool from the toolbar to begin drawing the motion guide path. You can also use the line, the pen tool, and even the rectangle and oval tools to draw your path.

Once we have the basic path, we can edit it. In this case, we chose the free transform tool and scaled it vertically to suit this screen. We'll need to smoothen it a bit to remember, the smoother the ball, the smoother the leaves motion. Later, you can experiment with Angular paths to an important tool to smooth and the path is the smooth tool. You can click it repeatedly till you get a path that is smooth to your liking in this editing, do remember to use this sub selection tool to where you think a patch from your path is not getting edited Well, you can simply delete the part and draw a fresh line. Use the stretch and skew options in the Free Transform tools to enhance your editing.

Okay, we are done with the path. Now, lock the motion guide layer. The next step is to attach the path to the leaf. For this, we must convert the leaf into a symbol unlock the leaf layer Select the leaf and press f8. In the Convert to Symbol dialog box, choose the graphic radio button. Keep the registration point in the center and name the symbol as leaf.

With the snap to guide tool on, click on the leaf and drag it close to the upper end of motion guideline. You will find that the registration point of the leaf symbol snaps to the line. We have defined the first point of our animation. Now to the end point. Go to the hundred frame and press f6 to add a keyframe on the stage. Drag the leaf to the ending point of the motion guide.

Back on the timeline between the first and hundred frames, right click and select create motion tween. Press the Enter key to preview your animation. Observe how the leaf sticks to the path. You'll also see that the leave is not moving naturally. It is keeping the same position throughout default. For a proper guided motion twin, select the first frame on the leaf layer.

Expand the property tab and click the Orient to path option. This option allows the leaf to change directions, making it follow the direction of the motion guide. Let's see how this is done. With the first keyframe selected, rotate the leaf so that it's tapering front follows the angle of the motion guide. Go to the last keyframe and repeat the rotation. Press the Enter key to preview looks better than before doesn't it?

See how the Orient to path option automatically rotates the leaf as the motion guide path scrolls down. But it's still a little less realistic. When a leaf falls. It doesn't always change directions. In fact, if there is no wind, the direction a leaf faces is more or less the same throughout the fall. So we'll turn off the Orient to path option.

Now, for a better effect, let's edit the leaf positions and angles further. we'll concentrate on the points where the motion guideline has turns. For this, drag the timeline seikar slowly to see where the leaf is reaching those turning points at each of these frames, press f6 to add a keyframe. We have a turning points so we should have eight more keyframes for our animation. After the keyframes are created, simply go to each frame and rotate the leaf to give it a feel of natural flow. Are you getting how the fall of the leaf is slowly beginning to gain a flow of its own?

To find out if it is getting better, drag the timeline seeker left and right. You will be able to judge how much rotation is needed to achieve near realistic visuals. If you want to achieve a specific effect, you can even unlock the motion guide layer and change the path itself. If you observe closely, you will find that the speed of the leaf is the same right through the animation that's not natural Is it? So? What do we do to give the speeds of feel of random changes?

Remember the ease in and ease out options we tried out in the camera movement tutorial. Let's recap. With the ease out option, animation speed increases in the beginning and decreases at the end. With the easy option, the animation slows down at the beginning and speeds up at the end. To use these options will first select the eight keyframes in between. Now, go to the property tab.

Click and drag this slider near the option now to give it an even more random and realistic feel. Let's edit it further. click on the Edit button next to the slider and make some changes using the nodes at the beginning and end. Click OK and press the Enter key to preview the effect. Do you see the effect now the leaf is slowing and speeding between the keyframes. Now think about how a leaf would fall to the ground.

It settles down smooth and slow, right. So let's see how to achieve that. It's simple actually, we need to only increase the time duration between the second last keyframe of the leaf and the last. Simply select the keyframes on both the layers and drag them to the hundred and 10th frame. Now, press the Enter key again to preview looks good. It does appear okay at this stage, but there is one more thing to be done.

When a leaf falls, it wavers on the axis. Sometimes it appears full. Sometimes it appears flat. Sometimes it even twists and turns. So how do we achieve this naturalness? Well, again, go to the individual frames and edited they're the main point to be Remember here is no the flow very well.

Drag the timeline seeker to judge what change you need. In our case, we go to the second turning point and use the free transform tool to skew the leaf just a little bit. Let's see the effect. See how one change makes the leap now fall much more naturally. Do the same for the other keyframes. You can access the Zoom tool if you need to make some delicate transformations in the leaf.

Press the Enter key to preview the animation. You can explore the ease in and ease out options here to achieve different speeds and effects for every keyframe this time before you preview, hide the motion guide layer. To do this, simply click the point under the icon. Press Enter key. At the end of the animation, you can scale down the leaf a bit for an effect of depth. Use the scale and rotate dialog box and enter values lesser than hundred to scale down.

If you want to increase the size of the leaf, you can enter values greater than hundred. After you're satisfied, you can even go inside the motion guide layer and extend or reduce the guideline itself. You can revisit the leaf symbol again and rotate it at the various key frames. Or add keyframes at other places and change the leaves position. This tutorial gives great opportunity to explore the ease in and ease out options. In this tutorial, we saw how to use motion guides to move a static graphic.

In the next part of the motion guide tutorial, we'll learn how to use motion guides again, for an animated graphic. We are going to help a butterfly move around the garden and visit the flowers around. Here's the effect we are aiming to achieve. Let's begin by opening a file we have already created for this tutorial. You can create a new file and draw a flower very big of your own to in this file, you can see that we have two layers. The lower one contains the actual sketch and the upper one has the butterfly.

Just like in the BG detection tutorial. This butterfly is a group of separate objects. Okay, before we begin, first things first name the bottom layer as background and the upper layer as butterfly one. Since we are going to work only on the butterfly layer, we'll unlock it before heading towards creating a motion guide, let's work on the butterfly a bit. We want to use motion twin to move this butterfly from flower to flower, so we'll need to convert it into a symbol. As usual, we'll press f8 to call the Convert to Symbol dialog box.

Select the graphic radio button. Keep the central registration point and name the symbol as butterfly. We want the butterfly to flap its wings as it moves around the scene. So let's see how that can be done. Double click the butterfly symbol to see the groups selected. Now let's make the animations of the butterfly a bit easy.

We do this by placing each object in the group on a different layer, press Shift plus control plus D on your keyboard. This is the shortcut for an option called distribute two layers. You can right click on the object and select distribute to layers in the menu to. When you do this, you will observe that the butterflies two wings, body and antenna are now each on a separate layer without any change in the order. Now, we want the butterfly to flap its wings, so we must add a few frames to every object. For this, we select the fifth frame on all layers with the mouse and press f5 to add frames.

It is the wings that will move so we must convert them into symbols to first let's select the right side wing with the Select tool. Then press f8 to bring up the Convert to Symbol dialog box and name the symbol right wing choose graphic and keep the registration point in the center. Now, select the left side wing and convert it to symbol. In this case, we have named it left wing. Now, look at the next step very carefully. When you select the left wing object, you will see an empty circle in the center.

This is the pivot point, also called the registration point. Click on this empty circle and drag it close to where it is joined to the butterflies body. Do the same for the right wing symbol to From now on, these wings will rotate or transform around these points. They are the objects new axes observed that the registration points of both wings are almost on the same horizontal line. This ensures that when we start Kale, ostrich the two wings, the axis will remain intact, and we won't have to use trial and error to match the two wings to each other. All right, now it's time to animate the two wings.

On the timeline, select the fifth frame on the layers of both doings and press f6 to add a keyframe. Observe that we are going to create a frame by frame animation here. We are now going to create various positions for the wings. Let's work on the middle frame, that is the third frame. Click on the third frames of both delays and create keyframes by pressing f6 now while you are on the third frame, select the right wing. Choose the free transform tool from the toolbar and squeeze it inside.

Repeat the same for the left wing. Right click all the keyframes of the two layers Choose create motion twin. To preview the effect, drag the timeline seeker back and forth. Observe that now the butterfly is flapping its wings. But this effect can be enhanced even more. Let's know how.

Click on the second frame of both delayers and press f6 to create a keyframe. Now go to the property tab. In the color drop down menu, choose alpha and 75%. On the fourth frame, again, create a keyframe and give it the alpha effect of 75%. preview the animation by dragging the timeline seeker back and forth. Observe that due to the alpha effect, when the wings closing, they become more transparent and as they open, they become opaque.

This gives the flapping unnatural look okay, we have animated the butterfly now. Let's move on to the motion guide part. Double click outside the work area to come to the main stage. You can see the butterfly. You can also see there are lots of places the butterfly can go to. But for this, we need to specify the duration of our animation, say 300 frames.

On the 300 frame, insert a frame by pressing f5 to preview the animation by pressing the enter key. You will see that the butterfly is flapping its wings, but it is static. It's time to move it which means it's time to bring the motion guide into the picture. First select the layer you want to guide in our case is the butterfly one layer only now click the Add motion guide icon at the bottom of the layer stack. Observe that flash names the guide layer as guide butterfly one now we'll do Emotion guide path for the butterfly to fly with the pencil tool. You can also use the line tool, the pen tool, and the rectangle and oval shape tools to draw a path.

Let's start the line from outside. This will look as if the butterfly is entering the scene from outside. Once we draw the line, we can edit it to suit our needs. In our case, the path is not very easily visible due to its color. Let's change it to black so we can easily work on it. Let's concentrate on making the butterfly fly throughout the scene from one flower to another and from one place to another When you have finished creating the basic path, it is always good to ensure that it is smooth.

The smoother your path, the smoother the animation. In our tutorial, the butterfly will fly to flowers, rest on them for a moment, and then fly again to the next flower. So, let's edit the path a bit to suit our objective. Now, we must assign this path to the object that is the butterfly. Unlock the butterfly one layer, click on the butterfly, drag it to the beginning of the line. Since the snap tool is switched on in the toolbar, the pivot point of the butterfly snaps to the line.

Let's scale the butterfly a bit first. Press Ctrl plus alt plus s to access the scale and rotate dialog box and enter the value 110%. Repeated till it appears big enough. Next, rotate the butterfly a bit to suit the direction of the motion guide. You will observe that the butterfly is flapping its wings, but it is still stationary, we need to specify its next position to let it move along the path. Let's go to the 55th frame on the layers timeline and press f6 to add a keyframe.

Click on the butterfly and drag it to its first stop the yellow flower in the left side bottom. scale it down a bit by around 80% to suit the size of the flower. Now that it is parked on the flower, we need to keep them stationary at this spot for a moment. So To retain the position, let's add a keyframe on the 16th frame by pressing f6. Select the frames between first and 16th frames and right click to select create motion tween. To check the animation, drag the timeline seek a fourth, you can see that the butterfly is moving well along the motion guide and settles on the flower.

Observe that its size has decreased as it reaches the flower. Time for the butterfly to take flight for its next destination. Let's say the flight begins at the 90th frame. So select that frame on the timeline and press f6 to insert a keyframe. Nearby we can see a purple flower. Let's get the butterfly to reach this flower on the 27th frame.

Create a keyframe there. As before, drag the butterfly to the purple flower rotated to suit the direction of the path. Now, the butterfly can stay here for a moment. That means we have to keep it on the same position till about the 130 third frame. While it sits at the position, we can add some rotation to make it more interesting. Note that the butterfly is now facing the direction of the next path.

This will help it fly smoothly when it sets out to find another flower. As before, apply motion when by right clicking the keyframes. preview the animation by dragging the timeline seeker Did you see that the butterfly is sometimes flying sideways? So we must place it's flying direction right. Just a little while ago, we learned about the Orient to path option. Let's see if we can use it here.

To solve the issue. Click on the 19th frame, go to the property tab and click on the Orient To path checkbox, see how the butterfly is now moving along the direction of the motion guide. To give the scene some depth, you can scale the butterfly down as it settles on the new flower for this selected on the hundred and 26th frame, and press Ctrl plus alt plus s. In the scale and rotate dialog box, enter the value 80%. Now, note that in the subsequent keyframe that the butterfly is stationary till the 130 third frame, so the scaling must be repeated for the next keyframe to let's preview the entire animation now. Observe that the butterfly comes into the scene, purchase on the golden flower and then stays there for a moment and turns around to suit its next slide direction. It flies again along the motion guide and reaches the purple flower and again stays there for a while.

When we keep an object's position stationary for some frames, we call it giving the object a hold. He has a pointer for you. Before previewing your animation, remember to lock all the layers by clicking on the lock icon on the layer stack. Okay, let's get the butterfly to fly again. Before that, check if you want any changes in the motion guide path. If you require a change, simply unlock the motion guide layer and use the Select tool to make the changes all right.

You must have observed that till this moment, we only put the butterfly from one end of a path to another. This time, we are going to do something different. Watch closely click the timeline on the 160 sixth frame. insert a new keyframe there by pressing f6 insert another keyframe on the 200 and 10th frame. Now drag the butterfly and place it in the middle of the path. You will see that the butterflies snaps to the motion guide.

A pointer to be remembered here is that whenever you drag an object to place it on the motion guide, keep the snap tool on. Okay. Now, as we did before, rotate the butterfly to suit the direction of the motion guide. Let's create a feel that the butterfly is flying deep inside the scene by scaling it down. Using the scale and rotate dialog box. We have inserted the value 80% and repeated the same function three four times.

See the difference between the two frames? Does it seem that the butterfly has flown away? Good. Let's bring it back and let it rest. On this mushroom in front we'll choose the 256 frame for its landing at the end of our motion guide. Click on that frame and press f6 to insert a keyframe.

Now, drag the butterfly to snap to the end of the line. Rotate it to suit the end direction of the line. Nothing the butterfly has come nearer to us. So Shouldn't it look bigger. Call up the scale and rotate dialog box and insert the value hundred and 20% in it. Repeat the same operation till you get the right size.

Let's drag the secret bar to see if we are getting the feel of the butterfly coming nearer. That looks neat. Let's see it in animation. For this. Select the frames between the hundred and 66 and the 256 frames on the timeline and right click to select create motion twin. preview the animation by pressing the Enter key After you preview the animation, you might feel that in some places, the speed is too slow.

If you feel so you can go to such places on the timeline, select the extra frames, and press Shift f5 to remove these frames. The rule to be remembered is, the less of the frames in animation, the faster the animation, but you have to be cautious when you want to delete frames from any animation. Make a point to select the corresponding frames of all related layers. For instance, observe that in our case, we wanted to delete frames from the butterfly one layer. But we also selected the corresponding layers, namely the background layer and the guide butterfly one layer. If you wish to edit it, you can go to the specific keyframes and then rotate or scale them using the toolbar and other options.

To see the final effect, hide the motion guide layer by clicking on the layer under the eye icon. Press Enter to preview the animation. Without the motion guide layer, it really looks natural, doesn't it? Great. We recommend you go through the entire tutorial. Up till this point to clarify all your doubts.

Make notes of the various steps and principles you learn here. All right, let's make this tutorial a bit more interesting. How about adding another butterfly to our scene? Here we go. Create a new layer by clicking the insert layer icon at the bottom of the layer stack. Copy the first frame of the butterfly one layer and paste it on the first frame of the butterfly to layer.

Observe that the layer automatically creates frames to fit original animation. Double click on the name to rename it as butterfly to. Again a caution when you are working with an object. Always make sure that all other layers unlocked. Our first butterfly entered this screen from the right. Let's bring this butterfly from the left.

So drag it to the left of the work area there. Now, with the butterfly Tulare selected, click on the Add motion guide icon at the bottom of the layer stack. The layer automatically takes the name of guide butterfly to Now select the pencil tool to draw the path on which we want the second butterfly to fly. As I said before, you can also use other tools like the line tool, the pen tool, or the shape tools to draw a path. Let's draw the path from outside the frame. Since butterflies generally don't fly straight, but in zigzag pattern, we We'll make the line wavy till it reaches the pink flower in our background.

Now, locate where the butterfly should go next. Let's say it roams around and settles on the golden flower at the back. While you're drawing, you can use the Select tool to edit the path to your satisfaction. use keyboard shortcuts for faster operations. From the golden flower, let the butterfly make an exit from the screen. Now let's attach the second butterfly to the motion.

I rotate it so that its head faces the direction of the motion guide. Keep the snap to lawn and then drag the butterfly to the beginning of the line. Since we have not given the motion twin to our second butterfly, it's not following the path yet. Let's repeat what we did for the first butterfly. Now. Watch closely and try to remember what we did before.

We will be assigning keyframes to the new butterfly and giving motion to win so the object gets animated. But a feel of depth in the scene will be either scaling up or scaling down the object Using the scale and rotate dialog box observed that at times when we want the two butterflies to intermingle with each other, and diet, animated frame stacks can be selected, dragged and dropped to suit our need. If we want to increase the length of any specific animated part, we can simply drag the keyframes forward. That way, we can accelerate or slow down the animation as per our need. Before the butterfly moves on to its next journey, we can give a whole to it for some frames. That gives it time to rotate and adjust to the direction of the new path.

The most important thing here is to keep reviewing the scene from time to time. That helps us decide whether we need to edit the path or make some changes in the size of the butterfly. It also helps us see if the speeds of the two butterflies are matching well with each other. While we preview the animation, you'll also observe that whenever one butterfly stops moving for some time, the other takes off and flies around. This keeps the viewer interested. This is a very important principle in animation, something must move on the screen at all times.

That's what keeps your viewer watching your animation. Okay, we are done with the animation. Now let's view the animation in totality. To see the real effect. Hide the two motion guide layers by clicking on the black circles under the icon. As a matter of habit, make sure you lock all the layers before you preview it.

Now press the Enter key to see the animation. Motion guides can help us create fantastic animations just like the one we saw in this tutorial. You can go even further and add some more butterflies in the distance or change their colors for a more vibrant scene. You can also try out camera movements for the background to give it an even realistic and charming feel. They did the motion guide paths to show the two buttons flies rotating around each other at some other animals, like a frog, maybe animate those clouds in the background, explore and have fun. And we are sure you're eager to experiment with your own backgrounds and your own butterflies Now, why wait?

It was a pleasure bringing you this tutorial on fundamentals of motion guides in Flash by aro media. Thanks for your time. Happy animating.