Flash Animation Basics Tutorial ① Introductory article

Flash Animation | Basic Tutorial

This tutorial is some of my experiences, for beginners to enter the tutorial, I may not be able to download! Thanks, thank you.Flash Animation Basics Tutorial
--Introductory article ①
First, let's say what is Flash?
Flash is Macromedia Company produced software, for Flash is what a lot of description, is roughly "interactive vector multimedia production software" meaning! First of all, it is a multimedia production software, flash products are often some "vivid" to the human visual impact of the animation. Second, the Flash is based on vector graphics, the biggest feature of vector map is that it can be unlimited scaling, not because of the image scaling and changing the quality of its display. Finally, the development of Flash is closely connected with the network, and its many characteristics are related to the network. It can be said that there is no integration with the network, Flash can not achieve the current success.

Let's talk about the flash.
Flash, Flasher, heard is the forerunner of the domestic flash border town of "echo consultation" (Eastecho) appeared, and later in his establishment of the "Flash Guest Empire" (Flashempire) in the popular, is not really you ask him, I also read a few books to know! Oh! With the development of flash in the country, the name of the Flash is also popular, the team is also growing.
In fact, the flash guests are really shiny works of the soul-creative, such as "Think of the wonderful" their "Dahua West" and "snail Aberdeen", because the unique creative so well received by netizens. "Bu" Comrade "cat", because of her unique style and creativity impress every netizen ...

Two Misconceptions about learning
We often have two misunderstandings in learning software, and I don't know if I'm right. One is that I have to be completely familiar with the software in order to make excellent works. There is nothing wrong with this, but we can focus on learning, such as your major is art or like painting, then you focus on the art and animation, action slightly based on it. If you are learning computer programming or interested in programs, you can focus on the action script, animation understand the simple production and editing can. This is the best training method for beginners, and so you are strong in this area, you can attack another aspect. (My opinion is for reference only)
On the other hand, the misconception is that you must use the latest version of Flash software to make excellent works, which often lead us in the pursuit of the latest version of the process lost, because now the software is updated too fast, and so you have a new version of the function of the same time, there are new updates out. I personally agree to learn "second software", which is more than the latest version of the software to produce a release, because everyone is generally the version of the software, in the production of their own more skilled, but also will not blindly to find a press, inverted work is inconvenient. (My opinion is for reference only) did you say a lot of nonsense? Let's go straight to the subject now!
In order to better learn flash I chose the flash-mx, nonsense not to say more. Start Flash-mx, we have a panoramic view, press the TAB key to control all floating panel switches, the main interface as shown in Figure 1-1.

We can see that FLASH-MX has perfected and supplemented the function and interface of the original version Flash5. Here are some of the main sections.

Tool bar
As shown in Figure 1-2, the meaning of the tool bar icons is shown.
Figure 1-2 Tool bar schematic

Shortcuts for basic editing operations

Undo Cancel Ctrl+z
Redo again Ctrl+y
Delete Deletes
Cut Shear Ctrl+x
Copy Copy Ctrl + C
Paste Paste Ctrl + V
Duplicate Replication Ctrl+d
Group Group Ctrl+g
Ungroup Cancel Group Ctrl+shift+z
Break Apart Scatter Ctrl+b
Select Choose Click the left mouse button
Select Choose Click the left mouse button
Add or subtract a select Shift key + left mouse button
Select all Choose Ctrl + A
Deselete All deselect Ctrl+shift+a
Zoom in enlarged view Ctrl + =
Zoom out Zoom Out View Ctrl +-
Open/Close Floating panel tab
Editsymbol Edit Symbol Ctrl+e
Modifymovie Change Movie Ctrl+m
Testmovie Test Film Ctrl+enter
Testscene Test Scenario Ctrl+alt+enter

Time axis
As shown in Figure 1-3, the icons for various frames of the timeline region and the meanings of the onion skin buttons and status bars are shown.
Fig. 1-3 Time Extraction Area sketch Map

Layer Area
As shown in Figure 1-4, the meaning of each icon in the layer area is shown.
Figure 1-4 Layer Area diagram

Tool bar
As shown in Figure 1-5, the Flash-mx toolbar is divided into the Drawing toolbar (tools), the Color toolbar (Colors), the Views toolbar (view), the Accessibility Bar (options), and each toolbar has a number of corresponding child functions or options. The icon corresponds to a corresponding shortcut key.
Figure 1-5 Toolbar and corresponding shortcut key sketch

