Flash: Contrast Fade
Wednesday, November 19, 2008
Today, I shall make a simple flash tutorial.
Take a look at this slideshow. Notice the smooth transition from picture to picture.
This transition is actually achieved through a simple, but well hidden function in flash.
Firstly, import the image you want into flash. You can simply drag and drop the image into flash to do this.
Now, you can right click on the image and convert it into a symbol.
Lets make this symbol as a Movie Clip. Don't make it as a graphic nor button. Only Movie Clip symbols can make use of the filter functions to make the contrast fade.
Now, in the timeline, add a KeyFrame on Frame 20. Right click Frame 20, and click "Insert KeyFrame".
Then, go back to Frame 1 by clicking on it in the timeline.
Next, click the picture and go to "Filters" in the bottom panel. (By default, it should be on the bottom)
Click the "+" symbol and click "Adjust Color".
Adjust the Brightness and Contrast sliders to 50 Each. Too much will make the transition too unnatural. Too little will make the transition too faint.
Then, right click anywhere between the first keyFrame and the last keyFrame in the timeline, then click on "Create Motion Tween". This will make Frame 1 (one with extra brightness and contrast) morph into Frame 20.
After creating the Motion Tween, go to the properties at the bottom panel, and change the "Ease" to 100 out. Easing Out the Motion Tween makes the transition looks smoother.
Of course, the image must stay on the screen for a while after the transition. On the timeline, make a new keyFrame at Frame 100. If you want the image to stay there for longer, insert the keyFrame at a further Frame.
Because this transition is very blocky when the Framerate is low, we have to increase the Framerate. Right click on the workspace and click on "Document Properties". Change the Framerate to 30. At the same time, click on Match: contents to resize the document to fit the picture exactly.
Thats all for the tutorial. You can repeat the steps for a different image and combine the Frames together to from a picture slideshow like the one shown in the beginning.
I believe that looking at source files is one of the best alternative ways to learn. If you are unable to understand something or want to see the details up close, you can download the source file here: contrastfade.fla (386kb)