Flash tutorial training on the Mouse Trail Animation

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Click by Click: Mouse Trail Animation

See Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

 

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: MotiveDesign.co.nz

Example: Download the Flash file Int 136a

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

See Full Tutorial for Additional Examples.

In this tutorial you will learn how easy it is to create three animated mouse trail effects. The above 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


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
  16. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  17. Select a color: 990033


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


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
  7. Center the button by going to the Info Panel and setting both the X & Y to: 0
  8. Make sure your button is still: Selected
  9. If the Actions Panel is closed, open it: Window > Actions (F9)
  10. If Script Assist is on, Switch it off:
  11. Type (or copy & paste) the following actions:
  12. on (rollOver){
       gotoAndPlay(2);
    }

  13. In the Timeline select: Frame 1
  14. Type (or copy & paste) the following actions:
  15. stop();

  16. Close the: Actions Panel (F9)
  17. In the Timeline select: Frame 2
  18. Go to: Insert > Timeline > Blank Keyframe (F7)
  19. Drag from the Library the Graphic Symbol: Graphic Shape
  20. Center the Symbol by going to the Info Panel and setting both the X & Y to: 0
  21. In the Timeline re-select: Frame 2
  22. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  23. Select: Tween > Motion
  24. Select: Frame 20
  25. Go to: Insert > Timeline > Keyframe (F6)
  26. Select the Symbol: Graphic Shape
  27. In the Property Inspector select: Color > Tint
  28. A color swatch will appear, select a yellow: FFCC00
  29. In the Property Inspector now select: Color > Advanced
  30. An Advanced Setting button will appear. Click on it:
  31. Go to Alpha and set it to: 20%
  32. Click: OK
  33. In the property Inspector set the width to: 5
  34. Set the width to: 5
  35. Test your animation by pressing on your Keyboard: Enter


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
  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
  14. Hold your Alt Key down and drag out a copy of the Symbol: Animation
  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


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:
  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
  6. Test your Movie: Control > Test Movie (Ctrl Enter)
  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.

  1. Make additional copies of the: Animation Group Symbols
  2. Stack the copies at random all over the: Main Stage
  3. Test your Movie: Control > Test Movie (Ctrl Enter)
  4. Close the Test Window:


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.

  1. If the Library is closed, open it: Window > Library (F11) or (Ctrl L)
  2. Double click on the Symbol: Graphic Shape
  3. Delete the: Circle
  4. Select the PolyStar tool:
  5. In the Property Inspector Select: Options
  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
  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!

See Full Version of this: Tutorial


22720 visitors to this page since 23 May 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.