:
wmode="opaque"
И не забыть прописать в передаваемых параметрах функции AC_FL_RunContent():
"wmode","opaque"
Окончательный код кроссбраузерной вставки Flash в HTML страницу.
Работает во всех современных браузерах без дополнительного клика для активации.
Options:
srс - path to the loaded movie (only for )
movie - path to the loaded movie (only for< object >)
classid - ActiveX identifier (only for< object >)
width - the width of the Flash movie in pixels
height - the height of the Flash movie in pixels
codebase is the URL at which the browser will try to download the Flash add-on if the visitor does not have it installed (for< object >)
pluginspage - the URL at which the browser will try to download the Flash plugin if the visitor does not have it installed (for< embed >)
play - determines whether to start playing the movie immediately after loading or not. Can be true or falsh
loop - determines if the movie will be played in an infinite loop. Can be true or falsh
quality - the quality of the movie display. Can take values: best, high, medium, autohigh, autolow, low. The best value corresponds to the highest quality.
bgcolor - background color
scale - determines the scaling parameters of the movie if the dimensions in the width and height properties are set in percent.
Accepts values:
base - base URL used for relative redirects if the movie consists of several movies stored in different directories
menu - type context menu that appears when you right-click in the movie area. Can be true or falsh. True displays the full menu.
wmode - defines transparency parameters.
Accepts values:
swliveconnect - Used to allow data transfer between JavaScript and Flash movie (for< embed >). True to enable data transfer, false (default) to disable.
Optimizing Flash Websites
A beautiful, animated header, banner or logo may well decorate your professional site. good rating v search engines Oh. This is because search engines hardly understand Flash!
There are several ways to solve this problem:
HTML with Flash elements - If your pages have indexable titles, page content and navigation elements, the moderately limited use of Flash on your site pages should not affect the rankings and the site's search engine results.
Frames - Try position Flash in frame , and indexed text outside of frames. As long as both parts have the same content, search engines should have no problem indexing.
Separate Sites - Create a Flash site for users and a separate HTML site for search engines ... Next, use a robots.txt file to block your Flash site from being indexed by search engines.
All the work of creating a movie takes place using the Timeline panel, an image of which is shown below. The Timeline panel is divided into two parts by a vertical line that can be moved with the mouse. The right side of the panel is a so-called "frame ruler" - a ruler on which the frame symbols are located, which look like small rectangles. The content of the frames is static pictures that change in time, appearing on the working field. Frame numbering is shown at the top of the ruler. The "status bar" is located under the frame ruler.
Keyframes are frames in which static images are placed that "come to life" during animation. Keystroke leads to the creation of a new key frame. Keystroke causes a duplicate frame to appear to the right of the keyframe. Duplicate frame - this is a frame that does not have its own content, but contains only a link to the content of the keyframe to the left of it. Creating a duplicate frame makes it easier to work on animation, eliminating the need to draw the same scene in adjacent frames. On the frame ruler, an empty keyframe is denoted by a hollow circle; if it contains a graphic object, it is denoted by a black circle. The last frame in the chain of duplicate frames is marked with 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. By using the timeline, you can understand which frames contain actions or labels. It allows you to move key frames and whole pieces of animation.
Key features of the timeline:
To make a layer active, you need to select it. You can draw and edit only on the active layer. The active layer is highlighted on the Timeline and the pencil icon indicates that it can be edited (Layer 3).
The content of the layers at the top of the Timeline is displayed on top of the content of the layers below them. To swap layers, you need to drag the layer name to the desired place on the Timeline.
To create a new layer, select a position on the Timeline for the new layer and press the "Add layer" button.
To remove a layer, just drag it to the trash can.
To rename a layer, double-click it on the Timeline.
When creating a layered image, use the layer controls. Clicking in the column below the lock image will block any editing, and in the column below the eye image will make the layer invisible.
Below is an example of an animation, in which a different background (landscape) with a corresponding text block is placed on different layers with a shift of 25 frames. The landscape was obtained by filling the background with a bitmap Color Mixer-> Bitmap with subsequent processing with the Fill Transformer tool.
The frame scale is a field where you can add and remove simple and key frames. If you call the context menu (right mouse button) on any frame, you will see a list of actions that can be performed. The scale displays information about frames that are key (such frames are marked with black circles), contain actions (the letter "a" above the circle) or a label (a red flag followed by the name of the label). Color also indicates the type of frames. The gray color is frames that exactly repeat the keyframe (keyframe). Bluish or greenish backlighting indicates that frames were generated by Flash. And finally, white or "empty" striped space indicates that there is nothing in these frames.
Shadow control buttons - these are buttons that allow you to display adjacent frames as if through tracing paper, in order to see the difference between the previous and subsequent frames. You can set the depth of this display on both sides of the marker. The animation consists of a sequence of frames. The frame can be either manually composed or generated by Flash. This applies to frames on the same layer. Since Flash scenes usually consist of several layers, the resulting "layered" frames can contain both generated and "self-made" layers. In computer animation, there is a concept - keyframes (keyframes). Their name speaks for itself. These are frames that Flash is not allowed to change during the animation process. You set these keyframes, and Flash builds the intermediate frames between them. There are two types of tweening frames - shape tweening frames or motion tweening frames. And, of course, frames can be empty, i.e. contain nothing.Symbols are one of the key concepts in Flash. A symbol can be either a simple geometric primitive or their union, or a whole animation (movie). This allows symbols to be used as a powerful abstraction mechanism in Flash. There are three kinds of symbols: animation (movie clip), button (button) and image (graphic) :
Image (graphic) , is a single-frame character. Hence its static name follows. If the symbol is really a static (non-animating) object, it is better to make it a graphic.Button (button). Flash has a custom type of symbol for the function of a button. It has 4 frames: Up, Over, Down, Hit, which contain the following button states:
Hit - the usual state for a button containing a link that the user has already visited.
Animation (movie clip). This is the most "complete" type of symbol. It can contain any number of frames. A symbol of this type can be interpreted as a Movie object in ActionScript (embedded Flash).
There are two fundamentally different ways to animate something in Macromedia Flash:
Draw each frame yourself, using Flash only to cycle through frames.
Make Flash automatically render intermediate frames.
Step-by-step (frame-by-frame) animation
This is an animation composed entirely of keyframes. Those. You yourself determine both the content of the frame and its "duration" (ie how many such static frames the image will occupy). Before drawing the next frame, you need to insert an empty keyframe ( ), if you want to get a copy of the keyframe, then press and then edit the resulting copy. When you want to use ready-made images as a basis, you can do it as follows - File, Import ... On the timeline, the frame-by-frame animation looks like this:
The advantages of this method include:
Frame-by-frame animation gives, in a sense, more control over animation, and if you are an experienced animator, you can use it to their advantage.
This is the only way to organize the change of completely independent images - a slide show (for example, by creating a regular banner using Flash).
And everything else that follows from the ability to draw each frame by hand.
The disadvantages include the following:
Frame-by-frame animation is difficult to modify. Especially if it's not a discrete set of images, but a related animation. All frames have to be modified.
Frame-by-frame animation takes up a fairly large volume, since you have to store information about each frame.
Elementary operations with personnel:
Insert blank keyframe - Insert -> Blank keyframe, .
Keyframe repeating the content of the previous one - Insert -> Keyframe, .
Clear keyframe - Insert -> Clear keyframe, +.
Insert regular frame - Insert Frame, .
Remove frame - Insert -> Remove Frames, +.
Elementary operations with a roller:
Watching the video - Control, Test movie.
Changing the height and width of the movie - Modify, Movie.
Convert Flash Movie to HTML Document File, Publish Setting, HTML Tab.
HTML Document Preview - File, Publish Preview.
Let's create a multi-layered movie with a step-by-step animation "Flower Life". 1st layer - frame, 2nd layer - pot, 3rd layer - flower. You can represent the 3rd layer in three layers: leaf, stem, inflorescence.
The pot and frame are always in front of our eyes, and the flower manages to grow and fade in 25 key frames. In the “flower” layer, each frame is different from the previous one, but you can change the state of the flower one frame at a time.
The video is published using File-> Publish Setting. On the Formats tab, publish options are selected, you can select several, on the corresponding tabs you set the parameters for the selected publishing option, then click the Publish button. In this case, the created files are saved in the same folder as the original file with the extension .fla. In our example, the Gif-animated file option is selected for publication, as in all subsequent examples.
Try to complete the second task yourself using the algorithm below. This will create the "Moving car" animation:
create a layer "Landscape";
execute the File / Import command and import a picture with a landscape image or create an "asphalt" background;
select the 30th frame on the ruler and press F5. create a chain of duplicate frames for the landscape;
create a new layer "Auto";
draw a car without wheels in the first keyframe;
Group the drawn car and press F8 to create a library sample - automobile clip;
move the car, select the second frame and press F6;
we will move the car and create new keyframes until the car disappears outside the working area;
create a new layer and name it "Wheel1";
draw a wheel in the first frame and create a library sample wheel from it;
create a new keyframe and move the wheel behind the moved car, etc. in all other frames, while turning the wheel at a small angle;
lock the "Wheel1" layer and copy the entire resulting sequence of frames to the buffer;
create a new layer and name it "Wheel2";
select the first frame and copy the entire sequence of frames from the buffer;
to loop through the view, click +.
As another independent task, you can offer to create a step-by-step animation "Burning a match":
In Flash, there are two options for building intermediate images - motion tweening (building animation based on character modification), shape tweening (building animation based on shape change). These methods are fundamentally different.
Motion animation
With this method of animation, the initial position, color, size, orientation and final parameters are set, and the program itself performs this movement. With this method Flash animations automatically builds intermediate frames between the keyframes you specify. This means that you draw an object, then make the changes on another frame, which we will talk about below, and ask Flash to calculate the frames that lie between these two keyframes. It does the job and you get smooth animation.
The speed and smoothness of the animation depends on the number of frames that are allocated for the movement and the speed of the Flash movie (movie). The movie speed can be changed as follows: Modify-> Movie ..., +- there 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. Smoothness and duration is set by the number of frames allocated for the animation (its fragment).
Consider tweened motion animation. This is the most commonly used animation technique in Flash. In this case, the animation is based on the modification of the symbols, i.e. the animation object is a symbol. As with the shape tweening animation, for each object at a time, we need one layer. There should be one symbol on this layer, with which all changes will take place.
When using Motion Tweening, the following parameters are modified:
size (both proportional and disproportionate - separately the height and width);
incline;
location;
angle of rotation;
color effects;
you can use guide layers to define the path of an object.
You can enable motion tweening in several ways (and unfortunately, there is only one way to disable it). In order to enable motion tweening, you need to make the initial frame of your transition active, then, by pressing the right mouse button, select Create motion tween in the context menu (you can also do this by selecting Insert-> Create motion tween). A universal way to enable / disable motion tweening is using the Frame panel by selecting Motion in the Tweening field. You can also control animation parameters there:
Easing - inverse exponential acceleration, works exactly the same as in shape tweening.
Rotate allows you to control the rotation. Auto - Flash automatically tries to determine the number of loops. CW (Clockwise) and CCW (Counter Clockwise). In this case, next to the field on the right, it becomes possible to enter the number of revolutions. Only integer values can be used. You can turn off rotation by choosing None.
Orient to path - rotates the character according to the guide line. Snap snaps the symbol to this guideline.
In cases where the number of frames for the main scene is not a multiple of the number of frames for a symbol, the Synchronize checkbox allows the two animations to be synchronized.
The layers that contain the curve along which the object should move are called guide layers (guide layers) (i.e. they contain the path of the object). In order to add a guide layer, you need to select the layer on which your symbol is located; then Press the right mouse button and select Add Guide from the context menu. This makes the original layer a guided layer. This is far from the only way to create a guide layer. Any layer can be made a guide by specifying it in its properties, or guided 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 path can be any curve that is not a fill region. Everything! The control layer is ready. You can prohibit it for editing to make it more convenient to work, and in the future, make it completely invisible.
Now, to use this layer, you need to take the symbol for the center point (this is such a small circle) and drag it onto the path. You will feel when the symbol "hooks" on it, and you will see how it will slide over it.
Then everything follows the familiar scenario - keyframes, enable motion tweening ... If you want the object to rotate according to the trajectory, and not just move along it, then on the Frame panel you need to enable the Orient to path checkbox.
Motion tweening allows you to apply different color effects to the entire symbol. This feature is missing in shape tweening. In order to apply an effect to a symbol, you need to select this symbol, and in the effect panel (Windows -> Panels -> Effects), select the desired effect by setting the brightness, color offset, hue.
Create a very simple example of the animation of a ball moving in a circle yourself, using the algorithm below:
draw a circle in the first frame and fill it with a radial gradient fill;
group the drawing;
select it with the Transformer tool and move the center of rotation some distance;
go to frame 30, press , i.e. let's make it a copy of the first frame;
go back to the first frame and open the Properties panel and select Motion in the Tween list;
v supplementary list Rotate choose forced clockwise (CW) or counterclockwise (CCW) rotation.
The next example is a little more complicated - it is creating an animation of the movement of the letters of the text:
using the Text tool, create a text block;
select the written word and break it into separate letters (Modifi / Break Apart);
separate the letters on separate layers Modify / Distribute to Layers;
Convert each letter in each layer to a drawing, repeat the Modifi / Break Apart command. Select each letter and group it;
on the frame ruler, at some distance, create copies of the first frame, for this press ;
in turn, we will select the first frames for each letter, move it out of 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 additional Rotate list, select one clockwise rotation;
let's see the animation in the viewport + .
Shape tweening is a smooth change of an animation object on the stage. By an object we mean here not a group or a text block, as in motion tweening, but a normal multicolored drawing that can consist of several fragments. Moreover, the number of such fragments at the beginning and at the end of the animation can be different.
In the process of shape animation, the drawing can disintegrate into several independent fragments, each of which gradually transforms into something unexpected. Or, conversely, several independent images located on the working area, in the process of animation, gradually changing their appearance (size, color, shape), become part of a single image. Let's say you want the square to smoothly turn into a circle, or the silhouette of a rabbit to smoothly flow into the silhouette of a wolf. In these cases, shape tweening is used.
As usual, you set two keyframes at some distance from each other. There is a hard limitation in this animation option: the animation must occupy a separate layer and be a single drawn shape (there must be no groups or symbols). After there are two keyframes, you need to make the first of them active (just go to it), and select in the Frame panel (Windows-> Panels-> Frame, +) in the Tweening list, the string Shape. The frames on the timeline should turn greenish and an arrow should stretch from the first frame to the second. The result is a series of intermediate frames that will reflect the transition from the first figure to the second.
When using shape tweening, you need to set two parameters:
Easing specifies inverse exponential acceleration. The value of this parameter can vary from - 100 to + 100. This means that if you specify a negative easing, the movement will occur with a positive acceleration, the speed will increase. Conversely, if the easing is positive, the animation will slow down;
The Blend parameter determines the transition algorithm: Distributive - smooths the transition from one shape to another.
Angular - tries to keep the aspect ratio of the corners.
The last tool in the shape tweening animation is shape hints. These are the points by which you help Flash make the transition correctly. You cannot do without them in the case of complex shapes. They are very easy to use. On the first keyframe (where the animation starts) you add a control point (Modify-> Transform-> Add shape hint,
You can remove all points with Modify-> Transform-> Remove All Hints. To remove a single point, you can right-click on it and select Remove Hint from the context menu. Since the control points are designated by the letters of the Latin alphabet, there can be a maximum of 27 of them.
There can be many options for the transition from one form to another, so the animation can follow the path that suits you to a lesser extent. Even the transformation of such a simple geometrical figure as a rectangle located vertically into the same rectangle, but located horizontally, can occur in different ways. For example, in the process of such a transformation, the figure may be in the form of an oval or even a circle. To control the animation process, you need to try to simplify the animation by dividing the drawings into several independent fragments located in different layers, but simultaneously participating in the animation. A more coordinated trick is to use the shape marks mentioned above.
If you need to turn off shape tweening, in the Frame panel 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 an example of the "transformation" of an elephant into a sheep and vice versa for this animation method.
Try to create your own animation of the shape of the "transformation" of a snake into an eagle and back:
Guide Layer and Paths Layer
Often in the process of animation, it is necessary that the object does not move in a straight line, but along a given trajectory. In this case, animation is created in the usual way, and the trajectory is drawn in a separate layer. The paths layer can serve several different animations, each of which is located on a separate layer, but all of these layers with animation must be located under the paths layer. You can use various tools to draw the path: Pencil, Brush, Pen, Ellipse, or Rectangle. To bind a moving object to this trajectory, you just need to transfer this element to the trajectory in the initial and final keyframes of the animation. In this case, in the Properties panel, you should adjust the animation parameters so that the Snap checkbox is enabled. To do this, you must first select the first keyframe of the animation, it is also useful to select the View / Snap to Objects command.
For example, let's create a video "Butterfly flying over a flower", according to the algorithm below:
import the flower drawing into the first layer;
in the first keyframe of the second layer, draw a butterfly (you can get a butterfly by vectorizing its Modify / Trace Bitmap raster photo);
select the butterfly, click by creating its library sample;
staying in the second layer, go, for example, to frame 48 and press by creating a keyframe that ends the animation.
in it we will transfer the butterfly to the other side of the working field;
select the 60th frame and press by creating a chain of duplicate frames;
select the first frame and in the Properties panel in the Tween list select Motion;
select the layer with animation and select the Add Motion Guide command from the context menu;
draw on the working area of this layer a curve for the movement of a butterfly, the beginning and end of which are located next to each other;
select the first keyframe of the animation, place the butterfly on one end of the trajectory;
then select another keyframe for the animation, place the butterfly on the other end of the path;
select the first keyframe of the animation, open the Properties panel and enable the Orient to Path checkbox;
Let's create the effect of flapping the wings of a butterfly while flying. Let's open the library sample + ;
double-click on the butterfly image in the viewport;
create a new keyframe, for example, the third, so that the movement of the butterfly's wings is natural;
in a new keyframe, first raise one wing of the butterfly, and then the other;
let's go back to the main scene and start the preview.
Masking layer and layer mask
This layer is designed to cover and make invisible part of the image located directly below it. If the layer mask does not contain any image, then it completely covers (masks) the layer below and associated with it, which is called masking layer ... If something is drawn in the layer mask, then any fill of this drawing becomes a transparent part of the layer. If you animate an image created in a layer mask, then the transparent part of the mask will move across the screen. A layer mask can mask multiple layers. You can make a regular layer maskable by changing its position in the layer stack. You just need to move the usual layer under the layer mask with the mouse. Animation in this case can be of two types. Or animation of objects located on masked layers. Or animation of the image on the layer mask.
An example of how to create a fade-in effect on the screen letter by letter. To do this, we will animate the motion of the image in the mask layer using the following algorithm:
in the first frame of the layer, insert a static text block and write a word;
select the 40th frame and press , thereby determining the length of the future animation;
create a new layer and make it a layer-mask (select the layer and select the Mask item from the context menu) and unlock it;
in the first frame to the left of the word, draw a small rectangle and group it;
staying in the layer mask, select the 40th frame and click ;
staying in the 40th frame, use the Transformer tool to stretch the drawn rectangle so that it covers the whole word;
select the 1st frame and open the Properties panel, select Motion;
let's start the animation.
Below is a gif-animated file in which the animation of the shape of the letters of the text "Happy New Year" is used, and then the text that appears is "erased", using a layer mask, a rectangle with a gradient fill, so the effect of "iridescence" of the letters is obtained. The background is a piece of bitmap graphics.
The following example demonstrates a word “grow” from a point, where an imported bitmap graphic is used as a mask layer, and an animation is created in the layer mask, in which the word grows out of the point, and then it shrinks again. This example also uses shape tweening.
Creating buttons
A button is a special type of symbol designed to respond to user actions, for example, pressing the button itself, its keyboard counterpart, or an active area in a movie. The button's timeline contains the following four frames:
Up - normal state of the button;
Over - when the mouse cursor is over the button;
Down - when the cursor is over the button and the mouse button is pressed;
Hit - the usual state for a button containing a link that the user has already visited;
If you need to create several identical buttons, then in this case it is enough to create only one sample button. And then apply the necessary inscriptions on it, change the color or size. If the button needs to contain animated objects, you need to create Movie clips beforehand and then simply place them in the appropriate button frame.
Basic types of actions:
Go to - transition to a given scene or frame;
Play - start a stopped movie;
Stop - stop the movie;
Toggle High Quality - switcher of movie display quality (anti-aliasing mode);
Spot All Sounds - mute sound;
Get URL - go to the specified address;
FC Command - transfer of movie playback to other applications;
Load / Unload Movie - the simplest way to use this command is to load a movie from a specified address;
Tell Target - selection of a movie for further management (target setting);
If Frame Is Loaded - command execution if the specified frame is loaded;
If - test for truth;
Loop - cycle;
Call - call;
Set Property - setting the properties of the movie;
Set Variable - the value of the variable;
Duplicate / Remove Movie Clip - create or delete a clip instance;
Drag Movie Clip - turns on the clip dragging mode;
Trace - displays messages when performing actions;
Comment - comments;
Algorithm for creating a button (alg1):
create a blank for the button;
select the button with the tool and convert it to a symbol (Insert \ Convert to Symbol ...). Specify a name (for example, but), choosing the Button type;
switch to the symbol editing mode by double-clicking on the image of the "Button" symbol;
go to the Over frame on the Timeline, insert an empty Insert \ Keyframe, edit the button by changing its color;
go to the Down frame, insert an empty Insert \ Keyframe, edit the button by changing its color;
go to the Hit frame, insert an empty Insert \ Keyframe, edit the button;
exit the symbol editing mode (in the upper left corner of the movie 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. From the Basic Actions drop-down menu, select the Get URL action by double-clicking on it in the left pane window. By clicking on the selected action in the right window, specify its parameters (for example, URL: http: \\ www.ya.ru);
test the resulting Control \ Test Movie.
Algorithm for creating a button to stop a clip:
create a button (alg1);
add a new layer;
create animation in it;
build an image in it (for example, a circle);
convert the image to a symbol (Insert \ Convert to Symbol ...);
select frame 30 in both layers and insert a keyframe Insert \ Keyframe;
transfer the image of the symbol in frame 30 to another place;
go back 1 frame and select Insert \ Create Motion Tween;
select the layer with the button image and set the action Window \ Actions for it. Select the Stop action;
view the resulting Control \ Play clip.
As an example, let's create a button with built-in animation using the following algorithm:
press the keyboard shortcut + , create a new sample of the Button type and set the name knopka;
click OK and go to the sample editor;
in the first frame (Up) on the working area, draw an oval and fill it with a radial gradient fill;
press the key three times , this will copy the contents of the first frame to all the others;
select the second frame (Over) and slightly enlarge the image of the button in it, outline it with a yellow outline;
import a file with animation from the library (for example, a person's running or any other clip);
overlay this clip on the button image, bring all scales in line;
select the third frame (Down) and slightly reduce the image of the button in it;
back to the main scene, open the library + if it is closed, extract the created button.
This object was published in HTML mode with an indication of the corresponding swf file.
Scripting with ActionScript
Let's create buttons that control how the slideshow works:
Below is the result of our work:
When creating animations using ActionScript, a three-frame loop is often used. In the first frame (preparation), the initial data is written, in the second frame, the elements of the loop body are placed, and in the third frame, the command is written to return to the second frame gotoAndPlay (2) ;. The work of the three-frame cycle consists in alternately viewing the frames participating in the cycle until the condition for exiting the cycle is met.
Let's consider the use of a three-frame loop using the example of creating a mask motion. Our film will have three layers:
Each time the second frame is accessed, the Mask clip will rotate 2 °. A window in the form of a Mask clip rotates in front of the user's eyes, through which part of the Masked clip is visible.
Let's learn how to control the color of a library clip instance. Let's create a film in which stars rotate in different directions against the background of the rising sun, changing their color.
A Color object is instantiated using an ActionScript constructor and has the following format:
<имя экземпляра объекта Color>= new Color (<имя экземпляра клипа>)
Select the first keyframe and import the Rising Sun bitmap into it.
Let's create the second layer and draw three arbitrary stars in the first frame.
We will select them in turn and create clips named Star, Star1, Star2.
Let's name the instance of the first clip St, the second - St1, and the third - St2.
Let's attach our script to each sample. The difference in scripts is that each clip instance is assigned a different start color, a different rotation angle, and different conditions for changing the current color in if statements.
The color is transferred to the clip instance, for example for Star1, using such a line in the Star1Color.setTransform (colorTransform); script.
We will select clips with a script one by one, click and create new clips, for example, named ClipStar, ClipStar1, ClipStar2.
You can display several samples of each clip on the working area.
An example script for Star1 is shown below:
OnClipEvent (load) (
Star1Color = new Color (this);
ColorTransform = (rb: 0, gb: 255, bb: 255);
G = 255;
B = 255;
Step = 5;
OnClipEvent (enterFrame) (
G - = step;
ColorTransform.gb = g;
If (r> = 0 && b == 255 && g == 0) (
R + = step;
ColorTransform.rb = r;
If (g == 0 && r == 255 && b
B - = step;
ColorTransform.bb = b;
If (b == 0 && r == 255 && g> = 0) (
G + = step;
ColorTransform.gb = g;
If (g == 255 && b == 0 && r
R - = step;
ColorTransform.rb = r;
If (r == 0 && g == 255 && b> = 0) (
B + = step;
ColorTransform.bb = b;
Star1Color.setTransform (colorTransform);
This._rotation - = 3;
Buttons and menus are one of the most important parts of a website and any other application where interactivity is important. Let's create a Flash menu.
Let's draw a button with the name "Examples".
Press the key and create a Button sample library named primery.
Let's go into editing mode and change the button fill and text color for the Over and Down states, in each of these frames we get by pressing the key .
In the Hit frame, which will not be reflected in animation mode, delete the button image and draw a filled rectangle slightly larger than the button.
Convert the text "Examples" to a library symbol of type Graphic. To do this, go to the state of the Up button, select the text and press the key ... Let's call the library sample "examples". Thus, we have implemented a symbol of another type - Graphic - into the Button symbol.
Let's repeat the above procedure for the Over and Down button states, creating the sample library samples "examples1" and "examples2" of type Graphic.
Right click on the primery library sample and select duplicate. Let's save a copy under the name news. This will be the library sample for the future News button.
Similarly, we get duplicates of samples "examples", "examples1" and "examples2". Let's call them "news", "news1" and "news2" respectively.
Let's edit the content of the received samples, changing the text "examples" to the text "news" of the corresponding colors.
Let's enter the editing mode of the library sample news. Let's select the state of the Up button, and in the library there is a sample "examples".
Let's take a look at the Properties panel. Press the button Swap (replace) and in the opened dialog box select the sample "news", press OK. In this way, we will change the name "Examples" to the name "News" for the state of the Up button.
Repeat this for the other two states of the news library sample button. In this case, replace "examples1" with "news1", and "examples2" with "news2". Such manipulations lead to getting exactly the same buttons, but with a different name.
Let's take out from the library an instance of the "News" button to the working field.
Similarly, we get the third button - "Contacts".
Turn on the Align panel. Select all three buttons and select the desired location for them, for example, on the same level with equal distances from each other.
Let's open the Actions panel and attach a script to each button that indicates which web page will be loaded when the mouse is clicked on it. You can also specify in which window the selected page will be loaded, for example, in the current browser window (_self), in a new window (_blank), etc. Let's attach the following script to the first button:
on (release) (getURL ("1.html", "_self");)
We will bind scripts pointing to the corresponding web pages to the rest of the buttons. In the following Flash menu, web page anchoring is not implemented due to the convenience of page viewing.
Websites with Flash -content is considered a separate article in the web community, the unlimited possibilities of animation and delightful sketches turn their development into a special kind of art. Flash-based websites can be divided into two groups: 2D and 3D Flash designs.
This collection includes 50 3D Flash Animation Websites who really stood out against the general background, attracted unprecedented attention and received awards! This is not just another list - these websites will give you tons of ideas, each of them is a masterpiece!
This site is so incomparable that it is difficult to describe in words! A very beautiful screensaver, followed by gorgeous 3D animation samples on an excellent web page.
three-dimensional graphics and animation. The 3D transitions are awesome too.
social network where you can create your own unique three-dimensional portrait. A great idea, perfectly embodied by means of three-dimensional processing.
Great job .
Depending on the time available, the plot of the film, and your own artistic ability, you can choose one of two ways to bring your characters to life:
frame-by-frame animation (Frame-by-frame), when you create each next frame with your own hands (or import from an external source); automatic animation (tweened-animation), when you line up only keyframes, and all intermediate frames Flash forms independently.
It should be noted that both mechanisms can be used together, and not only within the framework of one film, but also in relation to one object. For example, fragments that are more complex in terms of the plot can be based on stop-motion animation, and fragments with "predictable" plot development can be obtained using automatic.
Such unification is possible due to the use of a single time axis for each object, represented in the editor window by a time diagram - - Time Line. By combining several objects on one timeline of the "lifeline", you can get a scene in which several "characters" participate.
The peculiarity of using automatic animation is that it can be used to animate only one object on a given layer. To create a scene in which there are several animated objects, you need to place each of them on a separate layer (for more information on using layers, see the next chapter - "Layers").
Regardless of which mechanism is used to create individual frames, the essence of animation is to reflect the change in an object over time.
You can create a movie in which the same ball will lie motionless on the table for an hour. In this case, all frames of the film will be more similar to each other than identical twins, and the viewer will not be able to distinguish your "cartoon" from a static image. On the other hand, you can make some great shots and ... play them back at the same moment in time. The result will be the same - the viewer will not be able to see what is happening on stage. Thus, the basic principle of animation is that each moment of time has its own frame.
Accordingly, the procedure for creating the simplest animated film during Flash is to prepare images of the object, reflecting its change, and arrange them along the time axis.
At any Flash -Movie can be added text. Similar to working in ordinary text editors, text can be set to size, font, style, spacing, color, and alignment. You can transform the font like other objects - rotate, scale, skew. At the same time, the ability to edit its symbols is retained.
A hyperlink can be created based on a piece of text.
Flash -the movie can contain dynamic text fields as well as user-editable fields. Editable fields in a Flash movie have the same purpose as text fields placed in a form on a Web page: with their help, one or another information can be obtained from the user to be processed on the server or by a client script. Finally, in Flash MX, you can create scrollable multi-line text areas.
If necessary, the text can be converted into a graphic object, and then it is allowed to work with its symbols as with separate graphic shapes.
Frame-by-frame animation So, to create stop-motion animation, you need to prepare (or at least think over) each frame of the movie in advance. In this case, it is necessary to take into account the following circumstance. The smoothness of the transition from one frame to another and, accordingly, the smoothness and naturalness of the movements of the characters depend on how much the next frame differs from the previous one (and not on the frame rate, as is sometimes believed). In other words, the more frames a "cartoon" contains, the closer the characters' movements are to natural ones. Therefore, creating stop-motion animation is a very painstaking business. It is advisable to use it in cases where objects are modified or interact with each other in any complex way.
In addition, frame-by-frame animation is used in Flash when describing the behavior of interactive elements of a movie, such as buttons. Each state of the button corresponds to a specific keyframe in the timing diagram. The main difference between describing the behavior of a button and a "normal" animation is that the state of the button depends not on time, but on user actions. For more information on including controls in the movie, see the chapter "Creating interactive movies".
Creating a sequence of keyframes The main tool when creating time-lapse animation is the timing bar. With its help, you can create, delete and move animation frames, change the view modes of individual frames and the entire scene, and perform other operations.
The elements of the time chart interface were discussed in the section "Organization of the user interface" of the third chapter (see Fig. 3.7). Now it's time to talk about the role each of these elements play in creating a cartoon.
Comment
In this chapter, all our attention will be focused only on the right side of the timing diagram, since a separate chapter is devoted to the application of layers. Accordingly, in all the examples considered here, only one layer is used, the parameters of which are set by default and do not change by us.
So, remembering the timing diagram, we can say that a cartoon created using stop-motion animation is a sequence of key frames, each of which is associated with some image (picture) on the table.
When playing a cartoon, the animation effect is achieved due to the fact that the pictures on the table replace each other. Each frame-by-frame cartoon is characterized by two main parameters:
the number of key frames (Keyframe); frame rate (in Flash it is measured as the number of frames shown in one second - frame per second, fps).
In general, both of these parameters affect the created visual effect (smoothness or, conversely, discreteness of movements, "transformations", etc.). But still, the leading role here belongs to the first parameter, as well as how much the next keyframe differs from the previous one.
In the timing diagram, keyframes are represented by gray rectangles with a black dot inside. When the movie is playing, the read head moves from one frame to the next, marking the current frame. To see the image associated with a specific frame, click on the icon for that frame in the timing diagram. In fig. 6.1 shows as an example two key frames (the first and the last) of a small cartoon "about the clock", in which one frame differs from the other by the position of the minute hand. In total, the cartoon contains 6 frames, the frame rate is 2.
Rice. 6.1. Two frames from the cartoon "about the clock"
We'll come back to the clock example, but we'll use another example to describe the procedure for creating time-lapse animation. Suppose the "hero" of the movie is a ball that falls and breaks into three parts. We will assume that five frames are enough to reveal such a complex plot:
The ball is in its original position. The ball fell, but still intact. The first piece broke off the ball. A second piece broke off the ball. On the table lies something that in a previous life was a ball.
Taking into account the described plot, the sequence of work should be as follows:
Create four images on the table, corresponding to the above frames, as shown in fig. 6.2 (for the first and second frames, the same - whole - ball is used).
Rice. 6.2. Images corresponding to the frames of the future film
Create a new clean table movie file by clicking the New button on the main toolbar Flash . In the timing diagram, in the cell of the first frame, right-click and select Insert Keyframe from the context menu. From the window in which the ball images were created, copy the first image and place it somewhere at the top of the table; in this case, the first frame on the timing diagram will be marked as a key (black point), Fig. 6.3.
Rice. 6.3. Flash window view after creating the first frame
Right-click in the cell of the second frame and select Insert Keyframe from the context menu; in this case, the frame will be immediately marked as key, since the image from the previous frame is inherited for it; use it: move the ball to the bottom of the table. Right-click in the cell of the third frame and select the Insert Keyframe command from the context menu again; the new frame will also be marked as a key frame, and the previous image will be saved for it; you can either edit it or just replace it with the one you want. Create the fourth and fifth frames by choosing Insert Keyframe from the context menu and placing the corresponding image on the table.
After completing the final step, the window Flash should look something like the one shown in fig. 6.4.
Rice. 6.4. Flash window view after creating the ending animation frame
Actually, this is the end of the creation of the first "cartoon". Don't forget to just save it to disk: we will need it when we study other types of animation.
After completing the work, it is useful to check if everything turned out the way you wanted.
To play the movie, just press the key (an alternative option is to select the Play command from the Control menu). In this case, the read head of the timing chart panel automatically moves from the current to the last keyframe. You can forcibly select any frame for viewing by clicking in the corresponding cell of the timing diagram with the left mouse button.
In our example, the images that make up the content of the frames were created in advance, on the table of another film. However, for most simple films, it is more convenient to create a frame image directly on the table of the current movie. This requires:
Create a new keyframe in the timing diagram. Change the properties of objects located on the table (shape, position, etc.).
Editing animation As a result of testing, it may turn out that the created "cartoon" does not fully correspond to the author's intention, and it is necessary to correct it.
As with creating a "cartoon", when editing it, it is most convenient to work with the time chart panel, or rather, with context menus this panel.
Recall that the context menu is associated with a specific object and contains commands that can be applied to this object in the current situation (in this context).
Each type of frames in the timing diagram has its own context menu. For example, there is a keyframe context menu, a Frame context menu, and a tweened animation frame context menu. If at the initial stages of mastering you will have difficulties in determining the type of frame, then you can use the tooltip. It appears on the screen when you hover the mouse pointer over the frame icon (Fig. 6.5).
However, it should be borne in mind that all frames that are not related to tweened animation are designated in this case as Static, as shown in Fig. 6.5 on the right.
Rice. 6.5. Tooltips indicating the frame type
Flash provides the following features for editing an animated sequence:
correction of the content of any keyframe; adding key frames; a new frame is always inserted only after the last frame of the sequence; you can add two types of keyframes: with an inherited image - using the Insert Keyframe command; blank frame (no content) - using the Insert Blank Keyframe command;
adding simple (non-key) frames; a new frame can be inserted after any keyframe; in the simplest case, inserting a simple frame allows you to "extend the life" of the preceding keyframe; for example, if in a "cartoon" with a ball add a few simple frames after the second keyframe, then the fallen ball will lie down for a while, and only then will it fall apart; to add a simple frame, right-click on the keyframe after which you want to place a new frame and select the Insert Frame command from the context menu; a simple frame is displayed on the timing diagram with a light rectangle; converting a keyframe to a simple one; performed using the Clear Keyframe command from the context menu; the contents of the "cleared" keyframe and all simple frames prior to the subsequent keyframe are replaced with the contents of the frame preceding the "cleared" keyframe; copying one or more frames; performed using the context menu commands Copy Frames and Paste Frames; insertion can be performed after any keyframe; moving one or more frames; performed using the context menu commands Cut Frames and Paste Frames; insertion can be performed after any keyframe; deleting one or more frames; to remove a frame, right-click on it and select the Remove Frames command from the context menu; changing the sequence of frames to the reverse (reverse); to perform this operation, select a sequence of frames (it must begin and end with a key frame) and select the Reverse Frames command from the context menu. Try, for example, using this operation to "restore" the broken ball from the above example.
Properties a separate frame can also be changed using the Frame Properties inspector panel. For any "static" frame (that is, a frame that is not part of a tweened animation), this panel contains the same set of elements (Figure 6.6):
text field technology - creation ActionScript scripting is covered in Chapter 11; the Tween drop-down list, which contains a list of possible uses for tweened animation; there are three such ways: None - tweened animation is not used; Motion (Motion) - tweened-animation of movement; Shape (Shape) - tweened-animation of the transformation of the object;
the Sound drop-down list, which allows you to select and associate a sound symbol with the frame; if no sound is associated with any frame of the movie, then the list contains only one item - None; the use of soundtrack in the film is described in the eleventh chapter; all other elements related to setting sound parameters become available only after assigning a sound symbol to a frame; an unnamed button with a long explanation - Edit the action script for this object, clicked to bring up the ActionScript editor panel.
Rice. 6.6. Static Frame Properties Inspector
Controlling Frame View Modes In many cases, it is convenient to see the contents of all the keyframes of the animation on the table at the same time. Flash provides several options for such a combination. The choice of the option is made using the buttons located at the bottom edge of the time frame panel (Fig. 6.7):
Onion Skin (onion) - enable the mode of simultaneous viewing of several frames; in this case, the active frame (on which the reading head is installed) is displayed in full color, and the rest - more faded (Fig. 6.8 a); by default, three frames are displayed simultaneously: an active one and two adjacent ones; the displayed range is marked on the time chart scale with special markers (see Fig. 8.7); markers are interactive - moving them with the mouse, you can change the boundaries of the range; in this mode, only the active frame is available for editing;
Rice. 6.7. Animation frame display control buttons
Onion Skin Outlines - turn on the mode in which frames adjacent to the active one are represented only by contours (Fig. 6.8 b); in this mode, only the active frame is available for editing; Edit Multiple Frames - enable the mode when all visible frames are available for editing; all frames are displayed in full color (Fig. 6.8 c); Modify Onion Markers - clicking on the button opens a menu that can be used to modify the boundary markers parameters (Figure 6.9): Always Show Markers — Markers are always present on the timeline bar, regardless of whether view control buttons are enabled. Anchor Onion Marks - Boundary markers are locked at their current position; selecting this option prevents the markers from moving when the active frame changes; Onion 2 (Visible 2) - two frames adjacent to the active one (right and left) are displayed on the table; Onion 5 (Visible 5) - five frames are displayed on the table to the right and to the left of the active frame; Onion All - All animation frames are displayed on the table.
Rice. 6.8. The effect of applying different view modes
Rice. 6.9. Menu with commands for changing the parameters of boundary markers
Comment
Note that when you click on the keyframe icon in the timing bar (and thereby select it), a picture appears on the table corresponding to the selected frame. Moreover, all graphic objects that make up the frame are also displayed as selected.
Automatic animation of object movement Flash can create two types of tweened animations:
motion tweening; animation of object transformation (shape tweening).
Create tweened motion tweens Motion tweens can be automatically built for an instance of a symbol, group, or text box.
When creating a motion tween, you need to set object attributes such as position on the table, size, rotation or tilt for a frame, and then change the values of these attributes in another frame. Flash interpolates the values of variable attributes for intermediate frames, creating the effect of sequential movement or transformation.
You can create motion tweens using one of two methods:
using the frame properties inspector panel; using the Create Motion Tween command.
To describe both options, we will use the simplest example: suppose you want to "roll" the ball across the table from left to right.
So, to animate the movement of the ball using the frame property inspector, you need to do the following.
Make sure that the Property inspector panel is present on the screen (its format does not matter in this step). If it is closed, choose Properties from the Window menu of the main window. Turn on the Oval tool and draw a ball on the left side of the table; Note that the first frame in the timing diagram is now marked as key. Turn on the Arrow tool, select the ball and group (merge) the path and fill of the ball using the Group command from the Modify menu of the main window Flash ; as a result, the ball will be enclosed in a blue highlighting box. Right-click in the cell of the frame on the timing diagram that you want to make the last frame of the animation (for example, the 10th), and in the context menu, select the Insert Keyframe command; as a result, the gap between the first and last keyframes will be filled with single-color (light gray) cells of simple frames, as shown in Fig. 6.10. Drag the ball to a new position on the right side of the table. Left-click in the cell of the first keyframe; this will lead to the simultaneous execution of two actions: the image of the ball will move to its original position and the format of the property inspector panel will change: it will show the parameters of the selected (first) frame. In the Property inspector, select Motion from the Tween drop-down list; in this case, the panel format will change, and interface elements will appear on it, allowing you to set animation parameters; While they are not of interest to us, the changes that have occurred in the timing diagram are much more important: the first and last keyframes are now connected by an arrow on a lilac background (Fig. 6.11). This indicates that the animation has completed successfully.
Rice. 6.10. View of the timing chart panel after completing the 4th step
Rice. 6.11. Timing pane view after animation finishes
If a dotted line appears on the time chart panel instead of an arrow, then you are mistaken in something. Take a look at the Frame Properties inspector panel: if there is a button with a warning sign (Figure 6.12), then Flash is trying to tell you about it. Click on this button to open a window with explanations of the situation that has occurred.
Rice. 6.12. View the frame property inspector panels when there is an error
There are two main reasons for failure: either you are trying to animate objects that are not grouped (in this example, path and fill), or this layer contains more than one grouped object or symbol.
In many cases, it turns out to be sufficient to remove the extra object in order to Flash performed the animation. If this does not happen, after fixing the error, repeat the procedure for creating the tweened animation again.
To play the "cartoon" use the same means as for frame-by-frame animation - you can just press the key (It is better to deselect the ball first, although this is not necessary).
To animate the movement of the ball using the Create Motion Tween command, you need to do the following (we assume that the ball is already present in the first frame).
Right-click in the cell of the first frame and select the Create Motion Tween command from the context menu; the image of the ball will be automatically converted into a graphic symbol named tweenl (a visual indication of the transformation is the appearance of an anchor point in the center of the ball and a selection frame). Right-click in the cell of the frame that you want to make the last in the animation sequence (for example, the 10th) and select the Insert Frame command from the context menu; as a result, a dotted line will appear between the first and last frames, as shown in Fig. 6.14. Move the ball to a new position (to the right side of the table); in this case, the last frame of the animation will be automatically converted into a key one (a black point will appear in the cell), and the dotted line will be replaced by a line with an arrow (Fig. 6.15).
Rice. 6.14. View of the timing chart panel after executing the Insert Frame commands
Rice. 6.15. Flash window after animation finishes
This completes the animation creation. If you now look at the Frame Property inspector panel, you will see that Motion is selected in the Tween list.
Comment
Note that as a result of creating a tweened motion tween using the Create Motion Tween command, all frames in the timing diagram are designated as tweened, while when using the Property inspector, the last frame remained “just key” (see Figure 6.11) ... Having such a keyframe provides more flexibility when editing your movie later.
Change tweened motion tween parameters After build with using Flash tweened animation, you can adjust one or another of its parameters. The easiest way to edit animation parameters is to use the Frame Properties inspector panel. In this case, the following circumstance should be borne in mind. Despite the fact that all frames of the tweened animation appear as one whole in the timing chart, you can select any of them individually by clicking in the corresponding position in the timing chart. As a result, an image related to this frame will appear on the table, and the parameters of this frame will appear on the property inspector panel.
Before proceeding to the description of possible ways of editing the "cartoon", it is necessary to make one important remark. All standard object transformation operations that are performed using the tools of the Tools panel (for example, skewing, resizing, converting a circle to an oval, etc.) when creating an automatic animation are not considered in Flash
So, for a frame included in a tweened animation, the following parameters can be set on the property inspector panel (Fig. 6.16):
the ability to scale (decrease or increase) the object; to enable this option for automatic animation, the Scale checkbox must be checked;
Rice. 6.16. Format the Property inspector bar for a tweened tween frame
rate of change; By default, changes are at a constant rate, but you can control it by changing the Easing values: negative values for this parameter (-1 to -100) mean that changes will be gradually accelerated, while positive "values (from 1 to 100), on the contrary, mean a gradual slowdown in changes; the ability to animate the rotation of the object; selection, direction and duration of rotation is done using the Rotate drop-down list and the times text box next to it; the Rotate list contains the following options: None - no rotation animation is used (the option is set by default); Auto - the object rotates in the direction that requires the least amount of movement; CW (Clockwise) - the object rotates clockwise; the number of revolutions is set in the times field; CCW (Counterclockwise) - the object rotates counterclockwise; the number of revolutions is set in the times field;
the ability to set a nonlinear (arbitrary) trajectory of the object movement; provided by checking the Orient to Path checkbox; Extra options trajectories are adjusted using the Sync (Synchronization) and Snap check boxes; the procedure for describing the route of movement of an object will be discussed in more detail in the next chapter.
Let's take a closer look at the procedure for animating the resizing of objects. To do this, let's go back to the ball example. Suppose that, having reached the right edge of the table, it should shrink. The solution to the problem consists in performing the following actions:
Right-click in the cell of the last (10th) frame of the previous animation section and select the Create Motion Tween command from the context menu. Right-click in the cell of the frame that you want to make the last in the new animation sequence (for example, 20th), and select the Insert Keyrame command from the context menu; as a result, a line with an arrow will appear between the 10th and 20th frames (as shown in Fig. 6.17), and the ball will remain enclosed in a selection box. Turn on the Free .Transform tool in the Tools panel and reduce the size of the ball (you can also "flatten it;" at the same time).
Everything. The process is complete. It remains only to test the result by pressing the key .
Rice. 6.17. Timeline view after creating the second segment of the animated sequence
Combining frame-by-frame and automatic animation Stop motion and auto animation can be used in the same movie or even on the same object. Moreover Flash it makes absolutely no difference in what order they alternate.
Let us explain the technique of combining frame-by-frame and automatic animation when describing the behavior of one object using the example of the same ball. The plot of the film is quite simple: the ball rolls across the table, then falls and breaks. The first part of this entertaining story will be implemented on the basis of tweened animation, the second --based time-lapse. As a matter of fact, both fragments were already created by us earlier, and now it remains only to combine them into one film.
So, to get a movie that combines both types of animation, you need:
Describe the movement of the ball across the table using tweened animation (after completing this procedure, the timing diagram window should look like it was shown in Fig. 6.11). Right-click in the cell of the frame following the last frame of the tweened animation (for this example, in the cell of the 11th frame), and select the Insert Keyrame command from the context menu; in this case, the None item will be automatically selected in the Tween list of the Property inspector (do not use tweened animation). Move the ball image to the bottom of the table. Create the rest of the keyframes of the frame-by-frame animation as described in the "Frame-by-frame animation" section; after creating the final frame, the editor window should look something like the one shown in Fig. 6.18.
Rice. 6.18. Timeline of a movie that combines frame-by-frame and tweened animation
Comment
If the movie is formed on the basis of movies created earlier, you can simply copy the necessary frames into the new movie using the commands Sora and Paste. At the same time, the content of the frames will be transferred to the new film. If the copied frames use symbols, they will be added to the library of the new movie.
Finally, here's another small example that illustrates the features of using tweened motion tweens for text blocks. In this example, there is no movement as such - it just uses a mirror image of the text obtained with the Free Transformation tool as the final frame of the animation. And this is what the intermediate frames created by Flash (fig. 6.19).
Rice. 6.19. Example of tweened motion tweens for text boxes
Automatic animation of object transformation Using transformation animation, you can create the effect of smooth "flow" of an object from one shape to another. Moreover, the resulting form may have absolutely nothing to do with the original. For example, in the online help system Flash an example of "transformation" is given (fig. 6.20).
Rice. 6.20. An example of transforming an object
Once again, we will repeat that animating standard object modification operations that are performed using the tools of the Tools panel (tilting, resizing, etc.) are not considered in Flash as transformation operations and can be added as "accompanying" changes when creating an animation of an object's motion.
Advice
Generally the best visual effect Flash provides in the event that no more than one object is being transformed at the same time. If you need the simultaneous transformation of several objects, then all of them must be located in one layer.
Flash cannot automatically animate transformations of symbols, grouped objects, text boxes, and bitmaps. To make objects of these types available for automatic transformation, you need to apply the procedure of splitting (Break Apart) to them.
Creating a tweened transformation animation If you choose to include tweened transformation animation in your movie, keep the following in mind. Default Flash tries to make the transition from one form to another "the shortest way." Therefore, intermediate frames can be quite unexpected for you. As an illustration to what has been said below, there is a figure (Fig. 6.21), which shows an intermediate frame of transformation of the "clock" you are already familiar with. Here, with the help of tweened animation, the minute hand is trying to "crawl" from 12 to 6 on the "short road".
Unlike motion tweens, there is only one way to create tweened transform tweens - using the frame's Property inspector panel.
To explain the technology for creating such an animation, let's return to the example with the "clock": suppose you want to move the minute hand from "12" to "6".
When solving this problem, you need to perform the following steps.
Make sure the Property inspector panel is present on the screen. If it is closed, choose Properties from the Window menu of the main window.
Rice. 6.21. An example of a tweened tweened animation transform
Turn on the Oval tool and draw with it all the elements of the "clock" shown in fig. 6.21, left. Turn on the Arrow tool and select the image you want to transform. Right-click in the cell of the frame that you want to make the last in the animation (for example, the 10th), and select the Insert Keyframe command from the context menu; as a result, between the first and last frames on the timing diagram, a sequence of simple frames of gray color will appear, as shown in Fig. 6.22, above. Replace the original image on the table with the one into which it should be transformed; in this example, it is enough to use the Free Transform tool to rotate the minute hand and move it to a new position. Right-click in the cell of the first frame of the animation; this has two consequences: the original image appears on the table and the format of the Property inspector panel changes. Select Shape from the Tween drop-down list; as a result, the first and last frames of the animation on the timing diagram will be connected by an arrow on a light green background (Fig. 6.22, below); this indicates that the animation has completed successfully.
Rice. 6.22. Timing diagram view when animating object transformation
Selecting Shape from the Tween list changes the format of the Property inspector panel. With its help, the following additional parameters of the object transformation animation can be set (Fig. 6.23):
rate of change; By default, changes proceed at a constant rate, but you can control it by changing the Ease parameter values: negative values of this parameter (from -1 to -100) mean that the changes will be gradually accelerated, while positive values (from 1 to 100 ), on the contrary, mean a gradual slowdown of changes; way of transformation; it is determined by the value selected in the Blend list: Distributive - Flash creates an animation in which intermediate shapes are smoother; Angular - Flash creates an animation that maintains obvious angles and straight lines in intermediate shapes.
Rice. 6.23. Object transformation animation options
Comment
Please note that no object transformation is required to create animation (moreover - it is forbidden) group the path and fill, as well as other elements of the image to be transformed. It is enough to simply select all these elements using the Arrow tool.
Applying shape anchor points To manage more complex shape changes, so-called shape hints are used, which determine how the original shape will be wrapped into the shape. new form ... In other words, anchor points are used to identify those points of the original shape, the relative position of which must be preserved. The most typical example of the use of anchor points is the animation of facial expressions, in which some of its parts (eyes, in particular) should not participate in the transformation. In fig. 8.24 shows two variants of transformation - without placement and with placement of nodal points. In the second variant, the eyes are not transformed.
Rice. 6.24. An example of transformation without placement and with placement of anchor points
Anchor points are indicated in the image by small circles with letters. Letters (a through z) are used as names (identifiers) of anchor points. Each anchor point on the source image must correspond to a point with the same name on the resulting image. In total, no more than 26 anchor points can be used for one figure (according to the number of letters of the alphabet). Anchor points on the original image are colored yellow, on the resulting image - green.
To place nodal points, you need to do the following:
Left-click in the frame cell corresponding to the original image. In the Modify menu, select the Shape cascade menu, and in it - the Add Shape Hint command; As a result, a "blank" of the first anchor point will appear on the image - a red circle with the letter a. Move it with the mouse to the point of the image that you want to mark as anchor. Left-click in a cell of the frame corresponding to the resulting image; there will be a red circle on the table with the same letter as in the original frame. Move the circle to the point of the image, which should correspond to the one marked in the original frame; after moving the circle will change color to green. Go back to the first frame of the animated sequence and make sure that the anchor point color changes to yellow. If you need to continue placing anchor points, repeat the described procedure for each of them.
Remarks
Arrangement of anchor points is possible only after creating a tweened transformation animation. Anchor points should be placed using the Arrow tool with the Snap to Objects modifier enabled.
Advice
If you use several anchor points during transformation, then arrange them clockwise, starting from the upper left corner of the image. This is because Flash processes the anchor points alphabetically.
After placing the nodal points, it is advisable to conduct a test run of the film and, if necessary, correct the placement of points. To change the position of the anchor point, simply drag it to a new location (this can be done both on the first and on the last frame of the sequence). In addition, you can always delete unnecessary points or add new ones. After you are satisfied with the result, you can hide (hide) the anchor points. The above operations are most conveniently performed using the context menu. To open it, right-click on one of the anchor points. The menu contains four commands (Fig. 6.25), of which the first three are available only for the anchor points of the original image:
Add Hint - when the command is executed, a blank of a new anchor point appears on the table; Remove Hint - the anchor point that you right-clicked to open the menu will be removed; Remove All Hints - remove all anchor points; Show Hints - this mode is used by default (there is a marker next to the command name); its repeated selection leads to the fact that the anchor points will become invisible; this option should be used only after the desired result has been achieved, since to return to the mode of displaying anchor points, you will have to select the Add Shape Hint command from the Modify menu. the required amount.
Rice. 6.25. Anchor point context menu
entrance
All of the above brings us to a very important conclusion: animation, movement arouses visual interest in us.
Just imagine how much space you could save with this approach! Pictures always take up a decent amount of disk space and bandwidth networks. And 24 pictures per second can become simply "overwhelming". If you manage to reduce everything to one description and definition of rules, you have the opportunity to reduce the file size hundreds of times.
The next advantage of software animation over time-lapse animation, which we will now discuss, goes far beyond simple file size. It is already an established fact that software animation in most cases is used precisely as dynamic.
To view flash animations, or any other flash content, a flash plug-in must be installed in the browser, which can be downloaded directly from the Flash developer site - Macromedia (now part of Adobe). 
It takes a lot of time, effort and knowledge to create Flash animations. It often happens that one thing, and sometimes all at once, is sorely lacking. And here the so-called flash sources... The network is full of free templates FLASH sites, and there are files with the extension…. .FLA. 