Illustrated tutorial on animation for the Internet. Practical work "Creating an animation of the form in the Flash program" Methodical manual "Learn to create animation in informatics lessons that understand the animation of the form

Shape graphics in the trend has been the last few years. However, painstaking work on the animation of each element on the workspace is very popular.

If before that you never engaged in a shape animation, now is the time!

Posted 30 that will help master the principle of shape animation, and also teach to create and export vector illustration suitable for further animation.

Animação Feliz De Shapes Com Textos

Sequence Animation - Adobe After Effects Tutorial

Shape Layer Repeater (Radial) - Adobe After Effects Tutorial

Tutorial - Quick Tips 03 - 2D Circles & Dashed Stroke

Animating Infographic Scene Episode 1 After Effects

Earth Hour Tutorial After Effects

Making animated patterns using Shape Layers Repeater in After Effects

Summit 1.2 - Intro to Motion Graphics - After Effects

How to import and animate vector file in After Effects

Acquaintance with Ancor Point. Animation of the palm

How to create gears?

Shape transition Radial Wipe

Direct and countdown in Adobe After Effects

Work with the script Lines Creator

Circle - our everything! Lesson 1. Create an intro

Circle - our everything! Lesson 2. Singing Sheps

Circle - our everything! Lesson 3. Selection of colors in Adobe Kuler

Circle - our everything! Lesson 4. Working with Dashes

Effect of spreading circles

Animation Sheipov

Creating a simple shape video

Creating a shape animated icon

Creating a simple shape intro

Spectacular Shape Animation of Smartphone

Stunning shepal animation

Creating a simple shape morph

Shaps! Making animated patterns using Shape Layers Repeater

Stylish shepal animation

How to make a shape animated banner

Practical work №1

Practical work number 2:

Create an animation of the form for the figure "1", smoothly transforming in the digit "2". To do this, create an animation of the form for the object on the first and last frames. As objects, use numbers, adjust them appearance (size, color, position, using the set of properties on the corresponding panel).

To create an animation of the form of a text object on the first and last key frames, the numbers need to be "split" - convert from text to graphics. This is done in this way - the separation command is applied to the dedicated object ("Modification" menu mode - "divided").

Practical work number 3:

The resulting animation in the previous task may not be arranged due to the "ugly" "flow" of the points of the object on the first frame in some points of the object on the last frame. To improve the realistic conversion of one object to another, you must specify where the selected point of the object on the first frame is on the last frame "Taken".

To do this, perform the following actions (using the animation of the previous work):

Examples of creating the animation of the form are given in the Animation folder - "Animation of the form".

Brief lectures:

In addition to animation with changing the properties of the object (position, size, rotation, transparency, etc.), you can create an animation in which the shape of the object changes.

To create an animation of a text object form on the first and last key frames, the text must be "split", converting it to the graph.

To improve the realistic conversion of one object to another, you must specify where the selected point of the object on the first frame is on the last frame "Taken". For this use binding points (curve hints).

If you apply the animation of the form to figures with different color, then during the transformation there will be a change in color.

Key terms

  • Animation of form
  • Split text
  • Hink Krivoy

Set for practice:

  • What objects can the creation of classical form animation possible?
  • Is it possible to change the color of an animated object when creating an animation of the form?
  • Purpose of binding points (curve hints) when creating an animation of the form?
  • What is understood under the graphical presentation of the text object?
  • Is the animation of the form to the text object applies? What transformations for this need to be carried out with a text block?

Exercises

  • Create an animation of smoke.
  • Create an animation of movement and changing the cloud shape in the sky.
  • Create an animation to change the flame language form.
  • Create animation fluttering the banner to the wind.

Description:

Objectives lesson:
1. teaching - to form an idea of \u200b\u200bthe process of filling the frames with a change in shape, which is used to transform drawn figures between the initial and endpoints of frames
2. developing - develop intelligent ability to analyze and compare the information obtained, develop creativity when creating animation
3. educational - bring up the aesthetic perception of reality, love for screen art, form self-control skills.

Equipment and didactic material: PEVM, Flash program, multimedia projector, demonstration material, electronic presentation, tasks.

