Fireworks easily draw banner advertising animation

Advertising

Banner, the general translation for banner ads, banners and so on. Banner is a tool that websites use as a means of making a profit or releasing some important information. Banner should be designed to make beautiful, easy to click, and web coordination and the overall composition is reasonable.

In this article we use fireworks to make a discolored banner from which we can master the use of symbols (symbol), the production of Tween instance animations (tween instance), the basic usage of layers (Layers) and frames (Frames), End with a wonderful summary of skills. The end of the article provides the original document for everyone to download reference.

　　The completed results are as follows:

　　banner make specific process

(1) First we create a new file of size 468x60, and set the canvas color to black, as shown in Figure 1.

Figure 1 Creating a new file

(2) Then we import a bitmap file for the color effect, as shown in Figure 2. Of course, we can also use the drawing tools to draw this image, here is to facilitate the interpretation of the use of external images.

Figure 2 Importing bitmaps

(3) Select the image press Ctrl+shift+d two times, clone the image two times. Then select one of the images, click "Filters", select "Adjust color" >> "hue/saturation", and then adjust the tonal value in the pop-up dialog box, as shown in Figure 3. Adjust the color of another image in the same way, and finally get the image effect shown in Figure 4.

Figure 3 Adjusting Hue

Figure 4 Image after color effect on a cloned object

(4) Select one of the pictures, such as the purple picture on the left, press the shortcut key F8 or right click on the pop-up menu to select Convert to symbol for converting the image to a symbol. In the pop-up dialog box, name the symbol and select the animation symbol (Animation), as shown in Figure 5.

Figure 5 Converting an image to a symbol

(5) Click "OK" will pop-up Animation Settings dialog box, as shown in Figure 6. We do not set it for the time being.

Figure 6 Animation Setup dialog box

(6) Click "OK" and then return to the workspace and we will see the symbol on the canvas with a dotted border with arrows, as shown in Figure 7. Convert the other two images to symbols in the same way, and name symbol 2 and Symbol 3, respectively, and then delete all three symbols.

Figure 7 The effect of converting a bit diagram to an animated symbol

(7) We add some pictures to the left of the banner and make appropriate adjustments to make the banner more vivid, as shown in Figure 8.

Figure 8 Adding a picture to the left of banner

(8) Then we click on the "Window" menu, respectively, "Layers", "Frames" and "Library" three panels open, in order to create animation services for us in the future. In the layers (layer) panel, select the Layer 1 layer, double-click the layer to name background, and select the Share across frames check box to share the layer, as shown in Figure 9.

Figure 9 Naming and sharing layers

(9) Click on the button in the lower right corner of the layer board to create a new layer. Then drag symbol 1 in the library panel, as shown in Figure 10, onto the canvas and place it in the banner at the far right corner, as shown in Figure 11. Also remember the location information (x:282,y:0) in its property panel.

Figure Ten Library Panel

Figure 11 dragging a symbol onto the canvas

(10) Select the symbol, then click on the "Modify" menu, select "Animation" >> "Settings ... , set the number of frames to 10 in the animated dialog box, as shown in Figure 12.

Figure 12 Setting Animation parameters

(11) Click OK, and then pop up the dialog box shown in Figure 13 to ask if you want to automatically add frames.

Figure 13 A dialog box that prompts you to automatically add frames

(12) Select OK this time we found 10 frames appear in the frame panel, as shown in Figure 14.

Figure 14 A new frame appears in the frame panel

(13) Then use the same method to create a new layer 3, and drag symbol 2 to the canvas, where the symbol position should be the same as the position of sign 1, which is x:282,y:0. Click the "Modify" menu and choose "Animation" >> "Settings ... , setting the animation in the pop-up dialog box is also 10 frames, but changing the transparency from 0 to 100, as shown in Figure 15.

Figure 15 Setting animation properties

(14) Click "OK". This time we found the first frame of the layer board as shown in Figure 16. The image effect as shown in Figure 17, a gradient effect has been formed.

Fig. 16 The first frame layer board

Figure 17 The effect of the first frame

(15) Below we will make a second gradient effect. Which turns red to green. Select frame 10th in the frame panel, and we find that the image on the right side of the canvas is red, as shown in Figure 18.

Figure 18 10 Frame image

(16) Click on the button in the upper right corner of the frame panel, select "Duplicate frame" in the pop-up menu, and then pop up the Copy Frame dialog box, where we choose after the current frame radio box to place the copied frames after the present frame, as shown in Figure 19.

Figure 19 Copy Frame dialog box

(17) Select "OK" back to the canvas, the 11th frame of the image, then we found the canvas into a background image, as shown in Figure 20.

Figure 20 11 Frame Image

(18) At this point, select Layer 2 in the Layer panel, drag the green symbol 3 to the canvas, and set the same XY coordinates as before in the property panel. Click the "Modify" menu and choose "Animation" >> "Settings ... In the pop-up dialog box, the animation is also 10 frames, which also pops up the prompt dialog shown in Figure 25. Select "OK" so the new frame is added to the frame panel, as shown in Figure 21.

Figure 21 The new frame is added to the frame panel

(19) Then select Layer 3, drag the red symbol 2 to the canvas, and set the same XY coordinates as before in the property panel. Click the "Modify" menu and choose "Animation" >> "Settings ... ", set its opacity from 100 to 0, with a frame number of 10, as shown in Figure 22, to make the red fade away and green to display.

Figure 22 Setting animation properties

(20) Then the green is changed back to purple again. Ditto, select 20 frames in the frame panel, add a frame, select Layer 3, drag the purple symbol to the canvas, set transparent from 0 to 100, select Layer 2, drag into the green symbol, transparency unchanged, frame Number 10 frames. Click the Play button to browse, found a little faster, hold down the SHIFT key to select all the frames on the frame panel, double-click the mouse, set the frame delay for 15/100 sec. Next, add text effects to the banner.

(21) In the frame panel, select Frame 1th, then select Layer 3 in the Layers panel, then create a new Layer 4, and select the Text tool on the toolbox to add the "Pole Software Network" text to the image, as shown in Figure 23.

Figure 23 Adding text

(22) Select the text and press F8 to convert the text to a symbol, name it Nuoli in the symbol attribute, and choose to convert to an animated symbol, as shown in Figure 24. Because you want to keep the text in a static state of 5 frames, you can set the animation with the same picture symbol that does not change color, just enter the number of frames, and the other settings are unchanged, as shown in Figure 25.

Figure 24 Naming symbols

Figure 25 Setting animation properties

(23) Similarly add the Norian Web site "http://soft.yesky.com/" This text, and convert it to symbols, set animation properties as shown in Figure 26. Select "OK" to return to the canvas, as shown in Figure 27. Where the green point is the starting position of the animation, the red point is the ending position. Then in the frame panel, select Frame 5th, double-click the following number, and set the frame speed to 200.

Figure 26 Setting animation symbol properties

Figure 27 The image after the text is converted to an animated symbol

(24) below to achieve a "dynamic blur" effect. When frame 6th is selected, we find that the first 5 frames of the animation are not visible. Click the Rectangle tool on the toolbox to draw a rectangle and set the rectangle fill to folds, as shown in Figure 28.

Figure 28 Setting the rectangle fill to a collapsed fill

(25) in the collapsed fill floating box, set the first color block to white, the second color block is black, as shown in Figure 29, and finally get the image effect shown in Figure 30.

Figure 29 Setting the collapse Fill property

Figure 30 Setting the fill effect after the Fill property

(26) Use the mouse to adjust the control handle of the folded fill, and get the image effect shown in Figure 31.

Figure 31 Adjusting the image effect after the control handle

(27) Select the Rectangle, click the button on the Properties panel, select "Eye Candy 4000LE" >> "Motion Trail" in the pop-up menu, and set the Motion Trail property as shown in Figure 32.

Figure Motion Trail Set

(28) Once again using the motion trail effect, but set the direction to 180 degrees, the other settings and the same as above, the image shown in Figure 33.

Figure 332 Effects After using the motion trail effect

(29) and then open the Library panel, drag the symbol "Pole software network" to the scene, right-click the mouse to select "symbol" >> "Break Apart", disconnect from the library, then select the text, click the button on the Properties panel, select "Blur" in the pop-up menu > > "Gaussian Blur" to its Gaussian blur, the ambiguity is set to 2.0, and then the processing of the rectangle on the top of the fuzzy text, appropriate regulation of transparency, so that the two text transitions when the dynamic blur effect is achieved, as shown in Figure 34 results.

Fig. 34 Dynamic Blur effect

(30) Select the 7th frame, enter the text "in good faith for your service", into the animation symbol, also set 5 frames of animation, set different animation properties, as shown in Figure 47. Get the image shown in Figure 35.

Figure 35 Setting animation properties

Figure 36 Setting the image after the animation properties

　　

(31) Select the 12th frame, enter the text "design online", copy, and then paste in 14 frames, and then paste in 16 frames, and the frame speed to 100, so that the text has a blinking effect, as shown in Figure 37.

Fig. 16th Frame image of Banner

(32) Select frame 17th, copy one of the text, select and then use motion blur special effects, set its properties as shown in Figure 38. Then press F8 to convert it to an animated symbol, setting its properties as shown in Figure 39.

Figure 38 Setting the motion Blur property

Figure 39 Setting animation properties

　　

(33) Select "OK" back to the workspace, get the 17th frame image as shown in Figure 40. Then select Frame 30th and set the frame delay to 200/100 second.

Figure 40 17 Frame image

(34) Back to the image of the 1th frame, click the following workspace status bar icon to preview the image effect. Adjust it appropriately and then select the Export Wizard, and in the Export Wizard dialog box, select the export type to be an animated GIF, as shown in Figure 41, so that you can export the image to an animated GIF.

Figure 41 Exporting an image as an animated GIF

　　Summary: In this example above, we have mainly learned the production of gradient color animation. In the process of making this banner, we are more familiar with the use of these panels in fireworks MX 2004 by using the Layers Panel, frame panel, and library panel.

In the frame panel, we learned how to select each frame edit, how to copy frames, add frames, and so on, and also learned how to set the length of time frame.

In the layers panel we learned how to create new layers and set up shared layers.

In the library panel we are familiar with how to convert images and text into animated symbols, to control animation effects and how to put library files into a scene, by setting the animation's size, transparency, and so on in the animated Properties dialog box.

We have achieved different animation effects by different sets of different symbolic objects, where readers can try to set the animation image effect by setting different parameters in the animated Properties dialog box, including frame (frames), move (distance of motion), Direction (direction), Scale to (size), Opacity (opacity), Rotate (rotation) equivalent, resulting in a different effect.

In addition, in the production process of this banner, we are more familiar with the Pointer tool, text tools, scaling tools, rectangular tools, such as the use of tools and techniques. By using the motion trail effect, you are familiar with its use and create a "motion blur" effect on the text. original File Download