Macromedia flash 8 lessons. Exploring Macromedia Flash. Automated scripting
Any animation or film consists of a sequence of frames. A frame is the smallest part of an animation document or film. Therefore, to create the animation, we first need to create several frames. Flash MX 2004 - Lots of animation tools.
Flash MX 2004 frame types
Key frame - a frame available for processing. In animation, this frame will be displayed as the user draws. On the timeline, a keyframe is displayed as a black circle if there is an image in it, and white if there is no picture.
Normal frame - a frame that will be displayed in the animation, but the user did not directly participate in drawing the frame. It will be the same as the keyframe on the left or, if a storyboard was made, then the frame is automatically generated by the program.
Storyboard - automatic transition of an image from one keyframe to another.
Phantom frame is an empty cell in the timing diagram, in which either a key frame or a regular frame can be set.
By frame formation of the image.
The simplest formation of animation is a frame-by-frame change of the picture, i.e. at each frame the position of the object, its characteristics change, or new objects are added and old objects are removed.
Flash MX 2004 Exercise # 1
Frame-by-frame formation of the picture: at each frame, parts are added to the picture.
Now you can bend the line and get any shape for this shape.
Envelop - displays a rectangular diagram that allows you to change, envelop the shape.
|
|
|
|
After manipulating the line with the Flash MX 2004 tools, I got this shape.
The first frame is ready, in order to continue creating the animation, we need to add more frames. Click on the time bar, the next frame will turn blue. Click on the right mouse button and select Convert to Keyframes from the drop-down menu. After these operations, frame 2, as well as the first, will be indicated by a black circle.
Some notation for frame manipulation in Flash MX 2004: Insert Frame, Remove Frames, Insert Keyframe, Insert Blank Keyframe, Clear Keyframe, Convert to Keyframes, Convert to Blank Keyframes, Gut Frames, Copi Frames, Paste Frames, Clear Frames and Select All Frames - Performs the operations on the frames specified in the command names.
After making a few keyframes, we should get this picture.
When transforming a straight line, you may need to not only bend the straight line, but also resize, that is, freely transform. In Flash MX 2004, you can do it like this.
Move the mouse pointer directly to the line, click right click... Select Free Transform from the drop-down menu. Or from the main menu select Modify \u003d\u003e Transform \u003d\u003e Free Transform. Now you can bend the line and get any shape for this shape.
The sun and the rays are much easier to make, so for self-testing, I suggest you do it yourself.
|
|
|
Now we need to make the crown of the tree green. We won't be able to fill it like a cloud, since it was formed from a closed shape. And the crown of the tree is limited by several lines. It is possible to paint with a brush, but it will not be very convenient.
Flash MX 2004 provides the ability to create multiple layers. Therefore, add a new layer to the background and paint over it in the area of \u200b\u200bthe tree crown.
Creating a new layer
Follow these steps to create a new layer:
1. Select the layer of the document scene, immediately before which the new layer should be located.
2. If you are creating a layer of normal type, do one of the following:
- click on the button Insert Layer (Insert a layer), the first at the bottom left of the layer manager;
- execute the command Insert \u003d\u003e Timeline \u003d\u003e Layer (Insert \u003d\u003e Timeline \u003d\u003e Layer) of the main menu;
- execute the command Insert Layer context menu selected layer.
Drag layer with mouse
To drag a layer with the mouse, follow these steps:
1. Place the pointer in an empty space of the row of the layer to be moved and click the mouse button.
2. Drag the pointer to the place of the layer manager where this layer should be located (between other layers of the document or into a certain folder of layers). This place is indicated by a double dividing line appearing between layers, or by a darkening of the folder icon in the layer folder row. As soon as such a line or folder shading appears in the desired place of the manager, release the mouse button. If a double line was displayed, then the selected layer will be inserted in its location, and if the folder is shaded, the layer will be moved to this folder and placed at its very top.
At each subsequent pixel, freely transform the frame. At the end, you can make a slow movement of the frame. For this, Flash MX 2004 was invented - to facilitate the creation of animation. Create a keyframe. Next by clicking alt key, drag the keyframe 10 frames with the left mouse button and release it. When dragging, a small + sign is appended to the cursor icon. Next, we modify the transferred frame.
Now intermediate changes of the picture are calculated automatically between two frames.
All sections of the site site
download video tutorials on flash
Macromedia Flash 8 video tutorials
You have a great opportunity to view and download 11 video tutorials for work in the program
Macromedia Flash 8 Professional
================
===================
Download the 1st video tutorial
Program interface shown Macromedia Flash 8 Professional
and work with panels, where and which ones are located.
How to enable the desired panels (or disable)
Download the 2nd video tutorial
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 tutorial:
how set properties (for example, enter a name, reaction to a name, etc.) both for standard components and for interactive components you have created.
It also explains which parameter - what it means. It also shows what values \u200b\u200band parameters should be set in the program.
Download the 4th video tutorial
Scripting code is the primary means of creating interactive movies and applications.
How to use it to enter the basic parameters of the components and animation-controlled objects of the film. Where is the editor of this scripted program code.
Download the 5th video lesson
You don't have to create any interactive objects every time. The program has a library of built-in interactive elements.
The video tutorial discusses working with the libraries window. Where and how to find and enable pre-built interactive components, and how to create your own.
Download the 6th video tutorial
Hidden functions programs that can greatly facilitate the work with it and in it :) How and where to find out all the information about the current object or element.
After all, not all objects of a movie or clip 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 tutorial
Where are program toolbars and what they mean how to select actions on graphic objects to change and edit them.
And also, how and where additional palettes of the screen are displayed, where is the working window of the film and the area for editing a film or video.
What is the timeline and where are the properties of objects set.
Download the 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 the 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 Russified version Macromedia Flash 8 Pro and it's nice when you are told from the screen which button is responsible for the stroke, fill or selection.
And if you have an English version of Flash 8 installed on your computer, and you are not very friendly with English, then a very necessary lesson.
Download the 10th video lesson
Grid rulers and graphic guides are essential. Where are they hiding and what command can be called.
Moreover, it will be shown how to move them around the workspace of the edited movie and, most importantly, how to make them disappear later :)
And then some people do not laugh 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 tutorial
When you first start the program, all toolbars available in the program are not displayed Macromedia Flash 8 Professional
Where and how to find the panels you need, what the items in the most needed and main Main panel mean, and where are the MOST necessary commands for working with the program.
Happy viewing!
So far, we've looked at Flash movies that were played without viewer intervention from start to finish. However, Flash also allows you to create interactive applications where 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 you can use it 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, it is necessary to tell about one more type of symbols that we have left without attention until now - these are button symbols. They are a must for building an interactive interface.
Creating buttons
The button is a four-frame interactive movie clip. When we set a symbol to a Button type, Flash creates a timeline of four frames 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 over the button;
Over-state - a frame illustrating the appearance of a 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 pressed;
Hit-state - defines the area in which the button reacts to the mouse click; this area is not visible in the clip.
To create a button, run the command Insert \u003d\u003e 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 Button symbol type.
Flash will switch to symbol editing mode, providing the 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).
Figure: 1. UP button frame
Let's select the second frame, marked as Over and corresponding to the state when the cursor is placed over the button. Let's insert a keyframe in this frame (by the command Insert \u003d\u003e Keyframe), as a result of which a keyframe appears, completely repeating the contents of the Up-frame. Let's change the color of the button as shown in fig. 2.
Fig 2. Button over-frame
Similarly, add the next frame (Down-frame) and draw the pressed state of the button (Fig. 3).
Figure: 3. Down-frame buttons
We will not draw anything in the Hit-frame yet, but we will return to this frame a little later.
Let's go to the main scene, call the library using the Window \u003d\u003e Library command and create an instance of the button symbol by dragging it onto the scene (Fig. 4.)
Figure: 4. Let's create an instance of the button by dragging it from the library
As a result, we get 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 \u200b\u200bthe 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 \u200b\u200bthe button will correspond to the Up-frame.
In order for the button to be pressed only in working area, you need to define this zone in the Hit-frame, that is, draw a button without a frame (see Fig. 5)
Figure: 5. Hit-frame of the button
After we add the required Hit-frame, we will get the next movie, in which pressing the frame does not push the button.
To make a button interactive, it is necessary to associate the fact of pressing the button with the execution of certain commands, that is, to describe a certain scenario. For scripting in Flash, there is a special language 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 elements of a Flash movie. Action Scripts can be embedded in the 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 scenarios are called Frame Action, Button Action, and MovieClip Action.
Action Scripts are executed when certain events are triggered by the user or the system. The mechanism that tells Flash what statement to execute when an 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 basic concepts of Action Script is Actions - commands that issue instructions during the execution of a SWF file. For example, gotoAndStop () sends the playhead (Playhead) to a specific frame or label. The name of the language comes from the word Actions - Action Script (literally - action script). We will get acquainted with most of the concepts of this language on specific examples.
Interactive photo album
Let's demonstrate how to use buttons to control a photo album - create a set of photos and add two buttons that will scroll the photo back and forth.
Place the first photo on the main timeline and add a button from the standard set. To access desired folder should be done windows command \u003d\u003e Control Panels Common Libraries \u003d\u003e Buttons (Fig. 6).
Figure: 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 different types... Let's select, for example, Key Buttons (buttons that look like 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).
Figure: 7. Items in the Key Buttons folder
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).
Figure: 8. Automatic alignment of buttons on the same level
In order to add a script, you need to call the Action Script editor by the command Window \u003d\u003e Development Panels \u003d\u003e Actions 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).
Figure: 9. Panels of the Action Script editor
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 prompts you on which element you can "hang" code on. If you select a frame on the scene, then in the upper left corner of the editor panel appears the inscription Actions - Frame, if you click on the button, then the inscription Actions - Button will appear, that is, the program prompts that the entered code will refer to the script of the button. And if you select a photo, then in the field intended for entering a script, a 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. AT latest versions ActionScript has the ability to write centralized code, that is, code that lives 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 valid.
So, for the button with the left arrow, we need to formalize the following scenario: "If the button is released on a certain frame, then from this frame it is necessary 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 key frames so that the buttons created in the first frame are copied into them, and place the necessary photos in the newly created frames.
If we launch the created movie for execution, the frames will be played continuously one after the other, and therefore, first of all, we need to give the “Stop” command on the first frame. To do this, add the appropriate command to the first frame (Fig. 11).
Figure: 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 script has been assigned to the frame is noted on the main timeline - a lowercase letter “a” appears above the bold point in the frame designation.
As a result, we got the following movie.
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 also buttons that send to the beginning and end of the film. In the next example, we will add the corresponding buttons: "To the first frame" and "To the last frame". You can select the buttons of a suitable mnemonic from the standard library of buttons from the Circle Buttons folder (Fig. 12).
Using this example, we will familiarize ourselves with another command gotoAndStop (), which allows you to go to the desired frame and then stop.
Figure: 12. Buttons from the Circle Buttons folder
On the button to go to the first frame (the third from the left in Fig. 13) we will add the code, as shown in Fig. thirteen.
Figure: 13. Scenario for the button "To the first frame"
In the case of a photo album of five frames, add the transition script "To the last frame" to the last button:
Automated scripting
Until now, we have typed all the commands manually, but the ActionScript editor panels provide a variety of automated scripting services. Let's consider these possibilities.
Figure: 14. Automated scripting tools
The Action Script Editor pane lets you select, drag and drop, rearrange, and delete commands.
Let's show how you can write the same script for the "Forward" button in automated mode. Selecting the Movie Clip Control folder (top left window in Fig. 14), you can access the on event handler, and then either double-click on the corresponding item or drag the expression onto the script writing field in Drag and Drop mode.
Figure: 15. Hint for Completing Expression
As a result, the necessary expression and a hint of the form will appear on the working field (Fig. 15): 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 - you can also select from the menu fig. 15 clause keyPress “
Figure: 16. Accessing a Keypad Button
Using the keyPress command “
Figure: 17. The nextFrame command can be found in the Timeline Control folder
For the button that transfers 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 one more hint on the possible syntax of this command will appear.
The arrows in the tooltip show you the different syntax options. The program provides two options (Fig. 18 and 19), that is, it offers to set a scene and a frame, or just a frame. In our case, it is enough to specify only the frame (Frame). If the name of the scene is omitted, then by default the transition to the frame of the current scene is performed.
Figure: 18. Hint on possible command syntax
Figure: 19. Arrow triangle allows you to view syntax options
After we assign all buttons the appropriate keyboard buttons, we will get the next movie, where the paging of photos will take place from the keyboard, and clicking 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 must enumerate the list of event names. If you put a comma in the list of events after the first event, the program itself will offer you a menu (Fig. 20).
Figure: 20. When you enter a comma in the list of events, a menu of additional commands automatically appears
Add a second event to the first event (pressing the keyboard button) (releasing the on-screen button):
on (keyPress " |
Let's repeat the procedure for the rest of the buttons and as a result we will get a photo album, in which the paging of photos will be done both with the mouse and with the keyboard (the original FLA file can be obtained from the link).
In the considered example, we used a transition by frame number, but this method is not always convenient: if the frame numbering changes during the editing process, the logic may be broken. It is more convenient to use transition by frame mark. Consider 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 photos.
The first frame of the "pictures" section will be labeled Pictures, similarly to the first frames of the other sections we will assign the labels graphics and photo.
Create a label placement layer and name it Lables. In order to put a label on a frame, in the Properties panel, select the type of label Name and write down its name. In our case, Pictures (Fig. 21). Place the labels in the same way in frames 5 and 10 (Fig. 22).
Figure: 21. An example of assigning a label to a frame
Now add a new layer and name it Actions. In the first keyframe of the Actions layer, call the Actions Frame panel (by pressing the F9 button) and type the stop () command (see Fig. 22)
Figure: 22. Scenario of the first frame
Let's add another layer called Subjects, in which we will give titles to the corresponding frames: "Pictures" (Fig. 23), "Graphics" and "Photos".
Figure: 23. Title for the frames of the "Pictures" section
Now add on the side of the menu buttons with the same names, 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 \u003d\u003e Convert to Symbol command (you can also execute this command using the F8 key), in the Convert to Symbol panel, set the Button symbol type and define its name as pictureButton (Fig. 24 ).
Figure: 24. Assign the name of the pictureButton to the button of the transition to the section of pictures
Let's create four frames for the "Pictures" button: the first one 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 will draw a rectangular area that will define the area of \u200b\u200bpressing the button (Fig. 26).
Figure: 25. Up-frame of the pictureButton
Figure: 26. Hit frame of the pictureButton
Now we need to hang the script on the newly created button. To do this, select the button in Scene 1 and, by pressing F9, call the Actions panel, and then add the code shown in Fig. 27.
Figure: 27. Scenario of transition to a frame with a label
Despite the fact that most of the training resources are designed specifically for the English-language version, we will consider the Russian-language version, since there is a crack in the Macromedia Flash 8 package to facilitate work.
Figure 1.3.1 - Macromedia Flash 8 editor window with an unopened document
In Figure 1.3.1, we see the window just running editor with inactive toolbars until a document is created or opened, and a menu bar. The window shows a screen with a proposal to open the last edited documents, create new document and create from prepared samples. Also on this screen there are links to training flash resources and a checkbox for disabling the display of this very screen when the editor starts. If you check this box, Flash will start without a welcome screen and wait for your actions with an empty workspace.
Figure 1.3.2 - Window of the editor Macromedia Flash 8 with an unopened document
Figure 1.3.2 shows the window of a newly launched editor with inactive toolbars until a document is created or opened, and a menu bar. The window shows a screen with a proposal to open the last edited documents, create a new document and create from prepared samples. Also on this screen there are links to training flash resources and a checkbox for disabling the display of this very screen when the editor starts. If you check this box, Flash will start without a welcome screen and wait for your actions with an empty workspace.
Layers
Like other graphic editors more powerful than MS Paint, Macromedia Flash works with layers. Layers can be created, organized (including being aware of folders, thus organizing a hierarchy), deleted, toggled visibility, and rearranged in the left pane of the Timeline using the appropriate buttons. The upper layers in the list overlap the lower ones in the picture. Only one animation can be created on one layer.
Animation
There are two types of animation in flash: movement and transformation.
When transforming a shape, you can control the transformation itself and the color change. Doesn't work with symbols and groups
When moving, you can change the hue, opacity and size. Requires a character or group in keyframes.
Special layers
Flash 8 highlights guide layers, layer masks, and path layers.
The simplest type of special layers in Flash are the so-called guide layers. Their sole purpose is to help with drawing different objects and placing flash symbols.
Masks can have non-transparent areas of arbitrary shape, through which the masked layers will be visible, the part of the masked layer that is under the transparent part of the mask layer will be hidden behind a solid fill. Masks can participate in animation. Typically used to showcase a portion of an image, or to make a masked layer appear or slip dramatically.
Path layers are a very powerful tool for creating animations in Flash. Flash technology allows you to set the trajectories of objects graphically, simply "drawing" them on the screen, and it is possible to set the orientation of the moved object relative to the path. The path layer is called the master, the layer attached to the path is the slave.
Symbols
Flash distinguishes between three types of symbols: Movie Clip, Button, Graphic. These are not exactly symbols in the usual sense. The first and most common of these is the Movie clip. Please note that the main video can contain as many other videos as you want! This type of flash symbol is commonly referred to as a "clip" in the development community. This word has become quite common. So much so that many consider it to have moved from slang words to the number of established terms. A clip can contain any elements that the main movie may contain. In general, it is a separate film living its own life. For example, stopping playback of the main video does not affect the playback of clips in any way. The second type of flash symbol, also widely used, is the Button. A button is a special object focused on interactivity: it is usually assumed that the user "clicks" the button with the mouse and something happens. When the user hovers the mouse over the button, it changes its shape to a "foot", just as it traditionally happens when the mouse hovers over a hyperlink in a browser. True, this does not mean that anything will happen when you press the button in the video. To make the button "live", it is necessary to program the actions that are performed when it is pressed (as well as released, etc.). And finally, the third type of flash symbol is called a graphic object, or simply a graphic. Do not think that such objects contain only static graphics. They can also contain animation, but unlike movie clips, they are always synchronized with the main movie (or "parent" clip, if the graphics are located inside it). If, for example, the main video stops playing; stops and animation in all graphic objects located in it.
Buttons differ from the previously considered symbols in their timeline. It has 4 frames - up, over, down, hit. The content of each of these frames corresponds to the state of the button at events, respectively: 1 - the mouse cursor is outside the button, 2 - the mouse cursor is over the button and the mouse buttons are not pressed, 3 - the mouse cursor is hovering over the button, left button pressed, 4 - selection of a shape, in the presence of the cursor over which the button will work (it may not coincide with the image of the button either in shape or in position). macromedia flash action script
All symbols in the movie are placed in the movie symbol library. The symbol contained in the library is called the pattern. A sample placed on the document work area is called an instance. Instances are beneficial when many copies of a symbol are required. True, when the sample is changed, all copies will automatically change to the updated one. Instances are very limited in customization. They can change brightness, shade, transparency. You can also assign a behavior to an instance as a clip, button, or graphic, regardless of what type it actually is. The library allows you to catalog samples (folders are allowed), create, import, delete and even replace one sample with another. Let's move on to Action Script.