Structure and course of the lesson:

  1. Organizing time. Check students and their readiness for lesson.
  2. Check homework

    What is animation? What types of animation do you know their advantages and disadvantages? How is the animation of motion?
    At the last lesson, we met the animation of movement. Today will continue to study the animation. Write down the topic of the lesson: Creating an animation of the form in the Flash program.

  3. Goal. Formulate the objectives of the lesson

    (File is shown - Creating an animation of the form in the Flash.ppt program -slide 1).

  4. Explanation of the new material, its output, showing the implementation of the main operations

    Form Animation with filling the first and last Shape Tweening keyframe.
    Filling frames with a change in shape is used to transform drawn figures between initial and endpoints. Flash can perform frame fill operation with a shape change only for figures. On one layer, you can fill the frames for several figures. But for a clear organization, it is necessary for each figure on a separate layer if you subsequently return to this animation fragment to make certain changes, the work will be easily. (File is shown slide 2). Students lead a brief summary. ( Further, all operations are shown on the screen using a multimedia projector.)
    To create a calculated animation, you need to perform the following steps:
    1. Draw an object in the key frame.
    2. Being in the first frame, use the panel " Frame", Choose item Shape, change the weakening.
    3. Specify the final frame and include the command. clean keyframeThis can be done by right-clicking on the frame, which will be key, will appear in which and select clean keyframe. In it, lay an image, then lose animation. To do this, select the menu item " Control " command " Reproduction"Or press the key ENTER on keyboard. After that, the animation will be reproduced.
    After you have two keyframes, you make the first one of them (just go to it), and choose on the panel " Frame»In the list Tweening. Line Shape:

    Frames on the timeline must be painted in a greenish color and arrogant should stretch from the first frame to the second.
    As a result, you will receive a number of intermediate frames that will reflect the transition from the first figure to the second. (File is shown - Creating traffic animation in the Flash.ppt program -slide 3):

    In this animation, the circle goes into a kind of sembresses. A circle is drawn on the first key frame, and on another key frame (this is the 10th scene frame) crescent. In the panel " Frame"There are two parameters Easing. (Acceleration) and Blend. (Transition)

    Easing. (Acceleration) Specifies the inverse exponential acceleration. The magnitude of this parameter may vary from - 100 to + 100. This means that if you specify the negative easing. (Acceleration), the speed will increase (see Fig. 4). And vice versa if easing. (acceleration) will be positive, the animation will slow down (see Fig. 5).

    Parameter Blend. (Transition) , Determines the transition algorithm: Distributive. (distribution, general) and Angular (angular). The first tries to soften as much as possible, smooth out the transition from one figure to another. The second is trying to preserve the proportions of the corners. If the transition does not satisfy you, you can experiment with this parameter.

  5. Fastening the material passed.

    (File is shown - Creating traffic animation in the Flash.ppt program -slide 4).
    Creating an animation of form: "Night flower"

  6. Summing up the lesson.
    Guys, I suggest you view each other's work. Pay attention to the advantages and disadvantages of different animations. Separate animations are demonstrated by everything using the projector. Discussed positive moments, mistakes, shortcomings, if there is.
    We repeat the highlights of the lesson.
    What program did we continue with the acquaintance today? How to create a form animation? What extension has an animation file? Did you like the capabilities of the program and where could you use them?
    Analysis of students' responses; Argumentation and estimates.
  7. Homework: abstract; Think over and prepare material for your own animation

Bibliography

  1. Macromedia Flash. 5 / Book + video course: Tutorial - M.: Best books. Edited by VB Komyagin.
  2. Flash 8. Just as 2x2. A.A. Borisenko
  3. Internet: www.flashblog.ru; www.adobe.com.

What is animation. Timeline. Key personnel. Operations with frames. Types of animation. Radious animation. Motion animation. Animation of the form. Animation using timeline effects

Animation is the illusion of movement, created by a number of consecutive fixed images, slightly different from each other. Even in the Renaissance, it was noted that, when a quick change of images creates a motion effect.

To create an animation, a timeline is used ( Timeline.) On which all frames are located, as well as the "frame playback head" - a small sharpened rectangle in the field of timeline with frame numbers (see fig. one). When playing the movie, the head automatically moves.

Frames are key and static. In key frames, as a rule, contains an image (they determine the content of the film). Such frames are indicated by black circles 1. The remaining frames are static (they lose as if "washing").

Fig. 1

The time line setting is carried out using a button that has the following modes:

- Tiny (Very small);

- Small (Small);

- Normal (Normal);

- Medium. (Middle);

- Large. (Big).

With frames you can perform various operations (copy, delete, etc.). For individual frame operations, it is enough to click on it with a mouse, with several consecutive frames - they must be highlighted by clicking first on the first of them, and then when the key is pressed.

You can make some frame key using the F6 function key or using the main menu - commands Insert. - Timeline. - KeyFrame. (Insert - timeline - keyframe).

