Flash Training:Animating a Mouse Trail.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Mouse Trail Animation

 

Free Flash Tutorial


Step 4    <<   Previous      Intro   1   2   3   4   5   6   7   8     Next   >>      

 

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. 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.

  8. Center the button by going to the Info Panel and setting both the X & Y to: 0
  9. Note: The Invisible Button should now be in the centre of the Stage.

  10. Make sure your button is still: Selected
  11. If the Actions Panel is closed, open it: Window > Actions (F9)
  12. Note: In the top of the Actions Panel it should say: Actions - Button

  13. 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

  14. Type (or copy & paste) the following actions:
  15. on (rollOver){
       gotoAndPlay(2);
    }

  16. In the Timeline select: Frame 1
  17. Note: In the top of the Actions Panel it should say: Actions - Frame

  18. Type (or copy & paste) the following actions:
  19. stop();

  20. Close the: Actions Panel (F9)

  21. In the Timeline select: Frame 2
  22. Go to: Insert > Timeline > Blank Keyframe (F7)
  23. Drag from the Library the Graphic Symbol: Graphic Shape
  24. Center the Symbol by going to the Info Panel and setting both the X & Y to: 0
  25. In the Timeline re-select: Frame 2
  26. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  27. Select: Tween > Motion
  28. Select: Frame 20
  29. Go to: Insert > Timeline > Keyframe (F6)

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

  31. Select the Symbol: Graphic Shape
  32. In the Property Inspector select: Color > Tint
  33. A color swatch will appear, select a yellow: FFCC00
  34. Your Symbol will now be Yellow:

  35. In the Property Inspector now select: Color > Advanced
  36. An Advanced Setting button will appear. Click on it:
  37. Go to Alpha and set it to: 20%
  38. Alpha sets an objects transparency. So your Symbol will become semi transparent:

  39. Click: OK

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

  40. In the property Inspector set the width to: 5
  41. Set the width to: 5

    Note: Your Symbol will almost disappear:

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

    You should see something like this:

         

Step 4    <<   Previous      Intro   1   2   3   4   5   6   7   8     Next   >>      


39126 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.