Flash Tutorials

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

1. Go back to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:

1. Click on Frame 1 of the button layer: Frame 1

2. Draw a rectangle of similar size to the "cat" clip: Draw a Rectangle

Draw a rectangle.

1. With the selection tool Double click on the rectangle: **Stroke **(Outline)

2. On your Keyboard press: Delete

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

4. Open Your Align panel: Window - Design Panels - Align

5. Select the Align to Stage Option:

   1. Use your Align panel to center the images on the stage horizontally:

   2. Center the images vertically:

   3. Right click on this rectangle and select: Convert to Symbol

   4. Name the clip: My Button

   5. For Behavior select: Button

   6. Click: OK

   7. Double click on the button to: Edit Button

   8. Right click on the Hit frame and select: Insert Keyframe

Insert a Keyframe in the Hit Frame.

1. Click on the black Dot in the Up frame and on your Keyboard press: Delete

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

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

1. Select the: Button

2. Open the Actions Panel: Window - Actions (F9)

3. Place the following code into the Actions Panel:

     **Note**: You do not need to type in the comments..
   

   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 
   

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