To remove the frame (frames), it is necessary after it (their) selection Select the item in the context menu Remove Frames.(Delete frames) or execute the main menu commands Edit. - Timeline. - Remove Frames. (Edit - Temporary line - Delete frames).

To move frames, they can be moved with the mouse as shown on fig. 2.

Fig. 2

Copying frames is carried out using contextual (item Copy Frames. (Copy frames)) or the main menu ( Edit. - Timeline. - Copy Frames. (Edit - timeline - Copy frames)). Inserting a copied frame (copied frame) is performed similarly using the command Paste Frames. (Insert footage). Naturally, you need to specify the place of insertion on the timeline.

To insert a static and empty key frame, function keys are used and, accordingly.

By default, the animation occurs when the frame numbers increase. To change the animation direction to the opposite, you need to highlight the frames and select the item in the context menu Reverse Frames. (Reverse frames). You can also apply the commands of the main menu. Modify. - Timeline. - Reverse Frames. (Change - timeline - to draw frames).

Types of animation

The following types of animation are possible in the Macromedia Flash program:

Sample animation;

Movement Animation ( Motion Tween.);

Animation form ( Shape);

Animation using timeline effects.

Consider each type of animation separately.

Passing animation

Radious animation is implemented using a series of serial key frames, each of which must be created "manually" ( fig. 3).

Fig. 3

Movement Animation (Motion Tween. )

With such an animation, an object is moving from one place to another. To create it, you need to specify only the initial and end key frames, all intermediate frames will be determined by the program automatically. Consider in more detail the technology of creating such an animation.

Draw a circle on the work field, on the timeline, the first frame will automatically become key.

Click on the key frame with the right mouse button and select the context menu command. Create Motion Tween. (Create motion animation). A blue frame is formed around the circle, which means that the object is grouped. Then select on the timeline, for example, the 30th frame (indicate the duration of the film) and when the right key is pressed, select the command Insert. - KeyFrame. (Paste a key frame) - A horizontal line with an arrow appears on the timeline at the end, which means that the movement is created. Intermediate frames are automatically painted in a bluish color.

Using a panel Properties. (Properties) You can also ask additional animation parameters:

- Rotate. (Rotation) Determines the direction of rotation - clockwise ( CW.) or against ( CWW.), or no rotation at all ( None). You can also value AUTO (the object turns once in the direction of rotation to the smallest angle);

- Easy. (Slowing down); If the value of the parameter is positive, then the movement with animation will be slowed, if negative - accelerated;

- Orient to Path. (Orientation relative to the path) allows you to orient the movement of an object relative to a given trajectory and others.

Animation of form (Shape Twee. n)

The animation of the form allows you to smoothly turn one object into another. You can only apply it to non-maternal objects. To change the form of several objects, they should be placed on one layer. Consider everything on the example.

Draw a circle on the desktop, select the length of the film in 30 frames, for this, by clicking on the 30th frame, we will return to the first keyframe and on the panel Properties. (Properties) in the TWEEN list Select mode Shape (Form), the horizontal line with an arrow on the end will appear, intermediate frames will turn into a green color, which means that the animation of the form is created, in the last key frame instead of the circle, draw the square.

Test the film - we will see how the circle smoothly turns into a square. To specify the specific nature of the change of form (flowing points of one object to the point of another), it is necessary to create so-called so-called tags tip. We will get acquainted with them later on a specific example.

Animation using timeline effects

In the version of the Macromedia Flash MX 2004 program, it is possible to create animation using built-in effects. Effects can be applied to texts, figures, groups, graphic symbols, raster images and buttons. They can also be used for clips, but in this case the effect is embedded in the clip.

To apply the effect, select the object and execute the command Insert. - Timeline Effects. (Insert - the effects of the timeline); Next choose the type of effect: Assistants (Assistants), Effects. (Effects), Transition. - Transform (Transformation transformation). Group effects Assistants Are not animated. They simply either create duplicates of a given object and placed them at a certain distance from each other, or create a uniform flow of an object in its duplicate.

After selecting the effect, a dialog box appears in which you can set the parameters of its manifestation.

When creating an effect, a layer is automatically created, where the object is transferred (the layer name coincides with the name of the effect). Based on the object, a graphic character is created, which is written to the library in the folder Effects. (Effects).

Practical part

1. Project "Moving Mother".

2. Project "Movement on a closed curve".

3. Project "Transformation of the shape in the letter".

1. Project "Moving Man"

Create a film in which motion animation means ( Motion Tween.) Move the little man.

Before creating a project, it is necessary to imagine well, from which individual elements will be the "Hero of Our Film". After all, each detail should move when playing the film. It is necessary to consider such a moment - which elements should be in the foreground, and which in the back. For a more visual presentation, it is desirable to pre-draw a picture on a sheet of paper.

So, let our little man look like fig. 4.

Fig. 4

Such an image can be obtained from the simplest figures - circles, ellipses and rectangles.

Let's start drawing. Drawing the whole person on one layer, and then distribute separate parts by layers, such an opportunity in the program is available. First draw your head (circle) and team Modify. - Convert to Symbol. (Change - convert to the symbol) we transform it into the symbol, and we will take the type ( Behavior.) Symbol Movie Clip. (Symbol-clip); Let's call this symbol head.

Then create an object that will serve as a "body". Perform a command Insert. - New Symbol (Insert - a new symbol) and set the parameters as on fig. 5. After clicking on the button OK. We get into the edit mode of the symbol, draw a rectangle (see fig. 6a). You need to pay attention to the fact that the center of each drawn object in editing mode coincides with the registration point, which is indicated by the "+" sign.

Fig. 5

The created symbol enters the film library. Go to the scene and transfer it to the workspace.

Then we create the "thigh" in the same way (pay attention - the rectangle is drawn with rounded corners) and the copying we get the second same element ( fig. 6B). We also get two shins and, finally, shoes (see fig. four). Names to all symbols we give in accordance with fig. 8.

As a result, it turned out a little man! Let you do not worry the beauty and plausibility of the drawing, we are most important to understand the idea of \u200b\u200banimation and embody it in the film.

Fig. 6

So, the little man is located in the first key frame on one layer. Issue on the layers all the components of his figures - for this I will execute the command Modify. - Timeline. - Distribute to Layers.(Change - timeline - distribute by layers) - see fig. 7.

Fig. 7

As a result of the execution of this command, the layers must be located as shown on fig. 8.

Fig. 8

The lowest layer will make the background of our film. Figure for it Choose at your discretion.

After that, it is necessary to determine the length of the film and specify those frames on which the various positions of the person will be shown when driving. To do this, choose the following frameworks: 5-, 9-, 13th and 17th. This means that the film length will be 17 frames, and these frames should be done key (using the F6 function key in all layers except the layer background.

Now consider how these key personnel should look like. In the first frame, the drawing should be like in Fig. 4, in the 5th - as on fig. 9a, in the 9th - as on fig. 9b, in the 13th - as on fig. 9V and in the 17th - as on fig. 9g.

a B C D)

Fig. 9

It is desirable in the 5th and 13th frames of the layers of the "body" and "head" to lift a bit for a more realistic movement. Perhaps some frames you will have to be corrected.

After that, we will create the animation of movement in key frames. To this end, click on the key frame with the right mouse button and in the context menu select the command Create. - Motion Tween. (Create - Movement Animation). As a result, the timeline will take the view shown on fig. 10.

Fig. 10

The film is ready, and it can be tested.

2. Project "Rotation of a satellite around the Earth"

The earth model with a satellite in orbit will be shown in the form shown on fig. 11.

Fig. 11

We describe the main stages of creating a project that uses motion animation (Motion Tween).

1. Using the panel Color Mixer (color mixer) We will install radial fill by selecting two colors on a gradient scale: green and brown.

2. Draw a circle without a contour, with a chosen in step 1 fill, which will serve as "earth". Lay a layer planet (fig. 12).

Fig. 12

3. Create the background (the lowest layer), as you can take any picture, imitating the sky.

4. Draw (tool Oval) The trajectory of orbits in the form of an ellipse of any color without fill, i.e. Color management toolbar ( Colors.) will look like on fig. 13.

Fig. 13

5. To turn the trajectory by 45 °, it is necessary to group it, since the shape on the part occurs when crossing the regions. We select individual parts by the trajectory with the key while the key is pressed. For their grouping, choose the team Modify. - Group. (Change - grouped) - a blue frame appeared. Turn the grouped object 45 ° (see fig. eleven). To do this, you can use the panel. Transform (Transformation) by completing the command Window. - Design Panels. - Transform (Window - Design Panels - Transformation) and entering in the field Rotate. (Rotation) The value of the angle -30 ° ( fig. 14).

6. Then again we break the trajectory into separate parts by the team Modify. - Break Apart(Change - split). To simulate the movement along a closed trajectory, you must specify the point of starting movement and its end. To do this, draw another ellipse smaller size and put it into orbit ( fig. 15). The area formed when crossing two ellipses region delete the key.

