Friday, 1 August 2008

Image transition effect

In this Flash tutorial you will learn how to create an image transition effect. This effect can be used in banners, headers, and presentations. This tutorial is very simple and no masks are needed for this effect. For this tutorial I have used free stock images which are available at: www.sxc.hu


Image transition effect

Step 1

Create a new Flash document.Import your images in the library by selecting File > Import > Import to library then select your images and click ok.


Step 2

Drag your first image from the library onto the stage and make sure the stage is the same size as your image.



On the timeline insert a new key frame at frame 30 by selecting F6.


Step 3

On the timeline insert a new layer called “Image 2”. And drag your image from the library to the left of your first image like below:



Insert a new key frame at frame 30 by selecting F6 and move your second image on top of your first image.



Select the first frame and then right click on your second image and select break apart. Then with the selection tool, drag sections of the image and move them to the left like below:



Now right click anywhere in between the 1st and 30th frame and select “create motion tween.” And now select frame 70 and insert a new frame by selecting F5.


Step 4

On the timeline insert a new layer called “Image 3”. And then insert a key frame at frame 40, by selecting F6.Now drag another image from the library to the right of your second image.



Insert a new key frame at frame 70 by selecting F6and move your third image on top of your second image image.

Select the 40th frame and then right click on your third image and select break apart. Again with the selection tool, drag sections of the image and move them to right like below:



Now right click anywhere in between the 40th and 70th frame and select “create motion tween.”


**If you want to add more images then simply repeat the second and third steps.


Step 5 (optional)

Select image 2 from the timeline and using the selection tool select the image. And change the colour properties to Alpha at 0%.

And select image 3 from the timeline and using the selection tool select the image. And change the colour properties to Alpha at 0%.


Step 6

Test your movie clip by selecting Ctrl + enter.



You should now have image transition effect.

8 comments:

Hicham KERSIT 18 November 2008 02:53  

It was very usefel for me. Thanks...

asifa 15 March 2009 09:33  

very nice thank u

Naperville Public Library, IL 14 April 2009 10:55  

I am not able to use breakapart successfully.

Naperville Public Library, IL 14 April 2009 12:28  

How can I make the broken image to stay for a longer time after tranistion. In other words how can increase the time for frame 30 for image 2 to stay for a longer time.

iliketo 2 June 2009 08:02  

@Naperville

You need to select the image before you use the "breakapart."

iliketo 23 June 2009 08:42  

@Naperville

Simply increase the number of frames for second image.

freelancerfl 2 September 2009 14:44  

I am not able to use the breakapart successfully. I could see this, but with the selectin tool(V) not able to break it. Please, help.

Thanks

iliketo 28 September 2009 16:58  

@freelancerfl

I think you misread the breakapart description. The selection tool is the next part.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP