Mouse Trail Animation ~ Graffititools

Learn how to create a Mouse Trail Animation.

In this tutorial you will learn how to create a great mouse trail effect. The Flash tutorial clearly explains every step needed to build this animated mouse trails with beautiful smooth motion. There is no complicated ActionScript needed. This is a very easy mouse trail to build. So add some fun to your mouse cursor with this cool mouse trail effect:

Animated Mouse Trail Effect: Click to activate and then move your mouse around.

Animated Mouse Trail Effect: Variation on the theme.

Animated Mouse Trail Effect: Stars

In this tutorial you will learn how easy it is to create all of the above animated mouse trail effects. The top Flash Movie with the circle effect will be explained first.

Step One: Setting up the Document

You need to create a new document and set it's size to 600 x 300.

1. Open a New Flash Document: File - New (Ctrl N)
2. If the General Tab is not selected, select it:

3. Select Flash Document:

4. Click: OK

5. Go to: Modify - Document (Ctrl J)
6. Set the size to: 600 x 300 px (or similar)
7. Click: OK

Step Two: Creating the Graphic Symbol

You now need to create a Graphic symbol which will be used as the basis of the animation. I am going to use a circle but you could use any shape. Just as I used a circle in one example and a star in another.

1. Go to: Insert - New Symbol (Ctrl F8)
2. For Name use: Graphic Shape
3. For Type select: Graphic

4. Click: OK

5. Select the Oval Tool:

(O)
6. On the Stage drag out a: Oval

7. Return to the standard Selection tool:

(V)
8. Select the Stroke (outline) and on your Keyboard press: Delete

9. Select the: Circle
10. If the Information Panel is closed, open it: Window - Info (Ctrl I)
11. Set the Width to: 50
12. Set the Height to : 50

13. Set the Symbol Registration point to centre:

14. Set the X to: 0.0
15. Set the Y to: 0.0

This circle should now be centred. The cross indicates that the circle is in the centre:

16. If the Property Inspector is closed, open it: Window - Properties - Properties (Ctrl F3)
17. Select a color: 990033

The Graphic Symbol is now complete.

Step Three: Creating an Invisible Button

The invisible button is what triggers the animation to play.

1. Go to: Insert - New Symbol (Ctrl F8)
2. For Name use: Invisible Button
3. For Type select: Button

4. Click: OK
5. If the Timeline is not visible, open it: Window - Timeline (Ctrl Alt T)

6. Insert a Blank Keyframe: Insert - Timeline - Blank Keyframe (F7)

7. Select the Rectangle Tool:

(R)
8. On the Stage drag out a small: Rectangle
9. Return to the standard Selection tool:

(V)
10. Double click on the Stroke (outline) to select the: Stroke

11. On your Keyboard press: Delete
12. Select your: Rectangle

13. If the Information Panel is closed, open it: Window - Info (Ctrl I)
14. Set the Width to: 50
15. Set the Height to : 50

16. Set the Symbol Registration point to centre:

17. Set the X to: 0.0
18. Set the Y to: 0.0

Your Square should now be centred. The cross indicates that the square is in the centre:

Step Four: Creating the Animation

It is now time to nest the various Symbols into a new Movie Clip Symbol and create the animation effect.

1. Go to: Insert - New Symbol (Ctrl F8)
2. For Name use: Animation
3. For Type select: Movie Clip

4. Click: OK

5. If the Library is closed, open it: Window - Library (F11) or (Ctrl L)
6. Drag onto Stage the: Invisible Button

Invisible buttons always appear turquoise in color on Stage. This is only a preview mode so that you can see what you are doing whilst working. It will not be visible when the Movie is played.

Invisible Button's preview color.

7. Center the button by going to the Info Panel and setting both the X & Y to: 0

Note: The Invisible Button should now be in the centre of the Stage.

8. Make sure your button is still: Selected
9. If the Actions Panel is closed, open it: Window - Actions (F9)

Note: In the top of the Actions Panel it should say: Actions - Button

10. If Script Assist is on, Switch it off:

Note: With Script Assist on you cannot type in the Actions Panel.

11. Type (or copy & paste) the following actions:


          on (rollOver){
             gotoAndPlay(2);
          }

12. In the Timeline select: Frame 1

Note: In the top of the Actions Panel it should say: Actions - Frame

13. Type (or copy & paste) the following actions:


          stop();

14. Close the: Actions Panel (F9)

15. In the Timeline select: Frame 2
16. Go to: Insert - Timeline - Blank Keyframe (F7)
17. Drag from the Library the Graphic Symbol: Graphic Shape
18. Center the Symbol by going to the Info Panel and setting both the X & Y to: 0

