Practical work "Creating animation of a shape in Flash" Methodical manual "Learning to create animation in computer science lessons. Illustrated tutorial on animation for the Internet Basic types of actions

In this tutorial, I want to tell Flash beginners how to create beautiful shape animations using numbers as an example. 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 keyframes in the necessary, in our case textual objects, they need to be turned into graphic ones. So, let's begin.

Create a new document, specify the required 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 take place 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. First, 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 the same as the number 1, so that the animation creates the effect of turning the numbers into another. If you continue to create the number 3, 4, 5 and further, then, respectively, the coordinates of all the numbers should be the same. We finished writing the numbers, now they need to be turned into graphic objects.

Select each digit in turn and call 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 simply by 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, Flash has a Shape Hint - these are the key points of the object used in animation.

They can be inserted by calling the menu Modify - Shape - Add Shape Hint or by 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 the animation you 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 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 present them in accordance with your own perception and taste.

The meaning of 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, then the point on the first object will turn yellow, and on the second green. The screenshot shows the placement in my opinion. We do the same operation for the 2nd, 3rd object, etc. There will be a lot of points, be careful not to get confused.

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

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

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

We selected 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 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

Acquaintance with Ancor Point. Animation of palms

How do I create gears?

Radial Wipe Shape Transition

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. Loop back shapes

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

Circles are our everything! Lesson 4. Working with Dashes

Floating circles effect

Animating shapes

Creating a simple shape video

Creating a Shaped Animated Icon

Creating a simple shape intro

Spectacular smartphone shape animation

Stunning shape animation

Creating a simple shape morph

Shapes! Making Animated Patterns Using Shape Layers Repeater

Stylish shape animation

How to make a shaped animated banner

Practical work No. 1

Practical work No. 2:

Animate the shape for the number "1", smoothly transforming into the number "2". To do this, animate the object in the first and last frames. Use numbers as objects, customize them appearance(size, color, position, using a set of properties on the appropriate panel).

To create an animation of the shape of a text object at the first and last keyframes, 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" "overflow" of the points of the object in the first frame to some points of the object in the last frame. To improve the realism of transforming one object into another, it is necessary to indicate to which point of the object in the last frame the selected point of the object in the first frame will "flow".

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

Examples of creating a shape animation are given in the "Animation" - "Shape 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 object's shape changes.

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

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

If you apply shape tweening to shapes with in different colors, then during the transformation, a color change will occur.

Key terms

• Shape animation
• Splitting text
• Curve hint

Practice kit:

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

Exercises

• Create a smoke animation.
• Create tweens and changes in the shape of a cloud in the sky.
• Animate the shape of the flame.
• Animate a banner canvas waving in the wind.

• Calculated animation of the Shape type
• Sound formats
• Sound animation

Calculated animation of the Shape type

Animation type Shape(shape) allows you to create effects - metamorphosis, forcing one shape 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 graphics primitives (lines and fills) and will not be able to animate groups, symbols, 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 calculated animation, we will simulate a metamorphosis, in which a circle will turn into a square, in the process of transformation the figure will move, change its color and size.
So, create a new 100x300 px document, name 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 key. At the bottom of the scene, at frame 20, draw a square using the Rectangle tool, and delete the circle, selecting it with the Arrow tool. The square you draw must be larger than 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, go back to frame 1 and, referring to the Properties palette, in the Tween section, set the Shape value. Notice that the space of the layer on the Timeline palette between frames 1 and 20 was filled with light salad paint and from frame 1 to 20, an arrow stretched out. If instead of an arrow there is a dotted line on the palette, it means that you did something wrong, for example, you used not graphic primitives in your work, but a group or symbols ...

Test your movie using the Control> Test Movie command.

Experiment with the Timeline palette. You can control the character of movement using the section Ease, which is already familiar to you from the material of the previous lecture, and also determine the character of the way 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 (angular)- outlines of lines and fills in intermediate frames will retain obvious corners and straight lines.

Pay attention to the Timeline palette of this video, its animation is slightly different from the description given above, I think that, having carefully studied the nature of the movement of the figure, you can independently figure out the content of the upper layer on which the animation is presented.

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

The animation is accompanied by sound. In order to make its repeated repetition not look like an aggressive sound attack, when publishing, on the HTML tab, I deliberately unchecked the Loop section. This was done in order for the browser to play the video only once! If you want to watch the video again, use the browser toolbar and refresh the page. And for the future, the use of sound bites in your videos should be taken very seriously.

First: the 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 off or turn on the sound at any time, then you should not use it at all in looped videos, for example, in advertising banners. However, animation and some interactive elements are simply unthinkable without sound. Therefore, within the framework of this lecture, we will dwell on this in more detail, but for now, please note that a separate layer is selected for the sound fragment on 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 with Shape Hint

To manage more complex shape changes, so-called Shape hints(shape anchor points), which determine how the original shape will be wrapped into the new shape. In other words, anchor points are used to identify those points of the original shape, the relative position of which needs to be preserved, this is a kind of beads that fix some elements of the image. The most typical example of the use of anchor points is the animation of facial expressions, in which some of its parts (for example, the eyes) should not participate in the transformation.

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

To place nodal points, you need to do the following:

• Click the left mouse button in 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 anchor.
• 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 the point of the image, which 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 changes to yellow.

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

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 the anchor points alphabetically.

In the process of placing nodal points, it is advisable to periodically test your video. To change the position of the anchor point, you just need to drag it to a new location (this can be done both on the first and on the last frame of the sequence). In addition, you can always delete unnecessary points or add new ones. If you are satisfied with the results of the work, you can hide the anchor points. 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 the anchor points of the source image:

Add hint(add anchor point) - when the command is executed, a blank of a new anchor point appears on the scene. 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 node points) - this mode is used by default (there is a check mark next to the command name). Selecting it again will make the anchor points invisible. This option should be used only after the desired result has been achieved, since to return to the mode of displaying anchor points, you will have to go to the Modify> Shape> Add Shape Hint menu again.

Pay attention to the animated flash videos presented in this lecture, in the first case the koala bear turns into an 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 that propagate in gases, liquids and solids and are 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 - ultrasound, and 10 9 - 10 13 Hz - hypersound. In 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 ​​simultaneously in one recorded discrete fragment the sound is taken. The higher the bit depth, the more 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 comes a structured list of values ​​for certain fields. Sometimes, instead of values, there are formulas to reduce the file size.

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

WAV (waveform)- a discrete format for storing and transmitting audio signals in digital form, characterized by a high degree of quality and, unfortunately, incredible size. The wav format can store stereo or monaural files with 8 or 16 bit sampling. In addition to the usual discrete values, bitness, number of channels and volume level values, many more parameters can be specified in wav: position marks for synchronization, the total number of discrete values, the order of playback of various parts of the sound file, and there is also a place for you to place there is textual information.

MP3 (MPEG Layer3)- The streaming format for storing and transmitting audio signals in digital form is highly compact. It is mainly used for real-time audio transmission over network channels and for CD Audio encoding. The term "streaming" means that data transmission occurs as a stream of independent separate data blocks - frames. For this, the original signal during encoding is divided into sections of equal duration, called frames and encoded separately. When decoding, the signal is formed from a sequence of decoded frames. The bitrate when encoding a signal similar to CD Audio (44.1kHz 16Bit Stereo) indicates the total amount of the stream - the amount of information transmitted per unit of time. This value ranges from 320kbs (320 kilobits per second, also known as kbs, kbps or kb / s), to 96kbs and below.

Sound animation

To add sound to a movie, follow these steps:

Import one or more sound 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 movie library as symbols. Open the movie library using the Window> Library menu and check it out.

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

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

Dropdown Sync(synchronize) select a way to synchronize the sound:

Event(event) - the sound is synchronized by binding it to specific events in the movie, for example, when a button is clicked. Event-driven audio plays from the moment it transitions 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 at the next occurrence of a given event, a new instance of sound starts playing, even if the playback of the previous one has not finished yet.

Stop(stop) - The specified sound stops playing.

Stream(stream) - streaming audio. Flash provides "forced" synchronization between animation and streaming audio (for example, if animation frames cannot play on a Web page at the same speed as streaming audio, Flash will skip some frames). Streaming audio always stops playing when the animation ends. In addition, streaming audio never lasts longer than the associated animation frames play.

The number of repetitions of the sound 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 that affect the sound volume. Pre-prepared settings are selected from the drop-down list Effect(the effect):

None- there are no effects, this item should be selected in the event that 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- a gradual increase in the amplitude of the sound.
Fade out- a gradual decrease in the amplitude of the sound.

If you need a different kind of effect, you should select the item in this list. Custom(other), and then make adjustments using the panels that display the waveform of the sound. In this case, the following actions are possible:

• There are vertical markers on the scale indicating the playback time of the audio recording. By dragging these markers, you can cut off unwanted sections at the beginning and at the end of the 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 time points in the left and right channel panels. The volume of the channels at the same time can be different. To remove a marker, it must be pulled out of the panel.

Other controls are for convenience only. So, 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 displayed using the buttons Seconds(seconds) and Frames(frames).

If you do not have your own sound library, you can use the Macromedia Flash library by going to Window> Common Libraries> Sounds.

Sound recording and correction

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

Any wav file has a rather large size, but this is an easily removable defect, 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). Noise appears. The voice is distorted. All these shortcomings, using the programs listed above, can be easily eliminated even by a beginner.

In these programs, the sound is represented graphically in the form of 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 dream up for your pleasure.

Homework: Basic Animation in Macromedia Flash MX

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

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

Ah, and I myself am in the often ringing
I saw yesterday in the fog:
Red month foal
Harnessed to our sleigh ...

Total: you have four files in fla format (if the total file size exceeds 150 Kb, please pack the files into an archive) and send them to the teacher.

I wish you success in your independent study of Macromedia Flash MX!