Learning goal: Mastering the technologies of creating images and animations. Flash training will help you get closer to professions: WEB animator, artist-designer, - presentation
general characteristics Computer Animation Courses in Flash This program of computer animation courses in macromedia Flash is a breakthrough in the field of animation. It is aimed at WEB application developers who are starting to learn Flash. The Macromedia Flash program is designed for creating animated banner videos, interactive websites, inserting sound effects for various publications on the Internet, as well as developing high-quality flash presentations and working with raster and vector images.
Practical skills In the future, this will allow students to: take part in the development of television and animation projects; independently create interactive animated flash videos and flash presentations; use elements in Web design and simple application programs. Practical tasks are aimed at creating animated models that facilitate effective perception of information. The area of application of practical skills obtained as a result of studying course materials is information and, in particular, Internet technologies.
Information about training in Computer Animation Macromedia Flash Macromedia Flash Class schedule for the course: 2 days a week 1 hour per day Class time for computer animation courses: from to Flash technologies courses for students of Education Center 1601
Macromedia Flash program Macromedia Flash is a program necessary for creating animated videos, banners, interactive websites, inserting sound effects, for various publications on the Internet, as well as developing high-quality flash presentations and working with raster and vector images. The Macromedia Flash program is intended for creating interactive content, both the Web environment and any other digital environment, with and without interactivity properties: advertising, show business, television, museums, theater, laser shows, interior, advertising, Internet . Our Flash courses will help you master Macromedia Flash and become an animation expert over time.
The final result is the creation of animation projects: attractive Flash banners, an interactive Flash website, Flash presentation and Flash games. The importance of Flash technologies for Web design can hardly be overestimated; they are a necessary component of the training of professional Web designers.
First lesson in FLASH So, here is our first lesson in FLASH. You sat down at your computer, installed FLASH and are wondering where to start. So, we’ll start by telling you why you need this FLASH and how it can help you. First of all, FLASH is a vector editor, this is not PHOTOSHOP... everything is different here. I won’t explain what the difference is between a raster and a vector editor, but if you’re that interested, I think you’ll find where to find out. FLASH is your film studio, where you are actually the director. If you don’t have a developed imagination, then go read books and watch fantasy films. So we've all done this, with your imagination in order, you can start working :). What does the film consist of? Of course, from the scenes, that’s right, there’s just enough of this goodness in the flash, the main subject is the scene, great. Come to our courses and there we will continue our lesson.
First lesson in FLASH (continued) Your film may consist of several scenes, several files, which again may contain n number of scenes. So, a film can be a real film, a cartoon, a website, in general, whatever you want... it can also be a virtual picture for a classmate. So what does a real web designer need to work properly? Computer, good mouse. So, is everything there? - great - GO!!! Inside the scene is all your graphics, each graphic is an object. So, an object is what is drawn, now the most important thing, SYMBOL is the main concept in FLASH. A symbol is an object that is stored in libraries. The symbols are: Movie Clip, Button, Graphics. Let's start with an easy one, Graphics is just some kind of static object that does not change in any way due to user actions. Button - button, 4 frames (Up, Over, Down, Hit) - more details in the "Creating Buttons" section. A Movie Clip is a separate clip that you can insert into your scene, for example, make a spinning line and insert it into the clip....
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 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 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 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. The creation of video production is also not complete 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 exists various technologies 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 the live actor in places that will be aligned with control points in the computer model to input and digitize movement. The actor's coordinates and orientation in space are transmitted to the graphics station, and the animation models come to life.
Software for creating 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.
Peculiarities software for 2D animation (2 D ):
Most of these programs have a user-friendly interface and offer many features. For example, such useful features, like custom grid and auto gap filling. 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.
Create or compile high-quality animations for the web, PDAs, iPods, cell phones, HDTV, including SWF, AVI, QuickTime, DV streams and much 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 Intel Pentium III processor (minimum) with Windows Microsoft XP or 2000, (recommended) 512 MB RAM, 256 MB (or more), 120 MB available hard drive space, 24 bit color monitor, 32 video memory MB or larger, capable of 1024x768 pixel resolution.
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 symbol editor, object modification, high quality renderer, create high quality images, create 3D scenes and animations, support frames, bump 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 2K, 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, for example, 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 display on the screen, the palette used, sound, etc. (and in a highly compressed form), is 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 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, 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 linked with the corresponding graphics package and therefore it is possible to quickly switch between the animator program and the graphics editor if necessary to adjust 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 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 disabilities in terms of drawing, therefore 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 the photo 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's 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 Photoshop and Adobe Illustrator, and from individual images saved in various graphic formats. When creating animation based on a series of images for editing frames, it is not necessary 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 layer properties using the Layer Style dialog box, and ImageReady adjusts layer properties 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 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 a format understood by Flash Player - ".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 started its professional activity with the release of a conventional 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. There is no support for hardware acceleration or 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 not display web pages and interactive web elements built using Flash technology correctly.
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 another look at the Flash program window. 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 integrates 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
ContentIntroduction………………………………………………………1
History of animation………………………………………………………2
Creating animation……………………………………………………………..3
Microsoft Gif Animator………………………………………………………...5
Animated icons……………………………… ……...6
Creation of cartoons…………………………………..7
Conclusion……………………………………………………9
References…………………………………………………….10
INTRODUCTION
Everyone has seen “live” pictures on web pages more than once. They are everywhere, these annoying banners, all sorts of blinking, jumping, crawling elements and elements, as well as entire cartoons. But what motivates these most wonderful pictures and where do they come from? These are the questions I tried to answer in my work and I realized that computer animation can be done not by some celestial beings, but by quite simple guys and girls, like you and me, if we had the desire.
Hypothesis: Animation drawings can be done by all boys and girls who are interested in information technology.
The purpose of this work: To form an idea of the capabilities of software for processing graphic information in Paint and GifAnimator; learn how to create animation drawings yourself using programsGifAnimator.
Tasks:
· Use of raster and vector graphic editors;
· Revitalization of graphic raster drawings using a GIF animator;
· Bringing vector graphics to life with Macromedia Flash
· Instill practical skills in working in these programs;
Object of study: Technology for creating animation using the program
Microsoft Gif Animator.
Subject of study: Animation drawings.
Research methods: 1. Introduction to the Microsoft Gif Animator program;
2. Introduction to the Paint graphic editor.
3.Create moving pictures using these programs.
To solve these problems, I got acquainted with one of the animation programs Microsoft Gif Animator. This is one of many software products from Bill Gates, head of Microsoft Corporation.
This is a very simple program, its main purpose is to create small animated drawings for the Internet. To create serious projects, specialized animation graphics packages are used. but nevertheless, even with the help of this program you can create quite interesting projects.
Creation algorithmgif-animations:
Open the graphic editor Paint (create the first frame, the screen size should not exceed 10x10 [ Figure →Attributes])
After completing the drawing, enter the menu Edit→Select All And Edit → Copy.
Open WWWGIFA. Perform an action Edit → Paste
Return to the Paint graphic editor and change the drawing.
Repeat steps 2-4 several times (depending on the intended animation)
To view the result, click the button
conclusions: The Microsoft Gif Animator program is convenient and simple for creating animated drawings for all boys and girls interested in information technology.
History of Animation
“Animation is a derivative of the Latin “anima” - soul, therefore, animation means animation or animation. In our cinema, animation is often called animation (literally, “reproduction”). The art of animation, paradoxically, is older than cinema itself, which largely owes its birth to it.” Artists of all times and peoples dreamed of the opportunity to convey the true movement of life in their works. We find the desire of mankind to capture in drawing the movement observed in nature and life in the monuments of ancient times.
The traditional definition of animation is as follows: animation is the process of creating many images, showing how an object changes over time, and playing those images so fast that they merge into smooth motion. Even live-action films fall under this definition of animation. A film or video camera captures live images at high speed for the purpose of playing them back at high speed.
The difference between animation and live action is the process by which the image is created. Live action uses cameras to capture images that are then played back. Traditional animation requires drawing each image and then photographing it as a single frame for later playback. Each image or frame of the film must be drawn, outlined and colored by hand. This process forces animators to think in frames: " This action takes such and such a number of frames." "Such and such should happen during this frame." Let's imagine what kind of response the director would receive from the actor if he said: "Now run to the porch for 90 frames, pause for 20 frames, and then rush to open the door." It's unnatural to think in stills, but the limitations of animation technology force us to think that way. It would be much easier if animation could be done in real time: "I want it to last four seconds, and then half a second later I I want this to happen."
Creating Animation
Animated images in gif format are found everywhere on the Internet. Banners, buttons, logos, all of them, using even small animations, add some dynamics to the content of the page. There are many different programs aimed specifically at creating animated GIF images. However, most of them can only work with ready-made images, distorting them or moving them in space. Therefore, it is completely logical to create animated images using a program with which you can also draw. Below I want to show how easy it is to create an animation effect using GIMP.
However, first, a little about the very idea of an animated gif. The gif format allows you to store an image in the form of several layers, each of which can represent a separate image. The idea is that for each layer in a GIF image, you can set the time during which it will be displayed. Thus, by alternating layers you can get animation.
So, as mentioned above, to create an animated gif you need to have several layers (read more about working with layers in GIMP here). Let's consider simplest example. Create a new image. Leave the bottom layer white. On the other four we will draw the letters of the word GIMP appearing. The easiest way to do this is to write an inscription on a new layer, then create four copies of this layer and erase unnecessary letters in each of them. This will result in five layers, one of which is the background, the other four represent the letter-by-letter GIMP word:
Now let's save the resulting image as a gif (File - Save As). After this, GIMP will prompt you to export the image to gif. At the same time, he will let you choose whether to combine the layers into one image or save them as an animation. Because We are interested in animation, select the second one and click “Export”. After this, a menu for selecting parameters for the animated gif will open:
The first two parameters set the general properties of gif - interlacing and commenting. We are more interested in the animation parameters:
Endless cycle. When this option is enabled, the layers will alternate endlessly, i.e. after the last layer is displayed, the first one will be displayed. If this option is disabled, the animation will play once and stop at the last layer image.
The delay between frames is the time in microseconds that each layer will be rendered by default.
Frame positioning - has three modes. The first (default) - I Don`t Care (doesn't matter), tells GIMP to take care of things on its own. The second is Combine (layer overlay), superimposes one layer on another without removing the previous ones, i.e. unites them. This way, if you have transparent areas in your layers, previous layers will show through. By default, GIMP usually uses this mode as it is the most flexible. I always use it too. The third mode is Replace (one frame per layer), replaces the previous layer with a new one.
We use the default layer arrangement, and set the time between frames to 200. The result should be a gif like this:
If we now open this gif using GIMP, we will see that in the layers dialog, a parameter has been added in the name of each layer in brackets - display time. Thus, by changing the value in brackets, you can set each layer its own personal display time. For example, set the last layer to 500 to keep the full text on the screen longer.
This was the simplest example of creating an animation. But we always want more!
So, we have figured out the basic principles of creating animated gifs using GIMP. Briefly summing up, we can do the following: conclusions:
1. Each animation frame represents a separate image layer.
2. Each frame can be specified with two parameters: display time in microseconds and its type, combine or replace. The parameters are specified in the layer name and are enclosed in parentheses, for example: Layer1 (1000ms)(combine).
3. Optimizing layers allows you to significantly reduce the size of the animation image.
That's all about the basic techniques for creating animated GIF images using GIMP.
Technology for creating animation using the program
Microsoft Gif Animator
Launch the Microsoft Gif Animator program.
START → PROGRAMS → Folder Microsoft GIF Animator → program Microsoft GIF Animator.
Launch the Paint program.
START → PROGRAMS → Folder STANDARD → program Paint
Setting the canvas size in the Paint graphics editor .
Menu item DRAWING → ATTRIBUTES…→ WIDTH install depending on the required dimensions → HEIGHT install depending on the required dimensions. → OK
Transferring a frame created in the Paint graphic editor to Microsoft GIF Animator
Copying a drawing in the Paint graphic editor.
Menu item EDIT → Menu item SELECT ALL ( the fact that a fragment has been selected can be judged by the dotted frame that appears around the picture) → Menu item EDIT → Menu item COPY
Inserting a picture in Microsoft GIF Animator.
Go to the program MicrosoftGIFAnimator ( To do this, click the mouse in the program window, and if it is minimized on the program button, on the taskbar) → click on the icon
If everything is done correctly, another frame should appear.
Setting up and viewing the finished video.
Select all frames with the button
Go to the Image tab → in the Duration (1/100 s) option, set the display time of one frame (selected by trial method)
Go to the Animation tab and check the box next to Looping – number of repetitions.
Repeat Count – indicates how many times to repeat.
The check mark next to Repeat Forever means endless repetition.
To view the video, click on the icon
Animated icon
Creating an animated icon for a website differs from using a regular icon in that the animated icon must be in gif format.
To create animation, any program that can create an animation drawing from a set of frames is suitable. For example, you can use Macromedia Flash. One of the common tools for creating animation is Adobe ImageReady
Creating an animated icon .
To create an animation, you need to create a 16x16 pixel drawing in Adobe Photoshop.
We create several layers on one image that will simulate animation (that is, the images on the layers should be varied). Let's save the image in PSD format.
Let's go to Adobe ImageReady and open the animation panel through the Window/Animation menu. Let's open the saved image in psd format and add to the panel the same number of frames as the number of layers the image has. For each frame, let's turn on only one layer in the layers panel (the rest should be hidden). If necessary, you can change the display time for each frame.
Note: in adobe photoshop CS3 - imageready no, you can open the animation window - menu - windows - animation
To do this, right-click under each frame and select the required interval.
Display animation in the address bar.
After uploading the picture to the site, you need to tell the browser to use a gif picture as an icon rather than favicon.ico. To do this, after describing the meta tags in the file, you must include the line: Code
As a result, we will see our animated drawing in the address bar. 
Cartoon creation
The word "animation" translated from Latin means multiplication. When applied to cinematography, animation means the frame-by-frame filming of static drawings or puppets depicting individual phases of movement, resulting in continuous movement on the screen.
The principle of decomposition of movement into separate phases has been known for a long time. Even in ancient drawings and paintings you can see images of animals with big amount legs, and people with eight to ten arms. This is not a whim of the artist, but a desire to convey in the drawing various moments of movement, dancing, running, walking. Long before the advent of cinema, the principle of decomposing movement into separate phases found application in stroboscopic devices. The artist decomposed the simplest types of movement into separate sequential phases, which he drew on a disk or paper tape, and then, using a stroboscopic device, reproduced the movement before the eyes of the observer or projected it using a magic lantern on the screen. Here we are dealing not only with the decomposition of movement into individual phases, but also with their synthesis, i.e. with animation.
The principle of stroboscopic “live” pictures and modern animation is the same and is based on the psychophysiological ability of a person to retain visual impressions. When the strobe light rotates, the eye sees sequentially changing patterns. The speed at which one drawing is replaced by another is such that one drawing, due to the inertia of the visual impression, does not have time to disappear from our consciousness before another takes its place. new phase movements. The human eye retains a visual impression for approximately 0.1 seconds. Therefore, if the time between two visual impressions does not exceed 0.1 seconds, the impressions merge, which creates the sensation of movement.
Thus, animation in the form in which it first appeared can be considered the immediate predecessors of cinema. The first animated films appeared at the beginning of the 20th century, around 1908-1910. Their pioneers are considered to be Emil Kohl (in the cartoon film) and Vladislav Starevich (in the puppet film). Animated shooting of three-dimensional objects and dolls differs in many ways from shooting drawings. Therefore, film animation is divided into two types: planar and volumetric.
Both types not only serve as the basis for the creation of artistic animated films, but are also used as a means for figuratively demonstrating various phenomena and processes in educational, popular science and even feature films.
In our age of technological progress, computer animation has found wide application, which can also be divided into planar or 2D animation and volumetric or 3D animation.
To make small cartoons we will need: A drawing program and a frame composition program (animator).
You can use any graphic editor as a drawing program: Paint, Paint PRO, Adobe Photoshop. In it we will create frames of our future animation. It is better to record them immediately in GIF format, but this is not necessary....
* Comments: If you are going to use an animated GIF for your web pages, then in order for the animation to look good on any background, it is better to make frame drawings on a transparent background.
Then in the animator program we set the sequence of frames, set the delay time for each of them,
And we bring all the frames into one file, i.e. record as an animated GIF (GIF89A Format).
As an animator program, I would advise you to try several different ones, and choose the one that will be most easy and convenient to work with...
For example, there are very good animators:
ULEAD's GIF Animator. GIF Construction
The main advantage of these programs is that animation can be created from one picture!
This is done using rendering effects that are superimposed on this picture.
Conclusion
Recently, thanks to the advent of powerful home computers and the spread of web technologies, flat computer animation has become available to a wide range of amateurs. The simplest animated videos can be made using gif animation technology - with the help of gif animators. Animation of this kind consists of looped raster frames that have little “weight” and are used to animate banners, logos, etc. Wider possibilities are provided by Flash technology, which is based on vector graphics and allows you to create compact files (hence, longer and more complex animations), and also ensures their fast loading over the network. GIF animation uses the ability of the gif format to store multiple raster images in a file. They are a series of frames that quickly replace each other, due to which the animation effect is achieved. How simpler drawing and the smaller the number of colors involved, the better the result of the gif animation. Frames of a single image can be created in any graphics package using gif animators Flash animation is interactive animation, an image of “live” pictures that react to user actions, and interactivity is a property of software that provides reactions from the program in response to any user actions.
While doing this work, I learned how to create animation drawings, use the most necessary tools and make the picture move... In the future, I want to meet others free programs to create animated drawings, I will create not only animated drawings, but also cartoons and videos using moving drawings. I will be very glad if my animations are used by all lovers of moving pictures and icons to enliven their websites and presentations.
Used Books
Shakhanova G.A., Karsybaeva Z.S., Zhubaeva A.S., Uteev A.A. Methodology for creating and specifications electronic textbook. Kazakh-Russian University, Department of Informatics and Applied Mathematics. Astana, “SANAT-Poligraphy”, 2005
Solovyova L.F. Computer technologies for teachers. St. Petersburg, “BHV-Petersburg”, 2003
Workbench V. Animation in 3D Max 8. Secrets of mastery. Moscow, St. Petersburg, “Peter” 2006
Kershan B. Novembert A., Stone J. Fundamentals of computer literacy. Moscow, “Mir”, 1989
Stephens M., Treese R. Computer for children. Moscow, “AST-PRESS”, 2000
Annex 1
Practice on creating an animation drawing
So, you wanted to make an animated picture with your own hands.
The principle of its operation, I think, is clear to everyone - you need to create successive frames, after which they will need to be combined into one file - .gif - this will allow your drawings to “come to life”. What is needed for this? Firstly, you need to have a tool at hand - a graphic editor, for example Photoshop9. I also recommend downloading the Bannershop GIF Animator 5 program. It was specially designed for making banners and quickly animating pictures.
So, now that we have all the necessary programs, we can get to work!
Let's try to make a simple animation from a simple picture babochka.jpg
In the window that opens, select the “Deformation” tool
Now we can change the original image as you please...
We bring the tool (circle) to the wing and smoothly distort the wings, then click OK and save our image under a different name.
For example babochka2.jpg
Now you need to combine these files into one file. This operation can be performed in Photoshop, but I’m afraid that it will be quite difficult for beginners...
Therefore, to combine the received frames into a single file, I recommend using a simpler program - Bannershop GIF Animator
A window will open in front of us - select Open File in it
We select our first frame - we will have the source file - a butterfly in the first frame.
After which you need to add a second frame - click New - a new frame will appear - insert the second file there via Image - Import Image.
File - Save GIF Animation
Let's open this file...
Now our butterfly has come to life!!! 
This, of course, is the most primitive animation, but the main thing is that we have already learned how to use the most necessary tools and made the picture move... We can use other butterflies for our animation.
Appendix 2
Making a Soccer Ball
Let's try to simulate a spinning soccer ball. Since we cannot draw pentagons and hexagons, we will find a ready-made image of a static ball. To search for pictures, I often use the corresponding Google service. A large number of pictures will be found for the query “soccer ball”, you can choose any one. In order not to scroll too far, I chose a very suitable image from the very first page.
The original image of the ball, on the basis of which we will make the animation:
This is ka p teen 180 by 180 pixels, fo p mat PNG. What is especially pleasant for us is that it is close to monochrome (when there are only two colors, black and white) and with a transparent backing. This means that transformations and losses will be kept to a minimum.
Having saved the selected picture, open the graphic editor and upload it there. Let's say this is our first frame. Let's resave it as a GIF. We can leave all settings except one at default. The only value we change is the number of colors. We set it to minimum to obtain the minimum file size. Even though our image seems to have only two colors (black and white), there is one more value for which a color must be reserved - the transparent background of the design - the frame of the ball. Saved... 
Now let's quickly take the next few shots. I worked in Adobe Photoshop. Using the Elliptical Marquee Tool, select a circle along the contour of the ball. When we are sure that all its edges are captured in the selected area, select Free Transform from the context menu (by right-clicking on the selected area). A rectangle with several anchor points will appear. Using the space surrounding the image with the transformation hint icons that appear, let's rotate the rectangle by about 45 degrees. It is very easy to “catch” this value even by eye, and reference points simplify this task to a minimum. Confirm the turn. This is our second frame. We save it, like the first one, in the Save for Web item. The settings are the same, the number of colors is 3.
The operation of turning the ball "manually" in Adobe Photoshop
Then the actions will be repeated. Select Free Transform and rotate it another 45 degrees. Let's save. It is easy to calculate that we will need 8 frames, because 8 times 45 equals exactly 360 degrees or a full rotation. Of course, if you take not 8, but 16 frames (then the rotation will need to be done in increments of 22 degrees 30 minutes), the movement of the ball will be smoother. So, all the frames are ready. Close Photoshop, open GIF Movie Gear and start gluing. To do this, add all the saved pictures-frames one by one. Or we select everything at once and drag it with the mouse into the work area - the Drag-and-Drop operation is as effective here as always.
Added 8 pictures will make up a full-fledged animation
We've just started, but we're almost done! All that remains is to set the intervals between frame changes. Let's make a ball rotating at a constant speed, that is, all our delays will be the same. They are selected experimentally in the preview window. I liked the movement with a delay of 13 (hundredths of a second).
While watching the video being assembled, we select time delays between frames so that the movement is as close to reality as possible, not too fast, but without jerks. You may have a great look. We indicate the selected value for all intervals. After the eighth frame, the picture will jump to the first, and the ball will continue its rotation, in an infinite number of cycles, until the picture closes. Exit the preview window and save the file.
This is what we got. Quite a large animation drawing in 12 kilobytes.
Done, in no more than half an hour we made a very passable animation that can be placed somewhere in the far corner of your site to slightly enliven a boring page. If you want the ball not just to rotate, but to fully “roll” across the page, you only need a long banner rail. Place the first frame at its right end, and all subsequent frames with a slight shift to the left. Although, due to the angle of view from which the first picture was taken, the ball is not rolling, but rather "spinning", it will now be closer to becoming moving. Better results (both in terms of compression and visual effect) can be achieved if you additionally retouch single frames or select the best picture. You can also reduce the size by eliminating the transparent backing and replacing it with a white background.
The above example is not an elegant solution, but it is quite simple and indicative. Now let's look at another one, literally two-kopeck in its simplicity - a “flashing” banner. Although it could be a button or any other element on a web page. A similar effect is achieved by contrasting changes in the colors of the picture.
Let's launch MS Paint to create a template. Let's open a new document with the dimensions needed for the image, say 160 by 40 pixels. Fill the entire background with green and write on it in white letters. Save the drawing. By the way, it is not at all necessary to save it as a GIF, since many animator programs support a large number of input formats, including the popular bmp and jpeg. Next, fill everything with white (or select everything and press Delete), and in the same place where we did it the first time - apply the same inscription, only now with a green background color.
Strictly speaking, the same thing can be done in one picture, simply filling the background and inscription with other colors, or in Photoshop, using 2 layers. In any case, we save it under a new name. The second and last frame is ready, we won’t have any others. You can start assembling. This stage will be very simple, because we only have two frames. But if this is not at all interesting, you can play with them. Let's place, for example, this small sequence several times in a row. Let's set equal small time intervals between them, say, ten hundredths each. And at the border of the transition from the first one we will set a large delay, for example, a second. As a result, we will get a different banner. 
A flashing banner, even a small one, immediately catches your eye
Please note that such solutions must be used very carefully and limitedly. Despite the fact that flashing elements attract attention well, their abundance will quickly get boring and will only irritate the user, especially if he spends a certain amount of time reading something on the page and does not quickly follow the links...
Currently, there are various technologies for creating animation:
Classic (traditional) animation represents 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.
Stop-frame (puppet) animation. Objects placed in space are fixed by the frame, after which their position changes and is fixed again.
Sprite animation 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. Pictures are obtained by visualizing a scene, and each scene is a set of objects, light sources, textures.
Motion Capture- the first direction of animation, which makes it possible to convey natural, realistic movements in real time. Sensors are attached to the live actor in places that will be aligned with control points in the computer model to input and digitize movement. The actor's coordinates and orientation in space are transmitted to the graphics station, and the animation models come to life.
Principles of Animation
When creating animated films, some general principles. Most of them are formulated for Disney animation and originally applied to cartoons made in traditional animation techniques, but almost all of them are applicable to other technologies.
Here are the main ones:
“Compression and stretching” (squash & stretch). This principle revolutionized the world of animation. The essence of the principle is that a living body always contracts and stretches during movement. Before a jump, the character is compressed like a spring, but during a jump, on the contrary, it is stretched. The main rule in this case is a constant volume - if a character is stretched (stretch - deformation along the Y axis), then he must be compressed to maintain the volume of his body (squash - deformation along the X axis).
"Preparatory action" (Anticipation). IN real life To perform any action, a person often has to make preparatory movements. For example, before jumping a person needs to sit down; in order to throw something, the hand must be brought back. Such actions are called refusal movements, because before doing something, the character seems to refuse the action. This movement prepares the viewer for the character’s subsequent action and gives inertia to the movements.
Staging. For the audience to correctly perceive the character, all his movements, poses and facial expressions must be extremely simple and expressive. This principle is based on the main rule of the theater. The camera should be positioned so that the viewer can see all the character's movements.
“Key frames” (Pose to Pose). Before the discovery of this principle, movements were drawn, and therefore the result was difficult to predict, because the artist himself did not yet know what he would draw. This principle involves preliminary composition of movements - the artist draws the main points and places the character on the stage, and only then the assistants draw all the frames of the movement. This approach dramatically increased productivity because... All movements were planned in advance, and the result was exactly as intended. But in order to create any specific movement, careful elaboration of each “piece” was necessary. When developing expressive poses, the artist puts all his skill into it, so these moments should be visible to the viewer longer. To do this, assistants complete the movements so that most of the frames end up next to the key poses. In this case, the character seems to slip movement from one layout to another, slowly emerging from a pose and slowing down at another.
“Follow through”/ Overlapping actions).
The essence of the principle is that movement should never stop. There are elements such as ears, tails, clothes that must constantly be in motion. “Through movement” ensures continuity of movement and smooth transition of phases, for example, from running to walking and vice versa. The movement of individual elements of the body, while the body is no longer moving, is called overlap. Overwhelm is expressed in scenes of changing phases of movement. If a character suddenly brakes after running, the soft parts of the body cannot stop along with the hard ones and a slight overlap occurs (hair, ears, tails, etc.). When walking, the movement starts from the hips and then extends to the ankles. Thus, all the character’s movements are connected in a separate chain, and it becomes possible to strictly describe the rules by which he moves. A movement in which one element follows another is called through motion.
"Movements along arcs" (arcs). Living organisms always move along arcuate trajectories. Before this, the method of rectilinear movement was used, and therefore the movements looked mechanical - like those of robots. The nature of the trajectory depends, as a rule, on the speed of movement. If the character moves sharply, the trajectory straightens, but if it moves slowly, the trajectory bends even more.
Secondary actions. Often, secondary movements are used to give the character greater expressiveness. They serve to focus attention on something. For example, a grieving character may frequently blow his nose into a handkerchief, while a surprised character may twitch his shoulders. Secondary actions have become widespread in world animation. Thanks to their use, the characters become more alive and emotional.
Timing. This principle allows you to give the character weight and mood. How does the viewer judge the weight of the characters? The character's weight consists of factors such as movement speed and inertia. In order for the character to move according to his weight, the artist calculates the movement and overlap time for each character. When calculating time, weight, inertia, volume and emotional condition hero. The mood is also conveyed by the speed of the character's movements. Thus, a depressed character moves very sluggishly, while an inspired one moves quite energetically.
Exaggeration and Caricature. Walt Disney always demanded more realism from his workers, in fact striving more for "cartoon realism." If a character was to be sad, he demanded that he be made gloomy, but a happy one had to be made dazzlingly shining. With the help of exaggeration, the emotional impact on the audience is increased, however, the character becomes caricatured.
Professional drawing. Drawing is the basis of everything. At the Disney Studios, it's quite common to see signs like: "Does your drawing have weight, depth, and balance?" The principle of professional drawing also prohibits drawing “twins”. “Twins” are any elements of a drawing that are repeated twice or are symmetrical. “Twins” very often appear against the will of the artist, without noticing it, he draws two hands in the same position.
Attractiveness (Appeal). The attractiveness of the character is the key to the success of the entire film. How can you tell if a character is attractive? Any object can be attractive if you look at it with pleasure, discovering simplicity, charm, good design, charm and magnetism in it. It is impossible to take your eyes off the attractive character. Even the nastiest movie character must be attractive to keep viewers glued to the screen.
Rasterization of full-color documents
Full-color documents are output sequentially onto four films, corresponding to the four basic components of the CMYK model.
On the other hand, the base colors are screened separately at different screen angles. Traditionally, the tilt angle when printing monochrome documents and when printing with spot colors is 45° - this value, as practice has shown, provides the best masking of the linear structure of the raster.
In practice, you have to deal with different raster angles exclusively when printing with process colors. It should be borne in mind that it is simply impossible to apply process inks to a sheet without changing the angle of the raster - otherwise the color dots corresponding to the base colors will simply be printed on top of each other.
The raster angles for the base colors must be selected in such a way that all dots are visible - without this, the colors will not be able to mix in the eye of the beholder to form the desired color. And in this case, it will not be possible to avoid partial overlap of the points with each other, but since process paints are translucent, this is not a problem
Animation is usually called the artificial representation of movement in cinema, television or computer graphics by displaying a sequence of drawings or frames at a frequency that ensures a holistic visual perception of images.
Animation, unlike video which uses continuous motion, uses many independent drawings.
Synonyms for "animation" - "animation" - are very widespread in our country. Animation and animation are just different definitions of the same art form.
The term more familiar to us comes from the Latin word ʼʼmultiʼʼ - many and corresponds traditional technology reproduction of the drawing, because in order for the hero to “come to life”, you need to repeat his movement many times: from 10 to 30 drawn frames per second.
n 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.
n Stop-frame (puppet) animation. Objects placed in space are fixed by the frame, after which their position changes and is fixed again.
n Sprite animation is implemented using a programming language.
n Morphing is the transformation of one object into another by generating a specified number of intermediate frames.
n Color animation - with it, only the color, and not the position of the object, changes.
n 3D animation is 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.
n Motion Capture is the first direction of animation, which makes it possible to convey natural, realistic movements in real time. Sensors are attached to the live actor in places that will be aligned with control points in the computer model to input and digitize movement. The actor's coordinates and orientation in space are transmitted to the graphics station, and the animation models come to life
Transformations are often at the core of animation. For example, skeletal animation results from a sequence of transformation matrices applied to the bones of the mesh's skeletal structure.
These transformations include translation, scaling, and rotation. Most of the transformations are rotations. Bones rotate at joints; usually only the root bone can move around the world, and even then it's better to transform the world (rather than move the bones directly).
Based on the degree of detail of the frame-by-frame image, a distinction is made between classic (detailed) and limited (limited) animation. In the first case, a significant number of drawings for every second of screen action is extremely important. Sometimes each frame requires a separate drawing. Limited animation uses as many repetitions of already completed phases as possible. As a rule, in this kind of films no more than six drawings are spent per second of screen time.
Detailed animation is required when calculating fast and smooth movement. Otherwise, fast movement will not be read on the screen, and slow movement may be accompanied by trembling of contour lines. In other cases, limited animation is quite justified. In this case, the technique of doubling working frames is often used (changing images 2x12 times per second instead of the normal 24 will still be perceived by the eye as continuity). The visual effect is virtually indistinguishable, and the resource savings are significant.
Animation quality is sufficient relative indicator. Previously, it was measured by the number of frames per second.
The human brain does not have time to perceive the entire sequence of 25 frames, it only grasps the movement, and for this 3-5 frames per second are enough. For this reason, the quality of animation does not depend on the number of frames per second, but on the quality of motion transmission. Correctly drawn frames seem alive even individually. The principles of Disney animation were learned through practical experience, based on the experience of specific daily work. They turned out to be so effective that their study became mandatory, first for Disney animators, and then for animators around the world.
In general, this is the most complete set of technological techniques necessary to create an image and its dynamics in animated film. Films constructed in accordance with these principles are convenient and comfortable to watch. Disney uses the following 12 principles of animation to create its films:
n compression and tension;
n preparation, or anticipation (refusal movement);
n stage performance;
n layouts and phased movement;
n through movement (or finishing) and overlap of action;
n “slow entry” and “slow exit”;
n movements in arcs;
n additional action, or expressive detail;
n timing;
n exaggeration, exaggeration;
n ʼʼstrongʼʼ (professional) drawing;
n attractiveness.
In 1996 ᴦ. Macromedia has developed a flash graphics standard. The main purpose of this graphics technology is to create high-quality animated images for web pages. The need to transmit web pages over communication lines in computer networks dictates one of the basic requirements for picture creation technology - the small size of the resulting file.
At the root of flash animation, a popular technology for creating animation, lies vector graphics. This technology allows you to realize movement, smoothly changing the location, size and color of objects in the drawing, as well as show the smooth transformation of one object into another.
Anime - Japanese animation.
Unlike cartoons in other countries, which are intended mainly for viewing by children, most of the anime produced is designed for teenage and adult audiences, and largely due to this, it is highly popular in the world. Anime is distinguished by a characteristic manner of drawing characters and backgrounds. Published in the form of television series, as well as films distributed on video media or intended for film screening. Plots can describe many characters, differ in a variety of places and eras, genres and styles.
Anime came from three things:
‣‣‣ manga (characters and plot)
‣‣‣ Japanese theater kabuki and bunraku (themes and subtexts)
‣‣‣ Disney animation (technology),
which later transformed into a completely new style. The first two things are key - they are what separates the anime from the rest of the animation. Due to the fact that anime originated from Disney, it uses many of the principles of Disney animation, but most of the principles have been changed.
Compression and stretching (squash&stretch).
Compression and stretching are used quite sparingly. While Disney's work is close to caricatures (cartoon - the original meaning of caricature, later cartoon), anime is closer to realism.
Anticipation (or refusal movement)
Preemption is used only where it cannot be avoided. These are jumps, battles and all kinds of spells. Any Disney principle is an exaggeration, in connection with this, very often Disney characters, before running, carry out a kind of swing of their legs, etc., which looks too funny. Anime films are more theater than caricature.
Staging.
In anime, all the attention is focused on the character's facial expression and posture, which leads to a greater emotional impact on the viewer.
Follow through and Overlapping actions.
In no animation in the world is end-to-end movement developed like in anime. The characters' hair almost always flutters in the wind. The cloaks of wizards and knights can flutter even in enclosed spaces. The Japanese pay a lot of attention to through movement and overlap, this gives the characters an even more lively look.
“Ease In & Ease out”.
Japanese animators enhance the effect of the principle to give greater inertia to the character.
Secondary actions and exaggeration.
In anime, these two principles are used together. Separately, they simply do not exist. The most characteristic moment where this principle is used is the surprised expression on the characters’ faces. At the same time and without that big eyes almost doubles in size.
Professional drawing.
Anime and professional drawing are inseparable concepts. In Japan, character design is done by individuals.
Attractiveness (Appeal).
The attractiveness of anime characters consists of several factors:
§ large eyes, which were inherited from Disney, give the hero a youthful and friendly appearance;
§ big head - makes the heroes look like children. Even the most scary monster can become more harmless than a mouse if its body proportions are slightly changed. Adult characters often have very long legs (slightly longer than the torso and head), making them look slimmer. The first two factors are united by the caricature style of “super-deforme”
Sound is a physical phenomenon that is the propagation of mechanical vibrations in the form of elastic waves in a solid, liquid or gaseous medium. In a narrow sense, sound refers to these vibrations, considered in relation to how they are perceived by the senses of animals and humans.
Like any wave, sound is characterized by amplitude and frequency spectrum. Typically, a person hears vibrations transmitted through the air in the frequency range from 16-20 Hz to 15-20 kHz. Sound
‣‣‣ below the human hearing range is called infrasound
‣‣‣ higher: up to 1 GHz, - ultrasound
‣‣‣ from 1 GHz - hypersound
Digitization of sound in a PC is carried out as a result of the processes of sampling and quantization, which occur simultaneously.
Sampling is the conversion of a continuous audio signal into a set of discrete signal levels. With the help of time sampling, a continuous sound wave is broken into separate small time segments.
During the quantization process, the volume level (sound intensity) is determined for each such section.
Audio sampling rate is the number of sound volume measurements per second. It can range from 8000 to 48000 sound volume measurements per second (8 - 48 kHz;).
It is believed that the range of frequencies that humans hear is from 20 Hz to 20 kHz.
From the Nyquist-Kotelnikov theorem, in order for an analog signal to be accurately reconstructed from its samples, the sampling frequency must be at least twice the maximum audio frequency of that signal. If we assume that the maximum audible frequency is 20 kHz, then the minimum required sampling frequency is 40 kHz.
Today, the most common sampling rates are 44.1 kHz and 48 kHz. Recently, it has been found that overtones above 20 kHz make a significant contribution to the sound. For this reason, converters using 96 kHz and 192 kHz sampling rates are emerging, and systems with 384 kHz sampling rates are expected in the near future.
Taking into account the dependence on the nature of the sound and the requirements for its quality and memory size, choose sound digitization parameters.
When registering for CD 16-bit encoding is used at a sampling rate of 44.032 kHz. When working only with speech signals 8-bit encoding at 8 kHz is sufficient.
