Making a simple motion tween animation that will follow the motion guide later
1.1 Open a new document by selecting File > New. Select Flash File (ActionScript 3.0), click OK.
1.2 Save your document right away. Later, you’ll be able to save it just by pressing Ctrl+S. Remember to do this whenever you pass a certain number of steps or make significant changes to your document. It is better to save often then to lose your work because of your computer crashing, power shortages, etc.
OK. You’ll start by making a movieclip. You need it to make a motion tween animation which will be made to follow a motion guide later. A paper airplane will be fine for this kind of animation.
1.3 Select the Line tool (N). Select a darker grey hue for the Stroke color (I picked #646464), turn on the Snap to Objects option and make sure that Object Drawing is turned off. The screenshot below shows you these three options clearly.
Options for the Line tool.
1.4 Click and start dragging with the Line tool downwards. Make a line that is approximately 60-65 pixels long.
Drawing a straight line.
Since you have turned on the Snap to Objects option, drawing a straight line should pose no problem at all.
1.5 Select the Zoom tool (Z) and zoom in on the line that you just drew. Click and drag to zoom in on the desired area.
Using the zoom tool to work more easily.
You’ll be able to work more easily now.
1.6 Use the Line tool (N) again. The Snap to Objects option should be turned on from before (that’s the small magnet icon found at the bottom of the Tools panel). Bring the cursor near the top of the line, click and start dragging left and down. You will automatically start drawing from the top end of the existing line, thanks to the Snap to Objects option.
Drawing lines with the Line tool in Flash CS3
1.7 Add three more lines to complete one side of your paper airplane, as shown on the image below.
Adding further lines.
1.8 Select the whole drawing using the Selection tool (V).
Selecting the drawing with the Selection tool.
1.9 Copy the selected items by pressing Ctrl+C or selecting Edit > Copy.
1.10 You will now paste in place a copy of these lines either by pressing Ctrl+Shift+V or selecting Edit > Paste in Place. Now, there won’t be any apparent change. But you have just pasted a smae, exact copy of your drawing over the original one. To see it, use the left or right arrow keys on your keyboard to move the new copy.
Moving the new copy of your vector drawing.
If you had clicked anywhere on the stage after pasting the drawing in place, you will lose it. That’s because the copy will merge with the original automatically. That’s what happens with vectors (pure drawings, not symbols) in Flash. So, if you want to make use of your new copy, just move it before clicking anything else.
1.11 With the freshly pasted copy still selected, select Modify > Transform > Flip Horizontal.
Using the Flip Horizontal action to create a mirror image.
1.12 Move the mirrored half so that it joins the original drawing perfectly. You can do that with the arrow keys, but I recommend doing it with the Selection tool (V), because thanks to it, the drawing will perfectly snap into place, as shown in the picture below.
Putting two vector objects together with the selection tool.
1.13 If you wish to make your paper airplane more realistic, you can apply some linear gradient color fills to it. Use the Paint Bucket tool (K) to do it.
Applying some linear gradients to the vevtor drawing.
1.14 Turn back the zoom to 100% (no zoom at all).
Zooming the stage to 100%
1.15 Select your completed drawing, both the lines and fills, using the Selection tool (V). To create a movieclip out of your selected vector drawing, select Modify > Convert to Symbol.
Call your new symbol paper airplane, select Movie clip as type and also select the central square for the registration point This last choice isn’t exactly a must, but it will make creating the guided animation a little bit easier. Click OK.
Creating a new movieclip symbol in Flash CS3.
…as soon as you do that, an azure outline will appear around your newly made symbol and the Properties inspector will also show you that you are dealing with a movieclip symbol now and not a simple drawing anymore.
The new movieclip shown.
You will create a simple motion tween animation now.
1.16 Right-click on frame 50 and select Insert Keyframe.
A new keyframe is being inserted into the layer.
1.17 Use the Selection tool (V) to move the movieclip. Just click and drag it to a new position. You can place it anywhere, because what’s important is that you make a motion tween animation, the direction of the movement isn’t important now.
Moving the newly made movieclip.
1.18 Right-click between the two keyframes and select the Create Motion Tween animation.
Creating a motion tween animation.
If you have done everything properly, an unbroken arrow over a purple background should appear.
A correctly done motion tween animation.
If you didn’t obtain a good motion tween (your arrow is dashed-broken), please check my motion tween animation tutorial which explaines in detail how to make such an animation, and where possible errors may lurk.
1.19 Call the current layer airplane and lock it.
The first layer has been renamed and locked.
Fine. Now you have the prerequisite for creating a guided animation — a simple motion tween. Let me show you how to add a guide to it.
Top of page
2. Creating a motion guide
2.1 Click the Add Motion Guide icon beneath the layers to add a new motion guide.
Adding a motion guide layer.
As you can immediately see, a new motion guide layer has been added to your document. The layer benath it (airplane) has instantly become linked to this layer, become the guided layer. The airplane layer is now guided by the Guide: airplane layer. This can clearly be seen by the layer’s icon which has become slightly indented — it has moved to the right.
The motion guide and the layer guided by it.
Also, the duration of the guide layer is the same as that of the guided layer (50 frames in this particular example).
2.2 Select the Pencil tool (Y). In the Tools panel, go to the end of it and choose the Smooth option for drawing with your pencil.
Smooth option for the pencil tool.
In the Properties inspector, select hairline as line type and enter 100 as the value for the Smoothing option. Choose any color you like, since the guide won’t be visible. I chose hairline to be able to work more easily and adjust the animation in more detail.
The options for the Pencil tool.
2.3 Click and start dragging with the Pencil tool (Y) to draw a guide (in the Guide: airplane layer, of course). Make a curve — it will come in handy for simulating the flight of your paper airplane. I started and finished drawing the curve outside the stage on purpose — to make it appear as if the airplane flew inside the scene and then disappeared outside of it.
A curve will serve as the guide for the animation.
Top of page
3. Creating a guided motion tween animation
3.1 Now lock the Guide: airplane layer and unlock the airplane layer. Click on the first keyframe of the airplane layer to select it.
Locking and unlocking the layers.
3.2 Click on the paper airplane movieclip once to select it – do this with the Selection tool (V).
3.3 You will move the movieclip to the guide’s starting point. Use the Selection tool (V) again. Click on the movieclip’s registration point (that’s the small circle with a little cross inside) and drag it over to the beginning of the guide. Once the movieclip is ready to snap into place, you will see a bold, black circle appear near your cursor, as shown below.
The movieclip has just snapped onto the guide.
If the snapping does not occur, check if it is turned on.
The Snap to Objects option selected in the Tools panel.
3.4 Click on the second keyframe in the airplane layer to select it.
Selecting a keyframe in the guided layer.
3.5 Now do the same thing for the movieclip in this keyframe: Place it over the other end of the guide using the Selection tool (V). It should also snap into place, just like before.
Placing the movieclip on the guide.
3.6 Speed up the animation a little bit (before testing it), by increasing the frame rate of your Flash movie. Double-click the frame rate (below the layers) to open the Document Properties window.
Accessing the frame rate option in Flash CS3.
Set the Frame rate to 24 fps and click OK.
Modifying the speed of the SWF movie.
3.7 Select Control > Test Movie. You should see an animation similar to the one shown below.
Wow! The movieclip is moving along the guide! You did it. But, there is one obvious flaw here: the paper airplane isn’t moving around as in the real world. It should be moving with its nose pointing forward. So let me show you now how you can easily do that (you must, because animation is about simulating the real-world)!
3.8 Select the first keyframe again.
Selecting the keyframe for motion adjustment.
3.9 Select the Free Transform tool (Q). Also, turn off the Snap to Objects option to be able to adjust your movieclip’s position freely, without any snapping.
Selecting the Free transform tool.
3.10 Bring the cursor near one of the movieclip’s corners (if the movieclip isn’t selected, select it now). Click and start rotating until the paper airplane’s nose is aligned with the direction of your motion guide (the curve in the layer above it).
Rotating a movieclip with the Free Transform tool.
3.11 Select the second keyframe of your animation again.
Selecting the keyframe on the animation's ending.
3.12 Adjust the movieclip with the Free Transform tool here too. The important thing is that the movieclip should be oriented as if it was following the guide all along — aligned with its direction.
Rotating the movieclip in relation to the motion guide in the layer above it.
3.13 There is one last thing to be done to have a proper guided motion tween: Select the first keyframe again (like you did in step 3.8) and go to the Properties inspector. Once there, turn on the option called Orient to path. Make sure that it is selected, as seen below.
Selecting the Orient to path option for the guided animation.
3.14 Test your SWF again by selecting Control > Test Movie and you should see your airplane moving realistically, as shown at the beginning of this lesson.
Now that was easy, wasn’t it? Guided animations are fun, because they help simulate real-world movements of various objects.
10:33 PM
Tutor Malaysia
Ini adalah montaj perisian Animal World. Rekaan teks dibuat oleh saya sendiri, manakala imej latar belakang adalah dicari menerusi internet. Montaj ini turut memuatkan bunyi audio yang telah diimport ke Library sebelum ini.
Ini pula adalah paparan skrin Menu Utama perisian kami. Saya menggabungkan pelbagai gambar haiwan yang diambil dari internet. Kemudian saya memasukkan kod untuk setiap butang.
Ini adalah paparan di ruangan Nota. Pada skrin ini saya telah mencadangkan agar dibuat Button Frame, atau bingkai untuk menyeragamkan susunan Butang Perisian bagi memudahkan proses salin semula butang perisian, dan juga menjadikan paparan yang dihasilkan lebih kemas.
Ini pula paparan untuk Scene Kuiz dibuat oleh Afidah berdasarkan apa yang telah dipelajari menerusi aktiviti di Makmal Komputer.
Ini adalah paparan untuk permainan oleh Khairunnisa. Kebanyakan bahan yang dibuat untuk setiap Scene adalah didasarkan daripada latihan-latihan aktiviti di Makmal Komputer.