Wednesday, 28 January 2009

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.

10 comments:

Ruzeen Rezvie 2 May 2009 at 03:45  

Thanx a lot.! This was exactly what I was looking for ;-)

Arjun 12 November 2009 at 08:50  

Again thanks a lot. No one explains the way you explain.You made it very easy for me. Just in 1 day i learnt so much about flash.

Nicole 24 January 2010 at 14:42  

Thank you for this tutorial! I did what you said to do - but when I added the alpha settings it made the image white the whole time instead of just at the beginning. I'm using CS4 Pro!

iliketo 24 January 2010 at 15:40  

@Nicole

Here are some possible reasons.

1.You do not have a motion tween between the two key frames.
2.On the timeline layer you have not set the alpha to 100% on the second key
frame.
3.Try using a classic tween for Flash CS4.

Nicole 26 January 2010 at 10:09  

Thanks - the Classic Tween did the trick!

MissGibbins 25 September 2011 at 00:42  

Hi
I am using your tuts to help me with my uni assignment... Although I have done everything correct when I preview it, it seems to go really really fast... How do I fix this???

iliketo 25 September 2011 at 04:19  

@MissGibbins

You can try increasing the number of frames in the tween.

SV 29 November 2011 at 05:18  

Can you please tell me which script is used for the play button and it is where in the above tut?

iliketo 29 November 2011 at 06:10  

@Sv

on(release){
gotoAndPlay(2);
}

SV 29 November 2011 at 09:56  

Thanks for quick reply..

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP