Animation layers. What is animation

Adding a second character or text box to the tween range will replace the original character in the tween. You can change the target of a motion tween in any of the following ways:

• drag another symbol from the library to the animation range on the timeline;
• use the command Edit > Symbol > Replace Symbol.

You can remove a symbol from an animation layer without deleting or splitting the animation itself. You can add another instance of the symbol to the animation later. You can also change the symbol or its type at any time.

See also

Motion Animation Components

• It is a sequence of frames in a timeline in which one or more properties of an object in the timeline change over time.
• A tween span appears in the timeline as a group of frames on the same layer as the background color.
• These animation ranges can be selected as a single object, dragged from one place on the timeline to another, and even onto another layer.
• Each animation range can only animate one object on the stage. This object is called the animation span target.

• is a frame in a tween range where one or more property values ​​for the target tween object are explicitly defined.
• These properties may include alpha position (transparency), color tint, etc.
• For each defined property, a separate property key frame is created.
• If you set more than one property in one frame, the key frames for each of those properties will be placed in that frame.
• Use the Motion Editor to view each tween range property and its property keyframes.
• To choose which types of property keyframes to display in the timeline, from the animation span context menu, right-click the property keyframe and select View Keyframes.

Animation target

A motion tween has one object in its tween range, called its target object. Using a single target object in an animation provides several benefits:

• Animations can be saved for reuse.
• You can easily move a motion tween on the timeline (drag the tween span to a different location) or on the stage.
• To apply a new instance to an existing motion tween, follow these steps:
  • insert it into the animation to replace it;
  • drag a new instance from the library;
  • use the Replace Symbol command.

Objects and properties that can be animated

The types of objects that you can apply motion tween to include movie clips, graphics, button symbols, and text fields. These objects can have the following properties:

• Position along the X and Y axes on the plane

Z position in 3D space (clip clips only)

Rotation on a plane (around the z axis)

Rotate about the X, Y, and Z axes in 3D space (movie clips only): Specifies that the FLA file is intended for ActionScript 3.0 and Flash Player 10 or later in the Publishing Options. Adobe AIR also supports 3D motion.

X and Y tilt

X and Y scale

Color effects: Includes alpha channel (transparency), brightness, hue, and advanced options for colors. Color effects can only be animated for TLF characters and text. By animating these properties, you can make an object appear smoothly or change color. To create a color effect motion tween for classic text, convert the text to a symbol.

Filter properties (filters cannot be applied to graphic symbols)

Creating a Motion Tween

You can create a motion tween in one of three ways:

• Create the graphic or instance that you want to animate, then right-click the frame and select Create a motion animation.
• Select the graphic or instance you want to animate, then right-click the frame and select Insert > Tween Motion.
• Create the graphic or instance that you want to animate, then right-click the instance in work area and select Create a motion animation.

Creating a Motion Tween

Animate the movement of other properties using the Property inspector

Use the command Create a motion animation to animate most of the properties of a symbol or text box instance. These properties include, for example, rotation, scaling, transparency, or tint (TLF characters and text only). For example, you can change the alpha transparency property of a symbol instance so that it appears smoothly on the screen. For a list of properties that you can apply motion tween to, see Animable objects and properties.

Select a symbol instance or text field in work area.

If the selection contains other objects or contains multiple objects from a layer, Animate is prompted to convert it to a movie clip symbol.

Select Insert > Motion Animation.

If a dialog box appears Convert selection to character for animation, click OK to convert the selection to a movie clip symbol.

When a motion tween is applied to an object that exists for only one frame, the playhead moves to the last frame of the new motion tween. Otherwise, the playhead does not move.

Place the playhead within the frame of the animation range for which you want to set a property value.

The playhead can be placed on any other frame in the animation range. Motion tween starts with property values ​​on the first frame of the tween span, which is always a property keyframe.

Laboratory work No. 3

Working with layers

Purpose of work: Learn to use layers to create animation.

Basic theoretical information

Layer(Layer) is a part of a movie scene for which

some individual attributes. Each layer can contain arbitrary

number of different objects, taking into account the restrictions on creating tweened animation.

The use of the layer mechanism allows you to work autonomously with various objects,

to be included in the film, and due to this create complex multifaceted

scenes. For example, one of the layers can be used as a background on which

the events of the film unfold, another is the animated objects, and the third is the elements

soundtrack of the film. In addition, layers can be used to obtain

special effects, such as moving an object along an arbitrary path,

object masking and some others.

Layer properties

In normal mode, all layers are completely transparent, in the sense that objects

located on different layers are visually perceived as elements of a single

scenes. At the same time, the object located on the top layer obscures the objects

located in the same position on the lower layers. It's always possible to change the order

location of layers, as well as edit objects of one layer regardless of

elements of other layers. However, if necessary, you can select both

objects from different layers and work with them as a single whole. For example, you can

change their color or group them. Number of layers you can create

limited only by the computer's RAM capacity, and does not affect the size

file of the published film. For the convenience of working with layers in Flash,

ability to store each set of interconnected layers in a separate layers folder

Creating and deleting layers. To create a new layer you need to do one thing:

from the following actions:

on the layer above which you need to place a new one and select in the context menu

team Insert Layer(Insert Layer);

In the list of layers in the time diagram panel, select the layer above which

you need to place a new one by clicking on it with the left mouse button; click

button Insert Layer located below the list of layers.

When you create a new layer, it appears on the table above the selected layer; V

in the layer list, its name is also placed above the name of the selected layer. Added layer

automatically becomes the active layer. This means that the one created on the table

the object will belong to this layer. In this case, the visibility of the new object will be

depend on the location of previously created objects of other layers. Default

the new layer is given a name Layer with indicating the sequence number within the scene.

Subsequently, this name can be replaced by any other that explains it

purpose.

To delete a layer, do one of the following:

In the list of layers in the timeline panel, right-click

on the layer that needs to be deleted and select the command in the context menu Delete

Layer(Delete layer);

Delete Layer located

below the list of layers.

Once a layer is deleted, the layer underneath it becomes active.

The operations of creating and deleting a layer can be canceled (like many others) by clicking on

button Undo (Cancel).

Creating and deleting layer folders. To create a layers folder you need to run

one of the following:

In the list of layers in the timeline panel, right-click

