As mentioned before, you can change a shape into text or vice versa, but you must first convert the text into a vector-based image. In this lesson we will show you how to use shape tweens to morph text to shapes, shapes to text and even text to text.

Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 and the canvas colour white. Save this file as morphtext.fla in your DropBox or Drive folder.

***Note: If you wish, you can change the colours used and the text that you animate, but please make sure that you are still following the same process, and animating in the same ways and in the same spots.

To Convert Text

1. Name the first layer “background.”

2. In the colour panel set the fill colour to a linear gradient using two sliders: Orange (#CC3300) and Black (#000000).

3. Draw a rectangle using the gradient on the background layer. Make sure that it is big enough to cover the entire stage.

4. Use the Gradient Transform Tool  to rotate the the gradient feature

This can be done by clicking and dragging the rotate handle  in the corner.

5. Go to frame 160 on the background layer and insert a frame (F5), then lock the background layer.

***Note: This is important because we want the background to be there for our entire animation.

6. Create a new layer and call it customcre8tive text

7. Use the text tool to create the text seen below in frame 1 of this layer.

8. Choose frame 40 on this layer and insert a keyframe.

9. Select the Filter tab in the property inspector and choose the  button

10. Choose drop shadow.

***Note: You can use these filters to add extra effects to text, movie clips and buttons only!

You text should now have a drop shadow added.

You may modify the settings of the drop shadow in the filters panel if you want. You can also apply more than one effect to the same object (i.e. drop shadow and bevel). Play around with these options and see what they do. If you don’t like the effect, you can always choose the  button to remove each effect and start over.

Shape Tween – Shape To Text

You can have a shape morph into text, but first you have to convert the text into the right format.

11. With the text object selected choose Modify > Break Apart

This will break each letter into its own text object.

12. Choose Modify > Break Apart again

***Note: This is how we are able to shape tween text. Each letter is no longer an editable piece of text, but rather a vector drawing object (bascially a shape). Unfortunately, because this is not text, the drop shadow filter is automatically removed.

13. Create the layers seen below and insert a blank keyframe in frame 10 and 20 on each of the new layers.

14. Select the first keyframe of the customcre8tive layer and using the arrow tool, click and drag over the first letter C to select it. Be careful only to select the letter C as you drag.

15. Choose Edit > Copy or CMD + C

16. Choose frame 20 on the first c layer and choose Edit > Paste in Place or CMD + Shift + V

This has now placed a copy of the letter C in exactly the same place, but on a new layer.

17. Repeat these steps until each layer has been copied to its own layer.

18. Lock the customcre8tive text layer.

19. Choose View > Rulers

20. Click on the top ruler and drag down a horizontal guide to intersect the words.

21. Choose the Polygon Tool 

22. In the property inspector, choose the  button.

This will bring up the tool options that you can set up as seen below:

23. In the property inspector, set the fill colour to white and the stroke colour to none.

24. Choose keyframe 10 on the first C layer.

25. Draw a small star that is centered above the letter C and on the green guide line.

26. Repeat this until you have a star drawn on keyframe 10 of each letter layer.

Your timeline will look like this:

While your stage should look like this:

27. Right-Click on the C layer between frames 10 and 20 and choose Create Shape Tween

28. Repeat this for each of the letter layers.

Your animation should now run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

You might notice that the words are there from the beginning. This is because we still have the original text on the customcre8tivetext layer. Normally, you could delete this layer, but we will actually need it for the next effect.

29. Unlock the customcre8tivetext layer and select frame 1

30. Click again on frame 1 and drag it to frame 20 and release to move the content on frame 1 to frame 20 instead.

***Note: Simply clicking and dragging will not move the content. You must click on the frame, then click again and drag.

31. On the customcrea8tivetext layer create a keyframe (F6) in frame 40.

This will extend the text to stay on the stage long enough for the audience to read it.

Your animation will now appear as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Shape Tween – Text To Text

You can have text morph into another selection of text by following pretty much the same process as shape to text.

32. Create a blank keyframe (F7) in frame holder 60.

33. In the new blank keyframe, using the text tool, type the text seen below:

34. With the text selected, choose Modify > Break Apart

35. Break the text apart a second time.

36. Create a shape tween between frames 41 and 60.

Your timeline should now look like this:

Your animation should now run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

37. Insert a keyframe (F6) in frameholder 70.

This will extend how long the text stays on the stage so that the audience can read it.

38. Insert a blank keyframe (F7) in frame 90.

39. In the new blank keyframe, using the text tool, type the text seen below in the top left corner of the stage:

40. With the text selected, choose Modify > Break Apart

41. Break the text apart a second time.

42. Create a shape tween between frames 70 and 90.

43. Insert a keyframe (F6) in frameholder 100.

This will extend how long the text stays on the stage so that the audience can read it.

Your animation should now run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

44. Using what you have learned in this lesson, complete your flash file so that it runs as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext5.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

45. Save your morphtext.fla file and test movie so that you have an .swf file in your folder.

Shape Tweening is often referred to as “transforming” when people describe it. It is the process of having a shape transform into a different shape. You place one shape on the first key frame and a different shape on another key frame and Flash can fill in the artwork of the transformation for you.

What is important here is the word shape. Shapes are vector-based objects that have been created using the drawing tools in Flash. Bitmaps, grouped objects, and symbols can not be shape tweened. You can shape tween text but this requires an extra step.

Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 and the canvas colour white. Save this file as morph.fla in yourDrive or DropBox folder folder.

To Create a Shape Tween
1. Choose the Rectangle Tool and draw a rectangle on the first keyframe of your timeline 

Draw the shape as seen below:

3. Choose Frame 30 on the same layer and create a keyframe

Note – Flash automatically assumes that you want to keep the rectangle on this new keyframe. You can delete the rectangle on this new keyframe and the first rectangle will stay.

4. Delete the Rectangle on keyframe 30.

5. Choose the Oval Tool and draw an oval on keyframe 30

Draw the shape as seen below:

4. Select any frame between the two keyframes.

5. Right click on the timeline and choose Create Shape Tween

You will notice that the frames between the two keyframes are now shaded green and have an arrow across them. This is how we know that your shape tween has been successful.

5. Press the <Enter> key to watch the animation.

It should play as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph0.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Not only does flash transform shape and color, but if you draw your oval on the opposite side of the stage, the shape will move from one location to another as it transforms.

This is fine if we are using relatively simple shapes, but how does Flash react when we are using more complex shapes?

6. Right-click on the shape tween in the time line and choose “Remove Tween”

7. Delete the oval on frame 30

8. Use the pen tool to draw the shape seen below.

9. Use the paint bucket tool to fill the the shape with yellow.

10. Right-click on the timeline between the two shapes to add a shape tween then test your movie.

You’ll notice that Flash guesses at how you want the transformation to take place. You do not, however, need to be satisfied with this. There is a way to get exactly what you want.

Using Shape Hints

Shape hints are a feature in flash that give you some control over how one shape will transform into another. It is used primarily to fix a shape tween that doesn’t look good.

To Insert Shape Hints

1. Select key frame 1

2. Choose Modify > Shape > Add Shape Hint or press CMD + Shift + H (shortcut key)

A red oval labelled with the letter “a” will appear as seen below:

4. Click on the Shape Hint and drag it to the upper left hand corner of the oval.

5. Select the last keyframe (with the custom shape on it)

6. Drag the keyframe to the upper left hand corner of the shape.

You will notice below that the shape hint turns green. This means that the shape hints on the two keyframes are now connected.

The animation now appears as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Normally adding one or two shape hints may be enough to direct the tranformation, but in this case, the irregular shape needs more information to transform the way we want it to.

7. Repeat these steps to make the shape hints seen below.

This will make the transformation more direct.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

****Note**** You can intentionally misalign shape hints to create warped transformation effects. Simple by placing the “b” shape hint in the opposite corner, the Oval with Flip as it transforms into the X.

If the shape hints are set as seen above you will get the following effect:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Keep in mind that if you want to tween multiple shapes at the same time, you should use a new layer for each transformation.

Practice Assignment

Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 and the canvas colour white. Save this file as puzzle.fla in your DropBox or Drive folder.

Create a self-building puzzle as seen below.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/images/multipleshapetween.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

– Each shape should start as a square and then transform into a puzzle piece.

– You can have each puzzle piece tween at the same time (easy) or one after another (more complicated.

– The sample is not to be copied. Instead, I want you to experiment with your own shapes, colours, etc.

– Don’t forget to use shape hints to help direct the transformations!

– Finally, export the finished product as an .swf

We’ve done some practice with text tweens, but there are some neat things you can do, especially if you treat each letter as a separate object.

Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 but change the canvas colour to black. Save this file as hotspotaccess.fla in your Drive or DropBox folder.

1. Create two layers, one called bggradient and one called bgblue

2. Select frame 1 of the bgblue layer

3. Choose the Rectangle Tool, select a fill colour of blue (#0000FF) and a stroke of none.

4. Draw a rectangle that covers the entire stage area.

5. With this rectangle selected right click on it and convert it to a graphic symbol named bgblue. Turn the visibility of this layer off.

6. Make sure the Color Panel is showing, if not, choose Window > Color

7. Set the stroke to none and the fill colour to a linear gradient as seen in the panel below:

8. Select frame 1 of the bggradient layer

9. Draw a rectangle that covers the entire stage area.

10. With this rectangle selected right click on it and convert it to a graphic symbol named bggradient.

11. Select frame 20 in the bggradient layer and press F6 to insert a keyframe.

12. Do the same for the bgblue layer.

13. Choose keyframe 20 on the bgblue layer. Make sure the visibility is back on.

14. Using the arrow tool, select the blue rectangle on the stage

15. In the Property inspector, change the alpha to 0%

16. Right-click on this layer to create a Classic Tween.

17. Hide the bgblue layer and make sure the bggradient layer is showing.

18. Choose keyframe 1 on the bggradient layer.

19. Using the arrow tool, select the blue gradient rectangle on the stage

20. In the Property inspector, change the alpha to 0%

21. Right-click on this layer to create a classic tween.

22. Show and lock both Layers

23. Choose Control > Test Movie

This should fade one rectangle in as the other fades out.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/hotspotaccess1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

To Tween Text

24. Create a new layer called peak.

25. On frame 20, press F6 to insert a new keyframe.

26. Use the Text Tool to create a text object as seen below:

27. Select the text with the Arrow Tool, and right click to covert it to a graphic symbol named peak.

Now that the text has been made into a symbol, you can tween the whole text object if you like, but what if we want each letter to animate individually? To do this, we must break apart the text.

To Break Apart Text:

28. With the text symbol selected, choose Modify > Break Apart (⌘B).

This will break the text object out of its symbol. The symbol still exists in the library for later use.

29. With the text symbol selected, choose Modify > Break Apart (⌘B) again.

Doing this a second time breaks the text into separate pieces of text.

30. Using the Arrow Tool, click outside of the text on your stage to deselect, then select the first letter P and right click to convert it to a graphic symbol named p

31. Create a new layer called p and insert a keyframe at frame holder 20.

32. Using the Arrow Tool, select the symbol P on frame 20 of the peak layer and choose Edit > Cut or ⌘ + X

This will remove the symbol from this layer.

33. Select keyframe 20 on layer p and choose Edit > Paste in Place or SHIFT+CMD+V

Note – Using paste in place ensures that the letters stay in exactly the same position even though we are moving each letter to its own individual layer.

Repeat this process staggering each letter on the timeline by 5 frames until your timeline appear as seen below:

Note – Don’t forget that you are moving each letter to its own layer and converting it to a symbol. When naming your symbols, repeat letters will require you to name the symbols differently. For example, when you get to the word Performance, you will need to call the symbol for the second letter p p2.

Now that each letter is on its own layer and has been converted to a symbol, you can animate each one.

34. On the layer p choose frame holder 30 and press F6 to create a new keyframe.

35. Select keyframe 20 on layer p and then use the Arrow Tool to select the symbol p on the stage.

36. In the property inspector, change alpha for symbol p to 0%

37. Choose Window > Transform to get the transform panel

38.Change the size to 20% and press Enter.

39. Change rotate to 60 degrees and press Enter.

Note – You must press the Enter key to make the 20% and 60 degrees changes take effect. Simply clicking off of the box will not apply the changes.

In the last three steps, you’ve changed the first instance (frame 20) of the symbol p to be transparent, reduced in size and rotated by 60 degrees. This did not change the second instance (frame 30).

40. Right-click between keyframe 20 and 30 on layer p and select Create Classic Tween.

41. Select frame holder 100 on layer p and press F5 to insert a regular frame

This will extend keyframe 30 so that it shows up for the rest of the animation.

Repeat this until each letter is tweened in the same way. Your timeline should appear as seen below:

42. Unlock bgblue and bggradient layers and insert a frame in each at frame holder 100 to extend them until the end of the animation.

43. Create a new layer called hotspot

44. On the hotspot layer, create a keyframe in frame holder 80

45. In keyframe 80, create a new text object as seen below:

46. Right click to convert this text object to a graphic symbol called hotspot.

47. Create a keyframe on the same layer in frame holder 90.

48. Select the hotspot symbol in frameholder 90 using the Arrow Tool, then use your arrow keys to nudge the symbol onto the stage.

49. Create a Classic Tween between frames 80 and 90.

Your animation should now play as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/hotspotaccess.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

50. Save your Flash file and drop it into your shared DropBox or Drive folder

You’ve done a lot of great drawing with the drawing tools, but there are certainly times when you can’t or don’t want to draw something yourself. Watch the series of tutorials labelled “Importing” to find out how you can bring in artwork from other sources/programs.

We’ve done some work with basic Movie symbols, but there are other useful types of symbols as well. Watch the series of movies called “Symbols”

Now use these techniques to create an animation that contains:

Imported vector artwork (you could check out brandsoftheworld for some neat vector logos or search Google for vector images or create your own in Illustrator or a similar vector drawing program)
Imported bitmap images
The different kinds of symbols
Different kinds of text, as discussed in the Text tutorials & masks, as discussed in this post.

That’s a lot to fit in, but try to make this all make sense somehow. Creativity and ingenuity will be rewarded!

I added some new tutorials that will add some neat new features to your animations. You should watch those and follow along with the exercise, then find ways to integrate  blend modes, filters, and masks, as well as the different kinds of text fields into your animations. These will allow for some neat features that we will be using later on, so please spend some time making sure that you know how these work and can use them effectively in your projects.

Although we have done a lot with motion, all we’ve really done is to make a static object move around the screen. Now it’s time to make our characters move in a more life-like way, by using Inverse Kinematics & the Bone Tool. Watch the new tutorials in the Robson213Files folder, and practice these techniques with a new character or one from your previous animations. Use these techniques to make that character move in a more life-like way, and drop that off as lastnamefirstinitial_ex6.

Animating in Flash has the potential to seem unnatural at times. For example, if you want an object to go from one spot to another, but curve along the way. Simply tweening a symbol from one spot to another will make it go directly to the other spot in a straight line (no curvature). If faced with this problem, the amateur Flash user would simply revert to Frame by Frame animation. Luckily, we know that Flash has provided us with an answer to this need.

Flash uses motion guides to help use determine a path for our animations to follow. It does this in the form of adding a layer to our timeline. In this lesson, you will see exactly how this feature works.

Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 but change the canvas colour to black. Save this file as orbit.fla in your DropBox or Drive folder.

1. Select the Oval tool change the fill colour to white and the stroke to none.

2. Draw a perfect circle by holding shift as you drag.

3. Use the arrow tool to select the oval and to position it in the middle of your stage area. This will also bring up the oval properties in the property inspector.

4. In the property inspector change the size of the oval to 170 x 170.

 

5. Choose the Paint Bucket Tool and set the fill colour to the radial blue gradient (preset)

 

6. Using the Paint Bucket Tool, click in the bottom left corner of the oval.

This should make your oval appear as seen below:

7. Name this layer Planet

8. Select Frame 40 in the Planet Layer and press F5 to insert a new frame.

9. Lock the Planet Layer and create a new layer named Moon.

10. In Frame 1 of the Moon layer, draw a perfect yellow (#FFFF00) cirlce (50 x 50) with no stroke.

11. Use the arrow tool to position it on the bottom left side of the stage.

 

12. With the Yellow oval selected, choose Modify > Convert to Symbol or press F8

13. Choose Graphic Symbol and name it moon.

14. Select frame 40 on the Moon layer and press F6 to insert a keyframe.

15. Right-Click on the Moon layer between frame 1 and 40 and choose Create Classic Tween

This won’t do anything yet as we have not yet made changes to the second keyframe.

Creating A Motion Guide

16. Right click on the NAME of the Moon Layer (not in a frame on the timeline), and choose the Add Classic Motion Guide.

Notice that the Moon layer gets indented as the motion guide is now attached to the moon layer.

17. Choose frame 1 of the guide layer

18. Choose the oval tool, change the stroke to white and the fill to none.

19. Draw an oval that closely resembles the one seen below:

Notice that as you did this, the moon you drew snapped to the ring. Now we have to cut a section out of the ring using the arrow tool.

20. Select the Arrow Tool and drag over the bottom section of the ring to select it.

21. Use your delete key to cut the selected section.

22. Using the Arrow Tool, select the Moon symbol on frame 1 and drag it to the left opening of the ring.

Notice as you drag, the oval uses a center circle point to keep along your pre-determined path. This is called “snapping to a guide”.

23. Select the moon symbol on frame 40 and drag it to the right opening of the ring.

24. Select Frame 1 in the Moon layer and press the Enter key to play the animation.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/orbit1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

You may notice that it seems strange because the moon does not pass behind the planet.

25. To fix this, simply drag the planet layer above the moon layer and its guide layer.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/orbit2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Note – You don’t have to use the oval drawing tool to create a motion path. You can use the pencil, pen, or any other tool to create a path, so long at the resulting shape drawn on the layer is a line only (no fill colours or closed off shapes).

26. Save your Flash file and go complete assignment3

Completed Work:

Mariel:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/Mariel_motionpath.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Tyler:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/TylerMotionPath.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]

[/kml_flashembed]

Jordan:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/JordanMotionPath.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]

[/kml_flashembed]

 

All of the directions for this assignment are contained in this file:

assignment2

Download the file, save it to your computer, fill it in and drop off the required pieces.

Finished products:

Animated Greeting Cards:

Tyler:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/TylerCard.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]

[/kml_flashembed]

Mariel:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/MarielCard.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]