All right! Example of so many icon meaning and shortcut keys, I believe we have some understanding of it. Let's take a break from the eyes, and we'll move on to the next link.

　　<1>, fig leaf
Let's do a fig leaf first. This stuff is something that hides the rest of the stage from the outside, which means that we sometimes need half the element to release the stage or to animate it, but it will appear outside the stage, and when we Press "Ctrl+enter", It will be found that there is also a half dew on the stage outside of this thing. It doesn't matter, now we do a "fig leaf" to cover up all the things outside the scene. People do not use stones to throw me, I know a lot of people have said this, and think of the second animation is also done very detailed, but some people still want to complete with the text and graphics to know, then I will not bother to say again! -_-|||
First of all, we must pretend to choose this "fig leaf" color, of course, what color you want to what color, but I personally think that black and gray can highlight the theme of the stage, so that the audience like watching the movie! Now our operation begins ...
We first click on the FLASH-MX operating interface in the lower left corner of the "Properties" property bar to see how much we set the stage size. Here is the original system set to 550x400 size of the scene, as shown in Figure 1-6.

Figure 1-6 Property Bar

Next we click on the shortcut key R, and then in the toolbar, select the rectangle's "contour Color" as black (as shown in Figure 1-5), then click the Fill Color in the toolbar (shown in Figure 1-5) and then click the "No Fill" below, because we just want the outline of the rectangle not to fill its body. Then, on the stage, pull a rectangular box arbitrarily, and the shortcut key is R. Choose good this rectangular box if 1-7.

Figure 1-7 Rectangular Box

Then, click on the "Properties" property bar in the lower left corner of the operation interface, then set the corresponding W (width) to 550,h (high) to 400, which is the stage size we saw before. Set to 0 on both the X and Y axes, see figure 1-8.

Figure 1-8 Property Bar Settings

After setting up we can see that the rectangular frame is completely coincident with the edge of the stage, then we continue to pull a rectangular frame outside the stage, of course, is bigger than the original! The larger the outer area of this shaded stage, the more we set the W (width) to 1800 in the property bar, the H (high) setting to 1500, and then the middle stage, as shown in Figure 1-9.

Figure 1-9 the second pull out of the rectangular box to the middle stage

Then select the Fill tool shortcut K, Fill, note the toolbar on the left of figure 1-9, fill color selected as black or gray, in the large rectangular box and small rectangular box, click the left mouse button, so that "fig leaf" was completed! As Figure 1-10, is not very simple, we try it! ~~^0^~~

Fig. 1-10 A fig leaf of success was born

<2> Blink of an eye
Next we will be on the stage to do a pair of blinking eyes, in Flash animation characters blink is essential, is the soul of the people, here we simply draw a pair of eyes, do a simple blink process.
First of all, we have to draw a pair of eyes, here is a pair of figure 1-11.

Fig. 1-11 A pair of girls filled with melancholy eyes

With the mouse to select the eye, press F8 Key, the dialog box appears, name name is named, you are willing to take what name, of course, take the eyes! You can also default name! Here are a total of 3 options Oh, let's introduce each one. The first: Movie clip is the meaning of the movie clips, that is, the whole stage animation inside a small animation clips, in the scene of the press return to enter the key to see what animation in the clip, only in the test of the film Ctrl+enter to complete the See, The animation of the eye and often to repeat the animation we usually turn it into a movie clip is movie Clip. The second: button refers to the meaning of the buttons, we are doing courseware ah, the beginning of the animation Ah, look again ah, stop ah, there are some of the use of the site. The third: graphic refers to a component, which is a stationary static thing, we have to use many times in the animation, remember that is still the thing we choose it. Good three I have said, I inarticulate, can not say very detailed, if you really do not know to ask the Flash forum in the owner bar! -_-||| Here we select the movie Clip (movie clip), click OK to complete. As shown in Figure 1-12.

Figure 1-12 Dialog box options

Okay, now we can start to do eye animation, first of these eyes we are not in the scene to do, the so-called scene is you open the flash-mx when the stage, there are layers, ah, the time axis ah, onion skin ah, and so on! We should enter movie Clip (movie clip) inside can play its role, pick up your mouse casually double-click a big eye, do not so ruthless, careful mouse scrapped. Okay, when we get into the movie Clip (movie clips), you'll see movie Clip icons like Figure 1-13.

