Macromedia flash 8 animation lessons for beginners. Learning Macromedia Flash. Movement along a given trajectory

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 an 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 tells Flash which statement to execute 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 from all previous versions of 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 manage 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 the required folder, execute 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 of 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. Recent versions of ActionScript have 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 the simple examples (which we're looking at), 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

So far, 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 the corresponding keyboard buttons to all buttons, we will get the following 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

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 an 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 tells Flash which statement to execute 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 from all previous versions of 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 manage 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 the required folder, execute 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 of 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. Recent versions of ActionScript have 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 the simple examples (which we're looking at), 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

So far, 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 the corresponding keyboard buttons to all buttons, we will get the following 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

All possible occasions for festivities are behind, the fifth semester of my grade book is completely filled, it's -25 degrees outside - I simply have no reason to delay the fulfillment of my promise given to you before the New Year in "KV" No.50 . So, let's continue the conversation about Flash technology and the popular package for creating interactive applications Macromedia Flash Professional 8. Today we will focus our attention on tricky drawing techniques.

I must immediately warn you that you will not find a boring enumeration of Flash tools with a description of the properties and methods of each here. This information can be easily found in tutorials, electronic reference books and help "for Flash. I tried to collect the most interesting techniques that are used by advanced users and which will be of interest to both novice users and experienced Flash designers. Well, get down to business!


Modifier buttons

Let's say you want to create a rounded rectangle on the Flash 8 pasteboard. This geometric figure is drawn using the Rectangle Tool (R), for which the fillet radius is set using the "Set Corner Radius" modifier button that appears at the bottom of the toolbar (in the "Options" section). This method can be successfully used to quickly write simple buttons.

When activating any tool in Flash, you should pay attention to its modifier buttons, which can fundamentally change the principle of operation of the selected drawing tool. For example, a pencil (Pencil Tool) can work in one of three modes: straightening lines (Straighten), smoothing sharp corners (Smooth) and ink drawing (Ink). Each of the listed modes is set using a modifier button and can be useful if the mouse shakes excessively in the hand while drawing. The Eraser tool (eraser) also has several modes of operation that allow you to configure it to destroy lines ("Erase Lines" mode), areas filled with color ("Erase Fills" mode), etc. Usually, the name of the modifier button directly follows her appointment.


Fill lock

If you use the Paint Basket tool to paint multiple objects with a fill lock option (the "Fill Lock" modifier button), then the texture or gradient used to fill the shape will be repeated in each subsequent object. In other words, fill blocking allows you to create the impression that the shapes you are coloring are cut out of a single colored sheet of paper. The Brush Tool (B) also has this property.

Fill Lock is useful when you need to see others through some objects. In this way, it is easy to create a view from the window to the night sky on a full moon.

Roughly speaking, in each window sash (and in the window too) the observer must see parts of the same picture - the night sky and the lunar disk, the glow of which weakens with distance. This effect is provided by fill blocking. Let's start in order. I drew the window itself using hollow rectangles (Rectangle Tool) and pencil lines (Pencil Tool) with variable thickness and gradient fill (the necessary colors were selected on the Window -> Color Mixer panel). All window elements are located on the same layer. Then I selected the right side of the window and filled it (Paint Basket tool) with a black-blue-black radial gradient, turning on the fill lock mode (the "Fill Lock" modifier button). Using the Gradient Transform Tool ("Gradient Settings"), I chose the best way to overlay the gradient. The vent and the second half of the window were painted over with the same contents of the Paint Basket. And the last touch is the moon. To do this, take the Oval Tool ("Ellipse"), remove the outline, hold shift and draw the correct circle at the brightest point in the sky. Add stars to taste. :)

The same could be done with the help of a mask layer, on which there are rectangles that ensure the visibility of the sky in the window sashes. But in this case, you see, more fuss. And so we managed with only one layer.


Bitmap fill

Let's go back to the results of the previous lesson and draw winter patterns on the glass.

To do this, select the texture by selecting the "Bitmap" item in the "Type" list in the "Color Mixer" window. Fill all the windows and use the Gradient Transform Tool to adjust the position, size and slope of the texture. Looks like it's getting colder! :)

Let someone try to look out the window and clear some area of ​​frost, as you and I often do in winter in transport. Take a brush (Brush Tool), load a bitmap for it (view from the window) and apply a few strokes, turning on the "Fill Lock" mode. That's the "magic wand"! In those places where the brush worked, a winter landscape opened up. However, you should not get carried away with raster textures - the size of the output file grows by leaps and bounds. :)


Shadow of a moving object

The methods discussed earlier (filter and timeline effect Drop Shadow) make the object cast a shadow only in the vertical plane. That is, if we take our clip or graphic image and bring it to a wall illuminated by an arbitrary light source, then the shadow will be located on the vertical surface (wall) behind the object. However, quite often it is necessary to place the shadow in any other plane (on the floor, on an inclined surface, etc.). And here the standard means are already powerless.

Let's think logically. Any type of object (Graphic, Button, and MovieClip) can be manipulated to: resize, rotate, skew, and so on. (menu Modify -> Transform). It's vector graphics! Let's say we have a video (let's take the standard one with a monkey swinging on a branch from the "Samples And Tutorials" folder). The clip's library contains the clip's symbol, and its representation (image) is on the timeline. Who prevents us from dragging another representation of this clip onto the workspace, filling it with black and placing it in the desired plane using the "Rotate And Skew" procedure of the Modify -> Transform menu? Nobody! And at the same time, the shadow will fully correspond to its object - a rotating monkey and a branch, in our case. So let's do it.

To fill the entire clip with black, you can go in two ways: recolor every detail of the clip, which, of course, will take a lot of time, or on the clip properties panel (Window -> Properties -> Properties or "Ctrl + F3") in the Color list select Tint ("Color") with 100% black. The latter is clearly preferable. :) As a result, the entire clip will turn black. However, the shadow does not have a clear outline, so the resulting video needs to be blurred. To do this, select the Blur filter and set the horizontal blur to BlurX=50, the vertical blur to BlurY=4, and set the quality to low (Quality=Low) so that when playing the entire clip, the load on the PC hardware is less. Now the shadow must be positioned in the required plane (ground plane). A complex animation in which moving objects cast a shadow according to the laws of physics is created in the manner described above.


