Menu
Is free
registration
home  /  Installation and setup/ About the simplest animation in flash. How to create a flash animation What is a scene

About the simplest animation in flash. How to create a flash animation What is a scene

Have you ever wondered what lies behind the beautiful animation of banners on the Internet? Or for newfangled cartoons created with the help of computer technology? Most often they are based on “flesh”, more precisely, this is how the name is translated from English Flash technologies. Today we will talk about flash animation for the site:

Flash Technology

The multimedia framework was developed by Macromedia. But after its takeover (merger), all rights to the technology were transferred to a new owner - by Adobe Systems.

Region modern application Adobe Flash :

  • Creating web applications is a fairly new direction. It implies full or partial use of Flash to create websites. With partial application, this technology creates individual elements design: various interactive menus, animated buttons, etc.

Compared to conventional resources, html based flash sites have some features that limit their use. These include high development costs, demanding server resources, long loading times with a slow Internet connection, and some other aspects:

  • Implementation of multimedia capabilities - for listening to audio and playing video on sites, media players created on Flash-based. Their development includes the use of one of the scripting languages ​​(more often JavaScript):
  • In Internet advertising - most often the technology is used to create animated banners. They imply not only the playback of multimedia advertising, but also some kind of interaction with the user on a game basis.

Fundamentals and Tools for Flash Development

To create flash animation, traditional tools from Adobe are most often used:

  • Adobe Flash Professional - a program for creating interactive animation (animator);
  • Adobe Flash Builder - an environment for creating an interface for web applications;
  • Adobe Flash Player is a browser-integrated player for playing Flash.

In addition to it, a number of third party applications. The most popular of them are Gnash, QuickTime and some others:

This technology allows you to display any type of graphics ( raster, vector, 3D). And also supports streaming relaying of audio and video data. A light version of Flash Lite was developed especially for mobile devices.

The main standard for flash files is the SWF extension. The acronym stands for Small Web Format. Video recorded in Flash has file extensions FLV , F4V .

The development of interactive animation in Flash is based on vector graphics. Thanks to this, it was possible to implement support for the multimedia platform and the independence of the animation quality from the screen resolution.

The file size of a Flash application is the same for all users, regardless of specifications screen (resolution).

Interactive animation in Flash is based on morphing (vector type ), which slowly blends between keyframes. To play the data, a flash player is used, the operation of which is in many respects similar to the work virtual machine JavaScript. The software component of the technology is implemented using the ActionScript language.

The disadvantages of the technology include the following points:

  • heavy load on CPU client machine. This is due to the low efficiency of the flash virtual machine, which is embedded with the player in the user's browser;
  • High Error Probability – Playing Flash animation can be very error prone. Moreover, failures in Flash playback negatively affect the operation of the entire client application (browser). This is due to insufficient fault tolerance control. program code when creating flash applications;
  • Cannot be indexed - All text content displayed in Flash content is not indexed. This limitation is especially problematic for those resources that are based on this technology.

Overview of Third-Party Flash Creation Software

Sothink SWF Quicker was taken as a prototype application on which we will demonstrate the basics of creating Flash. According to many professionals, the program is the most understandable and easy to learn.

In addition to creating and editing, the flash editor "knows how" to work with all other types of web animation (GIF, HTML and other standards):

After installation, we go to the user-friendly interface of the program. Unfortunately, after wandering through all the nooks and crannies of the interface language switcher, we did not find it.

In order to understand how to make a flash animation in this application, we will use the built-in templates. The New From Template dialog box appears immediately after starting the program. In addition, it can be called through the main menu item "File". Among the proposed options, we chose the creation of a banner:

In the next window of the wizard, you need to select a template from the drop-down list, according to which the animation will be created. Below it is a small frame in which the selected template is played:

In the next steps, you need to set the size of the banner and enter 5 phrases of text that will be played in the animation. In addition, you must specify the address of the resource to which the user will be led by clicking on the banner:

After compiling the project and closing the wizard window, you can view the resulting video in the built-in player. To do this, click on the green arrow at the top:

After closing the player, let's take a closer look at the application's interface. Please note that it consists of two main windows: the top one is for editing the time interval of the video, and the bottom one is the usual one. graphics editor. Each of the elements is located on a separate layer, which is available for editing using standard tools located on the sidebar.

We see flash animation all the time, on the internet and on TV. Creating a simple flash animation using Flash technology is quite simple task because Flash offers many useful tools that make the whole process easier. If you want to create a flash animation or cartoon, then you can sketch it in just a couple of hours.

