Flash Creative Design Tutorial: Probation-"Urban Love"

Tutorials | design

1.3 Basic Effect production

1.3.1 Frame animation

1. Urban Love

In the twilight of the poetic, the city's buildings are flashing lights, gradually the lights fade, leaving the "Love" of the musical notes ... This idea comes from the network, saw a university student dormitory lamplight courtship picture, so thought of this effect.
Effect Show

One of the frames is shown in Figure 1.3.1 (the full effect is seen in the CD "\ First \ Chapter III \ Metropolitan love. swf")

http://bbs.flash8.net/bbs/UploadFile/2005-10/200510110472156.swf

Click here to download the source file

Effect Explanation

In Flash, friends can animate by changing the contents of consecutive frames. There are two ways to create a sequence of animations. Frames-by-frame animation and gradient animation. In frames-by-frame animation, friends need to create graphics for each frame, creating animations by modifying the contents of each frame, especially for complex, delicate animation effects. Because Flash needs to store every complete frame, frame-by-step animation will significantly increase the size of the file.

The role of keyframes is to define the object changes in the animation. When you create a frames-by-frame animation, each frame is a keyframe, and the keyframe that contains the content is represented in a solid circle, and the frame that is added behind will contain the same content as the keyframe, and the first frame of each layer will automatically be set to a blank keyframe. Each new Keyframe initially contains the same content as the keyframe in front of it, so you can incrementally modify the frames in the animation. When friends create an animated background, they often encounter a phenomenon that requires an image to continuously display several frames. You can add a new frame to the layer, note that instead of adding keyframes, the new frame added will contain the contents of the previous keyframe, and the new frame will be represented in light gray frames with a small white rectangle in the last frame. Represents the end of a frame that contains the same content.

The so-called "frame frequency" is the speed of the animation playback, according to how many frames per second to calculate, too slow frame frequency will make the animation paused phenomenon, too fast will occur jump frame phenomenon, skip the details of the animation. Therefore, it is necessary to set the appropriate frame frequency. The default is 12 frames per second, and the standard motion picture frequency is 24 frames per second. Because a Flash movie can only specify one frame rate, it is best to set the frame rate before you start creating the animation.

Macromedia Flash MX Professional 2004 provides several ways to include animations and specific effects in your document. The use of timeline effects such as blur, expansion, and explosion makes it easy to animate objects. Simply select the object and select a special effect and specify the parameters. With the timeline effects, you can do a few simple steps to accomplish a task that was time-consuming and needed to be proficient in animation production.

When you add a timeline effect to an object, Flash creates a layer and transfers the object to the new layer. This new layer automatically gets the same name as the effect, and then appends a number that represents the order in which the effects are applied in all effects within the document. When you add a timeline effect, the folder that has the name of the effect is added to the library, which contains the elements that are used in creating the effects. The principle of blur effects is to create motion blur effects by changing the Alpha value, position, or scaling ratio of an object over time.

Production process

Run Flash MX 2004, create a new file, select Modify | Document command, the background color is set to #003366, the frame rate is 2fps, and the rest is default. As shown in Figure 1.3.2.

Tips

These settings are best in the animation at the beginning of the set up, otherwise the completion of the revision will cost a lot of effort.
(2) The document properties are set, and the property panel below the stage displays the document properties, as shown in Figure 1.3.3, without hitting any elements in the stage.

Attention
The document Properties panel is no longer shown in future tutorials.
(3) Select the "File" | "Save" command, because it is the first time to save, so the system will pop the "Save as" dialog box, we can choose to save the path, modify the file name, you can also modify the file save type, the default is to save the Flash MX 2004 document. If necessary, we can select the Flash MX document in the Drop-down list box, and the Flash MX 2004 is backward compatible. As shown in Figure 1.3.4.

(4) Use the line tool to draw the frame of the building in the stage, as shown in Figure 1.3.5.

(5) Fill the black with the Fill tool, and then use the Text tool to type "Urban Love" in the upper-right corner, the default is "static text", the color is yellow, the font size is 30, as shown in Figure 1.3.6.

(6) Click the "Urban Love" text and select "Insert" | Timeline Effect "|" Effect "|" Blur command, pop-up the "Blur" dialog box, we modify the parameters based on the effect, as shown in Figure 1.3.7.

(7) Click "OK" button, return to the main scene, on the timeline flash automatically generated a new layer "Fuzzy 1", at this time a total of two layers. Select ' Insert ' | ' Timeline "|" Layer command, insert Layer 3, modify the layer name "light", adjust the order of layers, drag the "light" layer to the top, so that the "building" layer in the middle position, "fuzzy" layer in the bottom position.

Tips

Flash in the layer is the upper and lower occlusion of the relationship, the above layer content to block the following layer content, so the "light" layer on the top, so that the light in the stage visible.

(8) Lock the "building" layer and "blur" layer, in the "light" layer with a rectangle tool to draw a small rectangle, and then press the CTRL key to drag the copy, adjust the position and size, the final effect as shown in Figure 1.3.8.

(9) Select frame 2nd and select "Insert" | Timeline "|" Keyframe command, add some small rectangles randomly in frame 2nd, then repeat the action, click Frame 3rd, insert keyframes, add small rectangles, and so on.
As shown in Figure 1.3.9.

Tips

Select ' Insert ' | ' Timeline "|" KeyFrames command, you can insert a keyframe, or you can use a shortcut key F6 to insert a keyframe.

(1) We have made 12 keyframes, in order to achieve our desired effect, click Frame 1th, press the SHIFT key on the keyboard to click Frame 12th so that we have all selected 12 keyframes and then choose Modify | Timeline "|" Flip Frames command to invert the order of these 12 keyframes.

Tips

There are three different ways to select multiple frames. In the case where frame 1th is not clicked, drag the mouse from frame 1th to 12th, select the mouse at the layer name, click All frames, and click a frame in the 1th frame to the 12th frame, and point to select all frames in the right-click menu.

(2) Finally to improve the work, fuzzy layer we made 14 frames, so the lights and the building layer to extend to frame 14th, click on the two layers of frame 14th, select "Insert" | Timeline "|" Frame "command, extend the frame so that the" love "character appears after two frames of stay time, will not immediately disappear.

(3) Select "Control" | " Test the Movie "command, carry out the effect test, make the completion."

Frames by frame animation like traditional cartoons, one to draw, each frame is a different content graphics, using the visual remnants of the human eye to form a movement of the screen. Frames-by-frame animation is one of the indispensable technologies of Flash animation works. Because it can achieve any effect, so when using a gradient animation can not be implemented, you may consider using frame-by-step animation instead, although this will obviously increase the volume of files, but in order to achieve good results is worth trying.

During 11, we will release the "Flash Creative Design Tutorial" part of the chapter, for those who do not buy books is a rare learning opportunity. Please pay attention to