Fig. 15

7. Using the tool and keys to select unnecessary parts of a small ellipse and delete them. Thus, it turned out a trajectory that has the beginning and end.

8. We highlight the nearest part of the trajectory (see fig. 16) Copy it ( Edit. - Copy) and insert in the same place ( Edit. - Paste in Place.) On a separate layer titled a piece. We will make this layer invisible by clicking on the point under the icon on the layer panel.

Fig. 16

9. We select all parts of the trajectory and when you press the right key, select the command Cut. (Cut) and put on a separate layer with the title orbit At the same place ( Edit. - Paste in Place.).

10. Above the layer orbit Create a layer named satellite. It will create an object "Satellite", which will be a clip. To do this, execute the command Insert. - New Symbol(Insert - a new character), indicate the type of symbol Movie Clip. (Clip), and give the name satellite. In editing mode, you draw a circle without a circuit, choose the fill, it will not forget that the center of the object coincides with the registration point ("+"), otherwise the satellite will not be tied to orbit.

11. Let's return to the scene by posting the symbol satellite on the working field and install it in the starting point in the orbit, from where it will start, - fig. 17.

Fig. 17

12. Create an animation of the movement of the satellite, for this, right-click on the key frame in the layer satellite And in the context menu, choose the item Create. - Motion Tween. (Create - Movement Animation), Move, for example, on the 40th frame and in the same menu select the command Insert. - KeyFrame. (Insert - keyframe). A horizontal arrow appears, indicating the creation of animation. In the last key frame, move the satellite to the end point of the trajectory and make it size less (see fig. 18).

Fig. 18

13. In all other layers, we will make the same length of the film, for this we simply press the F6 key.

If you start a movie now, the satellite will "run" to the end point of the shortest path. To move the satellite throughout the trajectory, create above the layer satellite Special guide layer ( Guide) by clicking on the icon ( Add Motion Guide.) At the bottom of the layer panel. And already on this layer, we take the frames from the orbit layer.

The sequence of the film layers on the timeline is shown on fig. 19.

Fig. 19

Test a movie (pressing the + key combination), and then improve it.

14. We do so that the satellite is hidden by passing through the appropriate part of the orbit. To do this, create at least four layers satellite New key personnel (for example, 21-, 25-, 27th and 29th - Fig. 20) and change the transparency of the satellite on the panel Properties. (Properties) by selecting in the list Color (Color) value
Alpha (see fig. 21) and setting the transparency value in these frames, respectively, 68, 57, 28 and 9%.

Fig. 21

15. To hide the invisible part of the orbit, the planet layers should be swapped (it should be higher) and orbit. Guide layer Guide Must be invisible, but a piece of a piece, on the contrary, visible, i.e. on the time line it will look like on fig. 22-23. It is necessary to change the color of the orbit area on the layer piece (similar to clause 7).

Fig. 22

Fig. 23

16. Improve our "planet". Hide temporarily all layers except layer planet. Choose tool

tools toolbar. It allows you to change the fill.

Click on the first key frame of the layer planet, then on the "planet" - a circle will appear with markers controlling the gradient. "Subsequently" with a central marker and pull the gradient down diagonally, approximately 45 ° to the touch point with the orbit (see. fig. 24).

Fig. 24

The same actions must be done in the last frame, only the gradient in it must be "dragging" up (see fig. 25).

Fig. 25

17. It remains to make an animation. To do this, click on the first key frame of the layer planet And on the panel Properties. (Properties) in the list Tween (Animation) choose Motion. (Traffic).

18. Test the film.

3. Project "Transformation of a rectangle in the letter"

AT this project The rectangle turns into the letter, i.e. Applied form animation.

1. on the layer that we call rectangle, draw a rectangle without contour, and you will drink a letter, for example, E. (fig. 26).

Fig. 26

2. We break the letter on the part of the team Modify. - Break Apart(Change - split).

3. Let's leave the letter to the rectangle, after which you click on the icon

on the toolbar and spread the letter in the height and the width of the rectangle as shown on fig. 27.

Fig. 27

4. Do not cancel the selection, select the CUT command in the context menu, and then post a letter on a separate command layer Edit.- Paste in Place. (Edit - insert in the same place).

5. Squeeze the layer with the letter by clicking on the point under the icon.

6. On the timeline, we select, for example, the 35th frames in both layers and make them key (by pressing the F6 key).

