Examples of frame-by-frame animation. Stop-motion animation in Anime Studio Pro


This article opens a series of materials within the framework of a special project of the World 3D portal “Special effects: the pre-computer era”.

Every Friday a new article is being published that talks about the development of one particular technique in the field of effects: from idea to implementation in cult films. Famous directors and unknown creators of film effects, the most interesting and incredible facts in the history of cinema. This is how the secrets of creating movie magic are gradually revealed.

Special effects in movies have been around almost since the very first days of cinema. Back in 1895, the director Alfred Clark(Alfred Clark), filming the scene of the execution of Mary Stuart, asked his actors to freeze after the executioner raised the ax, then he stopped the camera, replaced the actress with a doll, and continued filming. Viewers saw a scene in which a live actress enters the scaffold, the executioner raises an ax, lowers it, and the head falls from the scaffold, and all this without editing. Naturally, the audience received an unforgettable experience.

A year later, the French cinematographer Georges Méliès(Georges Méli ès) discovered the same technology quite by accident. One day, while filming on the street, his camera jammed. While he was fixing it, the bus left and the pedestrians left. When the director looked at the result, he saw that the bus had simply disappeared, and the female pedestrians had turned into men. This prompted Méliès to further explore the field of special effects in cinema. Back at the beginning of the 20th century, he managed to combine animation, matte painting, live actors and miniatures in the film “A Trip to the Moon.” Méliès also invented multiple exposures, rapid-fire photography, and gradual transitions from one frame to another. All these techniques are successfully used today.

But Méliès was not alone. Albert Smith(Albert Smith) and James Stewart Blackton(J. Stuart Blackton) invented the technology of stop-motion animation. In their film Humpty Dumpty Circus (1898), stop-motion animation brought puppets to life. In 1907, Blackton released The Haunted Hotel, a highly successful film made using this technology. Regardless of them, other filmmakers in different countries discovered this technique.

The principle of frame-by-frame animation is simple: a character doll is created, whose arms, legs and head can be fixed in any position, and then it is photographed - not filmed, but photographed - one frame at a time. But the doll itself cannot move, so the animator sequentially gives it different poses, gradually shifting its position for each frame so that during normal viewing at a speed of 24 frames per second, it seems to the viewer that he is seeing movement captured by a movie camera. This is a very complex, lengthy process that does not tolerate mistakes - the animator must clearly understand where everything is moving, and where the movement of each part of the puppet ends (for example, a scarf or hair fluttering in the wind). The same principle is used when shooting plasticine cartoons. Anyone with a digital camera and enough patience can make a cartoon like this.

But let's get back to the movies. The most famous stop-motion animation director was Willis O'Brien(Willis H. O'Brien), the man who gave "King Kong" to cinema. Back in 1917, he shot his first film "Dinosaur and the Missing Link", the topic seemed interesting to him, and in 1925 he filmed "The Lost World" Arthur Conan Doyle For the first time, a steel “skeleton” of a dinosaur was invented for this film, consisting of “joints” that could bend like real ones. For this film, fifty dolls were created, “dressed” in latex and wool, “The Lost World” became a hit. film distribution - viewers were amazed by the realism of the shooting.

Still from the film "King Kong" (1933)

O'Brien's next big hit was King Kong. Willis made the frame for Kong, and Marcel Delgado(Marcel Delgado), his assistant, created the appearance of the famous monkey - from rubber, foam and skin. By the way, when Peter Jackson did the remake, he really wanted to achieve a portrait resemblance between his Kong and O'Brien's, but for some reason he couldn’t. The animation of Kong and other living creatures of the island lasted almost a year, some of which migrated to this film from O'Brien's previous film. Willis sat at the zoo for a long time, studying the habits of gorillas in order to give his “ward” realistic movement. King Kong, released in 1933, became a box office hit, grossing $90,000 on its opening weekend, an all-time record at the time. O'Brien's masterpiece inspired many young animators, one of whom was thirteen-year-old Ray Harryhausen(Ray Harryhausen) He got into the Kong movie quite by accident: his aunt knew people from show business, and took her nephew with her when she had an extra invitation. This trip to the cinema determined Ray’s entire future fate.

Combined shooting: actress Fay Ray and petite model Kong
Still from the film "King Kong" (1933)

The boy immediately realized that Kong was not a man in a suit, and he really wanted to figure out how they did it. The young animator also began making dinosaurs and filming them in his garage. His parents supported him in every possible way - Ray's father worked as a mechanic and helped him create skeletons from rebar. And then fate intervened in his life once again. Ray noticed that his classmate was reading a book about King Kong, which turned out to be a script for the film. After talking with her, he found out that she was O'Brien's niece. So Harryhausen came to visit his idol, who supported the young talent - immediately after school, Ray got a job in show business. At the age of 22, he was already a cameraman, director and producer of animated films.

Ray Harryhausen and model Joe Young.

In 1946, Willis O'Brien called him and offered to work together on a new film about an unusual gorilla. Ray was happy to work with his guru. Their collaboration, “Mighty Joe Young,” was released the same year. It was another box office hit and earned O'Brien a special Oscar - the first Oscar for special effects in film history. And although all the laurels went to the senior guru, in fact, most of the work was done by his young ward.

Fight with skeletons in the film "Jason and the Argonauts"

In 1963, Harryhausen directed the film Jason and the Argonauts, for which he created the most complex scene in cinema of that time: seven bone-rattling skeletons engage in battle with the Argonauts. During rehearsals, the skeletons were replaced by stuntmen so that the actors knew exactly how they should act. The artists memorized all the movements, like dancers memorize dance moves, and during filming they simply performed their combat steps. Then Rey replaced the void with his skeletons. On average, the animator created only 13 frames per working day, and the entire three-minute scene took him four and a half months of work. The film also featured harpies, a multi-headed dragon, and a living statue of Talos, also animated using this technology.

Ray Harryhausen at work

Harryhausen's favorite character was the Gorgon Medusa, created by him for his last film, Clash of the Titans (1982). During filming, he had to animate and memorize the movements of more than two hundred “joints” of her body and hair.

In 1992, Ray received a special Oscar for his contribution to the development of cinema. When asked why he no longer films, Harryhausen replies that with age he has lost the necessary patience, and the slowness of the process has become annoying. Just as he was once inspired by O'Brien's work, Harryhausen's work has in turn inspired directors such as Steven Spielberg, Tim Burton and Peter Jackson.

Lucasfilm animation team and their models. Phil Tippett - far right

Stop-motion animation technology was used to create the walking tanks of the Empire in the film The Empire Strikes Back. The process was supervised by another famous animator - Phil Tippett(Phil Tippett) In general, Tippett did a lot for the classic Star Wars: one of his first works in the trilogy was the holographic chess played on board the Millennium Falcon. He was also responsible for the animation of the rancor and speeder races in Return of the Jedi, but more on that later. Before starting to animate the walking tanks, Tippett's team studied the elephant's movements in detail, even chalked markings on the poor guy's body to resemble a skeleton, filmed his movements, and then used the movement of the chalk markings to animate the models. In addition, the animators had to create a lot of hand-drawn rough cartoons - pre-visualizations - in order to clearly understand how these layouts should move. In general, effects are often drawn out in great detail in advance so that both the director and the animating team clearly know how the shot will be constructed, who will move where in it, and how the camera will move. After all, in the end, both parts of the frame, the one that is filmed “live” with the actors, and the one that is created a few weeks later in the film studio pavilions, will have to create a single image on the screen. Therefore, the camera movement in both cases should be repeated absolutely identically. In the case of walking tanks, camera movements were recorded into a computer (motion control system was invented during the filming of A New Hope), and then, if necessary, the animators could make several takes of the same scene - the camera “remembered” its location herself.

Animator at work

“The pavilion was littered with baking soda and small glass beads,” Phil says about the filming process. - Therefore, if you forgot and put your elbow somewhere, you could disrupt the unity of the court. Not to mention that if someone were to sneeze, he could blow away all the “snow”... We made small doors in the “floor” of the studio, behind which we hid while filming shots. It was a long, painstaking process - open the door, move the model, close the door, click, open the door... and so on for several weeks.” Sometimes it took a whole hour to make one second of the film. And if the animator made a mistake in the model’s movements, then everything had to start over.

“When I’m working,” says Phil, “no one should walk, talk, or distract me in the studio. I concentrate very much, because you cannot forget a single movement, not a single “joint”, you must remember exactly the direction of movement, keep the entire scene, the entire path of the model in your head. Sometimes 150 frames that run on the screen in 6-7 seconds take up to 12 hours of work.”

Phil Tippett animates a rancor

Phil Tippett is known for modifying stop-motion animation to add movement. From ordinary frame-by-frame animation, he made dynamic frame-by-frame animation (from stop-motion animation he made go-motion animation). Everything seems to be very simple. If you look closely at a fast running dog, you will realize that you do not see its paws - they move too quickly and seem to blur, you do not see clear contours of the paws at any given time. And if you take a photo of it, then in the photo you will also get a blurry spot instead of paws. But when using frame-by-frame animation, each frame is shot statically, so the outline of the animated object always looks very clear. This gives it such a slightly unreal, cartoonish look that can be clearly seen in the latest Harryhausen film “Clash of the Titans” - the wings of a pegasus in flight are always very clearly outlined, which should not be the case.

The rancor model is ready to go. Pay attention to the design that controls the movement of the doll (bottom)

Tippett realized that the alien tun-tun beast that carries the characters in The Empire Strikes Back didn't look realistic enough—it lacked movement. So the puppet's skeleton was modified by adding a motor that moved it whenever the animator filmed. Thus, the creature’s legs became blurred, a clear outline was lost, and the viewer received the complete illusion of rapid movement. The rancor was animated in the same way in Return of the Jedi.

Since then, dynamic frame-by-frame animation technology has been used very widely. For example, in 3D animation, which is ubiquitous today. Tippett himself helped create the dinosaurs in Steven Spielberg's Jurassic Park. His ability to break down movement into intermittent parts and remember what goes where in each frame was very useful. Phil moved the models, and the computer recorded all the movements. Then the entire sequence was superimposed on 3D digital models. Tippett's studio is still engaged in the creation and animation of various fantasy characters, only on computers. We could see Phil's work in the films "Robot Cop", "Star Troopers" and "Spiderwick Chronicles", and now he is working on the second part of "Twilight".

Phil Tippett on the set of Spiderwick Chronicles

Important note. If you need to quickly create simple animation from several frames in Photoshop, go to the lesson - .


I have been interested in stop-motion animation for quite a long time, although I have studied little material. All the books I started reading were quite long, difficult and “dry”.

Therefore, after I began to understand a little about the technology of creating animations, I began to look for ways to bring them to life using Photoshop.

Many people advised me to switch to other programs (for example, TVP Animation Pro), but I, not wanting to adapt to the new interfaces of other programs, decided to do everything in Photoshop.

And I wrote this lesson specifically for those who did not understand the technology of creating frame-by-frame animations specifically in Photoshop. Who didn’t want to dig a little and understand what’s what?


I will touch on two topics: short animations and long ones. You should not scroll through the type of animations that are not interesting to you: there may be information there that will be useful to you for animations of the type you need.


Short animations– these are animated avatars, emoticons, etc.

Long animations– these are cartoons, videos, etc.


First I will tell you the theory and then we will create animation in practice.

Important addition

Many people ask: “Why is my animation so jerky, why is my character/object moving fast/slow?”
The answer is: your character/object moves fast because you drew few frames.

Your character/object is moving slowly because you drew many frames.

Your character/object is jerking because you didn't follow the previous movement and drew the next one, which is not consistent with the previous one.


Remember: in one second 24 frame!


So when you get ready to create your animation, remember: 24 frame = 1 second, 24 frame = 1 second. Never forget this very important detail.

Short animations

I think you have often come across animations on avatars, animated emoticons.
Some emoticons are made in Flash, but I draw mine in Photoshop. Don't think that such short animations are easy to make. On the one hand, yes, they are small in size, but on the other hand, while you draw these 15 -30 frames, you'll get busy (imagine, if you want to create a three-minute clip, then you'll have to do 4320 frames!).

What should you remember and know?

Let's say you wanted to draw a girl with wind-blown hair for your avatar. Means:


Firstly, hair is not cardboard - under the influence of a moderate wind, it will form transverse waves.


This is roughly how it is shown in the diagram:


Under the influence of a strong wind, the hair will be almost straight, but your character will have to close his eyes tightly and grab onto something to avoid being blown away, since in reality few people can withstand such wind. although this type of animation can be used when your character is riding a bike, for example.


And finally, a gentle breeze gently lifts and lowers your hair.



Light wind:


Medium wind:


Strong wind:


The same applies to fabric and clothing - they will behave in much the same way as hair.


And now, for example, you wanted to draw an animation with the movement of your character and object. Means:


Secondly, any action begins somewhere. Have you ever noticed that, for example, to get up from a chair, you first move it a little and lean forward a little, and only then get up? or that when you want to make a hit with the racket, you first move it away and turn your body along with it, and only then make a blow?

There are a huge bunch of such examples, but it’s better to look:

To avoid getting into trouble with these movements before actions(DPD), analyze and observe the movements of people or animals more often.

Small addition

In general, never forget about physics. The weight of objects, the materials from which they are made (elasticity, softness, hardness, etc.), all this is needed.

Realize that without this, your animation will be dead, terrible and ugly!

Better work on it and never rush.

Long animations

Oooh, this is where the fun begins!


Have you often, while watching cartoons or anime, admired animation and envied those who know how to make them? All these wonderful scenes, plastic movements and much more. etc.? I honestly admit - yes. Every time I watch something, I try to understand how the animators worked with it? How did they create all this?


But, due to the fact that I don’t know what programs they work in, I’m trying to understand the whole process using Photoshop mechanisms.

And you know, I find answers to all my questions!


But let's take everything in order.

The process of creating a long animation

1. Initially we need an IDEA

For example, you decided to make a short video in which several girls will dance.

If you are a seasoned animator, you can “make someone dance” in your video from 3 and more girls.

But at the beginning of your animator’s journey, it’s better to limit yourself to one or two.

2. Now you need to create a scene-by-scene storyboard (RPS)

What is it and what is it eaten with?


Imagine a movie. Now imagine the number of different views from different cameras. Close-up, landscape, camera following the character...


It's okay when there aren't so many of them. But when we make a whole clip there can be more of them 30 things!
That's why smart animators use such a wonderful thing that looks like a lined book.

In it they depict scenes.

Only some draw one scene in each section of the table, then another, a third, etc., while others draw images in each section of the table after a few seconds (I apologize if I didn’t explain it clearly).



It’s also very convenient that you can do it on the side of the description, otherwise, sometimes you draw it, then after a while you look at it and don’t understand - what did I depict here?


So we take note of this storyboard for the scenes and use these books.
You don’t even have to make a book, but simply create a large file in Photoshop and draw all the scenes there.

3. Now you need to come up with a background, character concept and movement

We draw the movements in the RPS book.

If you have more than one scene in a video, you will have to draw several different backgrounds. Draw them in separate files.
And remember one thing - the background does not appear out of thin air. So if you want the camera to kind of move to the side, then the background should be there too. those. you will have to draw the background in length (or width, or maybe both) more.

Then you design the look of your character and start creating the animation.

Moving from theory to practice

From now on, let’s think a little about the IDEA and, in general, about the point “The process of creating animation.” What am I talking about? Moreover, now you will need a guinea pig whom you will force to move. We won't make a video in which 4320 frames. The best and easiest way to understand is how to create a frame-by-frame animation using 24 -72 - frame animation.


Well, let's begin!


1. Let's create a new document. For my animation I took a small size - 400 x 500 px.


2. Now, if you don't have a window at the bottom left " Animation", look up, open the tab " Window» - « Animation».*


* - The examples use the Russified version Photoshop CS2.


In the screenshot above we see the animation window in which there is the first frame, below it is a small panel on which the buttons are located:

Always/once- by selecting “Always” you will loop the animation. If you select Once, the animation will only play once. (In my lesson there are both versions of animations: looped - where the principle of DPD is shown, reproduced once - where the scene change is shown).

Select first frame- takes us back to the very beginning.

Selects the previous frame- Let's not call Cap. (=

Plays animation/Stops animation- Play/Stop.

Selects next frames- next frame. Your Cap!

Tweens animation frames- using this button we can add smooth transitions between two frames by adding new ones.

Duplicates selected frames- not quite the correct name... It would be better to say “Adding a new frame”.

Deletes selected frames- basket.


3. Now we can start drawing. To do this, place the background you created earlier on Background(Background/Background).


4. Then create a new layer (Ctrl+Shift+Alt+N) and draw your character on it.

4. Now comes the hard part: we need to draw the same character many times in a row in different poses.


We create a new frame, and... There are two options:

A) Either you start drawing your character anew each time, or...

B) Copy the previous layer and change it (you finish drawing and erasing, rather than using transformation! You will rarely need such a tool, I’ll write later when).


Once you get some training in animation, you can use both options painlessly. (You can try each of them in a separate document).

Option A:

1. We drew our first frame.

2. To see how to change the next one, we reduce the layer's opacity to about 30% and create a new layer on which we draw the rabbit for the second frame.

3. We finish drawing the second frame and turn off the visibility of the previous, first layer.


Option B:

1. Create a frame with the character and make this layer invisible.

2. Then duplicate it (Ctrl+J) by dragging the layer onto the “Create a new layer” button to the left of the trash can.

3. Now we make the second layer visible and begin to change it.

Thus, by duplicating the previous layer, you create new frames and change them, and not the same one.


5. We sit and draw frames 10 -15 ...


6. And let's see what happened.


It turned out to be a running rabbit.

Moreover, not a single part of it is copied: each frame is drawn anew.


See for yourself:


When creating an animation, you should remember that it is quite difficult to switch between hundreds of layers, and therefore you should not put off painting or changing anything until later. Do it right away.

Almost the end

Above I made a reservation about the tool ().
It is worth using it when, for example, you want to zoom the camera away, bring it closer, rotate it, etc. (If you only need to move the background, use video editors, it will be easier for you). Don't use distortion, tilt, or other transformation tools unnecessarily.



And, after we have saved our gif-animation as video file format .avi, for example, you can safely go to Windows Live Film Studio.
From there, do whatever your heart desires with your clip.


And then you can upload your clip to youtube.com and enjoy the work you've done.



THANK YOU VERY MUCH for your attention, Lero-art was with you. Excuse me for the tongue-tiedness, strange presentation and other flaws in the lesson, if any. All of them are due to the fact that thoughts are confused, and words do not form into sentences...

But I hope you learned something new and interesting for yourself!

Two types of computer animation

Computer animation and video (in the future we will use these terms as synonyms, since there is not much difference between them) can be frame-by-frame or transformational.

Stop motion animation

Stop motion animation(it is also called classical) is a set of frames stored as separate images and replacing each other at high speed. This is the oldest and most reliable method of storing a moving image on any medium (film, paper, magnetic tape, hard drive, CD, DVD). An example of a five-frame frame-by-frame animation is shown in Fig. 1.6.

Absolutely all films created by hardworking humanity up to this point in time are frame-by-frame animation. Of course - after all, the very principle of operation of a movie camera is based on fixing on a light-sensitive film many still images, each after a certain period of time. Twenty-four (standard frame rate of “big” cinema) times per second the movie camera orders: “Stop, just a moment.” Any film consists of many thousands of such “stopped moments.”

A video camera works in a similar way. True, in this case the process of creating a sequence of frames is not so obvious: the information is recorded electronically on a magnetic medium, and cannot be seen with the naked eye. But, you can believe, everything here is absolutely the same as in the case of a movie camera.

And if you take hand-drawn and puppet-animated films, then frame-by-frame animation exists in its pure form. Each frame of the film is drawn or lined up on stage, after which a single frame is taken with a movie camera. Then the next frame is prepared - and so on, until the entire film is ready. Hell of a job... Of course, now there are many technical innovations that make the work of an animator easier, including computers, but the principle remains the same.

Why did people fall in love with stop-motion animation? Instead of answering, let's consider all its advantages.

Relative obviousness of creation. In fact, in order to make an animated film, you just need to draw all the frames included in it and transfer them to some kind of information medium. Well, it’s obvious, but by no means simple...

Ample opportunities for creativity. Well, there’s nothing to talk about here!..

Unfortunately, that's where the benefits of stop-motion animation end. And the shortcomings begin.

The great labor involved in making films. If every frame is drawn by hand and no technical means are used to facilitate the work, the process of creating a film can drag on for many months, or even years. (Ordinary films are created much faster, since they do not need to draw frames - the operator simply captures the real scene.) And the notorious technical means do not speed up this process much.

Big problems encountered when saving stop-motion animation digitally.

Let's stop here and talk about converting films to digital form ( digitization) and their storage.

Each of the many frames that make up a movie takes up a certain amount of disk space when stored. Let's assume that this space is 100 kilobytes - this is not even enough to store a full-color high-resolution image in JPEG format. Now let's assume that the number of images is 100,000 - that's how long our movie is. Multiplying 100 by 100,000, we get 10,000,000, i.e. approximately 10 gigabytes (approximately, because a gigabyte is not 1,000,000,000, but 1,073,741,824 bytes). It turns out that to store a movie we need a whole hard drive or about 2.5 DVD discs, and it’s just scary to think how many regular CDs will be needed for this!

What to do? Of course, compress the film more tightly! And at the same time compress the soundtrack, if any.

Lossy compression is almost always used to compress films. As we already know, in this case some part of the information that is not really needed during playback is discarded, due to which the file size of the movie becomes noticeably smaller. Moreover, algorithms that implement film compression analyze each frame and store in the resulting file only data about the differences between adjacent frames. This further reduces the size of the compressed movie.

Note

Very short films, on the order of a few seconds, are either not compressed at all or compressed without loss. In particular, such uncompressed films are used as interface elements for Windows programs (for example, flying leaves in the Explorer copying process dialog box).

We list the most popular video compression algorithms currently used.

? Intel Indeo. Developed by Intel in the early 90s, at the dawn of the multimedia era. It provides fairly weak compression, but works without problems on older computers. Now it is used to compress very short, several seconds, videos, often used as interface elements for Windows programs.

? MPEG I The very first of this family of algorithms, also developed in the early 90s by the MPEG (Motion Picture Encoding Group) group for VideoCD recordings. Provides a medium compression ratio and fairly high image quality. There is also a variation of this algorithm designed for audio compression - MPEG I level 3 (MP3).

? MPEG II. It was developed in the second half of the 90s for recording DVD-Video discs. Provides higher image quality and compression ratio than MPEG I.

? MPEG IV. It was also developed in the second half of the 90s specifically for distributing films via the Internet. Provides a higher compression ratio than MPEG II and also supports various additional features, such as copy protection and interactive elements.

? DivX. It was developed at the very end of the 90s by a group of independent programmers as a free alternative to the commercialized MPEG IV. It was used to distribute pirated copies of films, but then “took an honest path” and is currently being rapidly commercialized.

Modern compression algorithms, for example, MPEG IV and DivX, allow you to place a full-size movie compressed in good quality on a regular CD, i.e. the size of a video file compressed with their help is approximately 700 megabytes. In fact, it was these two algorithms that made the “computer cinema” revolution, creating high-quality digital cinema “for the people.”

The film is compressed using a special program called coder Such an encoder implements any of the compression algorithms listed above.

A program that plays compressed video must be able to decompress it. To unpack the film, use the program - decoder, which also implements one of the compression algorithms. When you open a file with a movie, the video player program determines from the information recorded in its header what algorithm the movie was compressed by, and connects the appropriate decoder.

Very often both the encoder and the decoder are combined into one program called codec(encoder-decoder). A codec is often named after the compression algorithm it implements: for example, there are MPEG II and DivX codecs.

But here another problem arises. Movies compressed using MPEG IV and DivX algorithms can only be processed by sufficiently powerful computers. If you try to watch a DivX movie on a five-year-old computer, you will not see a normal movie, but a kind of slide show. This happens because the low-power processor, not having time to unpack the data and display it on the screen, is forced to skip entire frames. Fortunately, no one thinks of running digital cinema on old computers.

That's all about stop-motion animation. Now let's talk about its competitor.

Transformation animation

Let's look at Fig. again. 1.6 and assume that each frame of such an animation is stored in vector form. (The animation shown in Fig. 1.6 just begs to be turned into a vector form. Look for yourself - after all, this is the simplest graphics, just lines.) Next, let’s assume that we can use formulas to describe not only the shape of curved lines and other graphic primitives, but also their behavior. Therefore, we can change the shape of the “mouth” by simply calling the appropriate formula and substituting the necessary parameters into it. What will we get?

Will we succeed? transformation animation. It differs from frame-by-frame in that it does not describe each frame of the sequence separately, but immediately sets the behavior of a particular primitive (Fig. 1.7).

So how is transformation animation created? Very simple. First we create two frames that define the initial and final state of our image. Let's call these two frames we created key - in the future this term will be used very often. The rest of the frames ( intermediate; in Fig. 1.7 they are shown in gray) will be generated by the player program based on the key frames we have specified.

Attention!

The two terms we introduced make sense only in the case of transformation animation. In frame-by-frame animation, all frames will be key frames, and there will be no intermediate frames at all.

It is clear that the easiest way to create transformation animation is based on vector graphics. In this case, to create intermediate frames, the player program will only need to take the parameters of the primitives that make up the images on the initial and final key frames, and create primitive parameters for all intermediate frames based on them. Raster graphics are much more difficult to animate in this way.

Although vector graphics as a way of representing images have been around for quite some time, transformation animation has only emerged in recent years. In fact, the transformation animation was created by the Flash package. If there were any similar developments before him, they remained unknown to the general public.

Let's list all the advantages and disadvantages of transformation animation. Let's start, of course, with the advantages.

Exceptional ease of creation. We just need to create key frames of the animation, set its duration and some additional parameters, and the rest is a matter of technology (player program). We don’t have to painstakingly draw out all the frames included in our film, as is required in the case of frame-by-frame animation.

Exceptional compactness of the resulting data array. As we remember, vector graphics take up less space than raster graphics, and transformation animation takes up less space than frame-by-frame animation. After all, you must admit that storing several parameters of a function that defines animation requires less space than storing many frames, each of which is a bitmap image.

Ease of editing transformation animation. To fix something in a classic movie, we'll have to redraw or reshoot entire scenes. In the case of transformation animation, in many cases we will only need to change a couple of parameters of the function that defines the animation.

We admired the transformation animation - and that’s enough! It's time to scold her for her shortcomings. True, there is only one drawback, but what a drawback!

Let's look at Fig. again. 1.6 and 1.7 and let's think again. What can we do with stop motion and morph animation? With the help of frame-by-frame - that's it. And with the help of transformation? Not so much - just the simplest movements. All the richness of possibilities offered by frame-by-frame animation is not available to us in this case.

As a consolation, we can say that Flash allows you to create both frame-by-frame and transformation animation. This means that we can combine the advantages and get rid of the disadvantages of these two types of animation. All that remains is to figure out what type of animation, as well as when and where to use it.

Using different types of animation

Stop-motion animation is indispensable when creating complex films with rich graphics. There is no need for comments here.

Transformation animation, on the contrary, is suitable for creating simple animation effects for Web pages. The simplest films for advertising, entertainment and educational purposes, for example, the notorious banners, are also created in the form of transformation animation. In addition, transformation animation is great for creating user interfaces and entire programs in Flash - all those pop-up menus and clickable buttons.

And, of course, no one forbids us to combine both types of animation in one film, combining their advantages and avoiding disadvantages. So, for the simplest cases of creating movements, we can use transformation animation, for more complex ones - frame-by-frame animation. Experienced Flash animators do just that.

From the Microsoft Office book author Leontyev Vitaly Petrovich

Animation effects If we were working in Word or Publisher, then, in fact, we would have to stop there - what can we do with a still picture? But there is absolutely no need for a PowerPoint slide to be stationary! On the contrary, this is fundamentally contraindicated for him. Inscriptions, pictures and others

From the book Computer + Mobile Phone: Effective Interaction author Goltsman Viktor Iosifovich

Chapter 6 CREATING PICTURES, ANIMATIONS AND GAMES You already know where to look for melodies and how to create them yourself. This chapter will focus on pictures, animations and games for mobile phones. After reading this chapter, you will learn how to create animated pictures yourself.

From the book The C# 2005 Programming Language and the .NET 2.0 Platform. by Troelsen Andrew

Creating animation Modern mobile phones support not only static images, but also animated GIF files. More and more users are using dynamic images as screensavers on their phone screens, because they are much more attractive. There is

From the book Programming PDAs and Smartphones on the .NET Compact Framework author Klimov Alexander P.

Creating flash animation Many modern mobile phones have, among other software, a flash animation player. This allows you to download files with the SWF extension and view them on your mobile screen. In this section, we will look at how to create

From the book Macromedia Flash Professional 8. Graphics and Animation author Dronov V. A.

Controlling Animation The next task is to ensure that the Timer type will move the current rendering frame within the PictureBox. Let us remember again that the number of frames in the animation cycle depends on the current speed of the car. The need to change images in PictureBox

From the author's book

Creating Animation Now you need to learn how to move an object across the screen. If this is done quickly enough, the user gets the feeling of continuous animation playback. To do this, you should create an updatePositions method, which will allow you to move the image. Bye

From the author's book

Creating Stop-Frame Animation Let's say you need to create a short educational film for a high school. This film will demonstrate the process of cell division. Have you forgotten your school biology course yet? It's time to remember him. Our film will contain twelve

From the author's book

Creating animation frames So, we want to create a sequence of frames, i.e. frame-by-frame animation, a movie. Let's create it. From Chapter 1, we remember that every frame of frame-by-frame animation is key. We've already talked about this, so we won't repeat it now. One

From the author's book

Viewing the created animation Our first Flash movie is ready. Let's watch it, shall we?..The simplest way to play the created movie directly in the Flash environment is to press the key< Enter>or select the Play item from the Control menu. Flash will immediately reproduce our creation. At the same time, the slider

From the author's book

Editing Animation Any, even seemingly perfect creation, can be improved a little more. And since nothing is perfect in the world, we will have to redo what has already been done very often. Flash films are no exception to this rule. Let's see what

From the author's book

Two types of transformation animation Flash allows you to create two types of transformation animation: movement and morphing. Both of these types have almost the same capabilities, but are applied to different types of image elements. The first type of transformation animation is

From the author's book

Once again about "torn-off" animation Finishing the conversation about movement, let's point out the "pitfalls" that can be encountered on the path of a novice Flash animator. And, of course, let's talk about how to get around these "stones". As we remember, "torn" animation is obtained when

From the author's book

Creating a Composite Animation Let's create a composite animation that shows the rectangle breaking apart. But first, let’s create the “object of decay” itself, if we haven’t already. Let's draw a rectangle on the worksheet and convert it into a regular graphic

From the author's book

Internal Animation Options Now let's select an instance of our animated sample on the worksheet and see what the Properties panel offers us. If this is an instance of a graphical sample, this panel will appear as shown in Fig. 13.4. At the moment we

From the author's book

Creating multi-layer animation Let's create a new Flash document and draw a circle on the worksheet. Let's transform it into a graphic sample and give it the name Circle. As a result of these actions, we will get an instance of this sample on the worksheet. Now we can start creating

From the author's book

Controlling Animation Playback Typically, each clip starts playing immediately after loading and plays until the last frame of its animation. However, using scripts, we can control these processes, in particular, stop and start

Stop motion animation is an animation technique in which each frame is drawn. A film or cartoon created using stop-motion animation consists of hundreds or even thousands of frames, each of which is drawn separately.

The number of frames is equal to the number of drawings that need to be made for the animation. This is a huge job that is carried out by several people at once. It takes a lot of time, but the result is really cool. We will return to famous examples of frame-by-frame animation later.

Each new frame is different from the previous one, and this makes the animation more lively. The technique is similar to hand-drawn animation, where frames are drawn on regular sheets of paper, photographed (scanned) and combined into one cartoon. Images do not have to be drawn. Very often, dolls are created for films in which all parts of the body are movable. Each new frame is a new pose of the doll.

History of the phenomenon

The story begins in 1895. To film the execution scene, the director asked the executioner to freeze as he swung the ax. The camera was paused, and the girl’s place in the frame was taken by a doll. Then filming resumed and a spectacular scene was created.

In 1900, animation was used in the short film “The Enchanted Drawing.” In it, the main character shows the advantages of stop-motion animation.

The character seems to interact with the image on the canvas, masterfully working with still frames. He either adds objects to the drawing, or, on the contrary, takes them out.

The film “King Kong”, 1933, is rightfully considered one of the most striking examples of stop-motion animation in history. A monkey doll was created from rubber, skin and foam. It took a whole year to create the animation.

As time passed, the animation itself changed. It became smoother and more natural to perceive due to improved technology. In modern films, stop-motion animation is used, but very rarely.

Differences from other animation techniques

There are several types of animation:

  • Time-lapse;
  • Relay;
  • Computer 2D;

Relay animation is one of the oldest techniques, which can be seen, for example, in the cartoon “Hedgehog in the Fog.” On paper, the object is cut into separate pieces, which are moved (transferred). The implementation is based on the principle of frame-by-frame animation, but you don’t need to draw every frame. Despite the primitiveness of such animation, “Hedgehog in the Fog” is considered one of the best cartoons of all time.

2D computer animation is a modern technique that is used in almost every cartoon. We can say that this is simply a hand-drawn animation that is drawn on a computer. Viewers fell in love with this type of animation, because the cartoons are bright, dynamic and simple.

3D animation is truly living cartoon characters. A three-dimensional model of the character is created on the computer, which “comes to life” using computer graphics. Therefore, I especially like to watch cartoons using 3D animation when there are people or animals in the frame.

Frame-by-frame animation is the most complex and time-consuming process of all of these. However, such animation is smooth and “alive”. Many Disney cartoons are made using this technique.

Features of creating frame-by-frame animation

