Wide's World

Fading in and out

by

Widearea

Strapon Cash

More Text Effects

We have discussed some of the basics of creating gif animations for our adult websites. This week we will pick up with another simple text effect for our adult animations using the opacity value of a type element in the creation of a fade in or fade out effect.

Again, the fundamental animating principle is to implement in-between frames to simulate movement between keyframes. While this week's lesson is perhaps repetitive and more simple than our prior discusssions of animating graphics, it should serve as a clear example of some basic web animation that can be useful in our adult websites. With the simple ability to use the basic building blocks of animation, there is simply no limit to the creative possibility.

Fading Text

The effect of type (or any graphic element) fading from its selected color to the background color is accomplished by adding keyframes using varying opacity between the type element and the background color. The effect is that of a dissolve "in" or "out" of specific messaging. This can be employed in transitions between messages or simply to create appearance or disappearance of animated elements.

1. Select File -> New and create a new document window for your animated graphic. Our example today is 200 px wide by 60 px high.
2. Design your graphic. Get creative. In this example our base art will have a small graphic where the tagline is static and the name will fade in and out. I bet you can do better...

3. Select the Type Tool in the toolbar and click in the document window to enter your type and preferences. In the example below we will use white type on a black background.

4. With the layer created above active, select Layer -> Duplicate or in the Layer Palette Window, choose from the duplicate layer option in the window's upper right menu arrow.
5. With the targeted layer active, set the opacity of the new layer by entering a percentage in the layer palette window. In the example below it is shown at 25%. This is the second keyframe of the fade in, or the last keyframe of the fade out.

6. Repeat steps 4-5 as necessary, changing the opacity at regular intervals, 50%, 75% etc.
7. Select File -> Save As to save working file in preferred format.
8. Import the layered image file into your GIF software, or export each frame from your image editor as a single gif (fade1.gif, fade2.gif, etc).
10. Set the frame duration for each keyframe and loop amount. In this example we used 1 second for the keyframes, .1 second for the in-between frames, and the loop is infinite.
11. Set optimization preferences (colors, dither, etc.) and save file as gif.

Opacity is a powerful feature in creating animation. Remember to use the fewest in-between frames to ensure highly optimized final files while maintaining smooth animation. Enjoy the power of opacity and until next time, Happy Hunting!

Useful Links/Reference

Flaming Text - Great resource for animation reference and designer's library
Web Developer Animations - Web animator's references
Javascripting Text Effects - Look Ma, no hands!