Color Effects

Interactivity, Sound, and Curvy Motions in Flash

Now that I've set up this first motion, put your brand in front of the viewer, I want to throw out some tag lines to get the viewer thinking about what MySite.com can offer. There are countless ways you could proceed at this point in terms of color. I've chosen to color-block the right side of the banner and then add a sequence of short sentences.

Figure 12: Color Effect / Symbol Dialog

The first one, "Put Your Site in Motion," pops up, and then, underneath it, two frames later, "(I Can Help)" appears. Because I want to reuse this bit of text, I've gone ahead and made it a symbol. This also allows me to add a new key frame where the next text line, "Catch Their Attention," starts and, by adjusting the "color effect" under the "(I Can Help)" symbol's properties (Figure 12), make it appear to disappear until the second line of text has been visible for two frames.

The easiest technique for adjusting the color of a symbol is to use the palette under "Tint" in the symbol properties box to select a new color, then use the slider to adjust the percentage of the color that you want incorporated into the current symbol color.

I've repeated this process with the "(I Can Help)" symbol, adjusting the color so that the phrase first disappears and then reappears two frames after the next tagline appears, for the final line of text, "The Experience Counts." (The resultant sequence is shown below in Figure 13).

Playing with a symbol's color effects is an easy way to create striking effects. For example, if I go back and alter the color effects of MySite.com at its end point, the color will slowly change as the text follows its figure 8. By the time the text has reached its end point, the color has fully shifted. (You can see the effects of playing with a symbol's color properties in the color changes I've implemented during MySite.com's initial progression across the banner add and back.)

Since I've already made "(I Can Help)" as a symbol, my next move is easy. To make this phrase swell until it exceeds the banner space and then shrink again until it fits in the red color block, I need to tween the phrase twice. First, I create the end point at which I want the phrase to exceed the banner space. So, I create the key frame, and then, rather than moving the text, I want to "scale" it until it reaches the desired size. Now, I set my tweening commands between the first and this new key frame, and the phrase will get progressively larger until it's too big for the box. (The images in Figure 14 show the starting frame and the final frame.)

Figure 14: Scale tween, start and end frames

At this point, I need to create a new key frame for the next endpoint and then scale the phrase until it fits in the box and then set the tweening properties between this second and third frame.

The result: constant motion, but minimal construction, and, since I've used a symbol, the Flash movie only needs to hold one copy of the "object," so space requirements are reduced.

I've added "Get Moving," just to break up the space and to offer a logical conclusion to my ad which will, of course, be followed by the "click me" button.