[/kml_flashembed]

Jordan:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/JordanCard.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Isaac:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/IsaacCard.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Devon:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/DevonCard.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

The word “Tweening” comes from traditional cel animation where top artists would draw the key frames and the less talented, lower-paid artists would create the frames between the key frames. Flash has the ability to fill in the frames between keyframes. All you have to do is ask.

Using motion tweens you can move, scale, tint, rotate and make transparent, various objects on your timeline. The key to motion tweening is in the use of symbols. You can not motion tween a drawing on your stage. ONLY SYMBOLS CAN BE MOTION TWEENED!

To Create a Motion Tween

1. Open leaf.fla that we created in the last lesson.

Remember, each of these leaves is already a symbol.

2. Click on frame 1 of one of the leaf layers. Right click on frame 1, and choose Create Motion Tween.

3. Repeat this process for each layer.

Your timeline should appear as seen below:

4. Drag the end of each layer (at frame 24) and extend it to Frame 40.

5. Keep your playhead at frame 40 and move each leaf until it is past the stage at the bottom.

Hint: Stagger the leaves to create a random falling effect

6. Press Command + Enter to Test Movie

Your animation should appear as seen below

This is basic motion animation. You can use motion animation to achieve various effects.

Scale Tweening

You can use scale tweening to make items grow and shrink. This can be done either while they move, or while they are stationary.

