Flash 8 new features: Gradient Control and overflow

Gradient | control

In the following sections, we'll talk about Flash8 's improved gradient control, and the gradient overflow settings and the animated performance of the overflow. The overflow part is a very important improvement in Flash8 gradients.

One, Flash's gradual control

Flash's gradual control has finally reached the point of no change. Do not know Macromedia for what consideration, used to modify the fill deformation of the handles are simple "square", "Circle" to express. Although when the mouse moves to change the shape of the pointer, but this is no doubt for the majority of beginners is not considered. But it was all over, and Flash8 brought more perfect gradient control.

Draws any shape, whether it is an object drawing mode. In the Window menu, lower the mixer, select radial in the type, and go straight to the gradient edit state, as shown in Figure 1. Of course, you can also choose the "Fill Transform tool" at any time to enter the gradient editing state, linear gradient because of the single function, this skip.

Figure 1

There are multiple control handles in the gradient editing state that have been improved and are more intuitive than before, so let's look at their role.

1, center point control handle, center point refers to the center of the gradient, the mouse moved to it, the pointer to the state as shown in Figure 2 move, change the center point of the gradient.

< map 2>

2, focus control handle, only when you select the "radial" gradient, the gradient edit state will only appear focus control handle. It is used to control the focus of the radiation gradient, although it can only move left and right, but as long as the center point and the rotation handle to match, can achieve a full range of focus shift. The handle is rendered as an inverted small triangle, as shown in Figure 3.

< map 3>

3, width, size, rotation control handle, these needless to say, is to adjust the width of the gradient, scaling its size and rotation angle several functions. Although the appearance of the handle is only a change, but this small change, but it allows us to identify their functions at a glance, is not a user-friendly good thing, as shown in Figure 4.

< map 4>

While improving the gradient control handle, it is natural to use the Fill Transform tool to edit the imported bitmap, and the control handle is also redefined. The scaling, rotation, and skew of bitmaps can be done more visually, as shown in Figure 5.

< map 5>

Second, gradient overflow

Then we'll look at Flash8, a very important update to the gradient, the overflow settings for the gradient. It is divided into three overflow styles, "expansion", "mapping" and "repetition", only for "linear" and "radial" gradients, as shown in Figure 6. We look at the icon and the name, it is difficult to understand the "overflow" the meaning of the two words. Of course, computers are experimental subjects, and it is necessary for us to try out their effects in person.

< map 6>

A so-called overflow is the way in which a free area is filled when the color of the application exceeds the limit of the two gradients. In other words, how to handle extra space when a gradient is finished and not enough to fill an area. OK, let's test the first pattern, and the default format that was last in the previous version-"Expansion". First look at the original gradient settings and the effect of the build, as shown in Figure 7.

Figure 7

1, Expansion mode now we use the Fill transform tool to reduce the width of the gradient, as shown in Figure 8. As you can see, the gradient is in the middle, and the starting and ending colors of the gradient are always spreading to the edge, filling the vacated space, which is called the expansion mode.

< map 8>

2, mapping mode This mode is to refer to the existing small section of the gradient for symmetrical flip, integrated, End-to-end, and then as a pattern flat supplemented in the spare area. And, depending on the size of the shape, keep repeating the gradual extension until filled with the entire shape, as shown in Figure 9.

Figure 9

3, repeat mode this model is relatively easy to understand, you can imagine this section of the gradient has countless copies. Like queues, one after the other, to fill the empty area after overflow, we can see clearly the difference between the mapping patterns in Figure 10.

Figure 10

Third, the animation performance of gradient overflow

Next, we have a very simple shape tween animation to get a deeper picture of the concept of a gradient overflow. In the color mixer, first convert the linear gradient to "radial", as shown in Figure 11.

Figure 11

First, select the overflow mode to "map" and insert the keyframe in frame 15th and 30th by pressing F6. Move the mouse pointer to 15 frames, using the Fill Transform tool, and drag the zoom handle inward to reduce the gradient several times. You can see that this little piece of the child has a gradual, symmetrical flip, and the ends are covered with the entire shape. You can also adjust the other handles, such as changing the focus and so on, as shown in Figure 12. Finally, in the property panel, set the tween as "shape" for both paragraphs, and the animation completes.

Figure 12

Of course, the gradient overflow can play a lot of space, here is just a simple demonstration, we get the final effect as shown in animation 13.

Flash Animation Demo

Related downloads: instance source files (WinZip compressed files, 5KB)

Through the test, I think you can understand the concept of overflow more easily, simple gradient scaling, you can change the endless pattern of repetition, and we only need to make a small section of the gradient, plus an overflow settings can be achieved.