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

to term paper

Discipline: Promising information technologies and environments.

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

Completed:

Teacher:

Taganrog

Assignment for the course work:

Creation of an 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 2D and 3D 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. Also, animation is very widely used on television. For example, many broadcasters use screensavers created with the help of computer animation. The creation of video products is also not complete without a computer, and more and more often professional video uses computer animation techniques.

In this paper, technologies and principles for creating animation are considered.

Animation

The world's accepted professional definition "animation" (translated from the Latin "anima" - soul, "animation" - revival, animation) most accurately reflects all the modern technical and artistic possibilities of animated cinema, because animation masters do not just animate their characters, but put a piece of their soul into their creation .

Animation technologies.

Currently, there are various technologies for creating animation:

Classical (traditional) animation is an alternate change of drawings, each of which is drawn separately. This is a very time-consuming process, as the animators have to create each frame separately.

Freeze frame (puppet) animation. Objects placed in space are fixed by a frame, after which their position is changed and 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 - it only changes the color, not the position of the object.

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

Motion capture (Motion Capture) - the first direction of animation, which makes it possible to convey natural, realistic movements in real time. Sensors are attached to a live actor in the places that will be aligned with checkpoints computer model to enter and digitize motion. The actor's coordinates and orientation in space are transmitted to the graphics station, and the animation models come to life.

Animation software.

Animation creation software creates ease of use for both the beginner and the advanced advanced user. Such programs have various technical features that are very useful and easy to use for the animator. At any time, the user can get on-line help. Such software is divided into two categories: for two-dimensional (2D) and three-dimensional (3D) animation. There are a huge number and variety of programs for creating animations on the market today. Many of them are widely available and have a trial mode during which the user can use the program for free. After the expiration of this period, if the user is satisfied with the program, he can buy the full version for its further use.

Peculiarities software for 2D animation (2 D ):

Most of these programs have a friendly interface and offer many features. For example, useful features such as customizable grid and auto gap filling. Automated image and voice synchronization function saves time.

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

Special programming elements make the animation process as easy as one, two, three. The software tools allow the user to create motion, scale, rotation and distortion effects. There is a function to automatically insert a keyframe into the timeline.

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

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

for 2D animation software to work:

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 disk space, 24-bit color monitor , with 64MB (recommended) or 8MB (minimum) video memory, capable of resolution 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 resolution capability points.

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

3D modulators, TrueType font support, file format import and change, 3DS file export, built-in 3D browser, composite character editor, object modification, high quality renderer, high quality image creation, 3D scene and animation creation, support for frames, bump transformations, creating soft shadows, focus points, fog effect, and much more, support for .BMP.GIF, and.JPG file formats, script language, etc.

Required system requirements for 3D animation software to work:

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 RAM, 128 MB (recommended) or 256 MB , in the event that you use Win XP, 300 MHz Pentium, disk space is 5 MB.

Some of the more 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 one 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 about the speed of their output to the screen, the palette used, the sound, etc. (and in a highly compressed form), is already carried out with the help of 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 gif - animations.

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

1. First includes popular two-dimensional graphics packages that are primarily focused on working with two-dimensional raster graphics and at the same time allow you to create files in the Animation GIF format due to the corresponding utilities that complement them. The most popular of these are Adobe Photoshop with ImageReady included, Jasc Paint Shop Pro with Animation Shop included, and Ulead PhotoImpact with GIF program Animator. The main advantage of the applications of this group is that the animation program is closely linked to the corresponding graphics package and therefore it is possible to quickly switch between the animator program and the graphic editor, if necessary, correct the image. This is convenient only if you understand all the intricacies of working with such packages (all of them, especially Adobe Photoshop, require serious preparation). For this reason, this option is more suitable for professionals, and for beginners it is better to choose one of the programs of the second group.

2. 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 graphic 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 easily purchased via the Internet. And finally, most of the applications in this group are very simple, so they can be quickly mastered.

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 due to a special plug-in, often included in the delivery). Graphic 3D programs are convenient in that they do not require frame-by-frame drawing - usually, to create a gif file, it is enough to give the object some kind of cyclic action, such as 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 three-dimensional graphics require deep professional knowledge and are difficult to use. But do not despair! If you need to create, for example, an animated three-dimensional logo, then it is quite possible to get by with the program Xara3D , which, although it is positioned for working with three-dimensional graphics, can also create animated gifs and is very easy to use.

We 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 turn out to be not as spectacular as when using the Xara3D program.

Consider 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 a convenient and intuitive interface and rich features, this program is considered today one of the most convenient and functional gif animators and saves a lot of time for a web designer, because it can recognize changes made in external editors (PhotoImpact, Photoshop or Paint Shop Pro), and automatically update the corresponding frames in the animation. Animated drawing can be exported to PhotoImpact (UFO) or Photoshop (PSD) format with layering preserved. In addition, you can select any layer of a picture created in 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-layer drawings based on a full-color object-oriented model allows you to easily manipulate multiple objects in a drawing and quickly create multi-object animations, and dynamic update images created in external editors, sets new standard integration. The Animation Wizard simplifies the placement of images on the workspace and allows you to instantly evaluate the quality of the created animation based on its demo display in the preview window. The Object Manager helps you keep track of all the objects in your drawing, while the tweening functions automate the animation process by generating intermediate positions for selected objects.

Ulead GIF Animator features include text animation and over 130 animation effects. The advanced methods of image compression implemented in the program make it possible to achieve a significant reduction in the size of animation files, 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.

Image Ready CS

ImageReady CS is part of the popular Photoshop CS package from Adobe and is designed to design various Web elements, including animated gifs, which, given its full compatibility with Photoshop, makes it an excellent web design tool for professionals. Photoshop and ImageReady work closely together and complement each other perfectly, and the edited file can be easily moved between programs during editing with automatic saving. It is possible to export the created animated gif-files to the Macromedia Flash (SWF) format.

Animated gifs can be created both from layered Adobe Photoshop and Adobe Illustrator files, and from individual images saved in various graphic formats. When creating an animation based on a series of images for editing frames, it is not necessary to load each image separately - you can use the possibility of importing from a 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. one

ImageReady has a large gallery of filters similar to many well-known Photoshop filters. Therefore, to add this or that effect to the frame, you do not always need to switch to Photoshop - many actions are 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 just hold down the key combination Shift+Ctrl+M :

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

With GIF animation, a set of image frames are played in the order specified by the user. You can create various animation effects for a Web page: make text or graphics move, fade in or out, or change in some other way.

To prepare the animation in the ImageReady program, you need to create many image frames using the Animation palette (Animation), shown in Fig. 3. Then you can edit the individual layers of each frame using the palette Layers (Layers) fig. 4, with each frame having its own unique set of settings in the Layers palette. Finally, we need to save the sequence of frames as a single GIF file - the animation is now ready for interactive viewing.

rice. 3

rice. 4

Layer Effects

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

Effects in ImageReady have the same characteristics as in Photoshop: their names appear below the name of the layer they are applied to; effects move with the layer; Palette elements have right-facing arrows that open or close the list of effects. Each effect has its own icon to show or hide that effect.

Creating an animation effect for any image.

1. Open or create an image containing a background layer and a transparent layer with a picture of an object.

2. Open palette animation(Animation).

3. Select the layer in the Layers palette.

4. With 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 current frame). The copied frame will be highlighted.

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

7. With 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) put the switch Layers (Layers) in one of the following positions:

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

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

Then set in group Parameters(Parameters) flags of those parameters that will be changed in intermediate frames: position(Location), Opacity(Opacity) and/or effects(Effects).

From popup menu Tween with(Timing 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(Otherwise) to specify a specific number of times the animation plays, and then click the OK button.

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 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. (Preview in ImageReady is slower than in a 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(Preview in Default Browser) located on the toolbar. Click the button Back(Back) to return to ImageReady when viewing is finished.

Item swing animation

Here's how to make a layer element wiggle from side to side. This type of animation affects the points of the layer and is copied to all existing frames. It is necessary to create a duplicate layer for each stage of the movement.

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

1. Open image and palette animation(Animation).

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

3. On the palette animation click on the button Tween (Intermediate frames), and then check 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 animation, and click the button OK.

4. Click on the frame where the wiggle should 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 the changes made. 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 the layers for the rest of the animation frames.

Opening GIF animation

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

1. Execute the command File > open(File > Open) or press the key combination Ctrl+O.

2. Find the name of the .gif file and click on it.

3. Click the button open(Open). The frames of the animation sequence will be preserved. However, the Layers palette will now display a sequence of layers: one layer for each frame. Individual elements layers 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) check the box Bounding box(Boundary box) to preserve the original frame, as well as only those areas that change from one frame to the next. As a result, the file size will decrease, 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 actions, check the box Redundant Pixel Removal(Remove extra points) to remove those points of the object or background that do not change, that is, are re-drawn every time a new frame is loaded. It will also help reduce the file size.

None of these options will change the actual look of the animation, all changes happen behind the scenes.

Save animation.

The animation you create can be saved as a GIF or as a QuickTime movie. Other file formats, such as JPEG or PNG, will only save the first frame of the image, preventing the entire animation from being played back. There are several ways to save an optimized animation for use in a Web page. In ImageReady, just select the command File > Save Optimized(File > Save Optimized) to save the animation with the settings selected when it was last saved. 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 previously assigned.

Team selection File > Save Optimized As(File > Save As Optimized) allows you to change the name of the file and select 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 images) - generates an HTML file and saves each image as a separate file;

· Images Only(Only pictures) - 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 using the Copy HTML command, which copies the HTML code to the clipboard, and then it can be pasted into a Web page in any HTML editor. In case of changes in the original image, to update the HTML file, the Update HTML command is executed with the name of the updated file.

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

How to make animated rain.

Step 1. We open the image.

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

Then apply the filter Filter-Blur-Motion Blur.

Set layer opacity to 30%

Step 3 Again create a new layer and fill it with gray color and apply the same filters as in step number two. but the filter motion blur already do with other settings.

and set layer opacity to 30%

Step 4 . Again we repeat the same thing that we did in step 2. Filter motion blur do with the same settings and set the layer transparency to 30%.

Step5 . 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 that we made is visible.

Step 9 . We pass to the second frame and make it so that only the second layer with the drops that we made is visible.

Step 10 . We pass to the third frame and make it so that only the third layer with the drops that we made is visible.

All our animation is ready!

Xara3D 5.0

Unlike most programs for working with three-dimensional graphics, Xara3D has a simple and friendly interface and a minimum number of settings, so even a beginner can easily and quickly figure it out. And although the program is primarily intended for creating voluminous text and buttons, it is also great for receiving animations in Animated GIF and AVI formats. Therefore, it is successfully used by web designers mainly to create professional three-dimensional text logos.

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

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

Macromedia Flash

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

Adobe Flex Builder

Flash Development Tool (FDT), etc.

Flash applications are built with ActionScript - programming language. If the source code 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). Further, respectively, there is a base clip on the stage, inherited from the MovieClip class, which starts playing. The Adobe Flash environment is focused more on designers, 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 movies, flash movies) (full name - Flash Movie).

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

Flash files have a ".swf" extension and are viewed using Flash Player, which can be installed as a browser plugin. Also, swf files can be viewed using the Gnash player. Distributed for free through the Adobe website. Source files with the extension ".fla" are created in the Adobe Flash development environment, and then compiled into the format understood by Flash Player - ".swf".

Flash is based on vector morphing, that is, a smooth "flow" of one keyframe into another. This allows you to make quite complex cartoon scenes by setting only a few keyframes 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 Fantavision program was released, which used this technology. In 1991, the game Another World was released on this technology, and two years later - Flashback.

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

Flash started its professional activity since the release of a conventional 2D animation software product. As time went on, everything developed at a rapid pace. Flash has not bypassed the development either, it has become more modern and perfect.

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

PaperVision3D, but their speed and quality of work are rather low, mainly due to the fact that this moment as part of the flash player, there is no way to use directX or openGL tools, so full emulation of all 3d algorithms is performed. There is no support for hardware acceleration, 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 particular project (game).

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

