Basics of animation. Creating and editing flash drives

In the first lesson of the basic mini-course "Basics of animation in ActionScript 3.0" you will learn about:

1. What is animation
2. How to achieve the illusion of movement with personnel
3. On the possibilities of sample animation
4. On the features and advantages of software animation

Adobe Flash. In fact, it is a kind of machine for animation. Already in his very first versions, he created it using the Tween concept. It is the following:

• on the time scale, two key frames with different content are created (the positions of objects, their form, color, etc. change);
• all intermediate (transient) Frames Flash creates independently (Fig. 1).

This is how it looks like in the Adobe Flash CS6 program.

But, this lesson and course is generally not only about Tween, but about a powerful language that is built into Flash and is called ActionScript. Studying it, you will learn a lot of useful and practical, especially in such sections as imitation of physical phenomena of the real world and mathematical calculations. Obviously, such knowledge will give you complete control when creating interactive applications, which you could never achieve only with Tween.

But before we proceed to specific techniques, technicians and formulas that will help you animate objects with ActionScript, let's look in more detail the idea of \u200b\u200banimation, its some basic techniques and how they are used in it, as well as how to make it more interesting , and most importantly dynamic.

What is animation?

So, what, in fact, is the animation? The definition of this concept can be found in many dictionaries. Here, for example, one of them, which gives Wikipedia:

Translated animation means movement. If you enhance this definition, then we can say that animation is a change in time. In particular, this concerns visual (visible) changes. Movement is a change in time. At one point in time, the object was in one place, and a minute later. Theoretically, it was also located at intermediate points between the initial and ultimate as the time moves.

But the object does not necessarily have to change its position in order to be considered animated. He can simply change his external form. In the 90s (scary to say, last century!) Were popular computer programswho did morphing.

For example, you have two pictures: girl and tiger. The program creates a smooth transition / animation between them (morphing).

When creating this flash roller, the SQIRLZ MORPH 2.1 program was used

With morphing, the object can also change its size or location. For example, in this way, you can create an illusion of a growing tree, a rotating ball or a change in the color of the object.

Binding animation by time is an important concept.

Without a visible movement or change of animation, there is no, and, therefore, there is no feeling of time at the viewer!

You probably saw the camera shooting many times, on which there is no movement, for example, an empty room or urban landscape.

In such a situation, it is difficult to say that in front of you: the usual photo or video clip. As you look, you suddenly notice small changes in the frame: easy movement, changing the flow of light or moving the shade. Even such small changes clearly inform you that time goes and, if you continue to observe, then perhaps something else will change. If there are no changes during the next period of time, then you will seem to see what you look at the photo. Consequently, the lack of time in the frame means that the picture will be unchanged.

All of the above leads us to a very important conclusion: animation, movement causes visual interest.

Everyone remembers the picture of Leonardo da Vinci "Mona Lisa" - a masterpiece of painting, one of the most famous paintings in the world history of art.

It is possible with a lot of probability to assume that an ordinary person comes comes after a few minutes of inspection and will very soon begin to look for the next object for "study". But, start to show him the last Hollywood blockbuster and it will not notice how a couple of hours will fly. That is the power of animation!

How is the illusion of movement in sample animation

Let's go back for a second to the definition of the animation, with which we learned above:

Animation is technique Creation of the illusion of moving images (motion and / or changes in the form of objects - morphing) using a sequence of fixed images (frames), and replacing each other with some frequency.

The authors of such definitions are forced to enter the word illusion in them. It often happens that only the illusion of movement and exists in those types of art or media carriers with which we are faced in life. Therefore, here is the time to enter the concept of frames.

Theoretically, all types of visual animations use frames - a sequence of pictures or photographs, quickly shown by the viewer in order to imitate movement or change.

What you see on the computer screen, television or in the cinema is based on frames. It all started from the first animated films, where some pictures were drawn on the sheets of transparent film and the first films, where the same technique was used when showing a series of photos.

The concept is simple: you show the sequence of pictures, one after another, which are slightly different with each other and your brain connects them together into a single moving picture.

Then why should we call it the illusion of movement?

If you see a girl who goes down the street on the screen of your monitor, this is not a movement? Of course, this is only an image of a girl, not a real object, but this is not the main reason we consider such a movement of the illusion.

Remember, I spoke about the object, which at one point in time is in one place, and after a minute already in the other? At the same time I said that it moves in real space. That's just such a genus we can call real. Objects move in space smoothly, and not jumps, as it happens in all types of transparent animation. In them, the object is not moving from one place to another; It disappears, and then appears elsewhere in the next frame. The faster it moves, the longer such jumps.

If I showed you a photo of a girl who is in one place, and after a few seconds another photo with the same girl, but already elsewhere, then you would say that these were two photos, and not an animation.

If I showed you a few of her photos during the movement, then you would still say that this is only a series of photos.

If I showed you some photos of pretty quickly, it would not change the fact that they are still photographs, but you would start to perceive them differently.

Your brain would see them as a moving girl. In essence, such a representation is not different from the first two photos, i.e. there is no real movement in them, but at a certain point, the brain gives up and bought on this illusion. Naturally, in the production industry, this effect was very well studied.

After the studies conducted, it was found that at the speed of the show 24 frames per secondThe viewer perceives them as a single moving picture. If you show more slowly, the image begins annoyingly "jumping" and the illusion of the movement is destroyed. If you accelerate to 50 frames per second, it will not add realism to the image (although in the program animation with an interactive interaction of the viewer with the picture the answer will be faster and the movement of objects at high speeds is more "smooth").

The concept of frames makes it possible three things:

• storage
• transmission
• and show

Obviously, you can't store, pass and then show a real girl walking down the street, but you can store her image / photo or a series of them, and then pass them and show them. Thus, you have the opportunity to reproduce the animation almost always and everywhere, when accessing saved photos and the ability to show them.

It is time to give a more general definition of frames. Until now, speaking of him, we meant a photo, a picture or drawing. Now let's consider as follows: frame is a system entry at a certain point in time..

This system can be:

• the picture of the landscape you made from your own window;
• the collection of virtual objects (record, in this case, would be their shapes, sizes, colors, location, etc. at a certain point in time. Thus, your film would turn out of a series of pictures into a series of records of descriptions of pictures. Instead of just Show picture, the computer takes such a description, creates a picture from it and then shows it);
• personnel containing certain programs.

Programming frames

Since the computer can consider "on the fly", then you have the opportunity to do without a long list of descriptions for frames. You can all simplify, describing only the first frame and setting the rules for creating all subsequent frames.. Now the computer does not just create a picture from the description, and:

• first creates a description,
• then generates a picture based on this description.
• and at the end shows this picture.

Just imagine how much space you could save, using this approach! Pictures always occupy a decent amount of disk space and bandwidth Networks. And 24 pictures per second can be simply "hot." If you manage to reduce everything to one description and definition of rules, you have the ability to reduce the size of the file hundreds of times.

In 90 cases out of 100, even the most voluminous program with the rules of how objects must move and interact takes less space than one picture of the medium size. Therefore, one of the first effects that was noted when studying software animation is her efficiency in terms of file size.

Definitely there is a compromise. If your system begins to grow, and the rules are becoming increasingly harder and more difficult, the computer must spend more and more resources for processing each subsequent scene, and then also considerable time to display them on the screen.

If you try to maintain a certain frame rate, then it sometimes leaves the time to your processor (milliseconds) all this "digest". Therefore, if the computer cannot calculate the scene on time, then the quality of playback (frame rate) will suffer. On the other hand, the usual animation based on the picture, little cares about what is on stage and how difficult this picture is complex. She just shows the next picture on time and that's it.

Advantages of software animation

The next advantage of software animation in relation to the sample, which we will now discuss, goes much further than the simple file size. This is the fact that software animation in most cases is used as dynamic.

You probably watched the movie "Terminator 2: Judgment Day". At the end of the film, each time the terminator disappears in a melting boiler with the phrase "I'll Be Back". He does it in cinemas, on TV and on DVD. Even by clicking on the "Stop" or "pause" button, you are not able to stop it. And this is because an ordinary film is nothing more than the sequence of pictures. At the end of this film, they (pictures) show the terminator disappearing in the Belem and all that they are capable of.

Now let's go from the terminator to the usual flash site. In the late 90s, when Flash rapidly gained his popularity, only the lazy did not want to use his capabilities on his website:

• moving, emerging and disappearing forms;
• duct music;
• suddenly popping up for something;
• the appearing spot of light or shadow.

Then such things were in a novelty, so I wanted to exclaim: "Cool!" Justice for, it must be said that not all from such sites were really cool. Remembering today that I saw then can be said that only two or three of them, really, crashed into memory.

By duration, the animation on them was no more than a minute. This was enough only for me to watch their three times in a row. What were they bad? No, just after several views, attention was weaker, because there was already nothing more to look like in the movie about the Terminator. And here you can talk about a certain paradox - in films of this kind, the animation does not change, each frame, from the first to the last predetermined.

Let's go back to the software animation. It does not have to be dynamic. You can create an object and using code, determine its location on stage and then make it move along it. In such a situation, every time you start this clip, the same code will work, causing the same movement. And, it is obvious that there are no speakers here.

And what if you take the same object and with the help of code, randomly determine the location of this object, the direction of its movement and speed? In such a situation, after starting the roller, every time we will see something different from the previous one.

But there is a third option. After starting the roller, the time of day will be determined, month and year and on the basis of these data it is built scene, for example, winter morning, summer afternoon or September evening?

And here is the fourth. During the film, the viewer, with the help of a mouse or keyboard, at will, could change some factors? This would allow him to interact with objects on stage. Such a film would have been far from as much as we used to see, right? It would be possible, even save the terminator!

The virtual reality

Perhaps that the most interesting aspect of dynamic animation is the use of objects of mathematics and physics of the real world created in it. You can not only make such an object move in a random direction, but also imitate the effect on it gravity. As a result, he will start falling. When the fall end, he will hit the land and bounce, but not equal to the height of which he began to fall. In the end, he will stop galloping and remains to lie on the "land."

After that, you could enable the user to interact with it:

• "Take" his mouse
• or move using the keyboard.

After the user begins to interact with it in this way, it will have a complete feeling that this is a real physical object.

You can see for yourself by playing with a red ball below.

Creating such an animation, you make a user feel that he doesn't just look at how the frames are moving, but what it is in some space you created by you.. How long will he be there? Yes, exactly so long as he is interested. The more you give him opportunities to interact, the longer it will remain there, and then also retracted many times.

RESULTS

In this entrance lesson, we discussed:

• basics of animation;
• differences of sample and software animation;
• the main advantages of dynamic animation.

These are conceptual, basic knowledge, on the basis of which the entire subsequent material will be built. free Mini Course "Basics of Animation in ActionScript 3.0».

In the following lessons, I'm going to talk about some tools that you can apply in your work. The most obvious use of all the information that will be discussed in this course is to create games. It is clear that it is they who require the greatest interaction with the user, where it is required to solve certain tasks and achieve the goals.

But the information of this course can be successfully used for your professional work as a web designer. For example, to create an interesting menu on the site, banner advertising or applications (programs) for the education system.

And what kind of animation causes more interest personally? Write about it, leaving the comment below. Also, if you have any questions during the study of this lesson, then ask, feel free to answer them with pleasure.

See you in the next lesson!

Please enable JavaScript to see comments.

Animation in Flash (part 1)

In the previous chapter, we considered the Flash program only as a graphic vector editor. However, the main purpose of Flash is to create an animation schedule, i.e. cartoons. Animation in Flash may contain audio support and interactive elements. Thus, it is not just about the schedule, but about creating multimedia products. Using Flash, you can create interesting applications, in particular, web pages.
Flash operation results (files, animations, web pages) is customary called. cartoons, clips, video phrases, rollers and animations (General term - MOVIE). Usually, the clips are called cartoons that are part of other cartoons. The process of creating a cartoon is as follows. First, the original or so-called author's file with the FLA extension is created. This file can be edited and viewed in the Flash program. It is then converted to the SWF file, which can already be viewed in the Flash player and web browser. In addition, you can export the results of your work in other widespread formats: MOV, animated GIF, JPEG and a number of others.

Attention! When describing Flash tools, if specifically stipulated, I mean version 5.0. Features Flash MX We will be prompted especially.

In the previous chapter, we have already noted the main differences from Flash 5.0 from Flash MX. Recall only one of them, which is the most important. In Flash 5.0, the properties of the object are dispersed in several palettes or by several tabs of one palette. You can open or close these palettes using the Window\u003e Panels menu. Flash MX reduced the number of palettes. There is no PANELS submenu in the Window menu, in which you can select the panel (palette) to open or close it. The Flash MX palette opens and close directly using the Window menu. Note that all the properties of the current (i.e. selected) item on the work field in Flash MX are displayed on the same Properties palette (properties), which is located down by default. The content of this palette depends on the current object (i.e. allocated at the moment). In other words, the content of the palette properties contextual depending.

Trial animation

For the first acquaintance with the animation features of Flash, we will create a simple cartoon: a circle that moves around the screen from left to right. First we will show how it is done in Flash 5.0, and then in Flash MX. Before
We will need tools ("oval") and ("allocation"). Follow the following steps in Flash 5.0:

Now you can open the created HTML file in the browser. However, it can be done even from Flash by selecting the File\u003e Publish Preview\u003e HTML command (File\u003e Preview Pyblike\u003e HTML) or by pressing the key . In this case, Flash will use the default browser. That's all! Next, we will look at the creation of animation in more detail.
All described above is exactly 5.O. If you use Flash MX, you should consider that hot key Does not create a key frame, and all parameters of the current (dedicated object) are concentrated in one palette, which is called Properties (Properties). Flash MX, generally speaking, more convenient than Flash 5.0, but it is a pity that the hot key disappeared.
Now consider creating animation in Flash MX. We draw a circle on the working field. We highlight it and group into one integer its outline and fill. This can be done using the modify\u003e group command (modify\u003e group). Next, right-click on the end frame and select the Insert KeyFrame command in the context menu. Drag the circle to a new place. Left-click on the first frame. In this case, the circle will turn out to be in the initial position. Now we appeal to the Properties palette containing at the moment the parameters of the first frame. In the Tween drop-down list, select the value of Motion. At the same time, an arrow will appear on the timeline between the first and last key frames, which indicates the successful animation creation. To play the cartoon, press the key. .

Fig. 551. Creating Animation in Flash MX

If a stroke line appeared on the timeline instead of arrows, then it means that you made some error. At the same time, a button with a triangle and an exclamation mark appears on the properties palette. Click on it will open a panel with an error message. The failure when creating an animation is most often due to the following two reasons: either you are trying to animate ungrouped objects (in the event of a circle, this circuit and fill), or in this layer there are several grouped objects.
In addition to the method discussed above, in Flash MX, you can create an animation using the Create Motion Tween command (create a motion animation). In this case, right-click on the first frame and in the context menu, select the Create Motion Tween command. In this case, the image of the circle will be converted into a symbol of type Graphic. Right-click on the last frame and in the context menu, select the Insert Frame command. Better line will appear between the first and last personnel. Now you need to move the circle to a new place. As a result, the last frame will automatically become key, and the stroke line will be replaced with an arrow. Creating an animation is completed.
As it is easy to notice, ways to create animation in Flash 5.0 and Flash MX are very similar and simple. Try to apply them several times, and they will remember well.

Basic concepts of animation

Under the term animation means the sequence of alternating images (frames), as a result of viewing which the illusion of motion arises (smooth changes in the form and / or image position). In Macromedia Flash, two animation methods are implemented:

• Radious animation. This method is to quickly scroll through pre-drawn frames. In this case, the illusion of movement occurs due to the choice of suitable shocking speeds and the degree of similarity of the neighboring frames. The method considered is similar to the method used when creating animated GIF files (see chapter 3).
• Interpolation animation. This method is to create multiple reference (key) frames, and then based on "to calculate" intermediate frames (Tweening Animation). This method Similar to drawing a smooth line passing through the specified points. For example, let's say that you need to move some kind of figure from the left side of the screen to the right with the help of 25 frames. In the case of the first, framework, method of animation, we will have to draw all twenty-five frames, and in each subsequent frame a little bit to shift the figure to the right. And if you need to make the figure, moving right, gradually disappear or changed the form? Obviously, manually do each frame in this case will be too tedious. Here for such situations and is provided for the second method of animation. In the simplest case, you will need to set only two keyframes: initial and finite. By default, Flash calculates intermediate frames according to a linear law, but an exponential law can be asked.

First consider the basic elements used when working with Flash: timeline (timeline), frames, symbols (SYMBOLS) and layers (Layers).

Timeline

The timeline is the main tool when working with animation in Flash. It displays information about the layers and which frames are key, and which intermediate (Flash generated). Using the timeline, you can understand which frames contain actions or tags. It allows you to move key personnel and individual animation fragments. This tool is well thought out and very convenient, you quickly learn to work with it.

Fig. 552. Timeline in Flash 5.0

In Flash MX, the timeline is somewhat modified. For example, it was possible to create folders containing layers. This means of organizing a cartoon structure we have already been considered in the previous chapter. In the upper right corner of the timeline there is a frame format menu button. Depends on the choice of frame format appearance timeline. Unlike Flash 5.0, now in the frames you can display reduced copies of images.

Fig. 553. Timeline in Flash MX

List the main elements of the timeline.

• The marker is a red rectangle highlighted by red, indicating the current frame, the contents of which are displayed in the workspace. Cells of a rectangular grid (frame scales) correspond to frames. When you click on any cell, the marker is automatically moved to it, and the contents of the corresponding frame is displayed in the working area.
• Layers. To the left of the frame line is a list of layers. Under it are the buttons to add and remove the layers. If desired, each layer can be made invisible or prohibit it editing.
• Frame scales - field where you can add and delete simple and key frames. If you call the context menu by right-clicking on any frame, you will see a list of actions that can be made. The following information is displayed on the frame scale:
  • key personnel are marked with black circles;
  • frames with which the actions are associated are marked with the letter "A" above the circle;
  • on the marked frames indicate the red checkbox and the name of the label.
• Color also speaks about the type of frames. Frames that exactly repeat the keyframe (KeyFrame), painted in gray. Lilac or green illumination suggests that frames are generated by Flash. White color indicates empty shots.
• Shadow control buttons Allowed to display adjacent frames as if through a tracing to see the differences between adjacent frames. In other words, they allow you to create a loop for a moving image. You can specify the number of displayed adjacent frames.

Frames

Animation consists of a sequence of frames. The frame can be both manually created and generated by Flash. This refers to the personnel of one layer. Since Flash scenes (what it is, is described below in this chapter), usually consist of several layers, then the final "multilayer" frames may contain both generated and "self-made" frames.
In computer animation, there is a concept of keyframes - these are shots that Flash does not change in the process of creating animation, but uses as reference when generating intermediate frames.
There are two types of intermediate frames:

• Frames based on shape change (shape tweening).
• Frames built on the basis of changing characters (motion tweening). Most often they are used when creating animation of movement in the working field.

It should be mentioned about empty frames that do not contain anything.

On the timeline, the sequence of unchanged frames has a gray color, the motion tweening frame sequence - lilac, sequence of frames Shape Tweening - green, empty frames - white. Key personnel are indicated by black dot.
Elementary frameworks:

• insert a blank key frame: Insert\u003e Blank KeyFrame ( );
• insert a keyframe repeating the content of the previous one: Insert\u003e KeyFrame ( , only in Flash 5.0);
• clear keyframe: Insert\u003e CIER KEYFRAME ( +);
• insert a regular frame: Insert\u003e Frame (Frame ( );
• delete Frame: Insert\u003e Remove Frames ( +).

Symbols (Symbols)

The symbol is one of the key concepts in Flash. We have already spoken about him in the previous chapter. The symbol may be the simplest figure, combining several figures and even a whole animation (MOVIE). For example, you can create "Wheel", "body" and "headlight" symbols, and then all this is combined into the "car" symbol. Then you can create a scene in which this "car" will "go." You can make the wheel with an animation symbol, so that its rotation was felt. The car door can be made by a "button" type symbol so that it opens when it clicks on it. At the same time, at any time you can change the content and type of symbol. In other words, the symbol is an object. It seems to be the term "object" is more familiar, but the "symbol" is used in Flash (therefore, we will call signs to avoid confusion to avoid confusion).
Symbols can be embedded in each other, regardless of the type, which is the most important advantage. Symbols can be created as "from scratch" (Insert\u003e New Symbol command (Paste\u003e New Symbol) or Keys +), so using the current allocation in the workspace, converting it to the symbol (Insert\u003e Convert to Symbol command or key ). The second reception is used much a cup than the first, since it disappears the need to position the selection and adjust its size.
Symbol management uses so-called libraries (Library), which we will tell below. All that you painted or imported to the workspace can be converted (convert) to the symbol. This symbol will immediately fall into the library of the current (created or editable) cartoon. Symbols from the library can be transferred to the scene or in another cartoon. At the same time, what you moved, appears not as a symbol, but as an instance (instance) of the character. You can edit a character, and then the result of your modifications will spread to all its instances. You can edit an instance of a symbol without affecting the symbol itself. The modified instance of the symbol can be turned into an independent character. The library window opens up the Window\u003e Library command or by pressing the keys +. It is recommended to deal with it self-restatory.
There are three types of characters: graphic (graphic), button (Button) and animation (cartoon, clip) (Movie Clip). The insert\u003e New Symbol command opens the window in which the type of character being created should be specified. Consider the types of characters in more detail.

Fig. 555. The dialog box in which the name and type of the character being created is specified.

Graphic (Graphic)

• Symbols of this type we have already mentioned in the previous chapter. The behavior of graphic symbols is described by the timeline of the main film. Interactive controls and sound maintenance can not be associated with symbols of this type. Almost everything that can be done by graphic symbol can be made using a Movie Clip type symbol (see below).
  Recall that images can be created not only manually using drawing tools, but also import from graphic files.

  Button (Button)

  Button - the type of symbol specifically adapted to the button functions. This symbol appears to look like anything, not necessarily as a rectangular or round button. It is important here that this symbol has the functionality of the button. When you create a Button symbol, four frames appear on the timeline corresponding to the following situations:

• Up - The mouse pointer is not above the button;
• OVER - the mouse pointer is above the button;
• DOWN - The mouse pointer is above the button and the button is pressed.
  mice;
• Hit - frame to determine the active area of \u200b\u200ba click on a click; Its content is invisible and can be both less and more visible image of the button. If you do not describe this frame, the image from the UP frame will be used for it.

Note that in the previous chapter, we painted the image of the button, but did not create a button symbol.
To create a button, run the Insert\u003e New Symbol command or press keys. +. In the discontinuing dialog box, enter the name of the character and select Button (Behavior). Flash switches to the symbol editing mode. At the same time, four frames are displayed on the timeline: Up, Over, Down and Hit.
The first frame is up. Now you need to create a button for the button using drawing tools, import graphics or insert an instance of another symbol. In this case, you can apply the graphic (graphic) and MOVIE CLIP (animation), but not Button (button). Use Movie Clip if you want the button to be animated. The created image for the button will be inserted into the UP frame, which will automatically become key.
Next, click on the Over frame timeline and make it key (insert\u003e KeyFrame or key ). The contents of the previous frame (UP) will be automatically copied to the Over frame. Repeat it for the frames of Down and Hit. Now you can edit the image of the button for each of the four frames. For example, you can change the color and / or the inscription on the button, which will give dynamism to the button: it will change the appearance depending on the position of the pointer and the mouse button status. In the pictures, as an example, the images of the button for different frames are shown.
If you need to play sound depending on the states of the button, select the appropriate frame on the timeline and execute the modify\u003e frame command to open the Frame panel on which there is the Sound tab. In this tab, you can set the necessary parameters.
After completing the creation of a button symbol, go to cartoon editing mode (Edit\u003e Edit MOVIE command) and drag the button icon from the library window to the workspace to create an instance of this character in your cartoon (scene).

Fig. 557.

Fig. 559.

All that we did is only a visual object. However, the buttons are known to serve as controls. We want, for example, when you click on the button, something happened. In other words, the button must be rid of functionality. To do this, right-click the button on the button and select the Actions command in the Open menu. As a result, the Object Actions panel lies, shown in the figure. On the Object Actions tab of this panel in the left list, you can choose an action. An ActionScript script instructions are recorded in the right field. You can choose the actions and values \u200b\u200bof their parameters (input fields and / or switches), watching Flash in the right field, or manually write the script. The figure shows an example in which the GETURL (ADPEC) function that calls the document (file) located at the address specified by the address is selected. And this action will occur if the button is pressed (when you click the left mouse button on the button, the ON function is responsible for it.

.

Fig. 560. Create and edit action panel associated with object

More about the panel of actions and, in particular, the functionality of the buttons will be described below in this chapter.
Please note that the actions should be assigned to the instance of the Button symbol in the cartoon, and not frames of the button on the timeline. In other words, you place an instance of the button on the workspace and then assign the actions.
In the overall Flash symbol library, which opens the Window\u003e Common Libraries team, there are already ready-made buttons. You can open this library and drag from it to the workspace liked the symbol as many times as its copies will be needed in the cartoon. At the same time, the symbol will immediately get the private library of your cartoon. You can modify both the symbol and its instances. For example, if you need to create a number of buttons in the same style, but with different inscriptions, you should modify instances, for which you select the button on the working area of \u200b\u200bthe button and execute the modify\u003e instance command.
In Flash MX, frame modifications, instances of characters and characters themselves are made using the Properties panel (properties).
If you need a simple rectangular button without special artistic prints, you can use the Flash MX already ready component PushButton (button) from the Components palette. Instances of this component can be edited. We told about it in the previous chapter.

Fig. 561. Two instances of the buttons differing inscriptions. Library - Moviel - the symbol library window of our cartoon (currently it contains only one PUSH BAR symbol); Library - Buttons.Fla - Buttons Library Window from General Libraries (Common Libraries)

Animation (Movie Clip)

Animation is the most interesting type of symbol. In this symbol there may be any number of frames. In the ActionScript scenarios, this symbol is perceived as an object type Movie Clip. Each symbol of this type (clip) has its own timeline, which is reproduced independently of the timeline of the main cartoon. On the other hand, the clip may contain other clips and elements of interactive control.
We have already considered the creation of a simple cartoon above in this chapter. A more detailed story - in the next section. Here we note that the big generality of the concept of a symbol of the Movie Clip type requires a certain experience to use it fully. In many cases, all animation (the entire cartoon) consists of one clip.

Libraries of symbols

With the concept of the library, we have already met in the previous one, and in this chapter. Now consider it in more detail. The symbol library allows the developer to use in the new cartoons characters previously created in other cartoons. This makes it possible to accumulate troubled material and organize collective work.

Flash has the following types of libraries:

• Cartoon Library (Library)
• General Library (Common Library)
• Permanent library (Permanent Library)
• Shared Library (Shared Library)

In Flash MX, unlike Flash 5.0, the divided libraries are two species:

• RUN-TIME - a shared execution time library;
• Author-time is a divided library of development time.

In Flash 5.0, the only type of the shared library is the Run-Time library.
From the user interface point of view, working with libraries of various types is organized equally, its contents can be viewed in a special dialog box.
Library of cartoon- Library of symbols associated with a specific cartoon. It is created automatically as soon as you create the first character. This symbol will immediately fall into the library. You can create an empty library by running the Window\u003e Library command. Library, since it is created, there is so much time as a cartoon. You can delete all its contents, but you cannot delete the library itself. The title of the library window shows the name of the cartoon (file name). Bilioteki characters can be used in any other cartoon. To do this, it is enough to open a new file without closing the file whose library you want to use. At the same time, the source file library window must be open.
General Library- Built-in Flash library. Unlike the cartoon library, its content cannot be changed. The general library consists of several libraries such as Buttons (buttons), Learning Interactions (interactive learning), etc. The total Flash MX library includes, among other things, the Developer Assets (developer resources) section, which contains the user interface components (see Chapter 8).
Elements of the General Library can be used in their cartoons and in the existing form, and as initial blanks for the subsequent modification.
Permanent library- Library created by the user and affordable from any cartoon. To create a permanent library, do the following:

1. Create a flash file (new cartoon, i.e. file with FLA extension) with a library containing the characters you want to enable in a permanent library.
2. Save the created Flash file in the Libraries folder, which is among other Flash package folders.

After creating a new library appears on the Window\u003e Common Libraries menu (Window\u003e General Libraries).
Shared libraryallows you to use the characters contained in several cartoons without copying these characters to private cartoons libraries. The elements of the shared library are called resources (ASSET). The shared library is used as an external file and is not contained inside the cartoon.
The application of shared libraries is useful in the following cases:

• when using font characters on various pages of the site;
• when using the same sound accompaniment on various pages of the site;
• when using different elements that must meet some single design style.

To create a library shared, it is necessary to determine its resources (the characters included in it), allow the export of shared characters, specify the URL of the site on which the library will be posted, export a Flash file to the SWF format and place it on the Web site.
After creating a shared library, you must specify which of its characters can be exported to other cartoons. To do this, select the desired character in the library window and right-click on it. In the context menu, select Linkage (binding). As a result, a window will open, which in Flash 5.0 is called Symbol Linkage Properties, and in Flash MX - simply Linkage Properties (binding properties). In different versions of Flash, these windows are somewhat different, but the essence is one.
The IDENTIFIER field (identifier) \u200b\u200bis entered by the name of the symbol (without spaces), with which it will be exported to the film-co-owner.
In Flash 5.0, you can choose the export of a symbol or import it. In the latter case, you need to specify the source cartoon URL, i.e. the SWF file with the divided library. This can be done in Flash MX, but there are also additional features. In particular, the exported symbol can be used immediately from the first Cartoon-co-owner frame, check the Export In First Frame checkbox. If the exported symbol should be made available in the ActionScript script, check the Export For ActionScript checkbox.

Fig. 562. Symbol binding properties window in Flash 5.0

Fig. 563. Binding properties window in Flash MX

To use the Symbols from the shared library in the Cowholder Cartoon, open the library of this cartoon and select the New Symbol command in the library drop-down menu. As a result, the CREATE NEW SYMBOL (creation of a new symbol) window opens. In Flash 5.0 in this window, you can only specify the name and type of symbol. Therefore, after the new symbol appears in the biliotec, you need to open the Symbol Linkage Properties window, discussed above. In Flash MX, the CREATE NEW SYMBOL window immediately contains all the symbol parameters.

Fig. 564. CREATE NEW SYMBOL window in Flash MX

Above, we looked at work with shared libraries of the Run-Time type. Recall that in Flash 5.0 is the only view of the shared library. In Flash MX, in addition, there is another kind of shared libraries - Author-Time. Here we will not consider it in detail. We only note that the use of Author-Time libraries allows you to replace the contents of characters in the editable Flash file.

Creating an animation

Consider ways and examples of creating animation.

Passing animation

Radious animation is fully compiled from key frames. Here you ourselves define both the contents of each frame and its exposure (i.e. how many such static frames will occupy the image). This method was initially used when creating conventional hand-drawn cartoons. On the timeline, frame animation is as follows:

Fig. 565. Radious animation consists only of key frames. The same image can occupy several such frames.

This is the only way to organize a shift of absolutely independent images - the so-called slideshow. As a rule, this creates a regular banner.

Fig. 566. Four consecutive frames from the cartoon in which the flower grows

However, the frame animation is difficult to modify. If this animation is associated, then you have to modify almost all frames. In addition, frame animation occupies a fairly large volume, as it is necessary to store information about each frame.
Note that the animated GIF files widely used in Web design are created in the Flash method of sample animation. You can create multiple key frames (if necessary, use several layers), and then convert your product to the GIF file with the Animated parameter using the publication operation. It is described in more detail in the last section of this chapter.

Interpolation animation

With this method animation Flash. Automatically creates intermediate frames that are embedded between the key frames specified by you. This means that you draw an object in one frame, then in another frame, make changes its changes. Created frames are key. Then you ask for Flash Calculate frames that should take a place between two keyframes. As a result, you get animation.
The speed and smoothness of the animation depend on the number of frames that you pay mocking, as well as from the scroll speed of your Flash-cartoon (Movie). Cartoon scroll speed can be installed in Flash 5.0 command Modify\u003e Movie or keys +, and in Flash MX - the Modify\u003e Document command. The Frame Rate parameter sets the number of frames shown in a second. For high-quality animation, the speed should be at least 25-30 frames / s. By default, the speed is 12 frames / s. When creating cartoons, it is usually selected experimentally, depending on the dynamicity of your product, the required quality, restrictions on the file volume, etc.
The smoothness and duration are set by the number of frames allocated to the entire animation (its fragment). For example, if your cartoon speed is 30 frames / s, and you need to move the object from one angle of the picture to another for 2.5 s, then the movement will require 75 frames. Flash has two options for building intermediate images:

• Shape Tweening - Building an animation based on a change in shape;
• Motion Tweening - Building an animation based on changing characters.

The first option is used in cases when it is necessary to provide only a smooth change in the form of the object. The second is used the cup of all due to its versatility.

SHAPE TWEENING

Suppose it is necessary that the square smoothly turned into a circle, or the image of the cat smoothly turned into a dog image. In such cases, Shape Tweening is used (change in shape, transformation). At the same time, you specify two keyframes at some distance from each other. In this animation, there is a rigid restriction: the animation should occupy a separate layer and be a single drawn figure (there should be no groups or characters). After you have created two keyframes, make the first one of them (just go to it by clicking the mouse button) and select the FRAME button in the Frame palette (called\u003e Panels\u003e Frame or by pressing the keys + ) In the Tweening list of the Shape string (form), as shown in the figure.

Fig. 567. Indicate the Animation Option Shape Tweening

Frames on the timeline must be painted in a greenish color, and the arrow should stretch from the first frame to the second frame. As a result, you will receive a number of intermediate frames that will reflect the transition from the first figure to the second. To show the content of the adjacent frames, you need to turn on the display mode of the shadows. The following figure shows the animation at which the circle smoothly turns into crescents.

Fig. 568. The circle smoothly goes into the crescent. Here the first key frame contains a circle, and the last, 10th frame, - crescent. Figure shows all cartoon shots

Consider the SHAPE TWEENING conversion parameters. When this option is selected, the Easing and Blend parameters appeared in the Frame palette and the Label frame label field.

• The EASING parameter sets the reverse exponential acceleration. The value of this parameter may vary from -100 to +100. This means that if you specify a negative value in the Easing field, the movement will occur with a positive acceleration (the speed will increase). And on the contrary, if the value of Easing is positive, the animation slows down.

Fig. 569. Acceleration Animation (Easing< 0)

Fig. 570. Slowing Animation (Fusing\u003e 0)

• The Blend (transition) parameter determines the transition algorithm: Distributive (blurred) and angular (angular). The first tries to soften as much as possible, smooth out the transition from one figure to another. The second is trying to preserve the proportions of the corners and the segments of the straight lines. It is recommended to experiment with this parameter to understand in what cases the parameter value is better to use.

Last tool in animation type shape tweening - Control Points Shape Hints, with which you help Flash correctly make the transition. Without them, do not do when working with complex forms. Use control points is very easy. In the first key frame (from which the animation begins) you add a checkpoint (command Modify\u003e Lransform\u003e Add Shape Hint or keys ++). On the scene there will be a small red dot, indicated by the letter of the Latin alphabet. You attach it to that part of the image that moves not as you wanted. Then you go to the second keyframe and attach the same point to the part in which the marked part should go in the initial frame. This point will be green, and on the initial frame it will become yellow. Thus, you can distinguish the initial and final control points (on one frame there may be both those and others. You can remove all points using the command ModifyTransform\u003e Remove All Hints. You can remove the same point by right-clicking on it and in the context menu that appears by selecting the Remove Hint command. Because the control points are denoted by the letters of the Latin alphabet, there may be no more than 27.
On the following two pictures, you can notice the difference between frames created without the use of test points, and frames created using those.

Fig. 571. Shape Tweening without using checkpoints

Fig. 572. Shape Tweening using checkpoints

When using an animation based on Shape Tweening (Shape Tweening), the following shape parameters can be modified:

• The form
• Location
• Size (any proportions)
• Angle of rotation

If you need to disable Shape Tweening, then in the Frame palette, select the None value in the Tweening list.

Animation based on changing symbols (motion tweening)

As noted above, the Motion Tweening Animation option is most often used. In this case, the animation is based on the modification of the symbols, i.e. the object of the animation is the symbol. As in the animation of Shape Tweening, one layer is required for each object at each time. In this layer there must be one character with which all changes will occur.
Here are the symbol parameters can be modified when using Motion Tweening:

• size (both in proportion and disproportionately - separately height and width)
• incline
• location
• angle of rotation
• color Effects

You can enable Motion Tweening in several ways, and disable - only one. To enable motion tweening, you need to make an active starting frame of the transition, and then by clicking the right mouse button, select the Create Motion Tween command in the context menu, or select the Insert\u003e Create Motion Tween command. The universal way to turn on / off Motion Tweening is in the Frame palette to select a value in the TweEning list.

Animation Parameters:

• EASING - Specifies the opposite exponential acceleration; It works the same way as in Shape Tweening;
• ROTATE - allows you to control the rotation:
  • AUTO - forces Flash automatically try to determine the number of turns;
  • CW - Sets the rotation clockwise;
  • CCW - Sets the rotation counterclockwise; At the same time, in the current field, you can enter the number of revolutions (you can only use integer values \u200b\u200bor disable the rotation by selecting the None value in the ROTAT list).
• Options - Additional parameters:
  • Orient to Path - turns the symbol in accordance with the guide line;
  • SNAP - binds a symbol to the guide line;
  • In cases where the number of frames of the main scene is not multiple of the number of frame frames, the Synchronize checkbox allows you to synchronize these two animations.

Guides layers

The object movement can be organized using the guide layer. In the guide layer, the trajectory is drawn, according to which the Object must be played, then the object itself is attached to it, and the guide layer is made together with the trajectory. In general, the symbol of type Movie Clip can act as an object, i.e. some cartoon, Or even a group of objects of various types. Consider a simple example in which an arrow image is moved along an arbitrary curve.
In the layer, which we call an arrow, draw an object as an arrow and convert it into a graphic symbol. In a more general case, a symbol of type Movie Clip can act as an object, i.e. some cartoon or even a group of objects of various types.

Fig. 574. An object in the form of an arrow that should move

Next, right-click on the arrow layer name and select the Add Motion Guide command in the context menu (add traffic guide). As a result, the list of layers will appear new layer Guide: Arrow with a characteristic icon to the left of his name. That's what it is guide layer (Guide Layer). The listed layer is directly under it, is sent (guided). In the guide layer, draw the trajectory of movement. To do this, you can use any tool for drawing lines, for example, "Pencil". The main thing is that the trajectory is a line (contour), and not the fill area.
We highlight our object in the form of an arrow and move it to the beginning of the trajectory. When you move in the center of the image of the object, a circle will appear, which should get on the line of the trajectory and how to catch it for it. This we bind the object to the trajectory.
On the timeline, we choose a frame that corresponds to the end of the movement along the trajectory (in our example it is the 30th frame). Let's make it key. This must be done first in the guide layer, and then in the direction.
I will make sure that the layer guided is active (in our example it is a layer arrow). By dragging the object at the end of the trajectory, and then back to the first frame in the same layer. Create animation (Insert Motion Tween). In general terms, the organization of movement on the guide trajectory is completed.

Fig. 575. In the guide layer draws a trajectory of movement

Fig. 576. Setting the parameters of the trajectory

Fig. 577. Movement of the object with its orientation along the trajectory

In order for the trajectory of the movement is invisible, it is enough to make an invisible guide layer. If you want the object to orient along the trajectory, set the first frame of the layer with the ORIENT TO PATH property. Acceleration or slowing down the trajectory is determined by the EASING parameter.
If the guide layer already exists, then any layer can be made guided. To do this, it is enough or simply dragging its name in the list of layers directly under the guide layer, or create a new layer located below the guide, and set the type of this layer Normal.

Layers masks

The contents of the layer can be viewed through the hole, the leaf is all the rest. For this, the so-called layer mask is a special type of layer containing a mask itself. Mask (hole or view window) can be created based on objects of various types: fill areas, text field, instance of a graphic symbol and even a cartoon. The mask can be made to change your shape or move. However, it is impossible to use layers masks inside the buttons.
The mask is a layer in which any fill area is interpreted as a hole through which the underlying layer is visible. In this case, the color of the fill, the gradient and the contour are ignored. By default, the layer-mask closes (masks) only the layer that lies directly under it.
Consider the creation of a simple mask based on the field of fill. Create first disguised layer. Let's call it background. We imported a raster picture from the Photoshop 7.o package. Next, create a layer mask. To do this, just click on the button with the "+" sign at the bottom of the list of layers. Let's call his mask. In this layer, we draw some kind of figure and hill it in some color, i.e. create the fill area. We painted oval, and then transformed it using the Subselect (White Arrow) tool. Now we indicate that this layer is a layer-mask. To do this, it is enough to right-click on its name and select the Mask command in the context menu. At the same time, the name of the layer mask and the masked layer will appear characteristic icons, and both layers will be blocked (images of locks will appear to the right of their names). Masking will take effect, willow see on the workspace only the area of \u200b\u200bthe background, which is covered by the figure of the mask layer.
To go to the mask editing mode and see both the background and view the mask window, unlock the mask layer (click on the appropriate lock image) in the edit mode, you can change the form, location and even the number of viewing mask windows.
In general, you can mask several layers, and not just the one that is directly under the layer-mask. If you need to make any layer disguised, it must first be located below the layer masks, and then in the properties of this layer, install the Masked switch (masked). On the contrary, to output the mask layer, set this NORMAL switch.
So we reviewed the simplest way Creating a mask. Why do we need masks? Mask in static form is a tool for creating collages.
Here we will not stop at what cases and why it may be necessary to hide something from the already existing so that the remaining appears in an interesting or form we need.

Fig. 578. Mask in editing mode. To see the action of the mask, set the locking of the layer mask (lock)

Fig. 579. View of the scene when the masking mode is on: a layer mask is blocked (lock). The background is visible only after viewing window masks

The most interesting and useful effects of using masks are obtained during their animation: the viewing windows of masks can change their shape and move against the background of the masked layers. That is why they are widely used in cartoons. The drop-down menu, ripples on the water, the metamorphosis of the clouds, the movement of the lips during the conversation - all this can be done using animy-produced masks.
Now consider the creation of animated masks. Essentially, an animir-bathroom mask is a mask, a viewing window of which either changes its form, or moves to the workspace. You can create multiple viewing windows, but all of them must be grouped into a single object using the Modify\u003e Groupe command (modify\u003e group).
For simplicity, we create a viewing window of oval shape and force it to move against the background of the masked layer. How to create a mask, we have shown above. Repeat this procedure as an exercise.
For layer masks, create an animation of movement. First, make moving a viewing window in a layer-mask. In our example, the 20th frame is chosen as the latter (it is key). In a layer-mask, we move the figure of the viewing window to a new place. We return to the first frame and execute the Insert\u003e Create Motion Tween command (Paste\u003e Create Motion Animation). As a result, an arrow will appear between the first and last personnel. To make the animation, we advise you to first highlight the viewing window figure, and then apply the MODIFY\u003e Groupe group to it. We have already noted this circumstance when considering the guide layers. If something is wrong, between the first and last personnel instead of the arrow appears a dowry line. Then in the disguised layer insert the frame on the 20th position. It can be the usual, not necessarily key, frame. Block the layers and press the key. To see a mask in action.

Fig. 580.

Fig. 581. Timeline when creating a moving mask and a view of the work field in edit mode (layers unlocked)

In Flash MX, the creation of animation is somewhat different from how it is done in Flash 5.O. We have already been considered these differences in the "Trial Animation" section of this chapter. Their essence is to choose the appropriate values \u200b\u200bof the frame properties in the Properties palette.
Viewing the mask window can change the form. To do this, instead of Motion Tweening (Motion Animation), you should use Shape Tweening (Form Animation). To do this, in the properties of the first frame, select the Shape value in the Tweening drop-down list. The Distributive value (blurred) Blend parameter allows you to get more smoothed intermediate frames; The value of angular (angular) of the same parameter allows you to save the angles and segments of direct lines in intermediate frames.
The feature of animation based on a change in the form is that the transformable object should not be used the grouping operation, as is done when creating animation of motion. The best visual effect during transformation is achieved if only one object is transformed. If you need to transform multiple objects, then place them in one layer.
In Flash MX, the animation of the type of transformation is made in the same way. The peculiarity is that the properties of the first frame are installed in the Properties panel (properties).
Interesting visual effects are obtained when there are several background layers under the mask. Consider the case when the lantern is required to illuminate any dark image. In our example, this raster picture is a fragment of the interior of the rural house. Obviously, in a layer mask you can use a round view window that will mimic the light spot. Next, we will need two layers containing identical images that differ from each other only by the fact that one of them is lighter than the other. These images can be obtained from the same file by correcting brightness and contrast in some raster graphic editor, for example, in Photoshop. Light image is placed in a layer directly under the layer-mask, and a dark image - in a layer located even lower. Pictures in these two layers must be arranged so that one completely covered the other. The disguised will be a layer with a bright image.

Fig. 582. Pictures in different layers must be combined so that the lighter covered the dark

The mask layer will contain a moving round view window. In view mode, this circle will move on a dark image, Os-Title that its plot over which is located. Thus, the visa-silent effect of moving the beam from the flashlight is created.

Fig. 583. Using a mask to create the effect of moving the beam from the flashlight

Note that you can control the movement of the viewing window the masks using scripts written in ActionScript. Without scripts, do not do when creating, for example, the drop-down menus.
Another way to create animations based on masks is that the mask window remains fixed, and the elements of the masked layer are moved. In this way, you can create, for example, the effect of changing the landscape by the moving train window, or running titers. If, say, create a group of several viewing windows (several fill areas grouped into one object), then with the appropriate selection of the disguised image and the background, you can create the illusion of moving and changing in the form of clouds or sea waves. Finally, you can move both both the objects of the masked layer and viewing windows.
Consider an example in which the mask is fixed, and the picture in the masked layer moves. On the source picture, which is the background of the whole composition, depicted dunes and cloudy sky. We want the clouds to move. To this end, we placed in the masking layer stretched in the width source image, and the visiting window of the mask was made so that it coincides with the sky section on the original picture. A stretched image in a disguised layer moves horizontally. At the same time, only the sky falls into the mask window, and the dune is masked. The width of the stretched image should be such that by the end of the movement its left edge coincided with a spruce edge of the background image. Of course, as a moving image, it would be possible to take only a band with clouds, but our way turned out to be faster in this case: we simply copied the original picture into the masking layer and applied the Scale command to it.

Fig. 584. Creating the effect of floating clouds based on the fixed viewing window of the mask and moving masked layer

Color Effects

Motion Tweening allows you to use different color effects in relation to the whole symbol. This feature is absent from Shape Tweening.
In Flash 5.0, in order to apply the effect to the symbol, you need to highlight this symbol and on the effects palette opens the Windows\u003e Panels\u003e Effects command, select the desired effect (see pictures).

Fig. 587. Accurate installation of all components of colors (Advanced)

Fig. 588. Installing Transparency (Alpha)

In Flash MX, similar effects are selected in the Color drop-down list in the Properties palette.

Fig. 589. Installation of effects in the Properties palette in Flash MX

Animation examples

We have already considered a number of examples of creating animation, for example, in the "Trial animation" sections, "guide layers" and "layers masks". Here we will give additional examples.

Aquarium

Consider how on the basis of one symbol "Fish" can be made "aquarium" with many different fish. To do this, use the library of characters supplied with Flash 5.0 package (team Window\u003e COMMON Libraries\u003e Movie Clips). Select the Fish Movie Clip symbol in it (cartoon "Fish"). This is not just a picture, but a cartoon, that is, the fish moves in some area. We transfer the instance of this symbol to the editor's work area. Now lay it out and edit it. For example, you will change the size and turn a little, as shown in the following figure. You can change the color and produce other transformation.

Fig. 590. A symbol instance from the library can be modified

We repeat this operation several times, i.e. create several instances of the "Fish" symbol. Each instance should "float" in its separate layer. Next, we will create another layer, hollow it with blue and draw algae. As a result, it turns out something that is shown in the following figure.

Fig. 591. In the workspace there are several instances of the "Fish" symbol, differing in size, color and initial position. "Algae" are drawn manually in the layer background

Flash allows you to make pretty naturalistic cartoons with a complex and high quality animation. It uses raster graphics. Separate fragments are cut from the source graphic image, which are then modified and turned into clips. These clips are used when creating a more complex composition, etc. The following figure shows a cartoon frame created on the basis of raster graphics.

Fig. 592. Cartoon frame created by composition fragments of raster graphics

Rotation of planets around the sun

We now consider the rotation of the three planets - Mercury, Venus and Earth - around the sun. This very instructive and beautiful example is described by Alexander Rybnikov on the site http://zona5.al.ru. In detail, step by step, describe the process of creating a cartoon.
Step 1. Create a new file. Let's execute the modify\u003e movie command and in the dialog that opens, specify physical dimensions Areas in pixels. We will not limit yourself, Flash-cartoons look well in a full-screen version, so we set the size of the frame 800x600. By default, the change rate of the cartoon frames is set to 12 frames / s. In this case, it is reasonable to increase to 16, because otherwise the image is noticeably "twitching".
Step 2. Draw the cosmos first. For this, simply outline the workspace with a rectangle and hill it in black.
. Now in the center of our universe it is necessary to put the sun. Try to portray it more or less believable, that is, to draw a certain red circle, and also put a slightly asymmetric gradient on it, which should give your product some volume, and then surround the sun with a glowing halo, which will add truth. All of the above can be achieved both by means of the Flash editor itself, and importing the ready image from any raster graphic Editor. But the second way in our case is extremely inappropriate, since the sun is quite a large object, and if it is presented in the form of a raster image, the volume of the output file will increase significantly. Consider how to draw the sun by Flash.
Draw a circle, to fill in the drop-down list with samples of colors, choose any gradient. Using the Window\u003e Panels\u003e Fill command (Windows\u003e Para Liter\u003e 3Alivka), open a dialog box that allows you to set the values \u200b\u200bof the gradient colors. Let the sun be covered with a bright yellow color, smoothly turning into bright red. A halo will make in the same way, putting a larger circle painted with a red gradient into black. It is important that the sun is exactly in the center, i.e. the center coordinates must be (400,300).
Step 4. It's time to draw three planets. It is important to notice that they are small enough, so in this case you can import a raster image in a transparent GIF format (more precisely, drawing with a transparent background). Such an image should occupy no more than 500 bytes of disk space. Importing is as follows.
First you need to create a new layer insert\u003e Layer command (Paste\u003e Layer). For each of the planets, a separate layer will be required, so the layers make sense to call the planets. Next, in this layer, you need to create a new character (insert\u003e Symbol command (Paste\u003e Symbol)). In the File menu, select the Import command and import the desired GIF image.
Step 5. After that, the created symbol needs to be placed in the appropriate layer. To do this, open the symbol library (Window\u003e Library (Library\u003e Library)) and drag from there The symbol with the image of the planet to the workspace (scene).
Step 6. Note that the planets must subsequently rotate around the Sun. - the center of the scene. Therefore, it is necessary to return to editing the symbol (2 times on the planet) and specify in the Info dialog box (Window\u003e Info) remoteness from the center. The remoteness of the horizontal axis is selected (all these values \u200b\u200bare negative, i.e. initially planets are located on the left of the sun):

• for the Earth: - 250 pixels;
• for Venus: - 180 pixels;
• for Mercury: - 120 pixels.

Stationary picture is ready! It should be as much as possible as possible to the next drawing:

Fig. 593. Stationary scene: the sun and three planets located on the left of it

Step 7. Now let's make our planet rotate counterclockwise around the sun. It is known that those planets that are located closer to the Sun rotate faster. We will try the number of cartoon frames to calculate in such a way that the land for one cycle makes one turn, Venus - two, and Mercury - three. The optimal number of frames, multiple two, three and four, is the number 120. It would be ugly if all the planets at some point in time became in a row. Therefore, set the initial location angle of the planets:

• for Earth - 150 °;
• for Venus - 120 °;
• for Mercury - 0 °.

This data can be specified and changed in the Info dialog box.
Step 8. Now let's create the first key frame for any of the planets, for example, for the Earth. To do this, click on the first frame of the corresponding layer right-click and select the Create Motion Tween command in the menu that opens. Then copy this frame to the clipboard (SUTA) and insert it (Paste) to the location of the frame with number 60. Then it will turn the ground to the angle 180, i.e., indicate the angle value in the Transform window of equal to -30 (see Figure). The next key fraction will be the 90th (turning it to 90 °) and the last key frame - the 120th (full turnover of the Earth around the Sun is completed).

Fig. 594. Development of animation in a cartoon with sun and planets

Step 9. Similarly, we can set the movement of Venus and Mercury. To set the movement of Venus, it will be required twice as much reference frames, for Mercury - three times. You can copy several frames at once. Therefore, in the dialog box, it is enough to set the corners only for one turnover of each of the planets.
Step 10. It remains only to publish the resulting scene (File\u003e Publish command and enjoy the resulting effect.
The volume of the SWF file turned out to be less than 10 KB. Even an animated Gif or JPG file would take a lot more disk space. And our cartoon duration of 7.5 s has a volume of just 10 Kbytes!

Sound in cartoon

You can add sound to the cartoon. To do this, you must first import the sound file in one of the following formats: WAV, AIFF or MRCs. Import is carried out using the File\u003e Import command.
Sound accompaniment can decorate your cartoon. However, many users are often preferred to disable the sound. Therefore, it would be not bad, developing a voiced cartoon, to provide a button in it to turn off the sound. This button should assign the STOP ALL SOUNDS action (stop all sounds) (similar actions assigned to objects, are also called an Action or script). The sound file has the following parameters that affect both sound quality and file size:

• Sample Rate (Sample Rate).The number of samples is sound signalproduced in one second. Typically, this value does not exceed 22 kHz, which corresponds to the 11 kHz frequency band (according to the kotelnikov theorem, the bandwidth of the reproducible frequency is equal to half the sampling frequency).
• Bit resolution (Bit Resolution).The number of bits (binary discharges) used to sampling the audio signal by level. 16-bit files are characterized by smaller background noise, but to reduce the volume of the file in Flash-cartoons, an 8-bit sound is usually used.
• Channels (Channels). Sound may be single and two-channel (mono and stereo). For flash-cartoons, monosular is usually sufficiently sufficient, requiring approximately half of the memory than the stereo sound.

When developing a cartoon, you can use high-quality sound files, and then, when publishing a SWF format to a file, set the desired sound parameters.
To import a sound file in the cartoon, run the file\u003e Import command and in the Import dialog that opens, select the audio file you want to import. Then click on the Open button. As a result, the selected sound file will fall into the cartoon library.
After importing a sound file in the cartoon it needs to be placed and set the parameters. Perform the following:

1. Create a new layer for a sound file.
2. Highlight the desired keyframe on this layer, open the Library (Window\u003e Library) and drag the sound file to the working field. At the same time, the sound file will be distributed to all frames until the next keyframe, if any.
3. In Flash 5.0, run the WMDOW\u003e Sound command\u003e Palels\u003e Sound. The Sound palette opens. Flash MX refer to the Properties panels. In the SOUND drop-down list, select the desired sounds. This list shows all imported audio files. The file information is shown below the list, called the file: the sampling frequency in kHz, channels, bite resolution, sound duration and file size.
4. In the Effect drop-down list, if desired, select sound effect. The default is None (no). For example, the FADE IN effect (increasing) reproduces sound with a gradual increase in volume.
5. In the Sync drop-down list, select one of the following values:
   • EVENT (Event). Begins to play sound from the first keyframe and continues until the file end, even if the cartoon is already over. This value is used by default.
   • START (start). Begins to play sound from the first keyframe. However, if the key frame is reproduced again with the ongoing sound, Flash starts playing the sound again. This value is usually used when the buttons are voicing.
   • Stop (Stop). Stops sound playback.
   • Stream. Synchronizes sound with animation. At the same time, Flash shocked or lengthens the animation so that it coincides with the sound. Playing sound stops when playing the last frame containing sound. To specify the end of the sound, you can add the final keyframe before adding sound.
6. In the Loop field, set the number of sound repetition cycles. If a sound file duration is known, the number of animation cycles and frame playback frequency can be calculated how many sound playback cycles will be required when playing your animation. For example, if the animation contains 48 frames, and their playback frequency is 12 frames / s, then the duration of the cartoon is 4 s; If the duration of the sound file is 2 s, then the number of sound playback cycles is 2. In practice, in order not to do the calculations, it is usually indicated by a sensible larger number of cycles.
7. After adding a sound file to view the results, press the key. Or execute the Control\u003e Play command.

After placing the sound file in the cartoon you can edit it. For example, you can delete unnecessary sound fragments, change its volume. To do this, in the SOUND palette, click the Edit button. As a result, the Edit Envelope window opens.
A ruler with sliders with which you can set the beginning and end of the audio file can be located between the panels of the left and right audio channels. By moving the left slider to the right, remove the initial fragment of the file. Similarly, shifting the right slider, delete the final fragment of the audio file.
On the left and right channels, envelope lines are displayed, which approximately indicate the direction of change of sound. In places where it happens, the square markers of the envelope are installed. To increase the sound volume, drag the marker up, to reduce the volume - down. Enveling line can be given a bizarre form. To do this, first click on the envelope to install additional markers, and then drag them to the right places.
At the end of the audio file editing, click OK button to close the Edit Envelope window.

Fig. 595. Edit Envelope Window

It should be borne in mind that adding sound can significantly increase the number of the cartoon file. Therefore, measures should be taken to compress sound information. If you reduce the sampling frequency, it may worsen the sound quality. You can use not two-channel, but one-channel sound. For setting the properties of sound in Flash, two ways are provided:

• To determine the properties of all Cartoon Sound Files, use the Flash tab of the Publish Settings dialog box, which opens by the File\u003e Publish command (File\u003e Publication). This method is good if the cartoon contains one or more similar sounds.
• To set the properties of individual audio files, use the Sound Properties dialog box. To do this, first open the Cartoon Library (Window\u003e Library) and double-click the icon of the sound file, the properties of which you want to change. At the top of the dialog box displays the sound file information. New parameter values \u200b\u200bcan be selected in the Export Settings group drop-down lists. At the same time, at the bottom of the dialog box displays a new file size in kilobytes and percentages from the source size. You can use compression format (compression) mp3 as the best from Flash.

You can assign sounds to different status of the button. Sounds are saved inside this symbol and therefore reproduce in all its copies. To add sound to the button, you need to do the following:

1. On the temporary diagram of the Add Layer button, in which you will place sounds.
2. In the sound layer, create a key frame corresponding to the button status that you want to voice.
3. Highlight this keyframe and set the sound parameters.

Cartoon Composition - Scenes and Clips

The cartoon may have a complex structure (composition). So, individual elements of one cartoon can be cartoons. In the above example with the fish aquarium, various instances of the Movie Clip symbol, i.e. were cartoons. Each cartoon has its own timeline that manages it playback. If the cartoon is included part of In another cartoon, then to emphasize this circumstance, it is called the clip. In turn, the clip may contain other clips.
To manage a multitude of clip elements, they are usually distributed across the layers. The multilayer structure is used when creating almost any more or less complex object, be it just a drawing or an integer animation.
In addition to the decomposition of the cartoon (clip) on the layers, it is possible to divide it into temporary segments, i.e. on the scene. Then these scenes can be placed in an arbitrary order. The bases for splitting a cartoon on the scene can be the following:

• the number of cartoon frames is too large. For example, the timeline is not visible on the screen;
• at some point in time, the composition of graphic images (change of decorations and characters) is changed;
• the cartoon fragment is repeated several times or can be used in other cartoons.

When creating a new cartoon (File\u003e New), only one scene named Scene 1 is created by default. In this case, any animation developed becomes part of this scene. To add a scene, run the Insert\u003e Scene command. At the same time, the working field will be cleaned over the timeline on the left, another name appears - SCENE 2.

Fig. 596.

If your cartoon contains several scenes and clips, then use the appropriate menu buttons to display on the desktop the desired scenes and the clip. They are located above (in Flash 5.0) or under (in Flash MX) by the timeline on the right.
To set the scene settings, run the Window\u003e Panels\u003e Scene command (Palette\u003e Scene) command. In Flash MX, this command is shorter: Window\u003e Scene (window\u003e Scene). A list of all scenes of this cartoon will appear on the Scene palette. The order of scenes in the list is important, since it is in this order that they will be played. To change it, simply drag the scene name in the list to the new position. To change the scene name, double-click on it, enter a new name and press the key. .

Fig. 597. Palette Scene. At the bottom of the palette, there are three buttons for duplication, adding and removing the scene

To view the scene, you can click on its name in the Scene palette list, although there are other tools for this, for example, the menu button located above the timeline.

All the work on creating a movie occurs using the Timeline panel (time scale), the image of which is shown below. The Timeline panel is divided into two parts of the vertical line, which can be moved by the mouse. The right side of the panel is the so-called "line of frames" - a ruler on which frame symbols are located having a form of small rectangles. Personnel content are static pictures that appear on the work field. Personnel numbering is presented in the upper part of the line. Under the framework of the frame is located "Status String".

Key personnel are shots in which static pictures are located, "coming up" with animation. Keystroke leads to the creation of a new cure frame. Keystroke leads to the appearance of the right of the key frame of a duplicate frame. Duplicating frame - This is a frame that does not have its own content, and entering into itself only a reference to the content of the key frame that stands to the left of it. The creation of a duplicating frame makes it easier to work on the animation, eliminating the need to draw the same plot in neighboring frames. On the line of frames, the empty key frame is indicated by a hollow circle, if it contains a graphic object, it is indicated by a black circle. The last frame in the chain of duplicating frames is indicated by a white rectangle.

- The main tool when working with animation in Flash. It displays information about the layers, which frames are key, and which Flash generates. Using the timeline, you can understand which frames contain actions or tags. It allows you to move key frames and whole pieces of animation.

The main capabilities of the timeline:

1. To make a layer active, it must be allocated. You can draw and edit only on the active layer. The active layer is highlighted on the mounting line, and the icon with the image of the pencil indicates that it can be edited (Layer 3).
2. The contents of the layers, which are from above on the mounting line, is displayed on top of the contents of the layers under them. To exchange layers, it is necessary to drag the layer name to the desired location on the mounting line.
3. To create a new layer, you must select a position on the mounting line for a new layer and click the "Add Layer" button.
4. To remove the layer, it is enough to drag it to the basket.
5. To renaming the layer, double-click on it on the mounting line.
6. When creating a multi-layer image, use layer controls. Clicking in the column under the image of the lock blocks any editing, and in the column under the image of the eye will make the layer of invisible.

Below is an example of an animation roller, in which in different layers with a shift of 25 frames, a different background (landscape) is placed with the corresponding text block. The landscape was obtained by filling the background with a raster image Color Mixer-\u003e Bitmap, followed by the processing tool tool the fill transformer.

Frame scales - field where you can add and delete simple and key frames. If you call the context menu (right mouse key) on any frame, you will see a list of actions that can be performed. On the scale displays information about frames that are key (such frames are marked with black circles), contain actions (beak "a" over a circle) or a label (red checkbox, after which the label is called). Color also talks about the type of personnel. Gray - these are shots that are exactly repeated a keyframe (KeyFrame). A bluish or greenish backlight suggests that frames are generated by Flash. And finally, white or "empty" striped space suggest that there is nothing on these frames.

Shadow control buttons - These are the buttons to display adjacent frames as it were through a tracing to see the difference between previous and subsequent frames. You can set the depth of such a display on both sides of the marker. Animation consists of a sequence of frames. The frame can be both manually compiled and the generated Flash. This refers to the personnel of one layer. Since Flash scenes are usually from several layers, the final "multilayer" frames may contain, both generated and "home-made" layers. In computer animation there is a concept - keyframes (KeyFrames). Their name speaks for itself. These are shots that Flash is not entitled to change in the process of creating animation. You ask these key shots, and intermediate frames between them builds Flash. There are two types of intermediate frames - frames built on the basis of changing geometry (Shape Tweening) or frames built on the change of symbols (motion tweening). And, of course, frames can be empty, i.e. Do not contain anything.

Symbols are one of the key concepts in Flash. The symbol can be like the simplest geometric primitive or their association and a whole animation (MOVIE). This allows you to use characters as a powerful mechanism for creating abstractions in Flash. There are three types of characters: Animation (Movie Clip), button (Button) and image (Graphic):

1. Image (Graphic)is a symbol consisting of a single frame. Hence his static name. If the symbol really is a static (non-animated) object, it is better to make it image (Graphic).
2. Button. In Flash, there is a special symbol type of symbol specifically adapted. It has 4 frames: Up, Over, Down, Hit, which contain the following buttons status:
   • Hit is the usual state for a button containing the link that the user has already visited.
3. Animation (Movie Clip). This is the most "full" type of symbol. It can have any number of frames. A symbol of this type can be perceived as a MOVIE type object in ActionScript (Built-in Flash language).

Symbols can be created as "from scratch" (insert-\u003e New Symbol, Ctrl + F8) and using the current selection by placing it immediately into the symbol (INSERT-\u003e convert to Symbol, F8). The second reception is used much more often than the first, because No longer need a symbol to position and change the desired size.

In Macromedia Flash, there are two fundamentally different ways to animate anything:

1. Draw each frame to yourself using Flash only to scroll through frames.
2. Make Flash automatically calculate intermediate frames.

Step-by-step (frame) animation

This is an animation fully composed of key frames. Those. You yourself determine how the contents of the frame and its "duration" (that is, how many such static frames will occupy the image). Before drawing another frame, you must insert a blank keyframe ( ) if you want to get a copy of the keyframe, then press And then edit the received copy. When you want to use ready-made images as a basis, it can be done as follows - File, Import ... On the timeline, frame animation looks like:

The advantages of this method can be attributed to:

1. Passing animation gives, in a sense, greater control over the animation, and if you are an experienced animator, then you can use it profitable.
2. This is the only way to organize a change of absolutely independent images - a slideshow (for example, creating a normal Flash banner).
3. And everything else that follows from the ability to draw every frame manually.

The following can be attributed to the following:

1. Catching animation is difficult to modify. Especially if this is not a discrete set of images, but the associated animation. You have to modify all the shots.
2. Radious animation occupies a fairly large volume, as you have to store information about each frame.

Elementary frameworks with frames:

• Insert a blank key frame - Insert -\u003e Blank KeyFrame, .
• Key frame that repeats the content of the previous one - INSERT -\u003e KEYFRAME, .
• Clear keyframe - INSERT -\u003e CLEAR KEYFRAME, +.
• Insert a regular frame - INSERT FRAME, .
• Delete Frame - Insert -\u003e Remove Frames, +.

Elementary operations with roller:

• View the video - Control, Test Movie.
• Changing the height and width of the roller - Modify, Movie.
• Convert Flash Roller to HTML document File, Publish Setting, HTML tab.
• View HTML document - File, Publish PREVIEW.

Create a multi-layer film with a step-by-step animation "Flower Life". 1st Layer - Frame, 2nd Layer - Pot, 3rd Layer - Flower. You can present the 3rd layer with three layers: sheet, stem, inflorescence.

The pot and the frame are all the time in front of our eyes, and the flower for 25 key personnel has time to grow and hurt. In the layer "Flower" each frame differs from the previous one, but you can make a change in the state of the flower of the Cher one frame.

The publication of the roller occurs using File-\u003e Publish Setting. On the Formats tab, options for publishing are selected, you can select several, on the corresponding tabs set parameters for the selected publication option, then the Publish button is pressed. At the same time, the created files are saved in the same folder as the source file with the extension.fla. In our example, a GIF-animated file is selected for publishing, as in all subsequent examples.

Try the second task yourself by using the above algorithm below. It will be the creation of an animation "moving car":

• create a layer "Landscape";
• let us execute the File / Import command and import a picture with the image of the landscape or create the asphalt background;
• we highlight the 30th frame on the lineup and click F5. Create a chain of duplicate frames for a landscape;
• create a new layer of "Auto";
• draw a car without wheels in the first key frame;
• grouped the drawn car and pressing F8 will create a library sample - clip autumn;
• i slide the car, select the second frame and click F6;
• we will move the car and create new key frames as long as the car does not work outside the work field;
• create a new layer and call it "Wheel1";
• draw in the first frame the wheel and create a library sample of Wheel from it;
• create a new keyframe and move the wheel in it for the moved car, etc. In all other frames, turning the wheel at the same time on a small angle;
• we block the "Wheel1" layer and copy the entire sequence of frames into the buffer;
• create a new layer and call it "Wheel2";
• i will select the first frame and copy from the buffer the entire sequence of frames;
• for loaning, click +.

As another independent task, you can suggest creating step-by-step animation "combustion of matches":

In Flash, there are two options for building intermediate images - Motion Tweening (Building an animation based on symbol modification) Shape Tweening (Building an animation based on a change in the form). These methods differ in the root.

Movement Animation

With this method of animation, the initial position, color, sizes, orientation and end parameters, and the program itself carries out this movement. In this case, the Flash animation method automatically builds intermediate frames between the keyframes you specify. This means that you draw an object, then on another frame, make changes to which we will talk below, and ask Flash to calculate those frames that lie between these two keyframes. He performs this job, and you get smooth animation.

The speed and smooth animation depend on the number of frames that are allocated under the movement and speed of the Flash movie (Movie). The movie speed can be changed as follows: Modify-\u003e Movie ... + - The Frame Rate parameter sets the number of frames per second. For high-quality animation, the speed should be at least 25-30 frames per second. The smoothness and duration is set by the number of frames allocated to the animation (its fragment).

Consider an animation with the construction of intermediate frames (Tweued Motion). This is the most commonly used animation technique in Flash. In this case, the animation is based on the modification of the characters, i.e. Animation object is a symbol. As in the animation of Shape Tweening, on each object at one point in time, we need one layer. On this layer there must be one character with which all changes will occur.

When using Motion Tweening, the following parameters are modified:

1. size (both in proportion and disproportionately - separately height and width);
2. incline;
3. location;
4. angle of rotation;
5. color Effects;
6. you can use guide layers to set the trajectory of the object movement.

You can enable Motion Tweening in several ways (and disable, unfortunately, only one). In order to enable motion tweening, you need to make an active start frame of your transition, then by pressing the right mouse button, select Create Motion Tween in the context menu, selecting Insert-\u003e Create Motion Tween). The universal way to turn on / off Motion Tweening is using the Frame panel by selecting Motion in the Tweening field. You can also control the animation parameters:

• Easing - reverse exponential acceleration, works absolutely the same as in Shape Tweening.
• Rotate allows you to control the rotation. AUTO - Flash automatically tries to determine the number of turns. CW (CLOCKWISE, clockwise) and CCW (counter clockwise counterclockwise). At the same time, close to the field on the right there is an opportunity to introduce the number of revolutions. You can use only integer values. You can turn off the rotation by selecting NONE.
• Orient to Path - turns the symbol in accordance with the guide line. Snap binds a symbol to this guide.

In cases where the number of frames of the main scene does not have a multiple number of characters frames, the Synchronize checkbox allows you to synchronize these two animations.

Layers that contain the curve, according to which the object should move are called guide layers (Guide Layers) (i.e., they contain the trajectory of the object movement). In order to add the guide layer, you need to select the layer on which your character is located; Then pressing the right mouse button, select Add Guide in the context menu. In this case, the initial layer becomes guided (Guided Layer). This is not the only way to create a guide layer (Guide Layer). Any layer can be made guides by specifying this in its properties, or sent by dragging the desired layer with the mouse, so that it is under the guide.

Next, you need to draw a trajectory of movement. The trajectory can be any curve that is not a fill area. Everything! The control layer is ready. You can prohibit it for editing so that it is more convenient to work, and in the future and to make it invisible.

Now, to use this layer, you need to take a symbol for the central point (this is such a small circle) and drag it to the trajectory. You will feel when the character "clings to" for her, and you will see how it will slide it.

Further, all on a familiar script - keyframes, turn on motion tweening ... If you need to turn the object according to the trajectory, and not just moving through it, then you need to enable the ORIENT TO PATH checkbox on the FRAME panel.

Motion Tweening allows you to use different color effects in relation to the whole symbol. This feature is absent in Shape Tweening. In order to apply the effect to the symbol, you need to select this symbol, and on the effects panel (Windows -\u003e Panels -\u003e Effects), select the desired effect by setting the brightness, color displacement, shade.

Create an independently very simple example of the animation of the movement of the ball in a circle, taking additionally below the algorithm:

• draw in the first frame a circle and hollow with its radial gradient fill;
• grouped a drawing;
• we highlight it with the transformer tool and move the rotation center for some distance;
• let's go to 30 frames, click . We will make it a copy of the first frame;
• let's return to the first frame and open the Properties panel and in the Tween list will choose Motion;
• in the optional ROTATE list, select forced rotation clockwise (CW) or counterclockwise (CCW).

The following example is somewhat more complicated - this is the creation of animation of motion of text letters:

• using the text tool, create a text block;
• we highlight the written word and distribute it into separate letters (Modifi / Break Apart);
• dilution letters on separate layers modify / distribute to layers;
• we convert each letter in each layer in the drawing, we repeat the Modifi / Break Apart command. Hold each letter and grouped it;
• on the line of frames at some removal, create copies of the first frame, for this click ;
• in turn, we will allocate the first frames for each letter, to endure it outside the working area, changing the proportions of the letter, the center of rotation, etc.;
• in the Properties panel in the Tween list, select Motion. In the optional ROTATE list, choose one turn clockwise;
• browse Animation in the viewing window + .

Animation of the form is a smooth change in the animation object on the work field. Under the object we understand not a group or a text block, as with an animation of movement, but a normal multicolor pattern, which can consist of several fragments. Moreover, the number of such fragments at the beginning and at the end of the animation may be different.

In the process of animation of the shape, the drawing can decay on the sands of independent fragments, each of which will gradually transform into something unexpected. Or, on the contrary, several independent images located on the work field during the animation process, gradually changing your appearance (sizes, color, shape), become part of a single image. Let's say it is necessary that the square smoothly turned into a circle, or the silhouette of the rabbit smoothly flour into the silhouette of the wolf. In these cases, shape tweening is used.

As usual, you specify two keyframes at some distance from each other. In this embodiment, there is a rigid limitation: the animation should occupy a separate layer and be a single drawn figure (there should be no groups or characters). After there are two keyframes, you need to make the first one of them (just go to it), and select on the Frame panel (Windows-\u003e Panels-\u003e Frame, +) In the Tweening list of the Shape string. Frames on the timeline must be painted in a greenish color and arrogant should stretch from the first frame to the second. As a result, a number of intermediate frames are obtained, which will reflect the transition from the first figure to the second.

When using Shape Tweening, you must specify two parameters:

• Easing sets back exponential acceleration. The magnitude of this parameter may vary from - 100 to + 100. This means that if you set a negative EASING, the movement will occur with a positive acceleration, the speed will increase. And vice versa, if Easing is positive, the animation will slow down;
• The BLEND parameter determines the transition algorithm:
  • Distributive - smoothes the transition from one figure to another.
  • Angular (angular) - trying to keep the proportions of the corners.

The last tool in the animation shape tweening is the control points (Shape Hints, literally - tips for forms). These are points with which you help Flash correctly make the transition. Without them, do not do in the case of complex forms. Use them is very easy. On the first key frame (from which the animation begins) you add a checkpoint (modify-\u003e transform-\u003e Add Shape Hint,

You can remove all points using Modify-\u003e Transform-\u003e Remove All Hints. You can delete the same point by pressing the right mouse button on it, and selecting Remove Hint in the context menu. Since the control points are denoted by the letters of the Latin alphabet, there may be a maximum of 27.

Options for the transition from one form to another can be a lot, so the animation can go along the way that will suit you to a lesser extent. Even the transformation of such a simple geometric shape as a rectangle located vertically, in the same rectangle, but located horizontally, can occur in different ways. For example, in the process of such a transformation, the figure can be in the form of an oval or even a circle. To control the animation process, you must try to simplify the animation, separating the drawings into several independent fragments located in different layers, but at the same time participating in the animation. More coordinating is the use of shape marks referred to above.

If you need to disable Shape Tweening, in the Frame pane, select Tweening: None.

When using Shape Tweening, the following shape parameters can be modified:

• the form;
• location;
• size (any proportions);
• colour;
• angle of rotation.

Below is given to this method of animation an example of "transformation" of the elephant in the sheep and back.

Try to create an animation of the shape of the "transformation" of the snake in the eagle and back:

Guide layer and layer of trajectories

Often in the process of animation it is necessary that the object is not moving in a straight line, but according to a given trajectory. Animation in this case is created in the usual way, and the trajectory is drawn in a separate layer. The layer of trajectories can serve several different animations, each of which is placed in a separate layer, but all these layers with animation should be located under the layer of trajectories. To draw a trajectory, you can use various tools: pencil, brush, feather, ellipse, or rectangle. To tie a moving object to this trajectory, you need to simply transfer this item to the trajectory in the initial and final key animation frames. In this case, in the Properties panel, the animation parameters should be corrected in such a way that the SNAP check box is enabled (tie). To do this, it is necessary to pre-highlight the first key frame of the animation, it is also useful to select the View / Snap to Objects command.

For example, create a movie "Butterfly flight over a flower", according to the above algorithm:

• import the flower pattern in the first layer;
• in the first key frame of the second layer, we draw a butterfly (you can get a butterfly by the vectorization of its raster photography Modify / Trace Bitmap);
• lay the butterfly, click by creating its library sample;
• staying in the second layer, let's get through, for example, in 48 frame and click by creating a key frame that final animation;
• in it, we move the butterfly to the other side of the work field;
• lay out the 60th frame and click by creating a chain of duplicate frames;
• we select the first frame and in the Properties panel in the Tween list, choose Motion;
• i highlight the layer with animation and knocked in the context menu Add Motion Guide command;
• we draw on the work field of this layer the curve for the movement of the butterfly, the beginning and the end of which are located nearby;
• we highlight the first key frame of animation, put the butterfly for one end of the trajectory;
• then we highlight another key frame of the animation, put the butterfly to the other end of the trajectory;
• select the first key frame of the animation, open the Properties panel and the ORIENT TO PATH checkbox;
• create the effect of waving butterfly wings when flying. Let's open the library sample + ;
• twice with the mouse in the image of the butterfly in the viewing window;
• create a new keyframe, for example, the third thing to move the butterfly wings natural;
• in the new key frame, one wing of the butterfly first, and then the second;
• let's return to the main scene and start viewing.

Masked layer and layer mask

This layer is called up to close and make an invisible part of the image located directly below it. If the layer-mask does not contain any image, it is completely covered by itself (masks) located below and the associated layer, which is called disguised layer. If something is drawn in a layer-mask, then any fill of this pattern becomes a transparent part of the layer. If an image created in a layer-mask is animated, then the transparent part of the mask will move on the screen. The layer mask can mask several layers. You can make a conventional layer with disguised by changing its position in the layer stack. You just need to transfer the usual layer under the layer of the mask. Animation in this case can be two types. Either the animation of objects located on the masked layers. Either an image animation located on a layer-mask.

An example of creating the effect of the gradual appearance of the text on the screen of the letter beyond the letter. To do this, use the animation of the image movement in the layer mask using the following algorithm:

• in the first frame of the layer insert a static text block and write some word;
• lay out the 40th frame and click , thereby determining the length of the future animation;
• create a new layer and make it a layer-mask (select the layer and select Mask item from the context menu) and reject blocking from it;
• in the first frame to the left of the word, we draw a small rectangle and grouped it;
• staying in a layer-mask, lay out the 40th frame and click ;
• staying in the 40th frame, with the help of the transformer tool, crouched a drawn rectangle so that it closes the whole word;
• i will select the 1st frame and opening the Properties panel, choose Motion;
• start the animation.

The following is a GIF-anmic file, which uses the animation of the text of the text of the text "Happy New Year", and then the text "erased", using a layer-mask, a rectangle with gradient fill, is therefore it turns out the effect of "transfusion" letters. The background is a fragment of raster graphics.

The following example demonstrates the "growing" from the word point, where imported raster graphics are used as a masked layer, and an animation is created in the layer-mask in which the word grows out of the point, and then it decreases again. In this example, the animation of the form is also used.

Creating buttons

The button is a special kind of symbol designed to respond to user actions, for example, pressing the button itself, its keyword analogue or active area in the film. The timeline of the button contains the following four frames:

• Up - the usual state of the button;
• Over - when the mouse cursor is above the button;
• Down - when the cursor is over the button and the mouse key is pressed;
• Hit is the usual state, for a button containing the link that the user has already visited;

If you need to create several identical buttons, then in this case it is sufficient to create only one sample button. And then apply the necessary inscriptions on it, change color or size. If the button should contain animated objects, for this you need to create a predetermine MOVIE CLIP characters, and then simply place them in the appropriate button frame.

Main types of actions:

1. Go to - transition to a given scene or frame;
2. Play - Starting a stopped film;
3. Stop - stop moving;
4. Toggle High Quality - Movie Display Quality Switch (Smoothing Mode);
5. SPOT ALL SOUNDS - SOUND Turning off;
6. Get URL - transition to the specified address;
7. FC Command - Movie Playing to other applications;
8. LOAD / UNLOAD MOVIE - the simplest use of this command, this is a download of the film from the specified address;
9. Tell Target - movie selection for further management (target target);
10. If Frame is loaded - executing the command in case of loading the specified frame;
11. If - verification for truth;
12. LOOP - cycle;
13. Call - call;
14. SET PROPERTY - setting the properties of the film;
15. SET VARIABLE - Variable value;
16. Duplicate / Remove Movie Clip - Creating or removing an instance of the clip;
17. Drag Movie Clip - Includes the video drag mode;
18. Trace - display of messages when performing actions;
19. Comment - Comments;

Algorithm for creating a button (ALG1):

• create a blank for the button;
• highlight the button with the tool and convert it to the symbol (INSERT \\ Convert to Symbol ...). Specify the name (for example, But) by selecting the Button type;
• go to the symbol editing mode by double clicking on the button "Button" symbol;
• go to the Over Frame on the mounting line, insert an insert \\ keyframe empty frame, edit the button by changing its color;
• go to the DOWN frame, insert an insert \\ KeyFrame empty frame, edit the button by changing its color;
• go to the HIT frame, insert the insert \\ KeyFrame empty frame, edit the button;
• exit the symbol editing mode (in the upper left corner of the film, go to SCENE1).

Algorithm for creating a button to go to the specified Web page:

• create a button (ALG1);
• set the action for this, select Window \\ Actions. In the Basic Actions drop-down menu, select the GET URL action, twice clicking on it in the left pane window. Climbing in the right window for the selected action, specify its parameters (for example, URL: http: \\\\ www.ya.ru);
• test the resulting clip CONTROL \\ TEST MOVIE.

Algorithm for creating a button to stop the clip:

• create a button (ALG1);
• add a new layer;
• create an animation in it;
• build an image in it (for example, a circle);
• image Convert to the symbol (INSERT \\ convert to symbol ...);
• select 30 frames in both layers and insert the keyframe insert \\ KeyFrame;
• transfer the image of the symbol of 30 frame to another place;
• return to 1 frame and select Insert \\ Create Motion Tween;
• select the layer with the image of the button and set the window \\ Actions for it. Select Stop action;
• browse the resulting clip Control \\ Play.

As an example, we will create a button with built-in animation in the one given algorithm:

• press the keyboard key + , Create a new sample type of Button and set the name Knopka;
• click OK and get into the sample editor;
• in the first frame (Up), on the working field, we draw oval and hill it with radial gradient fill;
• three times press the key This copies the contents of the first frame into all the others;
• we highlight the second frame (over) and slightly increase the image of the button in it, we will circle it with a yellow contour;
• we import a file with an animation from the library (for example, a person's run or any other clip);
• we put this clip on the image of the button, we give all the scales in accordance with;
• i highlight the third frame (DOWN) and slightly reduce the image of the button in it;
• let's return to the main scene, open the library + If it is closed, removing the created button.

Publishing this object is made in HTML mode with an indication of the appropriate SWF file.

Creating scripts using the ActionScript language

Create a button that control the work of the slideshow:

• prepare several raster pictures (slides);
• we import them in the present movie;
• based on each of them, create library samples ( ) Type Button, creating a sample will delete the image from the work field;
• the first layer of the film is called Buttons, select the first frame and in it we will place the created buttons, so that they do not interfere with viewing;
• create a layer to accommodate the slides of images;
• in it using a key Create empty key personnel, as much as slides;
• we highlight the first empty keyframe and put the library slide in it ( + - opening library);
• we will give the script to this frame. To do this, staying in the first frame, open the Actions panel and double-click the Stop () script from the Actions / Movie CONTROL folder, which stops viewing the slides waiting for the user command;
• the last two points of the algorithm will repeat for other empty key personnel;
• frame with the first inserted slide Let's call Begin, and with the last end (names are set in the Properties panel as a frame label);
• let's return to the layer with buttons where the miniatures of our slides are located;
• tear to each button the script that refers to the program to that frame where the corresponding slide is located;
• to do this, you need to select the following script using the Actions Panel:

ON (Release) (

Gotoandstop (k); - The digit in brackets indicates the number of the corresponding frame.

• in the first frame of the layer with buttons, you can place the buttons for the alternative selection of slides. In our example, this is "Start", "Forward", "Back" and "End";
• select the first alternative start button (Begin) and tie the script to it:

ON (Press) (

Gotoandstop ("Begin)";

• to the Back Button (Previous) Tear such a scenario:

ON (Press) (

Root.prevframe ();

• to the forward button (Next) we will learn such a scenario:

ON (Press) (

Root.nextframe ();

• to the end button (END), specifying the transition to the last frame, tie such a scenario:

ON (Press) (

Gotoandstop ("END");

Below is the result of our work:

When creating animations using ActionScript, a three-tier cycle is often used. In the first frame (preparation) initial data is recorded, in the second frame there are elements of the cycle body, and the command is written to return to the second frame GotoAndPlay (2);. The work of the three-digit cycle is to alternately view the frames involved in the cycle, until the condition for exiting the cycle is fulfilled.

Consider the use of a three-digital cycle on the example of creating a mask movement. Our film will consist of three layers:

• Imported into the first layer, which is called Masked, raster picture. Based on it, create a library sample type "clip". We delete it from the work field and bring an instance of this clip to the working field.
• In the Properties panel let's call it masked.
• In the second layer, we have an instance of the clip, which is a mask of the original form. The name of the second layer and the name of this instance will be Mask.
• In the third layer, which is called Actions, create a three-tier cycle.
• In the first frame, we use the MovieClip setMask method, which allows you to mask any clip with another clip located on another layer. Method format:

<маскируемый клип>.setmask (<клип-маска>)

• Open the Actions panel and the first frame of the third layer will give a single-line script Masked.SetMask (Mask);.
• Using the properties (PRIPERTIES) of the MovieClip object, to the second empty key frame will add the rotation of the mask Mask._rotation + \u003d 2;. You can also add a change in the size and coordinates of the mask. For example, Mask._x - \u003d 1; Mask._Y + \u003d 1; Mask._Height - \u003d 1; Mask._width + \u003d 1;
• By the third frame we will learn the usual GotoAndPlay script (2);

With each access to the second frame, the Mask clip will be rotated by 2 °. Before the eyes of the user rotates a window that has the form of the Mask clip, through which part of the Masked clip is visible.

We will learn to manage the color of the library clip instance. Create a film in which on the background of the rising sun, the stars rotate in many ways, changing their color.

The COLOR object instance is created using the designer in the ActionScript environment and has the following format:

<имя экземпляра объекта Color> \u003d NEW COLOR (<имя экземпляра клипа>)

• We highlight the first key frame and import a raster image of the rising sun into it.
• Saydadim the second layer and in the first frame draw three arbitrary stars.
• We will allocate them in turn and create clips under the name Star, Star1, Star2.
• An instance of the first clip assign the name ST, the second ST1, and the third ST2.
• We will learn to each sample your script. The difference in the scenarios is that each copy of the clip is assigned different initial color, a different angle of rotation, as well as different conditions for changing the current color in IF operators.
• Color transmission The clip instance, for example, for STAR1, is carried out using such a string in the Star1Color.Settransform script (ColorTransform);.
• We will allocate alternate clips with a script, click And create new clips, for example, with the names of Clipstar, Clipstar1, Clipstar2.
• You can withdraw several samples of each clip on the work field.
• An example of a script for STAR1 is given below:

OnClipevent (Load) (

STAR1COLOR \u003d NEW COLOR (THIS);

ColorTransform \u003d (RB: 0, GB: 255, BB: 255);

G \u003d 255;

B \u003d 255;

STEP \u003d 5;

OnClipevent (Enterframe) (

G - \u003d STEP;

ColorTransform.gb \u003d g;

If (r\u003e \u003d 0 && b \u003d\u003d 255 && g \u003d\u003d 0) (

R + \u003d STEP;

ColorTransform.rb \u003d R;

If (g \u003d\u003d 0 && r \u003d\u003d 255 && b

B - \u003d STEP;

ColorTransform.bb \u003d B;

If (b \u003d\u003d 0 && r \u003d\u003d 255 && g\u003e \u003d 0) (

G + \u003d Step;

ColorTransform.gb \u003d g;

If (g \u003d\u003d 255 && b \u003d\u003d 0 && r

R - \u003d STEP;

ColorTransform.rb \u003d R;

If (r \u003d\u003d 0 && g \u003d\u003d 255 && b\u003e \u003d 0) (

B + \u003d Step;

ColorTransform.bb \u003d B;

Star1Color.Settransform (ColorTransform);

This._rotation - \u003d 3;

Buttons and menus are one of the most important parts of the site and any other application where interactivity is important. Create Flash Menu.

• Draw a button with the name "Examples".
• Press key And create a library sample type Button named Primery.
• Let us turn into the edit mode and change the fill of the button and the color of the text for the states of Over and Down, in each of these frames we get to press the key .
• In the Hit frame, which will not be reflected in the animation mode, delete the image of the button and draw the cut rectangle slightly larger than the button.
• We transform the text "Examples" to the library symbol of the type of graphic. To do this, we turn to the UP button state to select the text and press the key. . Library sample Let's call "examples". So we made an attachment in the symbol of the Button symbol of another type - Graphic.
• We repeat the above procedure for the states of the Over and Down button, creating "examples1" library samples and "examples2" of the GRAPHIC type.
• Right-click on the PRIMERY library pattern and select duplication item. Save a copy under the name NEWS. It will be a library sample for the future "News" button.
• Similarly, we obtain duplicate samples "Examples", "Examples1" and "Examples2". Let's call them accordingly "News", "News1" and "News2".
• Edit the contents of the obtained samples by changing the text "Examples" to the text "News" of the corresponding colors.
• We will enter the edit mode of the NEWS library sample. We select the status of the UP button, and in the library sample "Examples".
• Let's look at Panal Properties. Press the SWAP button (replace) and in the dialog that opens, select the Sample "News", click OK. In this way, we change to the status of the UP button name "Examples" on the name "News".
• We repeat similar actions for two other states of the NEWS library sample button. In this case, replace "examples1" on "News1", and "examples2" on "News2". Such manipulations lead to the preparation of absolutely identical buttons, but with different names.
• I will summarize the "News" button from the library to the work field.
• Similarly, we get the third button - "Contacts".
• We will turn on the Align panel (alignment). We select all three buttons and select the location you need, for example, at one level with the same distances from each other.
• Open the Actions panel and give each button the script button, indicating which web page will be loaded when you click on it with the mouse. You can also specify which window the selected page will be downloaded, for example, in the current browser window (_SELF), in a new window (_blank), etc. To the first button we will tie such a scenario:

oN (Release) (GetURL ("1.HTML", "_SELF");)

• To the other buttons to learn scenarios indicating the relevant web pages. In the following Flash menu, the binding of web pages is not implemented for reasons of convenience of viewing the page.

If you are a novice web master and decided to revive the pages of your site with Flash. (Flash) animation or ready-made Flash rollers, then the information on this page is for you.

Flash (Translated from the English "Flash") technology began its development since 1996 and today even the novice web master is familiar with such terms as:

• flash. banner ;
• Flash menu ;
• Flash screensaver ;
• Interactive elements like watches made on flash .
• Beautiful tag Cloud in

And whole Flash sites, including chat rooms, guest books, voting and forums began to appear in the network more and more often.
With advent Flash. animation Website creation has acquired a new direction.
The site made with the help of flash technologies is very different from its HTML fellow. The first thing that always attracts the attention of the user is all sorts of moving, sparkling, flashing, transfusion elements of the page.

What you need to watch Flash

To view flash Animation, or any other flash content to the browser must be installed flash plugin, which can be downloaded directly from the Flash development site - Macromedia (now included in the company Adobe).
It is worth noting that, unlike Internet Explorer.which can install Plug-in Flash in automatic mode, other browsers, such as Opera or Firefox-A, require separate installation. You can download all the necessary programs from the official site Flash - Adobe.com.

Where to get the source for creating the site.

The creation of a flash animation takes a lot of time, effort and knowledge. It often happens that something one, and sometimes and sometimes it is not enough all. And here the so-called flash source. The network is full of free flash sites templates, and there are files with expansion .... .Fla.
The templates contain many animation effects and beautiful transitions, you do not have to implement one or another effect, just take it from the template. Also, templates will make you creating your Flash site: opening the template and changing or adding information to it, you will get a stunning Flash site in a short time and with a minimum of the effort.

Creating and editing flash drives.

To create Flash rollers It is necessary to choose a program for yourself with the help you work with a flash.
Today, the unconditional leader among is Macromedia's product Adobe Flash Professional CS3. Flash CS3 is an industrial standard for the development of interactive multimedia software For any platforms. Flash can be applied to create games, websites, CD presentations, banners and cartoons.

To insert Flash movies in the HTML page, two tags are used simultaneously -