If there is no foundation, take a look at the following to learn: (the picture is in the address)
Example description:
The effect of making a birthday card in this example. The concrete effect is that behind the birthday cake, a red heart keeps beating, countless shining little stars keep blinking, and birthday cards ""and "I wish you happiness" flash alternately; Missing words form a scrolling subtitle, which slowly scrolls from the bottom of the screen to the top. In addition, there is wonderful background music. The effect diagram is as follows:
[Learning Guidance]: 1. This example increases the technical difficulty when making it. Therefore, readers should overcome their fear of difficulties when learning for the first time, and when this example is finished, you will become a brand-new you. Readers can temporarily ignore the aesthetics of graphic components when learning for the first time, that is, they can even replace the actual components with an ellipse or a rectangle. Readers should mainly focus on learning the technology of production, and mastering the technology skillfully can achieve the rapid effect of drawing inferences from one instance to another.
2. For beginners to further beautify graphics, you can wait until we have mastered the practical application technology, and after learning many examples in this book, you will have a great improvement in drawing. This is another story.
Operating steps:
[1], new document
Click the File/New command to create a new document;
Click the Modify/Document command; In the document properties dialog box, set the size to 400×300 and the background color to green; Click the OK button.
[2] Make a "background layer":
Double-click the layer1; Name it "background layer";
Set the stroke color as rose red, the stroke height as "1" and the fill color as pink; Use the rectangle tool to draw a rectangle of any size on the stage; As shown in the figure below:
Then use any deformation tool to resize it to the same size as the stage.
Click the lock button behind Background Layer to lock the layer. The effect is as follows:
The final stage effect is as follows:
[3] Making a "content layer":
Select "background layer"; Click the "Add New Layer" button on the timeline to add a new layer; Then double-click the layer; Name it "content layer";
Note: As for the placement of this specific content, we don't care for the time being. We only add this layer to facilitate the creation of components needed in birthday cards. Because the "background layer" is locked, the subsequent process of creating the required components is completed within the 1 frame of the "content layer". Finally, let's edit the layer.
[4] Making "Red Heart" movie editing components:
Write in front: When actually making the following components, the reader may not know the size of each component. You won't worry about this for a while. First, operate according to the estimated size of each component instance in production. If it is not suitable, just wait for the scene to be arranged, and then adjust it with any deformation tool. So you can boldly estimate its size. In short, don't be afraid to make mistakes. If something goes wrong, you should try to solve it. Generally, mistakes are finally solved.
There are two ways to draw a red heart: (1) set the stroke color to "rose red" and the stroke height to "1", and then draw a heart directly with the pencil tool in the toolbar; Methods (2) Draw a heart-shaped outline according to the method in step 27 of the Memorandum on Fundamentals and Improvement in this book;
The heart-shaped outline after drawing is shown in the following figure:
Click the Fill tool in the toolbar; Select the "Linear Gradient Color" button on the lower left from the pop-up color box, that is, the ""icon.
Execute the "Window/Color Mixer" command to open the color mixer panel; Note that there are two color blocks at the bottom; As shown in the figure below:
Double-click the rightmost color block and select red in the pop-up color box;
Then select the paint bucket tool in the toolbar, that is, the icon; Use it to fill the heart-shaped outline on the stage; The effect after filling the red linear gradient is as follows:
Select all the hearts (including border lines) in the above picture with the selection tool; Press F8 to open the Convert to Component dialog box; Enter "Heart Map" in the name, and click "Heart Map" radio; Click the OK button;
Then use the selection tool to select the "heart-shaped graphics" graphic component just made; Press F8 again to open the Convert to Component dialog box; Enter "Heart Movie" in the name, and click the "Movie Clip" option; Click the OK button;
Double-click to enter the editing state of "Heart Movie" movie clip; Select frame 15 and press F6 to insert "key frame";
Select the cardiogram of frame 15; Click any deformation tool in the toolbar, and the graphics on the stage will have the following effects:
Small file: Note that there are eight small black squares in the picture above, which are the eight handles of any deformation tool, through which the graphics can be scaled (that is, enlarged, reduced or rotated). At the same time, there is a small dot in the middle. Its function is that when scaling the graph, the change of the graph always changes around the point. The position of this point can be changed. Drag it with the selection tool to change its position.
Well, let's keep trying.
Hold down the Shift key on the keyboard, place the mouse arrow on the rightmost black square of the top three handles, and drag it inward when the arrow shape changes to "",so that the whole heart-shaped figure can be scaled down along the central dot. The effect is as follows:
Select 1 frame with the selection tool; Right click; Click the Create Tween command; In this way, a heart-shaped animation clip is created from big to small.
The timeline of the "Heart Movie" editing area is shown in the following figure:
Click the "Scene 1" button to return to the stage of the main scene.
At this time, you can press "Ctrl+Enter" to test the actual effect of the movie. If you are not satisfied, you can adjust it again.
Well, such a beating heart is made.
Finally, delete the movie clip of "Heart Movie" from the stage. The purpose of this is to easily create other subsequent components. Careful readers may ask, if I delete it, won't my efforts be in vain? It doesn't matter, it's just deleted from the stage and the component is still in the library. After the following components are completed, we can take them out of the library and put them on the stage.
[5] Making a "balloon" graphic component:
Select 1 frame of "content layer";
Set the stroke color to rose red, the stroke height to "1" and the fill color to none, that is, "";
Select the ellipse tool in the toolbar and draw two balloon-shaped ellipses on the stage at will. As shown in the figure below:
Refer to the figure below, use the selection tool to select the redundant border, and press the delete key on the keyboard to delete it.
Click the fill color in the toolbar, and select the red and white radioactive gradient color from the pop-up color box, that is, ""; Then fill the left ellipse with a paint bucket tool; Then click the fill color in the toolbar again, and select the green and white radioactive gradient color from the pop-up color box, that is, ""; Then fill the ellipse on the right with the paint bucket tool; The effect is as follows:
Then use the fill deformation tool in the toolbar to select the ellipse on the left; The effect is as follows:
First, drag the second handle on the right outward to increase the bright area of the ellipse; Then drag the center dot upward to adjust the position of the bright part; The effect is as follows (of course, it can be further adjusted until it is satisfactory):
Then use the fill deformation tool in the toolbar to select the ellipse on the right; Adjust the range and position of its bright area by the above method; The effect is as follows:
Then select the pencil tool in the toolbar; And click ""in the options at the bottom of the toolbar; Select the "Smooth" command from the pop-up menu, that is, it becomes a ""shape; Then draw two lines for the two balloons; As shown in the figure below:
Finally, use the selection tool to select all the figures of the above two balloons; Press F8 to open the Convert to Component dialog box; Enter "Balloon" in the name and click the "Graphics" option; Click the OK button;
Then use the selection tool to select the Balloon graphic component and delete it directly from the stage.
[6] Making moon graphic components:
Select 1 frame of "content layer";
Set the fill color to none, the stroke color to rose red, and the stroke height to "1"; Draw a perfect circle on the stage with the ellipse tool (to draw a perfect circle, hold down the shift key on the keyboard first and then draw a circle) and an ellipse; As shown in the figure below:
Refer to the figure below, and then use the selection tool to select the extra border; Then press the delete key on the keyboard to delete them; (You can select and delete one by one)
Set the filling color to white, and use the paint bucket tool to fill the interior of the moon with white;
Finally, use the selection tool to select all the above figures; Press F8 to open the Convert to Component dialog box; Enter "Moon" in the name and click the "Graphics" option; Click the OK button;
Then use the selection tool to select the Balloon graphic component and delete it directly from the stage.
[7] Making Star Movie Editing Components:
Select 1 frame of "content layer";
Click and hold the rectangle tool in the toolbar, and a submenu will pop up; Click the "Polygon Star Tool" command in the menu, that is, the rectangular tool in the toolbar will become a ""shape;
Press Ctrl+F3 to open the property panel; Click the ""button; Then a dialog box will pop up; Set according to the following figure.
Then click OK;
Draw a star on the stage (be careful to draw it smaller, after all, the star is far away, so it's smaller, isn't it? ); As shown in the figure below:
Do you still remember that "red and white radioactive gradient" and "green and white radioactive gradient" were filled in the production of "balloon" graphic components? According to this method, use the paint bucket tool and fill the inside of the star with the icon ""with "black and white radioactive gradient"; After filling, you can use the filling deformation tool to adjust the position and range of its bright area; The final effect is as follows:
Finally, use the selection tool to select all the above figures; Press F8 to open the Convert to Component dialog box; Enter "Star" in the name and click the "Graphics" option; Click the OK button;
Then use the selection tool to select all the above graphics; Press F8 to open the Convert to Component dialog box; Enter "Twinkling Stars" in the name, and click "Movie Clip" radio; Click the OK button.
Double-click to enter the editing area of "Twinkling Stars" movie clip; Select the fifth frame of Layer 1; Press F6 to insert a keyframe; Select the stars in the frame with the arbitrary deformation tool, and then reduce the stars to the minimum again;
Confirm that the star in frame 5 is selected; Press Ctr+F3 to open the property panel; Click the "Alpha" command after "color" and set its value to "0%"; Then select 1 frame; Right click; Click the Create Tween command; The timetable is as follows:
Click the "Scene 1" button to return to the stage of the main scene.
At this time, you can press "Ctrl+Enter" to test the actual effect of the movie. If you are not satisfied, you can adjust it again.
Well, such a twinkling star was made.
Finally, the movie clip of Twinkling Stars was deleted from the stage.
[8] Making birthday cake graphic components:
Select the ellipse tool; Set the stroke color to rose red, the stroke height to "1" and the fill color to none; Draw the following three ellipses on the stage:
Then use the line tool to refer to the two straight lines in the picture below:
Use the selection tool to select the redundant border in the above picture; Then delete; The effect is as follows:
Then select the pencil tool in the toolbar; And select the "Smooth" option under the options at the bottom of the toolbar, namely ""; Draw two curves according to the picture below (if it is very long, you can use the selection tool to select the redundant part to delete):
Fill different parts of the cake with different red or white according to the picture below:
Select all the above figures with the selection tool; Press Ctrl+G to combine the above pictures; Press F8 again to open the Convert to Component dialog box; Enter "Cake" in the name, and click the "Graphics" radio option; Click the OK button;
Then use the selection tool to select the cake graphic above; Delete it from the stage.
[8] Making candle graphic elements:
Select 1 frame of "content layer";
Double-click the rectangle tool in the toolbar; A dialog box will pop up; As shown in the figure below:
Set the fillet radius to "6"; Click the OK button.
Open the property panel; Set the fill color to none, and select the brush stroke color as rose red; Hold down the left mouse button in an empty place in the scene and drag it to the lower right corner to draw a rectangle without fill color and rounded corners. As shown in the figure below:
Then select the ellipse tool and draw an ellipse as a flame on the top of the above picture; As shown in the figure below:
Click the selection tool in the toolbar; When no flame is selected, move the arrow near the edge of the flame. When the arrow turns into an arc, press the left button and drag it to further beautify the shape of the flame. As shown in the figure below:
If you are not satisfied with the above picture, you can further beautify it; This is just for demonstration, so I won't beautify it.
Next, execute the "window/color mixer" command; Open the palette; Select the fill color, and select the type followed by "linear"; Click once in the blank space between the two color blocks you see, and then add a new color block; As shown in the figure below:
Double-click the first color block and select "Blue" in the pop-up color box; Double-click the second color block and select "light blue" in the pop-up color box; Double-click the third color block and select "Blue" in the pop-up color box; The effect is as follows:
Then select the paint bucket tool in the toolbar and fill the candle body with linear gradient color; As shown in the figure below:
Similarly, the candle flame fills the linear gradient of "yellow, light yellow and yellow"; The final effect of the candle is as follows:
Select all the above figures with the selection tool; Press F8 to open the Convert to Component dialog box; Enter "Candle" in the name, and click the "Graphics" radio option; Click the OK button;
Select a graphic element; Press the delete key on the keyboard to delete it from the stage;
[9] Layout scene
Select 1 frame of "content layer";
Press Ctrl+L to open the Library panel;
The following steps are to drag and drop the components in the library onto the stage in turn;
First, drag and drop the "Heart Movie" onto the stage; Confirm that only movie clips are selected; Then execute the "Window/Deformation" command to open the deformation panel; As shown in the figure below:
First, press the "relative to the stage" button; Then click the "vertical alignment" and "horizontal alignment" buttons in the alignment item in turn; The purpose of this is to make the "heart piece" right in the center of the stage;
Select "pericardium" again; Click on the movie with any deformation tool, and eight control points will appear around the movie; Hold down the Shift key on the keyboard, put the mouse arrow on any handle at the four corners, and drag it outward; The purpose is to enlarge the "pericardium". (Its size is slightly smaller than the stage)
Then drag and drop the "cake" graphic element onto the stage; Open the alignment panel and adjust the position of the "Cake" component in the center of the stage by adjusting the clip of "Heart Movie".
Then use any deformation tool in the toolbar to select the "cake" graphic component and reduce its graphics appropriately; The purpose is to make it smaller than the "pericardium";
Then drag and drop the "candle" graphic element onto the cake; First, select the "candle" component with any deformation tool, and reduce the size of the component appropriately; The current scenario is as follows:
Use the selection tool to select the smaller candle in the above picture; Hold down the Alt key on the keyboard and drag it to the right at the same time, thus copying another candle; Use this method again, copy another one, and there will be three candles in total. Use the selection tool to select each candle and adjust their position to the appropriate position.
Then drag and drop the "balloon" graphic component from the library to the right position of the stage;
Then drag the movie clip of Twinkling Stars from the library to the left side of the stage; The current effect is as follows:
Select the stars in the above picture with the selection tool; Hold down the Alt key on the keyboard and drag at the same time, thus copying another star; Then use this method to copy more stars and put them on the stage;
Select the moon in the above picture with an arbitrary deformation tool; Reduce the size of the moon appropriately through the handle; Then use any deformation tool to select some stars and change their sizes appropriately. The final effect is as follows:
This saves a lot of operation steps to see the details.
[XI] Test the movie: Finally, press "Ctrl+Enter" to test the actual animation effect of the movie;
[12], organizing components: Finally, let's organize the components in the library. Press Ctrl+L to open the Library panel; Click the "New Folder" button below, which is the ""icon; Create two new folders: clip folder and graphics folder. Then drag and drop all movie clip components (i.e. ""icon) into the "clips" folder; Drag and drop all graphical components (i.e. icons) into the graphical folder;
Save the document: click "File" in the menu bar; Click the Save command again;
13. Exit the document: click the × button in the upper right corner of the window to exit the document.
[Design idea]: The reader deliberately increased the difficulty of making this example, mainly to let the reader learn the maximum technical knowledge through this example, so as to achieve the rapid effect of drawing inferences from others in ten days. In fact, if it's just to make a birthday card, it's too simple. All the graphics can be drawn directly with the pencil tool, but the graphics are a little rough (flash itself only focuses on cartoon characters), plus a movie editing component of "beating heart". But if it is made in this way, readers can only learn a little superficial knowledge from the production of this example. The biggest effect is just a waste of time.
[conclusion]:
1. The tools used in this example are: selection tool, straight line tool, text tool, ellipse tool, rectangle tool, pencil tool, arbitrary deformation tool, filling deformation tool, paint bucket tool, brush stroke color tool, filling color tool, smoothing tool and polygon star tool.
2. The panels used are: property panel, palette panel, alignment panel, library panel, etc.
3. The technical components used are: changing the shape of an object without selecting it, zooming function of any deformation tool, selecting or deleting an object with a selection tool, drawing a rectangle, drawing a rounded rectangle, creating a graphic (movie clip) component, adding layers, inserting and editing frames (keyframes and blank keyframes), locking layers, setting and filling linear gradients, and aligning objects. Scaling objects around the center of the circle, using the Fill Deformation Tool, adding and matching color blocks, creating movie clips, setting property panels, saving and exiting documents, making motion tweens, making shape gradient animations, setting document background colors, making scrolling text, importing sounds (adding and setting properties) and so on.