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 in which the user can control the display 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 elements of an interactive interface. 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. To build an interactive interface, they are simply necessary.
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 it is 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 => 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).
Rice. 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 => Keyframe), as a result of which a keyframe will appear that completely repeats the contents of the Up-frame. Let's change the color of the button as shown in fig. 2.
Fig 2. Over-frame of a button
Similarly, add the next frame (Down-frame) and draw the pressed state of the button (Fig. 3).
Rice. 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 => Library command and create an instance of the button symbol by dragging it onto the scene (Fig. 4.)
Rice. 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 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 area in the Hit-frame, that is, draw a button without a frame (see Fig. 5)
Rice. 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 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 elements of a Flash movie. Action Scripts can be embedded in the movie or stored in an external text file with the 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 from all previous versions of 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 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 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).
Rice. 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).
Rice. 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 => Development Panels => 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).
Rice. 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 the script, a message will appear: Current selection cannot have actions applied to it (the script cannot be applied to this selected object).
We will be assigning a script to a button. In recent versions of ActionScript, you have 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 the simple examples (which we are looking at), assigning a script to a button is fine.
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 keyframes so that the buttons created in the first frame will be copied into them, and place the necessary photos in the newly created frames.
If you start 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).
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 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 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.
Rice. 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. 13.
Rice. 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
So far, we have typed all the commands manually, but the ActionScript editor panels provide a variety of automated scripting services. Let's consider these possibilities.
Rice. 14. Automated scripting tools
The Action Script Editor pane allows you to select, drag and drop, reposition, 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.
Rice. 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 “
Rice. 16. Accessing a Keypad Button
Using the keyPress command “
Rice. 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 another 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.
Rice. 18. Hint on the possible command syntax
Rice. 19. The triangle arrow allows you to browse the syntax options
After we assign all the buttons to the corresponding keyboard buttons, we will get the next movie, where paging 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 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).
Rice. 20. When you enter 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 " |
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 take place 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 of the movie, 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 photographs.
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 mark on a frame, in the Properties panel, select the Name type of mark 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).
Rice. 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)
Rice. 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".
Rice. 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 => 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 ).
Rice. 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 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
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.
Rice. 27. Scenario of transition to a frame with a label
Have you ever wondered what is hidden behind the beautiful animation of banners on the Internet? Or newfangled cartoons created using computer technology? Most often, they are based on "flesh", or rather, this is how the name of the Flash technology is translated from English. Today we will talk about flash animation for the site:
Flash technology
The multimedia framework was developed by Macromedia. But after its acquisition (merger), all rights to the technology were transferred to the new owner - Adobe Systems.
The area of modern use of Adobe Flash:
- Creation of web applications is a fairly new direction. Includes full or partial use of Flash to create websites. In partial application, using this technology, individual design elements are created: various interactive menus, animated buttons, etc.
Compared to conventional html-based resources, flash sites have some features that limit their use. This includes the high cost of development, demanding server resources, long download times with a slow Internet connection, and some other aspects:
- Implementation of multimedia capabilities - for listening to audio and playing video on sites, media players created on the basis of Flash are often used. Their development includes the use of one of the scripting languages (more often JavaScript):
- In online advertising, the technology is most often used to create animated banners. They imply not only the playing of multimedia ads, but also some kind of interaction with the user based on a game.
Flash development basics and tools
To create Flash animations, the traditional tools from Adobe are most often used:
- Adobe Flash Professional - a program for creating interactive animation (animator);
- Adobe Flash Builder - an environment for creating a web application interface;
- Adobe Flash Player is a browser-integrated player for playing Flash.
In addition to it, a number of third-party applications can play this type of multimedia content. The most popular of these are Gnash, QuickTime, and a few others:
This technology allows you to display any type of graphics ( raster, vector, 3D). And also supports streaming audio and video data. A light version of Flash Lite has been developed specifically for mobile devices.
The main standard for Flash files is the SWF extension. The abbreviation stands for Small Web Format. Video recorded in Flash has file extensions FLV, F4V.
Vector graphics are at the heart of the development of interactive animation on Flash. It was thanks to this that it was possible to implement support for the multimedia platform and the independence of the animation quality from the screen resolution.
The file size of the Flash application is the same for all users regardless of the screen specification (resolution).
Flash interactive animation is based on morphing (vector type), in which there is a slow flow between keyframes. To play the data, a flash player is used, the operation of which is in many ways similar to the operation of the JavaScript virtual machine. The software component of the technology is implemented using the ActionScript language.
The disadvantages of the technology include the following points:
- Heavy load on the central processor of the client machine. This is due to the low efficiency of the flash virtual machine, which is embedded with the player into the user's browser;
- High probability of errors - Flash animation can be played with a high probability of errors. Moreover, failures in Flash playback negatively affect the operation of the entire client application (browser). This is due to insufficient control of the fault tolerance of the program code when creating flash applications;
- Failure to index - All text content displayed in Flash content does not participate in the indexing process. This limitation is especially problematic for those resources that are based on this technology.
Overview of Third Party Flash Creation Software
Sothink SWF Quicker was taken as a prototype application for demonstrating the basics of creating Flash. According to many professionals, the program is the most understandable and easiest to learn.
In addition to creating and editing, the flash editor "knows" how to work with all other types of web animation (GIF, HTML and other standards):
After installation, go to the friendly interface of the program. Unfortunately, after wandering through all the nooks and crannies of the interface language switcher, we did not find it.
In order to understand how to make Flash animation in this application, we will use the built-in templates. The "New From Template" dialog box appears immediately after starting the program. In addition, it can be called through the main menu item "File". Among the proposed options, we have chosen to create a banner:
In the next window of the wizard, from the drop-down list, you need to select a template according to which the animation will be created. Below it is a small frame in which the selected template is played:
In the next steps, you need to set the dimensions of the banner and enter 5 phrases of text that will be played in the animation. In addition, you must specify the address of the resource to which the user will be led by clicking on the banner:
After compiling the project and closing the wizard window, you can view the resulting video in the built-in player. To do this, click on the green arrow at the top:
After closing the player, let's take a closer look at the application interface. Please note that it consists of two main windows: the upper one is intended for editing the time interval of the video, and the lower one is a normal graphics editor. Each of the elements is located on a separate layer, which can be modified using standard tools located on the sidebar.
Using scenes
As you know, Flash allows you to create fairly complex films that can contain interactive elements, animation, clips, etc. Naturally, there is a need to store and search for various elements of the film. If you are working on a large and complex project, it is advisable to split it into several manageable fragments, each of which contains a specific sequence of events (animation, interactive dialogue with the user, etc.). This will make it possible to significantly simplify the work. Scenes play the role of such fragments in Flash movies. They are logically complete miniature films that together make up a single Flash movie. When creating large projects, using scenes can significantly save time.
What is a scene
Scene creation is an effective technique that allows you to divide a specific project into separate manageable chunks. Each scene, as already mentioned, is a miniature film. The number of scenes used in a Flash movie is limited only by the amount of computer memory. Scenes are played sequentially, in the order specified in the Scene panel, and while being independent, at the same time closely related. During playback, there is never a noticeable delay between them. The possibilities for using the scenes are varied and almost limitless. For example, while working on a Web site project, you might implement sections and subsections as scenes. Recently, short animated Flash films, the content of which can be divided into logical parts by means of scenes, have become increasingly popular on the Web.
Scene panel
The list of scenes contained in the movie is accessed through the Scene panel.
on), which opens when you call the command Window> Design Panels> Scene (Window> Design Panels> Scene). This panel allows you to view a list of available scenes
and set the order of their playback in the movie - it is determined by the order of the scenes in the list. In addition, using the Scene panel, you can duplicate, add, delete and move scenes within the list.
The Options menu of the Scene panel contains only three commands: Maximize Panel, Close Panel, and Help.
Scene panel
Edit panel
The Edit panel is located above the timeline, below the main program menu. To open the panel, use the Window> Toolbars> Edit command. You have already used this panel when working with the Symbol Editor window to exit symbol editing mode (see Chapter 6). In this section, we will discuss the functionality of the Edit panel related to working with scenes.
The Edit panel contains the name of the current scene (in the figure, the current scene is Scene 2). You can switch to another scene using the Edit Scene button located on the right side of the Edit panel, and the name of the selected scene will be displayed on the line. The functionality of the Edit Scene button is described in the "Switching Scenes" section.
Edit Scene Button Menu
Scene creation and manipulation
As mentioned, the Scene panel, which you open with Window> Design Panels> Scene, is for working with scenes. In this section, you will learn how you can use this panel to add, duplicate, rename, and rearrange scenes.
Add a scene
As the complexity of your project grows, you will constantly have to add new scenes to distribute logical chunks of its content. You can do this using the Scene panel. To add a scene, follow these steps.
Make sure the required document is open. Select Window> Design Panels> Scene to open the Scene panel.
Click on the Add Scene button located in the lower right corner of the panel, or call the Scene command on the Insert menu. After these actions, the name of the new scene will appear in the Scene panel window. By default, each new scene is named with a sequential number that is one more than the name of the currently selected scene (for example, Scene 1, Scene 2, etc.). The name is placed in the list accordingly.
Select a new scene in the Scene panel and create its contents. When you create a new scene, Flash switches to it automatically.
List of scenes in the Scene panel
Deleting a Scene
You can delete a scene this way.
Open the Scene panel by going to Window> Design Panels> Scene. Select the scene you want to delete.
Click on the Delete Scene button located in the lower right corner of the panel. To confirm deleting the scene, click on the OK button in the dialog box that opens.
Duplicating a scene
In the previous chapters, we have already talked about creating duplicates of various elements. As for copying an animation, and even more so a complex project with a large number of scenes, this process would be quite cumbersome without the duplicate function, which allows you to create exact copies of any scene by pressing just one button.
Open the Scene panel by going to Window> Design Panels> Scene and select the scene you want to duplicate.
Click on the Duplicate Scene button located in the lower right corner of the Scene panel.
The Scene panel window will display the name of the duplicate scene. Note that it consists of the name of the original scene and the word soru (copy).
Duplicate scene
Renaming scenes
Since the default names assigned to duplicates and new scenes differ only in the sequence number, it is difficult to identify the scene when searching for specific content. Therefore, in large projects, it is advisable to assign special names to scenes that characterize their content. Renaming a scene shouldn't take much of your time.
Open the Scene panel by choosing Window> Design Panels> Scene and double-click the scene name you want to change. In this case, it will be possible to edit the name of the scene.
Enter a new name and press the Returt / Enter key, or double-click outside the Scene panel.
Renaming a scene in the Scene panel
Changing the order of the scenes
The order in which scene names are placed in the Scene panel determines the order in which the scenes in the movie are played. Scene names in this panel can be moved to set the playback order of scenes regardless of the order in which they were created.
Open the Scene panel by choosing Window> Design Panels> Scene.
Place the mouse pointer on the name of the scene that you want to rearrange, press the left mouse button and, while holding it, move the pointer to the desired location on the panel. Note that as you move the pointer, a blue line appears, indicating a possible new position for the scene name in the list.
Moving a scene in the Scene panel
Switching between scenes
You can use the following navigation aids to switch between different scenes in a movie while working on a Flash project.
Scene panel. To navigate to the desired scene in the movie, click on the scene name in the Scene panel. Recall that the name of the selected scene appears in the Edit panel.
Edit Scene button. When you click on this button, located on the right side of the Edit panel, you access a menu with the names of all the scenes in the movie. To go to the desired scene, select the corresponding menu item.
Movie Explorer panel. Opened with Window> Other Panels> Movie Explorer, this panel displays the hierarchical structure of a movie (see Chapter 8) and allows you to search for scenes, symbols and instances of symbols. as well as replace text and fonts.
Scenes are represented in the Movie Explorer panel as hierarchical higher-order items. To navigate to a specific scene, find its name in the Movie Explorer panel and click on it. By default, this panel displays the contents of only the selected scene. To view the contents of all scenes at the same time, activate the Show All Scenes command in the Options menu of this panel.
Movie Explorer panel with scene list
Scene testing
To test the created movie directly in the Flash development environment, you need to press the Return / Enter key, but in this case the viewing options will be limited to the selected scene. Sequential playback of all scenes is possible only after the movie is published, and Flash is no longer required. To test, follow these steps.
To test a single scene, mark it in the Scene panel and press Return / Enter, or after selecting a scene, open the Control menu and activate the Test Scene command.
To test the movie, call the Test Movie command on the Control menu or use the Cmd / Ctrl + Return / Enter key combination. This will open a new window in which all the scenes in the movie will be played in the sequence defined in the Scene panel.
You can also play all scenes in a movie by choosing Play All Scenes from the Control menu.
Controlling scenes with ActionScript
Scenes can greatly simplify the overall organization of movie content. The specified sequence of scenes is used to render the movies linear. But besides the advantages (for example, simultaneous playback of two scenes is excluded), linear films also have disadvantages associated with the inability to change the order of playback of scenes. To solve this problem, ActionScript scripts (in particular, frame actions) are used to manipulate scenes.
Chapter 13 discusses ActionScript scripting and the use of frame actions in more detail. This section describes some of the actions that you can use to manipulate scenes.
gotoAndStopO - when this action is called, a transition to a specific scene and frame occurs and the movie stops playing.
gotoAndPlay () - calling this action causes the playback head to jump to a specific scene and frame (movie playback continues from this frame).
play О - This action allows you to continue playing the movie after stopping.
stop О - with this action you can stop the movie playback.
We are constantly faced with flash animation - on the Internet and in television broadcasts. Creating simple Flash animations using Flash technology is a fairly straightforward task, as Flash offers many useful tools that make the whole process simpler. If you want to create a flash animation or cartoon, then you can sketch it in just a couple of hours.
Steps
Part 1
Frame-by-frame flash animation- By default, Flash plays 24 frames per second (FPS). This means that 24 frames will be shown in one second, but not all of them must be different. You can change this setting (if you like) to 12 frames per second, but at 24 frames per second the animation will play smoother.
-
Install Flash Professional. There are many Flash animation programs out there, but the most powerful is Adobe Flash Professional CC. You can try this program for free or use another product (if you don't want to sign up for Adobe Creative Cloud). The rest of this article describes how to work with Flash Professional.
Since frame-by-frame animation requires multiple images (which are slightly different from each other), you need to create these images manually. To do this, use Adobe Flash Professional or draw images in any graphics editor.
- If you want your images to resize easily without sacrificing quality, create images in vector rather than raster graphics. Vector images will redraw themselves when they are resized (that is, you avoid pixelation or anti-aliasing). Bitmaps are traditional images such as photographs, hand-drawn pictures, and so on. If you try to enlarge such images, you will get a highly distorted picture.
-
Create the first frame. When you start Adobe Flash Professional for the first time, you will see a blank canvas (layer) and an empty timeline. As you add frames, the timeline will fill automatically. You can work with layers just like you do in Photoshop.
- Before adding an image, create a basic background for your animation. Rename "Layer 1" to "Background" and then dock it. Create a second layer and name it whatever you like. This will be the layer on which you will create your animation.
- Add the drawing to the canvas of the first frame. You can import the drawing from your computer, or you can use the drawing tools to create the drawing directly in the program.
- The first frame is the "key" frame. A keyframe is a frame that includes an image and forms the backbone of an animation. You will create a new keyframe each time you change the image.
- Keyframes on the timeline are indicated by a black dot.
- You don't need a keyframe in every subsequent frame. Create a keyframe every four to five frames to make a good animation.
-
Convert the image to symbol. In this case, you can add the image to the frame several times. This is especially useful if you need to quickly add several images of the same type in one frame (for example, fish in an aquarium).
- Select the picture. Right click on the picture and select "Convert to Symbol". The image will be added to the library, making it easier to use in the future.
- Delete the drawing. Don't worry - you can add it to your frame simply by dragging and dropping from the library. This way you can add the same picture multiple times to the frame.
-
Add blank frames. Once your first keyframe is ready, insert blank frames and then proceed to create the second keyframe. Press F5 (four or five times) to add blank frames after the first keyframe.
Create a second keyframe (after you've added some blank frames). There are two different ways to do this: you can copy an existing keyframe and make small adjustments to it, or you can create an empty keyframe and add a new image to it. If you are using a drawing created in another program, use the second method. If you are pasting an image created with the Adobe Flash Professional drawing tools, use the first method.
- To create a keyframe using the contents of the previous keyframe, press F6. To create a blank keyframe, right-click the last frame in the timeline and choose Insert Blank Keyframe.
- After you've created the second keyframe, you need to modify its image to bring the animation to life. If you've used Adobe Flash Professional's drawing tools, select the Transform tool to select an element in your drawing (such as a character's hand) and modify it.
- If you are inserting a new image at each keyframe, make sure it is in the right place (according to the logical sequence of frames).
-
Repeat the process. After creating two keyframes, repeat the process - add some blank frames between each keyframes and make sure the animation runs smoothly.
- Make small changes. The smaller (more subtle) changes, the smoother the animation plays. For example, if you want the character to raise their hand, the second keyframe should not include a drawing in which the character is depicted with a hand already raised. Instead, use a few keyframes to move from the lowered arm to the raised arm. In this case, the animation will be smoother.
-
Convert the drawing. Once you've created keyframes and trajectory, you can transform the image so that it changes smoothly as you move along the trajectory of the twin. You can change the shape, color, tilt, size and any other parameter of the image.
- Select the frame in which the picture will be transformed.
- Open the properties panel for the picture. To do this, press F3.
- Change the parameter values in the picture properties window. For example, you can change the hue or color, add filters, resize.
- You can also use the Free Transform tool to change the picture however you like.
-
Add finishing touches. Test the created animation by pressing Ctrl + Enter. Make sure the drawing (character) changes correctly and that the animation plays at the correct speed. If the animation plays too fast, decrease the FPS or increase the duration of the twin.
- The default FPS is 24, so try lowering this value to 12. Change the FPS value in the property bar. However, at FPS = 12, the animation may not play smoothly enough.
- To change the duration of a twin, select the layer containing the twin and use the slider to change the duration of the twin. If you want to double the duration of the twin, move the slider 48 frames. Remember to insert the background into empty frames so that the background doesn't disappear in the middle of the animation. To do this, select the background layer, click on the last frame of the animation (in the timeline), and then press F5.
The basics of time-lapse animation. This method is considered the main method for creating "traditional" animation, in which each subsequent frame includes one, but slightly modified image. As all frames are played back, the image comes to life. This is the same technique used by freehand animators and is more time-consuming than tweening (see next section).
Part 3
Adding sound effects and music-
Record or download sound effects and music. You can add sound effects to your animation to make it more effective. Music will make animations more exciting and can turn good animations into great ones. Flash supports a variety of audio file formats, including AAC, MP3, WAV, and AU. Choose a format that guarantees high sound quality with the smallest file size.
- The MP3 format guarantees high quality sound with the smallest file size. WAV files are large.
-
Import audio files into the library to be able to quickly add sounds and music to animations. Click File - Import - Import to Library. Find the audio file on your computer. Make sure the audio file has an easy to remember name so you can quickly find it.
Create a new layer for each audio file. This is optional and you can add audio to existing layers, but inserting the audio file on a separate layer will give you better control over the animation soundtrack.
Create a keyframe from which to start playing the audio. On the sound layer, select the animation frame from which the sound will start playing. Press F7 to insert a blank keyframe. For example, if you want to insert an audio file that will play throughout the animation, select the first frame on the audio file layer. If you are adding a character's voice, select the frame where the character begins to speak.
