Practical work “Creating animation of a form in the Flash program” Methodological guide “Learning to create animation in computer science lessons. Illustrated tutorial on animation for the Internet Describe the process of creating tween shape animation

In this lesson, I want to tell those starting to learn Flash how to make beautiful shape animation using numbers as an example. Lesson 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.

We create new document, indicate 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 the point with the right mouse button you can add new point- Add Hint, remove an extra point - Remove Hint and remove 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.

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 modified 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 it will be automatically set to Distributive(Distributed).

Rice. 4.16. Setting form animation options

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

Shape hints, marked with a letter of the Latin alphabet, are represented in yellow in the initial and green in the final keyframes. 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

Description:

Lesson objectives:
1. educational – develop an understanding of the process of filling frames with shape changes, which is used to transform drawn shapes between the starting and ending points of frames
2. developing - develop intellectual skills to analyze and compare information received, develop creative abilities when creating animation
3. educational – to cultivate an aesthetic perception of reality, a love of screen art, and to develop self-control skills.

Equipment and teaching material: PC, Flash program, multimedia projector, demonstration material, electronic presentation, tasks.

Lesson structure and flow:

1. Organizational moment. Checking students and their readiness for the lesson.
2. Examination homework

   What is animation? What types of animation do you know, their advantages and disadvantages? How is motion animation done?
   In the last lesson we learned about motion animation. Today we will continue to study animation. Write down the topic of the lesson: Creating shape animation in Flash.

3. Goal setting. Lesson objectives are formulated

   (The file is shown – Creating form animation in Flash.ppt – slide 1).

4. Explanation of new material, taking notes, showing how to perform basic operations

   Shape animation with filling of the first and last key frame Shape tweening.
   Shape frame fills are used to transform drawn shapes between starting and ending points. Flash can perform the reshape frame fill operation only on shapes. You can fill frames for multiple shapes on one layer. But for clear organization, each shape needs to be on a separate layer; if you later return to this animation fragment to make certain changes, the work will be simplified. (The file is shown slide 2). Students take short notes. ( Next, all operations are shown on the screen using a multimedia projector.)
   To create a calculated animation of a form, you need to perform the following steps:
   1. Draw an object in a keyframe.
   2. While in the first frame, use the “ Frame", select item Shape, change attenuation.
   3. Specify the end frame and enable the command blank key frame, this can be done by right-clicking on the frame, which will be the key one, a list will appear in which to select blank key frame. 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 the keyboard. After this, the animation will be played.
   Once you have two keyframes, you make the first one active (just go to it), and select " Frame» in the list Tweening line Shape:
   

   The frames on the timeline should turn green 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 figure 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 key frame there is a circle, and on the other key frame (this is the 10th frame of the scene) a crescent moon. In the " Frame"there are two parameters Easing(Acceleration) and Blend(Transition)

   

   Easing(Acceleration) specifies 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 Fig. 5).

   

   Parameter Blend(Transition) , defines the transition algorithm: Distributive(distributive, general) and Angular(angular). The first tries to soften as much as possible, smooth out the transition from one figure to another. The second one tries to maintain the proportions of the angles. If you are not satisfied with the transition, you can experiment with this option.

5. Reinforcing the material covered.

   (The file is shown – Creating motion animation in Flash.ppt – slide 4).
   Creating a shape animation: “Night Flower”

   
6. 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. Positive aspects, mistakes, shortcomings, if any, are discussed.
   Let's repeat the main points of the lesson.
   What program did we continue our acquaintance with today? How to create a form animation? What extension does the animation file have? Did you like the program's features and where could you use them?
   Analysis of student responses; argumentation and grading.
7. Homework: abstract; think over and prepare material for your own animation

List of used literature

1. Macromedia Flash 5/ Book + Video course: Tutorial– M.: The best books. Edited by V.B. Komyagina.
2. Flash 8. Just like 2x2. A.A. Borisenko
3. INTERNET: www.flashblog.ru; www.adobe.com

In the last lesson, we introduced you to automatic motion animation (Motion Tween), and now we will continue the conversation about automatic animation and look at automatic animation of shape changes (Shape Tween). It should be noted that the term Shape Tween is translated differently in different publications, in particular the name “animation of filling frames with changing shape” is found. However, it is very difficult to accurately translate this combination, since tween is an abbreviation for between. Thus, it is meant that this type animation is built on the basis of the initial and final frames, and everything that is between these frames is interpolated according to one or another algorithm. Shape change animation allows you to create the effect of one shape flowing into another while simultaneously changing the location, size and color of the shapes.

It should be noted that shape animation can only be applied to shapes, but cannot be applied to groups, instances, or bitmaps. In order to apply shape changing animation to these objects, they must first be broken apart into their components. To understand the principles of creating automatic animation of shape changes, consider simple example, in which an apple will turn into a pear. Draw a closed path with an apple-shaped fill, as shown in Fig. 1.

Rice. 1. Outline with radial fill

Then click on the name of the layer of the drawn object (in this case, the default layer name is Layer 1) - the layer will become selected (Fig. 2), and a Tween window will appear at the bottom in the Properties panel, in which you need to select the Shape item.

Rice. 2. In the Tween menu, select Shape

Now let's add the final frame - let the shape change occur in 30 frames. Insert a keyframe at frame 30 and place a closed pear-shaped path there (Figure 3). Please note that in our example, the beginning and last frame differ not only in the shape of the outline, but also in the fill color.

Rice. 3. Place the resulting form in the 30th frame

After we determined the final frame of the transformation, in the Timeline panel the interval from the first to the 30th frame turned light green, and an arrow stretched inside this gap, which indicates the creation of the transformation animation, that is, the creation of the next film.

Rice. 4. In the Ease window, set the animation acceleration/slowdown mode

Similar to how it is implemented in automatic motion tweens, in automatic shape tweens you can set the animation to slow down or speed up. Let's demonstrate this feature with our example. Select the layer and click on the triangle next to the Ease window (Fig. 4), as a result of which a slider will appear that allows you to set the acceleration/deceleration mode. To speed up the movement, you need to enter a negative number from –1 to –100, and to slow down the transformation process, enter a positive number from 1 to 100. Let's set the Easing parameter, for example, equal to +100, and get the following movie.

Rice. 5. Blend Dropdown Menu

Pay attention to the ability to select the nature of the animation, which is set in the Blend drop-down menu (Fig. 5). In this menu, you can choose two options - Distributive, in which the intermediate shapes will be smoother, and Angular, in which the shapes will be angular.

Using hints in form animation

In the previous paragraph, we studied the process of animating the shape change in which an apple turns into a pear. A logical process would be a morphing process, in which a twig becomes a twig, and a fruit becomes a fruit, while the program generates intermediate frames of the transformation, “knowing nothing” about the structure of apples and pears. Therefore, if we want to retain some morphing logic, we need to tell the program which areas should be inherited. For this purpose, the Flash program uses so-called shape hints - control markers, with which you can control the shaping process. Hints mark points that should turn into themselves in the initial and final figures. Hints are marked with letters (from “a” to “z”).

Let's look at how we can improve our animation using hints.

Select the first key frame and execute the command Modify => Shape => Add Shape Hint, as a result of which an initial hint in the form of a red circle with the letter “a” will appear on the shape. Let's move the hint to the top point of the branch (Fig. 6).

Rice. 6. Hint installation process

Rice. 7. In the last frame, set the point where the hint should go

Move to the last keyframe and you will notice that the end hint will appear inside the outline of the resulting shape in the form of a green circle with the letter “a”. Move the hint to the point that should correspond to the first marked point (Fig. 7). After you place a hint on the curve in the last frame, in the first frame the hint will change its color (from red to yellow) - this means that a correspondence has been established between the hints. Repeat this process, adding new hints (Fig. 8). For best results, hints should be placed counterclockwise, starting from the top left corner of the shape.

Rice. 8. Position of hints in the resulting figure

Rice. 29. Creating a movie clip “branch”

Since our task is to build an animated tree, which, in turn, consists of branches, let’s turn the branch we created into a movie clip by executing the command Modify => Convert to symbol (Fig. 29). Now you can build a tree from a set of “branch” clips (Fig. 30). As can be seen from Fig. 30, the branch clip is repeatedly applied with various transformations (rotation, mirroring and scaling).

Rice. 30. A tree is built on the basis of the “branch” movie clips

Rice. 41. Adding Symbol instances to the scene 1 copy

You can also duplicate a symbol by using its instance. Let's demonstrate this using the same example. Let's select an instance of Symbol 1 on the stage and execute the command Modify => Symbol => Duplicate Symbol (Fig. 42).

Rice. 42. Duplicate a symbol based on instance

Rice. 43. Duplicate Symbol panel

After this, another symbol will appear - Symbol1 copy 2 (Fig. 43). Double-click on the name of the new symbol in the library window, which will open the window for editing the new symbol. Let's change the position of the leaf in the last frame, go to the main scene and add several instances of the new symbol. As a result we will get the final version