Flash Create QQ Magic expression "Pray" super detailed diagram

In the New QQ Chat window click on the "Select expression" icon, you will see the expression list of more than a "Magic expression" tab page. This is the new launch of the QQ magic expression, its different from the previous QQ expression, QQ magic expression more vivid, image, it can jump out of the chat window display, but also more rich expression. The end of the article provides source files, effects and materials for everyone to download reference.

Now we try to make a flash QQ expression-"pray".
In order to meet the requirements of beginners, we take a detailed graphical approach for everyone to carefully describe each step of the drawing process.

/uploadpic/2007-7/20077803447112.swf

　　Draw outline of steps

　　A Animation analysis
First of all to develop characters animated script, although this QQ expression is very short, but in order to avoid doing duplication of work, so first of all to determine what components can be reused, do not need to redraw.
1. Body part: The hand has changed, the other part has not changed.
2. Face: The mouth, eyebrows, eyes and the shadow of the face and blush have changed, the rest of the part unchanged.

　　Two Cartoon character Drawing
(1) Drawing of the body part
Drawing of ① neck and shadow ② the drawing of two legs and the drawing of ③ feet and shadows ④ skirt drawing ⑤ skirt decoration
(2) Face drawing
① with a shaded face draws a ② with a gradient face to draw the ③ face to draw the ④ ear to draw ⑤ the hair to draw the ⑥ hairpin to draw ⑦ braid the drawing ⑧ Braid
(3) Drawing of hands, mouth, eyebrows and eyes
① hanging hands Draw ② close hands to draw the ③ of the mouth of the drawing ④ draw open mouth ⑤ eyebrows drawn ⑥ prayer before the drawing of the eyelashes ⑦ prayer before the eyes of the drawing ⑧ praying after the eye of the drawing of prayer after praying after the eyes ⑨ prayer after the drawing of the eye

　　Three, the production of simple frame animation
① the animation before praying ② ③ animation for animation add Command ④ Animation publishing

　　Specific drawing process

One, with the Flash drawing tool to draw cartoon characters

　　(1) The body part of the drawing , the final effect is as follows:

　　Step:Draw the neck and shadow ① the drawing of the ② legs and the drawing of the ③ feet and shadows ④ skirt drawing ⑤ skirt decoration

