Ministry of Education and Science of the Russian Federation

State educational institution

Higher professional education

Taganrog State Institute of Southern Federal University

Department of Computer-Aided Design Systems

EXPLANATORY NOTE

for course work

Discipline: Promising information Technology and environment.

EOR on the topic: “ Animation Tools 2 D and 3 D ».

Completed:

Teacher:

Taganrog

Coursework assignment:

Creation of electronic educational resource on the topic: “Animation Support Tools”, where it is necessary to demonstrate the principle of creating animation using several examples. And do the same short review some technologies for creating and supporting 2 D and 3 D animation.

Introduction

The relevance of the topic “Animation” today is beyond doubt. Almost a century ago, the first cartoons appeared, which delighted everyone. With the advent of modern technologies, animation is becoming one of the main elements of multimedia projects and presentations, and is increasingly present on Internet pages. Animation is also very widely used on television. For example, many television companies use screensavers created using computer animation. Creating video products also cannot be done without a computer, and increasingly professional video uses computer animation techniques.

This work discusses the technologies and principles of creating animation.

Animation

Internationally accepted professional definition "animation" (translated from Latin “anima” - soul, “animation” - revival, animation) most accurately reflects all the modern technical and artistic capabilities of animated cinema, because animation masters not only bring their characters to life, but put a piece of their soul into their creation .

Technologies for creating animation.

Currently, there are various technologies for creating animation:

Classical (traditional) animation is an alternating change of drawings, each of which is drawn separately. This is a very labor-intensive process, as animators have to create each frame separately.

Freeze-frame (puppet) animation. Objects placed in space are fixed by the frame, after which their position changes and is fixed again.

Sprite animation is implemented using a programming language.

Morphing – transformation of one object into another by generating a specified number of intermediate frames.

Color animation – with it, only the color, and not the position of the object, changes.

3D animation created using special programs (for example, 3D MAX). Pictures are obtained by visualizing a scene, and each scene is a set of objects, light sources, textures.