19. In the Timeline re-select: Frame 2
20. If the Property Inspector is closed, open it: Window - Properties -Properties (Ctrl F3)
21. Select: Tween - Motion

22. Select: Frame 20
23. Go to: Insert- Timeline - Keyframe (F6)

If the Motion Tween is correct there will be a arrow in the Timeline with a blue background.

24. Select the Symbol: Graphic Shape
25. In the Property Inspector select: Color - Tint
26. A color swatch will appear, select a yellow: FFCC00

Your Symbol will now be Yellow:

27. In the Property Inspector now select: Color - Advanced
28. An Advanced Setting button will appear. Click on it:

29. Go to Alpha and set it to: 20%

Alpha sets an objects transparency. So your Symbol will become semi transparent:

30. Click: OK

Note: To complete the animation the symbol needs to become smaller.

31. In the property Inspector set the width to: 5
32. Set the width to: 5

Note: Your Symbol will almost disappear:

33. Test your animation by pressing on your Keyboard: Enter

You should see something like this.

Step Five: Creating a Group

It would be possible to just place lots of instances of the Animation Movie Clip all over the main Stage but it is quicker and more versatile to create a group. You will then place several of these groups onto the Main Stage.

1. Go to: Insert - New Symbol (Ctrl F8)
2. For Name use: Animation Group
3. For Type select: Movie Clip

4. Click: OK

Note: It is easiest to position a group of objects if you use the grid.

5. Go to: View - Grid - Edit Grid (Ctrl Alt G)
6. Select: Show Grid
7. Select: Snap to Grid
8. Select width: 25 px
9. Select height: 25px

10. Click: OK

11. If the Library is closed, open it: Window > Library (F11) or (Ctrl L)
12. Drag onto the Stage the Movie Clip: Animation
13. Drag the top left corner of the Movie clip so that it snaps onto the: Registration Point

You should find that the Symbol snaps to the Registration Point

14. Hold your Alt Key down and drag out a copy of the Symbol: Animation

The Alt Key enables you to create copies of objects. You should now have two symbols:

15. Drag the top left corner of the new Movie clip so that it snaps: Right of the Original Symbol

16. Continue making copies until you have a matrix of: 3 x 3 Animation Symbols

The completed group of Animation Symbols:

Note: You could have a group which has a different number of symbols. I have decided on this number and configuration because it fits into well into the shape of the Movie. You will see this in the next step.

Step Six: Setting Up the Main Stage

It is now time to place the animations onto the Main Stage and test the Movie. It is in this stage that you will see what your animated mouse trails look like. You first need to return to the Main Stage.

1. Return to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:

Note: If you cannot see the tab make sure that the Edit Bar open: Window - Tool Bars - Edit Bar

2. If the Library is closed, open it: Window - Library (F11) or (Ctrl L)
3. Drag onto the Stage the Movie Clip: Animation Group
4. Drag the top left corner of the Movie clip so that it snaps to the: Top Left of the Main Stage

5. Continue make 8 copies of the: Animation Group

Your Main Stage should be completely covered. You will have a matrix of: 4 x 2 Animation Group Symbols

The Main Stage with 8 copies of the Movie Clip: Animation Group

6. Test your Movie: Control - Test Movie (Ctrl Enter)

You should see something similar to this:

Drag your Mouse over the white space to see the Mouse Trails.

7. Close the Test Window:

Your Movie is now finished. In the next two steps I will show you how to edit the Movie to create variations of the Mouse Trail effect.

Step Seven: Adding Additional Trails

In this section you will create additional copies of the Animation Group to create a more abundant mouse trail.

Animated Mouse Trail Effect: More Trails.

1. Make additional copies of the: Animation Group Symbols
2. Stack the copies at random all over the: Main Stage

I have added an additional 20 copies:

Multiple copies of the Animation Group Symbol stacked one on top of another.

3. Test your Movie: Control - Test Movie (Ctrl Enter)
4. Close the Test Window:

Note: Every additional copy of the Symbol adds volume to your Mouse Trail. But every additional copy also needs additional computer processing power. So if you find that your Movie plays slowly, reduce the number of copies of the Group Symbol.

Step Eight: Changing the Trails to Stars

In this section I will show you how to change your mouse trails from spots to little stars.

Animated Mouse Trail Effect: Stars

1. If the Library is closed, open it: Window - Library (F11) or (Ctrl L)
2. Double click on the Symbol: Graphic Shape

This will take you inside the symbol and ready to edit it:

3. Delete the: Circle
4. Select the PolyStar tool:

Note: The PolyStar tool maybe hiding under the Rectangle Tool:

5. In the Property Inspector Select: Options

Note: You will not be able to see the Options button unless the Property Inspector is in Expanded view. If it is not in expanded view click on the small triangle in the bottom right hand corner of the Property Inspector: