Color glow fade-in transitions using Flash MX

Posted November 30, 2004

When I do research into what is hot in Flash Design, I have always seen one staple for image transitions. When and image would fade in it was almost as if the intensity and brightness of that image would be at it’s max before it changed into the regular image.

I knew tweening, and I knew how to set the Alpha to fade an image in, but for whatever reason, it didn’t seem like a simple fade in was quite the same as I had seen, and I knew it didn’t have the same visual impact.

But accident really I stumbled onto it the other day after having kind of forgot about trying to figure this technique out. I was working with a template from Monstertemplates that one of our clients needed customizing and I saw the effect reproduced. Here is an example of what I am talking about.

This is how you achieve this effect.

1. Open up Flash MX

2. Import a file to the stage. Any image file will do.

3. Click on that image then go Insert > Convert to Symbol. For this example I chose a Movie Clip and gave it a name of “rich transition”.

4. In the timeline, move the play head to frame 10 and press F6 or go up to Insert > Keyframe

5. Move the playhead back to frame 1 and click on the image on the stage.

6. In the properties inspector choose Color > Advanced and click on the “Settings” button.

7. These are what the setting should be to create this effect in the resulting dialog box. Red, Green, Blue and Alpha should all be set to 100%. To the right of these settings there are also the letters R, G, B, A for the categories with the names I mentioned previously. These are basically settings to color the intensity of the each of the colors vs. the full spelled out categories set the opacity of certain colors. This is what your settings should look like.

Rothe Blog Flash Tutorial 1

8. Right click in between frame 1 and 10 on the timeline and choose “Create Motion Tween”.

9. You’re done. You can copy the frames and place them at the end of the first set, right click and choose “Reverse Frames” to get the image to fade back to the starting position.

Either way, this color intense transition is a professional looking technique. You may ask, why can’t I just choose Color > Tint and set the “White” to 100%. You can, the transition just won’t look the same. You won’t see the yellows, reds, and blue intensify somewhere in the middle of the transition like it is a rich gold glow. It really is just a matter of preference.