Imitation CCTV Flash dynamic navigation menu

Menu | navigation | news

Today to introduce you to the CCTV station a Flash navigation menu of the production method, to achieve very simple, only the most basic animation effects and simple action script (as), but the effect is very good.

Click here to download the source file
　　 Analysis:The effect is mainly used in the button over (through) frame into the Movie Clip (film clip MC) to achieve, the main effect is realized in the MC, using the mask, fade in, move and other animation effects superimposed way. Because the implementation of several buttons are the same, so using the MC nesting with some simple as skills, this is worth the focus of learning.

Before making, we have to be prepared to see a few pictures in effect, one for the background, the other seven for use in the button (the same size), of course, you can choose any pictures you like.

　　One, the decoration of the stage

Run Flash (here is the Flash MX English version, the text will try to give a detailed bilingual), open the Document Properties dialog box (shortcut key Ctrl+j), set width of 419px and 246px, frame speed defaults to 12fps , background color is #FFC318, the background color is the same as background picture, and then return to the scene editing interface.

will be ready to import the picture, Menu: File (Files)-->import ... (import) Open the Import dialog box, select a few pictures you have prepared (you can select more than one), and press the Open button to import.

　　Note: If the following dialog box shows that the imported picture is named according to a certain rule, click Yes to import all the pictures that are named by law, click No to import the selected picture, and click Cancel to not import any pictures.

(Figure 1)

When all the pictures are imported, they will be placed in the scene, and other pictures will be removed from the scene, leaving only the pictures used as backgrounds. Don't worry, the deleted pictures remain in the library and will be used later. When the background picture is selected, open the Aligh (arrange) panel (ctrl+k), press the To Stage button to fit the stage, click the button, and center the picture on the stage, respectively.

(Figure 2)

Create a new graphic (Graphic) symbol (shortcut key Ctrl+f8), named Line_g, and then enter the editing state, select Line Tool (Drawing tool N), draw a vertical bar, modify properties in the Properties panel, set high 246px (with Flash), coordinates ( 0,0), the color is slightly darker than the background color, the style is set to a dotted line (as shown in the picture), and the height is 25 (the same height as the button being made), the color is white, the coordinates (0,110) (coincide with the previous line, the bottom is aligned), and the other attributes remain the default.

(Figure 3)

Return to the stage (Ctrl+e), press the new Layer button to create a new two layer, the topmost name is lines, the bottom name is back (background layer, has placed a background picture), the middle tier named buttons, lock back layer to avoid editing other layers when the background image was incorrectly modified.

(Figure 4)

Select the lines layer, open the library (ctrl+l), the symbol Line_g dragged into the scene, set the horizontal axis of 54 (button width), ordinate center by the stage, and then copy 6 Line_g in the stage (total 7), select one, set the horizontal axis of 378 (54*7), CTRL + A selects all the symbols on the stage (because the background layer is locked, so the background picture is not selected), click the To Stage button in the Arrange panel to cancel its press status, click the button to make the symbol have the same spacing and lock the lines layer.

So the stage is decorated.

　　Second, the realization of the main animation effect

Create a new MC named Pics_m, to store all the pictures in the button to make the MC nesting.

Press F6 to insert 6 keyframes (total 7 frames), put a picture in each frame and set the picture coordinates (0,0); then create a new MC named Move_m, drag pics_m into standby, and name it inatance name pic in the Properties panel for later control with AS c1> Figure 5), and name the layer pic.

(Figure 5)

Create a new layer named Mask, using the Rectangle Tool (rectangular tool R) to draw a rectangle on the layer, in the property panel, set its width to 54 (the same as the button), high 221 (the same as the picture), coordinates (0,0); Drag and drop the image in the upper right corner of the MC to the top right corner of the rectangle, appearing The symbols shown in Figure 6 (Auto capture) Release the mouse, select the 37th frame of the PIC layer in the Timeline (timeline), press F6 to insert keyframes, press F9 to eject the Action panel, press Ctrl+shift+e to convert to the expert mode that can freely enter the script, Enter the Stop () action, and then press the same method above to drag the upper-left corner of the picture MC to the upper-left corner of the rectangle for automatic capture.

(Figure 6)

Right-click the frame in front of the PIC layer and select the first create Motion Tween in the pop-up menu (create animation Figure 7).

(Figure 7)

Select the PIC layer frame 10th, press F6 to create keyframes, go back to the first frame, select the MC in the editing area, and set the Color Styles (the style) to Alpha (transparent) in the properties panel, and the value is 1% ( Figure 8), so a fade in and move animation is done.

(Figure 8)

Then select the 37th frame of the Mask layer, press F5 to create the content frame, right-click on the Mask layer, select the Mask in the pop-up menu to set the layer to mask layer, complete as shown in Figure 9.

(Figure 9)

　　Third, the production of buttons

First make the button over the frame to use the MC: New MC named btn_mc_1; drag move_m into, set coordinates (0,0), and in the Action panel, enter the following as:

Onclipevent (load) {
　　Pic.gotoandstop (1);
Make Pics_m stop at the first frame to display the first picture
}

Select the Rectangle tool, draw a rectangle, delete the line, set the properties are: Width 54, high 25, color #ffa600; Select the rectangle, press F8 to convert to graphical symbols, named Btn_back standby; Keep btn_mc_1 edit state, use automatic capture method, Aligns the upper-left corner of the rectangle symbol that you just created with the seated angle of the move_m, and sets the color Styles property of the rectangle symbol to tint Select one of the colors ( figure), which is completed as shown in the figure .

(Figure 10) (Figure 11)

Then in the library, right-click the Duplicate (copy) pop-up Duplicate Symbol dialog box in the Btn_mc_1 selection pop-up menu, change the name to Btn_mc_2, enter the edit status of Btn_mc_2, move _m Action pic.gotoandstop (1) , changed to pic.gotoandstop (2), btn_back to another color, and so on to make btn_mc_3--btn_mc_ 7. So the animation of all the buttons is done.

Here's how to make a button : New button (button) symbol, named btn_1; drag btn_back into the edit window, align its lower-left corner with the small cross in the window, select Hit (Button response area) frame press F7 to create a blank frame, draw a rectangle with a rectangular tool, width 54 , high 246 (high animation), also its lower left corner and the small cross in the window to align, name the layer back; Create a new layer named movie Select the over frame by F6 The keyframe, drag the btn_mc_1 into the lower-left corner and the small cross in the window, and select the down and hit frames for that layer. Press SHIFT+F5 to delete it, create a new layer named text, select text Tool (Type tool T) Click in the window, enter the navigation text, set the font size to 12 in the property panel, tick the use Device Fonts option ( figure) to make the font clearer ( You will see the effect when you publish it.

(Figure 12)

This is the first button on the production, according to just make btn_mc_2 ~btn_mc_7 the same way to copy btn_2 ~ btn_7, need to modify the navigation text and over frame MC.

Modify the text needless to say, need to explain the replacement over frame MC method, take btn_2 as an example: double-click the library (libraries) in the btn_2 into the editing state, select the movie layer in the window of the MC symbol, click the Properties panel in the Swap ... (Swap) button, eject the swap symbol (Swap symbols) dialog box, replace it with the corresponding MC can (btn_1 corresponding btn_mc_1, etc.).

　　Iv. completion of the animation

Back to the stage, select the buttons layer, will make good btn_1~btn_7 dragged in, and according to the appearance of the effect placed, you can use the previous mentioned arrangement panel.

Now this beautiful navigation menu is done, from this example we can see that as long as the idea is good, even the simplest animation can achieve a very beautiful effect.