Illustrated tutorial on animation for the Internet. Practical work “Creating form animation in Flash” Methodological guide “Learning to create animation in computer science lessons What is meant by form animation

Shape graphics have been trending for the past few years. However, behind the great popularity lies the painstaking work of animating each element on the workspace.

If you have never done shape animation before, now is the time!

We picked up 30 that will help you master the principle of shape animation, as well as teach you how to create and export vector illustrations 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 the Shape Layers Repeater in After Effects

Summit 1.2 - Intro to Motion Graphics - After Effects

How to Import and Animate a Vector File in After Effects

Introduction to Ancor Point. Palm animation

How to create gears?

Shape Transition Radial Wipe

Countdown and Countdown in Adobe After Effects

Working with the Lines Creator script

Circles are everything! Lesson 1. Create an intro

Circles are everything! Lesson 2

Circles are everything! Lesson 3: Color Matching in Adobe Kuler

Circles are everything! Lesson 4

Spreading circles effect

Shape Animation

Creating a simple shape video

Creating a Shaped Animated Icon

Creating a simple shape intro

Spectacular smartphone shape animation

Awesome shape animation

Creating a simple shape morph

Shapes! Making Animated Patterns Using the Shape Layers Repeater

Stylish shape animation

How to make an animated banner

Practical work №1

Practical work number 2:

Create a shape animation for the number "1" that smoothly transforms into the number "2". To do this, create a shape animation for the object on the first and last frames. Use numbers as objects, customize them appearance(size, color, position, using the set of properties on the corresponding panel).

To create an animation of the shape of a text object on the first and last keyframes, the numbers must be "split" - converted from text to graphics. This is done in the following way - the split command is applied to the selected object (menu mode "Modification" - "Split").

Practical work No. 3:

The resulting animation in the previous task may not suit us because of the "ugly" "flow" of the object's points on the first frame to some points of the object on the last frame. To improve the realism of the transformation of one object into another, it is necessary to indicate to which point of the object on the last frame the selected point of the object on the first frame will "flow".

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

Examples of creating form animations are given in the Animation - Form Animation folder.

Brief summary of the lecture:

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

To animate the shape of a text object on the first and last keyframes, the text must be "broken up" by converting it to graphics.

To improve the realism of the transformation of one object into another, it is necessary to indicate to which point of the object on the last frame the selected point of the object on the first frame will "flow". For this, anchor points (curve hints) are used.

If you apply shape animation to shapes with different colors, then the color will change during the transformation.

Key terms

Shape Animation
Text splitting
Curve hint

Practice Kit:

For which objects is it possible to create a classic shape animation?
Is it possible to change the color of an animated object when creating a shape animation?
Assigning anchor points (curve hints) when creating a shape animation?
What is meant by a graphical representation of a text object?
Can shape animation be applied to a text object? What transformations do you need to do with the text block for this?

Exercises

Create a smoke animation.
Animate the movement and shape of a cloud in the sky.
Create an animation to change the shape of the flame tongue.
Create an animation of the banner canvas fluttering in the wind.

Description:

Lesson Objectives:
1. educational – to form an idea of the process of filling frames with a change in shape, which is used to transform drawn figures between the start and end points of frames
2. developing - develop intellectual skills to analyze and compare the information received, develop creative abilities when creating animation
3. educational - to cultivate an aesthetic perception of reality, love for screen art, to form self-control skills.

Equipment and didactic material: PC, Flash program, multimedia projector, demonstration material, electronic presentation, assignments.

Structure and course of the lesson:

Organizing time. Checking students and their readiness for the lesson.
Examination homework
What is animation? What types of animation do you know, their advantages and disadvantages? How is motion animation performed?
In the last lesson, we got acquainted with motion animation. Today we will continue our study of animation. Write down the topic of the lesson: Creating a form animation in Flash.
Goal setting. The objectives of the lesson are formulated
(The file is shown – Create shape animation in Flash.ppt – slide 1).
Explanation of new material, its notes, showing the implementation of basic operations
Animation of the shape with the filling of the first and last keyframe Shape tweening.
Reshape Frame Fill is used to transform drawing shapes between start and end points. Flash can perform a reshape frame fill operation on shapes only. You can fill frames for multiple shapes on a single layer. But for a clear organization, you need each shape to be on a separate layer, if you subsequently return to this animation fragment to make certain changes, then the work will be simplified. (The file is shown slide 2). Students write a short summary. ( Further, all operations are shown on the screen using a multimedia projector.)
To create a calculated shape animation, you need to do the following:
1. Draw an object in a keyframe.
2. Being in the first frame, use the panel " Frame”, select an item shape, change attenuation.
3. Specify the end frame and include the command clean keyframe, this can be done by right-clicking on the frame, which will be the key, a list will appear in which to select clean keyframe. Place the image in it, then play the animation. To do this, select the menu item " Control " team " Playback» or press the key Enter on keyboard. After that, the animation will be played.
Once you have two keyframes, you make the first one active (just navigate to it), and select " Frame» in the list Tweening string shape:
Frames on the timeline should turn greenish and an arrow should stretch from the first frame to the second.
As a result, you will get a series of intermediate frames that will reflect the transition from the first shape to the second. (The file is shown – Creating motion animation in Flash.ppt – slide 3):
In this animation, the circle turns into a kind of crescent. On the first keyframe a circle is drawn, and on the other keyframe (this is the 10th frame of the scene) a crescent. In the panel " Frame» there are two parameters Easing(acceleration) and blend(Transition)
Easing(acceleration) sets the inverse exponential acceleration. The value of this parameter can vary from -100 to +100. This means that if you specify a 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 Figure 5).

Parameter blend(Transition) , defines the transition algorithm: distribution(distributing, general) and Angular(angular). The first tries to soften as much as possible, smooth the transition from one figure to another. The second tries to keep the proportions of the corners. If the transition does not suit you, you can experiment with this setting.
Consolidation of the material covered.
(The file is shown – Creating motion animation in Flash.ppt – slide 4).
Creating Shape Animation: "Night Flower"
Summing up the lesson.
Guys, I suggest you look at each other's work. Pay attention to the advantages and disadvantages of different animations. Individual animations are shown to everyone using a projector. Discussed positive points, errors, shortcomings, if any.
Let's repeat the main points of the lesson.
What program did we continue our acquaintance with today? How to create a shape animation? What is the extension of the animation file? Did you like the features of the program and where could you use them?
Analysis of student responses; argumentation and grading.
Homework: abstract; think over and prepare material for your own animation

Bibliography

Macromedia Flash 5/ Book + Video course: Tutorial– M.: Best Books. Edited by V.B. Komyagin.
Flash 8. Just like 2x2. A.A. Borisenko
INTERNET: www.flashblog.ru; www.adobe.com

What is animation. Timeline. key frames. Personnel operations. Types of animation. Frame animation. Motion animation. Form animation. Animate with Timeline Effects

Animation is the illusion of movement created by using a series of successive still images that are slightly different from each other. Even in the Renaissance, it was noticed that with a quick change of images, the effect of movement is created.

The timeline is used to create the animation ( Timeline) on which all frames are located, as well as the “frame playback head” - a small filled rectangle in the timeline area with frame numbers (see Fig. rice. one). When playing a movie, the head moves automatically.

Frames are key and static. Keyframes, as a rule, contain the image (they determine the content of the movie). Such frames are indicated by black circles 1 . The remaining frames are static (they are played as if “for nothing”).

Rice. 1

Setting the timeline is carried out using the button, which has the following modes:

- Tiny(Very small);

- Small(Small);

- Normal(Normal);

- Medium(Average);

- Large(Big).

You can perform various operations with frames (copy, delete, etc.). For operations with a single frame, it is enough to first click on it with the mouse, with several consecutive frames - they must be selected by clicking first on the first of them, and then, while pressing the key, on the last one.

You can make a certain frame a key one using the F6 function key or using the main menu - commands Insert - Timeline - key frame(Insert - Timeline - Keyframe).

To delete a frame (frames), after selecting it (their) select the item in the context menu Remove Frames(Delete frames) or execute main menu commands Edit - Timeline - Remove Frames(Edit - Timeline - Delete Frames).

To move frames, you can move them with the mouse, as shown in rice. 2.

Rice. 2

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

To insert a static and empty key frame, use the function keys and respectively.

By default, animation occurs as frame numbers increase. To reverse the animation direction, select the frames and select the item in the context menu Reverse Frames(Invert frames). You can also use the main menu commands Modify - Timeline - Reverse Frames(Edit - Timeline - Invert Frames).

Types of animation

The following types of animation are possible in Macromedia Flash:

Frame-by-frame animation;

Motion Tween ( motion tween);

Shape Animation ( shape);

Animation using timeline effects.

Let's consider each type of animation separately.

Stop motion animation

Frame-by-frame animation is implemented using a series of successive keyframes, each of which must be created “by hand” ( rice. 3).

Rice. 3

Motion animation (motion tween )

With such animation, an object moves from one place to another. To create it, you need to specify only the start and end key frames, all intermediate frames will be automatically determined by the program. Let's take a closer look at the technology for creating such animation.

Let's draw a circle on the working field, on the timeline the first frame will automatically become the key one.

Click on the keyframe with the right mouse button and select the command from the context menu Create Motion Tween(Create motion animation). A blue border is formed around the circle, which means that the object is grouped. Then select on the timeline, for example, the 30th frame (specify the duration of the movie) and with the right mouse button pressed, select the command Insert - key frame(Insert Keyframe) - A horizontal line with an arrow at the end appears in the timeline, indicating that the motion has been created. Intermediate frames are automatically colored bluish.

Panel Properties(Properties) you can also set additional animation parameters:

- Rotate(Rotation) specifies the direction of rotation - clockwise ( CW) or against ( CWW), or no rotation at all ( None). The Auto value is also possible (the object is rotated once in the direction of rotation by the smallest angle);

- Easy(Slowdown); if the value of the parameter is positive, then the movement during animation will be slowed down, if negative - accelerated;

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

Shape Animation (Shape Twee n)

Shape animation allows you to smoothly transform one object into another. It can only be applied to ungrouped objects. To change the shape of several objects, they should be placed on the same layer. Let's consider everything with an example.

Let's draw a circle on the desktop, select a movie length of 30 frames, to do this, click on the 30th frame, return to the first keyframe and on the panel Properties(Properties) in the Tween list, select the mode shape(Shape), a horizontal line with an arrow at the end will appear, the intermediate frames will turn green, this means that the shape animation has been created, in the last keyframe we will draw a square instead of a circle.

Let's test the film - we will see how the circle smoothly turns into a square. To indicate the specific nature of the change in shape (the flow of points of one object to the points of another), it is necessary to create so-called hint labels. We will get acquainted with them later on a concrete example.

Animate with Timeline Effects

In the Macromedia Flash MX 2004 version, it became possible to create animation using built-in effects. Effects can be applied to text, shapes, groups, graphics, bitmaps, 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 - Timeline Effects); then choose the type of effect: assistants(Helpers) effects(Effects), transition - Transform(Transition - Transformation). Group Effects assistants are not animated. They simply either create duplicates of the given object and place them at a certain distance from each other, or create a uniform flow of the object into its duplicate.

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

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

Practical part

1. Project “Moving little man”.

2. Project “Movement along a closed curve”.

3. Project “Turning a figure into a letter”.

1. Project “Moving Man”

Let's create a movie in which motion animation ( motion tween) the little man will move.

Before creating a project, one must have a good idea of what individual elements the “hero of our film” will consist of. After all, every detail must move when playing the movie. It is necessary to think over such a moment - which elements should be in the foreground, and which - in the background. For a more visual representation, it is desirable to first draw a drawing on a sheet of paper.

So, let our little man look like on rice. 4.

Rice. 4

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

Let's start drawing. Let's draw the whole person on one layer, and then distribute the individual parts over the layers, there is such an opportunity in the program. First, draw the head (circumference) and the team Modify - Convert to Symbol(Change - Convert to character) convert it to a character, while accepting the type ( Behavior) character movie clip(Symbol clip); let's call this symbol head.

Then we will create an object that will serve as the “body”. Execute the command Insert - New Symbol(Insert - New Symbol) and set the parameters as on rice. 5. After clicking the button OK we get into the symbol editing mode, draw a rectangle (see Fig. rice. 6a). It is necessary to pay attention to the fact that the center of each drawn object in the edit mode coincides with the registration point, which is indicated by the “+” sign.

Rice. 5

The created symbol goes into the movie library. We go to the scene and transfer it to the workspace.

Then we create a “thigh” in the same way (note that the rectangle is drawn with rounded corners) and by copying we get the second same element ( rice. 6b). We also get two legs and, finally, shoes (see. rice. four). We will give names to all symbols in accordance with rice. 8.

The result is a man! Don't worry about the beauty and believability of the drawing, the most important thing for us is to understand the idea of animation and embody it in the film.

Rice. 6

So, the little man is in the first keyframe on one layer. Let's distribute all the figures that make it up into layers - for this we execute the command Modify - Timeline - Distribute to Layers(Change - Timeline - Distribute to Layers) - see rice. 7.

Rice. 7

As a result of executing this command, the layers should be located as shown in rice. 8.

Rice. 8

The bottom layer will be the background of our movie. Choose a picture for him at your discretion.

After that, you need to decide on the length of the film and indicate the frames that will show the various positions of a person during movement. To do this, select the following frames: 5th, 9th, 13th and 17th. This means that the length of the movie will be 17 frames, and the named frames should be made key (using the F6 function key in all layers except the layer background.

Now let's look at what these keyframes should look like. In the first frame, the drawing should be as in Fig. 4, in the 5th - as on rice. 9a, in the 9th - as on rice. 9b, in the 13th - as on rice. 9th century and in the 17th - as on rice. 9y.

a B C D)

Rice. 9

It is desirable to raise the “body” and “head” a little in the 5th and 13th frames of the “body” and “head” layers for more realistic movement. You may need to correct some frames.

After that, we will create a motion animation in keyframes. To do this, right-click on the keyframe and select the command from the context menu Create - motion tween(Create - Motion Animation). As a result, the timeline will take the form shown in rice. 10.

Rice. 10

The film is ready, and it can be tested.

2. Project “Rotation of a satellite around the Earth”

The model of the Earth with a satellite in orbit will be depicted in the form shown in rice. 11.

Rice. 11

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

1. With panel color mix r (Color Mixer) set the radial fill by selecting two colors from the gradient bar: green and brown.

2. Draw a circle without a contour, with the fill selected in step 1, which will serve as the “Earth”. Let's call the layer planet (rice. 12).

Rice. 12

3. Let's create a background (the lowest layer), which can be any image that imitates the sky.

4. Let's draw (with the tool oval) orbit trajectory in the form of an ellipse of any color without filling, i.e. color management toolbar ( colors) will look like rice. 13.

Rice. 13

5. To rotate the trajectory by 45 °, it is necessary to group it, since when the regions intersect, the figure is divided into parts. Select individual parts of the trajectory with the mouse while pressing the key. To group them, choose the command Modify - group(Change - Group) - a blue frame appeared. Let's rotate the grouped object by 45° (see Fig. rice. eleven). To do this, you can use the panel Transform(Transformation) by running the command Window - Design Panels - Transform(Window - Design Panels - Transformation) and entering in the field Rotate(Rotation) Angle value -30° ( rice. 14).

6. Then again we will break the trajectory into separate parts on command Modify - Break Apart(Change - Split). To simulate movement along a closed path, you must specify the start and end points of the movement. To do this, draw another smaller ellipse and superimpose it on the orbit ( rice. fifteen). The area formed at the intersection of two ellipses will be deleted with the key.

Rice. 15

7. Using the tool and the key, select the unwanted parts of the small ellipse and delete them. Thus, we have a trajectory that has a beginning and an end.

8. Select the nearest part of the trajectory (see. rice. 16), copy it ( Edit - Copy) and paste it in the same place ( Edit - Paste in Place) on a separate layer with the name of the piece. Make this layer invisible by clicking on the dot below the icon in the layers panel.

Rice. 16

9. Select all parts of the trajectory and, with the right mouse button pressed, select the command Cut(Cut) and place on a separate layer with the name orbit to the same place Edit - Paste in Place).

10. Over layer orbit create a layer named satellite. On it we will create a “satellite” object, which will be a clip. To do this, run the command Insert - New Symbol(Insert - New symbol), specify the type of symbol movie clip(Clip), and we give the name satellite. In edit mode, draw a circle without a contour, select a fill, while remembering that the center of the object coincides with the registration point (“+”), otherwise the satellite will not be locked to the orbit.

11. Return to the stage, transfer the symbol satellite on the working field and set it to the starting point in the orbit, from where it will start moving, - rice. 17.

Rice. 17

12. Let's create an animation of the movement of the satellite, to do this, right-click on the keyframe in the layer satellite and select the item in the context menu Create - motion tween(Create - Motion Animation), move, for example, to the 40th frame and select the command in the same menu Insert - key frame(Insert - Key frame). A horizontal arrow will appear, indicating that the animation has been created. In the last keyframe, move the satellite to the end point of the trajectory and make it smaller in size (see Fig. rice. 18).

Rice. 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 the movie now, the satellite will “run” to the end point of the shortest path. In order for the satellite to move along the entire trajectory, we will create above the layer satellite special guide layer ( guide) by clicking the icon ( Add Motion Guide) at the bottom of the Layers panel. And already on this layer we will transfer the frames from the orbit layer.

The sequence of movie layers on the timeline is shown in rice. 19.

Rice. 19

Let's test the movie (by pressing the key combination + ) and then improve it.

14. Let's make the satellite hide while passing through the corresponding part of the orbit. To do this, you need to create at least four layers satellite new keyframes (for example, 21st, 25th, 27th and 29th - fig. 20) and change the transparency of the satellite in the panel Properties(Properties) by selecting from the list color(Color) value
alpha (see rice. 21) and setting the transparency value in the specified frames to 68, 57, 28 and 9%, respectively.

Rice. 21

15. To hide the invisible part of the orbit, you should swap the layers of the planet (it should be higher) and orbit. Guide layer guide should be invisible, and the layer piece, on the contrary, should be visible, i.e. on the timeline it will look like this: rice. 22–23. It is necessary to change the color of the orbit section on the piece layer (similar to step 7).

Rice. 22

Rice. 23

16. Let's improve our "planet". Temporarily hide all layers except the layer planet. Let's choose a tool

Tools toolbar. It allows you to change the fill.

Click on the first keyframe of the layer planet, then on the “planet” - a circle will appear with markers that control the gradient. “Pick up” the central marker with the mouse and drag the gradient down diagonally, at about 45 ° to the point of contact with the orbit (see Fig. rice. 24).

Rice. 24

The same actions must be done in the last frame, only the gradient in it must be “drag” up (see Fig. rice. 25).

Rice. 25

17. It remains to arrange the animation. To do this, click on the first keyframe of the layer. planet and on the panel Properties(Properties) in the list Tween(Animation) choose Motion(Traffic).

18. Let's test the film.

3. Project “Turning a rectangle into a letter”

AT this project the rectangle turns into a letter, i.e. form animation is applied.

1. On the layer, which we will name rectangle, draw a rectangle without a contour, and write a letter next to it, for example, E (rice. 26).

Rice. 26

2. Let's break the letter into parts on command Modify - Break Apart(Change - Split).

3. Overlay the letter on the rectangle, then click on the icon

on the toolbar and stretch the letter according to the height and width of the rectangle as shown in rice. 27.

Rice. 27

4. Without canceling the selection, in the context menu, select the command Cut (Cut), after which we will place the letter on a separate layer by command Edit- Paste in Place(Edit - Paste in the same place).

5. Hide the layer with the letter by clicking on the dot under the icon.

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

7. Select the first key frame in the letter layer, copy it by selecting the item in the context menu Copy Frames(Copy frames), and paste in the last keyframe of the layer rectangle on command Paste Frames(Insert frames). It turned out that in the first keyframe of the layer rectangle a rectangle is drawn, and in the last keyframe of the same layer, a letter. The letter layer can now be deleted.

8. Now let's create the animation. Click on the first keyframe and in the panel Properties(Properties) in the list Tween(Animation) choose shape(The form). A horizontal line with an arrow appeared, and the frames turned greenish, indicating that the animation of the shape was created.

It is necessary to specify which point of the rectangle should move to which point of the letter. For this, there are so-called hint labels. To set them, select the first key frame and execute the command Modify - shape -Add Shape Hint(Edit - Form - Add form hint). A red mark will appear with the letter a ( rice. 28).

Rice. 28

Let's add another label - to do this, right-click on the existing label and select the command in the context menu Add Hint(Add hint), deselect, click on the red mark (with the letter b) and drag it with the mouse to the upper right corner of the rectangle (see Fig. rice. 29).

After that, let's move on to the last keyframe. Click on the white working field and only then move the red dot to the same place in the upper right corner of the letter E.

Let's create two more labels in the same way (see Fig. rice. 30) on the rectangle and indicate their place on the letter.

Rice. 30

Let's test the movie.

Note. You can invite students to introduce themselves to the effects of the timeline.

1 “Empty” keyframes are also possible. They are indicated by an unfilled circle. - Approx. ed.

In this tutorial, I want to tell beginners to learn Flash how to make a beautiful animation of the form using the example of numbers. Lesson made in Macromedia Flash 8.
Let's start with the most important thing - shape animation will only work if you operate with graphic objects.

Those. having created the necessary, in our case text, objects in the necessary keyframes, they need to be turned into graphic objects. So, let's begin.

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

We immediately indicate that the shape animation will occur in the first frame: on the Properties tab, in the Tween drop-down list, select the shape animation - Shape. In the first frame, with the Text Tool, T button, we write the number 1. To start, to make it easier, select a sans-serif font, Arial, Tahoma, Verdana. Next, go to the 30th frame, press F6, i.e. create a keyframe, and edit our number 1, change it to number 2.

There is also a subtle point here, if you just delete the number 1 and write the number 2, then you must set the coordinates of the number 2 to be the same as the number 1, so that the animation creates the effect of turning the numbers one into another. If you continue to create the number 3, 4, 5 and beyond, then, accordingly, the coordinates of all the numbers should be the same. We have finished writing the numbers, now they need to be turned into graphic objects.

We select each digit in turn and by calling the context menu with the right mouse button, select the Break Apart item, you can also press the ctrl + B key combination or select the Break Apart item from the Modify menu, whichever is more convenient for you. We have turned numbers into graphic objects.

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

They can be inserted by calling the menu Modify - Shape - Add Shape Hint or using the key combination ctrl+shift+H. The dots are inserted as small red circles with letters in the center. They are named alphabetically: a, b, c, d, etc. They are inserted by default in the center of the object. The more points you set, the smoother your animation will be. By clicking on the point with the right mouse button, you can add a new point - Add Hint, remove an extra point - Remove Hint and remove all points - Remove All Hint.

If you now move to the second keyframe with the number 2, you will see exactly the same red dots with the same letters in the center.
Now we need to install them. I offer my own version, but you can do it differently, because. There are no final recommendations, you put them in accordance with your own perception and taste.

The meaning of the points is this: you set the point a in some place of the first object, go to the second object and also set the point a in the right place. During animation, these points will “flow” into one another. If everything is done correctly, then the dot on the first object will turn yellow, and on the second green. The screenshot shows the placement in my understanding. We perform the same operation for the 2nd, 3rd object, etc. There will be a lot of points, carefully, do not get confused.

Actually, if everything is done correctly, then we play the resulting animation using the ctrl + Enter keys or simply by stretching the slider along the timeline and enjoy the result. You can apply it anywhere and any way, just remember - it works only with graphic objects. The source and resulting swf file are attached.

It might be useful to read: