Flash Training:Animating a Mouse Trail.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Mouse Trail Animation

Free Flash Tutorial

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: