Fireworks Draw Butterflies Animation

Today we draw a flying butterfly animation, so that the wings of butterflies are constantly flapping, as a reality in the butterflies Dancing in the dance. You can also insert the GIF animation into a layer in Deamweaver during Web page making, and then set the timeline to control the motion path of the animation on the page to achieve its effect on the page. Used primarily to familiarize with the use of exporting GIF animated files in the frame panel of fireworks MX 2004, and to be familiar with the use of magic wand tools. A . png file is provided at the end of the article for you to download reference.

　　 complete the effect as shown on the right.

Here we introduce the specific drawing process to see how the butterfly wing flap effect is achieved.

(1) Create a new file of size 80x80, set its canvas color to transparent, and get the image shown in Figure 1.

(2) Import a static butterfly picture, as shown in Figure 2. But the picture has a white background.

Figure 1 new File Figure 2 Import a static butterfly chart

(3) Click the Magic Wand tool on the Toolbox and click in the white area of the imported image so that all the white areas in the image are selected, as shown in Figure 3.

(4) Press the DELETE key to remove the white area selected by the magic wand and get the image shown in Figure 4.

Figure 3 Using Magic Wand Click White Area Figure 4 Delete white area

(5) Click the button on the status bar of the workspace to return to the vector graph edit state. Use the panel to place the image in the middle of the canvas and get the image shown in Figure 5.

(6) Open the Frame panel, click the button to create a new frame, and copy the first frame image to frame 2nd, and adjust the copied image using the Zoom tool on the toolbox, as shown in Figure 6.

Figure 5 Placing the image in the center of the drawing canvas 6 scaling the image
(7) In order to simulate the butterfly flying when the color intensity changes, it is necessary to the 2nd frame of the image for hue, saturation and brightness adjustment. Click the Filter menu, select adjust Colors | hue/saturation, and in the pop-up dialog box, adjust the hue, saturation, and brightness, as shown in Figure 7.

Figure 7 Adjusting image hue, saturation, and brightness
　　

(8) Finally get satisfactory results, as shown in Figure 8. Next, create a new frame, similar to the previous two steps, and then adjust the image to get the image shown in Figure 9.

Figure 8 2 Frame Image 9 3 frame image
(9) as the butterfly flying in the process of the wings will go back and forth two times the same position, so the 4th frame image and the 2nd frame image is the same, the 5th frame and the first frame image is the same. Just copy the 2nd frame image to frame 4th, and copy the first frame to the 5th frame, as shown in Figure 133 and figure 134 respectively.


Figure 10 4 Frame Image 11 5 frame image
(10) Finally create a new frame, the 5th frame image copied to the frame, use the zoom tool to scale the image again, so that the wings of the butterfly expanded a little more, the image shown in Figure 12.

(11) A total of 6 frames in the frame panel, frame delay is the default 7/100 seconds fireworks, which will make the butterfly wings flapping too fast. Hope that the butterfly wings fan more slowly, just select all the frames in the frame panel, double-click the Frame delay area, set the frame delay to 15/100 seconds, as shown in Figure 13. So that the wings of the butterfly flap will slow down.

Figure 12 6 Frame Image 13 Setting frame latency
　　

(12) Finally, use the Export Wizard to export this image as an animated GIF file. Then you can insert this animation in the Web page production process, to achieve the butterfly on the Web page dance effect. . png file Download

Finish effect