Figure 1-13 Movie clip icon appears

This means that we have entered the movie clip, it also has layers, timeline, onion skins and so on. Next, we started using the movie clip inside the timeline. First, click the first frame and press F5 to extend the frame to frame 11th. As shown in Figure 1-14.

Figure 1-14 the frame number on the timeline is extended to 11 frames

Then we click on Frame 11th, press F6, build keyframes, and then press F5 to extend the frame to frame 13th, as shown
1-15.

Figure 1-15 the frame number on the timeline is extended to 13 frames

Next, we also build keyframes in frame 13th, press F6, then press F5 to frame 14th, then build keyframes in frame 14th, extend to 16th frames, press keyframes and extend to 25th frames. We will find that except the 13th frame in the middle is 1 frames, both sides are symmetrical. As shown in Figure 1-16.

Figure 1-16 the number of frames on the timeline shows symmetry on both sides

Is it symmetrical on both sides? Yes, this timeline is the distribution of the number of frames we want to do the animation, we are in the front 10 frame is a pair of open eyes, the corresponding 10 frames are the same. The Middle 11, 122 frames are a pair of half squint eyes, the same 14, 152 frames is also a pair of half squint eyes. And in the middle of the 13th frame, yes is closed eyes!
Here I teach you convenient and quick way, of course, if you are a professional art staff can draw a pair of half squint eyes and closed eyes. OK, first we move the timeline to frame 11th, we press the V (Arrow tool), choose good eyes (remember not to choose eyebrows), then Q (Zoom tool), we move the center point of the selected eye down to the bottom as shown in Figure 1-17.

Figure 1-17 The zoom tool moves the center point of the selected part to the bottom

Then click on the left mouse button in the middle of the 8 black dots above a black spot, the mouse hold down the department to pull down to the appropriate position, like the eyes half squint as shown in Figure 1-18.

Figure 1-18 with the mouse point to live in the red circle of black dot not put, down half compressed

Is this a half squint eye? Ha ha! The effect basically and draw out of the feeling is not very small, because Blink is a quick action. All right, the eyes are half narrowed, and the eyebrows we draw are of course to be followed. Select Eyebrows, using the ↓ button under the keyboard, press 2 times, that is, eyebrows y-axis downward movement-2 points as figure 1-19.

Figure 1-19 the y-axis of the eyebrows moves downward-2 points

is not no change, because just a little move, so the picture is not clear, you can draw in the timeline from the 10th frame to the 11th frame, you can see the effect, pull back and forth several times to see, haha! Let's get excited! The same picture is the same in 14 frames, so we can copy the past. In the 11th frame Ctrl + A key (select All), then CTRL + C key (copy), drag the timeline to the 14th frame ctrl+shift+v (in-place paste). So we're left with the last frame of 13 frames!
Don't worry, we're moving the timeline to frame 13th First, click the right mouse button in the blank area (in the case of not selecting the Eye), a dialog box appears, we select Rulers (ruler), click the tick ruler, press the left button, and pull down a coordinate line to the bottom of the eye as shown in Figure 1-20.

Figure 1-20 pull down a coordinate line to the bottom of the eye

So that after we draw the closed eyes, we can align the bottom so that the eye of the blinking animation is always on the same horizontal line, we simply draw the closed eyes, and note that the bottom is always the tight horizontal line as shown in Figure 1-21.

Figure 1-21 Simple to draw the closed eyes

And then, of course, the same eyebrows we draw must follow the dots! Select Eyebrows, with the key of the ↓ under the keyboard, press 4 times, that is, eyebrow y-axis downward movement-4 points, some people say why to move 4 points? Not the same as the original 2 points to move it? Because the pair is half squint eyes, and we now draw this pair is closed Ah, the eyebrows also follow down! So it's 2 points more than before. Others say normal people blink eyebrows will move down ah? This is the animation effect and appropriate exaggeration, so that the audience looks realistic ah! These are very small things, but the feeling of the people is different! Why are you all so stunned?
Our animation is finished now! Quick ctrl+enter Test film Ah! Is ~~~flash interesting?
Because of the time, I will give you this time, the next time I have the opportunity, I would also give more and better tutorials! Thank you for your "Helpless laugh World" support, but also hope that I will have more and better works to bring you! Thank you!