Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Fade In/Out Effect   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website New!

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Flash Fade In and Fade Out Effect

Flash Fade In & Fade Out Animation

Learn how to fade an image in Flash MX. You can use this fading effect on images and text and it is a very common Flash effect.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX must be installed in your system.

STEPS TO FOLLOW

  1. Open a new file. Go to File >New. A Screen called New Document will appear. Select Flash Document and click on OK. Go to Modify>Document and give a file size of 300px by 200px. This is the same size as the Bitmap pictures we have.
  2. Select the Bitmap pictures that you want to Fade in and Fade out from your picture file and bring it to the Flash Library. Select File>Import to Library from the Menu Bar. A Screen named Import To Library will open. Choose the file name and click on Open. Repeat these steps for all the Bitmap pictures. To open Library, go to Window>Library. You can see the pictures in the Library panel.

  3. Drag the picture from the Library panel to the Stage. Select the picture by clicking on it.
    Go to Modify>Convert To Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as pic1_mc. Select Movie Clip. Click on OK.
  4. Click on your Movie Clip. Go to Frame 15. Insert a Keyframe. Right click on layer 1 in the middle of the frames 1 to frames 15. The frames will become black. Select Create Motion Tween. An arrow from frame 1 to frame 15 will appear. Again click on Frame 30. Insert a Keyframe. A second arrow will appear automatically.
  5. Click on Frame 1. Here we will give the fade in effect. Select the picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.

    Your picture has faded in. Click on Frame 30. Here we will give the fade in effect. Select the picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.
  6. Repeat the steps 3 to 5 in layer 2 from the frame 31 to 45 to 60. To make a new layer, click on the following button which is on the right side below the layers. Repeat the above steps for all the images in new layers and you will create a simple fade in and fade out Flash animation.

Press on Ctrl+Enter to see the Fade in & Fade out Effect of the 4 pictures.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Featured Template
Template # 48080
Type: Joomla
Price: $75

Flash Photo Galleries