Learn Flash: Invisible Button	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash - Blurring a Picture

Free Flash Tutorial

Step Five: The Invisible Button

Note: If you are using the ActionScript Method (2) to create your Movie you continue the tutorial from this Step.

1. If your Edit Bar is closed, Open it: Window > Toolbars > Edit Bar
   
   
2. Go back to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
   
   
   
   
3. Click on Frame 1 of the button layer: Frame 1
   
   
4. Draw a rectangle of similar size to the "cat" clip: Draw a Rectangle
   
   
   Draw a rectangle.
   
   
5. With the selection tool Double click on the rectangle: Stroke (Outline)
   
   
6. On your Keyboard press: Delete
   
   
7. In the Property Inspector change the X Y values so that the rectangle is exactly the same size as your image. Mine is: 200 x 150 pixels
   
   
8. Open Your Align panel: Window > Design Panels > Align
   
   
9. Select the Align to Stage Option:
   
   
10. Use your Align panel to center the images on the stage horizontally:
    
    
11. Center the images vertically:
    
    
12. Right click on this rectangle and select: Convert to Symbol
    
    
13. Name the clip: My Button
    
    
14. For Behavior select: Button
    
    
15. Click: OK
    
    
16. Double click on the button to: Edit Button
    
    
17. Right click on the Hit frame and select: Insert Keyframe
    
    
    Insert a Keyframe in the Hit Frame.
    
    
18. Click on the black Dot in the Up frame and on your Keyboard press: Delete
    
    
19. Go back to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
    
    
    Transparent Button in front of the Cat Movie Clip.
    
    
20. Turn off the visibility in the original and blurred layers:
    
    
    The turquoise represents an invisible button.
    
    

    Note: This semi-transparent turquoise is an Invisible Button. It will hold some Actionscript code. The turquoise area represents the active hit area (set to exactly the same size as the original and blurred cat clips).

21. Select the: Button
    
    
22. Open the Actions Panel: Window > Actions (F9)
    
    
23. Place the following code into the Actions Panel:

    Note: You do not need to type in the comments: // Grayed out text.

    on (rollOver) { //setup a Rollover event for the button clip

    currframe = _root.cat._currentframe; //currframe represents the frame that is currently playing in the "cat" clip at the time you move your cursor over the "button" clip
    
    displacement = Math.abs(currframe-10); //displacement represents the number of frames the Play Head is from the visible image in frame 10 in the MC Cat symbol. Frame 10 is the frame in which the "MC Cat" is completely visible, having an alpha of 100%.
        
    if (currframe == 1 || currframe == 10) { //if currframe is at the first frame (Frame 1, invisible) or at Frame 10 (completely visible) , let "cat" play.
        _root.cat.play(); //then allow "cat" to play
    }
    
    if (currframe == 20) { //if you are at frame 20 of "cat" (i.e., currframe==20), "rewind" "cat" by playing it from frame 2.
        _root.cat.gotoAndPlay(2);
    }
    if (currframe>10) { //if currframe greater than 10 (you are starting to fadeout). where you left off from fading out.
        _root.cat.gotoAndPlay(10-displacement); // This controls the position of the Play Head. The Play Head or place that the animation plays from will depend to the amount of fade out the animation previous reached. So if the image was very blurred it will come back into focus form a very blurred image and visa versa. To realise this effect I have used a variable called: displacement.
    }

    }
    on (rollOut) { //setup a Rollout event for the button clip

    currframe = _root.cat._currentframe; //defines the variable called: currframe
    displacement = Math.abs(currframe-10); // defines the variable called: displacement
    if (currframe <= 10) { //this time, if you rollout while fading in, start to fadeout.
        _root.cat.gotoAndPlay(10+displacement);
    }

    }
    on (release, releaseOutside) {

    trace("Meow!"); //put your own code here to do something like: gotoAndPlay etc.

    }

    Note: In the ActionScript above to type the line: | use: Shift + Back Slash \
    

24. If you have followed Method 1 your Movie is now complete. You will need to test the Movie: Control > Test Movie (Ctrl + Enter)

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