Flash Project 2

Flash Project 2:
Creating AdvancedAnimations

Before beginning the tasks in this project, create a new folder in your home directory, naming it Lastname Project 2.

Task 1 - Trace Bitmap to Vector and Shape Tween

Begin new document, save in your Project 2 folder as Lastname Penguin.fla.
Change the color of the stage to some light color, maybe blue to look wintery.
Copy and save the image at the right, then import the image onto the stage, centering it horizontally and vertically.
Convert the image to Vector and prepare it for animating:
1. With the bitmap image selected, choose Modify > Bitmap > Trace Bitmap. In the Settings dialog box, set the Color Threshold at 100, the Minimum size at 30, and the Curve Fit as Tight. Click OK.
  The high values for these settings cause the image to separte into large blocks of similar colors.
2. Deselect the bitmap. Click in various parts of the image to see that it has been divided into the different color blocks, and each is now a different object.
3. Click in one of the outside white areas. Press Delete. Repeat to remove all the surrounding white areas.
4. Select each of the sections of the scarf, and the hat, and change the color.
Animate the eyes to blink:
1. Name the current layer penguin. Create a new layer above the penguin layer and name it eyes.
2. Select the eyes from the penguin layer, and paste in place on the eyes layer.
3. Hide the eyes layer, and fill the empty space in the penguin's face with white. Unhide the eyes layer.
4. Extend both layers to frame 50-60 or so. Make keyframes at frame 3 and 5 on the eyes layer.
5. With the eyes deselected, and frame 3 selected, adjust the eye shapes to 'close' the eyes as if the penguin is blinking.
6. Add a shape tween in both small frame ranges to make the eyes seem to blink.
Test your movie.
Note that all the extra frames set the looped animation to blink only occasionally.
Make any adjustments you need in the blink frame (3). When you are satisfied, save and publish your animation.

Task 2 - Animating a Puppet Made of SymbolsDancing-Man.fla

Right-click on the doc link at the right and open the file dancing_man.fla. Save in your Project 2 folder with your lastname at the beginning.
Examine the file for a moment - look in the library to see that each body part is a separate movieclip symbol.
It is often convenient to create different symbols for each different part that will be animated.
Arrange the puppet:
1. Move the head up a bit to be out of the way for now.
2. Click on an upper arm section and bring it in front of the body section; repeat with the other upper arm.
  This will make it easier to see the joints as you make the bone structure.
Add the Arm bones:

Choose the Bone tool from the Tools panel and click at his neck to set the head (top/beginning point) of the bone, and drag to the shoulder joint to set the tail (bottom/ending point).
Click again to add a bone from the tail of the first bone to the elbow joint.
Add a third bone from the tail of the second bone to the wrist area on the hand.
Test your structure by dragging the hand around.
Nice that the arm parts follow, you probably did not want to have the body move.
Undo to return to the original pose.

Add constraints to control movements:
1. Click the first bone.
2. On the Properties panel, uncheck the Enable box in Joint: Rotation.
3. Now test the movment - constraints are always put on the head of a bone, not the tail.
4. Undo to reset pose.
5. Click the forearm bone. On the Properties panel, check the Constrain property.
6. Test the movement again. Note that the hand can still rotate into an unnatural position.
  Since constraints are only added to the head of a bone, what can be done to constrain the hand to not move like this?
7. Reset the pose.
Use a 'handle' to constrain the hand:

From the Library, drag the handle symbol to the stage on the Puppet layer, and place it just past the end of the hand.
Draw another bone from the wrist to the handle.
Test by dragging the handle. The hand will still move into unnatural positions, but now there is a bone head (hehe) that can be constrained.
Adjust the hand in the position you see in the illustration at the right.
On the Properties panel, enable constraints. Then increase the Max value of the joint rotation to match the 'handle' in the constraint widget.

Repeat what you have done so far on the other arm.
Add the Leg bones:
1. With the bone tool, drag from the head of the first bone, drag to where the hip should be.
  The upper leg symbol comes to the top and you can see if you have hit the right spot.
2. To adjust where the bone tail is attached, use the Free Transform tool to select the upper leg symbol. Move the rotation spot onto the plus sign that indicates the joint.
  When you go back to the bones, the tail should be in the correct position.
