Flash Tutorials: Learn how to create a Mouse Trail Animation.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Mouse Trail Animation

Free Flash Tutorial

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:

Example: Download the Flash file Int 136a Animated Mouse Trail Effect: Click to activate and then move your mouse around.

Example: Download the Flash file Int 136b

Example: Download the Flash file Int 136c

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.

Thanks: This animation was inspired with kind permission from Anna Simpson's web site: www.motivedesign.co.nz Thanks, Anna.

If you have some great Flash work that you would like to feature on this site then please contact me: Phil Schulz

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

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. If you want to learn more about Script Assist see the tutorial on 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.

Example: Download the Flash file Int 136b

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.

Example: Download the Flash file Int 136c

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:

6. Select Style: Star
7. Number of Sides: 5
8. Star point size: 0.5



9. Click: OK
   
   
10. Drag out a small star in the centre of the Stage: Draw a Star
11. Return to the standard Selection tool: (V)
12. Set both the Width & Height to: 17
13. Make sure your Star is in the: Centre of the Stage


My tiny Star.

14. Test your Movie: Control > Test Movie (Ctrl Enter)
15. Close the Test Window:

Of course you could place any shape into the Graphic Shape Symbol. I guess you could even put a small photo. When you make a great Mouse Tail animation send it to me (including the Flash file) and I will just place it here as an example. You will of course get credit and a link to your site. Have fun experimenting!

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!