As we said earlier, with frame-by-frame animation, each frame is drawn anew. The contours of characters, objects, text - all the details are clearly drawn, as a result of which the animation looks a little unnatural. However, this is its distinctive feature.

However, film directors realized that such an effect should not exist in films. A simple example: when you photograph a running person, the photo will not have a clear outline of the legs, the silhouette will be blurry. Even when you watch a dog running, you don't track its movements in every frame, you see the whole picture. Therefore, when creating frame-by-frame animation, the contours began to be drawn incompletely, and when using dolls, photographs were taken in motion.

Notable modern examples

Nowadays, frame-by-frame animation is used mainly when creating simple videos for YouTube and other video platforms on the Internet. These can be either funny short videos or videos of an informational nature. Some of the most famous examples include “Simons’ cat” and “Mr. Freeman." The animation uses 10-15 frames per second, but this is the key feature of these cartoons. All the actions look dynamic and interesting to watch.

Results

Stop-motion animation is gradually fading into the background; new technologies are appearing, with the help of which it is much easier and faster to draw a scene for a film or an entire cartoon. However, stop-motion animation is the basis of the basics, and it was the beginning of all modern cartoons.

Animation on the Internet has long ceased to be a simple page decoration and has turned into a useful tool for improving usability. It helps the user interact with the interface and draws attention to important points.

Animation is the sequential display of similar frames one after another. Each frame changes slightly, so the picture appears to be moving.

To animate the interface, create interactive prototypes or commercials, use special programs, for example, Adobe Animate or After Effects.

To create a simple web banner or presentation, you do not need to understand special programs. The built-in Photoshop tools are also suitable for this.

Where to start

The first step is to decide what we will animate and what result we plan to achieve.

To create the animation, I took one of the bright projects from Behance and redrew it in Photoshop. I aligned it according to the content grid, selected the sizes and placed each element in a separate layer. As a result, I had the first screen of the site drawn in PSD format, which I then animated.

Time scale

Before creating an animation, you need to prepare the necessary tools - turn on the display of the “Timeline”, which helps manage frames in the animation.

To do this, I open the “Window” tab and check the box next to the “Timeline” line.

A wide line should appear at the bottom of the Photoshop window, with which you can control the frames in the animation.

To create the first frame, click the “Create frame animation” icon on the “Timeline”.

Once the first frame has appeared, you can begin to create movement.

Inbetweeners

In Photoshop, an element can be animated in several ways:

  • Draw several frames, manually changing the position and properties of the elements. If the animation is long enough, then drawing each frame takes a lot of time.
  • Insert intermediate frames. You only need to manually set the layout states: at the beginning and end of the animation. Photoshop itself will add the necessary frames between these states. This method is suitable for making an object fade in and out or to show its movement.

First I animate the image of the balalaika. To make the image appear smoothly, I use the “Insert Intermediate Frames” tool. In order for Photoshop to animate an element itself, you need to set two states for the element - a start state on the first frame and an end state on the next.

So I'll add another frame to the Timeline using the "Make a copy of frames" button.

After adding a new frame, I switch to the first one and remove the visibility of the balalaika layer. You can also set the layer opacity to 0%.

In the next frame I check whether the layer with the balalaika is visible.

After working with the balalaika image, I configure the appearance of the text line. In the first frame, I select the "Soul sings" text and move it to the right outside the layout. I do the same with the text “3 strings” - move it to the left until it disappears.

In the second frame I return the text back.

Great. Now let's insert intermediate frames between the key frames.

To do this, click the “Create intermediate frames” button on the “Timeline”.

In the dialog box that appears, I indicate how many frames need to be added.

The more frames, the longer the animation and the smoother the element moves. If there are too few frames, the elements will move jerkily.

The first part of the animation is ready. Now you can play it back and see what happened.

I click on the play button on the Timeline.

Inserting intermediate frames helped quickly create animation with smooth appearance and movement of elements.

Appearing, disappearing and moving can be combined with each other to achieve even more interesting effects.

Manual stop-motion animation

In addition to linear animation, sometimes you need to create chaotic movement or show complex interaction of elements. Usually, to do this, they create several copies of the first frame, and then slightly change each copy - they draw the animation frame by frame.

I'll copy the last frame a few times to create the movement of the arrow and the "go to shopping" text.

In the next frame, I select the desired layer with the text and arrow, move it a little up, and in the last frame - down.

Now you can run the animation and see the result.

Since the frames change quickly, the eyes do not have time to focus on the last frame and fix the final position of objects on the screen.

Therefore, I increased the duration of the last frame: you need to click on the arrow next to the inscription “0 sec.” and select another time from the list.

For the last frame I set the duration to two seconds. Playback now slows down at the end. Therefore, it is comfortable to observe the movement of elements.

Saving and Exporting

In the preview window, you can view the animation again and change the saving settings.

By default, the animation stops after playback. Therefore, I change the playback mode to “Repeat” and save.

This is the resulting animation:

Conclusion

In Photoshop it’s easy to create short interactive banners and presentations and animate individual elements. It's convenient to experiment with the result.