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:
It might seem difficult to create animations in Flash. I'll show you it's not that difficult at all!
We can move the machine by performing the following steps:
machine.ai
, and click on Open.We need some extra space around the machine, so we will enlarge the canvas.
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.frame 3
and choose Insert Keyframe. Hit the left arrow key to move the machine 1 pixel to the left.frame 4
and insert another keyframe. Move the machine 1 pixel up.frame 5
, insert a keyframe, and move the machine 1 pixel down.machine.fla
..swf
file and to view the infinite loop. The .swf
file will be placed in the same folder as the .fla
file.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:
pipes.ai
. Use the same settings as for the machine import.cloud1_1
.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.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.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.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.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.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.frame 30
in the pipes.ai
layer and choose Insert Frame.The timeline should look similar to the following one:
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.
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?frame 40
in the cloud1_3
layer and navigate to Insert Keyframe | All.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%.frame 85
in the cloud1_3
layer and choose Insert Frame.frame 85
in the pipes.ai
layer and choose Insert Frame again.The timeline should look similar to the following one:
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:
cloud2_1
and cloud2_2
and move the clouds to these layers.cloud2_1
layer, remove the frames after frames 25
and for the cloud2_2
layer, remove the frames after frame 35.So far, the timeline will look like the following screenshot:
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:
Ready for the last set of animations? Let's animate a few gauges.
machine-gauges.ai
. Use the same settings as you did for the machine import.gauge1
.gauge1
and make sure Movie Clip is selected.gauge1
, next to Scene 1
.frame 1
and choose Create Motion Tween. Click on OK for the question Do you want to convert and create a tween?machine-gauges.fla
.Scene 1
in the top-left corner to return to the root timeline.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.
Let's create the third gauge's animation by performing the following steps:
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.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:frame 20
, choose Insert Keyframe, open the Transform panel, and fill in 20
for Rotate.frame 360
in the gauge3.ai
layer and choose Insert Frame.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.
gauge4.ai
. This will be the gauge with the nervous pointer.frame 1
and choose Create Motion Tween. Click OK to the question Do you want to convert and create a tween?.frame 6
in the new layer and navigate to Insert Keyframe | All. Rotate the pointer back to the middle.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.frame 11
in the new layer, navigate to Insert Keyframe | All, and rotate the pointer back to the middle.frame 11
in the gauge4.ai
layer and choose Insert Frame.gauge4.fla
and use Ctrl/Cmd + Enter to create and view the .swf
file. It is shown in the following screenshot: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.
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.