Fireworks Tutorial: GIF animation effect of the banner production process

Fireworks not only in the Web graphics, Chettu, and Dreamweaver combined with its unique advantages, the production of GIF animation is also its strengths, this article we learn how to use fireworks MX to create a smooth color effect of the banner, I believe that such banner will make your site a lot of color!

In this tutorial, we can learn about the definition, modification, use of symbols (symbol), adjust hue/contrast (hue/saturation), tween instance animation (tween instance), Layer (Layers) and Frame (Frames) basic usage, You can also learn a few special effects.

1. New canvas, size 468*60 (banner standard size). Choose the material picture, of course, you can also hand-painted, adjust to the appropriate size, as shown:

2. Cloning a picture (in situ copying, of course, with copy, paste can also) several, depending on how much you want to change the color. For example, there are three color changes, so clone three, you can understand the key frame in Flash, select the cloned picture, select menu item Filter (Filters)-> color (adjust color)-> Adjust hue contrast (hue/saturation), The key picture for color processing, it should be noted that in the adjustment process, do not adjust the brightness, otherwise the whole picture has changed, first adjust to green! Hue Value: 120, as shown in the picture is the parameter setting of green pictures.

The other picture color adjustment is similar to this example, the hue value blue is 180, purple is-80, picture different adjustment parameters are also different, here do not repeat, please readers in the production of careful adjustment, but also pay special attention to in the production to think good color change process, preferably the same color gradually change, such as first from the blue to green, and then from green to purple ... ..., this example is to achieve this change! Adjust the color, put them in order to see whether the span of color transition is too large, if too big, then make adjustments, until satisfied! As shown in figure:

3. Select a picture (in the case of Green) press the shortcut key F8, or right button convert to symbol, in the pop-up dialog box to select the animation symbol (Animation), click OK, then pop up a request for Animation Settings dialog box, we temporarily do not set it, keep as a frame, Moving to 0 is OK, as shown in figure:

Click OK to convert the picture to an animated symbol, and you will see an instance of the dotted border with an arrowhead on the canvas, and we'll delete it ~! (Don't be afraid, the symbols are already defined in the library, and then the other pictures are converted to symbols in this way!)

4. This time the canvas is blank, as if we worked hard for half a day, all white did?! Don't worry, the real animation has not yet begun to do, look at the canvas is not a bit monotonous ah, we give her landscaping, because our material background is black, we change the canvas background to black, menu modification (Modify)-> canvas (Canvas)-> canvas color ( Canvas Colors ...), and then add a fixed picture on the corner, so that the banner more vivid, as shown:

5. OK, the preliminary work is basically ready, start the real animation, now look at your several main panels are open? Library Panel (Window->library F11), frame panel (window->frames shift+f2), layer panel (window- >layers F2). If it's not open, open it in parentheses. First click on the Layers panel, double-click our background layer, in the Pop-up small window box to tick, (in the input field can give the layer a good name, see your Hobby ~!), that is, share this layer, that is, in the future animation, this layer is always unchanged. After completion of the layer on the right side of a film icon, yes, that is the small ladder.