Use of graphic objects. Using simple animated graphic objects. Movement along a given trajectory
Information:
Lesson objectives:
- To interest students and reveal the prospect of further study of the topic on the profile information technology;
- To familiarize students with the methods of creating cartoons;
Lesson objectives:
Educational:
- introduce students to ways of creating animated videos;
Educational:
- to cultivate a harmonious perception in students computer technology;
- cultivate interest in creative and research work.
Educational:
- develop ideas about the principles of creating a cartoon;
- learn to apply the acquired knowledge in practice.
TSO and visibility:
- computer class;
- multimedia projector;
Software support: Program Macromedia Flash MX.
During the classes:
Macromedia Flash MX provides several ways to create animation sequences:
- animation effects- the program itself creates a sequence of frames that simulates a particular effect in relation to a certain object;
- frame-by-frame animation - the user creates each frame of the future animation;
- automatic tweened animation, or transformation animation - the user specifies the starting and ending frames, and the program itself creates intermediate frames based on software interpolation.
Animation effects
Flash MX includes pre-made animation effects (timeline effects) that let you create complex animations using a minimum number of actions. You can use the function Timeline Effects to the following objects:
- text;
- graphical objects, including shapes, grouped objects, and graphic symbols;
- raster images;
- buttons.
When you add animation effects to an object, Flash automatically creates the corresponding layer and all the motion and shape transformations needed to this effect, are implemented in this layer. The new layer is automatically given the same name as the effect.
As an example, let's create an “explosion” effect on text. To do this, type some phrase or word (Fig. 1), select it using the Arrow tool and execute the command Insert → Timeline Effects → Effects → Explode.
Rice. 1. Selected text object
As a result, a panel of the same name will appear (Fig. 2), providing the ability to configure a number of effect parameters.
Rice. 2. Explode panel
The presence of a preview window allows you to analyze different variations of effects without leaving the panel Explode. After you choose required parameters, press the button OK and you will get something like this animation.
Similar effects can be applied to a raster image. Let's consider an example with the smooth disappearance of a raster image. Importing a bitmap into the scene using a command File → Import → Import to stage(Fig. 3) and apply the Blur effect on command Insert → Timeline Effects → Effects → Blur video clip .
Rice. 3. Bitmap imported into the scene
To edit an animation effect, select the object associated with the effect on the stage, and in the window that appears Properties click the button Edit(Fig. 4) - as a result, a panel will appear Blur.
Rice. 4. Button Edit located at the bottom of the panel
In the panel Blur you can change the effect parameters again and save the new settings (Fig. 5).
Rice. 5. Panel Blur allows you to change effect settings
Stop motion animation
Let's consider simplest example- the piece of paper moves from one point on the screen to another with rotation around its axis.
Rice. 6. First keyframe of the animation
Let's draw a maple leaf, for example, as shown in Fig. 6, - corresponding frame on the panel Timeline will turn into grey colour and a dot will appear inside it indicating that it is a keyframe. A key frame is a frame at which content is placed or changed.
Rice. 7. Create the second frame by dragging and transforming the first
Then click right click mouse over the adjacent frame and insert another key frame using the command Insert Keyframe. As a result, a copy of the leaf will appear in this frame; move it down (using the Arrow tool) and rotate it using the command Modify → Transform → Free Transform (Fig. 7).
Let's repeat the procedure so that in the 6th frame the sheet occupies its final position (Fig. 8).
Rice. 8. Last frame of animation
Pay attention to the panel Properties(Fig. 8) - the type of object is indicated on the left side. In each frame, the leaf is an object of type Shape(form), other types of objects will be discussed a little later.
To export a movie as a SEF file ( native format Macromedia for Flash movies), run the command File → Export → Export Movie. As a result, we get the following film. You can view the resulting movie without leaving the Flash program by command Control → Test Movie. Moreover, in order to view how much space is occupied by individual frames of the film, you should run the command. As a result, we will see that each of the six frames takes up about 600 KB (Fig. 9). Thus, the size of the entire movie is 3686 bytes.
Rice. 9. Watching a movie in Bandwidth Profiler
In order to evaluate whether this is a lot or a little, consider how a similar film can be made using automatic animation, or motion transformation animation.
Automatic animation
Rice. 10. The object automatically turns into graphic symbol
Let's look at how you can do the same animation and get a more compact resulting file. Select the drawn leaf on the screen with the Arrow tool and execute the command Insert → Timeline → Create Motion Tween, as a result, the leaflet will be placed in a frame, and in the panel Properties a message will appear that the selected object has properties Graphic(Fig. 10). This means that the animated object is automatically converted into a graphic symbol. Now it is no longer possible to arbitrarily edit it with the Arrow tool as an object of the Shape type. The use of symbols is an important concept in Flash. Once a symbol is created, it can be used multiple times in a movie without increasing the size of the resulting file. Symbols are divided into graphic symbols, button symbols, and movie clip symbols. IN this lesson Let's consider a graphic symbol and return to other types of symbols later. Every new symbol immediately becomes part of the library of the current document (Fig. 11).
Rice. 11. Each new symbol becomes part of the library
If you run the command Window → Library, then you can make sure that a symbol has appeared in the library and is assigned the name Tween 1 by default. In order to assign a different name to a symbol, just double-click on the name and replace it with the desired one. After we have formed the graphic symbol, let's go to the final frame of our animation (let it be the 15th frame) and insert a key frame (using the Insert command Keyframe). A copy of the symbol will appear in this frame, which we will move and rotate around its axis (using the command Modify Transform→Free Transform), as in the previous example. As can be seen from Fig. 12, all frames between two key frames are colored blue and an arrow stretches from the first key frame to the last, which indicates the creation of animation Motion Tween.
Rice. 12. An arrow on a blue background indicates the creation of animation
Motion Tween
By executing the command Control → Test Movie, we obtain the information presented in Fig. 13.
Rice. 13. Watching a movie in Bandwidth Profiler mode
Despite the fact that in this example we have 15 rather than six frames, as in the previous one, and the animation is smoother, the size of the resulting file is smaller - only 900 bytes. As can be seen from the diagram (Fig. 13), information about the object is stored only in the first frame, and in each new frame it is necessary to remember only the new positions of the sheet. This takes on average only 20 bytes.
In order to illustrate the fall of a sheet with rotation around the plane of the sheet, we repeat the previous example, only when modifying the last key frame we add the command Modify → Transform → Flip Horizontal. As a result, we get the following film.
Now let's look at an example when a leaf approaches the viewer. To do this, in the final frame instead mirroring (Flip Horizontal) we will increase the size of the sheet. In order to avoid the feeling of slowing down when an object approaches the viewer, the speed of its movement must be increased. In order to achieve this effect, you need to click on the first frame and refer to the section Ease in the panel Properties. Positive values for the Ease parameter cause movement to slow down, while negative values cause movement to speed up. Let's choose maximum acceleration object.
Rice. 14. Select the maximum acceleration of the object Ease = –100
To do this, set the value of the parameter Ease equal to –100 (Fig. 14). The result is a movie. Note that the first frame can also be placed behind the stage, then we will get a film in which the leaf will fly into the frame and move towards the viewer. You can simulate the rotation of a sheet around a displaced center of symmetry. I hope the reader himself will be able to experiment, making it more difficult to modify the final frame and thus changing the nature of the movement of the sheet.
From the presented examples, it is obvious that automatic motion animation is effective when the transformation of an object during its movement is specified simple functions(rotate, scale, etc.). If it is necessary to animate complex movements (for example, the movement of a cartoon character’s hand), then motion transformation animation is not applicable. Each frame has to be drawn manually, that is, frame-by-frame animation is used, consisting of a set of key frames. Thus, frame-by-frame animation is the most versatile, but at the same time the most labor-intensive type of animation; in addition, it creates the most “heavy” files. Whenever it is possible to replace frame-by-frame animation with automatic animation, this is preferable. Let's look at a number of examples that allow you to use automatic motion animation when simulating a flight.
Movement along a given trajectory
Flash allows you to set the movement of an object along a given path. To set this trajectory, run the command Insert → Timeline → Motion Guide.
As a result, a special layer will appear above the current layer, which by default will have the name Guide Layer 1.
Let's click on the trajectory layer and use the pencil tool to draw a line along which we plan to move the sheet (Fig. 15).
Rice. 15. Example of specifying a motion trajectory
Now let's go to the first frame (click on it with the mouse) and in the panel that appears Properties check the box Snap(sets the mode of binding to the movement trajectory) - fig. 16.
Rice. 16. Parameter Snap sets the mode of snapping to the motion trajectory
After you check the box Snap, the center of the sheet will align with the trajectory of movement. Using the Arrow tool, you can move the leaf along the motion path, but if you try to tear the sheet off the path and place it next to it, it will be pulled back and “stick” to the motion path again (Fig. 17).
Rice. 17. The object seems to stick to the trajectory of movement with its center
Go to the last frame and similarly tie the sheet to the end point of the movement path. To give the film volume, add transformation Flip Horizontal, - as a result we get the film .
When a sheet moves along a trajectory, it does not matter to us how it will be rotated in the direction of movement. But if we similarly set the flight path of a bird, then in some parts of the curve it turns out that the bird flies tail first.
Obviously, if we want to animate the flight of an airplane or a bird, then we need it to move nose forward at all times. In Flash, this type of movement is very easy to set (Fig. 18).
Rice. 18. If you check the box Orient to Path, the bird will fly head first
Checkbox required Orient to Path, and the bird’s movement will change to quite normal.
Rice. 19. Adding a single-color background
If you want to add a single-color background, click on the background and in the panel that appears Properties(Fig. 19) in the field Background select the desired background color.
If we want to add background picture, we will need a separate layer for this. Basically, Flash program offers the possibility of creating a layer system similar to those used in classical animation, in which the background and various moving objects are drawn each on their own layer of transparent film.
By placing background image and each animated object on its own layer, it is much easier to achieve control over them. So, in order to add a background image, let's create for it new layer. To do this, right-click on the layer shown in Fig. 19 is designated as layer 1, and in the drop-down menu select the line Insert layer. In the added layer draw the sun. In order not to get confused in the layer numbers, let's give the layer the name “background”. To do this, click on the current name and enter required name(Fig. 20).
Rice. 20. Create a stationary background object on a new layer
As can be seen from Fig. 20, the bird is behind the sun, which is contrary to common sense. In order to swap layers, just use drag-and-drop mode to drag the layer named “background” down.
Let's edit the objects of the film (in order for the bird to circle against the background of the sun, we will change the trajectory of its flight and change the ratio of the sizes of the sun and the bird).
Rice. 21. To animate the cloud, create a separate layer
Now let's add moving objects to our animation, for example a cloud. For the cloud, create a new layer and set the motion transformation animation on it. In order for the cloud to fly into the scene, we will position it as shown in Fig. 21. As a result, we get the following
IN Microsoft documents Word can insert two types graphic objects: drawings And Images. In Russian, the difference between these terms is not obvious, and we will explain what is meant by them in text Word processor. Drawings - objects of vector nature (lines, straight lines and curves, geometric figures, standard and non-standard). The simplest means for creating them are in the word processor itself.
Images - raster objects. The word processor does not have the means to create them, so they are inserted as external objects from a file prepared by other means (graphics editor, scanner, digital camera, graphics tablet).
When graphic object printed on paper (in a book, newspaper, magazine), we don’t care what nature it is: vector or raster. But when this object is created, stored or processed on a computer, the difference is very noticeable. The fact is that these types of objects have different sets of properties, and therefore different methods are used when working with them. software. A typical example of a raster image is regular photography. Not a single line, not a single figure in a photograph has its own properties - they all consist of dots. Only the points in a raster image have unique properties that can be used to distinguish them from each other. For points there are few of these properties - the coordinates of the point, the size of the point, the shape of the point and the color of the point. The most important of these is color. Only due to the fact that each point of a photographic image has a certain color, we receive information about the subject when examining the photograph.
Typical example vector image- drawing. It can be viewed as a collection of lines that have unique and distinguishable properties. Lines have thickness, color, shape, type (solid, dotted, etc.), fill (only if the line is closed). The points in the vector image are indistinguishable. We know that all lines consist of an infinite number of points, but we do not consider their properties.
In raster graphics, where a line is a collection of a finite number of points, it can be multi-colored, since each point can have a color. In vector graphics, there cannot be multi-colored lines - this is one object with one color property.
ª In raster objects, color plays a decisive role, and shape is conditional. By examining a straight line in a photograph with a magnifying glass, you can easily see that it is not straight at all. In vector objects, the shape of the lines plays a decisive role, and the color is conditional.
In program terminology Microsoft Word vector objects are called drawings(pictures), and raster - images(images). Drawings are always embedded in the document - they can be edited directly on the spot. Images are inserted into a document using the linking or embedding method. Editing them using word processor impossible, but it is possible to control their position and their visualization. Rendering refers to a display method that takes into account brightness and contrast.
Raster graphics A raster image is very sensitive to reduction and enlargement. When reducing a raster image, several neighboring points are converted into one, and therefore clarity is lost small parts images A raster image is created using dots different colors(pixels) that form rows and columns. A set of dot lines form a graphic grid (raster)
Vector graphics Vector graphics are used to store high-precision graphic objects (drawings, diagrams), for which it is important to maintain clear and bright outlines. Vector images are formed from elements - point, line, circle, rectangle, etc. For each element, coordinates and color are specified
Fractal graphics Fractal graphics, like vector graphics, are calculated, but differ from them in that no objects are stored in the computer's memory. The image is constructed using an equation (or a system of equations), so only formulas are stored. By changing the coefficients in the equation, you can get a different picture.
Professional education VISUAL EFFECTS Creating realistic or, on the contrary, fantastic worlds in cinema, interesting characters, spectacular destruction, explosions, tornadoes, and other special effects - this is not a complete list of the functions of visual effects specialists. This profession requires not only the ability to work in three-dimensional packages, but also knowledge of mathematics, physics and various artistic disciplines.
Compositing Compositing is one of the most interesting specialties in post-production. The composer’s task is to collect the filming material and all created by specialists into a single scene (shot). visual effects layers computer graphics, combine them by color and dynamics, carry out a huge amount of corrections and improvements, and produce the final composition. Every scene with special effects that the viewer sees in a movie is the result of the composer’s work.
Motion design Motion designer is one of the most creative and sought-after specializations in computer graphics. It includes the creation of “packaging” for TV channels, advertising, video clips, design of concert venues, media resources, media art and much more. A motion designer is always squeezed into a narrow time frame production process, but has sufficient freedom of expression.
Computer animation On August 30, 1877, a device was patented - Emile Raynaud's praxinoscope. Animation is the process of giving the ability to move and/or the appearance of life to objects and dead bodies. A real revolution in the world of animation was made by WALT DISNEY (), an American director, artist and producer.
Computer animation Currently in existence various technologies animation creation: Classical (traditional) animation; Stop-frame (puppet) animation; Sprite animation; Morphing; Color animation; 3D animation; Motion Capture.
Computer animation Motion Capture is the first direction of animation that makes it possible to convey natural, realistic movements in real time. Sensors are attached to a living actor in those places that will be brought into line with control points computer model for input and digitization of movement. The actor's coordinates and orientation in space are transmitted to the graphics station, and the animation models come to life.
Professional education Animation Animator (from the Latin anima to animate) is an interesting and fascinating profession, relevant not only in animation, but also in cinema, advertising, production computer games, media environment. The course program is aimed at training specialists to work in any area of the modern animation industry - classic production of animated films, advertising, computer games, cinema. Fragments of the cartoon "Little Red Riding Hood".
Professional education Architectural visualization Architectural visualization three-dimensional graphic display object or group of objects in architecture, allowing the most accurate representation of external and internal characteristics future building. Archviz is actively used in demonstrating competitive projects, creating presentations in the field of design and construction, as well as advertising.
Computer game development Game graphics Game graphics is one of the youngest and most popular specialties in graphic art. The responsibilities of a gaming industry artist include creating game characters, locations, visual game development, design game levels and other amazing tasks.
Animation techniques are constantly evolving, and game developers and film studios are constantly looking for talented and creative individuals who can apply these techniques.
Here are the main types of animation that can be used to create digital characters for television shows, commercial applications, company logos, movies, videos or games.
- Traditional animation.
- 2D vector animation.
- 3D computer animation.
- Motion graphics.
- Stop motion.
Traditional animation
Have you ever seen images that appear as frames in quick succession, drawn on transparent sheets of paper with colored markers? This type of computer animation is called traditional. It is used for preliminary character sketches.
This process can be quite expensive and time-consuming, as animators have to create a series of different frames based on the 24 frames per second frame rate. This method used mainly on PCs, as well as tablets using special computer programs that allow you to create animation in the style of old Disney cartoons.
2D vector animation
The most commonly used animation style. Its frames are created on a relatively flat surface. In addition, vector animation has adopted some traditional animation techniques. In reality, it is the same as traditional animation, except that a process known as shading and shading is applied to the frames.
During this process, animators place thin, transparent sheets of celluloid onto paper on which animated characters are drawn, and then transfer them onto film. At the end, shots of different characters are superimposed on each other, and due to the high transparency of the film, this allows you to create a composition of different elements and characters.
3D computer animation
3D animation is completely different from other types of animation in computer graphics. Although they use the same principles of composition and movement, technical methods, used to solve various problems, vary significantly. In 3D animation, the animator does not need to be a graphic artist. It's more like playing with dolls than drawing.
These are also called computer-generated images ( CGI). They occur when computer animators create a stream of images that are brought together to form an animation. Combining dynamic and static images performed using computer graphics. Characters created in 3D, in digital format displayed on screen and then combined with the wireframe, allowing each model to be animated differently.
Animation is created by creating models in individual keyframes, and then the computer multiplies them, interpreting the animation by adding intermediate frames between keyframes.
In addition, a lot of time is spent working with curves representing different parts of the object at different periods of time. In 3D animation, all characters must be taken into account, even those that at a certain point in time are blocked by something and are not visible.
The main difference between these types of animation is that in traditional and 2D animation the artist works on individual frames, while in 3D animation there is always a continuous flow. If it stops, it is perceived as an error. Even when the character remains in place, there is always a continuous flow of frames that creates the illusion of reality.
Motion graphics
Have you ever wondered how promotional videos, animated logos, movie opening credits, and app advertisements are created? This is done using moving graphic texts and elements, or as I call it, motion graphics.
This is a process that uses "multiplication" of animated frames to create smooth movement between frames. Frame multiplication programs support scripts that automatically change the animation to create numerous effects.
3D compositions are created from flat elements moving relative to each other, which creates the illusion of volume. They may also be accompanied sound effects or music. Such objects are often used in multimedia projects.
Stop motion
Stop motion is a type of computer animation that is more similar to traditional animation. All you have to do is take a photo of the object, and when you move the object relatively short distance, you take another photo. This procedure is repeated repeatedly, and when the images are played one after another, the impression of movement is created.
There are many forms of stop motion animation, including Cut-Outs, Claymation and Puppets, and others. But the point is that to create animation, objects that need to move are photographed sequentially many times.
Translation of the article "Types of Animation in Computer Graphics"was prepared by the friendly project team.
Good bad
Municipal Autonomous educational institution for children
Vladimir
"City Interschool Training Center No. 2"
Methodological development of the lesson
on this topic " CreationGIF– animation by means graphic editors »
Developed by
labor training teacher
BICHURENKO Pavel Andreevich
Vladimir 2014
EXPLANATORY NOTE
This methodological development designed for 2 lessons. During the classes, knowledge on the topic “raster and vector images” acquired by students in previous lessons is tested. One lesson is allocated to complete a practical task. Form of conduct this lesson is a practical lesson.
The content of this development includes the study of types of animation, their advantages and disadvantages, and animation creation technology. During the classes, students gain skills in creating images and their animation using graphic editors, and also acquire the ability to convert vector images into raster ones. The knowledge gained can be applied when designing interactive presentations and web pages.
LESSON ON THE TOPIC: CREATIONGIF– ANIMATIONS USING GRAPHIC EDITORS
Target:To develop students' ability to create GIF animation.
Tasks:
Educational: To develop knowledge about methods of creating animation and types of animation. Give the concept of animation.
Educational: Upbringing information culture students, attentiveness, discipline, perseverance.
Developmental: Development of cognitive interests, creative abilities, independent work, and note-taking skills.
Personal:
Showing cognitive interest in the learning process;
Manifestation of an emotional and value-based attitude to the topic being studied.
Metasubject:
Cognitive:
Learn to apply the acquired knowledge in practice;
Learn to summarize the information received;
Evaluate your actions, evaluate the results;
Find answers to questions using your life experience and information received in class.
Regulatory:
Work according to the plan proposed by the teacher, when fulfilling practical tasks;
Learn to formulate a question, problem, difficulty faced by students.
Communicative:
Learn to express your point of view, formulate a statement;
Learn to present to others the progress of work and its results, listen to the opinions of others;
Use verbal means adequately to discuss and argue your position.
Subject:
Master the technology of creationGIF-animation;
Gain the ability to create animation;
Lesson type: learning new material
According to the form of organization: Workshop lesson.
Equipment:personal computers, projector, screen, lesson notes, technological maps, magazine, software (Inkscape, Paint. NET, UnFREEz).
Lesson plan:
Organizing time;
Updating knowledge;
Setting lesson goals;
Work on the topic of the lesson;
Practical work"Creating Animation";
Frontal survey;
During the classes:
Organizing time.
- Greeting students.
A short description of what will be learned in the lesson.
2. Updating knowledge.
What types of graphics are there? (raster, vector, fractal, animation, 3D).
What is the basis for the construction of raster and vector graphic images? (on pixels - rows and columns; on graphic primitives).
3. Setting lesson goals.
What is animation?
In what programs is it created?
Today in the lesson we will look at creating animation using graphic editors.
4. Work on the topic of the lesson.
Use the Animation demo to show various examples of animation and their creation.
Animation- this is the creation of the illusion of movement of objects on the monitor screen. Computer animation uses rapid frame changes on the monitor screen. The more frames that change in one second, the smoother the object moves.
In what computer programs have you encountered animation effects? (in computer presentations).
What types of animation did you use? (changing slides, placing objects on slides, animation effects when text appears).
Write down the definition in your notebookGIF-animations.
GIF animation –is a sequence of raster graphics stored in a single file in the format.gif. When creating a GIF animation, you can set the amount of delay for each frame; the smaller it is, the better the animation quality. You can set the number of times a sequence of frames will be repeated. A large number of frames leads to improved animation quality, but at the same time the size of the GIF file increases.
Another type of animation isflash-animation.
Flash animationis a sequence vector drawings. Its huge advantage is that you don’t need to draw every frame. It is enough to draw key frames and set the type of transition between them, and the editor will automatically build intermediate frames. If there are a lot of frames, then the animation is smooth, if there are few, then it’s fast. Therefore, you can set the number of frames appearing per second. The more there are, the better the animation quality. Another positive point The problem is that Flash animation files take up little space, which is why they are widely used on Web sites on the Internet.
5. Practical work “CreationGIF-animation using graphic editors" (Technological map).
First, I demonstrate the process of creating animation on the screen, then students sit down at their personal computers and complete the task. If problematic issues arise, we solve them individually.
6. Frontal survey.
What is a pixel? Pixel– the minimum area of the image for which the color is independently set.
What is the resolution of a raster image? ResolutionA raster image is determined by the number of horizontal and vertical pixels per unit length of the image.
What is color depth? The amount of information that is used to encode an image is calleddepth of color.
Name 3 color palettes in color rendering systems? (RGB, CMYK, HSB). Which color rendering is used most often and where? (RGB – for display on the monitor)
What is a raster image? Raster imagesare formed from dots of different colors that form rows and columns.
What's happened Vector graphics? Vector drawingsare formed from basic graphic objects, for each of which the coordinates of reference points, formulas for drawing the object, as well as the color, thickness and style of the line of its contour are specified.
Name the vector and raster images. (jpeg,gif, png, svg, wmfetc.)
Give examples of raster and vector graphics editors (Paint. NET, GIMP, Photoshop,Inkscape, CorelDrawand etc.).
Name three basic colors, with the help of which the image is formed? (red, green, blue)
Summing up the lesson. Reflection.
Grading.
Reflection questions:
What advantages and disadvantages of GIF animation did you learn in class?
What difficulties did you encounter when converting a vector image to a raster image?
Do you know an easier way to create animation? Which?