1. Open the Flash software, create a new document, press CTRL+J to modify the document properties, set the width to 400 pixels, the background color is gray (#CCCCCC), and other settings remain the default.

2. Select "Insert" → "New symbol" (shortcut key is Ctrl+f8) in the menu and insert a graphic symbol named "Body".

　　Drawing of ① neck and shadow
1. Click the OK button to enter this symbol, and then double-click Layer 1 to rename the layer name to neck.
(Hint: For each layer, each component name is convenient animation production and editing, lest confuse.) ）

2. In the toolbox, select the Pen tool, then set the stroke color (#D67D7B) in the color option below, the fill color to (#FFEBEF), set the stroke height to 1.5 in the properties panel below, draw the shape of the neck, and use the Subselection tool in the Toolbox The node is adjusted and the final shape is formed.

3. Then create a new "shadow" layer, set "stroke" to none, "fill" (#8E8E8E), and draw shadows from the Oval tool in the toolbox in the far lower neck.

　Drawing of ② Legs
1. First create a layer called "right leg", draw a box with the Rectangle tool, and then use the Subselection tool to select the node to adjust.
Tip: The stroke color is the same as the fill color and the neck color.

2. Box Select right Leg press CTRL + C to copy, create a new layer for the "left leg", press CTRL + V to paste the image in the appropriate position, in the case of the image is selected, select the menu "Modify" → "deformation" → "horizontal flip" command, the original right leg image flip over and adjust the position can be.

　　Drawing of ③ feet and shadows
Let's take a look at the completed feet and shadows:

1. Create a new three layer, which is named "Right foot", "right foot Shadow", and "right foot ring" from bottom to top.
2. Click to select the right foot layer, select Pen tool in the toolbox, set Stroke color (#245CD0), fill Color (#86C2FF), and draw the shape with the Pen tool and subselection tool to adjust the right foot.

3. Select the stroke line of the right foot, press Ctrl+x to cut it down, select the right foot ring layer, and press Ctrl+shift+v to paste to the current position.
Tip: Separate the stroke line and fill color of your feet to make it easier to draw shadows on your feet.
4. Select the right foot shadow layer to draw and adjust to the shadow shape, because there is a "right foot" stroke line occlusion, so the side of the pull aside is not too careful.

5. Finally, the use of Copy and paste and menu "Modify" → "deformation" → "horizontal flip" command to make another foot and shadow can be.

　　Drawing of ④ Skirts

1. Skirt pendulum, skirt "stroke color" for #a50855, skirt pendulum "fill color" for #ff80c1, skirt body "fill color" for #ffb3d9, than skirt pendulum slightly lighter. The method of drawing is not more than this, you can refer to the source file using the Pen tool and part of the selection tool to draw and adjust. The figure below is the skirt, skirt and final synthesis.

　　Drawing of ⑤ skirt

1. Skirt 1 is a triangular bow, first draw a square, using the "subselection tool" to move the lower right corner of the square node to the left, the last fill color, a bow on the production completed, and then use the "copy" + "Horizontal flip" method to make another bow.

2. Dress 2 is a cute little bunny in the skirt, the bunny is made up of ellipses, circles and dots and lines. First, the oval tool is used to draw a long oval filled with white color as the ear of the rabbit, after copying another ear, using the "freeform tool" rotation to form another rabbit ear.

3. Finally, the use of "elliptical tool" to draw the rabbit's face, eyes, using the "line tool" and "part of the selection tool" To adjust the rabbit mouth, the child's body part of the production completed.

Complete the body part of the production, remember to press the CTRL+S key to save!

　　(2) Head drawing

The final effect is as follows:

　　Step:① with a shaded face to draw the ② with a gradient face to draw the ③ face to draw the ④ ear to draw the ⑤ hair ⑥ the drawing of the ⑦ plait of the draw of the Ribbon of the draft ⑧ braids of the drawing

1. In the Select menu, insert > New symbol (shortcut key is Ctrl+f8), insert a graphic symbol named "Head".

2. After the component is created, it is automatically entered in the head component, and the layer name of Layer 1 is clicked to rename it to face.
(Hint: For each layer, each component name is convenient animation production and editing, lest confuse.) ）

3. In the Toolbox, select Ellipse Tool, and then set the stroke color (#D67D7B) in the color option below the settings, the fill color is (#FFEBEF), and the stroke height is set to 2 in the property panel below.

4. Using the Ellipse tool to draw two circles in the workspace, the great circle is the upper half of the head, and the small oval is the face of the protruding mm.

5. Select the selection tool in the Toolbox and click on the red line that intersects the two circles to delete it.

6. Select the Subselection tool in the Toolbox, select the line on the cheek, make some changes, select the entire face, press the CTRL+G group, and then lock the layer.
(Hint: Select a node and drag two handles to adjust the curvature of the curve.) To adjust the side, press the ALT key and drag the appropriate node. ）

① with shaded face drawing
1. Create a new layer named "Face Shadow." Draw the adjustment knot with the pen tool and subselection tools as a shadow, with a stroke of none, and a fill color of (#FFCCCB).

② with gradient face drawing
Tip: Click the Eye button on the face shadow layer to hide, use CTRL + C (copy) and Ctrl + V (paste) and ctrl+shift+v (paste from the original position) to speed up editing.
1. Hide the face shadow layer, and then select and copy the contents of the face layer.
2. New face 2 layer, press Ctrl+shift+v to paste the image in place and select it, press SHIFT+F9 (also available in the menu "window" → "Color mixer" command) to bring up the "Color mixer" panel, set "fill style" to "line", set two gradient values of #ffcccb and # Ffebec, adjust the position of the color block.

3. Fill with the paint bucket tool in the toolbox, and then adjust the direction and position of the gradient with the Fill warp tool.

The drawing of the ③ cheek
1. Create a new layer named "Face." Using the Ellipse tool, draw a "no strokes" (that is, the outer box), the color value is (#FFDFF7) of the circle.
2. Copy two such circles and resize, set one of the color values (#FFC7DE), and the other white (a high light for the face).

3. Use the "copy" + "Flip horizontally" method to make the face on the other side.
(Small knowledge: There are two ways to copy, one is to use CTRL + C (copy), Ctrl + V (paste). The other is to use the Select tool to select the object and then press the ALT key when you drag. ）
The drawing of ④ ears
1. Create a new layer called "ear". Use the Ellipse tool to draw a stroke color value (#D67D7B), the Fill color value is (#FFEBEF) the circle as the ear, in order to show the level of the ear, another "no stroke" color, "Fill Color" value is (# FFCFCE) of the inner ear.

2. Use the Copy method to draw another ear, adjust the appropriate position of the ear, and finally use the "arrow tool" to lengthen the contour of the ear to the face.
(Note: the "ear" layer, under the "face" layer.) ）

The drawing of ⑤ hair
1. Lock the other layer and create a new two layer, named "left", "right", select "Oval Tool", set "Stroke Color" (#6F2420), "Fill Color" (#C0854D), use "three-circle subtraction" to draw the left hair, adjust and then use the "pen tool" to draw the right hair, Adjust to fit shape and press Ctrl+g to combine it.

2. Then create a new two layer, named "Left 1", "right hair 1, using the Pen tool to draw the dark part of the right hair, its" stroke color "Ibid," Fill Color "(#A55000), using the same method to make" left 1 ", and finally with" part of the selection tool "to adjust.

Drawing of ⑥ Hairpin
1. Draws a long ellipse with the Ellipse tool, setting the stroke and fill colors (#A51408, #FF00CE) respectively. Use the line tool to connect the long ellipse to the left and right sides, and then replace the "Select tool" to select the lower semicircle and press the DELETE key to delete it.

　　

2. Remove the use of the "toolbox" in the "arbitrary deformation tool" to the semicircle up and down, forming a long semicircle, this is the top half of the clip.

3. Use the above method to make another clip part, put in the middle of just making good hairpin, carry out delete, form have an ellipse empty hairpin.

4. Select the Ellipse tool in the Toolbox first. Set the stroke color and fill color (#A51408, #FFCF00), draw a circle, divide the circle into two halves, draw a rectangle with the rectangle tool, and use the Freeform tool to match the shape to the semicircle, press CTRL + G to combine to synthesize a nice hairpin.

5. Then use the "elliptical tool" and "rectangular tool" to draw small dots and diamonds, as a clip on the decoration, draw out after the combination, and then reduce the position of the clip on the surface of the appropriate place.

6. Finally put the clip in the right position of the hair.

Drawing of ⑦ Braids
1. Create a new "right braid" layer, select Pen tool, set stroke color (#916360), fill Color (#C0854B), draw 1th Braid to the right, set stroke color to (#6F2420), fill color to (#A55000) draw the 2nd braid.

2. Create a new "left braid" layer to copy the 2 pigtail in the "right braid" and make adjustments using the "Modify" > "Transform" > "Flip Level" in the menu. The braid is completed by placing two braids in the right position.

The drawing of ⑧ plait clip
1. Create a new layer, named "Hairpin", and select the Text tool in the Toolbox. Use the Input method of "special characters" input "★" symbol, adjust the appropriate size, press CTRL+B to break it, fill "stroke color" for yellow, "Fill color" for white, the final adjustment of the STAR Group (CTRL + G).

Input for special characters

2. Draws two rectangles with the rectangle tool in the toolbox, with stroke and fill color respectively: (#C60063) (#FF0084), (#3171EF) (#319AFF). Put the stars and the rectangle reasonable together, forming a beautiful braids clip.

3. Box Select a group of Braid (Red), press Ctrl+g to combine it, and then click Freeform Tool in the toolbox, place the mouse in the corners of the object "braid", and rotate when the rotation icon appears. Do the same for another set of braid (blue).

4. Using the "Selection tool +alt Key" Move method to copy the braid, the two sets of braids are placed in the appropriate position.

　　(3) Drawing of hands, mouth, eyebrows and eyes

　　step:① hanging hands draw ② close hands to draw the ③ of the mouth of the drawing ④ draw open mouth ⑤ eyebrows drawn ⑥ prayer before the drawing of the eyelashes ⑦ prayer before the eyes of the drawing ⑧ praying after the eye of the drawing of prayer after praying the ⑨ after praying the eye of the drawing

To ensure that the image size is not misaligned, you can create a new layer in the head component, draw it, and then convert it to a component.

　　① 's hands hanging down to draw
1. In the head component, create a new layer named "Hand down". Draw the left hand with the pen tool, set stroke color (#D47C78), fill Color (#FFEBEC), and make the other hand with copy + flip horizontally.

2. Right-click the selected hands after the drawing is finished, and select "Convert to Symbol ..." in the menu to convert it into a "hand hanging" graphic component.

② with close hands drawn
1. Create a new "close hands" layer, draw a circle with the Ellipse tool, press CTRL+G to combine it, and then use the "copy" and zoom size to finally adjust to the hands.

2. Right-click on the selected hands after drawing, and select "Convert to Symbol ..." in the menu to convert it into "close hand" graphic elements.

The drawing of ③ mouth
1. Create a new layer named "Mouth", set its stroke color to (#D27D78) in the properties panel below, and "stroke height" to 2 to draw a horizontal line as the mouth.

2. Convert it into a "mouth" graphic component.

④ to draw open mouth
Hide the "mouth" layer just drawn, create a new layer named "Open Mouth", draw open mouth with ellipse tool, "Stroke color" and "Fill Color" (#D27D78) and (#FFE7E7), and finally convert it to "open mouth" graphic symbol.

The drawing of ⑤ eyebrows
The eyebrows are done using the line tool, the arrow tool, and the copy and horizontal flip, and the final combination is converted to an eyebrow graphic component.

⑥ the drawing of eyelashes before praying
In the animation to use before praying and praying two kinds of eyes and eyelashes, here first look at the prayer before:
1. Create a new layer called "eyeliner", draw four nodes with the pen tool, have no strokes, fill black, make adjustments with the Arrow tool and Subselection tools, and then use Copy + flip horizontally to make eyeliner on the other side.

Tip: Create a new layer called "Eyeliner 2", will do a pair of eyeliner in place to copy and "lock" hide standby.
2. Create a new layer on the eyeliner layer called lashes, draw with the pen tool, and adjust with the Select Part tool. The stroke color is none, and the fill color is black.

4. Then use the "copy" + "Horizontal flip" method to make the other side of the eyelashes, and finally the "eyeliner" layer and the "Eyelash 1" layer of content into the "eyelash" of the graphic components.

⑦ before praying the eyes of the drawing
1. After you lock another layer, create a new layer and name it "Eye", and after you select the Oval tool, set the stroke color to black in the property panel, and stroke height to 2.
2. Fill color is set in the color panel mixer. Set its fill type to linear, the left color is (#7B1A1F), the right color block color (#B18989), draw the eye frame, and then use the Fill deformation tool to adjust the direction and radius of the gradient, Copy out another eye frame and put it in the right place.

Tip: In order to prevent the graphics overlap, you can first layered production, and then the combination of graphics and then placed on the first floor.
2. Create a new layer named "Eye kernel", use the "oval tool" and "freeform tool" to draw adjust the eyes and high light, and copy out the other one in the right place.

3. After the combination, converted to "eye 1" graphic elements.

4. After entering the "Eye 1" component, press CTRL + A to select and copy, create a new "eye 2" graphic elements, press Ctrl+shift+v in situ paste, the eyes of the largest white high light moving up in the side.

⑧ the eyelashes after prayers
1. Displays the "Eyeliner 2" copied in step ⑥, creating a new layer on this layer for "Eyelash 2", drawing with the "line tool", "stroke height" to 2, "stroke color" as black, and adjusting with the "arrow tool".

3. Use "copy" + "Horizontal flip" method to make the other side of the eyelashes, "Eyeliner 2" and "Eyelash 2" on the composition, selected and converted to "Eyelash 2" graphics components.

⑨ after praying the eyes of the drawing
1. Create a new layer and name it "Eye 2", using the ⑦-step eye drawing method to draw the eye, the difference is the position of the eyeball and the high light.
2. Below is the eye black and white high light production, the use of "elliptical tool" and "arbitrary deformation tool" to draw adjustments, and then make use of the reproduction method.

3. Using the "Copy" method to make the other side of the eye, combined into the "eye 2" graphic elements.

Second, the production of simple frame animation

Before making also prepare an animated sound file, the sound file in the source file compression package has, the name is 1.mp3.

The prayer animation is divided into "prayer before" and "after praying" two parts, in this animation most of the use of "frame-by-step animation" produced. "Pray before" is 1-9 frames, "after praying" is 10-45 frames, in the previous part we have made the various components, now hands-on into the animation post-production.

① the animation before praying
1. First press Ctrl+f8 to create a movie clip called "Prayer," where we make the animation in this movie clip.

2. Click the Insert Layer button on the timeline to insert 4 layers, and change to "sound", "mouth", "Front eye", "front brow", "Prayer Body".

3. Choose "File" → "import" → "Import to Library" in the menu, select 1.mp3 in the folder to import.

4. In the sound layer frame 9th, press F6 to insert Keyframe, and then select 1.mp3 in the Sound drop-down menu in the property bar below, which defaults to this effect.

5. Press F5 on frame 9th until the music wave frequency is displayed. (In fact, this step can be omitted, even if the display is not complete, the music will play in the animation full)

6. Select the "Before Praying body" layer, drag the "head" in the library and place it in the right place.

7. Using the "Eye 1" and "Eye 2" components alternately in the "Prayer Front eye" layer, the "pre-prayer eye animation" is made, use the "eyebrows" components move up and down in the "front eyebrows" layer to make a frame-by animation, and finally put the "mouth" components on the "mouth" layer, the animation before the production finished.

② after praying for animation production
1. Then insert three layers, named "After Prayer eyebrows", "Prayer Head", "Prayer Body", in the 10th frame of the "prayer Body" layer, press F6 to insert the key frame and drag the "body" element in,
2. On the timeline, click Edit Multiple frames, drag the start drawing brackets to frame 1th so that you can see the position of the "before praying" body, move the "body" element to coincide with the original body position, and then press F5 at frame 45th.

3. In the "after the head" layer 10th frame the "Head 2" component dragged in, also in the 45th frame press F5, using the "edit multiple frames" effect to align the head.
4. In the 10th frame of the "prayer eyebrow" layer, drag the "eyebrows" component into the 1th, using the top and bottom moving eyebrows by frame method to make up and down eyebrows movements.

③ Add commands to animations

Then insert a layer, named "command", in frame 45th, press F6 to insert the keyframe, open the Action panel, and enter:
Stop ();
Fscommand ("Quit");

Tip: The QUIT command is used to close the player's. swf and. exe files, which have no parameters and are written directly as: Fscommand ("quit");.

④ Animation Publishing

Finally back to the main scene, the "Prayer" of the movie components dragged to the appropriate location, save the Flash file and press "CTRL + RETURN" for testing, will be in the Flash source file root directory to see the test animation, Finally, double-click the generated. swf file to test the effect of automatic shutdown after the animation is finished, let's try it! Finally hope that friends to support Tenkine Design online, here to see the dream published articles!