To Scale Tween

7. Select the keyframe on frame 40 of leaf1.

8. Use the Free Transform Tool  to make the leaf symbol larger

****Note**** You can use CMD + T to access the Transform Panel which allows you to scale by percentage for accuracy. It also offers a constrain proportions check box to make sure the height and width will resize proportionately.

9. Repeat this step on leaf3 and leaf5 layers but use different sizes.

Your animation should appear as seen below

Tint Tween

You can also use tweening to change the color of your symbols. This will not work with overly complicated drawings, but simple shapes can be easily tinted.

To Tint Tween

10. Select the keyframe on frame 40 on the leaf5 layer

11. Select the leaf symbol

It is really important that you actually click on the instance of the symbol that you want to change, or you will not get the proper options available in the property inspector.

12. On the property inspector choose the Color Effect drop down menu and choose Tint

13. Choose a color and decide how much tint you would like to apply (percentage)

14. Repeat this step with the remaining layers and use various colours.

Your animation should now appear as seen below:

The effect can be more noticeable when the symbol moves more slowly.

 

Rotate Tween

To tween using rotation depends on the Registration Point discussed in the last lesson. Your symbol will rotate around the registration point as you have set it inside your symbol. You could rotate the end keyframe, but setting rotation is much more simple than you think.

To Rotate Tween

15. Click anywhere in the tweened area on leaf 5 layer

16. In the property inspector set the Rotate drop down to CW (clockwise)

17. Select the object to rotate 2 times

Hint: This will determine how fast the object turns. A higher number will mean that the object has to turn faster to complete that number of rotations in 40 frames.

18. Repeat this process for the other leaf layers. Change the direction and speed of rotation for each one.

Your animation should appear as seen below:

Tweening Text

You can tween text, but not when it is an object. To tween text, you must create the text object and then convert it to a symbol.

19. Create text on a new layer, convert it to a symbol and animate it to reflect the animation seen below.

Save this flash animation as leaf.fla and place it in the folder that you share it with me.

 

The library is a container where Flash stores and organizes symbols, bitmap graphics, sound clips, video clips, and fonts. Flash makes files easy to identify because it uses a different icon for each type of file. The nice thing about your library is that it is attached to the .FLA file that you are working with. This means that the files in your library actually travel with the .FLA file.

When your library is full of symbols, it may look something like this. You can create folders to help you organize symbols in a project which can be very helpful when working with many symbols.

To Access Your Library

1. Open leaf.fla

2. Choose Window > Library > OR Press Control + L 
This will bring up the Library Panel seen below.

Your Library should look like this:

3. Choose the leaf symbol and drag it to your stage area

Notice that it places an instance of the symbol on your main timeline in frame 1 on layer 1.

4. Rename the layer as leaf1

5. Create 5 more layers and place an instance of the leaf on each layer

Your Flash document should appear as seen below:

Note – Staggering these leaves above the stage is important as we will be using this proper placement for animation in the next lesson.

Importing To The Library

In the previous example you created a drawing inside of a symbol. Although you will use this often, there will be times when you have to use files that were created outside of Flash. This may include audio files, bitmap images from the internet, or even graphics created in other drawing programs (i.e. illustrator or photoshop). This feature is much appreciated by artists as Flash does not have the easiest drawing tools to use.

To Import Files

Start by right-clicking and save the graphic below to your Drive or Drop Box Folder as tree.jpg

6. Choose File > Import > Import to Library

7. Choose the file “tree.jpg” and choose Open

This file should appear in your library as a bitmap as seen below.

***Note*** Bitmap images you import into Flash will act as bitmaps until they are converted to symbols. This means that they will be just like a picture and not a drawn object. If your graphic has a transparent background, Flash will support the transparency.

8. Create a new layer called tree

9. Create a new keyframe in frame 41 on the tree layer.

10. Drag the “tree.jpg” file onto your stage while frame 41 is selected.

This file will still be a bitmap.

11. Using the Arrow Tool, select the graphic on the stage area

12. Choose Modify > Convert to Symbol

13. Name the new symbol tree

Note – So long as you respect the naming rules (listed above) flash will allow this. You can have files in your library with the same name, so long as they are different file types. I.E. tree symbol is different than tree.jpg

14. The tree on your timeline is now a symbol.

Now this symbol can be inserted on your main timeline over and over again (multiple instances) throughout your animation and only be loaded once. This isn’t the only nice thing about working with symbols. Symbols make it possible to tween, which is where the true power of animation lies.

Save this flash animation as leaf.fla and move on to the next lesson.