Fireworks animation: Airplanes and parachutes

Source: Internet
Author: User
Tags format key modify reference
Today we are going to learn to make a wonderful animation with fireworks, from this example we can learn the use of lasso tools and external image input methods, and you will actually contact the animation production of essential concepts such as layer (layer), frame (frame), Symbol (symbol) and instance (reference), and how to use them reasonably.

To make the animation look more realistic, we use pictures of airplanes and parachutes as a source of material, and if you can carefully follow the instructions below, you'll be able to make the perfect animation that's similar to the picture in this example.

  The first step : Import the aircraft picture and remove the background. Open a new file, width=250,hight=120, and the background color is #0066ff. Select File > Import (Import External file), and select a photograph of the aircraft in the catalog (this example uses a photo that has been resized in advance, in GIF format), as shown in Figure 1. In the Toolbox Select the Lasso tool polygon Lasso, with the mouse carefully along the aircraft's external contour a small paragraph attached to a small paragraph, when the selected path first connected, click the left mouse button, contour line into dashed, as shown in Figure 2. Then select Edit > Cut from the main menu, trim and save the selected aircraft image to the Clipboard, then select Edit > Deselect,edit > Clear to remove any remaining photos after the cut.

Figure 1 Importing Airplane pictures Figure 2 Using a lasso to remove the background
   Second Step: Turn the plane image into symbol. Select the main Menu's edit > Paste and copy the image you just cut from the plane to the artboard. Click on the airplane image, select Modify > Group, and choose Insert > Convert to Symbol, and change the image into a symbol, and in the dialog box that appears, enter a name, such as plane (do not enter Chinese name), Type select graphic, as shown in Figure 3, and then click OK to turn the airplane image into a symbol. Choose Edit > Clone, clone the instance of a plane, pull the new plane to the top, select the original (first) aircraft, select the Trasform button in the toolbox, and drag the small square that appears on the corner of the box around the first plane, and turn it to a smaller Then drag the cloned (second) plane to the top left side of the artboard, pressing the SHIFT key to select all two planes, as shown in Figure 4.

Figure 3 Symbol property settings
Figure 4 Selecting symbols and references at the same time

  Step three : let the plane fly. Select Modify > Symbol > Tween instances, in the dialog box that appears, the step bar is changed to 20, indicating that the plane flies from the lower right to the top left of the process to use 20 frames, tick the following small box, as shown in Figure 5, click OK. Select Window > Frames, open the frame panel, there is a 22-line frame edit box, press the SHIFT key to select all of them, click the small triangle in the upper right corner of the frame panel, select Properties, in the dialog box that appears to change 20 to 10, Make each frame play time from 0.2 seconds to 0.1 seconds, and then tick the following small box, as shown in Figure 6. Click the mouse at any point in the frame panel, and the animation of the plane is complete. Click the playback button in the lower right corner of the screen to see, you will see the plane from afar, flying closer to appear larger, and finally from the top left of the screen.

Figure 5 Frame number settings for animation
Figure 6 Time settings per frame
   Fourth Step: The first stage of the parachute. The design of this example is that the plane just want to fly out of the picture before, there is a parachute from the plane down, parachute descent process is divided into three stages: not open fast fall, not open to quickly open, open after the slow swing down. This step is the first stage of it. Click on the layer (layer) on the left side of the frame panel and open the Layer panel, and you will see that there are two layers of web layer and Layer1, and the Layer1 (first level) is the aircraft animation we did before. Click on the small triangle in the upper right corner of the Layer panel choose New Layer (Create a new layer), pop-up a dialog box, such as Figure 7, do not need to change it, click OK, will be added to the Layer panel Layer2 (second layer), the parachute will be placed on this layer, as shown in Figure 8.

Click on the Frame information box at the top of the layer panel, select Frame18, select Layer2, select Main Menu File > import, enter the parachute photo (already made transparent picture in GIF format), and follow the steps in the second and third steps above. Turn the parachute image into a Symbol, name Parash, and clone a second parachute image below it, adjust the two images to the minimum, first move to the lower quadrant of the plane, the second to the lower left position, and then select Modify > Symbol > Tween > Instaces, Frame number input 7, completed the first stage of the parachute production. When editing this layer, in order not to affect the first layer has been done, you can add the first layer of the lock (click on the layer panel Layer1 that line of the eye icon to the right space), shown in Figure 8.

Figure 7 Adding a new layer setting
Figure 8 locking the old layer in the Layers panel
   Fifth Step: The second stage of the parachute. In the layer panel, select frame 26 (that is, the last frame done), then select the small parachute image on the diagram, clone another parachute, and resize it to a larger, move to the next side of the previous small parachute, and select the reference for both parachute images, as shown in Figure 9. Select Modify > Symbol > Tween instances, change the frame number to 2, and tick the box below, as shown in Figure 10.

Figure 9 Selecting two references at the same time Figure 10 The second stage frame number setting

  Sixth step : The third stage of the parachute. Select Frame 29 (frame 29th) in the Layer panel, clone another parachute in the diagram, resize it slightly, rotate it slightly, drag it to the lower left of the previous parachute, and select two parachutes, as shown in Figure 11, and then select Modify > Symbol > Tween instances, the frame number is changed to 6, as shown in Figure 12. Select Frame 36 in the layer panel, repeat the steps above, but the second reference is moved to the lower right of the previous one. Choose Frame 43 again and repeat the steps above, but move most of the newly cloned parachutes to the screen, as shown in Figure 13. Finally, open the frame panel and select frame 29 until the last frame (press SHIFT), click on the small triangle in the upper right corner, select Properties, change the number 10 to 20, that is, reduce the parachute third stage of the descent speed by one times, as shown in Figure 14. Thus far, this example is complete, press the lower right corner of the screen play button to see the effect, if your computer is not too advanced, you may feel the whole slightly slower, but when you output into the animated GIF (GIF format animation), then play when the speed can be, the effect is good?

Figure 11 Two references in phase III Figure 12 Frame number settings for phase III

Figure 13 The following reference to the large part of the move out of the picture Figure 14 The third stage per frame time adjustment

Here are two frames in this animation, the last one is actually the entire animation, but if you do not do it yourself, only the picture on the book, how it can be active?

Figure 15 A frame after the completion of the picture Figure 16 Complete the entire animation


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.