Home >> Flash Tutorials >> Flash Guide Layer Tutorial
Flash Guide Layer Tutorial

Flash Guide Layer Tutorial

When it comes to animation, nothing beats Flash. Flash has an arsenal of powerful tools that help to make animations easily. If you have done some animation in flash then you know that frame by frame animation gets a little hectic sometimes. There is tweening ;  but it is only helpful when the change in position of a body is in the same direction. If you want your object to follow a specific path which is not in one direction then that’s where guide layers come in. Guide layers are exactly what their name suggests, they guide the object to maintain their path of motion. In this tutorial I am going to show you how to use guide layers. You have to know the basics of animation in Flash before you can take this tutorial, If you want to start on that then please see my previous tutorial about animation.

Start by creating a new document in flash. First of all we will make the object which we need to move. I am making a simple circle. The object needs to be a movieClip otherwise it would not work with the guide layer.

Now make a new layer and draw a line on it, this line is the path that the ball will follow. I have drawn a wavy line with a green color. The color is not important here because it would not be visible in the output.

Now right click on the layer with the path and select the guide option from the context menu. This will transform the layer into a guide layer.

You will know that it has successfully transformed when you see the icon of the layer change.

But the ball is not bound to the guide yet, to do that drag the ball layer with your mouse and move place it on the lower side of the guide layer. When the ball layer becomes a part of the guide you will see it like the image below.

To make the ball move with the line, the ball needs to be on the line first, drag the ball on the line such the circle showing the center of the ball is on the line.

Now press F6 on any other frame in the ball layer to insert a new frame there. Press  F5 on the same frame in the guide layer to extend the guide layer upto that frame. Now in this frame change the position of the ball but you have to make sure that the center of the ball is still touching the line.

At last right click on the middle of ball layer and choose classic tween to tween the ball. Press Ctrl+ENTER to test the movie and you will see the ball move along the line of the guide layer.

You can use this method to dramatically decrease the time of making an animation. I hope this helps you become a better animator.

Found this Flash Guide Layer tutorial too hard? Don’t worry, you have an easy way out. Check out Wix, an awesome free Flash website builder.

Ultimate Designer Toolkit

About Iggy Ko

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

4 comments

  1. Jack

    Nice tutorial…flash is really quite a versatile tool

  2. Mustafa

    Where is the Demo link please?

  3. edcsingh

    wow…. thanks for great tutorial.

  4. Teresa

    Great tutorial thx

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Flash Guide Layer Tutorial