Illustrated tutorial on animation for the Internet. Electronic school macromedia flash mx ii course: basics of creating animation in macromedia flash mx module iii: shape type animation, scoring animation Animated forms

The shapes-tweened method allows you to transform one shape into another, changing its size, position and color. When creating form animations, be aware that Flash cannot perform such animations on groups, symbols, text blocks, and bitmaps.

Animating the shape of shapes allows you to create the effect of metamorphosis, when one shape turns into another. To manage these changes, special shape identifiers (shape hints) are used, which allow you to create complex changes and transform individual parts of the original shape into new ones. Shape IDs mark individual points on a shape before and after its shape changes.

Each of them is designated by a letter of the Latin alphabet, which allows you to set up to 26 identifiers. In this way, you can create a change in the expression of drawn faces, the transformation of some animals into others, etc. For figures of complex shapes, it is advisable to set intermediate states in the form of additional key frames, which will allow you to control the phases of transformation. It is best to place all animated shapes on separate layers, although you can animate simultaneously on a layer containing several shapes at once.

Rice. 4.15. Form conversion: automatic and using identifiers

To apply shapes-tweened animation to groups, symbols, text blocks, and bitmaps, they must first be converted with the command Modify > Break Apart(Edit > Split into parts). This command breaks the connection between the instance and the symbol, turning the instance into a collection of unrelated lines and shapes, allowing it to be changed without affecting other instances. Changes to the symbol in the future will also not affect this instance.

Let's consider the sequence of actions when creating form animation:

1. Select the layer and an empty key frame on it, from which the animation will begin.
2. Let's create an object for the first frame of the sequence using any drawing tool.
3. Let's select the required final frame of the sequence and turn it into a key frame.
4. We create new object in this frame to which the original object is to be converted.
5. Let's execute the command Window > Panels > Frame(Window > Panels > Frame) to open the panel Frame(Frame).
6. From the dropdown list Tweening(Calculation) select the value Shape(Form).
7. Let's set the value Easing(Smoothness) ranges from -100 to 100, defining the rate of change over time. Negative values ​​correspond to slow changes at the beginning and fast changes at the end. Positive - fast at the beginning and slowing down towards the end of the animation. By default the speed is constant. Adjustment is made using a slider that opens by clicking on the arrow.
8. In the dropdown list Blend(Go) select value Distributive(Distributed) - for smooth intermediate shapes or value Angular(Sharp) - for maintaining sharp angles and straight lines in intermediate shapes. The last value only applies to shapes that have sharp corners and straight lines, otherwise the value will be automatically set to Distributive(Distributed).

Rice. 4.16. Setting form animation options

To control complex transformations of shapes, shape identifiers (shape hints) are used. They define points that must correspond to each other in the initial and final forms.

Shape hints, labeled with a letter of the alphabet, are represented by yellow in the start keyframe and green in the end keyframe. The red color of the identifier means that it is not located on the curve and cannot participate in the transformation. There are a few rules to follow when using form IDs:

• Identifiers are placed on the figure in a certain sequence, for example, counterclockwise, starting from the upper left corner of the object.
• The order of the identifiers must be preserved both in the starting position of the shape and in the ending position so that their logical sequence is not violated (for example, if there is abc on the first keyframe, there should not be on the next one acb).
• For figures of complex shape, additional key frames are created that define the stages of the figure's state, with the calculation of intermediate frames between them.

Rice. 4.17. Changing the color of identifiers when placed correctly

To use form IDs, do the following:

1. Select the first key frame in the sequence and execute the command Modify > Transform > Add Shape Hint(Edit > Transform > Add ID). The first red identifier with a letter inside will appear on the object.
2. The identifier is moved to the point on the outline of the figure that they want to mark.
3. The final key frame of the sequence is selected, on which the red identifier is set to the point on the contour of the figure to which the initial one should go, and the identifier changes its color to green.
4. Review the film to ensure that the shape changes in the desired manner. Otherwise, move the identifier to fine-tune the shape change.
5. Repeat the process, adding new identifiers ( b, c etc.).

If the form identifiers are not displayed on the screen, then run the command View > Show Shape Hints(View > Show Shape IDs), which is available if the selected layer and keyframe contain shape IDs.

Using form IDs allows you to not only animate the form, but also create additional effects such as rotation.

An extra form identifier placed on a figure can be removed by right-clicking on it and selecting the command from the context menu Remove Hint(Remove ID). This should be done on the first key frame of the sequence. To remove all form identifiers, just run the command Modify > Transform > Remove All Hints(Edit > Transform > Remove all identifiers).

As noted, when Flash creates shape animation, it cannot calculate it for groups, symbols, text blocks, and bitmaps. In these cases, you have to use step-by-step (frame-by-frame) animation, which significantly increases the size of the final file, but gives room for imagination and allows you to perform any transformations using a sequence of images.

Rice. 4.18. Example of frame-by-frame animation using drawings

Practical work №1

Practical work No. 2:

Create a shape animation for the number "1" gradually transforming 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 a set of properties on the corresponding panel).

To create an animation of the shape of a text object on the first and last key frames, the numbers must be “split” - converted from text to graphics. This is done in this 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 due to the “ugly” “flowing” of object points on the first frame into certain object points on the last frame. To improve the realism of transforming 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 that changes the properties of an object (position, size, rotation, transparency, etc.), you can create animation in which the shape of the object changes.

To animate the shape of a text object on the first and last keyframes, the text must be "broken" into graphics.

To improve the realism of transforming 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, use anchor points (curve hints).

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

Key terms

• Form Animation
• Splitting text
• Hint curve

Practice kit:

• For which objects is it possible to create 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 shape animation?
• What is meant by graphical representation of a text object?
• Can shape animation be applied to a text object? What transformations need to be made to the text block for this?

Exercises

• Create a smoke animation.
• Animate the movement and shape of a cloud in the sky.
• Create an animation of the flame changing shape.
• Create an animation of a banner fluttering in the wind.

In this lesson, I want to tell those starting to learn Flash how to make beautiful shape animation using numbers as an example. The lesson was done in Macromedia Flash 8.
Let's start with the most important thing - form animation will only work if you operate with graphic objects.

Those. Having created the necessary, in our case text, objects in the necessary key frames, they need to be turned into graphic ones. 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 will be animated in the first frame: on the Properties tab, in the Tween drop-down list, select Shape animation. In the first frame, using 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 key frame, and edit our number 1, change it to number 2.

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

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

Now you can play the resulting animation using the ctrl+Enter key combination or 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. For this purpose, Flash has Shape Hint - these are the key points of an object used in 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 into the center of the object. The more points you set, the smoother the animation you will get. By clicking on a point with the right mouse button, you can add a new point - Add Hint, remove an extra point - Remove Hint and delete all points - Remove All Hint.

If you now go to the second key frame 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 option, but you can do it differently, because... There are no final recommendations; you make them in accordance with your own perception and taste.

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

Actually, if everything is done correctly, then we play the resulting animation using the ctrl+Enter keys or simply dragging the slider along the timeline and enjoy the result. You can use it wherever and however you like, just remember – it only works with graphic objects. The source and resulting swf file are attached.

Method for calculating intermediate frames ( shapes-tweened) allows you to transform one shape into another, while changing its size, position and color. When creating form animations, be aware that Flash cannot perform such animations on groups, symbols, text blocks, and bitmaps.

Animating the shape of shapes allows you to create the effect of metamorphosis, when one shape turns into another. To manage these changes, use special form identifiers ( shape hints), which allow you to create complex changes and transformations of individual parts of the original figure into new ones. Shape IDs mark individual points on a shape before and after its shape changes. Each of them is designated by a letter of the Latin alphabet, which allows you to set up to 26 identifiers. In this way, you can create a change in the expression of drawn faces, the transformation of some animals into others, etc. For figures of complex shapes, it is advisable to set intermediate states in the form of additional key frames, which will allow you to control the phases of transformation. It's best to place all animated shapes on separate layers, although you can animate simultaneously on a layer that contains multiple shapes.

Rice. 4.15. Form conversion: automatic and using identifiers

To apply shape animation ( shapes-tweened) to groups, symbols, text blocks and bitmaps, they must first be converted with the command Modify › Break Apart(Edit › Split into parts). This command breaks the connection between the instance and the symbol, turning the instance into a collection of unrelated lines and shapes, allowing it to be changed without affecting other instances. Changes to the symbol in the future will also not affect this instance.

Let's consider the sequence of actions when creating form animation:

1. Select the layer and an empty key frame on it, from which the animation will begin.
2. Let's create an object for the first frame of the sequence using any drawing tool.
3. Let's select the required final frame of the sequence and turn it into a key frame.
4. We create a new object in this frame to which the original object should be converted.
5. Let's execute the command Window › Panels › Frame(Window › Panels › Frame) to open the panel Frame(Frame).
6. From the dropdown list Tweening(Calculation) select the value Shape(Form).
7. Let's set the value Easing(Smoothness) ranges from - 100 to 100, defining the rate of change over time. Negative values ​​correspond to slow changes at the beginning and fast changes at the end. Positive - fast at the beginning and slowing down towards the end of the animation. By default the speed is constant. Adjustment is made using a slider that opens by clicking on the arrow.
8. In the dropdown list Blend(Go) select value Distributive(Distributed) - for smooth intermediate shapes or value Angular(Sharp) - for maintaining sharp angles and straight lines in intermediate shapes. The last value only applies to shapes that have sharp corners and straight lines, otherwise the value will be automatically set to Distributive(Distributed).

Rice. 4.16. Setting form animation options

To control complex transformations of forms, use form identifiers ( shape hints). They define points that must correspond to each other in the initial and final forms.

Form IDs ( shape hints), labeled with a letter of the Latin alphabet, are represented by yellow in the starting keyframe and green in the ending keyframe. The red color of the identifier means that it is not located on the curve and cannot participate in the transformation. There are a few rules to follow when using form IDs:

• Identifiers are placed on the figure in a certain sequence, for example, counterclockwise, starting from the upper left corner of the object.
• The order of the identifiers must be preserved in both the starting position of the shape and the ending position so that their logical sequence is not violated (for example, if there is abc on the first keyframe, there should not be acb on the next one).
• For figures of complex shape, additional key frames are created that define the stages of the figure's state, with the calculation of intermediate frames between them.

Shape graphics have been trending for the last few years. However, its great popularity hides the painstaking work of animating each element on the workspace.

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

We have selected 30 that will help you master the principle of shape animation, and also 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 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

Introducing Anchor 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 our everything! Lesson 1. Create an intro

Circles are our everything! Lesson 2. Looping shapes

Circles are our everything! Lesson 3. Selecting colors in Adobe Kuler

Circles are our everything! Lesson 4. Working with Dashes

Spreading circle effect

Shape Animation

Creating a simple shape video

Creating a Shaped Animated Icon

Creating a simple shape intro

Spectacular smartphone shape animation

Amazing shape animation

Creating a simple shape morph

Shapes! Making animated patterns using Shape Layers Repeater

Stylish shape animation

How to make a shape animated banner

home » Useful » Illustrated tutorial on animation for the Internet. Electronic school macromedia flash mx ii course: basics of creating animation in macromedia flash mx module iii: shape type animation, scoring animation Animated forms