Steps

Part 1

Frame-by-frame flash animation

    Frame-by-frame animation basics. This method is considered the main method for creating "traditional" animation, in which each subsequent frame includes one, but slightly modified image. When playing all the frames, the image "comes to life". This same method is used by freehand cartoon animators and is more time consuming than twinning (see next section).

    • By default, Flash renders at 24 frames per second (FPS). This means that 24 frames will be shown in one second, but not all of them need to be different. You can change this setting (if you want) to 12fps, but at 24fps the animation will play more "smoothly".

  1. Install Flash Pro. There are many programs for creating flash animation, but the most powerful is Adobe Flash Professional CC. You can install a free trial version of this program or use another product (if you do not want to register for Adobe Creative Cloud). The remainder of this article describes how to work with Flash Professional.

    Since frame-by-frame animation requires several images (which are slightly different from each other), you need to create these images manually. To do this, use Adobe Flash Professional or draw images in any graphics editor.

    • If you want your images to be easily resized without losing quality, create images in vector rather than raster graphics. Vector images will redraw themselves when they are resized (i.e. you will avoid pixelation or anti-aliasing). Raster images are traditional images such as photographs, drawings, and so on. If you try to enlarge such images, you will get a very distorted picture.

  2. Create the first frame. When you first start Adobe Flash Professional, you will see a blank canvas (layer) and an empty timeline. As frames are added, the timeline will fill in automatically. You can work with layers just like you do in Photoshop.

    • Before adding an image, create a base background for your animation. Rename "Layer 1" to "Background" and then clip it. Create a second layer and name it whatever you like. This will be the layer on which you will create the animation.
    • Add a drawing to the canvas of the first frame. You can import a drawing from your computer, or you can use the drawing tools to create a drawing directly in the program.
    • The first frame is the "key" frame. A key frame is a frame that includes an image and forms the basis ("backbone") of the animation. You will create a new key frame every time the image is changed.
    • Keyframes on the timeline are indicated by a black dot.
    • You don't need a keyframe in every subsequent frame. Create a keyframe every four to five frames to make good animation.

  3. Convert the image to a symbol. In this case, you will be able to add the image to the frame several times. This is especially useful if you need to quickly add several images of the same type to one frame (for example, fish in an aquarium).

    • Select a drawing. Right-click on the drawing and select Convert to Symbol. The image will be added to the library, making it easier to use in the future.
    • Delete the drawing. Don't worry - you can add it to the frame with a simple drag and drop from the library. This way you can add the same picture to the frame several times.

  4. Add blank frames. Once your first keyframe is complete, insert blank frames and then start creating your second keyframe. Press F5 (four or five times) to add blank frames after the first keyframe.

    Create a second keyframe (after you've added some empty frames). There are two different ways to do this: you can copy an existing keyframe and make small changes to it, or you can create an empty keyframe and add a new image to it. If you are using a drawing created in another program, use the second method. If you are inserting an image created with the Adobe Flash Professional drawing tools, use the first method.

    • To create a keyframe using the contents of the previous keyframe, press F6. To create a blank keyframe, right-click on the last frame in the timeline and select Insert Blank Keyframe.
    • Once you've created the second keyframe, you need to make changes to its image to make the animation come to life. If you've used Adobe Flash Professional's drawing tools, select the Transform tool to select an element in your drawing (such as a character's hand) and modify it.
    • If you insert a new image at each keyframe, make sure it is in the right place (according to the logical frame sequence).

  5. Repeat the process. After creating two keyframes, repeat the process - add a few blank frames between each keyframe and make sure the animation plays "smoothly".

    • Make small changes. The smaller (smaller) changes, the smoother the animation plays. For example, if you want the character to raise their hand, the second keyframe should not include a drawing that shows the character with their hand already raised. Instead, use a few keyframes to transition from the lowered hand to the raised hand. In this case, the animation will be smoother.

  6. Convert the drawing. Once you've created keyframes and a path, you can transform the image so that it changes smoothly as you move along the twin's path. You can change the shape, color, slope, size, and any other aspect of the image.

    • Select the frame in which the drawing will be transformed.
    • Open the drawing properties panel. To do this, press F3.
    • Change the parameter values ​​in the drawing properties window. For example, you can change the hue or color, add filters, change the size.
    • You can also use the Free Transform tool to change the drawing however you like.

  7. Add the finishing touches. Check the created animation by pressing Ctrl + Enter. Make sure the drawing (character) changes correctly and that the animation plays at the correct speed. If the animation plays too fast, reduce the FPS value or increase the duration of the tween.

    • The default FPS is 24, so try lowering this to 12. Change the FPS value in the properties panel. However, at FPS = 12, the animation may not play smoothly enough.
    • To change the duration of a tween, select the layer containing the tween and use the slider to change the duration of the tween. If you want to double the length of the tween, move the slider to 48 frames. Don't forget to paste the background on empty frames so that the background doesn't disappear in the middle of the animation. To do this, select new layer, click the last frame of the animation (on the timeline), and then press F5.

Part 3

Adding sound effects and music

  1. Record or download sound effects and music. You can add sound effects to your animation to make it more impactful. Music will make an animation more exciting and can turn a good animation into a great one. Flash supports various audio file formats, including AAC, MP3, WAV, and AU. Choose a format that guarantees high sound quality with the smallest file size.

    • The MP3 format guarantees high quality sound with a minimum file size. WAV files are large.

  2. Import audio files into the library to be able to quickly add sounds and music to animations. Click "File" - "Import" - "Import to Library". Find the audio file on your computer. Make sure the audio file has an easy-to-remember name so you can quickly find it.

    Create a new layer for each audio file. This is not required and you can add sound to existing layers, but pasting the audio file on a separate layer will give you more control over the animation's soundtrack.

    Create a keyframe from which the audio will start playing. On the sound layer, select the animation frame from which the sound will start playing. Press F7 to insert an empty keyframe. For example, if you want to insert an audio file that plays throughout the animation, select the first frame on the audio file layer. If you're adding a character's voice, select the frame where the character starts talking.

So far, we've looked at Flash movies that played without viewer intervention from start to finish. However, Flash also allows you to create interactive applications in which the user can control the presentation of content. In this lesson, we will begin our acquaintance with the elements of the Action Script scripting language and look at how it can be used to create interactive applications. As an example, let's create a photo album with interactive interface elements. But before proceeding to the description of Action Script, we should talk about one more type of symbols that we have ignored so far - these are button symbols. To build an interactive interface, they are simply necessary.

Creating buttons

The button is a four-frame interactive movie clip. When we assign a button type to a symbol, Flash creates a four-frame timeline for the new symbol:

The up state is the frame corresponding to the situation when the button is not pressed and the mouse pointer is not over the button;

Over-state - a frame illustrating the appearance of the button when the mouse pointer is over the button, but the button is not pressed;

Down-state - this frame shows the appearance of the button when it is pressed;

Hit-state - determines the area in which the button responds to a mouse click; this area is not visible in the clip.

To create a button, execute the command Insert => New Symbol (you can type the keyboard shortcut Control + F8). In the Create New Symbol dialog that appears, enter a name for the button symbol (for example, but1) and select the Button symbol type.

Flash will switch to character editing mode, providing Up, Over, Down, and Hit frames. The first frame, Up, becomes an empty keyframe. Let's draw an unpressed view of the button in this frame (Fig. 1).

Rice. 1. UP-frame button

Let's select the second frame, marked as Over and corresponding to the state when the cursor is hovered over the button. Let's insert a key frame in this frame (using the Insert => Keyframe command), as a result of which a key frame will appear that completely repeats the content of the Up frame. Let's change the color of the button, as shown in Fig. 2.

Fig 2. Button over-frame

Similarly, let's add the next frame (Down-frame) and draw the pressed state of the button (Fig. 3).

Rice. 3. Down-frame button

We will not draw anything in the Hit frame for now, but we will return to this frame a little later.

Let's move on to the main scene, call the library using the Window => Library command and create an instance of the button symbol by dragging it onto the stage (Fig. 4.)

Rice. 4. Create an instance of the button by dragging it from the library

The result is the following movie. As you can see from this movie, the button is pressed not only when we click on the central (working) area of ​​the button, but also when we click on the frame around it. This is due to the fact that if the Hit frame is not drawn, then the button's work area will correspond to the Up frame.

In order for the button to be pressed only in the working zone, it is necessary to define this zone in the Hit-frame, that is, draw a button without a frame (see Fig. 5)

Rice. 5. Hit-frame button

After we add the required Hit-frame, we will get the next movie, in which when you click on the frame, the button is not pushed through.

To make a button interactive, you need to associate the fact of pressing the button with the execution of certain commands, that is, describe a certain scenario. There is a special Action Script language for setting scripts in Flash. In this lesson, we will touch on only a small part of the capabilities of this language, and in the future we will return to the structure and syntax of Action Script as the examples of creating interactive movies in Flash become more complicated.

