All sections of the site site
download flash video tutorials
Video tutorials Macromedia Flash 8
You have a great opportunity to watch for FREE and download 11 video lessons on working in the program
Macromedia Flash 8 Professional
================
===================
Download 1st video lesson
Program interface shown Macromedia Flash 8 Professional
and working with panels, where and which of them are located.
How to enable the desired panels (or disable them)
Download video lesson 2
What interactive components are in the program and how you can immediately start using them.
How to create NEW interactive objects and components in the program - buttons, checkboxes, radio buttons and other bells and whistles.
Download video lesson 3:
How set properties(for example, enter a name, reaction to the name, etc.) both standard components and newly created interactive components.
It also explains what parameter it means. It also shows what values and parameters need to be set in the program.
Download video lesson 4
Scripting program code is the main means of creating interactive films and applications.
How to use it to enter the basic parameters of components and animation-controlled objects of the film. Where is the editor of this script code located?
Download video lesson 5
It is not necessary to create any interactive objects every time. The program has a library of built-in interactive elements.
The video tutorial discusses working with the library window. Where and how to find and enable already built-in interactive components, as well as how to create your own.
Download video lesson 6
Hidden features programs that can greatly facilitate working 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 film or video 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 video lesson 7
Where are they located? 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 working window film and area for editing a film or video.
What is a time scale and where are object properties set?
Download video lesson 8
About the purpose and functions of the main menu of the Macromedia Flash 8 Professional program - what and why there are sections in the main menu.
Download video lesson 9
What sections does the toolbar consist of and which buttons what they are responsible for.
This is very important, since there are a lot of buttons and even if you have the 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’re not very good with the English language, then this is a very necessary lesson.
Download video lesson 10
Mesh rulers and guides for working with graphics are a must. Where are they hiding and what command can you call them with?
Moreover, it will be shown how to move them around the workspace of the film being edited and, most importantly, how to then make them disappear :)
Otherwise, some people have no time for laughter 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 video lesson 11
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 necessary panels, what the items in the most necessary and main Main panel mean, and where the MOST necessary commands for working with the program are located.
Enjoy watching!
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 this film, pressing a 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 script writing language - set of instructions, which control Flash movie elements. 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 should be done 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 gives a hint ( dotted line), which allows you to accurately position the button (Fig. 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 inscription Actions - Frame appears in the upper left corner of the editor panel; if you click on the button, the inscription 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 way. 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 “
Rice. 16. Keyboard button calls
Let's use the keyPress command
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" |
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 keyframe Actions layer, call the Actions Frame panel (by pressing the F9 button) and type 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
Macromedia Flash MX 2004 provides several ways to create animation sequences:
Animation effects - the program itself creates a sequence of frames that simulates a particular effect in relation to a certain object;
Frame-by-frame animation - the user creates each frame of the future animation;
Automatic tweened animation, or transformation animation, - the user specifies the starting and ending frames, and the program itself creates intermediate frames based on software interpolation.
Animation effects
Flash MX 2004 includes pre-built animation effects (timeline effects) that let you create complex animations with a minimum number of steps. You can use the function Timeline Effects to the following objects:
Graphic objects, including shapes, grouped objects, and graphic symbols;
Raster images;
When you add animation effects to an object, Flash automatically creates an appropriate layer, and all the motion and shape transformations needed for that effect are implemented in that layer. The new layer is automatically given the same name as the effect.
As an example, let's create an “explosion” effect on text. To do this, type some phrase or word (Fig. 1), select it using the Arrow tool and execute the command Insert => Timeline Effects => Effects => Explode.
Rice. 1. Selected text object
As a result, a panel of the same name will appear (Fig. 2), providing the ability to configure a number of effect parameters.
Rice. 2. Explode panel
The presence of a preview window allows you to analyze different variations of effects without leaving the panel Explode. After you choose required parameters, press the button OK and you will get something like this animation.
Similar effects can be applied to a raster image. Let's consider an example with the smooth disappearance of a raster image. Importing a bitmap into the scene using a command File => Import => Import to stage(Fig. 3) and apply the Blur effect on command Insert => Timeline Effects => Effects => Blur video clip .
Rice. 3. Raster image, imported into the scene
To edit an animation effect, select the object associated with the effect on the stage, and in the window that appears Properties click the button Edit(Fig. 4) - as a result, a panel will appear Blur.
Rice. 4. Button Edit located at the bottom of the panel Properties
In the panel Blur you can change the effect parameters again and save the new settings (Fig. 5).
Rice. 5. Panel Blur allows you to change effect settings
Stop motion animation
Let's consider the simplest example - a piece of paper moves from one point on the screen to another, rotating around its axis.
Rice. 6. First keyframe of the animation
Let's draw a maple leaf, for example, as shown in Fig. 6, - corresponding frame on the panel Timeline will turn gray and a dot will appear inside it, indicating that this is a keyframe. A key frame is a frame at which content is placed or changed.
Rice. 7. Create the second frame by dragging and transforming the first
Then click right click mouse over the adjacent frame and insert another key frame using the command Insert Keyframe. As a result, a copy of the leaf will appear in this frame; move it down (using the Arrow tool) and rotate it using the command Modify => Transform => Free Transform(Fig. 7).
Let's repeat the procedure so that in the 6th frame the sheet occupies its final position (Fig. 8).
Rice. 8. Last frame of animation
Pay attention to the panel Properties(Fig. 8) - the type of object is indicated on the left side. In each frame, the leaf is an object of type Shape(form), other types of objects will be discussed a little later.
To export a movie as a SEF file (Macromedia's native format for Flash movies), run the command File => Export => Export Movie. As a result, we get the following movie leave1.fla). You can view the resulting movie without leaving the Flash program by command Control => Test Movie. Moreover, in order to view how much space is occupied by individual frames of the film, you should run the command. As a result, we will see that each of the six frames takes up about 600 KB (Fig. 9). Thus, the size of the entire movie is 3686 bytes.
Rice. 9. Watching a movie in Bandwidth Profiler
In order to evaluate whether this is a lot or a little, consider how a similar film can be made using automatic animation, or motion transformation animation.
Automatic animation
Rice. 10. The object automatically turns into a graphic symbol
Let's look at how you can do the same animation and get a more compact resulting file. Select the drawn leaf on the screen with the Arrow tool and execute the command Insert => Timeline => Create Motion Tween, as a result, the leaflet will be placed in a frame, and in the panel Properties a message will appear that the selected object has properties Graphic(Fig. 10). This means that the animated object is automatically converted into a graphic symbol. Now it is no longer possible to arbitrarily edit it with the Arrow tool as an object of the Shape type. The use of symbols is important concept in Flash. Once a symbol is created, it can be used multiple times in a movie without increasing the size of the resulting file. Symbols are divided into graphic symbols, button symbols, and movie clip symbols. In this lesson we will look at a graphic symbol, and we will return to other types of symbols later. Every new symbol immediately becomes part of the library of the current document (Fig. 11).
Rice. 11. Each new symbol becomes part of the library
If you run the command Window => Library, then you can make sure that a symbol has appeared in the library and is assigned the name Tween 1 by default. In order to assign a different name to a symbol, just double-click on the name and replace it with the desired one. After we have formed the graphic symbol, let's go to the final frame of our animation (let it be the 15th frame) and insert a key frame (using the Insert command Keyframe). A copy of the symbol will appear in this frame, which we will move and rotate around its axis (using the command Modify Transform=>Free Transform), as in the previous example. As can be seen from Fig. 12, all frames between two key frames are colored blue and an arrow stretches from the first key frame to the last, which indicates the creation of animation Motion Tween.
Rice. 12. An arrow on a blue background indicates the creation of animation Motion Tween
By executing the command Control => Test Movie, we obtain the information presented in Fig. 13.
Rice. 13. Watching a movie in Bandwidth Profiler mode
Despite the fact that in this example we have 15 rather than six frames, as in the previous one, and the animation is smoother, the size of the resulting file is smaller - only 900 bytes. As can be seen from the diagram (Fig. 13), information about the object is stored only in the first frame, and in each new frame it is necessary to remember only the new positions of the sheet. This takes on average only 20 bytes.
In order to illustrate the fall of a sheet with rotation around the plane of the sheet, we repeat the previous example, only when modifying the last key frame we add the command Modify => Transform => Flip Horizontal. As a result, we get the following film.
Now let's look at an example when a leaf approaches the viewer. To do this, in the final frame, instead of mirroring ( Flip Horizontal) we will increase the size of the sheet. In order to avoid the feeling of slowing down when an object approaches the viewer, the speed of its movement must be increased. In order to achieve this effect, you need to click on the first frame and refer to the section Ease in the panel Properties. Positive values for the Ease parameter cause movement to slow down, while negative values cause movement to speed up. Let's choose the maximum acceleration of the object.
Rice. 14. Select the maximum acceleration of the object Ease = -100
To do this, set the value of the parameter Ease equal to -100 (Fig. 14). The result is a movie. Note that the first frame can also be placed behind the stage, then we will get a film in which the leaf will fly into the frame and move towards the viewer. You can simulate the rotation of a sheet around a displaced center of symmetry. I hope the reader himself will be able to experiment, making it more difficult to modify the final frame and thus changing the nature of the movement of the sheet.
From the presented examples, it is obvious that automatic motion animation is effective when the transformation of an object during its movement is specified by simple functions (rotation, scaling, etc.). If it is necessary to animate complex movements (for example, the movement of a cartoon character’s hand), then motion transformation animation is not applicable. Each frame has to be drawn manually, that is, frame-by-frame animation is used, consisting of a set of key frames. Thus, frame-by-frame animation is the most versatile, but at the same time the most labor-intensive type of animation, in addition, it creates the most “heavy” files. Whenever it is possible to replace frame-by-frame animation with automatic animation, this is preferable. Let's look at a number of examples that allow you to use automatic motion animation when simulating a flight.
Movement along a given trajectory
Flash allows you to set the movement of an object along a given path. To set this trajectory, run the command Insert => Timeline => Motion Guide.
As a result, a special layer will appear above the current layer, which by default will have the name Guide Layer 1.
Let's click on the trajectory layer and use the pencil tool to draw a line along which we plan to move the sheet (Fig. 15).
Rice. 15. Example of specifying a motion trajectory
Now let's go to the first frame (click on it with the mouse) and in the panel that appears Properties check the box Snap(sets the mode of snapping to the movement trajectory) - fig. 16.
Rice. 16. Parameter Snap sets the mode of snapping to the motion trajectory
After you check the box Snap, the center of the sheet will align with the trajectory of movement. Using the Arrow tool, you can move the leaf along the motion path, but if you try to tear the sheet off the path and place it next to it, it will be pulled back and “stick” to the motion path again (Fig. 17).
Rice. 17. The object seems to stick to the trajectory of movement with its center
Go to the last frame and similarly tie the sheet to the end point of the movement path. To give the film volume, add transformation Flip Horizontal, - as a result we get the film .
When a sheet moves along a trajectory, it does not matter to us how it will be rotated in the direction of movement. But if we similarly set the flight path of a bird, then in some parts of the curve it turns out that the bird flies tail first.
Obviously, if we want to animate the flight of an airplane or a bird, then we need it to move nose forward at all times. In Flash, this type of movement is very easy to set (Fig. 18).
Rice. 18. If you check the box Orient to Path, the bird will fly head first
Checkbox required Orient to Path, and the bird’s movement will change to a completely familiar one (the source for this video is the flight of a bird.fla).
Rice. 19. Adding a single-color background
If you want to add a single-color background, click on the background and in the panel that appears Properties(Fig. 19) in the field Background select the desired background color.
If we want to add a background image, we will need a separate layer for this. In principle, Flash offers the ability to create a layer system similar to those used in classical animation, in which the background and various moving objects are drawn each on their own layer of transparency.
By placing background image and each animated object on its own layer, it is much easier to achieve control over them. So, in order to add a background image, let's create a new layer for it. To do this, right-click on the layer shown in Fig. 19 is designated as layer 1, and in the drop-down menu select the line Insert layer. In the added layer draw the sun. In order not to get confused in the layer numbers, let's give the layer the name “background”. To do this, click on the current name and enter the required name (Fig. 20).
Rice. 20. On a new layer, create a stationary background object
As can be seen from Fig. 20, the bird is behind the sun, which is contrary to common sense. In order to swap layers, just use drag-and-drop mode to drag the layer named “background” down.
Let's edit the objects of the film (so that the bird circles against the background of the sun, change the trajectory of its flight and change the ratio of the sizes of the sun and the bird) and get the following video.
Rice. 21. To animate the cloud, create a separate layer
Now let's add moving objects to our animation, for example a cloud. For the cloud, create a new layer and set the motion transformation animation on it. In order for the cloud to fly into the scene, we will position it as shown in Fig. 21. As a result, we get the following movie (the source for this movie is in the attached file
Despite the fact that most training resources are designed specifically for the English version, we will consider the Russian version, since to facilitate work in the Macromedia Flash 8 package there is a localization language.
Figure 1.3.1 - Macromedia Flash 8 editor window with an unopened document
In Fig. 1.3.1 we see the window of the newly launched editor with inactive toolbars until a document is created or opened, and a menu bar. The window shows a screen asking you to open the last edited documents, create new document and create from prepared samples. Also on this screen there are links to educational flash resources and a checkbox to disable the display of this very screen when starting the editor. If you check this box, Flash will launch without an invitation screen and wait for your actions with an empty workspace.
Figure 1.3.2 - Macromedia Flash 8 editor window with an unopened document
Figure 1.3.2 shows the newly launched editor window with the toolbars inactive until a document is created or opened, and the menu bar. The window displays a screen asking you to open the most recently edited documents, create a new document, and create one from prepared samples. Also on this screen there are links to educational flash resources and a checkbox to disable the display of this very screen when starting the editor. If you check this box, Flash will launch without an invitation screen and wait for your actions with an empty workspace.
Layers
Like others graphic editors More powerful than MS Paint, Macromedia Flash works with layers. Layers can be created, organized (including creating folders, thus organizing a hierarchy), deleted, toggle visibility, and change the stacking order in the left area of the Timeline panel using the appropriate buttons. The layers at the top in the list overlap the layers at the bottom in the picture. Only one animation can be created per layer.
Animation
There are two types of animation in Flash: movement and transformation.
When transforming a figure, you can control the transformation itself and the color change. Doesn't work with symbols and groups
As you move, you can change the hue, transparency, and size. Requires that keyframes contain a symbol or group.
Special layers
In Flash 8, there are guide layers, mask layers, and path layers.
The simplest type of special layers in Flash are the so-called guide layers. Their only purpose is to help with drawing various objects and placing flash symbols.
Masks can have opaque areas of arbitrary shape through which the masked layers will be visible; the part of the masked layer that is located under the transparent part of the mask layer will be hidden behind a solid fill. Masks can participate in animation. Typically used to show part of an image or to make a masked layer appear or slip through effectively.
Path layers are a very powerful tool for creating animation in Flash. Flash technology allows you to set the movement trajectories of objects graphically, simply by “drawing” them on the screen, and it is possible to set the orientation of the moving object relative to the path. The path layer is called the leader, the layer attached to the path is the slave.
Symbols
There are three types of symbols in Flash: Movie Clip, Button, Graphic. These are not exactly symbols in the usual sense. The first and most common of them is a Movie clip. Please note that the main video can contain as many other videos as you like! This type of flash symbol is commonly referred to as a "clip" in the developer community. This word has become quite frequently used. So much so that many consider it to have moved from slang words to established terms. A clip can contain any elements that a main video can contain. In general, it is a separate film that lives its own life. For example, stopping the playback of the main video does not affect the playback of the clips. The second type of flash symbol, also widely used, is a Button. The button represents special object interactivity-oriented: it is usually assumed that the user "presses" this button with a mouse click and something happens. When the user hovers the mouse over the button, it changes its shape to a “claw”, just as it traditionally does when the mouse hovers over a hyperlink in a browser. True, this does not mean that when you press the button in the video, anything will happen. In order for a button to become “live”, it is necessary to program the actions that are performed when it is pressed (as well as released, etc.). Finally, the third type of flash symbol is called a graphic object, or simply a graphic. You should not think that such objects contain only static graphics. They can also contain animation, but unlike movies, they are always synchronized with the main video (or “parent” clip if the graphics are located inside it). If, for example, the playback of the main video stops; The animation in all graphic objects located in it also stops.
Buttons differ from previously discussed symbols in their timeline. It has 4 frames - up, over, down, hit. The contents of each of these frames correspond to the state of the button during the events, respectively: 1 - the mouse cursor is outside the button, 2 - the mouse cursor is above the button and the mouse buttons are not pressed, 3 - the mouse is pointed at the button, the left button is pressed, 4 - selection of a figure, in the presence of the cursor over which the button will work (may not coincide with the image of the button either in shape or position). macromedia flash action script
All symbols present in the video are placed in the video symbol library. The symbol contained in the library is called a pattern. A sample placed in the document workspace is called an instance. Using instances is beneficial when many copies of a symbol are needed. True, if the sample changes, all copies will automatically be replaced with the updated one. Instances are highly customizable. You can change their brightness, hue, and transparency. You can also assign a behavior to an instance such as a clip, button, or graphic, regardless of what type it actually belongs to. The library allows you to catalog samples (folders are allowed), create, import, delete, and even replace one sample with another. Let's now move on to Action Script.
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 this film, pressing a 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 in an external text file with an AS extension.
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 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 from all previous versions of 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, run the command Windows => Control Panels Common Libraries => Buttons (Fig. 6).
Rice. 6. Add a button from the standard library
As a result of executing this command, a panel will appear containing a large set of pre-drawn buttons 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. 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 inscription Actions - Frame appears in the upper left corner of the editor panel; if you click on the button, the inscription 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. Recent versions of ActionScript offer 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 is what we're looking at), assigning a script to a button is perfectly 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 way. 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 “
Rice. 16. Keyboard button calls
Let's use the keyPress command
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 the corresponding keyboard buttons to all the buttons, we will get the following movie, where flipping through photos will take place 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 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" |
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
Loading...