Macromedia Flash interface.

fig.1

When you open the Flash application window, the following interface elements appear on the screen:

Stage (desktop) - an area for arranging individual frames, creating a composition from graphic elements or imported bitmaps and viewing 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, are repeatedly used in it;

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

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

· Movie Explorer (movie browser) - additionally called a window to view the structure of the movie.

Stop motion animation

So let's take another look at the window. Flash programs. When a 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 the timeline - after all, frames follow one another in the video.

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

Conclusion:

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

This paper discusses the most common means of supporting and creating animation, as well as describes the stages of creating gif-files, flash-rollers and animated volumetric text, using various effects.

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

With a user-friendly and intuitive interface and rich features, Ulead GIF Animator is considered today one of the most convenient and functional programs to create gif - files and saves a lot of time for a web designer

is the leading tool for creating multimedia content. This software tool integrates text, graphics, audio and video to form an interactive multimedia environment that delivers brilliant results when creating interactive presentations, marketing materials, eLearning 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 widespread software platform.

Bibliography:

1. Computer Press 3 '2005;

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

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

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

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

Animation 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

Of the three main recreational functions (therapeutic, health-improving and cognitive), 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 purposeful design of animation programs, the following functions of tourist animation can be distinguished:

Adaptive, allowing you to move from everyday environment to free, leisure;

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

Stabilizing, creating positive emotions and stimulating mental stability;

Health-improving, aimed at restoring and developing the physical strength of a person, weakened in everyday working life;

Informational, allowing you to get 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 tourist animation functions has also led to a variety of types of animation activities, as well as a large 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, pleasant pastime, and entertainment.

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

Animation in motion - satisfies the need of a modern person in motion, combined with pleasure and pleasant experiences;

Animation through experience - satisfies the need for a sense of a new, unknown, unexpected initiation, 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 soothing - satisfies people's need for psychological relief from everyday fatigue through calm, 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 their 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 recreational activities 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 effect is most often achieved.

Let's highlight the types of animation that are relevant to the topic of the work: recreational, tourist, hotel.

Recreational animation is a type of leisure activity aimed at restoring the spiritual and physical strength of a person. Leisure programs implemented for recreational purposes can be carried out by both tourist 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 wider than the concept of hotel and tourist animation. Figure 2 shows the structure of tourist animation.

Figure 2 - Varieties 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 involves only the organization of leisure activities at tourist enterprises: tourist complexes, hotels, hotels, camp sites, etc.

There are also additional animation services - animation programs designed to "support" the main tourist services specified in the tour package during technological breaks due to travel, travel delays, in case of bad weather, lack of conditions for targeted pastime.

Table 1 shows tourist animation with an emphasis on recreation.

Table 1 - Typology of animation activities

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

about the perfect animation in the app.

You have probably heard the expression " good design visible immediately. Great design goes unnoticed." The same principle can be applied to mobile application animations: indeed, a successful animation makes the application usable and attracts attention, but does not distract the user from the application itself. The main task of animation is to explain the logic of the application to the user.

Animation types

To optimize the use of animations, you need to define their place and function within your application. Let's find out what types of animations exist.

Visual feedback

Visual feedback is extremely important for any UI. In the physical world, objects respond to our interaction with them. People expect the same from app elements. Visual feedback, as well as audio and tactile feedback, gives the user a sense of confidence. Visual feedback also serves one simple function: it shows that your app is working properly! When an icon is enlarged or swiped images move in a certain direction, it becomes clear that the app is “doing something” in response to user input. In the example below, when the user ticks the checkbox to indicate that the task has been completed, the field shrinks and changes color to green.

Tinder's familiar "swipe-left-to-like-right-to-skip" approach is also visual feedback. We have implemented this animation in Koloda, our open source library:

Functional change

This type of animation shows how an element changes when the user interacts with it. It is best suited if you want to illustrate how element functions change. Most commonly used in buttons, icons, and other small design elements.

In the first example, you can see the button changing from a "hamburger" icon to an "X", which means the button's function has changed.

The second example changes both the icon and the content.

Orientation in space

Most mobile applications have a complex structure. The task of the designer in this case is to simplify navigation as much as possible. Animation can be extremely useful for this task. If it shows where the element is hiding, then next time it will be easier for the user to find it. In this example, we see a menu on the navigation bar. It flips when the user clicks the button:

In this example, we see how additional buttons appear at the bottom of the screen - in the same place where other options are located.

Hierarchy of elements and their interaction

Animation is ideal for describing parts of an interface and illustrating how they interact. Each element has its own purpose and place within the animation. For example, if a button activates a popup menu, then it's better to have the menu appear from the button, rather than just float out of some corner of the screen: it will show the user the result of the click. This will help the user understand that the two elements (button and popup menu) are related.

All animations should illustrate how the elements are connected. This hierarchy and interaction of elements is very important for an intuitive interface. In the first example, where a menu appears after clicking on the icon, from the user's point of view, the menu is the same element, only enlarged.

In the second example, the information about the element increases when clicking, the user realizes that this is the same element, the difference is only in size.

visual cue

Animations suggest how to interact with elements. It is especially important to offer visual cues when the application has an unpredictable pattern of interaction between elements. In this example, when the user opens the blog, the post boxes appear on the right side of the screen, and the user needs to swipe horizontally to scroll through them.

The second example uses a similar technique, but only for social media icons.

State of the system

Inside your application, some processes are always going on: information is loaded from the server, calculations are made, and so on.

Your job is to let the user know that your app hasn't hung or crashed, and inform them of the status of the current process. Ideally, each process in the application should be accompanied by a separate animation. For example, when audio is being recorded, the application screen should show the dynamics of the audio track. Animated sound wave can show the sound volume.

One of the most common examples of this type of animation is "drag to refresh".

funny animations

Funny animations can be good or bad. Often they are used meaninglessly, and can significantly complicate the development of the application. But a really unique animation can be very attractive to users and make your application stand out from others. This is one of the secret tools that designers use to make users fall in love with their product. Unique animations can help you create a recognizable brand.

In our example, moving circles look very unusual and attract the user's attention. The ability to move these circles around the screen brings joy and "gamifies" the process. It's easy and fun.

I am sure that the “pull to refresh” function, presented in the form of a boiling saucepan, will not leave you indifferent!

There are two things to keep in mind when creating a fun animation: 1) make sure it doesn't obscure or obscure the app's features; 2) it shouldn't take long.

Main principles of design

We have covered the main types and functions of animation. To create really effective animations, keep in mind the 9 principles that are originally but can be applied to UI design.

1. Material

Show what your element consists of: is it something light or heavy, fixed or flexible, flat or voluminous? Let users understand how this UI element will interact with others.

2. Trajectory of movement

You need to determine the nature of the movements. The basic principles dictate that non-living mechanical objects usually have a straight trajectory of movement, while living ones have a flexible and not so direct trajectory. You will have to decide what kind of impression your UI should give and then stick with it.

3. Timing

Timing is probably one of the most important issues when creating animation. In the real world, physical objects do not move according to the rules of rectilinear motion, because they need time to accelerate and decelerate. Use curves to make your objects move more naturally.

4. Animation focus

Draw attention to the content area of ​​the screen. For example, a blinking icon will alert the user that they need to click to view the notification. This type of animation is used in interfaces with large quantity details and elements when there is no other way to highlight a particular element.

The most important:

• Remember who your target audience is and build your prototype as a solution to their problems.
• Make sure every element of your animation is rational. (Why him? Why so? Why now?)
• To make your product stand out, aim for natural-looking animations that resemble real-life motion patterns.
• Consult developers at every stage of your project.
• Don't be greedy - share your components on GitHub.

If you find a typo - highlight it and press Ctrl + Enter! To contact us, you can use .

“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 animated works. The article will help you better understand the issues of animation technology.

To begin with, in order not to get confused, I would like to highlight 3 main criteria by which to judge animation: types of animation, animation methods and animation styles. For many, this is the same thing, but it is not! Types of animation - this is the form or form in which the cartoon is shown (drawn, puppet, etc.). Animation methods are the technical features by which animation is created (frame-by-frame animation, programmable animation, etc.). Finally, animation style is an artistic technique that is used in animation (realism, anime, etc.). In this article I will consider the concept of "types of animation" in a more expanded 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 classic animation. Classical animation is done by drawing on a transparent film (or tracing paper) every single frame. These frames are then assembled into special program installation. Such animation is very lively, smooth, spatial, but expensive))). An example of such animation is the cartoons of the Disney and Soyuzmultfilm studios.

A frame from the cartoon "Snow White and the Seven Dwarfs" by the Disney studio

Translation animation.

The oldest type 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 move (shift) from frame to frame. Hence the name - translation! Many consider such animation to be primitive, but in skillful hands such cartoons can turn out to be very interesting. One of the most striking examples of translational animation can be 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 OF ALL TIMES AND PEOPLES!!! Here's a translation for you ... Here's a primitive for you ...

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

Painting on glass.

But here you definitely can’t call animation primitive! The essence of such animation is painting with oil paints on glass. At the same time, each frame is a picturesque picture, which is modified by the brush strokes of the artist. A striking example of such animation is the work of Alexander Petrov "The Old Man and the Sea", which was awarded the "Oscar".

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

Puppet animation.

The same old kind of animation. All puppets and props in puppet animation are handcrafted, making 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 the epiphany came when I saw Tom Burton’s cartoon The Nightmare Before Christmas.

A still from 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, it is customary to call computer 2D animation Flash animation, and this is not entirely true. Flash is just 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 computer 2D animation. It is this kind of animation that we see today in serials on TV, on the Internet, in casual computer games etc.

Frame from the animated series "The Simsons"

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 the development of computer technology, it became possible not only to draw graphics and animation in a two-dimensional plane (2D animation), but also to revive three-dimensional forms. This technology is very complex, but in short, the production process looks something like this. First, concept arts are drawn (in any way), according to these drawings, a three-dimensional model geometry is created. Then textures that are put on the shape of a character or object. Next, create the bones of the object and attach them to the form so that the form can move. Animators receive a prepared model for movements and begin to animate it. The better the model is prepared, the more natural and plastic its movements are. After creating the animation, the scene is rendered (transferred from 3D to a regular picture). Vivid examples of such animation are Pixar cartoons.

Frame from the cartoon "Ratatouille" by Pixar.

Combined animation.

Composite animation is the combination of any type of animation with a video. Early examples of such animation can 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.

Shot 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 Studio Cardboard Tower.

Our animation studio specializes in the production of 2D computer animation. With flexible options computer programs we can create both translation and classic animation at the same time. We can also create 3D animations. As an example, you can look at 3 videos from our portfolio:

1. Computer 2D animation in a classic manner.

3D Studio MAX implements advanced animation control, stores the life history of each object, allows you to create a variety of lighting effects and has an open architecture, that is, it allows third parties to include additional applications in the system.

TrueSpace - Caligari's 3D animation package is easy to use, flexible in shape control, supports splines and boolean operations on objects. The innovative interface shows toolbars directly in 3D space and aligns them to the object. Extensions and openness of the architecture allow you to increase the capabilities of the package.

Ray Dream Studio - the program provides a set of professional tools for 3D design and animation. Users can create various models using boolean operations and deformations. You can apply various textures or video images to these models, as well as draw directly on their surface.

There is a video editing a large number of software products. In addition to 3D animation packages, there are highly specialized programs, for example, for creating three-dimensional fonts. They also use a variety of animation effects, perform image rendering, and allow you to create video files. Some of them are listed below.

Adobe Premiere is the most widely used digital video editing program. It has a convenient, intuitive interface. Supports several video and audio channels, contains a set of transitions between frames, allows you to synchronize sound and image. Supports files MOV formats and AVI. Connecting additional modules from third-party manufacturers expands the capabilities of the program.

Speed ​​Razor SE - a program that has a convenient user interface. Thanks to the advanced tools for working with video and audio channels, Speed ​​Razor is convenient to use in projects with complex composition and overlays. Contains a set of frequently used special effects, butt-cut (direct splicing) is performed in

