Summary of a lesson in computer science on the topic "Creating GIF animation using graphic editors." Using simple animated graphic objects

Raster graphics A raster image is very sensitive to reduction and enlargement. When a raster image is reduced in size, several adjacent dots are converted into one, and therefore the fine details of the image are lost in clarity. A raster image is created using dots of 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 contours. 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, there are various technologies for creating animation: 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 is a three-dimensional graphic display of an object or group of objects in architecture, allowing the most accurate representation of the external and internal characteristics of the future structure. 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 game industry artist include creating game characters, locations, visual game development, game level design, and other amazing tasks.

Game Design In the computer games industry, a game designer is simultaneously a director, screenwriter and project coordinator. He not only invents virtual worlds, but also leads a group of artists and programmers to bring to life a game that millions of people will spend time with.

Many people believe that creating simple DIY animations at home requires special skills and a lot of time. In fact, simple computer programs and standard applications Windows operating system.

Do-it-yourself animation using standard Windows OS programs

Animation - sequential demonstration (show) graphic files, which creates the illusion of moving objects. To develop it you only need two standard programs, which are available on almost all computers with an operating system Windows system- Paint and Movie Maker. The first allows you to create and edit graphic drawings, the second allows you to create videos. The quality of the animation developed will depend on your drawing abilities.

1. Framing

Open Paint. Select a brush on the toolbar, select the desired color and draw any object on the working field. We save the drawing in a previously created folder under the name “Frame 1”. Then we draw the same object again, but slightly changing its position (for example, in the first frame the clock hand may be at “12”, and in the second at “1”). Save the image under the name “Frame 2”. Thus, we develop several frames. The greater their number, the smoother the object’s movement in animation will be.

2. Combining drawn frames into one video

Opening Movie program Maker. In the taskbar, select “Import images” and load frames. They will appear in the Collection panel. We transfer them one by one to the path located below. Click on “Display timeline”. If you do not change the program's standard display time, the animation object will move abruptly and slowly. To change this, click on the frames and move the bar that appears to the left. The frames will become narrower, which means their display time will decrease.

3. Voice over animation

You can add comments to the animation by recording them through a microphone, or add background music. In the first case, go to the “Service” tab and select “Comment Timeline”. Then click “Run”, voice the character or read the voice-over text. Upon completion, click “Stop”, save the comment, add it to the project, and then soundtrack in the bottom panel.

4. Saving animation in the desired format

Select the “File” menu item and sequentially click “Save movie file”, “Show additional options", "Other options". Then select the format of the future video file. We recommend saving the animation as popular format(for example, AVI, MPEG, PAL, etc.) so that it can be played on many players and easier to upload to YouTube.

Creating GIF animation

GIF animation (“gif”) consists of individual frames, for which a parameter is set such as the duration of display before the next picture appears. It only supports an 8-bit palette, which means that no more than 256 colors are displayed, which is an advantage over other formats. Most often, animated GIF files are used as navigation elements on websites and advertising banners.

The simplest program for creating GIFs animation is Easy GIF Animator Pro. Download it, open it, in the main window click “Create” new animation", after which the "Animation Wizard" will open. Next, add images (we select them on the Internet or draw them ourselves in Paint program). Click "Forward". Set the duration of each frame. If necessary, select to show the animation in a circle.

If images are selected different sizes, the program offers several options for positioning pictures relative to the largest image:

• in the center of the frame;
• left top corner frame;
• Enlarge smaller pictures to the size of the largest image.

Also GIF animation can be created using the UnFREEz program. To do this, it is enough to develop frames and “drag” them into the program window. Then you need to specify the delay time between frames and enable cyclicity. At the end, you need to click “Make Animated GIF”.

Programs for creating animation

A program with great functionality and clear interface. It allows you to create hand-drawn characters and bring them to life in 2D animation. Its capabilities:

• set of raster and vector tools for creating and processing images;
• the ability to draw with a pen or brush;
• creating shapes using a “broken line”;
• background import;
• working with layers,
• adding an audio file for export in swf format.

Synfig Studio

With this free program can be created simple animation in 2D format - similar to the one used in feature films. Its advantages:

• “tweening” function, which allows you to automatically develop intermediate frames;
• gradient overlay;
• support for vector elements;
• distortions;
• filters;
• tools for creating fractals.

ToonBoom Studio

The program has two operating modes: Drawing and Script. Contains necessary tools for developing vector drawings: brush, pencil, rectangle, broken line, ellipse. Functions: drawing using a tablet, vectorization raster images, overlaying animated scenes onto a real video, exporting data (for example, individual fragments from photographs).

This is a popular program for creating 3D animation. Its advantages:

• realistic imitation of objects (for example, fabrics and hair) and phenomena (collisions of objects, wind);
• a large set of functions for creating interactive games;
• a wide range of primitives (cylinders, spheres, cubes, rings), from which you can easily create your own models;
• support for non-linear editing.

Other popular programs to create animation with your own hands: Plastic animation paper, Creatoon, 3D Studio Max, Adobe Image Ready, MyPaint, Jasc Animation Shop.

Order animation creation, script writing or developing an idea for a video from KINESKO- We will do our job efficiently!

Contact Information:

>

Sounds and video images. Composition and editing. Using simple animated graphic objects.

Educational areas priority development: languages, arts; project activities in various subject areas.

Search for information. Computer encyclopedias and reference books; information in computer networks, non-computer sources of information. Computer and non-computer catalogs; search engines; formulation of requests.

Educational areas of priority development: social studies, natural sciences, languages.

Design and modeling. Blueprints. 2D and 3D graphics. Using standard graphic objects and designing graphic objects: selecting, combining, geometric transformations of fragments and components. Diagrams, plans, maps.

The simplest controllable computer models. Educational areas of priority development: drawing, material technologies, art, geography, natural sciences.

Mathematical tools, dynamic (electronic) tables.

Table as a modeling tool. Entering data into a ready-made table, changing data, switching to graphical representation. Enter mathematical formulas and calculation based on them, representation of formula dependence on a graph.

Educational areas of priority development: computer science and information Technology, natural sciences, social science (economics).

Organization of the information environment.

Creation and processing of complex information objects in the form of printed text, web pages, presentations using templates.

Organizing information in a shared environment information resources.

Email as a means of communication. Rules of correspondence, attachments to letters, sending and receiving messages. Saving for individual use information objects from computer networks (including the Internet) and links to them. Examples of organizing collective interaction: forum, teleconference, chat.

Educational areas of priority development: computer science and information technology, languages, social studies, natural sciences.

REQUIREMENTS FOR THE LEVEL OF GRADUATE TRAINING.

As a result of studying computer science and information and communication technologies, the student should know/understand:

Types of information processes; examples of sources and receivers of information;

Units for measuring the quantity and speed of information transfer; the principle of discrete (digital) representation of information;

Basic properties of the algorithm, types algorithmic constructions: following, branching, cycle; the concept of an auxiliary algorithm;

The software principle of computer operation;

Purpose and functions of information and communication technologies used; be able to

Perform basic operations on objects: strings of characters, numbers, lists, trees; check the properties of these objects; execute and build simple algorithms;

Operate information objects using GUI: open, name, save objects, archive and unarchive information, use menus and windows, help system; take anti-virus security measures;

Evaluate the numerical parameters of information objects and processes: the amount of memory required to store information; information transfer speed;

Create information objects, including:

Structure the text using page numbering, lists, links, tables of contents; check spelling; use tables and images in the text;

Create and use various shapes presentation of information: formulas, graphs, diagrams, tables (including dynamic, electronic, in particular in practical tasks), move from one presentation of data to another;

Create drawings, drawings, graphical representations real object, in particular, in the design process using the basic operations of graphic editors, educational systems computer-aided design; realize simple processing digital images;

Create records in the database;

Create presentations based on templates;

Search for information using search rules (building queries) in databases, computer networks, non-computer sources of information (reference books and dictionaries, catalogues, libraries) when completing assignments and projects in various academic disciplines;

Use a personal computer and its peripheral equipment (printer, scanner, modem, multimedia projector, digital camera, digital sensor); follow the requirements of safety, hygiene, ergonomics and resource conservation when working with information and communication technologies;

use acquired knowledge and skills in practical activities and Everyday life For:

Creation of the simplest models of objects and processes in the form of images and drawings, dynamic (electronic) tables, programs (including in the form of flowcharts);

Conducting computer experiments using ready-made models of objects and processes;

Creation of information objects, including for recording the results of educational work;

Organizations of individual information space, creating personal collections of information objects;

Transfer of information via telecommunication channels in educational and personal correspondence, use of information resources of society in compliance with relevant legal and ethical standards.

The school subject of computer science cannot include all the variety of information that actively makes up the content developing science computer science. At the same time, a school subject, fulfilling general educational functions, must reflect the most generally significant, fundamental concepts and information that reveal the essence of science, equip students with the knowledge, abilities, and skills necessary to study the foundations of other sciences at school, as well as prepare young people for the future. practical activities and life in the modern information society.

Among the principles of forming the content of general education, modern didactics highlights the principle of unity and opposition between the logic of science and the academic subject. B.T. Likhachev argued that “the idea of ​​unity and opposition between the logic of science and the logic of constructing an educational subject is due to the fact that science develops in contradictions.” She makes her way through the thickness of prejudices, makes leaps forward, marks time and even retreats. The pedagogical logic of the content of an academic subject takes into account the logic of the development of the main categories and concepts of a given science. At the same time, teachers and psychologists are guided by the need to take into account the age-related characteristics of schoolchildren’s mastery of material and organize it on the basis of both an ascent from the abstract to the concrete, and from the concrete to the abstract.”

In the last lesson you and Iintroduce youliswith the programOpenOfficeImpress, consideredinterface and basics of working with the programOpenOfficeImpress. Let's remember the main points of this topic.

1. Test.

1. What is the program for? Libre Office Impress ?

application program LibreOfficeImpress

2. What is a presentation?

3. Libre Office Impress needed For creation ….

Download:

Preview:

Topic: “Placing graphic objects on presentation slides. Applying animation effects to slide objects."

Goal: repeat techniques for saving and demonstrating a presentation document, options for adding slides to a presentation, teach how to add graphic objects to a slide and apply animation effects to them; develop imagination, communication skills, cognitive interest of students; to cultivate information culture and aesthetic perception of the world around us.

Equipment: computer software, media projector, presentation samples

During the classes.

I. Organizational beginning.

1. Greeting.

Hello guys and dear guests!

2. Work with duty officers.

II. Repetitive training work.

In the last lesson we met with Open program Office Impress, we looked at the interface and the basics of working with the program Open Office Impress. Let's remember the main points of this topic.

1. Test.

1. What is Libre Office Impress used for?

1. application program Libre Office Impress , designed for creating presentations *
2. application program for processing code tables
3. a computer device that manages its resources in the process of processing data in tabular form
4. system program that manages computer resources

2. What is a presentation?

a) means of visual presentation of information*

b) application program for processing spreadsheets

c) computer device that controls the slide show

d) text document containing a set of drawings, photographs, diagrams

3. Libre Office Impress needed to create...

1. tables to improve the efficiency of calculating formula expressions
2. text documents containing graphic objects
3. Internet pages to provide wide access to available information
4. presentations in order to increase the efficiency of perception and memorization of information *

4. An element of a presentation that has logical and meaningful value is called...

1. slide *
2. sheet
3. frame
4. drawing

5. A set of slides collected in one file form...

1. show
2. presentation *
3. personnel
4. drawings

Self-test (slide)

2. Frontal survey.

Name structural elements Impress program windows? (a window is shown on the slide and a student talks at the blackboard).

What are the principles used when creating a presentation?

List guidelines for creating an effective presentation.

3. Summing up the stage.

Well done, you and I remembered the material that will be useful for further work in the lesson.

III. Work on understanding and mastering new material.

1. Statement of the topic and purpose of the lesson.

You will learn the topic of the lesson if you complete the following task: solve anagrams (the order of letters in words has been changed).

What words are encrypted?

Aktsvva (insert)

KBobt (object)
enpyaztceira (presentation),
yantdmyosreats (demonstration),
manciaya (animation).

What topic do you think is encrypted on our board?

So, the topic of our lesson is “Placing graphic objects on presentation slides. Applying animation effects to slide objects.” We must learn how to add graphic objects to a slide, become familiar with the concept of animation, apply animation effects to objects, and apply the acquired knowledge in practice when developing our project.

2. presentation of new material.

go to the Layouts tab and select the most suitable one for this slide. For example, the first slide usually contains the title of the presentation, and for this it is advisable to choose the Text-Centered or Title Only layouts. Select Centered Text, click on the centered text that appears and enter your name:

To change the size, color or style of text, select it with the mouse and change the necessary parameters:

Finally, insert a picture into the title slide. This can be done in at least two ways:
- use the Insert->Image->From File menu and add a pre-prepared image.
- or take a picture from the built-in gallery (Gallery button on the panel below / Tools->Gallery menu). A collection of pictures will open, any of which can be inserted into the slide by clicking on it and dragging it to the desired location:

The Gallery is closed by pressing the corresponding button again.

Now we'll find outwhat is animation? On the slide, you see the movement of the Earth around the Sun. (slide shown)

What do you think is called animation? (moving picture)

This is not entirely true. We are interested in how this movement is achieved. Does anyone know how cartoons are made? (Draw with separate pictures).

This is right. And these pictures are changing quickly.

And so, animation is the creation of the illusion of movement of objects on the monitor screen, using a quick change of frames.

Now let's write the definition in our notebook. (slide)

Animation is a multimedia effect in which, during a rapid change of frames, the illusion of movement is created.

- You can insert already animated images into the presentation, and you can also apply animation to static pictures or text.

To make your presentation unique, you need to use settings that are not standard.

To do this, the Impress program has a section “Setting up animation”.

Here we can create an animation for each selected object on the slide,

Write it down “Setting Animation” - applies animation to each selected object on the slide (the definition is displayed on the slide).

Adding animation. Select the desired object. On the right, select effects and then add. Select the effect you like and click ok. Ready scheme animation links several types of animated effects that complement each other.

To add animation in this mode, we must first select an object and then apply one of four animation options:input, selection, output, movement paths,

Within each of these effects there are many implementations of them, for example, the input can be "Appear with Zoom" OR "Diamond", etc. the same goes for the rest of the effects.

We can apply several animation effects to each object.

For example, now on the slide you see how the “Cloud” object appears, increases in size, moves along an arc, and then dissolves. (slide)

All four types of animation were applied here: entry, selection, movement and exit.

Each animation has effects options. There we can change some features of the effects, timing and text animation.

3. Generalization.

So, we have looked at how you can insert objects onto a slide and apply animation to them. This material is for preparation homework you can find it in the reading room in the Computer Science folder. The file is named after the topic we are studying today.

IV. Practical work.

1. Task message.

There are cards on the tables with the task let's read it. (One student reads).

1. Launch OpenOffice.org Impress.

1. In the drawing panel, select a tool Rectangle using Area Fill Style select instrument Color , then select from the drop-down list Texture , select texture Space .

1. Select a rectangle on the slide and call right click mouse context menu, select the command in it Position, then select Behind object.
2. On the drawing panel, select the Circle tool and draw several planets of the solar system, the sun; usingArea style/fillcolor the planets and the sun.
3. To configure the animation, right-click on the image of one of the planets and context menu select team Effects . Next, select the command Add , on the Motion Paths tab, select Curve Object , then draw the planet's path.

1. In the Effect group select startAlong with the previous one, speed Low .

1. Repeat steps 5-6 to adjust the animation parameters of other planets.
2. To view the animation, use the function key F5 or command Demonstration menu Demonstration.
3. Wait for the slide to finish showing and click to return to the work area.
4. Save your work under a name Space .

2. Introductory briefing.

(show slide with finished work again).

3. Independent work of students.

4. Ongoing briefing.

5. Summary of practical work.

V. Lesson summary.

1. Frontal conversation.

Who can say what animation is?

- how to apply an animation effect to an object?

Each of you has learned how to create an animated presentation. Everyone made wonderful, colorful presentations.

Municipal Autonomous educational institution for children

Vladimir

"City Interschool Training Center No. 2"

Methodological development of the lesson

on this topic " CreationGIF– animation using graphic editors»

Developed by

labor training teacher

BICHURENKO Pavel Andreevich

Vladimir 2014

EXPLANATORY NOTE

This methodological development is 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. The form of this lesson is a practical lesson.

The content of this development includes the study of types of animation, their advantages and disadvantages, and technology for creating animation. 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: Fostering students’ information culture, attentiveness, discipline, and perseverance.

Developmental: Development of cognitive interests, creative abilities, independent work, 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 animations 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 quality animation. 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 of vector drawings. Its huge advantage is that you don’t need to draw every frame. 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 formats of vector and raster images. (jpeg,gif, png, svg, wmfetc.)

Give examples of raster and vector graphics editors (Paint. NET, GIMP, Photoshop,Inkscape, CorelDrawand etc.).

What are the three basic colors that create an image? (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 during the conversion? vector image to raster?

Do you know an easier way to create animation? Which?