Creating animations in Flash

Finally, we're ready to create the animations in Flash. It's the best part of all, so let's have some fun!

The following are the animations we'll be creating in this task:

  • Moving the machine
  • Popping out the smoke clouds
  • Rotating the gauge pointers

Note

It's important to know that the Flash animations files will always have an infinite loop in Prezi.

Engage thrusters

It might seem difficult to create animations in Flash. I'll show you it's not that difficult at all!

Moving the machine

We can move the machine by performing the following steps:

  1. Open Adobe Flash Professional and create a new empty file by navigating to Create New | ActionScript 3.0.
  2. Navigate to File | Import | Import to Stage, choose machine.ai, and click on Open.
  3. Set the Convert layers to: Single Flash Layer option and mark the following two options:
    • Place objects at original position
    • Set stage size to same size as Illustrator artboard (172 x 136)
    Moving the machine

    We need some extra space around the machine, so we will enlarge the canvas.

  4. Navigate to Modify | Document and make the dimensions 10 pixels wider and 10 pixels higher. Put the machine in the middle of the canvas. It doesn't have to be the exact middle though.
    Moving the machine
  5. In the timeline, right-click on frame 2 and choose Insert Keyframe or press F6 on your keyboard. Hit the right arrow key to move the machine 1 pixel to the right.
  6. Right-click on frame 3 and choose Insert Keyframe. Hit the left arrow key to move the machine 1 pixel to the left.
  7. Right-click on frame 4 and insert another keyframe. Move the machine 1 pixel up.
  8. Right-click on frame 5, insert a keyframe, and move the machine 1 pixel down.
    Moving the machine
  9. Press the Enter key to test the movement.
  10. Save the file as machine.fla.
  11. Use the combination keys Ctrl/Cmd + Enter to create the .swf file and to view the infinite loop. The .swf file will be placed in the same folder as the .fla file.

Note

If you think the machine should shake much more, move 2 pixels instead of moving 1 pixel.

Popping out the smoke clouds

We will use the pipes.ai file for our smoke animations. We will use the whole file because location of the clouds is easier that way.

We can pop out smoke clouds by performing the following steps:

  1. Open a new empty Flash file and import pipes.ai. Use the same settings as for the machine import.
  2. Click somewhere on the canvas to select the whole illustration (notice a small blue line around it) and navigate to Modify | Break Apart.
  3. Deselect all the objects by pressing the Esc key or clicking somewhere on the canvas.
  4. Create a new layer by clicking on the most bottom-left button in the timeline or by navigating to Insert | Timeline | Layer. Double-click on the layer and rename it as cloud1_1.
  5. Select the smallest cloud of the clouds to the extreme left on the canvas (just click on it once).
    Popping out the smoke clouds
  6. Press Ctrl/Cmd + X, click on the new layer, and navigate to Edit | Paste in Place.
  7. Insert another two layers and name them cloud1_2 and cloud1_3. Move the second cloud of the three leftmost clouds to the cloud1_2 layer, and then move the third cloud to the cloud1_3 layer. Use Paste in Place instead of the usual paste.
  8. Right-click on frame 10 present in the cloud1_1 layer and choose Insert Frame or press F5 on your keyboard. Now, the smallest cloud will be visible for 10 frames.
  9. Click on the second cloud in the canvas and press Ctrl/Cmd + X. Right-click on frame 10 in the cloud1_2 layer and choose Insert Keyframe. Navigate to Edit | Paste in Place to put the second cloud back on the canvas.
  10. Right-click on frame 20 in the cloud1_2 layer and choose Insert Frame. Now, the second cloud will be visible for the frame between 10 and 20.
  11. Click on the timeline somewhere on frame 1 and select the third cloud on the canvas. Choose Ctrl/Cmd + X. Right-click on frame 20 in the cloud1_3 layer and choose Insert Keyframe.
  12. Navigate to Edit | Paste in Place to put the third cloud back on the canvas.
  13. Right-click on frame 30 in the cloud1_3 layer and choose Insert Keyframe. Now, the third cloud will be visible for the frame between 20 and 30.
  14. To make the rest of the illustration visible in all frames, right-click on frame 30 in the pipes.ai layer and choose Insert Frame.

    The timeline should look similar to the following one:

    Popping out the smoke clouds

    It's nice if the large cloud fades out and there's a pause at the end of the animation so that it doesn't start over again right away.

  15. Right-click on frame 30 in the cloud1_3 layer and choose Create Motion Tween. Click on OK to the question Do you want to convert and create a tween?
  16. Right-click on frame 40 in the cloud1_3 layer and navigate to Insert Keyframe | All.
  17. Click on frame 40 in the timeline, then click on the third cloud on the canvas, open the Properties panel, and choose the Alpha option in the Color Effect menu. Put the slider to 0%.
  18. Now right-click on frame 85 in the cloud1_3 layer and choose Insert Frame.
  19. Also, right-click on frame 85 in the pipes.ai layer and choose Insert Frame again.

    The timeline should look similar to the following one:

    Popping out the smoke clouds
  20. Save the file as pipes.fla and press Ctrl/Cmd + Enter to create and view the .swf file so far.

