Flash to create a beautiful special music player

Listening to music on the computer, in addition to using off-the-shelf player software, you can also use the Flash MX 2004来 to make a unique music player. The end of the article provides the original document for everyone to download reference.

Making essentials: Flash video clip control, volume size adjustment, sound balance adjustment, dynamic text display data.

Finish effect:

Click here to enlarge full-screen viewing effect

Production steps:

First, create a background image

1. Launch Flash MX 2004 software, in the wizard select Create New "Flash document", create a default width of 550px, high 400px, background color white, frame-frequency 12fps files.

2. The use of pencil tools, elliptical tools, line tools and other drawing tools to draw the scene and radio (also can be from the Internet or other animation to extract material.)

Second, draw the radio play button and add action

1. Create a new six button components, respectively, to control the radio playback of each button.

2. Add the commands to these buttons individually:

① the command on the "Top" button

Click the top button with your mouse to select it, and then open the Actions panel and enter it in the right-hand action command line:

On (release) {//When Mouse is released
gotoAndStop (1); The playhead points to frame 1th and stops playing.
}

② the command on the "Rewind" button

Click the top button with your mouse to select it, and then open the Actions panel and enter it in the right-hand action command line:

On (release) {
gotoAndPlay (_CURRENTFRAME-50);
}

③ Playback

Click the play button with your mouse to select it, and then open the Actions panel and enter it in the right-hand action command line:

On (release) {
Play ();
}

④ stop

On (release) {
Stop (); Play head stops playing
}

⑤ Fast Forward

On (release) {
gotoAndPlay (_CURRENTFRAME+50);
}

⑥ Last

On (release) {
gotoAndStop (_root._totalframes)//The playhead points to the last 1 frames and stops
}

Three. Make the length and progress display box

1. Add Text display box

Tap the Windows "other panel", "Common Library", "button", open the "Knobs & faders Parts" folder in the "Knobs & faders" folder, find the movie clip "input box" and drag it from the "Common library" to your own Couchen , rename the movie clip to "Length" and drag a "input box" to change it to "progress".

2. Modify the text display box

Double-click the length movie clip in the library, and select Layer 3 (Layer 3). Click the text box in the scene, open the Properties panel, change the input text to dynamic text, change the variable to CD, press the character button, pop the character options panel, select No characters, and click OK.

Use the same method to modify the "progress" movie clip, except that the variable is JD and all the others are set.

3. Create "text" Movie clips:

Press Ctrl+f8 to create a new movie clip symbol, named text, drag the length and progress two movie clips to the work area of the text movie clip, click the length movie clip with the arrow tool, and set the instance name to the property panel as: Changdu, The same method sets the progress movie clip instance name to: Jindu.

4. Add action to "text" Movie clips:

Back to the scene, create a new layer, named "Progress bar" to drag the movie clip text from the Library to the button layer in the scene, then use the Arrow tool to click the movie clip "text," set the instance name to Wenben in the property panel, and copy the following as command to the Actions panel.

Film Time length calculation and display

Onclipevent (load) {//MC load-time action
S1 = int (_ROOT._TOTALFRAMES/12);//Movie length
FEN1 = String (int (S1/60)); Calculate the number of minutes after the integer, converted to a string
MIAO1 = string (int (s1% 60))//count the number of seconds to the integer enough to convert to a string
if (length (fen1) = = 1) {//minute number length is 1 o'clock
Fen1 = "0" +fen1+ "" ", plus 0 before/
}else{//otherwise
Fen1 = fen1+ "" ";
}

if (length (miao1) = = 1) {//sec The number length is 1 o'clock
Miao1 = "0" +miao1+ "'";/Front plus 0
}else{//otherwise
Miao1 = miao1+ "'";
}

_ROOT.WENBEN.CHANGDU.CD = Fen1 + miao1;
}

Movie Time schedule calculation and display (script interpretation reference above code)

Onclipevent (enterframe) {//is constantly triggered by the frame frequency of the MC
s2 = int (_ROOT._CURRENTFRAME/12);
Fen2 = String (int (S2/60));
Miao2 = String (int (s2% 60));
if (length (fen2) = = 1) {
Fen2 = "0" +fen2+ "" ";
}else{
Fen2 = fen2+ "" ";
}
if (length (miao2) = = 1) {
Miao2 = "0" +miao2+ "'";
}else{
Miao2 = miao2+ "'";
}
_ROOT.WENBEN.JINDU.JD = Fen2 + Miao2;
}

Four. Draw and make a button that controls volume and balance

1. Find the "volume" Component:

(Hint: You can do it yourself can also be directly in the public library, readers can play open source files of the library directly dragged.) )

Click "Window" → "other Panel" → "Common Library" → "button", open the Knobs & Faders folder, locate the movie clip "Fader-mixer", drag it from the common library to the music folder in your library, and then add the movie clip to the Fader -Mixer "Renamed volume", and then double-click the folder "Knob & Fader Parts" Name, renamed "Volume Control", and then double-click the folder icon, open the Change folder, the movie clip "Fader" renamed "Volume Handle", Button components "Fader Butto N "Renamed the Volume Button", the movie clip "fader Details" renamed to Volume dial, the movie clip "Fader Shadow" renamed "Volume Shadow."

(Note: Double-click the folder name to rename it, double-click the folder icon to open the folder.) Also, when you drag a movie clip from the public Library to the library, release the mouse in the white area of the library, and do not release it in the gray area. )。

2. Modify the "volume" Component:

Double-click the movie clip volume in the library panel, using the Arrow tool to select volume handle and volume dial, click Modify, Warp, rotate 90 degrees counterclockwise, click the movie clip volume handle with the arrow tool, and set the instance name in the property panel: Shoubing.   Move the handle to the central position of the engraving plate. Enter the as code in the Action panel and overwrite the original script statement.

Onclipevent (load) {//Movie clip triggers the following code when loading
Chushi_kepan = _x-50; Determine the x-coordinate of the initial position of the disc in the scene
Zuo = _x-50; Determining the leftmost limit of a handle in a scene
you = _x+50; Determine the rightmost limit of the handle in the scene
Ding = _y; Determine the maximum limit of the handle in the scene
DI = _y; Determine the bottom limit of the handle in the scene
WLS = new Sound ();//create Sound Playback object WLS
Wls.attachsound ("WLS");//attach a sound in the library with an identifier of "WLS" to WLS
Zdyl = 100;//Determine maximum volume value
Dqyl = zdyl/2;//Determine current volume value
Wls.setvolume (dqyl);//set current volume for sound objects
}

Onclipevent (enterframe) {//sync with frame frequency to trigger the following code
Because the length of the disc is 100 pixels, the sound limit is 100, and the current position of the disc is the current volume value.
Dqyl = Math.ceil (_root.yinliang.shoubing._x-_root.yinliang.shoubing.chushi_kepan);
Wls.setvolume (dqyl);//Set current volume on sound object WLS
}

Then double-click the movie clip "volume Handle" in the workspace with the mouse, exposing the button, adding the following button action to the button, overwriting the original script statement.

On (Press) {//Mouse down
StartDrag ("", false, Zuo, ding, you, DI); Drag in a restricted area
}

On (Released) {//Mouse release
Stopdrag ()/Stop dragging
}

3. Set Sound components:

Select the "file" → "import" → "library" in the menu to import the prepared music into the in the library, click the Sound component 12.mp3, right-click, pop-up menu select Link, Pop-up Link Properties dialog box, "Export for action script in link" and "Export in first frame" tick, Then enter the identifier at: WLS, click OK.

4. Scene Layout:

Back to the scene, create a new layer, named "Volume size and balance", drag the movie clip volume to the main scene, to the property panel to the movie clip "Volume" An Instance Name: Yinliang, adjust the position can be placed.

5. In the same way to create a control volume balance of the handle, the code is as follows:

Onclipevent (load) {//movie clip when loading
chushi_x = _x; Determines the X initial coordinate value of the handle in the scene
Zuo = _x-50; Determining the leftmost limit of a handle in a scene
you = _x+50; Determine the rightmost limit of the handle in the scene
Ding = _y; Determine the maximum limit of the handle in the scene
DI = _y; Determine the bottom limit of the handle in the scene
WLS = new Sound ();//create Sound Playback object WLS
Wls.attachsound ("WLS");//attach a sound in the library with an identifier of "WLS" to WLS
KPBS =2;//dial multiple, the handle is initially in the middle of the plate, the left and right limit is 50, multiply on the disc, can make the left and right limit value of 100
}

Onclipevent (enterframe) {//sync trigger with frame frequency
Calculates the current equilibrium value, between 100,-100
Dqph = Math.floor (_root.pingheng.shoubing._x-_root.pingheng.shoubing.chushi_x) * kpbs);
Wls.setpan (DQPH)//Set the current balance of the sound object WLS
}

Five. Integrate the scene and test

1. Add music Layer

After placing all the components and objects in the right place, create a new layer, named music, select the music you just imported in the sound Drop-down of the properties box below, set the sync content to "data flow," and extend the frame until the music is finished, and then extend the frames of the other layers to the same number of frames as the music layer.

2. Plus Stop action

In order to make the music in the beginning is not playing state, select the first frame of the music layer, in the Action panel add: Stop (); Command.

3. Test

Now press CTRL + ENTER to test! How, a beautiful music mini player came out, we use this method can make MTV, courseware and Player Oh! Click here to download the source file