Button | control
The demo effect is as follows:
Click here to download
Production steps:
1. Set the size of the scene to be 120pxx100px, the background is black, and the frame frequency is 12fps.
2. Press the shortcut key Ctrl+f8 Open the Create new symbol panel creates a new movie clip symbol named "Light beam."
3. Select the Rectangle tool and pull a rectangle (no sideline) in the scene of the "light beam" component, and the color is ink blue. Select it and set the width to 4px and high to 2.5px in the Properties panel. If the component is too small to be set, zooming in the scene can be scaled to 300-400%, as shown in Figure 1.
Figure 1
4. Copy the rectangle, and then copy the four, the copied rectangle from top to bottom set to 1px, 1.5px, 2px, 2.2px, the width is unchanged. Then arrange as shown in Figure 1. When aligning five rectangles, you can press the shortcut key ctrl+k or click the buttons on the toolbar to bring up the alignment panel.
Note: The bottom line and centerline of the bottom rectangle have to go through the center point of the scene (the small "+" word), as shown in Figure 1. Otherwise the spectral effect will not be realized.
5. Creates a new movie clip symbol named "Spectrum." The zoom ratio of the scene is still set to 300%, making it easier to make. Open the Library and drag the "light beam" component in the library to the scene of the "spectral" component. Right-click the "Light Beam" component, select "Action" from the pop-up menu, open the Actions panel, and type the following code:
Onclipevent (enterframe) {
_yscale = Math.random () *70+30;
}
In the above code, Onclipevent () is an event trigger, and the event Enterframe is played at each frame is the trigger action. _yscale is a property of a movie clip that scales the percentage of the movie clip in the y-axis direction. The math.random can randomly obtain a value that ranges between [0,1].
6. Several "light beam" components are reproduced in the scene of the spectral component, and the position of these components is adjusted with the alignment feature and the Distribute function in the arrow tool and the Alignment panel. The final setting is shown in Figure 2.
Figure 2
7. Create a new button symbol named "Music." Pull a rectangle in the scene of the music button symbol, and then press the shortcut key ctrl+r to import a CD's footage, as shown in Figure 3.
Figure 3
8. Select the pointer pass frame, press F6 to insert the keyframe, and then make some changes to the component in the scene, such as making the component larger or changing colors.
9. Press the shortcut key ctrl+r to open the import panel to import a Mp3 music file. After importing, open the library to a small speaker file. As shown in Figure 4.
Figure 4
10. Right-click the music file in the library and select link from the menu that pops up. Then set the link Properties panel as shown in Figure 5. An identifier named "Sound1" for the sound file is used to import and play the sound file later.
Figure 5
11. Double-click the sound file in the library, and then set the sound Properties panel as shown in Figure 6, and select the MP3 compression format that is appropriate for a longer streaming sound. Do not tick the use Document quality option will eject the MP3 compression settings. The larger the bit rate bit rate, the better the sound. The preprocessing preprocessing option can convert stereo to mono sound when the bit rate value is higher than 20Kbps. Quality is the setting option for sound quality. Compression is to reduce the volume of the file.
Figure 6
12. After setting all the components, press the shortcut key Ctrl+e back to the main scene. Open the Library, drag the button symbol "music" in the library to the scene, and give the button an instance name "Bt1" in the Properties panel. Right-click Frame 1th, select Actions from the pop-up menu, open the Actions panel, and type the following code:
Stop ();
Bt1.onrelease = function () {
Sound2 = new Sound ();
Sound2.attachsound ("Sound1");
Sound2.start (0,1);
gotoAndPlay (2);
}
Onrelease () is a method of a button object that executes the statement after the button bt1 is clicked.
We used the sound (sound) object in the code. Code "sound = new sound ();" is to create a new sound Object sound. Attachsound () is a method in the sound () object that attaches the specified sound to the specified sound object. Start ([Secondoffset, Loop]) is also a method whose parameters Secondoffset control the start time of the sound playback, and the parameter loop can set the number of consecutive sound playback.
13. Right-click Frame 1th to select the Copy Frame command. Then right-click Frame 2nd, and click Paste frame to paste the frame. Then change the instance name of the button to "BT2". Then right-click the button symbol "music" and type the code after selecting the "Action" command from the pop-up menu:
Stop ();
Bt2.onrelease = function () {
Sound2.stop ();
gotoAndPlay (1);
}
Statement gotoAndPlay (1) makes the movie jump to frame 1th for playback. The Stop () here is a method in the sound object to stop the sound from playing. The final setting is shown in Figure 7.
Figure 7
14. Drag the spectral component from the library to frame 2nd in the main scene, and then in the Properties panel, set the transparency of the button symbol "Music" in frame 2nd to 0, which is completely invisible.
All right, that's it. In the production of this example, the reader's key point to master is the idea of making this example. The other is the design method of "spectral" element and the use of scene scaling in design.