3. Continue to add bones, including the handles at the end of the feet
4. Add rotation constraint so the ankles will not rotate.
5. For the knee and hip joints, add constraints as needed to allow only natural movement.
Add the head bone

Move the head back down into position.
Add a handle and bone to control the head as you did with the hands and feet.
Add a constraint so the head can only move naturally.

Animate the puppet:
1. Adjust the puppet in a pose you want for the beginning frame (probably like in the illustration at the right.
2. On the Armature layer, drag to about frame 45 and insert a pose.
3. Move to frame 15 and change the pose.
4. Move to frame 30 and change the pose again.
5. Test your movie to see that you like your puppet dance. Make any adjustments you wish.
Remove the handles and publish:
Before publishing, you should make the handles disappear.
1. Switch to the Library and double-click the handle symbol to enter its editing mode.
2. Change the alpha value of the symbol to make it transparent.
3. Return to Scene1.
4. Test your movie. When you are satisfied, save, publish and close.

Adapted from layersmagazine.com

Task 2 - Animating a Solid Character

Start a new Flash 3.0 document. Save in your Project 2 folder as lastname redman.fla.
Prepare the Character:
1. Create a Character with your favorite vector editing tool such as Flash, Illustrator, or Fireworks, as you prefer.
  Here is an example to follow (you can leave off the face, it may not work correctly anyway.:
2. The following are some best practice tips you should to bear in mind as your create your character.
  - Closed stroke and fill- your graphics should always have closed stroke. When tweening in between poses, closed stroke makes the best result.
  - Simplfy shape - your graphic should have a simple shape. Optimize your shape and remove unnecessary points on the shapes.
  - Simple colour – Your graphics should have a simple color for easy tweening.
  - Symmetry Pose shape – Draw your character in symmerty pose shape. The pose shape should have the arm and leg easy to set the pose.
3. If you created your character outside of Flash, import the file to the stage now.
Add bone structure to the character:
In order to animate your charater, you need to add bone to your graphics.
1. Select bone tool in the toolbar.
2. To create main bone on the body, click on the position under the head and drag to near the hip of the character to create a bone.
  Here only one bone is used for the whole body. You can add more bones if you need more complex animation on the body.
3. To create the shoulder bone, move the mouse to the join of the main bone under the head. Drag and create the left shoulder bone parallel to the shoulder. The end of the bone should be near the middle area of the joint between body and arm.
4. Repeat for the right shoulder.
5. To create the hip bone, move the mouse to the join of the bottom end of the main bone under the head. Drag and create the left hip joint. The end of the bone should near the middle area of the joint between body and leg.
6. Repeat for the right hip.
7. To create the head and neck bone, drag from the joint under the head and create a small neck bone.
8. Then, drag from the end ofthe neck bone and create a bigger bone to use for head.
  The head bone will connect to the head later to control the movement of the head. It is better to have a bigger head bone in order to control all the points in the head.
9. To create the arm bones, start from the end-joint of the left shoulder bone. Drag and create 3 bone along the left arm. Shoulder to elbow, elbow to wrist, wrist to hand.
10. Repeat for the right arm.
11. To create the leg bones, start from the end-joint of the left hip bone. Drag and create 3 bone along the left leg. Hip bone to knee, knee to ankle, ankle to foot.
12. Repeat for the right leg.
13. Select your entire character and remove any stroke.Save your character shape.
Optimize the character and bones for animation:

Optimize body bone
The body bone is use to hold the body shape and it is the root of all bone. To move the position of the character, you move this bone. To adjust the shape affected by the body bone, you need to use the binding tool.
1. Press and hold on the bone tool icon in the toolbar, the binding tool icon will appear. Select it.
2. Select the body bone and the points on the 'skin' affected by this bone will be highlighted in yellow.
3. Check to see if the points along the skin are appropriate for the selected bone.
4. To add a point to a bone, click on the point and drag to the bone you want it connected to.
5. To remove a control points from a bone, Ctrl-click a control point that is highlighted in yellow.
  Points shown as squares are connected to one bone only. Points shown as triangles are connected to two or more bones.
Optimize hip and shoulder bones
Shoulder bone is used to connect the arm to the body, and the hip bone is used to connect the leg to the body.
In this character, these bones are only used for connection and they will not affect the shape. Therefore, you need to fix the position and rotation of these bones.
1. Disable all the connection from these bone to the shape:
  1. Select binding tool and click on the left shoulder bone.
    You can see some shape points are highlighted.
  2. To remove control points from the bone, Ctrl-click each control point that is highlighted in yellow.
  3. Repeat for right shoulder bone.
  4. Repeat for the hip bones.
2. Disable the rotation of these bones:
  1. Use the select tool to select the shoulder bone.
  2. In the Properties panel, you will see the option panel for Joint: Rotation. Click on the “enable” check box to disable it.
  3. Repeat for the right shoulder and two hip bones.
Optimize head and neck bone
The head and neck bone is use to control the movement of head. To have a better result, you should limit the movement of the neck and head bone.
1. Select the neck bone.
2. From the Properties panel, click the Constrain check box, and set the rotation constriant to -15 to +15 degrees.
3. Click the neck bone with the bind tool, and only connect points near the neck area.
4. Select the head bone. In the Properties panel, set the rotation constriant to -20 to +20 degrees.
5. Then connect the rest of the points in head area to the head bone.
6. Now, you can test the head movement. Use the select tool and select the head bone.
7. Drag and move the bone and you can see the head move with the bone.
8. Undo to reset the bone position to normal.
Optimize arm and bone
1. Set the connections for each bone - use the bind tool to select the upper arm bone.
2. Add or subtract connections as needed to be like the illustration at the right.
3. Select forearm bone.
4. Use the binding tool to add or delete connecttions as needed to be like the illustration at the right.
5. Select hand bone. Use the binding tool to connect all points from the hand to the bone.
Set the rotation constraints for each bone:
1. Limit the ratation of the upper arm from -10 to +70 degrees.
  This will make sure the arm will not collapse with the body and head.
2. Then we limit the rotation of the lower arm from -80 to +0 degree.
  This make the arm move more nature.
Test the movement of arm.
The arm looks strange when the lower arm bome is moved. You will need a further tweak on the shape.
First, add one more point on the arm: Use the add anchor tool (Pen tool flyout) - click on the arm and add a point.

Move the point and make the shape like the illustration.
Next, reconnect some point to the bones.
Now, the arm looks better. Repeat the steps with the left arm.

Optimize leg and bone
The legs need to be adjusted, similar to the arms -connect the shape to the bone and limit the rotation of the bone.

Select the upper leg bone. Use the binding tool to connect the upper area shape to the thigh bone.
Select the lower leg bone and connect the lower leg shape.
Last, select the foot bone and connect the foot shape.
Set the rotation constraint for each bone.
Limit the ratation of the upper leg from -45 to +25 degrees. Then we l
K imit the rotation of the lower leg from 0 to +45 degrees.
Limit the rotation of foot from 0 to +45 degrees.
Test moving the bone.
You can see the shape move with the bone like a skin of the bone.
If the shape not moving correctly, you can adjust the connection between bones and points.

When you are satisfied with your work, save.

Make your Character Dance:
1. Set the start pose and end pose
  1. Start at a standing pose and end with the same pose. Using the select tool press and drag on the bone to where you want.
  2. Because you need to have the same pose at the end, create a new key frame at 150 frame by pressing F6.
    Now, you have 2 key frame at frame 1 and frame 150.
2. Set the leg poses
  1. Select fram 15. Move the foot bone, and the leg will follow like a linked chain.. Set the pose of leg like at the right.
  2. At frame 30, create a new key frame. Set the pose of leg like at the right.
  3. At frame 45, create a new key frame. Set the pose of leg like at the right.
  4. At frame 60, create a new key frame. Set the pose of leg like at the right.
  5. At frame 90, create a new key frame. Set the pose of leg like at the right.
3. Set the arm poses
  1. Drag on the hand bone to move the arm. At frame 30, set the pose of arm like at the right.
  2. At frame 40, create a new key frame. Set the pose of arm like below.
  3. At frame 55, create a new key frame. Set the pose of arm like at the right.
  4. At frame 70, create a new key frame. Set the pose of arm like at the right.
4. Set the head pose
  Drag the head bone to move the head. You will see the head movement is limited when you move the bone.
  1. At frame 23, create a new key frame. Set the pose of head like at the right.
  2. At frame 37, create a new key frame. Set the pose of head like at the right.
  3. At frame 47, create a new key frame. Set the pose of head like at the right.
  4. Test the animation.
5. Add easing to the animation.
  Some of the animation may not look natural. Since they are always move in the same speed. But easing between each pose will fix this.
  1. Click on the time line, between two key frames.
  2. On the Properties panel, add the easing effect. Experiment with different strengths, directions (in or out) and type of easing effect (dropdown as shown).
  3. Continue to add easings as needed in all the timeline spaces, to make the animation look as lifelike as possible.
When you are satisfied with you animation, save, publish and close.

Adapted from flashenabledblog.com

Task 3 - Using the Bone Tool for Non-Character Animation

You will create an animation that simulates blades of grass (probably from another planet!) moving

Start a new Flash 3.0 document, and save it in your Project 2 folder as Lastname GrassAnimation.fla.
Create a Movie Clip
1. Insert a new Movie Clip symbol, naming it grass_mc.
2. Enter editing mode for the movie clip.
Drawing the Blade of Grass
First you need to draw out this weird curly blade of grass.
There are several ways you can do this. But one easy way is to draw a closed shape of the grass blade using the pencil tool and then filling it in with a solid color.
1. Select the Pencil Tool
2. At the bottom of the Tools panel, set the Pencil Mode to Smooth.
  Setting the Pencil Mode to smooth will make your lines seem more fluid.
3. Be sure you are in the grass_mc movieclip timeline, and start drawing your shape's outline.
  Suggestion: Imagine there is a stencil / cut-out of this blade of grass and you are following the outline of it.
  Do make sure that the shape you have drawn is fully closed.
4. Use the Paint Bucket tool to give your blade of grass a fill color.
5. Select the stroke and delete it.
Setting up the Bones
Now that the shape is done, you'll use the Bone tool to divide the shape into individual components that can be independently adjusted.
1. With your shape selected, click the Bone tool from the Tools panel.
2. With the Bone tool, click on the base of your shape and start moving your mouse up to create the first segment of your joint: After dragging up the mouse up a short way, release the mouse to set the first joint:
  This is only the first joint, and you will need many more.
3. Click on the tip of the joint you just created and begin drawing another joint:
  Just like before, release your mouse after you have drawn a joint an appropriately sized bone segment.
4. Keep creating these joints hugging the contours of your shape until you hit the end of the road.
  That is a lot of joints for a blade of grass!
  If you find have trouble geting the joint to map with the curves in your shape just right, zooming in or turning snapping off (View > Snapping) can help.
Creating the IK Animation
With your bones set, it is time to create the IK animation.
1. In your timeline, you will see a layer called Armature created for you: Remember, when you use the bone tool on the shape, the Armature layer is created for you.
  Check the layer that contained your grassblade. It should be empty now, so you can delete the layer.
2. On the Armature layer, right click on Frame 120, and insert a pose.
  A keyframe is inserted for you at Frame 120 with a green background color filling up all frames between 1 and 120 in the Armature Layer:
3. Around Frame 60, insert another pose.
  This may take a few seconds.
4. With your playhead on Frame 60, click on the Selection Tool to go out of Bones mode.
5. Make sure your shape is selected, then click on any of the joint endings and move them around with your mouse cursor:
  Getting the right pose you want is a bit of an art, and with a shape containing as many joints as this, you may find the lag between your mouse movement and your shape actually updating to be quite noticeable.
  With some trial and error (and Undo), you should be able to make it how you want.
6. Once you have gotten your shape in just the right pose that you want, test your scene.
Add Instances to the stage:
1. Return to the main timeline and place an instance of the grass_mc movieclip on the stage. Test the movie.
2. Add three move instances 'behind' the first instance, sizing and placing them as in the example at the beginning.
3. Reduce the Alpha setting for these three instances equally.
4. Add one more instance, again 'behind' the original instance. Make it very large, and lower the Alpha value to almost transparent.
5. Test your movie. When you are satisfied with your results, save, publish and close.

Adapted from www.kirupa.com

Task 5 - Animating Bitmaps in Movie Clips

Begin a new document, save in your Lesson10 folder as Lastname BitmapGarden.fla.
Copy the images at the right into your Flash folder. Import the flowergarden image onto the stage, centering it horizontally and vertically.
Import the three butterfly images to the library.
Create and edit butterfly bitmap symbols:
1. From the Insert menu, choose New Symbol. Name the symbol to describe one of the butterflies, and click the Graphic button, then click ok
2. Drag a butterfly onto the empty symbol editing area.
3. Break the bitmap apart, then use the lasso/magic wand and eraser to remove the background, isolating the butterfly.
4. Select the bitmap. Use the Free Transform tool to resize the butterfly proportionally to no more than 75 or so pixels wide.
5. Center the bitmap horizontally and vertically on the stage. Close the symbol.
6. Repeat with the other butterflies, creating new graphic symbols, removing backgrounds resizing and centering.
Create butterfly movie clips

Insert a new symbol, making it a Movie Clip symbol, and naming it the same as one of the butterfly symbol, with mc at the end.
In the blank movie clip, drag the appropriate butterfly onto the stage, centering it horizontally and vertically.
Add a motion tween of about 5-7 frames. At the end of the short motion tween, insert a Position keyframe to set the original butterfly in that frame. In the center of the tween, use the Free Transform tool to change the width only of the butterfly, making it about half as wide as the original.
Take care that the center remains fixed in place.
Test the animation to see that the butterfly seems to be waving its wings. Close the symbol.
Repeat with the other butterflies, creating movie clips, adding and animating the butterfly.
Make each butterfly animation a different length. The shorter the animation, the faster the butterfly wings will flutter.

Assemble the garden animation:
1. Rename the existing layer as garden, or some other appropriate name. Add frames to extend the background to frame 50.
2. Create three new layers named fly1, fly2, and extras.
3. On the fly1 layer, drag an instance of the butterfly movie clip with a medium flutter rate, and place just off the left or right edge of the image. Rotate it so that it will look right to fly across part of the garden background.
4. Drag the single keyframe to the right to between about 5 and 15.
  This makes the motion begin later in the animation.
5. Add a motion tween, extending it so frame 45 or so. At the end of the motion tween, postition the butterfly so that it is off another side of the stage, where it would be if it had flown across the garden, and adjust the rotation if needed.
6. Adjust the path of the motion tween, so that it makes a slight S-curve from beginning to end.
7. Select the motion tween and orient the symbol to the path (Properties panel).
8. Test the movie - the butterfly should move across from one side to another, and because the movie clip causes the flutter, it appears to by flying across.
  You can view movie clips in the main scene only by 'publishing.'
9. To the fly2 layer, add an instance of the butterfly symbol with the fastest flutter rate, and add a motion tween. In frame 1, place the butterfly off the screen where you wish, then move the ending frame position across the screen and off.
10. Make the motion path very curvy, looping back on itself as well.
  You will need to use a Classic Tween and Guide layer for this animation.
11. Rotate the butterfly at the beginning and ending of the path, to align along the path.
12. Select the motion tween and orient the symbol to the path.
13. Test the movie - the butterfly should be fluttering along the path. Adjust the speed and placement on the path if needed, adjusting the keyframes in the movieclip..
14. Drag the extras layer to just above the garden layer. Add frames to extend the layer to frame 50.
15. On the extras layer, drag an instance of the butterfly movie clip with the slowest wing flutter, and place it in a location to look like it has landed on a flower or other object in the picture. Adjust the size and rotation of the butterfly as you like to look well on its 'perch'.
16. Add 2-5 more butterflies to this layer, just for decoration. If you prefer to flutter one or two of them, then add the movie clip symbol instead of the graphic symbol.
17. Test the movie to see the results.
When you are satisfied with your animation, save, publish and close.

Task 1 - Trace Bitmap to Vector and Shape Tween

Task 2 - Animating a Puppet Made of SymbolsDancing-Man.fla

Task 2 - Animating a Solid Character

Task 3 - Using the Bone Tool for Non-Character Animation

Task 5 - Animating Bitmaps in Movie Clips

Zip your Project 2 folder and place a copy in your Turn-in folder in the common drive.