Now, let's move the second set of clouds to the middle of the machine. This explanation will be shorter. The following are the steps that needs to be performed:

  1. Delete the smallest of the three clouds.
  2. Create two new layers cloud2_1 and cloud2_2 and move the clouds to these layers.
  3. Now create the animations. The smallest cloud should be visible from frame 15 till frame 25 and the other one from frame 25 till 35.
  4. If you paste a cloud in a new frame, the cloud will be visible automatically till frame 85. For the cloud2_1 layer, remove the frames after frames 25 and for the cloud2_2 layer, remove the frames after frame 35.
  5. For this animation, you don't have to create a fade out. Not every animation should be the same. Clouds don't behave the same either.

    So far, the timeline will look like the following screenshot:

    Popping out the smoke clouds

Do you think you can create the last cloud's animation by yourself? Make it almost the same as the first animation, with a fade-out effect for the last cloud. We deleted one of the smallest clouds, so three clouds are left.

The timeline would look as follows:

Popping out the smoke clouds

Note

All kinds of variations are possible for these kind of animations. Use your imagination and experiment a lot!

Rotating gauge pointers

Ready for the last set of animations? Let's animate a few gauges.

  1. Open a new empty Flash file and import machine-gauges.ai. Use the same settings as you did for the machine import.
  2. Click on the machine and navigate to Modify | Break Apart.
  3. Click on the gauges and navigate to Modify | Break Apart again.
  4. Click on the left gauge, navigate to Modify | Break Apart, and do the same for the right gauge. Now, the pointers are separate objects, as shown in the following screenshot:
    Rotating gauge pointers
  5. Add a new layer and name it gauge1.
  6. Click on the pointer in the left gauge, press Ctrl/Cmd + X to cut the pointer, select the new layer, and navigate to Edit | Paste in Place to paste the pointer on the same place of the canvas.
  7. Select the pointer of the left gauge on the canvas and navigate to Modify | Convert to Symbol. Fill in the name gauge1 and make sure Movie Clip is selected.
    Rotating gauge pointers
  8. Double-click on the pointer; now you are inside the movie clip. At the top-left part, there's the name of the movie clip gauge1, next to Scene 1.
  9. Right-click on the timeline of frame 1 and choose Create Motion Tween. Click on OK for the question Do you want to convert and create a tween?
  10. Click-and-drag the last frame to frame 20. The animation should last for 20 frames.
  11. Select the Free Transform Tool in the Tools panel and move the rotation point to the center of the circle of the pointer, as shown in the following screenshot:
    Rotating gauge pointers
  12. Now, click on the timeline, choose Properties panel, open the Rotation menu (if it's not already open), and fill in Rotate: 1 time(s), as shown in the following screenshot:
    Rotating gauge pointers
  13. Save the file as machine-gauges.fla.
  14. Press Enter to test the animation.
  15. Click on Scene 1 in the top-left corner to return to the root timeline.
  16. Since the gauge is a movie clip, you can only test the animation when you use Ctrl/Cmd + Enter. The machine-gauges.swf file is automatically created.

You can create the animation for the second gauge exactly the same way. This animation should last for about 85 frames, so it's much slower than the first gauge.

Since we used movie clips, you don't see any animations in the root timeline. The animations are inside the timeline of the movie clips.

Rotating gauge pointers

Let's create the third gauge's animation by performing the following steps:

  1. Open a new empty Flash file and import gauge3.ai. Use the same settings that you used to import the machine. If you get the question This file appears to be part of a sequence of images. Do you want to import all the image of the sequence?, just click on No.
  2. The pointer of this gauge should make a whole rotation in steps (and not smooth like the previous animations). In each step, the pointer should rotate 10 degrees. This means it takes 36 steps to complete a whole rotation (360 degrees).
  3. Click on the gauge on the canvas and navigate to Modify | Break Apart.
  4. Select the pointer and move it to a new layer.
  5. Select the Free Transform tool and move the rotation point to the center of the circle of the pointer.
  6. Right-click on frame 10 in the new layer and choose Insert Keyframe. Open the Transform panel (Ctrl/Cmd + T) and fill in 10,0 for the Rotate option, as shown in the following screenshot:
    Rotating gauge pointers
  7. Right-click on frame 20, choose Insert Keyframe, open the Transform panel, and fill in 20 for Rotate.
  8. Repeat this until you reached a rotation of 360 degrees. To be honest, this is not the most fun part.
  9. Now, your last frame of the pointer layer is frame 360.
  10. Right-click on frame 360 in the gauge3.ai layer and choose Insert Frame.
  11. Your timeline should look like the following screenshot:
    Rotating gauge pointers
  12. Save the file as gauge3.fla, and use Ctrl/Cmd + Enter to create and view the .swf file.

    It's time for the last animation. We're almost finished.

  13. Open a new, empty Flash file and import gauge4.ai. This will be the gauge with the nervous pointer.
  14. Click on the gauge on the canvas and navigate to Modify | Break Apart.
  15. Select the pointer and move it to a new layer.
  16. Right-click on the new layer on frame 1 and choose Create Motion Tween. Click OK to the question Do you want to convert and create a tween?.
  17. Click-and-drag the last frame of the motion tween to frame 3.
  18. Use the Free Transform tool to move the rotation point to the center of the circle of the pointer.
  19. While the Free Transform tool is still selected, rotate the pointer a few degrees to the right, as shown in the following screenshot:
    Rotating gauge pointers
  20. Right-click on frame 6 in the new layer and navigate to Insert Keyframe | All. Rotate the pointer back to the middle.
  21. Right-click on frame 8 (not frame 9, that would make the animation too smooth) in the new layer and navigate to Insert Keyframe | All. Rotate the pointer back a few degrees to the left.
  22. Right-click on frame 11 in the new layer, navigate to Insert Keyframe | All, and rotate the pointer back to the middle.
  23. Right-click on frame 11 in the gauge4.ai layer and choose Insert Frame.
  24. Save the file as gauge4.fla and use Ctrl/Cmd + Enter to create and view the .swf file. It is shown in the following screenshot:
    Rotating gauge pointers

Objective complete – mini debriefing

We created all the animations for our prezi with Adobe Flash Professional. We used the .ai files for input and created different kinds of animations. We created motion tweens, frame-by-frame animations, and animations in movie clips.

Now, everything is finished to create our prezi.

Classified intel

We created a single file for every animation. It's also possible to create one file with all the animations in it. Most of the time this is more complicated. Also, with different files, you are more flexible in Prezi if you want to change something.

If you're already familiar with Flash, you could use separate movie clips for every animation and put them together in one file. Movie clips have their own timeline, which means that the cloud animations are not dependent on each other. The first cloud could start over again before the last cloud is finished. This makes your animations less predictable and, therefore, more real.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.17.18