Examples of form animation in flash. Practical work “Creating animation of a form in the Flash program” Methodological guide “Learning to create animation in computer science lessons. Scripting with ActionScript

Lesson 25: Animating a Shape

Lesson objectives:

develop the ability to create form animation;

develop a culture of speech and concentration; develop students’ cognitive and mental activity, logical and algorithmic thinking;

cultivate independence and ethics of relationships.

Lesson type : a lesson in learning new knowledge and skills.

Software and methodological support lesson : editor Flash, § 20 of the textbook, handouts.

Lesson plan:

Organizing time

Testing your knowledge of the previous lesson.

Explanation of new material.

Fixing the material.

Summing up and reflection.

The tree of science has all its roots in practice.

A.N.Nesmeyanov

During the classes

Organizing time

Hello guys! Before starting our lesson, I suggest taking a short mood test. I have this good mood(smiley on slide 1 ). And now you show everyone what kind of mood you have (to do this, sit down at the computer and draw your mood in Flash). Well done! Save your mood. I would really like everyone to be in a good mood until the end or at the end of our lesson.

Updating knowledge

Face-to-face conversation with students on the following questions.

Guys, what have we been doing for several lessons now? (learning to create animation)

What kind of animation have we already learned to create? What's the difference?

Do objects always move in a straight line?

Give examples of non-linear motion.

How to change layer names?

How to insert a key frame?

How to import an image into the library?

How to open the library window?

Which key converts an object to a library symbol?

What kind of animation did we create in the last lesson?

Now, let's remember the algorithm for creating motion animation. To do this, we will divide into two groups, each group receives stages (one on pieces of paper). Your task: line up in the order of actions.

Algorithm for creating motion animation.

Draw or insert an object in 1 frame.

Convert object to library symbol (F8) or group.

Select the last frame of the animation on the timeline. Press F6.

In the last frame of the animation, change to move the object to a new location.

Right click: Create motion

Studying new material (method of problem presentation)

Do you think there is a limitation to what can be done with motion animation?

Problem: how can you animate the transformation of one object into another (for example, an apple into a pear).

So, the topic of our lesson isForm Animation . Let's formulate the goals and objectives of our lesson today.

Form Animation (Shape Tween) allows, as the name implies, to animate changes in the outline of an image. To create it, you do not need to convert drawings into clips, as when creating Motion Tween. Enough:

create a drawing that needs to be animated;

select the frame with the drawing by left-clicking on it and in the Properties panel in the Tween list select the Shape type;

Create a key frame at the point where the animation should end. The drawing from the initial frame will be automatically copied into it. Here you can change the picture or draw a new one.

Form Animation unacceptable to library objects of type symbol and grouped objects.

Form animation allows:

• smoothly transform one figure into another;

  smoothly change the color of the figure;

  move the figure;

  combine the above options.

Show students the creation of form animation using an example (video).

Algorithm for creating form animation.

Draw an object in 1 frame.

Select the last frame of the animation on the timeline.

Press F6.

In the last frame of the animation, change the shape of the object or draw a new object.

Select any intermediate frame.

In the Twin Properties panel, select: Shape (Shape)

Ctrl + Enter – view the animation.

Formation of practical skills of students (reproductive method, individual form of work)

Complete tasks 1, 2, 3 on pp. 100-101 from the workbook. Additional task 4 (any) p. 103.

Summing up and reflection

Frontal survey. The results of the survey should clarify what issues students are having difficulty with.

Survey questions.

1. What do you mean by form animation?

2. List the stages of creating form animation.

3. To which objects does shape animation not apply?

4. In what mood do you leave the lesson?

To do this, open your file with the mood that you created at the beginning of the lesson, in frame 30, depict your mood at the end of the lesson and create a form animation. Show it to each other.

Thank you for the lesson!!!

• Calculated animation Shape type
• Sound formats
• Animation scoring

Calculated animation of Shape type

Animation type Shape(form) allows you to create effects - metamorphoses, causing one form to “flow” into another. At the same time, Flash allows you to change the coordinates of an object, its size and color.

When using this type of animation, you must remember that Flash will only work with graphic primitives (lines and fills) and will not be able to animate groups, characters, blocks of text, or bitmaps. In order to still use these elements in your work, you will need to break them into parts (primitives) using the Modify > Break Apart command.

To study this type of computational animation, we will simulate a metamorphosis in which a circle will turn into a square; during the transformation, the figure will move, change its color and size.
So, create a new 100x300 px document, call it metaphor and save it to disk.

In the first frame of the video, use the Oval tool at the top of the scene to draw a circle. Then go to frame 20 and make it the key frame. At the bottom of the scene on frame 20, draw a square using the Rectangle tool, and delete the circle by first selecting it with the Arrow tool. The size of the square you draw must be larger than the size of the circle. Choose the colors of the circle and square yourself; you can set the shapes on the same vertical using the Info palette.

After you have played all these moments, return to frame 1 and, turning to the Properties palette, in the Tween section, set the value to Shape. Please note that the layer space on the Timeline palette between frames 1 and 20 is filled with light green paint and an arrow extends from frames 1 to 20. If instead of an arrow there is a dotted line on the palette, this means that you did something wrong, for example, you used a group or symbols in your work rather than graphic primitives...

Test your movie using Control > Test Movie.

Experiment with the Timeline palette. You can control the nature of the movement using the Ease section already familiar to you from the material in the previous lecture, and also determine the nature of the method of transformation of the form in the process of its metamorphosis. To do this, you will need to refer to the section Blend(transition), here you will be offered two options:

Distributive(smeared)—the outlines of lines and fills in intermediate frames will be smoothed.

Angular- the outlines of lines and fills in intermediate frames will maintain obvious angles and straight lines.

Pay attention to the Timeline palette of this video, its animation is somewhat different from the description above, I think that by carefully studying the nature of the figure’s movement, you will be able to independently understand the content of the top layer on which the animation is presented.

Notes:
In this work, the frame rate is 24 fps!

The animation is accompanied by sound. To prevent its repeated repetition from sounding like an aggressive sound attack, when publishing, I deliberately unchecked the Loop section on the HTML tab. This was done so that the browser would play the video only once! If you want to watch the video again, use your browser toolbar and refresh the page. One more thing for the future: the use of sound bites in your videos should be taken very seriously.

Firstly: sound weighs a lot. Secondly: if you cannot control the sound programmatically, that is, you do not provide the user with the opportunity to turn the sound off or on at any time, then in looped videos, for example, advertising banners It's not worth using at all. However, animation and some interactive elements are simply unthinkable without sound. Therefore, in this lecture we will dwell on this in more detail, but for now, please note that a separate layer is allocated for the sound fragment in the Timeline palette.

In this video there is one more layer - background (bottom layer), on this layer there are static elements - decorations.

Controlling shape changes using Shape Hint (shape anchor points)

To control more complex shape changes, so-called Shape Hints(nodal points of the form), which determine how fragments of the original form will be transferred to new uniform. In other words, nodal points are used to identify those points of the original shape, the relative position of which needs to be preserved; these are a kind of beads that fix some elements of the image. The most typical example of using anchor points is the animation of facial expressions, in which some parts of it (for example, eyes) should not participate in the transformation.

Nodal points are indicated in the image by small circles with letters. Letters (from A before z) are used as names (identifiers) of nodes. Each node point in the original image must have a corresponding point with the same name in the resulting image. In total, no more than 26 anchor points can be used for one figure (according to the number of letters of the alphabet). Nodal points in the original image are colored yellow, in the resulting image they are colored green.

To place anchor points you need to do the following:

• Left-click on the frame corresponding to the original image.
• Refer to the menu Modify > Shape > Add Shape Hint(modify > shape > add anchor point) as a result, a “blank” of the first anchor point will appear on the stage in your frame - a red circle with a letter A.
• Move it with the mouse using the Arrow tool with the Snap to Objects modifier enabled to the point in the image that you want to mark as a node.
• Left-click on the frame corresponding to the resulting image; there will also be a red circle on the scene with the same letter as in the original frame.
• Move the circle to a point in the image that should correspond to the one marked in the original frame; after moving, the circle will change color to green.
• Go back to the first frame and make sure that the color of the anchor point has changed to yellow.

If you need to continue placing anchor points, repeat the steps described above.

Notes:
If you use several anchor points during transformation, then arrange them clockwise, starting from the upper left corner of the image. This is because Flash processes anchor points in alphabetical order.

In the process of arranging nodal points, it is advisable to periodically test your video. To change the position of an anchor point, simply drag it to a new location (this can be done either on the first or last frame of the sequence). In addition, you can always delete unnecessary points or add new ones. If you are quite satisfied with the results of your work, you can hide the nodes. All of the above operations are most conveniently performed using the context menu. To open it, right-click on one of the anchor points. The menu contains four commands, of which the first three are available only for anchor points of the source image:

Add hint(add anchor point) - when the command is executed, a new anchor point appears on the stage. Remove Hint(delete anchor point) - the anchor point on which you right-clicked to open the menu will be deleted.
Remove All Hints(delete all anchor points) - deletes all anchor points.
Show hints(show anchor points) - this mode is used by default (there is a checkmark next to the command name). Selecting it again will cause the anchor points to become invisible. This option should only be used once you have achieved the desired result, as you will have to go back to the Modify > Shape > Add Shape Hint menu to return to the Hint Show mode.

Pay attention to the animated flash videos presented in this lecture; in the first case, a koala bear turns into an eagle owl without using anchor points; in the second case, we control the animation using three pairs of anchor points.

Sound formats

Sound is elastic waves propagating in gases, liquids and solids and perceived by the ear of humans and animals. A person hears sound with frequencies from 16 Hz to 20 kHz. Sound with frequencies up to 16 Hz is called infrasound, 2 10 4 -10 9 Hz is called ultrasound, and 10 9 -10 13 Hz is called hypersound. During the process of digitizing sound, all its wave characteristics are recorded. This recording is called pulse-code modulation and is a sequential recording of discrete values. The capacity of the device, calculated in bits, indicates how many values ​​the sound is taken from simultaneously in one recorded discrete fragment. The higher the bit depth, the more closely the sound matches the original. Any sound file can be thought of as a database. It has its own structure, the parameters of which are usually indicated at the beginning of the file. Then there is a structured list of values ​​for certain fields. Sometimes instead of values ​​there are formulas that allow you to reduce the file size.

Let's take a closer look at the audio data formats that we will most often use when scoring videos in Macromedia Flash.

WAV (waveform)- a discrete format designed for storing and transmitting audio signals in digital form, characterized by a high degree of quality and, unfortunately, an incredible size. The wav format can save stereo or mono files with a sampling depth of 8 or 16 bits. In addition to the usual sample values, bit depth, number of channels and volume levels, wav can contain many more parameters: position marks for synchronization, the total number of samples, the order in which different parts of the sound file are played, and there is also space for you to place there is text information.

MP3 (MPEG Layer3)— a streaming format designed for storing and transmitting audio signals in digital form and is highly compact. Used primarily for real-time audio transmission over network links and for CD Audio encoding. The term “streaming” means that data transmission occurs in a stream of independent individual blocks of data - frames. To do this, the original signal during encoding is divided into sections of equal duration, called frames and encoded separately. During decoding, a signal is formed from a sequence of decoded frames. The stream width (bitrate) when encoding a signal similar to CD Audio (44.1kHz 16Bit Stereo) denotes the total value of the stream - the amount of information transmitted per unit of time. This value varies from 320kbs (320 kilobits per second, also written kbs, kbps or kb/s), to 96kbs and below.

Animation scoring

To add sound to a movie, you need to do the following:

Import one or more audio files in wav or mp3 format into your movie. To do this, go to the File > Import menu. The files will be automatically placed in your video library as symbols. Open the movie library using the Window > Library menu and check it out.

Create a new layer in the Timeline palette and place a sound fragment on it using symbols in your library - drag it from the library onto the stage. “Expand” the sound - add frames (not key frames) using the Insert Frame command, so that the waveform of the sound is fully expanded on the palette in this layer. Flash allows you to create multiple audio layers, and each of them will act like a separate audio channel. This means that when a movie is played back, sounds on different layers that coincide in time are played simultaneously.

Go to the first frame of the sound layer and go to the Properties section of the palette Sound(sound). If your library contains several sound fragments, then using the drop-down list in this section, you can replace the sound you have selected with some other one at any time. At the bottom of the palette you see the initial parameters of the sound fragment: frequency bandwidth, mono/stereo, bit depth, duration, memory footprint.

In the dropdown list Sync(synchronize) select the sound synchronization method:

Event(event) - the sound is synchronized by linking it to certain events in the movie, for example, when a button is clicked. Event-driven audio plays from the moment it moves to the corresponding keyframe, and continues regardless of the timeline, even if the movie is stopped (assuming the audio is long enough, of course).

Start(start) - this method differs from the previous one in that the next time a given event occurs, playback of a new instance of sound begins, even if playback of the previous one has not yet finished.

Stop(stop)—Stops playing the specified sound.

Stream(stream) - streaming audio. Flash provides "forced" synchronization of animation and streaming audio (for example, if animation frames do not have time to play on a Web page at the same speed as the streaming audio, the Flash player skips some frames). Streaming audio always stops when the animation ends. Additionally, streaming audio never lasts longer than the associated animation frames.

The number of sound repetitions can be set in the section Loop(cycles). The "endless" playback mode is not implemented, but it can be simulated by entering a sufficiently large number in this section.

You can set sound effects, affecting the volume of sound. Pre-prepared settings are selected from the drop-down list Effect(Effect):

None— there are no effects, this item should be selected if you did not like the effects you selected.

Left Channel— starts sound only in the left channel.
Right Channel— starts sound only in the right channel.
Fade Left to Right— smooth transition of sound between channels from left to right.
Fade Right to Left— smooth transition of sound between channels from right to left.
Fade In- gradual increase in sound amplitude.
Fade Out- gradual decrease in sound amplitude.

If you require another type of effect, you should select the item in this list Custom(other), and then make adjustments using panels that display the waveform of the sound. The following actions are possible:

• There are vertical markers on the scale indicating the playback time of the sound recording. By dragging these markers, you can cut off unnecessary fragments at the beginning and end of the sound recording.
• Variable sound volume can be set using special markers located on the waveform panel. By adding such a marker (by clicking) or changing its position (by dragging), we change the volume level at certain moments. There can be up to eight markers in total, which correspond to the same points in time on the left and right channel panels. The volume of channels at the same time may be different. To remove a marker, it must be pulled out of the panel.

Other controls are for convenience only. Thus, you can change the scale of the time axis using the Zoom In and Zoom Out buttons. You can change the way the timeline is presented using the buttons Seconds(seconds) and Frames(footage).

If you don't have your own library of sound clips, you can use the Macromedia Flash library by going to Window > Common Libraries > Sounds.

Recording and correction of a sound fragment

While working on an animated or interactive video, you will certainly have the desire to record your own musical or speech fragment. So, you recorded some sound using a microphone, and saved it as a certain sound.wav.

Any wav file is quite large in size, but this is an easily removable shortcoming, because we can convert it to an mp3 file using PlayCentre, and also correct this fragment using special programs, For example, Sound Forge or Steinberg Wave Lab.

When recording from a microphone, pauses appear before and after a sound fragment (for example, a word). There is noise. The voice is distorted. Even a beginner can easily eliminate all these shortcomings using the programs listed above.

In these programs, sound is represented graphically as a wave. Therefore, here we can, with surgical precision, cut off the parts we do not need. Add various effects, for example, “A la Masyanya,” turn a woman’s voice into a man’s voice, and generally fantasize for your own pleasure.

Homework: Basics of creating animation in Macromedia Flash MX

First, you need to duplicate the animated flash videos presented in the material of this lecture.

Secondly, create a video that allows you to illustrate the wonderful lines from the poem by Sergei Aleksandrovich Yesenin:

Oh, and I myself am in the ringing thicket
I saw this in the fog yesterday:
Red moon as a foal
Harnessed to our sleigh...

Total: you need four files in fla format (if the total file size exceeds 150 KB, please archive the files) and send them to the teacher.

I wish you success in learning Macromedia Flash MX on your own!

Morphing differs from previous types of animation in that it only works exclusively with graphic (vector) objects, and not with symbols.
I think everyone has seen a simple way to smoothly change shape on flash websites (smooth flow of a square into a circle),

These are all graphic elements, I don’t think anyone will do this, it’s more interesting to look at a picture in png, how it changes shape, turning into another png, but morphing with a raster does not work. A certain algorithm of actions should be performed.
I'll tell you with my own example.
We create a document, import the pictures we need into the library, prepared in advance in size and on a transparent background. I immediately emphasize that the picture should be without gradients, without shadows and preferably not very colorful (the program will not be able to calculate it), who knows what a vector is , it represents how many patches of color shades are in any picture, so you must agree that the Flash program is not intended for basic work with vectors.
So, we’ve loaded everything into the library, let’s go - insert - create a symbol - in the symbol itself from the library. insert the picture, select it, then - modification - raster image - vectorization.

A window will open, if you have a threshold value of 100, correct it to 10, but the value is the smallest area, you can experiment, the default is 1, but it will take too long for the program to calculate (each color point), so depending on what kind of picture you have , how complex the color is, change this value and look by clicking preview, the main thing is that the quality is not greatly distorted, in my example, 25 seems to be too much, but the quality did not suffer much, if you are satisfied with the result, click ok.


Without removing the selection, press - copy-


and go to the editing stage, select 1 frame and on the stage - insert.


It’s better to move it with the arrows on the keyboard, or so that the entire image is selected and the arrow shows a crosshair, otherwise you’ll move it piece by piece, this is already a vector, not a symbol.
Select the first frame and select - create a form animation, then at about frame 60 we insert an empty key frame. On the scale, the track is made with dots.


Repeat the action with the second picture (paste-create symbol-vectorize-...copy...), we return to the stage, select the desired frame (I have 60),
click on the scene and press - insert,the track on the scale changes.


I told and showed a simple example, but in addition there are also editing tools when working with morphing, such as adding hints (points) for precise, smooth morphing, changing anchor points, distortion, smoothing... etc., if anyone is interested I can describe the meaning of these tools.
Let's play it and watch. Here we have a simple animation of the form.

What is animation? Timeline. Key frames. Operations with personnel. Types of animation. Stop-motion animation. Motion animation. Form animation. Animate using Timeline Effects

Animation is the illusion of movement created by using a series of sequential still images that differ slightly from each other. Even during the Renaissance, it was noticed that when images quickly change, the effect of movement is created.

To create animation, use the timeline ( 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. rice. 1). When playing a movie, the head automatically moves.

Frames can be key or static. Key frames, as a rule, contain the image (they determine the content of the film). Such frames are indicated by black circles 1. The remaining frames are static (they are played as if “in vain”).

Rice. 1

The time line is configured 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 first clicking on the first of them, and then, while holding down the key, on the last one.

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

To delete a frame (frames), after selecting it (them), 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 contextual (item Copy Frames(Copy Frames)) or the main menu ( Edit - Timeline - Copy Frames(Edit - Timeline - Copy Frames)). Pasting the copied frame(s) is done in the same way using the command Paste Frames(Insert frames). Naturally, you need to indicate the insertion location on the timeline.

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

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

Types of animation

In the Macromedia Flash program it is possible the following types animations:

Stop-motion animation;

Motion Animation ( Motion Tween);

Form animation ( Shape);

Animate using timeline effects.

Let's look at each type of animation separately.

Stop motion animation

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

Rice. 3

Motion Animation (Motion Tween )

With this animation, an object moves from one place to another. To create it, you only need to specify the start and end key frames; all intermediate frames will be determined by the program automatically. 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 frame.

Right-click on the key frame and select the context menu command Create Motion Tween(Create a motion animation). A blue frame appears around the circle, indicating that the object is grouped. Then select on the timeline, for example, the 30th frame (indicate the duration of the film) and while pressing the right mouse button, select the command Insert - KeyFrame(Insert Keyframe) - A horizontal line with an arrow at the end appears on the timeline, indicating that motion has been created. Intermediate frames are automatically colored bluish.

Using the panel Properties(Properties) you can also set additional animation parameters:

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

- Easy(Slow down); if the parameter value is positive, then the movement during animation will be slow, if negative, the movement will be 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.

Form 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 look at everything using 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 key frame 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 a shape animation has been created, in the last key frame we will draw a square instead of a circle.

Let's test the film and 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 into the points of another), it is necessary to create so-called tooltip labels. We will get acquainted with them later using a specific example.

Animate using Timeline Effects

In the version of Macromedia Flash MX 2004, 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); Next, select the effect type: Assistants(Helpers), Effects(Effects), Transition - Transform(Transition - Transformation). Group effects Assistants are not animated. They simply either create duplicates of a given object and place them at a certain distance from each other, or create an even flow of the object into its duplicate.

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

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

Practical part

1. Project “Moving Man”.

2. Project “Movement along a closed curve”.

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

1. Project “Moving Man”

Let's create a film in which, using motion animation ( Motion Tween) the little man will move.

Before creating a project, you need to have a good idea of ​​what individual elements the “hero of our film” will consist of. After all, every detail must move when the film is played. We also need to think about this point - which elements should be in the foreground and which should be in the background. For a more visual representation, it is advisable to first make a drawing on a sheet of paper.

So, let our little man look like this 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 into layers; the program has this option. First, draw the head (circle) and the command Modify - Convert to Symbol(Edit - Convert to symbol) convert it to a symbol, and accept the type ( Behavior) symbol Movie clip(Clip symbol); let's call this symbol head.

Then we will create an object that will serve as the “body”. Let's execute the command Insert - New Symbol(Insert - New symbol) and set the parameters as in rice. 5. After clicking the button OK We get into the symbol editing mode, draw a rectangle (see. rice. 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.

Rice. 5

The created symbol goes into the movie library. We go to the stage and transfer it to the work area.

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

The result is a little man! Don't worry about the beauty and verisimilitude of the drawing, the most important thing for us is to understand the idea of ​​​​animation and translate it into the film.

Rice. 6

So, the little man is in the first key frame on one layer. Let's distribute all the shapes that make it up into layers - to do this, run the command Modify - Timeline - Distribute to Layers(Edit - Timeline - Distribute to layers) - see. rice. 7.

Rice. 7

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

Rice. 8

The bottom layer will be the background of our film. Choose a drawing for it at your discretion.

After this, you need to decide on the length of the film and indicate those frames that will show different positions of a person when moving. 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 frames (using the F6 function key in all layers except the layer background.

Now let's look at what these key frames 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 in rice. 9b, in the 13th - as on rice. 9c and 17th - as on rice. 9y.

a B C D)

Rice. 9

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

After this, we will create a motion animation in keyframes. To do this, right-click on the key frame and select the command in the context menu Create - Motion Tween(Create - Motion Animation). As a result, the timeline will look like shown in rice. 10.

Rice. 10

The film is ready and can be tested.

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

Let us depict the model of the Earth with a satellite in orbit as shown in rice. 11.

Rice. 11

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

1. Using the panel Color Mix r (Color Mixer) set a radial fill by selecting two colors on the gradient scale: green and brown.

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

Rice. 12

3. Create a background (the lowest layer), which can be any picture that imitates the sky.

4. Let's draw (with the Oval) orbital trajectory in the form of an ellipse of any color without filling, i.e. color management toolbar ( Colors) will look like this rice. 13.

Rice. 13

5. To rotate the trajectory by 45°, it is necessary to group it, since when the areas intersect, the figure is split into parts. Let's select individual parts of the trajectory with the mouse while holding down the key. To group them, choose a team Modify - Group(Edit - Group) - a blue frame appears. Let's rotate the grouped object by 45 ° (see. rice. eleven). To do this, you can use the panel Transform(Transformation) by executing the command Window - Design Panels - Transform(Window - Design Panels - Transformation) and entering in the field Rotate(Rotate) angle value –30° ( rice. 14).

6. Then we again divide the trajectory into separate parts according to the command Modify - Break Apart(Edit – Split). To simulate movement along a closed trajectory, you need to specify the starting point of the movement and its end. To do this, draw another smaller ellipse and superimpose it on the orbit ( rice. 15). Delete the area formed by the intersection of two ellipses using the key.

Rice. 15

7. Using the tool and the key, select the unnecessary 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) onto a separate layer called piece. Let's make this layer invisible by clicking on the dot under the icon in the layers panel.

Rice. 16

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

10. Above layer orbit create a layer with the name 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), indicate the symbol type Movie clip(Clip), and we give a name satellite. In the editing mode, draw a circle without a contour, select a fill, and do not forget that the center of the object coincides with the registration point (“+”), otherwise the satellite will not be locked to the orbit.

11. Let's return to the stage and move the symbol satellite onto the working field and install it at the starting point in orbit, from where it will begin to move - rice. 17.

Rice. 17

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

Rice. 18

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

If you start the movie now, the satellite will “run” to the end point of the shortest path. To make the satellite move along the entire trajectory, create above the layer satellite special guide layer ( Guide), by clicking on the icon ( Add Motion Guide) at the bottom of the Layers panel. And we’ll transfer the frames from the orbit layer to this layer.

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

Rice. 19

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

14. Let's make sure that the satellite hides 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, 21, 25, 27 and 29 - 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 indicated 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 piece layer, 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”. Let's 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 along the “planet” - a circle with markers controlling the gradient will appear. “Pick up” the central marker with the mouse and drag the gradient down diagonally, at approximately 45 ° to the point of contact with the orbit (see. rice. 24).

Rice. 24

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

Rice. 25

17. All that remains is to design the 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(Movement).

18. Let's test the film.

3. Project “Turning a rectangle into a letter”

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

1. On the layer, which we will call 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(Edit - Split).

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

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

Rice. 27

4. Without canceling the selection, select the Cut command in the context menu, and then place the letter on a separate layer using the command Edit- Paste in Place(Edit - Paste in the same place).

5. Hide the layer with the letter by clicking on the point 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 it into the last keyframe of the layer rectangle on command Paste Frames(Insert frames). It turned out that in the first key frame of the layer rectangle a rectangle is drawn, and in the last key frame of the same layer there is a letter. The letter layer can now be deleted.

8. Now let's create the animation. Click on the first key frame and in the panel Properties(Properties) in the list Tween(Animation) choose Shape(Form). A horizontal line with an arrow appears, and the frames turn greenish, indicating that a shape animation has been created.

It is necessary to indicate which point of the rectangle should move to which point of the letter. For this there are so-called tooltip labels. To set them, you need to select the first key frame and execute the command Modify - Shape -Add Shape hint(Edit - Form - Add form tooltip). A red mark 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 a hint), deselect it, click on the red mark (with the letter b) and drag it with the mouse to the upper right corner of the rectangle (see. rice. 29).

After that, let's move on to the last key frame. Let's click on the white work 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 marks in a similar way (see. rice. 30) on a rectangle and indicate their place on the letter.

Rice. 30

Let's test the film.

Note. Students can explore timeline effects on their own.

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

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