real time mode. Multimedia projects created with this program can be burned to video, CD-ROM or posted on a Web site.

Ulead VideoStudio is a program designed for beginners. It has full support for DV and MPEG-2 formats for digital video. For movie soundtracks, you can use MP3 or MP3 music files. audio tracks from an audio CD. Working with the program is quite simple thanks to a thoughtful and friendly interface. You can insert captions into a movie, use smooth transitions between individual fragments, and add a voice or background music to the resulting clip.

COOL 3D is a 3D title creation program for presentations, videos, multimedia and Web pages by Ulead. The program includes more than 100 automatic wizards, many effects that greatly simplify the modeling and rendering of the final scene. Also contains a huge library of 3D objects and materials plus photorealistic patterns and textures.

Programs for working with sound can be divided into two large groups: sequencer programs and programs focused on digital sound recording technologies, the so-called sound editors.

Sequencers are designed to create music. Sequencers are used to encode music pieces. They are used for arranging, allowing you to "prescribe" individual parts, assign instrument timbres, build levels and balances of channels (tracks), enter musical touches (volume accents, time shift, deviations from the tuning, modulation, etc.). Unlike conventional music composition, efficient use of a sequencer requires specialized engineering knowledge from the composer/arranger.

Sound editor programs allow you to record sound in real time on HDD computer and convert it using the possibilities of digital processing and combining various channels.

Consider some programs for working with sound.

Cakewalk Pro Audio is a professional multi-track sequencer from Twelve Tone Systems that is well-deservedly popular with professionals. Cakewalk was one of the first software products to provide plug-in support for various audio effects built for the DirectX interface. A characteristic feature of DirectX effects is that they all work in real time and you can adjust all the parameters of the selected effect right during the playback of a sound fragment.

Logic Audio Platinum is a professional sequencer from Emagic. Provides support for DirectX, real-time processing, can work with multiple sound cards. It also allows you to record sound and perform digital processing of it.

Sound Forge is a program that is one of the leaders among sound editors. It has powerful editing features, allows you to embed any plug-ins that support DirectX technology, has a convenient modern interface, and supports modern audio formats, including RealAudio.

CoolEdit Pro is a professional recording studio by Syntrillium Software. It allows you to record sound through a sound card from a microphone, CD player or other source, read and write files in the popular MP3 format, edit the resulting sound files and add various fantastic effects to them. Provides work with multimedia sites.

After creating all the multimedia components, you need to combine them into a single multimedia application. This raises the problem of choosing a software tool for its development. The existing means of combining various multimedia components into a single product can be conditionally divided into three groups:

• algorithmic languages ​​for direct development of a control program;
• specialized programs for creating presentations and publishing them on the Internet (quick preparation of multimedia applications);
• multimedia authoring tools.

As a rule, the choice of a tool is based on the requirements for the efficiency of the multimedia application and the speed of its development. An important property is the degree of user interaction. Specialized presentation programs are focused primarily on the transfer of information from a computer to a user. Authoring tools enable a high degree of interaction and create a truly interactive application.

The simplest and fastest is the use of presentation programs, the capabilities of which in some cases are sufficient to create a simple multimedia application. Authoring systems are designed to create software products with a high degree of user interaction and offer a special scripting language for developing a user interface. They allow you to create a final product that combines all multimedia components in a single control program. Its distinguishing feature is the presence of a common interface that allows you to select any of the multimedia components, run it for execution (listen to sound file or watch a video), organize a search for the required object, etc.

Presentation programs, originally designed to create electronic slides to help illustrate a speaker's message, have recently become increasingly focused on the use of multimedia. There are a large number of such programs that differ in a set of visual and animation effects, some of them are presented below.

Power Point - presentation program included in the package Microsoft Office. In terms of the number of visual and animation effects, it is not inferior to many multimedia authoring tools. Contains tools for creating a flexible presentation script and recording the soundtrack for each slide. The presence of the Russian version allows you to successfully work with texts in Russian. Built-in web support allows you to save presentations in HTML format, however, animated components require a special PowerPoint add-on to be installed