The following is the operation method and introduction:
Flash basic operation
Flash is the most popular interactive vector animation software at present, and the Flash movies made with it have been widely used in countless websites and many related fields. The examples in this chapter will introduce the basic operation of Flash, so that beginners can quickly understand and master related concepts and operations. Example 1 introduces the working interface of Flash, which makes readers familiar with the working environment of Flash. Example 2 shows how to create a Flash movie. Thus, the creative journey of Flash officially began. Example 3 introduces how to use the tools provided by Flash to draw and edit graphics. Example 4 introduces the operation of the object, which enhances the user's further control over the animation materials. Example 5 introduces the classification of Flash animation, so that readers can have a macro understanding of Flash production. Example 6 introduces how to release Flash movies, so that the produced Flash movies can be really applied to various occasions.
Example 1 Setting Work Interface
Start FlashMX, and its working interface is as shown in figure 1. 1.
Figure 1. 1 Flash MX working interface
The operation interface of FlashMX consists of menu bar, toolbar, status bar, various panels, toolbox, etc. In addition, FlashMX also has interface elements such as stage, workspace and timeline window.
This example makes readers familiar with the interface of FlashMX through a series of simple operations, thus laying the foundation for further study.
See figure 1. 1.
(1) When you start Flash by any method of starting an application, the working interface of Flash will be displayed and a "Welcome" window will be displayed, as shown in figure 1.2. It can be seen that Flash can provide corresponding functions for three types of users, and different users can use corresponding help information to assist learning.
Figure 1.2 "Welcome" window
(2) Click the "Close" button in the upper right corner to close the "Welcome" window and display the complete Flash interface. In the middle of the interface is the stage, similar to the canvas in other software, users can define the size of the animation and the color of the stage. The stage is an area that displays the content of each frame in the movie, where you can draw images directly or arrange imported images on the stage. The gray area outside the stage is the work area, which is similar to the background of a theater and can also be used.
(3) Above the stage is the timeline window, which controls the time dimension of the whole animation. The timeline window contains different layers and different frames for organizing animation. Move the playhead on the time axis, and the content in the animation will change with the different frames, and the animation will be generated after continuous playback. The main components of the timeline window are frame, layer and playhead, as shown in figure 1.3.
Figure 1.3 Timeline Window
Drag the upper left corner of the timeline window on the interface of FlashMX, and drag the windows arranged below the toolbar into floating windows. If there are many layers and frames, you can drag the scroll bars at the right and bottom of the window to display the invisible layers and frames in the timeline window.
If you need to change the size of the timeline window, just move the mouse to the bottom border of the timeline window. When the mouse pointer changes to a two-way moving arrow, drag it up and down.
If you click the Frame View pop-up menu button in the upper right corner of the timeline window, you can also change the display effect of each frame in the timeline window.
(4) Below the stage is the property inspector, which can conveniently access the properties of the currently selected object on the stage, workspace and time axis, thus modifying the properties of the object. According to the current selection, the Property inspector can display the property information of the current document, such as text, components, shapes, bitmaps, videos, groups, frames or tools. For example, figure 1.4 shows the property inspector of the current document.
Figure 1.4 Document Property Checker
(5) On the left side of the stage is a toolbox. You can use tools to create and edit various graphics. Click a tool to select it, and then you can use the Property inspector or the Options area at the bottom of the toolbox to set tool options. The usage of each tool will be described in detail in Example 3.
(6) On the right side of the stage is a panel group, including multiple option panels, which are used to set the properties of objects. For example, the Color Mixer panel can set color options, and the Components panel can add and set form objects. Click the title bar of any panel to collapse or expand the corresponding panel.
In addition to the panels already displayed in the interface, you can also use the corresponding commands in the Window menu to open some panels and become floating panels. For example, the Information panel can set various basic information attributes of the selected object, and the Deformation panel can set the deformation attributes of the object.
(7) On the property inspector is an action panel, which is used to add ActionScript scripts to movies. By default, it is collapsed and can be expanded by clicking the title. To make an interactive movie, you need to add an ActionScript script to the animation.
(8) If you want to show or hide the interface elements of Flash, you can use the commands in the Window menu. For example, you can use the commands in the Toolbars submenu of the Window menu to show or hide different toolbars, or you can learn the corresponding shortcut keys by viewing the Window menu.
Example 2 Creating a Flash Movie
When making Flash movies, you can follow the following workflow: first, create a movie file, then draw or directly import graphic images in it, then arrange these contents on the stage, use the timeline to create animation effects, and if necessary, add ActionScript scripts to make interactive effects.
It can be seen that creating Flash movie files is the first step of all work. By default, a new movie file is automatically created after starting Flash. Users can also use the "New" command in the "File" menu or the "New from Template" command to create new files.
This example creates several Flash movies through a series of operations, which makes readers familiar with the method of creating new movies.
See figure 1.5.
Figure 1.5 Create a new document
(1) Start Flash, and it will automatically open a new movie file. Click the "Size" button in the document property inspector to open the "Document Properties" dialog box, as shown in figure 1.6, where you can set the movie document properties (including document size, background color, frame rate, etc. ).
Size: Enter values in the Width and Height boxes to specify the size of the document. The default document size is 550×400 pixels.
Figure 1.6 "Document Properties" dialog box
Matching: Select a matching printer to set the stage size as the maximum available printing area, which is determined by the page size set in the Page Setup dialog box, and the page size minus the current margin is the printing area. Select the matching content, and automatically resize the stage so that it can just display the movie content (note that the movie content should be placed in the upper left corner of the stage in advance).
Background color: You can choose a color as the background color of the movie in the "Background color" box.
Frame rate: you can set the number of frames per second to play animation, which usually defaults to 12 frames per second. If you want to speed up the animation display, you can increase this number and vice versa.
Click OK to complete the document property setting. Select the File menu and the Save command to open the Save As dialog box, select the file saving path in the Save In box, enter the movie name in the File Name box, and click Save to complete the creation of the first movie file.
(2) Select the "New" command in the "File" menu to create a new document, set its document properties and save it.
(3) In Flash, you can also use templates to create movie files. The so-called template means that Flash completes some settings of animation, and users can choose a template or customize a template as needed to simplify the work of batch animation. Select New from Template from the File menu to open the New Document dialog box, as shown in figure 1.7.
Figure 1.7 "New Document" dialog box
Select a template in Category and Category Item, and click Create. At this point, the user can modify or add new animation content in the newly created document according to the prompts, thus completing the film production. For example, figure 1.5 is a Flash movie created when the template of "468×60 pixel advertisement" is adopted.
(4) Due to the limited number and content of built-in templates, users can save their own animations as templates, thus simplifying the animation production process and improving work efficiency.
After creating the Flash animation, select the Save As Template command in the File menu to open the Save As Template dialog box, as shown in figure 1.8.
Figure 1.8 "Save as Template" dialog box
Enter the name of the template in the Name box, select the template type in the Category box, and enter the description text of the template in the Description box. Click the "Save" button. Select New from Template from the File menu, and the user-defined template file name will appear in the New Document dialog box, as shown in figure 1.7. Select a template and click the Create button.
Example 3 Drawing and Editing Graphics
Classification of 1 Flash object
In Flash, you can create all kinds of objects, and when you create them, you must be able to distinguish them correctly. These objects determine whether the user can correctly set the animation mode of Flash tween animation, including:
Shape: the original graphic drawn by hand using the toolbox, without any type conversion. When you select a shape, the type of Shape is displayed in the Property inspector. In addition, static text input can be converted into shapes after being scattered twice (pressing Ctrl+B key or selecting "Separate" command in the Modify menu), and imported bitmaps can also be converted into shapes after being scattered.
Collection: The so-called collection refers to the objects generated by selecting more than two objects and selecting the "Combine" command in the "Modify" menu (or pressing the "Ctrl+G" shortcut key). The rectangle, circle and other graphics drawn by users using the toolbox are composed of two independent parts, namely, the outline (drawn lines, also called strokes) and the filled area. When you move it with the arrow tool, it will move. However, profiles cannot be moved together (except for selecting profiles and fills at the same time). If this object is converted into an assembly, it can not only avoid inadvertently modifying the integrity of the object, but also make the same class object easier to handle.
Text block: You can easily enter text by using the text tools in the toolbox. In the Text Property inspector, you can set various properties of text, such as font, font size, color, alignment, word spacing, style, etc. In addition, you can set three types of text in FlashMX, that is, ordinary static text, which can dynamically change the dynamic text of content and the input text of the form.
Components and examples: Components are reusable movie elements created by users, including graphics, buttons and movie clips. Once created, they will all be saved in the Library panel. If you drag them onto the stage, they will be converted into instances.
2.Flash drawing tool
Drawing tools in Flash toolbox are used to draw vector graphics, including line tools, ellipse tools, rectangle tools, pen tools, pencil tools and brush tools.
(1) line tool
You can use the line tool to draw a straight line. Click and drag the mouse on the workspace to draw a straight line. When drawing a straight line, if you hold down the Shift key, you can draw a horizontal or vertical straight line and a diagonal segment with an angle of 45.
(2) Elliptical tool
You can use the ellipse tool to draw ellipses and circles. Click and drag the mouse on the workspace to draw an oval shape. If you hold down the Shift key when drawing an ellipse, you can draw a circle.
(3) Rectangular tools
You can use the rectangle tool to draw rectangles and squares. The drawing method is the same as the ellipse tool. It can also draw a rounded rectangle by clicking the rectangle tool; Then click the "Fillet Rectangle Radius" button in the Options field of the Toolbox to open the "Rectangle Settings" dialog box, as shown in figure 1.9; In the Fillet Radius text box, enter the fillet radius of the rectangle; Click the "OK" button; Drag the mouse to draw a rounded rectangle.
Figure 1.9 "Rectangular Settings" dialog box
(4) Pen tools
The pen tool is used to draw Bezier curves with control nodes. The drawing principle of Bezier curve is that a line segment is determined by a central point (node) and two control points, and consists of more than two nodes, as shown in figure 1. 10.
To draw a Bezier curve without radian, that is, draw a straight line, you can first click the left mouse button at the starting point of Bezier curve to create the first node, and then click the left mouse button at the end point to create another node, so that you can draw a straight line.
Figure 1. 10 Bessel curve
When drawing a polygon with Bezier curve, as long as you click the left mouse button at the turning point, you must return to the first node when creating the last node, so that the whole drawing area can be closed.
When drawing a curved Bezier curve, every time you click the left mouse button to add a node, you must hold down the left mouse button and drag. At this time, two handles will appear, and then you can control the shape of the curve by adjusting the positions of the handles.
Before drawing the first node of Bezier curve with pen tool, the shape of mouse pointer is "". Click the left mouse button to draw a node, and the mouse pointer will change to ""; When the mouse pointer points to a node, click the left mouse button to clear the node after the mouse pointer becomes a ""shape; When the mouse pointer points to any position (non-node) on the Bezier curve, the mouse pointer will change to "". Click the left mouse button to add a node.
(5) Pencil tools
Using the pencil tool, you can draw lines and figures at will, choose different drawing modes, as shown in figure 1. 1 1, and decide the mode that lines will simulate hand-drawn trajectories, that is, Flash will modify the drawn figures to different degrees according to the selected drawing mode.
Figure 1. 1 1 pencil tool drawing mode
Straightening mode: After using this drawing mode, no matter what shape is drawn, Flash will automatically straighten, that is, convert it into the closest geometric shape such as triangle, ellipse and rectangle.
Smooth mode: Using this drawing mode, you can draw a very smooth curve.
Ink mode: freeform curves can be drawn in this drawing mode.
If you want to draw a horizontal line or a vertical line, just hold down the Shift key and drag.
(6) Brush tool
Using the brush tool can draw all kinds of graphics, which is actually a filled area, so the brush tool can not only draw some special effects (calligraphy effects), but also fill the drawn graphics with colors. Brush tools have different shapes, sizes and modes, as shown in figure 1. 12.
Brush pattern
Brush size
Brush shape
Figure 1. 12 Properties of Brush Tool
Standard drawing: brush directly on the line and filling area.
Pigment filling: brush in the filling area and blank area, and the lines will not be affected.
Back painting: painting in the blank area of the stage, lines and filling areas are not affected.
Pigment selection: only the selected filling area is drawn.
Internal painting: Only the internal area selected by the brush tool is painted. If a blank area is selected first,
You can't draw other areas, that is, you can only draw with a brush in the graphic area where the starting point is located.
3. Text tools
You can use the text tool to enter text and edit it on the stage. Click the stage with the text tool, enter text in the displayed input box, and then click the mouse outside the input box to exit the input state. You can set the properties of the text through the property inspector of the text tool, as shown in figure 1. 13.
Figure 1. 13 Text Tool Property Checker
Text can be divided into three types: static text, dynamic text and input text. Static text means that when the text content is established, only the shape of the text can be changed, but not its text content. Dynamic text is different from static text. Users can change the content in a text box by using programs and variables, so it is often used to display dynamic content (such as dynamically updated time information). ). Input text refers to a text box in which users can input text, which is generally used in Flash.
4. Filling tool
The filling tools in Flash toolbox are used to modify the strokes and filling effects of vector diagrams, including ink bottle tool, paint bucket tool, straw tool and filling deformation tool.
(1) Ink bottle tool
You can use the Ink Bottle tool to modify the border (strokes) of a drawing or add strokes to a filled area. If you add strokes to components or composite objects, you should decompose them first. If you want to add strokes to a bitmap, you should first convert it into a vector diagram. You can modify the color, thickness and style of the strokes of a graphic through the property inspector of the Ink Bottle tool. The method is as follows: Select the ink bottle tool, then set the properties of the ink bottle tool in the Property inspector, then move the cursor to the edge of the object, and click to add strokes to the object.
(2) Pigment bucket tool
You can use the paint bucket tool to change the filling effect of objects (for objects that are not simple vector diagrams, you need to break them up or convert them into vector diagrams, etc.). ). The method is as follows: Select the paint bucket tool, click the fill color button in the color selection area of the toolbox, set the fill color (or set it in the property inspector of the paint bucket tool), and then click the object to change the fill, which will adopt the currently set fill options.
(3) dropper tool
You can use the eyedropper tool to absorb the brush stroke color and fill color of an object. When you click the brush stroke with the eyedropper tool, the brush stroke color of the object will be regarded as the current brush stroke color and automatically converted to the ink bottle tool. When you click in the fill area with the eyedropper tool, the fill color of the object will be the current fill color and will be automatically converted into the paint bucket tool. The Lock Fill button will be automatically selected in the option selection area of the paint bucket tool in the Toolbox.
With the eyedropper tool, you can use bitmap graphics imported from outside as filling content. However, before absorbing the imported bitmap, you must first select it and press "Ctrl+B" to break it up, and then you can only absorb the color of the clicked position. After absorption, the drawing tool will be automatically converted into a paint bucket tool. At this point, click other areas to fill these areas with the absorbed graphics.
(4) Filling deformation tools
When the object's fill content is gradient or bitmap, click the object with the Fill Deformation Tool to display the Fill Deformation box. By adjusting its control points, the filling method can be changed, and its filling content can be scaled, rotated and moved.
5. Graphic editing tools
Graphic editing tools in Flash toolbox are used to select and modify objects, including arrow tools, partial selection tools, lasso tools, arbitrary deformation tools and eraser tools.
(1) Arrow tool
Arrow tool is the most important selection tool, and its main purpose is to select one or more objects.
Press and hold the arrow tool, and then click the left mouse button on the object to be selected to select a single object; When selecting multiple objects, just hold down the "Shift" key while selecting the objects, and then click each object to be selected in turn. In addition, you can also use the box selection method to select multiple objects-first select the arrow tool, and then drag a rectangular range with the left mouse button, all the objects to be selected will be included in this rectangular range, and all the objects in the rectangular range will be selected at this time.
The arrow tool can also move the object by moving the mouse pointer to the selected object. When the mouse pointer changes to a shape, click and drag the object to the appropriate position, and then release the mouse.
The arrow tool can also adjust the shape of an object. Click the arrow tool and move the mouse pointer to the edge of the object. If the mouse pointer changes to a shape, hold down the mouse and drag to adjust the curvature of the edge of the object. If the mouse pointer changes to a shape, drag the mouse to adjust the shape of the corner of the object.
(2) partial selection tools
Part of the selection tool is used to select nodes on the vector graph, that is, to edit the strokes of objects in the form of Bezier curves. After selecting the upper-level node with some selection tools, if you press the "Delete" button at this time, you can delete the node; If you drag the mouse at this time, you can change the shape of the graph.
(3) lasso tools
Lasso tools can encircle objects. Unlike the arrow tool, which can only drag out rectangular selections, the lasso tool can drag out irregular or polygonal selections.
After selecting the lasso tool, there are two modes to choose from in the option selection area of the toolbox, namely magic wand mode and polygon mode, as shown in figure 1. 14.
Figure 1. 14 lasso tool option selection
Magic wand mode: click the magic wand mode button, and then click the object to select an area with the same or similar color as the clicked area, but it is only effective for filling scattered bitmaps. Click the Magic Wand Properties button to open the Magic Wand Settings dialog box, where you can set the related parameters of the magic wand, as shown in figure 1. 15.
Figure 1. 15 "Magic wand settings" dialog box
Polygon Mode: Click the Polygon Mode button. In this mode, you can select the polygon area surrounded by the mouse by clicking several times and then double-clicking.
(4) Arbitrary deformation tools
You can use any deformation tool to deform the selected object at will. After clicking an object with any deformation tool in the Toolbox, there are four function buttons in the following options: Rotate, Tilt, Zoom, Twist and Envelope.
(5) Eraser tool
Eraser tools can be used to erase strokes and fills of graphics. After selecting the eraser tool, there are eraser mode, faucet and eraser shape buttons in the option selection area of the toolbox, as shown in figure 1. 16.
Option Select Erase Mode Eraser Shape
Figure 1. 16 eraser tool option selection
Standard Erase: You can erase strokes and fills on the same layer.
Erase padding: You can erase padding, but the strokes are not affected.
Erase lines: strokes can be erased, but the filling is not affected.
Erase the selected padding: You can erase the currently selected padding, but the strokes are not affected (you must select the erased padding whether strokes are selected or not before using the eraser tool in this mode).
Internal Erase: You can erase the filled area at the starting point clicked with the eraser tool, but the strokes are not affected. If the starting point of clicking is a blank area, the filled area will not be erased.
Tap: The closed filling area can be erased.
Sometimes, when editing an imported bitmap, you need to delete some unnecessary parts. At this time, it must be scattered before wiping.
6. View tools
The viewing tools in the Flash toolbox are used to view movie content, including hand tools and zoom tools.
(1) hand tools
You can use the Hand tool to drag the stage and workspace to see the objects in them, especially when zooming in. Select a tool and the mouse pointer will change to a hand. Just hold down the left mouse button and drag and drop.
(2) Zoom tool
Zoom tools can be used to display the stage and workspace in an enlarged or reduced way, so as to see the details of the object or the overall situation of the animation. When you select a tool, the mouse pointer changes to a magnifying glass with a plus sign. Clicking any point on the stage or workspace will enlarge and display all the contents on the stage or workspace around that point. After selecting a tool, if you hold down the "Alt" key, the mouse pointer will turn into a magnifying glass with a negative sign, and it will be surrounded by clicking any point on the stage or workspace.
7. Color tool
The color tools in the Flash toolbox are used to set the color of strokes or fills. Click the "Stroke Color" button or the "Fill Color" button to select a color from the pop-up color list and set it as the current stroke color or fill color, as shown in figure 1. 17.
Figure 1. 17 color tool
Click the "Black and White" button in the color selection area to return to the default color from the current color, that is, the stroke color is black and the fill color is white; After selecting the stroke color or fill color, click the "Colorless" button to set the stroke color or fill color to colorless; Click the "Swap Colors" button to swap the currently set brush strokes and fill colors.
Through a series of operations, this example enables readers to master the use of various tools in the Flash toolbox.
See figure 1. 18.
Figure 1. 18 Drawing and editing graphics (including only some effects)
(1) Create a new Flash movie. Click the title bar of the timeline to collapse it so that you can see more stage areas.
(2) Use line tools, ellipse tools, rectangle tools, pen tools, pencil tools and brush tools to draw different shapes, including straight lines, ellipses and perfect circles, rectangles with various angles and rounded corners, and arbitrary curves (using pen, pencil and brush tools respectively).
(3) Repeat step (2) with different strokes and fills. if