Understanding Action Script

Action Script is a scripting language - a set of instructions that control the elements of a Flash movie. Action Scripts can be embedded in a movie or stored in an external text file with AS extension.

When you embed a script in a movie, you can embed it in different parts of the movie. More specifically, Action Scripts can contain keyframes, button instances, and movie clip instances. Accordingly, the scripts are called frame scripts (Frame Action), button script (Button Action) and clip script (MovieClip Action).

Action Scripts are executed on the occurrence of certain user- or system-triggered events. The mechanism that indicates Flash program Which statement should be executed when an event occurs is called an event handler.

Action Script has its own syntax, much like JavaScript syntax. Flash MX 2004 supports Action Script of all previous versions flash.

One of the main concepts of Action Script is Actions - commands that issue instructions during the execution of a SWF file. For example, gotoAndStop() sends the playhead to a specific frame or cue. From the word Actions comes the name of the language - Action Script (literally - action script). With most of the concepts of this language, we will get acquainted with specific examples.

Interactive photo album

Let's demonstrate the use of buttons to control a photo album - create a set of photos and add two buttons that will scroll through the photo forward and backward.

Let's place the first photo on the main timeline and add a button from the standard set. To access desired folder run the command Windows => Control Panels Common Libraries => Buttons (Fig. 6).

Rice. 6. Add a button from the standard library

As a result of executing this command, a panel will appear containing a large set of pre-drawn buttons. various types. Let's select, for example, Key Buttons (buttons similar to keyboard keys), open the corresponding folder, select the key-left button (Fig. 7) and create an instance of this button (by dragging it onto the stage).

Rice. 7. Key Buttons Folder Items

Note that when you place the second button (key-right) on the stage and move it to align with the first button, the program gives a hint (dashed line) that allows you to accurately position the button (Figure 8).

Rice. 8. Automatic alignment of buttons on the same level

In order to add a script, you need to call the Action Script editor using the Window =>Development Panels => Actions command or by pressing the F9 key. If you are going to write scripts often, then this keyboard command is worth remembering. As a result, the Action Script editor will appear (Fig. 9).

Rice. 9. Action Script editor panels

If you experiment by highlighting different elements in the scene while monitoring the messages in the Action Script editor panels, you will find that the program suggests which element to code on. If you select a frame on the stage, then the inscription Actions - Frame appears in the upper left corner of the editor panel, if you click on the button, then the inscription Actions - Button appears, that is, the program prompts that the code you enter will refer to the button script. And if you select a photo, then in the field intended for entering the script, the message will appear: Current selection cannot have actions applied to it (the script cannot be applied to this selected object).

We will assign a script to a button. IN latest versions ActionScript has the ability to write centralized code, that is, code that is located in one place, and this ability allows you to better understand large programs. However, in simple examples(which we are considering) assigning a script to a button is perfectly acceptable.

So, for a button with a left arrow, we need to formalize the following scenario: "If the button is released on a certain frame, then from this frame you need to go to the previous frame." In accordance with the syntax of the Action Script language (Fig. 10), it will look like this:

The first line contains the on() button event handler, which has the following format:

Now let's add several keyframes so that the buttons created in the first frame are copied into them, and we place the necessary photos in the newly created frames.

If you run the created movie for execution, then the frames will be continuously played one after another, and therefore, first of all, we need to give the “Stop” command on the first frame. To do this, add the corresponding command to the first frame (Fig. 11).

Rice. 11. Scenario assigned to the first frame

Please note: the command is no longer assigned to the button, but to the frame. The fact that a scene has been assigned a script is noted on the main timeline - a lowercase letter "a" appears above the bold dot in the frame designation.

As a result, we got the following film.

If we have only a few frames in the photo album, then two buttons - "Forward" and "Back" - are quite enough, but if the set of photos is large, then it is desirable to have buttons that send to the beginning and end of the movie. In the following example, we will add the corresponding buttons: "To the first frame" and "To the last frame". You can select buttons of a suitable mnemonic from the standard library of buttons from the Circle Buttons folder (Fig. 12).

In the proposed example, we will get acquainted with another gotoAndStop () command, which allows you to jump to the desired frame and then stop.

Rice. 12. Buttons from the Circle Buttons folder

On the button for switching to the first frame (third from the left in Fig. 13), we will hang the code, as shown in Fig. 13.

Rice. 13. Scenario for the button "In the first frame"

In the case of a photo album of five frames, add the “To the last frame” transition script to the last button:

Automated Scripting

Until now, we've typed all the commands manually, but the ActionScript editor panels provide a range of automated scripting services. Let's consider these possibilities.

Rice. 14. Automated scripting tools

The Action Script editor panel allows you to select, drag, rearrange, and delete commands.

Let's show how you can write the same script for the "Forward" button in automated mode. By selecting the Movie Clip Control folder (upper left window in Figure 14), you can access the on event handler, and then either double-click on the corresponding item or drag the expression to the script writing field in Drag and Drop mode.

Rice. 15. Hint to complete an expression

As a result, the necessary expression and a hint of the form (Fig. 15) will appear on the working field: you select the required command from the menu and the expression is completed automatically. As you can see from the menu, you can select not only the condition associated with the on-screen buttons, but you can also select from the menu in Fig. 15 point keyPress “ ", or keyPress " ”, which corresponds to pressing the keyboard keys (left arrow, right arrow), that is, it is possible to create a photo album that will be “paged” using the keyboard keys.

Rice. 16. Keypad button calls

Let's use the keyPress command ” (Fig. 16), then go to the Timeline Control folder, select the nextFrame command and drag it to the working field (Fig. 17).

Rice. 17. The nextFrame command can be found in the Timeline Control folder

For the button that moves the movie to the beginning of the photo album, you can select as an event from the menu pressing the Home key, and then (Fig. 18) drag the gotoAndStop command onto the field, as a result of which another hint will appear on the possible syntax of this command.

The arrows in the tooltip allow you to view different syntax options. The program provides two options (Fig. 18 and 19), that is, it offers to set the scene and the frame or just the frame. In our case, it is enough to specify only the frame (Frame). If the scene name is omitted, it defaults to a frame of the current scene.

Rice. 18. Tip on possible command syntax

Rice. 19. Arrow-triangle allows you to view syntax options

After we assign all the buttons the appropriate keyboard buttons, we get the next movie , where paging through photos will occur from the keyboard, and clicking on the on-screen buttons with the mouse will not cause any consequences.

Is it possible to provide a scenario in which different events will lead to the same actions? It turns out that it is possible - for this, in the on event handler, you need to enumerate the list of event names. If you put a comma in the list of events after the first event, then the program itself will offer you a menu (Fig. 20).

Rice. 20. When entering a comma in the list of events, a menu of additional commands automatically appears

Let's add to the first event (pressing the keyboard button) the second event (releasing the on-screen button):

on(keyPress" ", release)

Let's repeat the procedure for the rest of the buttons and as a result we will get a photo album, in which the pages of photos will be scrolled both with the mouse and with the keyboard (the original FLA file can be obtained from the link).

In the considered example, we used the transition by frame number, but this method is not always convenient: if the frame numbering changes during the editing of the film, then the logic may be violated. It is more convenient to use transition by frame mark. Let's consider an example that requires not only flipping through the album, but also the transition to different sections, that is, more complex navigation.

Let the album consist of drawings, computer graphics and photographs.

Let's label the first frame of the "Pictures" section as Pictures, similarly to the first frames of other sections, label graphics and photo.

Let's create a layer for placing labels and name it Lables. In order to label a frame, in the Properties panel, select the label type Name and write down its name. In our case, Pictures (Fig. 21). Place marks in frames 5 and 10 in the same way (Fig. 22).

Rice. 21. An example of assigning a label to a frame

Now let's add a new layer and name it Actions. In the first key frame of the Actions layer, call the Actions Frame panel (by pressing the F9 button) and type the stop () command (see Fig. 22)

Rice. 22. Scenario of the first frame

Let's add another layer called Subjects (subject), in which we will give the titles to the corresponding frames: "Pictures" (Fig. 23), "Graphics" and "Photo".

Rice. 23. The title for the frames of the section "Pictures"

Now let's add menu buttons with similar names to the side, which we will place on a new layer called Menu.

Let's print the first menu item "Pictures" from the left edge and translate it into a button symbol. Using the Arrow tool, select the “Pictures” text block and execute the Modify => Convert to Symbol command (this command can also be executed using the F8 key), in the Convert to Symbol panel, set the Button symbol type and define its name as pictureButton (Fig. 24 ).

Rice. 24. Name the button for going to the picture section the name pictureButton

Let's create four frames for the "Pictures" button: the first will simply represent the original text (Fig. 25), the second - the same text only in blue, we will skip the third frame (in this case, the Down-frame will be the same as the Over-frame ), and in the Hit-frame we draw a rectangular area that will determine the area where the button is pressed (Fig. 26).

Rice. 25. Up-frame button pictureButton

Rice. 26. Hit-frame of the pictureButton

Now we need to attach the script to the newly created button. To do this, select the button in Scene 1 and, by pressing F9, call the Actions panel, and then enter the code shown in Fig. 27.

Rice. 27. Scenario of transition to a frame with a label

Using Scenes

As you know, Flash allows you to create quite complex movies that can contain interactive elements, animation, clips, etc. Naturally, there is a need to store and search for various elements of the movie. If you're working on a large and complex project, it's a good idea to break it up into multiple manageable chunks, each containing a specific sequence of events (animation, interactive user dialog, etc.). This will greatly simplify the work. Scenes play the role of such fragments in Flash movies. They are logically completed miniature films, which together form a single Flash movie. When creating large projects, the use of scenes can save a lot of time.

What is a scene

Creating a scene is an effective technique that makes it possible to divide a specific project into separate manageable fragments. Each scene, as already mentioned, is a miniature film. The number of scenes in a Flash movie that can be used is only limited by the amount of memory on your computer. Scenes play sequentially, in the order specified in the Scene panel (Scene) and, being independent, at the same time are closely related to each other. During playback, there is never any noticeable delay between them. The possibilities for using scenes are varied and almost limitless. For example, when working on a Web site project, you might implement sections and subsections as scenes. Recently, short animated Flash movies have become increasingly popular on the Web, the content of which can be divided into logical parts by means of scenes.

Scene Panel

The list of scenes contained in a movie is accessed using the Scene panel.

on), which opens when calling the command Window> Design Panels> Scene (Window> Design Panels> Scene). This panel allows you to view a list of available scenes

and set the order of their playback in the movie - it is determined by the order of the scenes in the list. In addition, using the Scene panel (Scene), you can duplicate, add, delete and move scenes within the list.

The Options menu (Settings) of the Scene panel (Scene) contains only three commands: Maximize Panel (Make the panel size maximum), Close Panel (Close the panel) and Help (Help).

Scene Panel

Edit Panel

The Edit panel is located above the timeline, below the main program menu. To open the panel, use the command Window> Toolbars> Edit (Window> Toolbars> Edit Panel). You have already used this panel when working with the Symbol Editor window to exit symbol editing mode (see Chapter 6). In this section, we will talk about functionality panels Edit (Editing), concerning work with scenes.

The Edit panel contains the name of the current scene (in the figure, the current scene is Scene 2). You can switch to another scene using the Edit Scene button located on the right side of the Edit panel (Editing), while the name of the selected scene will be displayed in the line. The functionality of the Edit Scene button is described in the "Switching Between Scenes" section.

Edit Scene button menu

Creating and Manipulating Scenes

As already mentioned, the Scene panel (Scene), which opens with the command Window> Design Panels> Scene (Window> Design Panels> Scene), is designed to work with scenes. In this section, you will learn how to use this panel to add, duplicate, rename scenes, and change their order.

Adding a Scene

As the complexity of a project grows, you will constantly have to add new scenes to distribute the logical chunks of its content. You can do this using the Scene panel. To add a scene, follow these steps.

Make sure the required document is open. By selecting the command Window> Design Panels> Scene (Window> Development Panels> Scene), open the panel Scene (Scene).

Click the Add Scene button in the lower right corner of the panel, or call the Scene command from the Insert menu. After these actions, the name of the new scene will appear in the Scene panel window. By default, each new scene is given a name with a sequence number one greater than the name of the currently selected scene (for example, Scene 1, Scene 2, etc.). The name is placed in the list accordingly.

Select the new scene in the Scene panel and create its content. When you create a new scene, Flash switches to it automatically.

List of scenes in the Scene panel

Deleting a scene

You can delete a scene in this way.

Open the Scene panel (Scene) by calling the command Window> Design Panels> Scene (Window> Design Panels> Scene). Select the scene you want to delete.

Click the Delete Scene button in the lower right corner of the panel. To confirm the deletion of the scene, click on the OK button in the dialog box that opens.

Scene duplication

In previous chapters, we have already talked about creating duplicates of various elements. As for copying animation, and even more complex project with big amount scenes, the process would be quite cumbersome without the duplication function, which allows you to create exact copies of any scene with the click of a single button.

Open the Scene panel by activating the command Window> Design Panels> Scene (Window> Design Panels> Scene), and select the scene you want to duplicate.

Click the Duplicate Scene button in the lower right corner of the Scene panel.

The name of the duplicate scene will appear in the Scene panel window. Note that it consists of the name of the original scene and the word soru (copy).

Duplicate scene

Renaming scenes

Because the default names assigned to duplicates and new scenes differ only in sequence number, it is difficult to identify a scene when searching for specific content. Therefore, in large projects, it is advisable to assign special names to scenes that characterize their content. The process of renaming a scene will not take you much time.

Open the Scene panel (Scene) by selecting the command Window> Design Panels> Scene (Window> Development Panels> Scene), and double-click on the name of the scene you want to change. This will make it possible to edit the name of the scene.

Enter a new name and press the Return/Enter key, or double-click outside the Scene panel.

Renaming a scene in the Scene panel

Changing the order of scenes

The order in which scene names are placed in the Scene panel determines the sequence in which the scenes are played in the movie. The scene names in this panel can be moved around, setting the playback order of the scenes, regardless of the order in which they were created.

Open the Scene panel (Scene) by selecting the command Window> Design Panels> Scene (Window> Design Panels> Scene).

Place the mouse pointer on the name of the scene you want to rearrange, click left button mouse and while holding it, move the pointer to the desired location on the panel. Note that as you move the pointer, a blue line appears, indicating the possible new position of the scene name in the list.

Moving a scene in the Scene panel

Switching between scenes

You can use the following navigation tools to switch between different movie scenes while working on a Flash project.

Panel Scene (Scene). To jump to the desired movie scene, click on the scene name in the Scene panel (Scene). Recall that the name of the selected scene is displayed in the Edit panel.

Edit Scene button. When you click on this button, located on the right side of the Edit panel (Editing), you get access to a menu with the names of all the scenes in the movie. To jump to the desired scene, select the appropriate menu item.

Movie Explorer panel. This panel, which can be opened with the command Window> Other Panels> Movie Explorer (Window> Other Panels> Movie Explorer), serves to display the hierarchical structure of the movie (see Chapter 8) and allows you to search for scenes, characters and instances of characters, as well as replace text and fonts.

Scenes are presented in the Movie Explorer panel as higher-order hierarchical elements. To navigate to a particular scene, find its name in the Movie Explorer panel and click on it. By default, this panel only displays the contents of the selected scene. To simultaneously view the contents of all scenes, activate the Show All Scenes command in the Options menu of this panel.

Movie Explorer panel with a list of scenes

Scene testing

To test the created movie directly in the Flash development environment, you need to press the Return / Enter key, but in this case, the viewing options will be limited to the selected scene. Sequential playback of all scenes is possible only after the publication of the movie, the Flash environment is no longer required. To test, follow these steps.

To test a single scene, select it in the Scene panel and press the Return/Enter key, or after selecting a scene, open the Control menu and activate the Test Scene command.

To test a movie, call the Test Movie command from the Control menu or use the Cmd/Ctrl+Return/Enter key combination. This will open a new window in which all the scenes in the movie will play in the sequence defined in the Scene panel.

You can also play all scenes in a movie by selecting the Play All Scenes command from the Control menu.

Controlling scenes with ActionScript scripts

Scenes can greatly simplify the overall organization of your movie content. Preset Sequence scene reproduction determines the linearity of the films. But besides the advantages (for example, the simultaneous playback of two scenes is excluded), linear films also have disadvantages associated with the inability to change the order in which the scenes are played. To solve this problem, ActionScript scripts (particularly frame actions) are used to control scenes.

You'll learn more about ActionScript scripting and using frame actions in Chapter 13. This section will cover some of the actions you can use to manipulate scenes.

gotoAndStopO - when this action is called, it jumps to a specific scene and frame and stops movie playback.

gotoAndPlay() - calling this action causes the playback head to jump to a specific scene and frame (movie playback continues from that frame).

play О - this action allows you to continue playing the movie after it has been stopped.

stop О - with this action you can stop the movie playback.

I welcome everyone!
So, at the request, I am writing a lesson about the simplest animation in flash. Let's start small, as they say. Then I promise to add more (by pop-up, if they don’t write).

Open Flash MX.
Before us is our working scene, menu, toolbar, etc. At the bottom there is such a window: Properties (Properties). There are the main settings for your cartoon (Fig. 1).
We are interested in FRAME RATE - the scrolling speed of your cartoon. Otherwise, 12 fps means that 12 frames (frame) of your cartoon will be played in one second. This speed is standard and, in principle, what you need. If you need to slow down your cartoon - reduce it, if you need to make it faster - increase this figure.

Now let's move on to the animation itself.
There are two main ways in flash: shape tweening and motion tweening.
Let's consider the first one. Shape - (English) shape. You already understand that here we will talk about changing the form. We create a certain shape, for example, a blue square. At the top, in the timeline (timeline), we will have a circle on a gray background on the first frame - we have created a keyframe (keyframe). Now let's create the same frame in the 10th frame. This can be done in two ways: move the mouse over the 10th frame, click (the frame turns blue) and select in the menu: Insert->keyframe; otherwise you can: point to frame 10, click, press F6. In the time line, all 10 frames are grey. The red line shows which frame we are on. (fig.2)

Let's go to frame 10. We select our square (with the mouse or by pressing ctrl + A, - this key combination selects everything that we have in working area). Move our square somewhere to the side (make sure you're in the 10th frame!) and change the color to, say, yellow. Now let's go back to the first frame. In the Properties line, there is a Tween selection, where the default attribute is "none". That is, no animation. Change it to "shape". In the time line, our frames become light green with an arrow. When everything is done press "enter". THE BEAUTY! The square moves, and even changes color! Let's go back to frame 10. Select all (ctrl+A). And press the delete key (that is, delete). In place of the square, draw a thread of a red circle. Go back to the first frame and press enter. The square is now a circle and red. You have already understood that you do not need to draw every frame - flash will do it for you! Although if you need special accuracy, or something - you can draw. then the file will grow in size. If you need a smoother transition from a square to the same, for example, a circle, do this process not for 10, but, say, for 25 frames. If you need more intricate movements and movements, there are layer masks for this, but about them sometime next time. Figure 3 shows what your animation looks like on the timeline. Now you can draw a simple shape-changing movie!

Now consider the second way to set the animation: motion tweening (translation something like: building an intermediate motion animation). Here it will be a little more difficult. Open a new flash file again.
What is the difference between shape and motion? The fact that in the second case we will work not on forms, but on ready-made objects, i.e. symbols. A character is, so to speak, the simplest unit of animation in flash. This is the more common way of drawing. We repeat everything again - in the first frame we draw a little blue square. select it and press F8 (or execute sequentially: Insert->convert to symbol). A dialog box appears in front of us (Fig. 4).

What is it? There are three types of characters in flash: a moovie clip is some kind of additional animation inside a character. that is, this symbol contains some kind of animation, etc. has exactly the same time string as the main scene; button (button) - an element that responds to pressing, the presence of the mouse over it, etc. In short, the button is; and the third element, the most static one, is graphic. That is, just graphics, some kind of image. We will work with the latter. We call it something, press "OK". A circle appears on the square - otherwise, the center of our symbol (the center can also be set in that dialog box). All our symbols are entered into the library. From there, we can edit them, insert them where necessary and where not, delete, add. To look at your library, press F11 or do the following: Window -> Library. In the 10th frame, create a key frame (F6). Now we can move our square somewhere. Then we make it invisible: for this we select it in the 10th frame. On the propperties panel, in the color section, set alpha (transparency). Let's give it an attribute in percent: 0. Let's go back to the 1st frame. We will perform all the same actions as for shape tweening, only instead of shape we note motion. The frames in the timeline will turn purple and an arrow will stretch through them, as shown in Fig. 5. Press enter.

We get the effect "square flies into the void." Congratulations! You know how to make primitive graphics in flash!
Another important feature - for each animation, we must have a separate layer (Layer) selected. If you need to add another layer, use the command: Insert->Layer.
And quite a bit about the time line.
As you already understood - light green with an arrow - shape tweening, purple with an arrow - motion tweening. Light green or purple with lines - you set the animation, but this animation cannot be created - you did something wrong. Gray color - all frames with such shading are an exact copy of the previous key frame (keyframe). The white color of the line means that there is nothing in these frames. The black circle is the keyframe. The white circle is an empty keyframe (blank keyframe). Well, like everything. (Fig. 6)

That's all for now. This is the minimum you can work with. Next, study the addition of sound, control over sound, and go ahead - write Masyanya. :) I promise that I will definitely write another lesson soon - on advanced animation in flash. About how to make a "feather fall", about masks, about control over shape changes in shape tweening "e. Then I'll write something else.
If this helped someone, say thanks to the entire FLASHER.RU site. It's the best thing on the web.
I was glad and glad to eat! If you have questions, please visit the forum or: [email protected]
(с)from St. Dimitryi aka Nirva to Flasher.ru
http://flasher.ru