7. We select the first key frame in the layer of the letter, copy it by selecting the clause in the context menu Copy Frames. (Copy frames), and insert into the last key frame layer rectangle by team Paste Frames.(Insert footage). It turned out that in the first key frame layer rectangle A rectangle is drawn, and in the last key frame of the same layer - letter. The layer with the letter can be removed now.

8. Now let's create an animation. Click on the first key personnel and on the panel Properties. (Properties) in the list Tween (Animation) choose Shape (The form). There was a horizontal line with an arrow, and the frames were painted in a greenish color, which indicates the creation of an animation of the form.

You must specify which point of the rectangle at what point the letter should move. For this there are so-called tags tip. To set them, you need to highlight the first keyframe and execute the command Modify. - Shape - Add Shape Hint(Change - form - add form prompt). A red label will appear with the letter A ( fig. 28).

Fig. 28

Add another label - for this right mouse button, click on the available label and select the command in the context menu Add Hint (Add a prompt), remove the selection, click on the Red Tag (with the letter b.) and pulling it into the upper right corner of the rectangle (see fig. 29).

After that, we turn to the last keyframe. By clicking on the white working floor and only then we move the red point to the same place in the right upper corner of the letter E..

Similarly, create two more labels (see fig. 30) on a rectangle and point their place in the letter.

Fig. 30

Test the film.

Note. Acquaintance with the effects of the timeline can be offered to students to spend on their own.

1 also "empty" key personnel. They are indicated by a not painted circle. - approx. ed.

In this lesson, I want to tell the Beginner to study Flash, how can you make a beautiful animation of the form on the example of numbers. The lesson is made in Macromedia Flash 8.
Let's start with the most important thing - the animation of the form will work only if you operate with graphic objects.

Those. Having created in the right key frames the necessary, in our case text, objects need to be turned into graphic. So, let's begin.

Create a new document, specify the necessary parameters (size, background color, frame rate). In my example, the size of the 200x200, the color of the background is white, frame frequency 12.

Immediately, we specify that the form animation will occur in the first frame: on the Properties tab, in the Tween drop-down list, select the animation of the shape - Shape. In the first frame using the Text Tool, the T button, we write a digit 1. To start, to be easier, select the font without serifs, Arial, Tahoma, Verdana. Next, go to the 30th frame, press F6, i.e. Create a keyframe, and edit our digit 1, change it to the figure 2.

Here, too, there is a subtle moment if you simply delete the number 1 and write the number 2, then you must set the coordinates of the numbers 2 are the same as the numbers 1 so that the effect of transformation of the numbers in one to another is created with the animation. If you will create a number of 3, 4, 5 and further, then, accordingly, the coordinates of all numbers should be the same. With writing numbers finished, now they need to be transformed into graphic objects.

We highlight each number in turn and calling the context menu with the right mouse button, select Break Apart, you can also press the Ctrl + B key combination or select Break Apart from the MODIFY menu, as more convenient. We turned the numbers into graphic objects.

Now you can play the resulting animation using the Ctrl + Enter key combination or simply extending the runner by timeline. But our animation is not very beautiful, the transformation of numbers in one to another is somewhat "cored". Let's improve the situation. To do this, Flash has Shape Hint - these are key points of the object used in the animation.

You can insert them inserting the MODIFY menu - Shape - Add Shape Hint or using the Ctrl + Shift + H key combination. Points are inserted in the form of small red circles with letters in the center. They are referred to alphabetically: a, b, c, d, etc. They are inserted by default to the center of the object. The more points you install, the more smooth animation you will succeed. By pressing the right mouse button, you can add a new point - Add Hint, delete an excessive point - Remove Hint and remove all points - Remove All Hint.

If you now go to the second key frame with a number 2, you will see exactly the same points of red with the same letters in the center.
Now we need to install them. I offer my own option, but you can do and otherwise, because There are no finite recommendations, you exhibit them by your own perception and taste.

The meaning of the points is: you set the point A in which place is the first object, go to the second object and also expose the point A in the right place. With the animation, these points "flow" one to another. If everything is done correctly, the point on the first object will become yellow, and on the second green. The screenshots show the placement in my understanding. The same operation is done for the 2nd, 3rd object, etc. Points will be much, carefully, do not confirm.

Actually, if everything is done correctly, then losing the resulting animation using the Ctrl + Enter keys or simply extending the timeline slider and enjoy the result. You can apply where and as you like, just remember - it works only with graphic objects. The source and the resulting SWF file are attached.

 

Perhaps it will be useful to read: