The method of calculating intermediate frames (shapes-tweened) allows you to convert one shape to another, while changing its size, position and color. When creating shape animations, be aware that Flash cannot perform these animations for groups, symbols, text boxes, and bitmaps.
Shape shape animation allows you to create a metamorphosis effect, 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 turn individual parts of the original shape into new ones. Shape identifiers mark individual points of a shape before and after its shape has been changed.
Each of them is designated by a letter of the Latin alphabet, which allows you to set up to 26 identifiers. Thus, it is possible to create a change in the expression of drawn faces, the transformation of some animals into others, etc. For complex shapes, it is desirable to set intermediate states in the form of additional keyframes, which will allow you to control the transformation phases. It is best to place all animated shapes on separate layers, although you can animate at the same time on a layer that contains several shapes at once.
Rice. 4.15. Shape 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 > Break apart). This command breaks the link between the instance and the symbol, turning the instance into a set of unconnected lines and shapes, allowing it to be modified without affecting other instances. Later changes to the symbol will also not affect this instance.
Consider the sequence of actions when creating a form animation:
- Select the layer and an empty keyframe on it, from which the animation will begin.
- Let's create an object for the first frame of the sequence using any drawing tool.
- Select the required final frame of the sequence and turn it into a key one.
- We create a new object in this frame, to which the original object should be converted.
- Execute the command Window > Panels > Frame(Window > Panels > Frame) to open the panel frame(Frame).
- From the drop down list Tweening(Calculation) select value shape(Form).
- Let's set the value Easing(Smoothness) ranges from -100 to 100, specifying 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 by a slider that opens by clicking on the arrow.
- Drop blend(Transition) select value distribution(Distributed) - for smooth intermediate shapes or value Angular(Sharp) - For maintaining sharp angles and straight lines in intermediate shapes. The last value applies only to shapes that have sharp corners and straight lines, otherwise it will automatically be set to distribution(Distributed).
Rice. 4.16. Set Shape Animation Options
To control complex shape transformations, shape hints are used. They define points that in the initial and final forms must correspond to each other.
Shape hints, marked with a Latin letter, are represented in yellow at the start and green at the end 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 identifiers:
- 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 identifiers must be preserved both in the initial position of the figure and in the final position so that their logical sequence is not violated (for example, if the first key frame is abc, the next should not be acb).
- For figures of a complex shape, additional key frames are created that determine the stages of the state of the figure, with the calculation of intermediate frames between them.
Rice. 4.17. Changing the color of identifiers when placed correctly
To use form identifiers, do the following:
- 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.
- The identifier is moved to a point on the outline of the figure that they want to mark.
- The final key frame of the sequence is selected, on which the red color identifier is set to a point on the contour of the figure, to which the initial one should go, while the identifier changes its color to green.
- A movie review is performed to ensure that the shape changes as desired. Otherwise, move the ID to fine-tune the shape change.
- Repeat the process adding new identifiers ( b, c etc.).
If form identifiers are not displayed on the screen, then execute the command View > Show Shape Hints(View > Show Shape IDs), which is available if the selected layer and keyframe contain shape IDs.
Using form identifiers not only allows you to animate the form, but also to create additional effects, such as rotation.
An extra form identifier placed on a shape 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 IDs, just run the command Modify > Transform > Remove All Hints(Edit > Transform > Remove All Identifiers).
As already noted, Flash, when creating a shape animation, cannot calculate it for groups, symbols, text boxes, 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. An example of frame-by-frame animation using drawings
Calculation method for intermediate frames ( shapes-tweened) allows you to transform one shape into another, while changing its size, position and color. When creating shape animations, be aware that Flash cannot perform these animations for groups, symbols, text boxes, and bitmaps.
Shape shape animation allows you to create a metamorphosis effect, when one shape turns into another. These changes are controlled by special form identifiers ( shape hints), which allow you to create complex changes and transform individual parts of the original figure into new ones. Shape identifiers mark individual points of a shape before and after its shape has been changed. Each of them is designated by a letter of the Latin alphabet, which allows you to set up to 26 identifiers. Thus, it is possible to create a change in the expression of drawn faces, the transformation of some animals into others, etc. For complex shapes, it is desirable to set intermediate states in the form of additional keyframes, which will allow you to control the transformation phases. It's best to place all animated shapes on separate layers, although you can animate a layer containing multiple shapes at the same time.
Rice. 4.15. Shape 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 › Break apart). This command breaks the link between the instance and the symbol, turning the instance into a set of unconnected lines and shapes, allowing it to be modified without affecting other instances. Later changes to the symbol will also not affect this instance.
Consider the sequence of actions when creating a form animation:
- Select the layer and an empty keyframe on it, from which the animation will begin.
- Let's create an object for the first frame of the sequence using any drawing tool.
- Select the required final frame of the sequence and turn it into a key one.
- We create a new object in this frame, to which the original object should be converted.
- Execute the command Window › Panels › Frame(Window › Panels › Frame) to open the panel frame(Frame).
- From the drop down list Tweening(calculation) select value shape(Form).
- Let's set the value Easing(Smoothness) ranging from -100 to 100, specifying 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 by a slider that opens by clicking on the arrow.
- Drop blend(Transition) select value distribution(Distributed) - for smooth intermediate shapes or value Angular(Sharp) - for maintaining sharp angles and straight lines in intermediate shapes. The last value applies only to shapes that have sharp corners and straight lines, otherwise it will automatically be set to distribution(Distributed).
Rice. 4.16. Set Shape Animation Options
To control complex transformations of forms, use form identifiers ( shape hints). They define points that in the initial and final forms must correspond to each other.
Form identifiers ( shape hints), marked with a Latin letter, are represented in yellow at the start and green at the end 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 identifiers:
- 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 identifiers must be preserved both in the initial position of the figure and in the final position so that their logical sequence is not violated (for example, if the first key frame is abc, the next should not be acb).
- For figures of a complex shape, additional key frames are created that determine the stages of the state of the figure, with the calculation of intermediate frames between them.
In this tutorial, I want to tell beginners to learn Flash how to make a beautiful animation of the form using the example of numbers. Lesson made in Macromedia Flash 8.
Let's start with the most important thing - shape animation will only work if you operate with graphic objects.
Those. having created the necessary, in our case text, objects in the necessary keyframes, they need to be turned into graphic objects. So, let's begin.
Create a new document, specify the necessary parameters (size, background color, frame rate). In my example, the size is 200x200, the background color is white, the frame rate is 12.
We immediately indicate that the shape animation will occur in the first frame: on the Properties tab, in the Tween drop-down list, select the shape animation - Shape. In the first frame, with the Text Tool, T button, we write the number 1. To start, to make it easier, select a sans-serif font, Arial, Tahoma, Verdana. Next, go to the 30th frame, press F6, i.e. create a keyframe, and edit our number 1, change it to number 2.
There is also a subtle point here, if you just delete the number 1 and write the number 2, then you must set the coordinates of the number 2 to be the same as the number 1, so that the animation creates the effect of turning the numbers one into another. If you continue to create the number 3, 4, 5 and beyond, then, accordingly, the coordinates of all the numbers should be the same. We have finished writing the numbers, now they need to be turned into graphic objects.
We select each digit in turn and by calling the context menu with the right mouse button, select the Break Apart item, you can also press the ctrl + B key combination or select the Break Apart item from the Modify menu, whichever is more convenient for you. We have turned numbers into graphic objects.
Now you can play the resulting animation using the ctrl+Enter key combination or by simply dragging the slider along the timeline. But our animation is not very beautiful, the transformation of numbers from one to another is somewhat "clumsy". Let's improve the situation. To do this, Flash has a Shape Hint - these are the key points of the object used in the animation.
They can be inserted by calling the menu Modify - Shape - Add Shape Hint or using the key combination ctrl+shift+H. The dots are inserted as small red circles with letters in the center. They are named alphabetically: a, b, c, d, etc. They are inserted by default in the center of the object. The more points you set, the smoother your animation will be. By clicking on the point with the right mouse button, you can add a new point - Add Hint, remove an extra point - Remove Hint and remove all points - Remove All Hint.
If you now move to the second keyframe with the number 2, you will see exactly the same red dots with the same letters in the center.
Now we need to install them. I offer my own version, but you can do it differently, because. There are no final recommendations, you put them in accordance with your own perception and taste.
The meaning of the points is this: you set the point a in some place of the first object, go to the second object and also set the point a in the right place. During animation, these points will “flow” into one another. If everything is done correctly, then the dot on the first object will turn yellow, and on the second green. The screenshot shows the placement in my understanding. We perform the same operation for the 2nd, 3rd object, etc. There will be a lot of points, carefully, do not get confused.
Actually, if everything is done correctly, then we play the resulting animation using the ctrl + Enter keys or simply by stretching the slider along the timeline and enjoy the result. You can apply it anywhere and any way, just remember - it only works with graphic objects. The source and resulting swf file are attached.
Lesson 25: Shape Animation
Lesson Objectives:
to form the ability to create form animation;
develop a culture of speech, concentration; to develop the cognitive and mental activity of students, logical and algorithmic thinking;
educate independence, ethics of relationships.
Lesson type : a lesson in the assimilation of new knowledge and skills.
Software and methodological support of the lesson : editor Flash, § 20 of the textbook, handout.
Lesson plan:
Organizing time
Checking 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 little mood test. I have this good mood(smiley on slide 1 ). And now you show everyone what you have (to do this, sit down at the computers and draw your mood in Flash). Well done! Save your mood. I would really like to see everyone in a good mood until the end or by the end of our lesson.
Knowledge update
Frontal conversation with students on the following issues.
Guys, what have we been doing for several lessons? (learning how to create animation)
What kind of animation have we already learned how to create? What is their difference?
Do objects always move in a straight line?
Give examples of non-rectilinear motion.
How to change layer names?
How to insert a keyframe?
How to import an image into the library?
How to open the library window?
Which key converts an object to a library symbol?
What 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 leaflets). Your task is to line up in order of actions.
Algorithm for creating motion animation.
Draw or paste 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.
Press right mouse button: Create motion
Learning new material (method of problem presentation)
Do you think there is a limit to the possibilities of motion animation?
Problem: how you can animate the transformation of one object into another (for example, an apple into a pear).
So, the topic of our lesson isShape Animation . Let's formulate the goals and objectives of our today's lesson.
Shape Animation (Shape Tween) allows, as the name implies, to animate a change 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 to be animated;
select a frame with a picture by left-clicking on it and on the Properties panel (Properties) in the Tween list select the Shape type;
in the place where the animation should end, create a keyframe. The picture from the starting frame will be automatically copied into it. Here you can change the drawing or draw a new one.
Shape Animation unacceptable to library objects of type symbol and grouped objects.
Shape animation allows:
smoothly transform one figure into another;
smoothly change the color of the figure;
move the figure
combine the above options.
Show students how to create a form animation using an example (video).
Algorithm for creating form animation.
Draw the 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.
On the Twin Properties panel (Spin) select: Shape (Shape) (Shapes)
Ctrl + Enter - view animation.
Formation of practical skills of students (reproductive method, individual shape work)
Complete tasks 1, 2, 3 on pages 100-101 from the workbook. Optional task 4 (any) p. 103.
Summing up and reflection
front poll. The results of the survey should clarify what points cause difficulties for students.
Questions for the survey.
1. What is meant by form animation?
2. List the steps involved in creating a form animation.
3. Which objects can't be animated with shapes?
4. With what mood do you leave the lesson?
To do this, open your mood file that you created at the beginning of the lesson, depict your mood at the end of the lesson in frame 30 and create a shape animation. Show it to each other.
Thank you for the lesson!!!
Practical work No. 2:
Create a shape animation for the number "1" that smoothly transforms into the number "2". To do this, create a shape animation for the object on the first and last frames. Use numbers as objects, customize them appearance(size, color, position, using the set of properties on the corresponding panel).
To create an animation of the shape of a text object on the first and last keyframes, the numbers must be "split" - converted from text to graphics. This is done in the following way - the split command is applied to the selected object (menu mode "Modification" - "Split").
Practical work No. 3:
The resulting animation in the previous task may not suit us because of the "ugly" "flow" of the object's points on the first frame to some points of the object on the last frame. To improve the realism of the transformation of one object into another, it is necessary to indicate to which point of the object on the last frame the selected point of the object on the first frame will "flow".
To do this, perform the following steps (using the animation of the previous work):
Examples of creating form animations are given in the Animation - Form Animation folder.
Brief summary of the lecture:
In addition to animation with changing object properties (position, size, rotation, transparency, etc.), you can create animation in which the shape of an object changes.
To animate the shape of a text object on the first and last keyframes, the text must be "broken up" by converting it to graphics.
To improve the realism of the transformation of one object into another, it is necessary to indicate to which point of the object on the last frame the selected point of the object on the first frame will "flow". For this, anchor points (curve hints) are used.
If you apply shape animation to shapes with different colors, then the color will change during the transformation.
Key terms
- Shape Animation
- Text splitting
- Curve hint
Practice Kit:
- For which objects is it possible to create a classic shape animation?
- Is it possible to change the color of an animated object when creating a shape animation?
- Assigning anchor points (curve hints) when creating a shape animation?
- What is meant by a graphical representation of a text object?
- Can shape animation be applied to a text object? What transformations do you need to do with the text block for this?
Exercises
- Create a smoke animation.
- Animate the movement and shape of a cloud in the sky.
- Create an animation to change the shape of the flame tongue.
- Create an animation of the banner canvas fluttering in the wind.
Loading...