FLASH: WATER RIPPLE EFFECT

Step3: Tracking the cursor position

• In Flash 5, this is easy.  The mouse position is already available in _xmouse & _ymouse varibles.  The following is intended to show how to emulate that in Flash 4.
• Insert/Create a new Symbol, and call the new Symbol: CursorTracker.  Set behavior to MovieClip. (This will be a blank symbol for now, so no need to worry that the symbol has nothing on it.)
  
    
• Name the existing layer: "ActionLayer."
• On the first frame of the CursorTracker, insert the following Action: 
  DragMovieClip("", lockcenter).  This will cause the CursorTracker to be dragged when the movie starts.
  
    
• In the second frame of CursorTracker, insert a Stop action.
  
  

• Let's add a button in the CursorTracker symbol.  Open the symbol if it's not still open.
• Make a new layer, name it "ButtonLayer."  
  
    
• On the ButtonLayer, draw a small circle or something in the center of the canvas.  Make it very small, 5 by 5 pixels or so.  
• Convert the circle to a Symbol.  (I.e.:Select it, then do Convert To Symbol.)  Set behavior to Button, and name the instance "theButton."
  
    
• Edit the Action for the button.  
  On (Press)
    Duplicate Movie Clip ("/RippleAnimInstance","RippleAnimInstance" & i, i)
    Set Property ("/RippleAnimInstance" & i, X Position) = _x
    Set Property ("/RippleAnimInstance" & i, Y Position) = _y
    Begin Tell Target ("/RippleAnimInstance" & i)
    Go to and Play (1)
    End Tell Target
    Set Variable: "i" = i + 1
  End On
  
  Here's the explanation on what's going on:
  • On (Press) ..... End On
    This means that the action bewteen those two statements will be executed whenever the user presses (clicks) the button.
  • Duplicate Movie Clip ("/RippleAnimInstance", "RippleAnimInstance"&  i,  i)
    This will cause the RippleAnimInstance object (created on the first part of this tutorial to be duplicated.  The duplicate will have the name RippleAnimInstance1, when i=1 and RippleAnimInstance2, when i=2 and so on.
  • Set Property ("/RippleAnimInstance" & i, X Position) = _x
    This will position the ripple below the cursor position.
  • Set Property ("/RippleAnimInstance" & i, Y Position) = _y
    This will position the ripple below the cursor position.
  • Begin Tell Target ("/RippleAnimInstance" & i)
        Go to and Play (1)
    End Tell Target
    This will rewind the ripple so it plays from the beginning.
  • Set Variable: "i" = i + 1
    This increments the value of i.  The reason we do this is because if we duplicate another instance of the RippleAnimInstance, we need to name it differently each time.  If not, the previous instance will be erased.  (Note that we don't set a maximum value here, I'm assuming this value will wrap around to 0 when it reaches the maximum.)
• Go back to the main scene (Scene 1), select the RippleAnimLayer, then drag an instance of CursorTracker somewhere outside the the stage.
  
• Test the movie now.  It should look like below:
  
• Click anywhere to create a ripple.  Notice some things don't look right:
  • The red circle button is ugly.
  • The ripple in the middle in distracting.
  • The ripples never stop rippling.

  To fix these, GO TO NEXT PART>>

(C) F. Permadi

<<INDEX>>