on any layer and select the command in the context menu Insert Folder(Insert

In the list of layers in the time diagram panel, select any layer by clicking on

left mouse button and click the button Insert Layer Folder, located,

below the list of layers.

By default, the new folder is named Folder indicating the ordinal

numbers inside the scene. Subsequently, this name can be replaced by any other

explaining its purpose.

Unlike layers, a folder is not shown on the timeline

sequence of frames. The new folder does not contain any layers. To put in

folder of any of the existing layers, just drag and drop with the mouse

line with the layer name to line with the folder name. All layers included in the folder are

located in the list below it. Additionally, the folder layer names are shifted to the right

relative to the folder name. To “remove” a layer from a folder, just drag it to

list of layers above the line with the folder name. When working with folders, keep in mind that

they have purely organizational functions and do not directly influence others

layer properties, in particular, the visibility of objects in different layers. Nevertheless,

by closing and opening a folder, you can control the display of its layers in

timing chart list. At the same time, layer objects remain visible on the table.

Another benefit of using layer folders is that they allow you to

quickly set the same attribute values ​​for all layers included in the folder.

You can create subfolders with an unlimited number of levels

nesting.

To create a subfolder, you need to in the list of layers in the temporary panel

diagrams, right-click on any layer included in the folder more

high level and context menu select command Insert Folder.

When you delete a folder, the layers in it are also deleted, so if you try

deleting the Flash folder displays a warning message.

To delete a folder, do one of the following:

In the list of layers in the timeline panel, right-click

on the name of the folder you want to delete and select from the context menu

team Delete Folder(Delete folder);

In the list of layers in the time diagram panel, select the layer to be deleted by clicking

left mouse button on it and click the button Delete Layer located

below the list of layers.

Setting layer attributes. Each layer can be assigned some

a set of attributes. The values ​​of these attributes are displayed in the layer list as

special icons.

The layer attributes are:

Layer level - objects on the topmost layer when playing a movie

are as if in the foreground of the scene and are not obscured by objects

underlying layers. The top layer name is the top one in the list;

Activity - on the active layer you can edit or create objects if

it does not have the "hidden" or "blocked" attributes set. Active layer

is displayed in the list in inverse color and marked with a pencil icon;

Visibility (Show/Hide) - hidden layer objects (Hide) are not

are visible on the table and the layer is marked in the list with a red cross. On a hidden layer

you cannot edit or create objects, even if it is active;

Locked/Unlocked - on a locked layer

you cannot edit or create objects, even if it is active, such a layer

is marked in the list with a lock icon;

Outlines - objects on the outline layer are replaced with their outlines.

Enabling this mode allows you to see objects obscured by objects

of this layer. For the outline layer, you can additionally select the outline color

its objects, since this attribute can be set for several

Guide/Guided - the leading layer can be used as

template when creating other layers, as well as to describe the trajectory of movement,

it is visible when playing a movie;

Mask/masked - using a layer mask allows you to

dynamically change the visibility of masked layers, which provides

interesting visual effects.

Assigning the required attributes to a layer can be done by one of

in the following ways:

− using context menu commands called by right-clicking

mouse on the layer name;

− using three attribute setting buttons located above the list

layers. Clicking on any of them will install the corresponding

attribute for all scene layers;

− using the layer properties panel, to open it, double-click

mouse on the icon located to the left of the layer name, or select in

Layer context menu item Properties.

For the last option, it should be noted that the layer is one of the few

objects for which Flash does not have its own property inspector. That's why

setting layer attributes is done using the dialog box Layer Properties,

which has the following controls:

Text field Name(Name) to be entered and/or edited

layer name. By default, created layers are named Layer I, Layer

arbitrary name. Flash does not prevent the use of Cyrillic in names

layers, which makes the structure of the film more understandable;

Checkbox Show(Show), the state of which determines the visibility of the layer;

Checkbox Lock(Block), which is used to install

the corresponding state of the layer;

Switch group Toure(Type), allowing you to specify the type of layer: Normal -

ordinary; Guide - leading; Guided - slave; Mask- mask; Masked -

camouflaged; Folder- folder;

Button Outline Color(Outline Color), click on which opens the palette window

to select the color of the outlines of layer objects if its view is set

"contour";

Checkbox View layer as outlines(Display layer as outline), using

which you can set/uncheck the corresponding layer property;

Dropdown list Layer Height(layer height) designed for

indicating the height of the layer line in the time diagram panel (including

height of frame cells). This feature may be useful for layers

whose frames contain special icons (for example, a sound icon

character); the list contains only three options (100%, 200% and 300%).

Using layers in animation

Let's look at four options for using the layer mechanism when creating a movie:

Using layers to create a background image;

Using a leading layer to control the movement of an object;

Use a layer mask to control the visibility of masked layers;

Incorporating multiple animated objects into a scene.

Creating a background. Background in Flash refers to static images

“scenery” that does not change during the film. The background can be located

both behind (from the observer's point of view) and in front of the animated object.

The background layer is no different from any other, and if, for example, you need

make the background moveable, then it is quite possible to animate this or that background object

Controlling the movement of an object. In Flash there is a concept of a "leading layer"

- Guide Layer. When choosing this term, the Flash developers used

a kind of play on words in the English language. The fact is that the leading layer has two

destination:

Firstly, you can put any comments on it (even with

illustrations), which are visible only in movie editing mode, but not

exported to SWF format. In this sense the word Guide can be translated as

“manual”, “instructions”;

Secondly, using the leading layer you can control the movement path

an object animated using tweened motion animation.

To create an instruction layer, you need to in the list of layers in the temporary panel

diagrams right click on any layer and in the context menu

select a team Insert Layer. Right click on the newly created layer

and select the item in the context menu Guide. As a result, in the list of layers next to the name

layer, a hammer icon will appear. It says that the contents of this layer

intended exclusively for developers.

The second type of leading layer is a layer that describes the path along which

the object is moving. The peculiarity of this application of the leading layer is that

You first need to create a tweened animation of linear motion

To make an object move along an arbitrary trajectory, you need

do the following:

1. Right-click on the name of the layer containing the animated object.

2. Select the command in the context menu Add Motion Guide(Add layer,

motion control). As a result, the leading layer will appear in the list of layers,

marked with a special icon, and the name of the animation layer will move to the right -

this is a sign that it is a driven layer.

3. Click on the name of the host layer to make it active.

4. Using any drawing tool (Pen, Pencil, Oval, Brush, Rectangle)

Draw the trajectory of the object.

5. Left-click in the cell of the first animation frame and in the panel

In the frame properties inspector, select one of two checkboxes: Orient to Path

(Orient by route), if you want to follow the route you have drawn

the axis of symmetry of the object was oriented along the route; Snap(Snap) if

you need to attach a transformation point or registration point to the trajectory

object. After checking any of the checkboxes, Flash will automatically

positions the object in the frame in the required manner.

6. Left-click in the cell of the last animation frame and in the panel

In the frame properties inspector, select the same checkbox as for the first frame.

7. Deselect the animated object and play the movie.

If you build a path that contains intersecting or

touching areas, then the object will move along the shortest route,

connecting the starting and ending points of the trajectory.

Once the path is created, you can make it invisible. For

This requires making the leading layer invisible.

Masking layers

A layer mask allows you to create the effect of a hole through which you can see

A mask can be created based on the following types of layer objects:

Fills;

Text field (any type - Static, Dynamic or Insert);

An instance of the graphic symbol;

The mask can be made to move using any type of animation: frame-by-frame

and tweened animation. Using tweened animation you can create a dynamic mask

based on a text field, fill, graphic, or clip. And for the clip

You can use the leading layer to set an arbitrary trajectory of movement. WITH

Using tweened transformation animation, you can “revive” a mask created on

based on the fill. In addition, you can use scripts to animate masks.

ActionScript. You cannot mask layers inside buttons.

Creating a mask. The mask is a regular layer, except

that any fill on it is interpreted by Flash as a hole through which you can see

underlying layer. In this case, the fill color (including raster), the presence of a gradient,

The fill path and its type are completely ignored by Flash. Layer mask closes

(masks) by default only the layer that is located directly below

To mask a layer, you must do the following:

Right click on the name of the layer you want to mask

(close with a mask), and in the context menu select the command Insert Layer(this

the new layer will subsequently serve as a mask).

Place the fill (or fills) you want to use on the layer mask.

as "viewing windows". When animating a mask on it, you should

there is only one fill.

Right-click on the layer mask name and in the context menu

select item Mask(Mask), the following will happen in the list of layers:

changes: a corresponding icon will appear to the left of the layer mask name; Name

the masked layer will move to the right, and a new icon will also appear next to it;

both layers will be automatically locked.

You can always change the location, shape and number of “viewing windows”

masks. To do this, it must be made available for editing; just remove it from

lock by clicking on the lock icon (the masked layer may not be unlocked).

At the same time, the masking mode is automatically removed.

Switching between editing and viewing mask modes can also

performed using the layer context menu commands.

To enable edit mode, you need to right-click

mouse either on the name of the layer mask, or on the name of the masked layer and in the contextual

menu select command Show All (Show all).

To enable mask view mode, you need to right-click

mouse either on the name of the layer mask, or on the name of the masked layer and in the contextual

menu select command Show Masking (Show masking).

Animating a mask. As already mentioned, the “viewing windows” of the mask can be

animated using one of the methods discussed earlier. When using

automatic motion animation or transformation, the mask should contain only

one "viewing window". When animating the "viewport" the masked layer

plays the role of background.

Let's look at four options for using the layer mechanism when creating a movie:

· using layers to create a background image;

· use of a leading layer to control the movement of an object;

· use a layer mask to control the visibility of masked layers;

· inclusion of several animated objects in the scene.

Creating a background. Background in Flash refers to static images

“scenery” that does not change during the film. The background can be placed either behind (from the observer's point of view) or in front of the animated object.

The background layer is no different from any other, and if, for example, you need to make the background movable, then it is quite possible to animate one or another object of the background layer.

Controlling the movement of an object. In Flash there is a concept of a "leading layer"

- Guide Layer. When choosing this term, Flash developers took advantage of a peculiar play on words of the English language. The fact is that the leading layer has two purposes:

· firstly, you can place any comments on it (even with illustrations), which are visible only in the movie editing mode, but are not exported to the SWF format. In this sense the word Guide can be translated as

“manual”, “instructions”;

Secondly, using the leading layer, you can control the trajectory of an object animated using tweened motion animation.

To create an instruction layer, you need to right-click on any layer in the list of layers in the time diagram panel and select the command from the context menu Insert Layer. Right-click on the newly created layer and select the item in the context menu Guide. As a result, a hammer icon will appear in the list of layers next to the layer name. It says that the contents of this layer are intended exclusively for developers.

The second type of leading layer is a layer that describes the path along which an object is moving. The peculiarity of this use of the leading layer is that it is first necessary to create a tweened animation of the rectilinear movement of the object.

To make an object move along an arbitrary trajectory, you must perform the following steps:

1. Right-click on the name of the layer containing the animated object.

2. Select the command in the context menu Add Motion Guide(Add a motion control layer). As a result, the leading layer will appear in the list of layers, marked with a special icon, and the name of the animation layer will move to the right - this is a sign that it is a slave layer.

3. Click on the name of the host layer to make it active.

4. Using any drawing tool (Pen, Pencil, Oval, Brush, Rectangle)

Draw the trajectory of the object.

5. Left-click in the cell of the first animation frame and in the frame properties inspector panel, select one of two checkboxes: Orient to Path(Orient by route), if you want the object's symmetry axis to be oriented along the route you drew; Snap(Snap), if you want to snap a transformation point or object registration point to the trajectory. After checking any of the boxes, Flash automatically positions the object in the frame as required.

6. Left-click in the cell of the last frame of the animation and in the Frame Properties Inspector panel, select the same checkbox as for the first frame.

7. Deselect the animated object and play the movie.

If you build a path that contains intersecting or touching segments, the object will move along the shortest path connecting the starting and ending points of the path.

Once the path is created, you can make it invisible. To do this, you need to make the leading layer invisible.

Masking layers

A layer mask allows you to create the effect of a hole through which the contents of one or more underlying layers are visible.

A mask can be created based on the following types of layer objects:

· filling;

· text field (any type - Static, Dynamic or Insert);

· an instance of a graphic symbol;

The mask can be made to move using any type of animation: frame-by-frame and tweened animation. With tweened animation, you can create a dynamic mask based on a text field, fill, graphic, or clip. Moreover, for a clip you can use the leading layer to set an arbitrary trajectory of movement. Using tweened transformation animation, you can “revive” a mask created based on a fill. You can also use ActionScript to animate masks. You cannot mask layers inside buttons.

Creating a mask. A mask is just like a layer, except that any fill on it is interpreted by Flash as a hole through which the underlying layer is visible. In this case, the fill color (including raster), the presence of a gradient, the fill outline and its type are completely ignored by Flash. A layer mask covers (masks) by default only the layer that is located directly below it.

To mask a layer, you must do the following:

· Right-click on the name of the layer that you want to mask (close with a mask), and select the command from the context menu Insert Layer(this new layer will later serve as a mask).

· Place a fill (or fills) that you want to use as “view windows” on the layer mask. When animating a mask, there should be only one fill on it.

· Right-click on the name of the layer mask and select the item from the context menu Mask(Mask), the following changes will occur in the list of layers: a corresponding icon will appear to the left of the name of the layer mask; the name of the masked layer will move to the right, and a new icon will also appear next to it; both layers will be automatically locked.

You can always change the location, shape and number of “viewing windows” of the mask. To do this, you need to make it accessible for editing; just unlock it by clicking on the lock icon (the masked layer may not be unlocked). At the same time, the masking mode is automatically removed.

You can also switch between editing and mask viewing modes using the layer's context menu commands.

To enable editing mode, you need to right-click either on the name of the layer mask or on the name of the masked layer and select the command from the context menu Show All (Show all).

To enable mask viewing mode, you need to right-click either on the name of the mask layer or on the name of the masked layer and select the command from the context menu Show Masking (Show masking).

Animating a mask. As already mentioned, the "viewing windows" of the mask can be animated in one of the ways discussed earlier. When using automatic tween or transformation, the mask should only contain one "viewport". When animating the viewport, the masked layer acts as the background.

Express module plan:

• Layer mask
• Animated masks
• Animated mask. Calculated animation of Shape type
• Animated mask. Calculated animation of Motion type
• Editing animation.

Layer mask

A layer mask cannot be used alone, but must be associated with one or more regular layers on which it gives the mask effect. That is, the contents of connected layers are visible only through the “holes” in the mask, and the rest of them remains invisible. Moreover, the mask can have animation (other than animation that uses a movement guide), which allows you to create very unusual effects.

When working on a mask layer, to create “holes”, a graphic primitive is most often used - fill. In this case, it plays the role of a very poisonous paint or acid that corrodes the surface of the layer. Lines do not have this property!

So, a mask can be created based on:

• graphic primitive - fill,
• text block,
• instance of a symbol of type Graphic or Movie Clip, of course, provided that these symbols have fill areas.

When working with these elements, keep in mind that only one type of object can be placed on the mask layer at a time - either only fills, or only text, or symbols of the Graphic type, or symbols of the Movie Clip type. Moreover, there can be as many “regular” fills as you like, but there can only be one text block or symbol! The sequence of actions when creating a mask is as follows:

If a layer mask already exists, you can link additional layers to it. This can be done in several ways.

• Drag the existing layer so that it is positioned directly below the layer mask.
• Create a new layer directly below the layer mask.
• Masked(under the influence of a mask).

You can break the existing connection with the layer mask. This operation can also be performed in several ways.

• Drag the masked layer so that it is positioned above the mask layer.
• Open the layer properties dialog box and set the switch in it Normal(ordinary).

Experiment with layers. Create mask layers based on a fill, a text block, a Graphic symbol, and a Movie Clip and see if the above statements are true.

Animated masks

The mask can be made to move using both frame-by-frame and computational animation.

Using calculated animation of the Motion type, you can “revive” a mask created on the basis of a text field, a fill presented as a group, a symbol of the Graphic or Movie Clip type. Moreover, for a symbol of the Movie Clip type, you can use the leading layer to set an arbitrary trajectory of movement. But this will need to be done “inside” the symbol itself!

Using calculated animation of the Shape type, you can “revive” a mask created on the basis of a graphic primitive - fill.

You can also use ActionScript to animate masks.

You cannot mask layers inside buttons - symbols of the Button type. In addition, the button cannot act as a mask.

Let's look at several options for creating an animated mask.

Animated Mask: Calculated Shape Animation

Create a new document and save it to disk. While working on the video, you will need to create three layers in the Timeline palette:

Layer text. Place a text block on this layer. To be able to apply a gradient fill to the text, “break” the text by accessing the Break Apart command from the Modify menu twice.

Layer shadow. This layer will allow you to create a shadow effect for your text. To do this, go to the layer with the text and copy it to the clipboard. Then, back on the shadow layer, use the command Insert > Paste in Place, apply a fill to this text like Solid(solid) dark color and move this text a little using the keyboard control keys. The result was a thick shadow.

Layer mask. On this layer you will create an animated mask. To do this, on the first frame of this layer, using the Oval tool, draw a circle of a relatively small radius. Center the circle relative to the scene (don't forget the great Align palette). Then go to frame 25 of this layer and make it a key. In this frame, the size of the circle should be increased so that it completely covers your text. Go back to the first frame and in the Properties palette set the animation type to Shape. To freeze the last frame of the animation for a while, go to frame 40 and use the Insert > Frame command.

Using the same command, “stretch” the text layer and the shadow layer to 40 frames.

Test your video.

If you break the connection with the layer mask and the shadow layer, you can get another very interesting effect! Experiment with the video - change the dependency of the layers, the shape of the mask...

Animated mask: Calculated animation of Motion type

Create a new document and save it to disk. While working on this video, you will also need to create three layers in the Timeline palette.

Layer text. Place a text block on this layer. You can use text from a previous work.

Layer image. Text is also placed on this layer, and, as in the previous work, the Insert > Paste in Place command was used. Apply a Solid fill to this text and reduce its opacity using the Color Mixer palette to 1%-10%. You must create the illusion that an image is visible in the dark.

Layer mask. On this layer you will create an animated mask to simulate the movement of the spotlight beam. The role of the spotlight will be “performed” by a symbol of the Graphic type. So, create a new symbol, New Symbol, of type Graphic. Inside the symbol, draw a circle whose diameter is slightly larger than the height of the letters in your text. Using the Align palette, place the circle in the center of the symbol. Return to the stage, open the movie library and place an instance of the symbol you created on it, so that it just touches the left edge of the stage. Then go to frame 30, make it the key frame and move the spotlight instance to the right edge of the scene as shown in the image. Go back to the first frame and in the Properties palette set the animation type to Motion. In order to freeze the last frame of the animation for a while and give the spotlight some time to “walk” outside the scene, go to frame 40 and use the Insert > Frame command.

Using the same command, “stretch” the image layer and the text layer to 40 frames.

Then go to the mask layer and use the Mask context menu to turn it into a mask.

Test your video and admire the results.

Allow yourself a bold experiment. Be sure to try using a block with text as an animated mask!

Animated mask. Using a Movie Clip symbol to create a mask moving along a given path

Create a new document and save it to disk. Create a new symbol of the Movie Clip type, inside of which you will have to organize the movement of the mask along a given path. To do this, create a temporary layer in the Timeline palette of your symbol interim, on which you place a certain landscape. Turn the landscape into a group, align the group to the center of the scene using the Align palette. This layer will be deleted later, but at the stage of developing the video it will serve us well, allowing us to correct the movement of the “spyglass” - the mask.

Create a new layer binoculars, in which draw a circle (it is this that will subsequently play the role of a dynamic mask). Don't forget to turn it into a group, as Motion animations won't work with a graphics primitive! Then create a layer for this layer Guide, where you determine the trajectory of the mask. Notice the Timeline palette of this symbol. In order to reduce the speed of the mask movement, the key frame on which the final position of the mask will be determined can be moved to the right (for example, in the video used in this lecture it is not 40 as in the figure, but 100 frames). Having decided on the final position of the mask, return to the first frame and set the animation type to Motion in the Properties palette. Don't forget to "plant" the circle on the trajectory line. “Stretch” the Guide: binoculars and interim layers using the Insert Frame command. If necessary, adjust the motion path using the tools of the Tools palette - Subselection, Pen and Arrow.

Return to the stage. Please note that my video's Timeline palette only has two layers and only one frame. To layer landscape place the landscape. And on a new layer, which will later be defined as a mask, place an instance of the symbol you created. Adjust the position of the symbol instance so that the location of the symbol's scenery matches the location of the scenery on the stage. Now go to the movie library and edit the symbol, right-click on it and select the command Edit(edit). Delete the interim layer on which you have the landscape. Return to the scene again and turn the mask layer on which you placed the symbol instance into a mask.

Test your video, admire the result and, if necessary, make animation corrections.

Editing Animation

I already told you that animation can be adjusted using additional keyframes. Today I would like to give you some more practical advice on this matter.

To move a frame or sequence of frames, simply drag them with the mouse.

To "turn" a keyframe into a regular frame, use the Clear Keyframe command. The cleared keyframe and all frames up to the next keyframe are replaced with the contents of the previous cleared keyframe.

To “mirror” the animation in time (make the beginning the end, and the end the beginning, of course, there should be key frames at the beginning and end), select the frames you need and use the Reverse Frames command.

Application of the Onion skinning effect (onion peel)

Working in normal mode, Flash displays the contents of only one frame of animation on the stage at a given time.

To better position objects located on different frames relative to each other when creating frame-by-frame animation or when correcting calculated animation, you can “display” images of several frames at once on the stage. In order to switch Flash to this operating mode, you should refer to the Onion Skin button, which you can easily find at the bottom of the Timeline palette. In this mode, elements of the current frame will be displayed in full color, and elements of adjacent frames will be semi-transparent. You can slightly transform this mode using the Onion Skin Outlines button, which allows you to represent elements of adjacent frames in the form of silhouettes. To increase the frame capture area for any of these modes, you need to “move” the mode marker to the right. Onion Skinning mode allows you to edit only the current frame. If you need to adjust several layers at once, turn on the Edit Multiple Frames mode.

Please note that the modes listed above cannot be applied to locked layers. To avoid confusion when editing multi-frames, close or disable layers that are not currently needed!

Homework: Basics of creating animation in Macromedia Flash MX

First, you need to duplicate the animated flash videos presented in the material of this lecture.

Secondly, create a video that allows you to illustrate the wonderful lines from the poem by Sergei Aleksandrovich Yesenin:

Blue May. Glowing warmth.
The ring at the gate will not ring.
Wormwood wafts with a sticky smell.
The bird cherry sleeps in a white cape.

In the wooden wings of the window
Together with frames into thin curtains
The eccentric moon is knitting
There are lace patterns on the floor...

Try to combine two episodes in your video - two quatrains, using the knowledge gained as part of studying animation methods. To ensure a smooth transition from one episode to another, use a mask.

Total: you need four files in fla format (if the total file size exceeds 150 KB, please archive the files) and send them to the teacher.

I wish you success in learning Macromedia Flash MX on your own!

3.1K

In this article, we'll combine everything we've learned so far to learn several new animation techniques in Photoshop. Let's look at how to use different combinations of adjustment layers and filters for animation, how to create complex movement of animation layers and natural-looking effects.

Using a template layer with smart object animation

Since smart objects can contain multiple layers, we can create temporary layers, which helps us create more complex animations. For example, in the animation effect below, I created a red dot that moves in a circle. This effect is usually not easy to create and requires a lot of keyframes. With the help of smart objects we can use template layers and simplify the whole process.

Let's look at how this is done:

In the scene below I have created two layers: one with a red dot ( "Dot"), and the second with a large gray circle ( "Template Shape"). I've added spacer marks to the large gray circle to help demonstrate the effect of the movement:

Step 1: A scene consisting of two layers: a red dot and a large gray circle. ( Larger version)

First, I select both layers and convert them into a smart object by right-clicking on one of the selected layers and selecting " Convert to Smart Object»:

Step 2: Convert the layers into a smart object. ( Larger version)

Now we can animate both layers as one. Since this is a Smart Object, I have access to the Transforms property in the Timeline panel, which allows me to set a keyframe for the rotation. I added a frame for each half rotation to create one full rotation. As a result, I got a circle rotating around its axis:

Step 3: Both Layers Rotate as One

Now that our animation is working, we need to delete the template shape. To do this, double-click on the smart object thumbnail in the layers palette. With the smart object open, we can hide the “Template Shape” layer:

Step 4: Hide the "Template Shape" layer. ( Larger version)

Before making a completely animated banner in Photoshop, all we have to do is save the smart object document and return to the original document. We will see that the red dot moves in a circle without the gray shape:

The red dot moves in a circle

Nesting Animation in Smart Objects

Smart objects can consist of layers of any type ( or several types). Including layers that already contain animation keyframes. Let's look at how this is implemented:

Bouncing dot animation created using multiple sets of keyframes

In the scene below, I've already created a simple animation of a yellow dot spinning on a blue background:

Step 1: Yellow Dot Spinning on Canvas

Step 2: Convert the yellow dot layer into a smart object. ( Larger version)

We have a new smart object layer and we can add a new set of frames to it. In the scene below, I've added a set to animate the smart object moving up and down. Here we can see both sets of keyframes in action, which create the bouncing effect:

Step 3: New Keyframes Create a Bouncing Effect

Convert this smart object layer into another smart object that we can edit. Next we will add a Transformation property to this smart object. Go to Editing > Free Transformation, and use anchor points to reshape the smart object so that it appears in perspective.

Step 4: Convert Animation. ( Larger version)

The smart object's transformation will now be displayed when the animation plays. This is one of the main ways to make an animated picture in Photoshop:

Playing an animation with transformation

Filter Animation

If we add a filter to a smart object that contains an animated layer, we get an animation that plays through the filter. Let's look at how this works.

In the below scene I have already created a simple point animation ( inside a smart object), moving on a red background:

Step 1: Animate a Smart Object, a Yellow Dot Moving on a Red Background

Since our animation is already inside the smart object, I can add the filter directly to it. I'm moving to Filter > Distort > Twist:

Step 2: Apply the Twist filter to the smart object animation. ( Larger version)

When you watch this animation, you'll see some interesting things happening. The filter was applied to the smart object itself, not to the pixels of its content. This gives animated pixels moving through the filter a unique effect:

Animating the Twist filter

Adding Layer Styles to a Smart Object Animation

In the scene below, I already have a smart object that contains a simple animation of a dot moving on a white background:

Step 1: Simple Smart Object Animation

I want to apply an Emboss layer style to this point. But if I now try to apply a layer style to a smart object, it will affect all of its contents:

Step 2: Layer Styles Applied to the Image as a Whole

To fix this I need to remove the white background. Earlier I told you that we can modify the smart object to hide additional layers. In this example I want to demonstrate a different method.

As long as there is a strong tonal contrast between the layers, we can use the Blend If option to remove the background. Double-click the smart object layer to open the Layer Styles panel, and move the Overlay If slider until the background disappears:

Step 3: Set up the Overlay If slider. ( Larger version)

After that, right-click on the layer in the Layers palette and select “Convert to Smart Object.” We will get a new smart object that will save the changes we made:

Step 4: Convert to Smart Object. ( Larger version)

When we add a layer style set to the animation, the effect will only apply to that object:

Layer styles added to smart object animation

Changing Animation Using Adjustment Layers

Adjustment layers affect animated layers in the same way as regular layers. If an adjustment layer is placed on top of a layer containing keyframes, the animation inherits the adjustments. With this in mind, we can use adjustment layers to create unique effects.

In the scene below, I created a simple animation with two points, one moving past the other.