Fireworks banner tutorial for making GIF animation effect

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

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 the completion of the layer on the right side of the film icon, yes, that is the small ladder, hehe, as shown

6. Click a folder with a plus sign

Icon Create new Layer 2, drag the blue symbol in the library panel to the canvas, remember the vertical and horizontal coordinates (x:-1,y:-1 in the example) Select Menu modification (Modify)-> animation (Animation)-> settings (Settings ...), In the pop-up dialog box, set the number of frames to 10, click OK, then the system prompts you to automatically add frames, the answer is OK.

Then create a new layer 3, drag the green symbol to the scene, set the animation, also 10 frames, the difference is to change the transparency from 0 to 100

In order to be consistent with the previous figure, set the coordinate information in the Properties panel, and all the coordinates in the example are x:-1,y:-1. When finished, the first frame level Panel is shown

The effect of the canvas is as shown.

7. In this way, a gradient effect should be said to be done, the next thing is to make it from green to purple, in the frame panel to select the last frame, that is, frame 10th

If the steps are correct, the characters in the canvas should be green. Click the small arrow in the upper-right corner of the frame panel to select the frame duplicate frames ..., in the pop-up dialog box, choose to fill in a frame, after the original frame, such as figure (general default, direct point to determine can be).

Then the canvas becomes the background and the Layer 2 is selected in the Layers panel. Drag the purple symbol to the canvas and set the x,y coordinates in the properties panel, such as step 7 to animate, how to set it, right, purple in this time change is unchanged, only set the frame number of 10 can be ~! selected Layer 3, Drag the green symbol to the canvas, set the coordinates, and set the animation. This time, the transparency of the green symbol should be changed from 100 to 0, let it fade, Purple appeared, the realization from blue to green, from green to purple effect.

8. Now it's time for purple to go back to blue, I don't need to say, you should be. Ditto, select 20 frames in the frame panel, add a frame, select Layer 3, drag the blue symbol to the canvas, set transparent from 0 to 100, select Layer 2, drag into the purple symbol, transparency unchanged, frame Number 10 frames. (In fact, this step can be done in the 7th step, because the purple symbol has not changed, so, the 7th step directly let it 20 frames on it!) in order to illustrate the idea, we can do it separately.

9. Now, done, click the Play button to browse it, is not too fast, it does not matter, hold down the SHIFT key, select all the frames, double-click, the frame speed adjustment to 10, now speed can be! 10. Discoloration is achieved, but there is no text banner is no use. Add text animation can be set according to their own needs, here I wordy examples of several text animation effect, we can also be more familiar with the animation of some of the skills.

Next step, select Frame 1th, then select Layer 3, add layer 4, this layer should be on the top. Select the Text tool, enter the animation text in this layer, such as the "cloud Design eye" in the example, then press the shortcut key F8, turn it into an animated symbol, because I want it to stay still state 5 frames, so when you set the animation and before the color of the picture symbol, just enter the number of frames, the other settings unchanged. As shown in figure

If you want to achieve the desired effect, you can set it yourself, this will not affect our set of color gradient animation, you can adjust according to their own needs. Then enter the URL (that is, the small print moved below) also press F8 into the animation symbol, in the pop-up Settings window to do the following settings: as shown

Adjust the animation handle, the following figure, the green point for the animation start position, move it outside the picture, Red point for the end position, move it to the text, and then in the Frame panel, select the 5th frame, double-click the following number, the frame speed set to 200.

Select the 6th frame, at this time we do the first 5 frame animation can not see, to see the level board, always keep in the 4th layer, we have to implement the example of the "dynamic Blur", many netizens do not know how to use fireworks very well!

11. Draw a rectangle that is about the size of the text you want to blur, and then select Fill Options below ..., as shown in the folds fill rectangle

Become the effect of the following figure!

(Analog barcode, detailed tutorial see: http://) then feather, select Effects in the Properties panel, select Motion Trail ... Filter, two times "dynamic" angle of 0, the following figure, once for 180.

The finished effect is shown in figure:

Then open the Library panel, the "Cloud design eye" symbol of the word dragged to the scene, the right key->symbol->break Apart, disconnect and library contact, and then select the text, in the Properties panel select Effects, to its Gaussian blur, The ambiguity is set to 2.0, and then the processed rectangle is placed on top of the fuzzy text, which adjusts the transparency appropriately, so that the dynamic blur effect of the two text transitions is realized, as in the figure:

12. Select the 7th frame, input text "lit inspiration", translated into animation symbols, also set 5 frames of animation, set and the front "cloud design eye" exactly the same, but the following text changes in the direction of the same, we can open the original document to see it!

13. Select the 12th frame, enter the text "Fireworks enthusiasts home", copy, a frame, that is, in 14 frame paste, and then paste in 16 frames, and the frame speed to 100. So the text has a blinking effect. ~! Select frame 17th, copy the text one, select, and then use motion Trail ... Filters, the text with a moving tail, angle of 0, I believe you have understood it. Then press F8 to convert it to animation symbol, set to 3 frames, moving direction of 180 degrees, set the following figure. (fewer frames, the faster the text will fly out.) Also, the length of the exercise can be adjusted according to their needs, without formality and tutorials. )

Well, here's a beautiful banner already done! The last job is to export, select the menu File->export Preview, in the pop-up dialog box, remember to choose GIF animation (GIF Animation) on it! After the end if the speed and so on feel dissatisfied, you can adjust the frame speed, to achieve the desired effect. Of course, using FW to achieve this color-changing banner method more than one, a good way to think about it! There is a good way not to forget to share with everyone Oh!