Flash CS4 came with some big changes and features that still amaze us even after the more recent release of Flash CS5. Flash now has the ability to work with objects in 3D space directly within the working environment.
Although it's still a basic feature compared to what you can do with 3D in ActionScript classes, this tool opens the door to designers and animators who don't know much about code. It allows them to start moving their objects in 3D space without the need to use old methods (such as importing 3D animation in sequence images etc.)
Along with the 3D tool, Flash has changed the way we understand motion tweening by adding the new motion tweening style, which is more like the animation auto-key in After Effects. Along with the motion tweening changes, Flash comes with the Motion Editor. This panel has a lot of features and capabilities giving the animator more control over animation in Flash using animation curves.
The Motion Editor panel not only enhances animation by giving more options through curves control, it also provides control over animation easing, lending a more realistic look. The easing concept is known in many animation applications such as After Effects, but it was previously so basic in Flash and limited to changing the easing value from 100 to -100. The newer easing features give you more ability to control animation easing as we will see in the steps below.
In this tutorial, we'll merge the 3D and easing features by creating 3D animation in Flash and also applying the easing curves.
Final Result Preview
Let's take a look at the final result we will be working towards:
The first part in our tutorial is to build the cartoon scene for a room with a door.
Step 1: New Document
Open a new Flash document with the dimensions 600px X 450px and start drawing the outline of the room demonstrated in the figure below.
Note that the 3D tool is only available when you have the document publish settings for ActionScript 3 and Flash Player 10 or later. Additionally, it can be applied only on movie clip symbols. You should make sure that your File Publish Settings (found in File > Publish Settings, surprisingly) are set to Action Script 3 and Flash Player 10 or higher.
Step 2: Door
Cut the door area and place it on a new layer to be able to control it using the 3D tools.
Step 3: Details
Now, let's add some details to the background to give it a real cartoon look. We'll also add some shadows and textures to the floor and door.
Step 4: "Door"
Convert the door symbol to a movie clip and give it the name ‘Door’.
Step 5: The 3D Navigation Asset
The 3D navigation asset includes four cycles, dragging over each cycle allows you to rotate the symbol in one of the directions as following:
- The red cycle lets you rotate the symbol on the X axis
- The green cycle lets you rotate the symbol on the Y axis
- The blue cycle lets you rotate the symbol on the Z axis
- Dragging over the orange cycle lets you rotate the object in any of these directions. While it provides free rotation, it does not provide accurate rotation values.
While the door symbol is selected, choose the 3D tool. The 3D asset cycles appear in the middle of the movie clip symbol.
Step 6: Point of Rotation
Click on the center point of the 3D cycles and drag the navigation asset to the middle right of the door to make it the center point where the door rotates around. The final look for the background should be as below.
Step 7: Timeline
In the above steps, we prepared the cartoon background for the 3D animation through motion tweening. In this animation, we will animate the door to open and close using the 3D tool. Drag the timeline indicator to the first frame in the Timeline panel to start the animation.
Step 8: Select
Click on the 3D Rotate tool and click on the door symbol. Notice that the 3D navigation asset appears on the right side of the object.
Step 9: Open Sesame
Click over the green cycle and drag to open the door in the direction outside the room as shown in the figure below.
Step 10: Rotate
Move the timeline indicator to frame 50. And use the 3D Rotate tool to rotate the door to the other side of the room as shown in the figure below.
We've now created the 3D animation for the door on the Flash stage. Next, we will use the motion editor to create more realistic animation effects using the Easing curves in the Motion Editor panel. Whilst this enhanced easing feature was added to Flash CS4 and newer releases, the older versions of Flash had a simplified easing feature through the Easing value in the properties panel. You can still find this value when you click anywhere in motion tweening, but this method never gave many options other than easing in and out.
The Motion Editor panel consists of animation curves that control the object properties through animation over the timeframe. Each curve represents a specific property for the object and is responsible for it changing over the time and the level of the change. For example, the X curve represents the animation of the object on the X axis. This value becomes active when you create a motion tweening associated with it.
The easing curves in the Motion panel are similar to the rest of the motion editor animation curves as they gives you more ability to control the animations' realistic motion.
There are two main methods to create the easing curve. The first one is through the Ease presets drop-down menu that includes ready easing options. The second method is to create the custom easing curve. In this tutorial we will try both methods.
Before we proceed, here's a brief overview of the easing curves in the Motion panel.
In the Easing part of the Motion Editor panel, you can add / remove and edit the easing curves by simply selecting the desired curve. Before we see how to apply the easing effect on the 3D animation, we will briefly see how the Easing curve works in the Motion Editor panel.
The easing curve is a comprehensive method to control how the animation accelerates through the motion tweening to create a more realistic animation; it shows the acceleration or deceleration value of the animation through the time.
The Motion Editor panel gives you the option to create many easing curves and assign different curves to each motion property and apply different easings to each feature. In the following steps, we will start by applying an easing preset to the door opening animation.
Step 11: Select
Select the movie clip or click anywhere on the motion tweening, go to the Motion Editor panel and navigate to the Ease section.
Step 12: Add Ease
Click the plus icon in the Ease section to add ease from the drop-down easing presets. Choose the Spring easing.
Step 13: Y Curve
Go to the Rotation Y curve that displays the animation of the door. In the Easing drop-down list, choose Spring. Press Ctrl+Enter to test the animation.
You will notice that the door animation changed from a simple animation of two keyframes to a complex animation with spring effect. Also, you can add other easing presets and try them to see how it affects the door animation. The animation should be as following:
In the following steps, we will create a custom easing curve and apply it to the door opening animation. We'll have a closer look at how the curve works and get to grips with how to work with it.
Step 14: Remove Easing
First, let us remove the previous easing either by selecting No Ease from the easing drop-down list or clicking the minus icon on the easing section and choosing the easing you would like to remove. In this example, we will remove the Spring easing.
Step 15: Custom Easing
Click the plus icon next to the Ease section and choose Custom from the drop-down list. This will create a new custom easing curve with a green curve to indicate it is editable. If you create additional custom easing curves, each curve will have a unique color associated with it.
Step 16: Handles
The ease curve works similarly to drawing paths. You can create points on it; these points represent the keyframes or the points that indicate changes in the easing animation. Each point has two handles to change how the right and left parts of the curve look. Now, we will create points on the easing curve that will affect the door animation:
Right click on the easing curve and create keyframes on frames 10, 20, 30 and 40
Step 17: 0 - 100
The easing curve ranges between zero and 100. When the curve moves towards the zero value, the animation moves toward the first frame and moving the curve to the 100 value means it moves to the end of the animation. Also, note that the hard slip curve means higher speed acceleration and slow slip means slow animation acceleration.
We'll edit the points' position and curve to affect the animation acceleration. Select the first point and move it to easing value 100. This means that the animation will reach its end at this point and the hard slip means that the animation will accelerate fast.
Step 18: Points
Move the second point to the value zero, the third point to value 50 and the fourth point to value 50.
Step 19: Smooooth
Use the point handlers on the last two points to create a smooth curved slip to make the door animate slow at the end of the animation. The final easing curve should like the figure below:
Step 20: Test
Press Ctrl+Enter to test the animation and see how the new easing curve affects the door animation. The final animation for the custom easing should be as below:
Conclusion
This is the end of the tutorial. It aimed to help you understand how to use Flash's 3D tools to create animation in 3D space and apply the comprehensive easing features in the Motion panel through the easing curves.
Understanding Easing curves can help you create complex, realistic animation more easily and efficiently by applying easing curves to the animation instead of creating many keyframes in motion tweening.
You will also find this video tutorial by Tom Green useful in understanding more about the Motion Editor in Flash: Flash CS4 Motion Editor.
