How and with what to create flash animations. How to create flash animation
So, at the request, I’m writing a lesson about the simplest animation in Flash. Let's start, as they say, small. Then I promise to add more (by pop-up, if they don’t write).
Open Flash MX.
Before us is our working scene, menu, toolbar, etc. At the bottom there is a window like this: Properties. There are the main settings for your cartoon (Fig. 1).
We are interested in FRAME RATE - the scrolling speed of your cartoon. Otherwise, 12 fps means that 12 frames of your cartoon will be played in one second. This speed is standard and, in principle, what is needed. If you need to slow down your cartoon, reduce it; if you need to make it faster, increase this number.
Now let's move on to the animation itself.
There are two main methods in flash: shape tweening and motion tweening.
Let's look at the first one. Shape - (English) form. You already understand that here we are talking about changing the form. We create a certain shape, for example a blue square. At the top, in the timeline, on the first frame a circle will appear on a gray background - we have created a keyframe. Now let's create the same frame in the 10th frame. This can be done in two ways: point the mouse at frame 10, click (the frame turns blue) and in the menu sequentially select: Insert->keyframe; otherwise you can: point at frame 10, click, press F6. In the time line, all 10 frames are gray. The red line shows which frame we are on. (Fig.2) 
Let's go to frame 10. We select our square (with the mouse or by pressing ctrl+A - this key combination selects everything that is in our work area). Move our square somewhere to the side (make sure you are in the 10th frame!) and change the color to, for example, yellow. Now let's go back to the first frame. In the Properties line there is a Tween selection, where the default attribute is "none". That is, no animation. Change it to "shape". In the time line, our frames take on a light green color with an arrow. When everything is done, press "enter". BEAUTY! The square moves and even changes color! Let's go to frame 10 again. Select everything (ctrl+A). And press the delete key (that is, delete). In place of the square, draw a little red circle. Go back to the first frame and press enter. The square now turns into a circle and red. You already realized that you don't need to draw every frame - flash will do it for you! Although if you need special accuracy or something, you can draw. then the file will grow in size. If you need a smoother transition from a square to, for example, a circle, do this process not for 10, but, say, for 25 frames. If you need more intricate movements and movements, there are layer masks for this, but more about them next time. Figure 3 shows what your animation looks like on a timeline. Now you can draw a simple movie with shape changes! 
Now let's look at the second way to set animation: motion tweening (translation of something like: constructing intermediate motion animation). Here it will be a little more complicated. Open a new flash file again.
What is the difference between shape and motion? The fact that in the second case we will work not on forms, but on ready-made objects, i.e. symbols. A symbol is, so to speak, the simplest unit of animation in Flash. This is a more common way of drawing. We repeat everything again - in the first frame we draw a blue square. select it and press F8 (or execute sequentially: Insert->convert to symbol). A dialog box appears in front of us (Fig. 4). 
What is it? There are three types of symbols in Flash: a moovie clip is some kind of additional animation inside a symbol. that is, this symbol contains some kind of animation, etc. has exactly the same time line as the main scene; button (button) - an element that responds to pressing, the presence of the mouse over it, etc. In short, there is a button; and the third element, the most static - graphic. That is, just graphics, some kind of image. We will work with the latter. We call it something, click “OK”. A circle appears on the square - otherwise, the center of our symbol (the center can also be set in that dialog box). All our symbols are entered into the library. From there we can edit them, insert them where necessary and where not, delete, add. To look at your library, press F11 or follow the steps: Window -> Library. In the 10th frame we will create a key frame (F6). Now we can move our square somewhere. Then let's make it invisible: to do this, select it in the 10th frame. In the propperties panel, in the color section, set alpha (transparency). Let's set the attribute to it as a percentage: 0. Let's return to the 1st frame. Let's perform the same steps as for shape tweening, but instead of shape we'll mark motion. The frames in the time line will turn purple and an arrow will stretch through them, as shown in Fig. 5. Press enter. 
We will get the effect of “a square flying into the void.” Congratulations! You know how to make primitive graphics in Flash!
Another important feature is that for each animation we must have a separate layer (Layer). If you need to add another layer, use the command: Insert->Layer.
And just a little about the time line.
As you already understood - light green with an arrow - shape tweening, purple with an arrow - motion tweening. Light green or purple with lines - you specified an animation, but this animation cannot be created - you did something wrong. Gray color - all frames with this shading are an exact copy of the previous keyframe. A white line means that there is nothing in these frames. The black circle is a key frame. The white circle is a blank keyframe. Well, that seems to be it. (Fig. 6) 
That's all for now. This is the minimum you can work with. Next, learn how to add sound, control the sound, and go ahead and write Masyanya. :) I promise that I will definitely write another lesson soon - on advanced animation in Flash. About how to make a “feather fall”, about masks, about control over changing shape in shape tweening. Then I’ll write something else.
If this did help someone, say thank you to the entire FLASHER.RU site. This is the best there is on the net.
I was glad and glad to eat! If you have questions, please go to the forum or: [email protected]
(c)from St. Dimitryi aka Nirva to Flasher.ru
http://flasher.ru
Using Scenes
As you know, Flash allows you to create quite 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're working on a large, complex project, it makes sense to break it down into several manageable chunks, each containing a specific sequence of events (animation, user interaction, etc.). This will make the work much easier. The role of such fragments in Flash films is played by scenes. They are logically completed miniature films, which together make up a single Flash film. When creating large projects, using scenes can save significant time.
What is a stage
Creating a scene is an effective technique that makes it possible to divide a specific project into separate manageable fragments. Each scene, as already mentioned, is a miniature film. The number of Flash movie scenes used is limited only by the computer's memory capacity. Scenes are played sequentially, in the order specified in the Scene panel and, being independent, at the same time are closely interconnected. There is never any noticeable delay between them during playback. The possibilities for using scenes are varied and almost limitless. For example, when working on a website project, you might implement sections and subsections as scenes. Recently, short animated Flash films, the content of which can be divided into logical parts through scenes, have become increasingly popular on the Internet.
Scene panel
The list of scenes contained in a movie is accessed using the Scene panel.
on), which opens when you call the command Window\u003e Design Panels\u003e Scene (Window\u003e Design Panels\u003e Scene). This panel allows you to view a list of available scenes
and establish the order of their playback in the film - 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 in 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 menu of the program. To open the panel, use the Window > Toolbars > Edit command. You have already used this panel when working in the Symbol Editor window to exit symbol editing mode (see Chapter 6). This section will focus on 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 in the line. The functionality of the Edit Scene button is described in the "Switching Between Scenes" section.
Edit Scene Button Menu
Creating and manipulating scenes
As already mentioned, the Scene panel, which opens using the Window > Design Panels > Scene command, is designed for working with scenes. In this section, you will learn how you can use this panel to add, duplicate, rename scenes, and change their order.
Adding a scene
As the complexity of a project increases, you will constantly need to add new scenes to distribute logical pieces 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, which is located in the lower right corner of the panel, or call the Scene command from 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 given a name with a sequence number that is one greater than the currently selected scene name (for example, Scene 1, Scene 2, etc.). The name is placed in the list accordingly.
Select a new scene from the Scene panel and create its content. 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 calling 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 the OK button in the dialog box that opens.
Scene duplication
In previous chapters, we already talked about creating duplicates of various elements. When it comes to copying animation, and especially 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 activating the command Window > Design Panels > Scene (Window > Design Panels > Scene), and select the scene that you want to duplicate.
Click the Duplicate Scene button located in the lower right corner of the Scene panel.
The name of the duplicate scene appears in the Scene panel window. Note that it consists of the name of the original scene and the word soru (copy).
Duplicate scene
Renaming scenes
Because the default names assigned to duplicate and new scenes differ only in their sequential 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. The process of renaming a scene will not take you much time.
Open the Scene panel by choosing Window > Design Panels > Scene and double-click the scene name you want to change. This will allow you to edit the scene name.
Enter a new name and press Returt/Enter or double-click outside the Scene panel.
Renaming a scene in the Scene panel
Changing the order of scenes
The order in which scene names are placed in the Scene panel determines the order in which scenes are played in the movie. Scene names in this panel can be moved, setting the order in which the scenes are played 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 needs to be rearranged, press the left mouse button and, while holding it, move the pointer to the desired location on the panel. Notice that as you move the pointer, a blue line appears to indicate the possible new position of the scene name in the list.
Moving a scene in the Scene panel
Switch between scenes
You can use the following navigation tools to switch between different movie scenes while working on a Flash project.
Scene panel. To jump to the desired movie scene, click the scene name in the Scene panel. Recall that the name of the selected scene is displayed in the Edit panel.
Edit Scene button. When you click this button, located on the right side of the Edit panel, you get access to 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. This panel, which can be opened using the command Window > Other Panels > Movie Explorer, displays the hierarchical structure of the movie (see Chapter 8) and allows you to search for scenes, characters and character instances, and also replace text and fonts.
Scenes are represented in the Movie Explorer panel as higher-order hierarchical elements. To jump 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 simultaneously, 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 Return/Enter, but in this case, viewing options will be limited to the selected scene. Sequential playback of all scenes is possible only after the film is published; the Flash environment is no longer required. To test, follow these steps:
To test an individual scene, select 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 a movie, call the Test Movie command from the Control menu or use the key combination Cmd/Ctrl+Return/Enter. This will open a new window in which all scenes of the movie will be played in the sequence defined in the Scene panel.
You can also play all scenes in a movie by selecting Play All Scenes from the Control menu.
Managing scenes with ActionScript
Scenes can greatly simplify the overall organization of movie content. The predetermined sequence of playback of scenes determines the linearity of films. But in addition to 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, you use ActionScript scripts (specifically frame actions) to control scenes.
You'll learn more about ActionScript and using frame actions in Chapter 13. This section introduces some of the actions you can use to control scenes.
gotoAndStopO - when this action is called, it goes to a specific scene and frame and stops playing the movie.
gotoAndPlay() - Calling this action causes the playback head to move to a specific scene and frame (movie playback continues from that frame).
play O - this action allows you to continue playing the movie after stopping.
stop O - using this action you can stop playing the movie.
We constantly come across flash animation – on the Internet and in television broadcasts. Creating a simple Flash animation using Flash technology is quite an easy task as Flash offers many useful tools that make the whole process easier. 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 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 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 in 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.
Download flash from the site possible in 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 on the left side of the website’s main page address.
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: