How to create a new frame in Adobe Flash. How to create flash animation. Understanding Action Script
Download flash from the site Can different ways. But some of them are quite cumbersome, some require the use of plugins, programs and websites. Meanwhile, there is a very elegant and simple method, the implementation of which does not take much time.
First, let's define why we need a flush at all, and what it is. Flash is a multimedia presentation made using the program Adobe Flash or . These files are called flash movies, although they can be much more than a movie.
They can be entire mini-programs: banners that react to the visitor’s mouse movement, small games, so-called flash games, tests with results, and so on.
Or they can really just be video or audio clips.
The standard extension for flash files is SWF. And when we come across such videos on websites, we cannot download them as easily as pictures, with the right mouse button. You'll have to work a little harder.
Download flash from the site
Go to the website page that contains the flash file you need. After that:
Open the page code
Right-click on the page and select View page code . Two more options to open the page code: click Ctrl+U, or write before the page address view-source:
Look for the SWF video address in the code
To do this, enable search using hotkeys Ctrl+F, and enter in the search field .swf. Then press Enter .
Find the address itself, which will look like:
http: //site.ru/papki/rolik.swf
or like this:
/papki/rolik.swf
If you have the second option, then the address is relative, not absolute. It must be placed to the left of the address home page site.
Checking the address
Paste the address of the flash video into the address bar of any browser in a new tab. A video should appear.
Make the address a link
If the video appears, copy the address into a notepad and make it a link, that is, add the appropriate code to it.
As a result, the inscription in the notepad will look like this:
Download the flash video to your computer
Open the saved file in the browser. There will be a link inside it. Right-click on it, select Save link as... or Save via link..., and save the flash video on your computer.
To watch, either open it in a browser, or use a flash player, for example Macromedia Flash Player .
Other options
Although the option described above seems to me the most interesting, I will still give other ways to save flash on your computer.
- Using the site http://save2go.ru. Enter the address of the page on which your flash movie is located and click Save from site . A link to the video will appear below. Right-click and select Save link as... or Save via link... .
- Using a browser plugin, e.g. Downloadhelper For Firefox .
- Using download programs, for example, Download Master. First you need to find the address of the flash video, and then insert it into the downloader.
You can get more detailed information in the “All courses” and “Utilities” sections, which can be accessed through the top menu of the site. In these sections, articles are grouped by topic into blocks containing the most detailed (as far as possible) information on various topics.
You can also subscribe to the blog and learn about all new articles.
It does not take a lot of time. Just click on the link below:
Have you ever wondered what lies behind the beautiful animation of banners on the Internet? Or the newfangled cartoons created with the help of computer technology? Most often they are based on “flesh”, or more precisely, this is how the name of the Flash technology is translated from English. Today we will talk about flash animation for the website:
Flash technology
The multimedia framework was developed by Macromedia. But after its absorption (merger), all rights to the technology were transferred to the new owner - Adobe Systems.
Area of modern application of Adobe Flash:
- Creating web applications is a fairly new direction. Implies full or partial use of Flash to create websites. When partially applied, this technology creates individual design elements: various interactive menus, animated buttons, etc.
Compared to conventional HTML-based resources, Flash sites have some features that limit their use. These include the high cost of development, demands on server resources, long loading times with a slow Internet connection, and some other aspects:
- Implementation of multimedia capabilities - to listen to audio and play video on websites, media players created based on Flash are often used. Their development includes the use of one of the scripting languages (usually JavaScript):
- In online advertising, technology is most often used to create animated banners. They imply not only the playing of multimedia advertising, but also some kind of interaction with the user on a game basis.
Flash Development Basics and Tools
To create flash animation, 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 web application interfaces;
- Adobe Flash Player is a browser-integrated player for playing Flash.
In addition to this, a number of devices can play multimedia content of this type. third party applications. The most popular ones are Gnash, QuickTime and some others:
This technology allows you to display any type of graphics ( raster, vector, 3D). It also supports streaming relay of audio and video data. Especially for mobile devices a lightweight Flash version Lite.
The main standard for Flash files is the SWF extension. The abbreviation stands for Small Web Format. Video recorded in Flash has the file extensions FLV, F4V.
The development of interactive animation in Flash is based on Vector graphics. It is thanks to this that it was possible to implement support for a multimedia platform and independence of animation quality from screen resolution.
The flash application file size is the same for all users, regardless of technical characteristics screen (resolution).
Interactive animation in Flash is based on morphing (vector type), in which there is a slow flow between key frames. To play back data, a flash player is used, the operation of which is in many ways similar to that of virtual machine JavaScript. The software component of the technology is implemented using the ActionScript language.
The disadvantages of the technology include the following points:
- Heavy load on CPU client machine. This is due to the low efficiency of the Flash virtual machine, which is built into the user’s browser along with the player;
- High probability of errors - playing Flash animation may occur 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 over the fault tolerance of the program code when creating Flash applications;
- Failure to index - All text content displayed in Flash content is not indexed. This limitation is especially problematic for those resources that are created on the basis of this technology.
Review of third-party Flash creation software
As a prototype application on which we will demonstrate the basics Flash creation, He was taken Sothink SWF Quicker. According to many professionals, the program is the most understandable and easiest to learn.
In addition to creating and editing, the flash editor “can” work with all other types of web animation (GIF, HTML and other standards):
After installation, go to the user-friendly interface of the program. Unfortunately, after wandering through all the nooks and crannies, we did not find an interface language switch.
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 offered options, we chose to create a banner:
In the next wizard window, 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 top one is for editing the time period of the video, and the bottom one is a regular graphics editor. Each of the elements is located on a separate layer, which can be modified using standard tools located on the sidebar.
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 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 at specific examples.
Interactive photo album
Let's demonstrate the use of buttons to manage a photo album - create a set of photos and add two buttons that will scroll through the photos forward and backward.
Let's place the first photo on the main timeline and add a button from the standard set. To access the desired folder, you must run Windows command=> Control Panels Common Libraries => Buttons (Fig. 6).
Rice. 6. Add a button from standard library
As a result of executing this command, a panel will appear containing a large set of pre-drawn buttons various types. Let's select, for example, Key Buttons (buttons similar to keyboard keys), open the corresponding folder, select the key-left button (Fig. 7) and create an instance of this button (by dragging it onto the stage).
Rice. 7. Elements of the Key Buttons folder
Note that when you place a second button (key-right) on the stage and move it to align with the first button, the program provides a hint (a dotted line) that allows you to accurately position the button (Figure 8).
Rice. 8. Automatic alignment of buttons on the same level
In order to add a script, you need to call the Action Script editor using the Window => Development Panels => Actions command or by pressing the F9 key. If you plan to write scripts frequently, this is a keyboard command worth remembering. As a result, the Action Script editor will appear (Fig. 9).
Rice. 9. Action Script Editor Panels
If you experiment by highlighting various elements on the stage, while simultaneously monitoring messages in the Action Script editor panels, you will find that the program suggests which element you can “hang” the 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 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 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 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
We constantly come across flash animation – on the Internet and in television broadcasts. Creating a simple Flash animation using Flash technology is a fairly easy task, as Flash offers a lot of useful tools, which simplify the whole process. If you want to create a flash animation or cartoon, you can sketch it in just a couple of hours.
Steps
Part 1
Frame-by-frame flash animation- By default, Flash plays at 24 frames per second (FPS). This means that 24 frames will be shown in one second, but not all of them need to be different. You can change this setting (if you want) to 12 frames per second, but at 24 frames per second the animation will play more smoothly.
-
Install Flash Professional. There are many programs for creating Flash animation, but the most powerful is Adobe Flash Professional CC. You can install for free trial version this program or use another product (if you do not want to register for Adobe Creative Cloud). The rest of this article describes how to use 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 be easily resized without losing quality, create your images in vector graphics rather than raster graphics. Vector images will redraw themselves as they are resized (meaning you will avoid pixilation or anti-aliasing). Raster images are traditional images, such as photographs, drawn pictures, and so on. If you try to enlarge such images, you will end up with a highly distorted image.
-
Create the first frame. The first time you launch Adobe Flash Professional, you will see a blank canvas (layer) and a blank timeline. As frames are added, the timeline will fill in automatically. You can work with layers just like you do in Photoshop.
- Before you add an image, create a basic background for your animation. Rename "Layer 1" to "Background" and then pin it. Create a second layer and name it whatever you like. This will be the layer on which you will create the animation.
- Add a drawing to the first frame canvas. 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 key frame is a frame that contains an image and forms the backbone of an animation. You will create a new keyframe every time you change the image.
- Keyframes in the timeline are indicated by a black dot.
- You don't need a keyframe on every subsequent frame. Create a keyframe every four to five frames to make a good animation.
-
Convert the image to a 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 similar images into one frame (for example, fish in an aquarium).
- Select the drawing. 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 by simply dragging it from the library. This way you can add the same drawing to a frame several times.
-
Add empty frames. Once your first keyframe is ready, insert blank frames and then start creating your 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 empty frames). There are two different ways to do this: you can copy an existing keyframe and make small changes 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 inserting an image created using 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 select Insert Blank Keyframe.
- Once you've created the second keyframe, you need to make changes to its image to make the animation come to life. If you used Adobe Flash Professional drawing tools, select the Transform tool to select an element of your drawing (such as a character's hand) and change it.
- If you insert 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 a few blank frames between each keyframe and make sure that the animation plays smoothly.
- Make small changes. The smaller (more subtle) the changes, the smoother the animation will be. For example, if you want a character to raise their hand, the second keyframe should not include a drawing of the character with their hand already raised. Instead, use multiple keyframes to transition from a lowered hand to a raised hand. In this case, the animation will be smoother.
-
Transform the drawing. If you have created keyframes and a path, you can transform the image so that it changes smoothly as you move along the tween's path. You can change the shape, color, tilt, size and any other aspect of the image.
- Select a frame in which the drawing will be transformed.
- Open the drawing properties panel. To do this, press F3.
- Change the settings in the drawing properties window. For example, you can change the shade or color, add filters, change the size.
- You can also use the Free Transform tool to change the drawing however you like.
-
Add the finishing touches. Test the created animation by pressing Ctrl + Enter. Make sure that the drawing (character) changes correctly and that the animation plays at the correct speed. If the animation plays too fast, reduce the FPS value or increase the duration of the tween.
- The default FPS is 24, so try reducing this value to 12. Change the FPS value in the properties panel. However, at FPS = 12, the animation may not play smoothly enough.
- To change the duration of a tween, select the layer containing the tween and use the slider to change the duration of the tween. If you want to double the duration of the twin, move the slider to 48 frames. Remember to insert the background into the 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 (on the timeline), and then press F5.
Stop-motion animation basics. This method is considered the main method for creating "traditional" animation, in which each subsequent frame includes the same, but slightly modified image. When all frames are played back, the image “comes to life”. This is the same method used by hand-drawn cartoon animators and is more time consuming than twinning (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 impactful. Music makes animation more exciting and can turn a good animation into a great one. Flash supports a variety of audio file formats, including AAC, MP3, WAV, and AU. Choose a format that guarantees high quality sound with a minimum file size.
- The MP3 format guarantees high sound quality with a minimum file size. WAV files are large in size.
-
Import audio files into the library to quickly add sounds and music to your animations. Click "File" - "Import" - "Import to Library". Locate the audio file on your computer. Make sure the audio file has an easy-to-remember name so you can find it quickly.
Create a new layer for each audio file. This is not necessary and you can add audio to existing layers, but pasting the audio file onto a separate layer will give you more control over the animation's audio track.
Create a keyframe that will start the audio playing. On the sound layer, select the animation frame from which the sound will begin to play. Press F7 to insert an empty 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're adding a character's voice, choose a shot where the character begins to speak.
