Fade transition effect

This Flash tutorial will teach you how to create a fade transition effect using the alpha property. This will give the effect of images fading into each other. I have used free stock images which are available at: www.sxc.hu. This tutorial is similar to the image transition effect and uses no Actionscript.

Fade transition effect

Step 1

Open a new Flash document.
Import your images into the library by selecting File > Import > Import to Library select your images and click open.
Set the stage size to the same size as your images. You could alternatively use the transform tool to drag your images to the same size as the stage, if you wish.


Step 2

Drag your first image onto the stage from the library, making sure it is perfectly aligned.
Convert your image into a symbol by selecting F8. Give your symbol an appropriate name, check the movie clip button and click ok.


Step 3

On the timeline select the 30th frame and hit F6 to insert a key frame. Using the selection tool (V) select the 1st frame and then select your movie clip and go the bottom of the screen and change colour property to: Alpha at 0%.



Right click anywhere in between the 1st and 30th frame and select Create motion tween.


Step 4

On the timeline insert a new layer and select the 28th frame and hit F6 to insert a key frame. Now drag your second image on the stage. Convert your image into a symbol by selecting F8. Give your symbol an appropriate name, check the movie clip button and click ok.

Select the 60th frame and hit F6 to insert a key frame. And again go back to the 1st key frame and then select your movie clip and go the bottom of the screen and change colour property to: Alpha at 10%.



Right click anywhere in between the 28st and 60th frame and select Create motion tween.


Step 5

Repeat step 4 for as many image as your wish, obviously not using the same key frames. Here is a summary of the steps:

1. On the timeline insert a new layer and create a key frame (F6) two frames less than the total frames from the layer below.
2. Drag your image onto the stage from the library and convert to symbol.
3. Create a key frame (F6) 30 frames from your initial key frame.
4. Select the initial key frame, then the movie clip and change the alpha property to 10%.
5. Right click anywhere in between your two key frames and select Create motion tween.


Step 6

Test your movie clip Ctrl + Enter.



You should now have a fade transition effect. Feel free to contact me for any questions or comments.

Using the eraser tool

The eraser tool obviously erases “things” you see on the screen, but did you know there are 3options: Eraser mode, Faucet, and Eraser shapes. You have probably used the eraser shapes option before, but I guess you have never used the other two before. The eraser tool on the toolbar is next eyedropper tool and looks like a pink eraser.


Eraser Mode

The eraser mode allows you to modify the way you erase an objects or part of an object. The following are the eraser mode options:

* Eraser normal – Erases stroke and fill on a layer, basically whatever on the layer. This the default option for the eraser .
* Erase fill – Erases only the fill.
* Erase line – Erases only the line.
* Erase selected fills – Erase only the fill from a selected area.
* Erase inside – This is the same as erase selected, but you don’t have to select the area.


To use the eraser mode you select the eraser tool then one of the options above from the drop down menu and start erasing by dragging the tool over the area you want to erase.


The faucet

This tool is like a combination of the eraser mode. You click, for example, a stroke or fill and the tool remove the part for you. The difference is the eraser mode doesn’t affect either the stroke or fill depending on the option. The faucet just deletes whatever is selected.

To use the faucet, first select the eraser tool then the faucet option, and then click on a objects fill or stroke, to remove the area.

Position of mouse

This Flash tutorial will teach you how to display the x and y position of the mouse, so when you move your mouse on the stage it keeps track of the position and updates as you move. This tutorial uses the _xmouse and _xmouse properties to return the x and y coordinates of the mouse position.

Finding the mouse position on the stage is rather simple you could just enter the code below, but this has a problem. It only shows the position of the mouse from when you first start the movie, and does not keep track of the position as you move the mouse.

trace("Mouse X: " + _xmouse);
trace("Mouse Y: " + _ymouse);

To overcome this problem I will be using dynamic text fields to display the x and y position of the mouse. I have used an Actionscript 2.0 file and also a custom cursor for this tutorial.


Position of mouse

Step 1

Create a new flash document and set the stage size to whatever dimensions you wish. I used 250 x 200 pixels and #66CCFF background.


Step 2

Select the text tool (T) with dynamic text and drag two rectangle shapes on the stage like below:



And beside the dynamic text fields, select static text tool and type: “x” and “y”.


Step 3

Select each of the dynamic text field in turn using the selection tool and give them the instances names: xmouse_txt and ymouse_txt respectively.




Step 4

On the timeline create a new layer called Actions and right click on the 1st frame and select Actions and enter the following code:

1. onMouseMove = function() {

2. xmouse_txt.text = _root._xmouse;
3. ymouse_txt.text = _root._ymouse;

4. updateAfterEvent();
5. }

**Line 1: The mouseMove function detects when the mouse moves.

Line 2-3: This uses x and y mouse properties to display the coordinates of the mouse position in the dynamic text fields.

Line 4: The updateAfterEvent function update the movie by continually refreshing the stage which makes the cursor appear smooth on the screen.


You could alternatively use the following code, which does exactly the same. The onEnterFrame event executes repeatedly, so the updateAfterEvent() is not needed.

onEnterFrame = function(){
xmouse_txt.text = _root._xmouse;
ymouse_txt.text = _root._ymouse;
}

Step 5

Test your movie Ctrl + enter. Now move you mouse across the stage and the coordinate of the mouse should appear. Note the size of the stage 250 x 200, so effectively the top left of the movie should be (0, 0) and the bottom right should be (250, 200).



You should now have the position of the mouse. Feel free to contact me for any questions or comments.