How to make animation in flash. How to create flash animation. Changing the order of scenes

💖 Do you like it? Share the link with your friends

Download flash from the site Can different ways. But some of them are quite cumbersome, some require the use of plugins, programs and websites. Meanwhile, there is a very elegant and simple method, the implementation of which does not take much time.

First, let's define why we need a flush at all, and what it is. Flash is a multimedia presentation made using the program Adobe Flash or . These files are called flash movies, although they can be much more than a movie.

They can be entire mini-programs: banners that react to the visitor’s mouse movement, small games, so-called flash games, tests with results, and so on.

Or they can really just be video or audio clips.

The standard extension for flash files is SWF. And when we come across such videos on websites, we cannot download them as easily as pictures, with the right mouse button. You'll have to work a little harder.

Download flash from the site

Go to the website page that contains the flash file you need. After that:

Open the page code

Right-click on the page and select View page code . Two more options to open the page code: click Ctrl+U, or write before the page address view-source:

Look for the SWF video address in the code

To do this, enable search using hotkeys Ctrl+F, and enter in the search field .swf. Then press Enter .

Find the address itself, which will look like:

http: //site.ru/papki/rolik.swf
or like this:

/papki/rolik.swf

If you have the second option, then the address is relative, not absolute. It must be placed to the left of the address home page site.

Checking the address

Paste the address of the flash video into the address bar of any browser in a new tab. A video should appear.

Make the address a link

If the video appears, copy the address into a notepad and make it a link, that is, add the appropriate code to it.

As a result, the inscription in the notepad will look like this:

Link

Download the flash video to your computer

Open the saved file in the browser. There will be a link inside it. Right-click on it, select Save link as... or Save via link..., and save the flash video on your computer.

To watch, either open it in a browser, or use a flash player, for example Macromedia Flash Player .

Other options

Although the option described above seems to me the most interesting, I will still give other ways to save flash on your computer.

  • Using the site http://save2go.ru. Enter the address of the page on which your flash movie is located and click Save from site . A link to the video will appear below. Right-click and select Save link as... or Save via link... .
  • Using a browser plugin, e.g. Downloadhelper For Firefox .
  • Using download programs, for example, Download Master. First you need to find the address of the flash video, and then insert it into the downloader.

You can get more detailed information in the “All courses” and “Utilities” sections, which can be accessed through the top menu of the site. In these sections, articles are grouped by topic into blocks containing the most detailed (as far as possible) information on various topics.

You can also subscribe to the blog and learn about all new articles.
It does not take a lot of time. Just click on the link below:

So far, we've looked at Flash movies that play without viewer intervention from start to finish. However, Flash also allows you to create interactive applications in which the user can control the display of content. In this lesson, we'll begin to explore 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 we begin describing Action Script, we should talk about one more type of symbol that we have so far ignored - 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:

Up-state is a frame corresponding to the situation when the button is not pressed and the mouse pointer is not located above the button;

Over-state frame illustrating the appearance of the button when the mouse pointer is positioned 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 defines the area in which the button responds to a mouse click; this area is not visible in the clip.

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

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 above 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. Over-frame button

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

Rice. 3. Down-frame button

We won’t draw anything in the Hit frame for now, but will return to this frame a little later.

Let's go 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 a button instance by dragging it from the library

As a result, we get the following film. As can be seen from of this film, pressing the button occurs not only when we click with the mouse 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 working area of ​​the button will correspond to the Up frame.

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

Rice. 5. Hit-frame buttons

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

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. To create scripts in Flash, there is a special language called Action Script. 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 films in Flash become more complex.

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 externally text file with extension AS.

When embedding a script into a film, it can be embedded in different parts of the film. More specifically, Action Scripts can contain keyframes, button instances, and movie clip instances. Accordingly, the scripts are called Frame Actions, Button Actions, and MovieClip Actions.

Action Scripts run when certain user- or system-initiated events occur. The mechanism that indicates Flash program, which statement should be executed when a particular event occurs is called an event handler.

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

One of the main concepts of Action Script are Actions - commands that issue instructions during 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). We will become familiar with most of the concepts of this language using specific examples.

Interactive photo album

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

Let's place the first photo on the main timeline and add a button from the standard set. To access the desired folder, you must run Windows command=> 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. Elements of the Key Buttons folder

Note that when you place a second button (key-right) on the stage and move it to align with the first button, the program provides a hint (a dotted 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 plan to write scripts frequently, this is a keyboard command worth remembering. As a result, the Action Script editor will appear (Fig. 9).

Rice. 9. Action Script Editor Panels

If you experiment with highlighting various elements in the scene while monitoring the messages in the Action Script editor panels, you will find that the program will tell you which element you can "hang" code on. If you select a frame on the stage, the word Actions - Frame appears in the upper left corner of the editor panel; if you click on the button, the word Actions - Button appears, that is, the program prompts that the entered code will relate to the button script. And if you select a photo, a message will appear in the field intended for entering a script: Current selection cannot have actions applied to it (a 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 quite acceptable.

So, for a left arrow button, 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 format:

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

If we run the created movie for execution, 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. Script assigned to the first frame

Please note: the command is no longer assigned to the button, but to the frame. The fact that a frame is assigned a script is noted on the main editing line - a lowercase letter “a” appears above the bold dot in the frame designation.

As a result, we got the next 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 advisable to also have buttons that link to the beginning and end of the film. 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).

Using the proposed example, we will familiarize ourselves with another command, gotoAndStop(), which allows you to go to the desired frame and then stop.

Rice. 12. Buttons from the Circle Buttons folder

We'll put a code on the button to go to the first frame (third from the left in Fig. 13), as shown in Fig. 13.

Rice. 13. Script for the “In the first frame” button

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

Automated script writing

Until now, we've typed all the commands manually, but the ActionScript editor panels provide a number of services for automated script writing. 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 an automated manner. By selecting the Movie Clip Control folder (top left window in Fig. 14), you can access the on event handler, and then you need to either double-click on the corresponding item or drag the expression onto the script writing field in Drag and Drop mode.

Rice. 15. Hint for completing an expression

As a result, the required expression and a hint like this will appear on the work field (Fig. 15): you select the desired command from the menu and the expression is completed automatically. As can be seen from the menu, you can select not only the condition associated with the on-screen buttons - you can also select from the menu 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 “flipped through” using the keyboard keys.

Rice. 16. Keyboard 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 work field (Fig. 17).

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

For a button that takes the movie to the beginning of the photo album, you can select pressing the Home key from the menu as an event, 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 a scene and a frame or only a frame. In our case, it is enough to specify only the Frame. If the scene name is omitted, the default is to jump to the frame of the current scene.

Rice. 18. Hint on possible command syntax

Rice. 19. The triangle arrow allows you to view syntax options

After we assign all the buttons the corresponding keyboard buttons, we will get the following movie, where flipping through photos will take place from the keyboard, and clicking the mouse on the on-screen buttons 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 you can - to do this, you need to list a list of event names in the on event handler. If you put a comma in the list of events after the first event, the program itself will offer you a menu (Fig. 20).

Rice. 20. When you enter a comma in the event list, a menu of additional commands automatically appears

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

on(keyPress" ", release)

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

In the example considered, we used the transition by frame number, but this method is not always convenient: if the frame numbering changes during the film editing process, the logic may break down. It is more convenient to use the transition by frame mark. Let's look at an example that requires not only flipping through the album, but also moving 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 "drawings" section Pictures; similarly, we'll assign the labels "graphics" and "photo" to the first frames of other sections.

Let's create a layer for placing labels and call it Lables. In order to label a frame, in the Properties panel you need to select the label type Name and write down its name. In our case, Pictures (Fig. 21). Similarly, we will place markers in frames 5 and 10 (Fig. 22).

Rice. 21. Example of assigning a label to a frame

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

Rice. 22. First shot script

Let's add another layer called Subjects (subjects), in which we will give titles to the corresponding frames: “Drawings” (Fig. 23), “Graphics” and “Photos”.

Rice. 23. Title for the frames of the “Drawings” section

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 item of the "Pictures" menu from the left edge and convert it into a button symbol. Using the Arrow tool, select the text block “Pictures” and execute the command Modify => Convert to Symbol (this command can also be executed using the F8 key), in the Convert to Symbol panel, set the symbol type Button and define its name as pictureButton (Fig. 24 ).

Rice. 24. Assign the name pictureButton to the button for going to the pictures section

Let's create four frames for the "Drawings" button: the first will simply represent the original text (Fig. 25), the second will represent 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 will draw a rectangular area that will define the area where the button is pressed (Fig. 26).

Rice. 25. Up-frame of the pictureButton

Rice. 26. Hit-frame of the pictureButton button

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. Script for moving to a frame with a label


Working with frames in multiple layers
Frame section settings

Beginning of work


The first frame of the layer is marked with an empty circle. This means that both Frame 1 and Layer 1 are empty - there are no objects inserted on the layer.

Let's paste any object onto the layer "Layer 1".
For example, let's import raster image(see Import) and paste it onto the layer "Layer 1".
The image is shown on the left.

You can view the created animation by pressing the Enter key.

Usually the background layer is locked to prevent it from being changed by adding a padlock icon.




Example 4:

You can add or remove simple frames.

Removing frames:
To delete a frame, you need to select it in context menu select Remove Frames.
To select multiple frames, hold down the Ctrl key.
For example, we need to reduce the number of frames for the background by 5 frames. Let's select 5 frames and delete them - instead of 30 frames, 25 remain.

Adding Frames:
For example, we need to add several frames on the “Background” layer. To do this, you can click on frame 30 and, when a small rectangle appears next to the cursor, simply drag frame 30 to the right in the timeline.

Or you can click on any frame between the 1st and 30th frames and select Insert Frame from the context menu.

Last updated: December 2014



tell friends