Motion capture (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 live actor in those places that will be aligned 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.

Software to create animations.

The software for creating animations creates ease of use for both beginners and experienced users. Such programs have various technical features that are very useful and easy to use for the animator. At any time the user can receive on-line help. Such software comes in two categories: two-dimensional (2D) and three-dimensional (3D) animation. There is currently a huge number and variety of programs for creating animations on the market. Many of them are widely available and have a trial mode during which the user can use the program for free. After this period has expired, if the user is satisfied with the program, he can purchase the full version for further use.

Features of 2D Animation Software (2 D ):

Most of these programs have a user-friendly interface and offer many features. For example, useful features such as a custom grid and auto-filling the gap. Automated picture-speech synchronization function saves time.

The template library is designed to organize, store and reuse all your assets and created animations and can contain all types of media files: movies, photo collections, artwork in formats such as SWF, AI, PDF, JPEG, PSD, TGA and GIF.

Special software elements make the process of creating animation as easy as “one, two, three.” Software tools allow the user to create motion, scaling, rotation and distortion effects. There is a function to automatically insert a key frame into the timeline.

Creating a scene takes seconds using drag-and-drop and location design tools. The shadow creation feature will add realism to the animation. Thanks to the program, the process of creating animation becomes easy, no matter how complex the idea itself is.

Creating or compiling high quality animations for the web, PDA, iPod, cell phones, HDTV, including SWF, AVI, QuickTime, DV streams and more.

to run 2D animation software:

For operating system Macintosh - Power Macintosh G5, G4 (minimum), or Intel(r) CoreTM, Mac OS X v10.4.7 processor, 512 MB RAM (or more), 120 MB available hard drive space, 24-bit color monitor , with 64 MB (recommended) or 8 MB (minimum) video memory, capable of resolutions up to 1024x768 pixels.

For PC systems - 800 MHz processor Intel Pentium III (minimum) with Windows Microsoft XP or 2000, (recommended) 512 MB RAM, 256 MB (or more), 120 MB available hard disk space, 24-bit color monitor, 32 MB video memory or more, 1024x768 pixel resolution capability.

Features of the three-dimensional animation (3D) software:

3D modulation tools, TrueType font support, import and change file formats, export 3DS files, built-in 3D browser, compound character editor, object modification, renderer for High Quality, creation of high-quality images, creation of three-dimensional scenes and animations, support for frames, relief transformations, creation of soft shadows, spotlights, fog effect, and much more, support for .BMP.GIF, and.JPG file formats, script language, etc.

Required system requirements to run 3D animation software:

Windows NT 4, Win 95, Win 98, Win ME, Win 2 K, or Win XP, OpenGL accelerated graphics card with full ICD support, (ala GeForce), at least 64 MB random access memory, 128 MB (recommended) or 256 MB if you are using Win XP, 300 MHz Pentium, 5 MB disk space.

Some of the most popular animation software are:

Ulead Animation, Ulead GIF Animator 5, CoffeeCup Animation Software, CoffeeCup GIF Animator, CoffeeCup Firestarter, Firestarter, Reallusion Animation Software, Effect3D Studio, 3D Max, Toonboom Studio, Macromedia Flash.

GIF animations The ability of this format to store several images in a file is used - animated gifs are a series of frames that quickly replace each other, due to which the animation effect is achieved. Frames, such as independent images or separate layers of a single image, can be created in any graphics package - in Adobe Photoshop, Jasc Paint Shop Pro, etc. But turning them into an animated gif file containing not only all the original images, but also data on the speed of their display on the screen, the palette used, sound, etc. (and in a highly compressed form), carried out using special programs. Today, thanks to the widespread use of the Animation GIF format in Web design, the number of such programs is very large.

Classification of programs for creating gifs- animations.

By and large, all programs for creating animated gifs can be divided into three groups:

1. First includes popular two-dimensional graphics packages, oriented primarily for working with two-dimensional raster graphics and at the same time allowing you to create files in the Animation GIF format using the corresponding utilities that complement them. The most popular of them are Adobe Photoshop with its ImageReady program, Jasc Paint Shop Pro, which includes the Animation Shop program, and Ulead PhotoImpact with the GIF Animator program. The main advantage of applications in this group is that the animation program is closely related to the corresponding graphics package and therefore it is possible fast switching between the animator program and the graphic editor, if necessary, adjust the image. This is convenient only if you understand all the intricacies of working with such packages (all of them, in Adobe features Photoshop, require serious training). For this reason, this option is more suitable for professionals, and beginners are better off choosing one of the programs of the second group.

2. In the second The group includes packages designed exclusively for creating animated gifs. As a rule, they have limited drawing capabilities, so the source images for animation are created in any of the graphics packages - these gif animators are not tied to a specific graphics application. Moreover, it is not at all necessary to choose complex packages for work, such as Adobe Photoshop, Jasc Paint Shop Pro and Ulead PhotoImpact. The ability to use a familiar graphics package can be considered the main advantage of gif animators from this group. In addition, independent programs for developing animated gifs have small distributions, so they can be purchased online without any problems. Finally, most of the apps in this group are very simple, so you can learn them quickly.

3. Third The group is formed by programs focused on creating 3D graphics (for example, 3D Studio Max) and at the same time allowing you to create animation in the Animation GIF format (usually through a special plugin, often included in the package). Graphic 3D programs are convenient because they do not require frame-by-frame rendering - usually, to create a gif file, it is enough to give the object some kind of cyclic action, for example, rotation around an axis, record the resulting animation as a series of frames and export it to an animated gif. However, there is one “but” - traditional programs for working with 3D graphics require deep professional knowledge and are difficult to use. But don't despair! If you need to create, for example, an animated 3D logo, then you can get by with the program Xara3D , which, although positioned for working with three-dimensional graphics, can also create animated gifs and is very easy to use.

Let us add that the group of software products focused exclusively on creating animated gifs includes packages that can also be used to create three-dimensional animated buttons and logos, although they will not be as impressive as when using the Xara3D program.

Let's look at some technologies and principles for creating animation.

Ulead GIF Animator

Ulead GIF Animator is included in the Ulead PhotoImpact graphics package, but can also be used standalone to create animated gifs based on images created in any graphics package. Thanks to its convenient and intuitive interface and rich capabilities, this program is considered today one of the most convenient and functional gif animators and significantly saves the web designer’s time, since it can recognize changes made in external editors (PhotoImpact, Photoshop or Paint Shop Pro), and automatically update the corresponding frames in the animation. The animated drawing can be exported to PhotoImpact (UFO) or Photoshop (PSD) format while maintaining the layering. In addition, you can select any layer of a drawing created in graphic editor PhotoImpact, Photoshop or Paint Shop Pro, as a separate object for GIF Animator.

The program provides a rich set of composition, editing, special effects, optimization and export tools. Dynamic animation of multi-layered drawings based on a full-color object-oriented model makes it easy to manipulate multiple objects in a drawing and quickly create multi-object animations, while dynamic updating of images created in external editors sets a new standard for integration. The Animation Wizard makes it easy to place images on the workspace and makes it possible to instantly evaluate the quality of the created animation based on its demonstration in the preview window. The Object Manager helps you keep track of all the objects in your drawing, and the tween functionality allows you to automate the animation process by generating intermediate positions of selected objects.

Ulead GIF Animator features include text animation and over 130 animation effects. The advanced image compression methods implemented in the program make it possible to significantly reduce the size of animation files, the automatic generation of HTML code significantly speeds up the process of inserting ready-made animations into a web page, and support for exporting to various formats, including Flash, AVI, MPEG and QuickTime, makes the program even more more attractive.

ImageReadyCS

The ImageReady CS program is part of the popular Photoshop CS package from Adobe and is designed for developing various Web elements, including animated gifs, which, taking into account full compatibility with Photoshop, makes it an excellent tool for web design aimed at professionals. Photoshop and ImageReady work closely together and complement each other perfectly, and the edited file can be easily moved between programs during editing and automatically saved. You can export created animated GIF files to Macromedia Flash (SWF) format.

Animated gifs can be created based on multi-layered Adobe files Photoshop and Adobe Illustrator, as well as from individual images saved in various graphic formats. When creating animation based on a series of images for editing frames, you do not necessarily need to download each image separately - you can use the ability to import from the folder in which individual frames of the future animation were previously saved. It is possible to automatically generate the required number of intermediate frames, which significantly speeds up the production of smooth animations, since there is no need to manually create each frame. In the program window, you can immediately view the result and, if necessary, make the required changes.

rice. 1

ImageReady has a large gallery of filters similar to many famous Photoshop filters. Therefore, to add a particular effect to a frame, you don’t always have to switch to Photoshop - many actions are also available from the ImageReady environment.

To switch from Photoshop to ImageReady and back, left-click on the last line of the vertical toolbar - Edit to Image Ready(Open in Image Ready), or simply hold down the key combination at the same time Shift+Ctrl+M :

The Animation panel can be called with the command Window > Animation(Window > Animation).

GIF animation plays a series of image frames in a user-defined order. You can create various animation effects for a Web page: make text or graphics move, fade in or out, or change in other ways.

To prepare animation in the ImageReady program, you need to create many image frames using the Animation palette, shown in Fig. 3. You can then edit individual layers of each frame using the Layers palette (Fig. 4, and each frame will have its own unique set of settings in the Layers palette. Finally, you need to save the sequence of frames as a single GIF file - now the animation is ready to be viewed interactively.

rice. 3

rice. 4

Layer effects

ImageReady offers the same set of layer effects as Photoshop. But Photoshop adjusts the layer properties using the dialog box Layer Style(Layer Style), a ImageReady - using the contextual layer options palette.

Effects in ImageReady have the same characteristics as in Photoshop: their names are displayed under the name of the layer to which they are applied; effects move with the layer; The palette elements have right-facing arrows that can be used to open or close the list of effects. Each effect has its own icon that allows you to show or hide that effect.

Creating an animation effect for any image.

1. Open or create an image that contains a background layer and a transparent layer with a drawing of an object.

2. Open the palette Animation(Animation).

3. Select the layer in the Layers palette.

4. Using a tool Move(Move) Drag the image element to the edge of the main window.

5. At the bottom of the palette Animation click the button Duplicate current frame(Duplicate the current frame). The copied frame will be highlighted.

6. The layer selected in step 3 should remain selected.

7. Using a tool Move(V key) Drag the layer element to the other side of the main window. Leave this layer selected!

8. On the palette Animation click the button Tween(Intermediate frames) to build intermediate frames between already selected ones.

9. In the dialog box Tween(Intermediate frames) set the Layers switch to one of the following positions:

· All Layers(All Layers) to copy points from all layers to new frames.

· Selected Layer(Selected Layer) to copy points from only the selected layer to new frames. All other layers will be hidden.

Then install in group Parameters(Parameters) checkboxes of those parameters that will be changed in intermediate frames: Position(Location), Opacity(Opacity) and/or Effects(Effects).

From the popup menu Tween with(Tweak Frame Range) select mode Previous Frame(Adding intermediate frames between the selected frame and the previous one).

Selecting animation playback options

From the pop-up menu located in the lower left corner of the palette Animation(Animation), select a playback mode that specifies how the animation will be played: Once(One time) or Forever(Continuously in a loop). Or enable the option Other(Else) to specify a specific number of times the animation will play, and then click OK.

Animation Preview

1. In the main window, select the tab Original(Original image) or Optimized(Optimized image).

2. If the first frame is not selected, then at the bottom of the palette Animation(Animation) click on the button Select first frame(Select first frame).

rice. 5. Duplicating an animation frame

3. Click the button Play(Play) - see Figure 5. The animation will play a little slower than it should. (Previewing in ImageReady is slower than in the browser.)

4. Click the button Stop(Stop), which looks like a square, to pause playback.

5. Save the file, then click the button Default Browser(Default Browser Preview) located in the toolbar. Click the button Back(Back) to return to ImageReady when viewing is finished.

Animation of objects swaying

Next we'll look at how to make a layer element sway from side to side. This type of animation affects points on the layer and is copied to all existing frames. It is necessary to create a duplicate layer for each stage of movement.

Let's create an animation in which an object will move in a certain direction and back.

1. Open the image and palette Animation(Animation).

2. At the bottom of the palette Animation click the button Duplicate current frame(Duplicate the current frame). The duplicate frame will now be highlighted.

3. On the palette Animation Click on the Tween button, and then select the radio button Layers(Layers) to position All Layers(All layer), enter the number of frames in the field Frames to Add(Add Frames) to create an animation and click the button OK.

4. Click on the frame where you want the wobble to start.

5. On the palette Layers(Layers) create a duplicate of the layer whose image will move.

6. Edit the duplicate layer (for example, adjust the color). Hide the original layer to see your changes. Changes will be reflected in the selected frame on the palette Animation.

7. Select the next frame. Make the original receiver layer visible and hide its edited duplicate.

8. Click on the next frame. Now show the edited duplicate layer and hide the original layer.

So alternately show/hide layers for the remaining frames of the animation.

Opening an animation in GIF format

The only visible advantage of using the GIF format is the ability to apply or edit file optimization settings.

1. Run the command File > Open(File > Open) or press the keyboard shortcut Ctrl+O.

2. Find the file name with the .gif extension and click on it.

3. Click the button Open(Open). The frames of the animation sequence will be saved. However, the Layers palette will now display a sequence of layers: one layer for each frame. Individual elements of a layer can no longer be edited independently of other frames!

Animation optimization

1. In the palette menu Optimize(Optimization) use the command Optimize Animation(Optimize animation).

2. In the parameter group Optimize By(Optimize with) checkbox Bounding Box(Overall Frame) to preserve the original frame and only those areas that change from one frame to the next. As a result, the file size will be reduced, but at the same time, not all editor programs that accept the GIF format will be able to work with this file.

In addition to or instead of these steps, select the checkbox Redundant Pixel Removal(Delete extra points) to remove those points of the object or background that do not change, that is, they are re-displayed when loading each new frame. This will also help reduce the file size.

None of these options will change the actual appearance of the animation; all changes happen behind the scenes.

Saving animation.

The created animation can be saved in GIF format or as a QuickTime movie. Other file formats, such as JPEG or PNG, will only save the first frame of the image, not allowing you to play the entire animation. There are several ways to save optimized animations for use on a Web page. In ImageReady, just select the command File > Save Optimized(File > Save Optimized) to save the animation with the settings you selected when you previously saved it. If this is not the first save, then the dialog box Save(Save) does not appear and the file name and its parameters remain the same as those assigned previously.

Team selection File > Save Optimized As(File > Save as Optimized) allows you to change the file name and choose a different storage location. It is also possible to select a modified parameter Save As Type(File type) from the set of available values:

· HTML and Images(HTML and pictures) - generates an HTML file and saves each image as a separate file;

· Images Only(Drawings only) - saves only the image in a separate file;

· HTML Only(HTML Only) - Saves only the HTML file without image files.

In addition, ImageReady allows you to create an HTML file with the Copy HTML command, which copies the HTML code to the clipboard, which can then be pasted into a Web page in any HTML editor. If the source image changes, to update the HTML file, run the Update HTML command, specifying the name of the file to be updated.

To save the animation in QuickTime format, select the command File > Export Original ( File > Export initial) and select the value from the drop-down list QuickTime Movie(It will be available if QuickTime is installed on your computer.) By specifying the file name and its location, clicking on the button Save(Save) creates a file of the selected type.

How to make animated rain.

Step 1. Open the image.

Step 2. Create a new layer and fill it with gray. And apply a filter to it Filter - Noise - Add noise and set the following settings.

Then apply the filter Filter-Blur-Motion Blur.

Set the layer opacity to 30%

Step 3. Create a new layer again and fill it with gray and apply the same filters as in step two. But the filter Motion Blur We are already doing it with other settings.

and set the layer opacity to 30%

Step 4 . Again we repeat everything we did in step 2. Filter Motion Blur do it with these settings and set the layer transparency to 30%.

Step5 . Let's go to Image Reader This is done using the keyboard shortcut ( Shift+Ctrl+M)

Step 6 . We make the frame length 0.1sec.

Step7 . We make two duplicates of our frame.

Step 8 . Go to the first frame and make sure that only the first layer with the drops we made is visible.

Step 9 . Go to the second frame and make sure that only the second layer with the drops we made is visible.

Step 10 . Go to the third frame and make sure that only the third layer with the drops we made is visible.

Our animation is ready!

Xara3D 5.0

Unlike most programs for working with 3D graphics, Xara3D has a simple and user-friendly interface and a minimal number of settings, making it easy and quick for even a beginner to understand. And although the program is intended primarily for creating voluminous text and buttons, it is also perfect for producing animations in Animated GIF and AVI formats. Therefore, it is successfully used by web designers mainly to create professional three-dimensional text logos.

The program's arsenal includes a large set of fonts and textures for the design of created objects. It provides full control over the created text, including its position, alignment, leading, kerning, etc., effective and flexible control of color and structure of the three-dimensional image. In addition, images can be made matte or shiny, a soft framing shadow can be applied to them, etc. The choice of animation effects is quite wide: objects can rotate, gradually appear, pulsate, step on, swing or disappear. You can also import animation features from one file and apply them to another. Simple remedies Animation controls allow you to set any time limits, for example, add pauses of different durations, or set your own animation features for each object.

The program supports importing two-dimensional graphic files in WMF, EMF, GIF and PNG formats, and the animation results can be saved not only in the Animation GIF format, but also in AVI or SWF formats if desired.

Macromedia Flash

To be more precise, Adobe Flash is an environment for creating applications for the Flash Platform, along with it there are other tools (environments):

Adobe Flex Builder;

Flash Development Tool (FDT), etc.

Flash applications are created using ActionScript - programming language. If the source does not contain language instructions, then during compilation, in any case, some basic ActionScript code is generated (this can be seen by viewing the Flash bytecode). Next, accordingly, there is a base clip on the stage, inherited from the MovieClip class, which begins to play. The Adobe Flash environment is aimed more at designers and animators, although it is possible to write full-fledged code. Flex Builder, FDT, are programming oriented, and there are no special interface tools for animation, visualization.

Flash is also used as the name of the format (flash films, flash movies) (the full name is Flash Movie).

When creating a product, you can use sound and graphic files, you can create interactive interfaces and full-fledged web applications using PHP and XML.

Flash files have a ".swf" extension and are viewed using Flash Player, which can be installed as a browser plugin. SWF files can also be viewed using the Gnash player. Distributed free of charge through the Adobe website. Source files with the “.fla” extension are created in the Adobe Flash development environment and then compiled into understandable Flash Player format- ".swf".

Flash is based on vector morphing, that is, the smooth “flowing” of one key frame into another. This allows you to create fairly complex animated scenes by specifying only a few key frames for each character.

Flash uses the ActionScript programming language, which is based on ECMAScript.

Vector morphing technology was used long before Flash. In 1986, the program Fantavision was released, which used this technology. In 1991, Another World was released using this technology, and Flashback two years later.

The history of Flash began in 1995, when, after purchasing the animation program FutureSplash Animator, Macromedia released a product called Flash.

Flash began its professional career with the release of a regular two-dimensional animation software product. Time passed, everything developed at a rapid pace. Flash has not escaped development either; it has become more modern and advanced.

Today there are so-called 3D engines, for example:

PaperVision3D, but their speed and quality of work are quite low, mainly due to the fact that at the moment the flash player does not have the ability to use directX or openGL tools, so full emulation of all 3D algorithms is performed. No hardware acceleration support, multi-core processors- which also reduces the speed of the engine. However, designers often create their own 3D engine tailored to the specifics of a specific project (game).

Today, most browsers have a specially built-in Macromedia Flash Player plugin that allows them to play Flash files. Flash has become a dominant technology on the Internet and has become the standard for displaying vector animation on websites. Without Adobe Flash Player browsers will incorrectly display web pages and interactive web elements built into them, developed using Flash technology.

Macromedia Flash interface.

Fig.1

When opening a window Flash applications The following interface elements appear on the screen:

· Stage (desktop) - an area for composing individual frames, creating a composition from graphic elements or imported bitmaps and viewing the animation results;

· Timeline (time axis) - a window containing a list of individual layers with graphic objects located on them and their distribution in time (each frame of the film is marked on the time axis);

· Symbols (symbols) - the main elements of the film, as a rule, used many times in it;

· Library - a window with a list of symbols and imported files, allowing you to organize and sort them;

· Floating, dockable panels - windows with a set of tabs used to configure the application and change the parameters of movie elements;

· Movie Explorer (movie browser) - an additionally called window for viewing the structure of the movie.

Stop motion animation

So, let's take a look at the window again Flash programs. When any video is open in it, the so-called timeline is located at the top of the window. On its left side are the names of the layers, which we will talk about later in this chapter, and their attributes. And on the right side the numbered frames of the video are indicated (Fig. 4). Thanks to the numbering of frames, this window is called a time scale - after all, in the video the frames follow one after another.

There is a red rectangle on the timeline that always highlights the current frame.

Conclusion:

In the world of modern technology, animation is becoming one of the main elements of multimedia projects and presentations, and is increasingly present on Internet pages.

This work discusses the most common means of supporting and creating animation, and also describes the stages of creating gif files, flash videos and animated three-dimensional text, using various effects.

Xara3D - a program for working with three-dimensional text has a user-friendly interface and a minimum number of settings, and is considered simple and convenient.

Thanks to its convenient and intuitive interface and rich capabilities, Ulead GIF Animator is considered today one of the most convenient and functional programs for creating GIF files and significantly saves a web designer’s time

is the leading tool for creating multimedia content. This software tool integrate text, graphics, audio and video into an interactive multimedia environment that delivers brilliant results when creating interactive presentations, marketing materials, e-learning resources and graphical user interfaces.

Macromedia Flash Professional bringing together more than a million developers and users around the world using a wide variety of computing devices. Macromedia Flash technology is considered the most common software platform.

Bibliography:

1. Computer Press 3 '2005;

2. http://computer.damotvet.ru/software/887515.htm;

3. Illustrated tutorial on animation for the Internet; 2007 Dynamite Software Group.

Introduction........................................................ ........................................................ ...............................3

Animation................................................. ........................................................ ............................4

Animation creation technologies................................................................... ............................................4

Animation software.................................................................... ..............4

Features of 2D Animation Software (2D)..................................5

Features of software for creating three-dimensional animation (3D).....5

GIF animation................................................... ........................................................ ........................6

Classification of programs for creating gif animations.................................................... .........6

Animation is the Western name for animation. This word comes from the English animation, which translates as “revival, animation.”

Previously, animation was created manually - with pencil and ink on tracing paper. Then they began to use computers. In the beginning, large computers were used, they were called mainframes. Then cartoon creators switched to powerful graphics stations.

And in our time, in order to create a simple animated film, the power of an ordinary personal computer is enough.

Animation(from the French animation - revival, animation) - a type of cinematography in which a film is created by frame-by-frame shooting of drawings or puppet scenes. The animator, like an actor, plays his role, infusing life into a motionless character, a soul, endowing him with character and habits, experiencing with him every split second of life in the scene.

Animation has its own history; E. Reynaud is considered the creator of the technology for making cartoons frame by frame. But animation became most widespread during the time of Walt Disney. The principles of animation that he used became so effective that they are still considered the basis for the animator. There are several types of animation: Traditional, Stop-frame, Computer. Computer and Traditional are essentially the same thing, only Traditional is drawn by hand on paper, and Computer is drawn on a tablet in some program. Animation is a complex process that takes a lot of time. Traditional animation is considered the most labor-intensive to perform, so it is now used very rarely. In computer animation everything is much simpler.

Computer animation - a type of animation created using a computer. Unlike the more general concept of "CGI graphics", which refers to both still and moving images, computer animation refers only to moving ones. Today it is widely used both in the field of entertainment and in the industrial, scientific and business fields. Being a derivative of computer graphics, animation inherits the same methods of creating images: vector graphics, raster graphics, fractal graphics, three-dimensional graphics (3D)

Computer animation can also be divided into types: Flash animation, classic frame-by-frame, 3D animation.

Flash animation

Flash animation is based on the principle of keyframe animation . The placement of key frames is done by the animator. Intermediate frames are generated by a special program. This method is closest to traditional hand-drawn animation, only the role of the phaser is taken on by a computer rather than a person.

The process of creating cartoons consists of several stages:

The first stage is the idea and script;

The second is the storyboard;

Third - Creating an animatic (a rough layout of the cartoon. Already on the basis of the animatic, one can judge the action taking place. The animatic already contains animation, but the movements of the characters can be changed at the next stage),

The fourth and longest is Animation;

Fifth - finishing outline;

The sixth is editing and assembling the film.

Of the three main recreational functions (therapeutic, health-improving and educational), tourist animation is designed to directly perform two functions - sports and recreational and educational. Indirectly, under appropriate conditions, the therapeutic function is also performed.

In the practice of animation, for the targeted design of animation programs, the following functions of tourist animation can be distinguished:

Adaptation, allowing you to move from an everyday environment to a free, leisure environment;

Compensatory, freeing a person from the physical and mental fatigue of everyday life;

Stabilizing, creating positive emotions and stimulating mental stability;

Wellness, aimed at restoring and developing a person’s physical strength, weakened in everyday work life;

Informational, allowing you to obtain new information about the country, region, people, etc.;

Educational, which allows you to acquire and consolidate new knowledge about the world around you as a result of vivid impressions;

Improving, bringing intellectual and physical improvement;

Such a variety of functions of tourist animation has led to a variety of types of animation activities, as well as a wide variety of animation programs and events.

From the point of view of a systematic approach, tourist animation is the satisfaction of specific tourist needs in communication, movement, culture, creativity, a pleasant pastime, and entertainment.

The range of these needs is very wide, since people going on vacation put completely different meanings into this concept: for some, vacation is traveling, for others, reading books, walking in the forest, fishing, etc. According to the demand and motivation for traveling in In the practice of tourist services, the following types of animation are developed that satisfy the various needs of tourists (vacationers):

Animation in motion - satisfies the modern person’s need for movement, combined with pleasure and pleasant experiences;

Animation through experience - satisfies the need for a feeling of new, unknown, unexpected inclusion, discoveries, as well as overcoming difficulties;

Animation through communication - satisfies the need to communicate with new, interesting people, to discover the inner world of people and to know oneself through communication;

Animation through calming - satisfies people’s need for psychological relief from everyday fatigue through calmness, solitude, contact with nature, as well as the need for peace and “idle laziness”;

Cultural animation - satisfies the need of people for the spiritual development of the individual through familiarization with cultural and historical monuments and modern examples of the culture of the country, region, people, nation;

Creative animation - satisfies a person’s need for creativity, demonstrating one’s creative abilities and establishing contacts with like-minded people through joint creativity.

Real animation programs are most often complex in nature, and the listed types of animation are the constituent elements of these programs.

Animation programs, along with purely entertainment events, include a variety of sports games, exercises and competitions. This combination makes these programs more intense, interesting and useful for strengthening and restoring health, therefore, in the interrelation of tourist animation and sports, the greatest restorative and health-improving effect is most often achieved.

Let us highlight the types of animation relevant to the topic of work: recreational, tourist, hotel.

Recreational animation is a type of leisure activity aimed at restoring a person’s spiritual and physical strength. Leisure programs implemented for recreational purposes can be carried out by both tourism and resort enterprises with tourists, vacationers and guests, and leisure enterprises with local residents. This gives us the right to assert that the concept of recreational animation is broader than the concept of hotel and tourist animation. Figure 2 shows the structure of tourist animation.

Figure 2 - Types of recreational animation

Tourist animation is a tourist service, in the provision of which the tourist is involved in active action.

Hotel animation is the narrowest concept of the three considered, since it only involves the organization of leisure time at tourist enterprises: tourist complexes, hotels, inns, tourist centers, etc.

There are also additional animation services - animation programs designed to “support” the main tourist services specified in the tour package, during technological breaks caused by travel, travel delays, in case of bad weather, or lack of conditions for the intended pastime.

Table 1 presents tourist animation with an emphasis on recreational recreation.

Table 1 - Typology of animation activities

Accordingly, the targets of each type of animation will be tourism and tourist competitions, sports competitions and sports, entertainment events, educational and excursion activities.

“Here, however, we look back, but we do not stand still. We strive forward, open new paths, take on new things, because we are curious... and curiosity drives us along new roads. Only forward." (Walt Disney)

About animation technology

Sometimes, misunderstandings arise between me and the customer when agreeing on the technical features of future animation works. The article will help you better understand animation technology issues.

To begin with, in order not to get confused, I would like to highlight 3 main criteria by which animation can be judged: types of animation, animation methods and animation styles. For many, this is the same thing, but it is not! Types of animation are the form or form in which the cartoon is shown (hand-drawn, puppet, etc.). Animation methods are the technical features with which animation is created (frame-by-frame animation, programmable animation, etc.). Lastly, animation style is an artistic technique that is used in animation (realism, anime, etc.). In this article I will look at the concept of “types of animation” in a more detailed form, and subsequently add “methods” and “styles” to this. All this together is animation technology.

Hand-drawn classic animation.

One of the most interesting and widespread types of animation is the so-called classical animation. Classic animation is done by drawing each individual frame on transparent film (or tracing paper). These frames are then collected into special program installation This animation is very lively, smooth, spatial, but expensive))). An example of such animation is the cartoons of the Disney and Soyuzmultfilm studios.

Still from the Disney cartoon "Snow White and the Seven Dwarfs"

Translation animation.

The oldest form of animation. The essence of this type of animation is that an object drawn on cardboard or paper is cut into separate pieces and these pieces are moved (shifted) from frame to frame. Hence the name - retranslation! Many people consider such animation primitive, but in the right hands such cartoons can turn out to be very interesting. One of the most striking examples of transfer animation can be safely called the cartoon “Hedgehog in the Fog” directed by Yuri Norshtein. "Hedgehog in the Fog" was recognized by the world community as the BEST CARTOON FILM OF ALL TIME!!! So much for the translation... So much for it being primitive...

Still from the cartoon "Hedgehog in the Fog" directed by Yuri Norshtein

Painting on glass.

But here the animation certainly cannot be called primitive! The essence of this animation is painting with oil paints on glass. Each frame is a painting that is modified by the artist’s strokes. A striking example of such animation is the work of Alexander Petrov “The Old Man and the Sea”, which was awarded an Oscar.

A still from the animated film "The Old Man and the Sea" directed by Alexander Petrov.

Puppet animation.

The same old type of animation. All puppets and scenery in stop motion animation are made by hand, which makes it as expensive as classic animation. Nevertheless, this type of animation is very popular even today (despite the spread of computer 3D animation). To be honest, I didn’t like puppet animation as a child))) But my epiphany came when I saw Tom Burton’s cartoon “The Nightmare Before Christmas.”

A still from the cartoon "The Nightmare Before Christmas" directed by Tom Burton.

Plasticine animation

The name plasticine animation speaks for itself. I will only add that plasticine animation came out of puppet animation and became popular in Russia after the appearance of the cartoons “Last Year’s Snow Was Falling” directed by Alexander Tatarsky.

A still from the cartoon "Last Year's Snow Was Falling" directed by A. Tatarsky.

Computer 2D animation.

Whether we like it or not, old types of animation are being replaced by new ones. For some reason, computer 2D animation is usually called Flash animation and this is not entirely true. Flash is only one program. You can name other powerful computer programs for creating 2D animation, for example: After Effect, Anime Studi Pro, Toon Boom Studio and many more paid and free programs. Currently, almost all studios are engaged in 2D computer animation. This is exactly the kind of animation we see today in TV series, on the Internet, in casual computer games etc.

Still from the animated series "The Simpsons"

3D animation.

3D animation is a type of animation created on the basis of 3D computer programs. This is the youngest and most promising type of animation. With development computer technology It became possible not only to draw graphics and animation in a two-dimensional plane (2D animation), but also to animate three-dimensional forms. This technology is very complex, but if we tell you briefly, the production process looks something like this. First, concept art is drawn (in any way), and the three-dimensional geometry of the model is created from these drawings. Then textures that are put on the shape of a character or object. Next, they create the bones of the object and attach them to the form so that the form can move. Animators receive a prepared model for movement and begin to animate it. The better prepared the model, the more natural and flexible its movements will be. After creating the animation, the scene is visualized (translated from 3D to a regular picture). Vivid examples of such animation are the cartoons of the Pixar studio.

A still from the Pixar film "Ratatouille".

Combined animation.

Combined animation is the combination of any type of animation with a video film. Early examples of such animation could be: the film “Who Framed Roger Rabbit”, the cartoon “The Adventure of Captain Vrungel”, etc. With the development of 3D technology and computer special effects, this type of animation is found in feature films more and more often. The main feature of modern combined animation is its complete realism.

Still from the film "Jurassic World" directed by Steven Spielberg

Other types of animation.

In addition to the listed types of animation, there are others, for example: sand animation, laser animation, photo animation, needle animation, etc. However, these types are considered less popular and in this article I only allowed myself to mention them.

Types of animation in the Cardboard Tower studio.

Our animation studio specializes in the production of 2D computer animation. Thanks to the flexible capabilities of computer programs, we can create both cross-cut and classic animation at the same time. We are also capable of creating 3D animation. As an example, you can look at 3 videos from our portfolio:

1. 2D computer animation in a classical manner.

There is a saying: “Good design is immediately visible, but great design is invisible.” The same principle applies to animation for mobile applications - really good animation makes the application useful to the user and attracts attention, but is practically invisible. The main task of any animation is to explain to the user the logic of the application. In order to optimize the use of animation, the designer must understand what place it occupies in the functionality of the application. In this case, you need to take into account the type of animation itself in order to use it where it is most appropriate.

VISUAL FEEDBACK

Visual feedback is extremely important for any user interface. In the physical world, objects react when people interact with them. Therefore, people subconsciously expect that in mobile applications there will be something similar. Visual, audio and tactile feedback gives the user a sense of control while using the application, with visual feedback indicating that the application is working as expected. If a button enlarges when pressed or an image moves in a given direction, then it becomes clear to the user that the application is responding to his commands. In the example below, the user checks the box to make a selection, and the data box shrinks in size and changes color to green.

Toward the visual type feedback This also applies to the technique of moving the image horizontally. The user pushes the picture to the edge of the display, the image disappears, and a new one appears in its place.

"CHANGE" FUNCTION

This type of animation shows how a UI element changes when you interact with it. This technique can be used if you need to illustrate how the function of an element changes. Orientation animation is great for buttons, icons, and other small design elements.

In the example below you can see that the icon of the quick action button changes its appearance moving from the hamburger menu to the "X" button to show the user that the button's function has changed.

And in the second example, the icon changes along with the content.

ORIENTATION IN SPACE

Most applications have complex, complex structures, and the designer's job is to make navigation as simple as possible. Animation can be very useful in solving problems like this. If the animation shows where the control is hidden, the user will easily find it next time. The example below shows a menu in a navigation bar. When you click on the icon, it turns over and the user gains access to sections of the application.

In the following example, animation allows us to demonstrate additional options that appear at the bottom of the screen, thereby increasing the user's possible choice of action.

HIERARCHY OF ELEMENTS AND THEIR INTERACTION

Animation is ideal for describing different parts of an interface and showing how they interact with each other. Each animated interface element has its own purpose and place. For example, if a button activates a pop-up menu, it would be better if there were buttons there rather than just a slider. This will help the user understand that the two elements (button and popup menu) are related.

Any animation should highlight the connections between elements. Visual hierarchy and interaction of elements are important when creating intuitive interfaces. In the example below, the menu appears when you click on the icon and the user immediately understands that this is the same element, only enlarged.

In the second example, the size of the information card increases when the user clicks on it. Everything is the same: it is immediately clear that this is the same element and the difference is only in scale.

VISUAL CLUE

Animation can guide the user on how to interact with design elements. It is especially important to provide a visual hint when the application is complex and it is difficult for the user to understand the logic of interaction of elements. The illustration below demonstrates how this technique can be applied. The user opens a blog and cards with articles appear at the bottom of the screen. To find the desired article, the user needs to move the cards horizontally to familiarize themselves with the presented content.

The same approach can be seen in the second example, only here the animation is used to provide a hint when choosing a social network icon.

STATE OF THE SYSTEM

There are always a number of processes that occur “under the hood” of the application, some calculations take place, data is downloaded from the server, and so on. The designer's task is to let the user know that the application is working and demonstrate the progress of the process. If the user sees that the application is working, he feels that he is in control of the process and everything is going as it should. Ideally, any process should be accompanied by a separate animation. For example, if an audio recording is playing, the application may show a moving audio track. In real time, an animated sound wave can indicate how loud the recording is.

One of the most common examples of this type of animation is the Pull To Refresh technique, which is used when loading elements at the user's request.

FUN ANIMATION

This type of animation can be used in different ways. Often such animation is used in a stupid way and can seriously complicate application development. But truly unique animations can be very attractive to the user and can set the app apart from its competitors. Animation “for fun” is one of the secret elements of a developer who would like users to love his application. Also, interesting animation can help create a recognizable brand.

In the example below, the moving circles look very unusual and attract the user's attention. The ability to move these circles around the screen captivates the user and adds a gaming element to working with the application. It's simple and fun.

Even a boring Pull To Refresh can be made fun, like in this example with a picture of a pot of boiling water.

However, a designer who wants to inject a little humor and fun into the design should take into account that the animation should not hide important features of the application from the user. You should also take care of the time of interaction with the application - funny features should not distract the user’s attention too much.

BASIC DESIGN PRINCIPLES

The main types of animation were discussed above. But to start creating truly impressive animations, you need to remember the nine principles of animation that were formulated by the great Walt Disney. These principles can be effectively used in user interface design.

MATERIAL

In nature, any object has a number of characteristics. The same applies to design elements. What are they? Light or heavy, rigid or flexible, flat or voluminous? The designer must give the user an idea of ​​how the interface element will react when working with the application.

TRAJECTORY OF MOVEMENT

In animation, it is important to decide on the type of movement. General principles state that inanimate objects have a straight path of motion, while living things move along a more flexible path. Having decided how the elements will move, you need to stick to the chosen strategy.

TIMERING

The timing of an element's movement is a very important factor when creating animation. In the real world, objects don't move according to the rules of linear motion; they take time to speed up or slow down. To make UI elements move more naturally, you can use uneven acceleration.

FOCUS ON ELEMENT

You can draw the user's attention to a specific part of the screen. For example, a flashing warning icon can alert the user that there is some important data. This type of animation is used in complex interfaces with many elements. When it is not possible to highlight a specific element, you can use the technique of focusing on the object.

ACTION RESULT AND OVERLAP

If there are several elements, they can move simultaneously, but not synchronously. If one element stops, then another may reach the end point a little later. For example, when a person throws a ball, his hand still continues to move, although the action itself is over. The overlap attracts the user's attention because the animation looks more natural.

ADDITIONAL STEPS

The principle of additional actions is used to accompany the main animation. Additional animation makes the design interesting, but can distract the user’s attention.

SMOOTH ACCELERATION

As already noted, in reality objects do not move at a constant speed. They accelerate more or less smoothly and also slow down. This principle must be taken into account when developing user interfaces.

EXPECTATION

The principle of expectation is somewhat similar to visual cues. Before the animation appears, you need to give the user a little time so that he can understand what will happen next. If there are several elements presented in a stack, then the last one can be animated so that the user can guess how to interact with the others.

RHYTHM

In animation, rhythm serves the same function as in music; it organizes movement and makes it more natural.

EXAGGERATION

Exaggeration is often used in animation, but this principle is not easy to illustrate, as this technique is used to create high expectations. This helps draw extra attention to a specific feature.