Object interaction

A distinctive feature of Flash as a vector editor is the interaction of graphic objects located in the same frame layer. The nature of their interaction depends on the type and relative position. For example, identically colored shapes stick together when superimposed, and a regular line can cut an object into pieces. The latter is often used to break up a fill area, which in turn produces impressive results. To exclude the interaction of objects, they must be placed on different layers.


Design of inscriptions

In some cases, it's useful to turn text blocks into graphic objects to take advantage of styling techniques that are not applicable to regular text. However, the conversion should be performed only when the lines are completely ready for further processing: the words are written without errors, the necessary font is selected, etc. Then it will not be possible to return back to the text data type and correct these flaws using the standard tools of the Text tool.

So, we will assume that we have a text inscription in our workspace, from which we need to make a logo or a header for a website. And Flash, like any full-fledged vector graphics editor, will easily allow you to do this. Let's break the phrase into letters with the Modify -> Break Apart command (you can also use the "Ctrl + B" combination for this purpose). As a result, the original text block was split into several parts, the number of which is equal to the number of characters in the original text fragment. To convert each character into a graphic, let's do this procedure again. Now the letters are represented by fill areas, and you can do the same actions with them as with graphic objects. For example, outline. To do this, activate the Ink Bottle Tool ("Inkwell"), select the thickness and color of the line, and then click it on each letter. Outline text (hollow letters) is created by removing fill areas. In addition, each letter or whole word can be subjected to deformation, etc. All symbols are assembled into one graphic block using the Modify -> Convert To Symbol command or the "F8" key.


Graphics optimization

There are several ways in Flash to reduce the size of the output file (applies to FLA, SWF, and MOV formats). Firstly, when publishing a video, you can choose the degree of bitmap compression, as well as enable additional document compression (menu File -> Publish Settings). This option, of course, is not suitable for FLA - the internal file type of Flash. Secondly, the user can remove unnecessary shapes and extra lines from the scene, as well as reduce the number of symbols used to a minimum by thinking over the structure of each object in advance and removing unnecessary symbols from the library. Thirdly, you can use the built-in line optimizer, which will allow you to get by with a minimum number of lines, thereby reducing the amount of data required for memorization. To do this, select the entire document ("Ctrl + A") and go to the menu Modify -> Shape -> Optimize. In the dialog box that appears, you can set the required optimization parameters. I ran the wizard for the moon view image. The original file contained information about 91 curves, and after optimization the number of curved lines decreased to 43. Ie. the size of the output SWF file has been halved. These actions, of course, did not affect the image quality in any way, because in this case the formula description of the image is optimized. If you replace the compound lines with solid lines in vector graphics and straighten the curves a bit, you need less information to describe the entire drawing.


Instead of a conclusion

That's all for today. When I worked on this opus, I proceeded from the fact that the reader is already familiar with the previous articles about Flash, published in "KV" No. - /2005. Therefore, today I did not provide any references to past material. However, if something was not clear to you, then perhaps the key is hidden in the previous numbers.

Aspera Symphonia

All sections of the site site


download video tutorials on flash

Macromedia Flash 8 video tutorials

You have a great opportunity for FREE to see and download 11 video lessons for work in the program
Macromedia Flash 8 Professional

================

===================

Download 1st video tutorial

Program interface shown Macromedia Flash 8 Professional
and work with panels, where and which of them are located.
How to enable (or disable) the panels you want

Download 2nd video lesson

What interactive components are in the program and how you can start using them right away.

How to create NEW interactive objects and components in the program - buttons, checkboxes, radio buttons and other bells and whistles.

Download 3rd video lesson:

How set properties(for example, enter a name, a reaction to the name, etc.) to both standard components and interactive components that you have newly created.

It also explains: which parameter - what it means. It also shows what values ​​​​and parameters in the program should be set.

Download 4th video lesson

Scripting code is the main means of creating interactive movies and applications.

How to use it to enter the main parameters of the components and animation-controlled objects of the film. Where is the editor of this scripted code.

Download 5th video lesson

It is not necessary to create any interactive objects every time. The program has a library of built-in interactive elements.

The video tutorial deals with working with the library window. Where and how to find and enable pre-built interactive components, as well as how to create your own.

Download the 6th video lesson

Hidden functions of the program, which can greatly facilitate the work with it and beyond :) How and where to find out all the information about the current object or element.

After all, not all objects of a movie or movie can be displayed in the current scene - they can be displayed in additional scenes How to display them. edit or delete - you will learn in this video tutorial.

How and where to move between movie scenes, video clip or grouped objects.

Download 7th video lesson

Where are program toolbar and what they mean how to select actions on graphic objects to change and edit them.

And also, how and where additional screen palettes are displayed where the working window of the film and the area for editing the film or video are located.

What is the timeline and where are object properties set.

Download 8th video lesson

About the purpose and functions of the main menu of Macromedia Flash 8 Professional - what and why there are sections in the main menu.

Download 9th video lesson

What sections does the toolbar consist of and what buttons what they are responsible for.

This is very important, since there are a lot of buttons, and even if you have a Russian version Macromedia Flash 8 Pro and it's nice when they explain to you from the screen which button is responsible for stroke, fill or selection.

And if you have the English version of Flash 8 installed on your computer, and you are not very friendly with English, then a very necessary lesson.

Download 10th video lesson

Grid measurement rulers and graphics guides are a must. Where are they hiding and what team can call them.

Moreover, it will be shown how to move them around the workspace of the edited film and, most importantly, how to make them disappear later :)

And then some people are not laughing when the inability to remove these rulers takes a lot of nerves and time. How and where to set the color, thickness and structure of the grid to suit your current needs.

Download the 11th video lesson

When the program is launched for the first time, all toolbars available in the program are not displayed Macromedia Flash 8 Professional

Where and how to find the necessary panels, what do the items in the most necessary and main Main panel mean, and where are the MOST necessary commands for working with the program.

Happy viewing!


Share with friends or save for yourself:

Loading...