FLV network player production Overview (continued)

* **************************** Step 1: *****************************

Nowadays, streaming media FLV files played with Flash Player are becoming more and more popular (PS: it is not common to know whether the domestic technology is too backward or for other reasons ), we can use the playback component in flash to create a player. However, in some cases, playback skin cannot meet our needs. For example, it is inconsistent with the webpage style or cannot be well integrated into our Flash site, at this time, we need to build our own playback. Fortunately, it is not very difficult to create a flvplayer with basic functions /. Let's start from step by step.

First, open the flash component library, as shown in Figure 1-1. Click the red part to create a video component.

 

Figure 1-1
Create a new layer and name it video. Drag the video component from the component library to the stage and change the size to 320*240. Name the video component named "myvideo" on the stage. 1-2

 

Figure 1-2
Create a new layer named action, select the first frame to bring up the action panel by F9, and enter the following code:
// Create a netconnection object named NC
VaR NC: netconnection = new netconnection ();
NC. Connect (null );
// Create a netstream object named ns and enter NC as a parameter in brackets
VaR ns: netstream = new netstream (NC );
// Create a video object named myvideo
VaR myvideo: video;
// Specify the video played by myvideo as NS myvideo. attachvideo (NS );
// Let NS execute the play () method, and fill in the path of the FLV file in brackets. Here I use the local path.
NS. Play (BT player. FLV );

For details about the code or related information, see the help documentation. Press Ctrl + enter to export the video. At this time, we should be able to play the FLV video normally. PS: if you do not have FLV files on hand, don't worry. The famous Google provides us with excellent services. We can use danger's gvd to search, view, and download. Here I just give an address http://dengjie.com/gvd/gvd.swf? Id = 1858640896825067657

 

* **************************** Step 2: *****************************

Create three layers: screenshot, controlbar, and control. The sequence is 1-3.

 

Figure 1-3
Place the screenshot on the videolayer, import the screenshot.jpg component, and place the component on the screenshot layer. This is exactly the same as the video frame.

Figure screenshot.jpg

PS: for a video, you can choose whether to put it or not.

Select the layer controlbar, use the rectangle tool to draw a rounded rectangle, convert it to a component, and set the Alpha value to 50%. 1-4

Figure 1-4
Select layer control, which is a text tool. Select webdings as the font (which comes with the system. Don't tell me no =. =), The color is black, press 9 to play a special symbol, Press 4 to play another special symbol, and then press. Convert the two symbols into the button elements rewind_button, play_button, and pause_button respectively, and locate their positions from 1 to 5.

Figure 1-5
Now let's name the above buttons respectively: rewind_btn, play_btn, and pause_btn. Select the first frame of the Action layer and enter the code:
Rewind_btn.onrelease = function (){
// The netsream. Seek () method is used to specify the stream playback seconds, or the playback position.
NS. Seek (0 );
}
Play_btn.onrelease = function (){
// Play or pause
NS. Pause ();
}
Pause_btn.onrelease = function (){
NS. Pause ();
}
OK. Press Ctrl + enter to test the video. Note that the codes in the play_btn and pause_btn functions are ns. pause (); in fact, the pause () method implements two functions: Video Stream playback and pause. When the video is played, it is paused. When the video is paused, It is paused to continue playing. This is what I did to take care of the beginner's understanding. A perfect friend can make a button to switch between the playing symbol and the pause symbol.

 

* **************************** Step 3: *****************************

In the first two parts, we learned how to play and control videos. What do we need now? Since FLV is a Streaming Media, a progress bar for video loading is still missing to make the player more user-friendly. What are you waiting for? Hurry up and get started. First, create a new layer named loader in the layer controlbar, set the stroke color to black, fill to white, and draw a progress bar 1-6 with a rectangle tool.

 

 

Figure 1-6 then we select the rectangle and press F8 to convert it into a video clip named loader, and name the Instance name of the component in the scenario as loader, set Alpha to 60%. Double-click the video clip to enter the editing status, select the white filling in the middle, press F8 to convert the video clip named loadbar, and name the Instance name of the component loadbar. Then return to the scenario, select the first frame of the Action layer and enter the following code:
// The SwF loading I see in peacetime is similar. I will not explain it here.
VaR percent_loaded: Number = 0;
Loader. loadbar. _ XScale = percent_loaded;
// Create a videostatus Function
Function videostatus (){
VaR videototal: Number = NS. bytestotal;
VaR videoloaded: Number = NS. bytesloaded;
Percent_loaded = videoloaded/videototal * 100;
Loader. loadbar. _ XScale = percent_loaded;
}
// Create a timer and run the videostatus function every 100 milliseconds.
VaR videointerval = setinterval (videostatus, 100 );

 

* **************************** Step 4: *****************************

From now on, we start to the intermediate stage to prepare the video progress slider. Double-click the component loader to edit it. Create a new layer named scrub, and then draw a slider from 1 to 7.

 

Figure 1-7
Press F8 to convert it to a component. During the conversion, make sure to select the registration point as the upper-middle node. Do not select the wrong node. And name the instance scrub. Align it with loadbar 1-8

 

Figure 1-8 below we will make a playback progress bar, create a new layer named playbar on the scrub layer, select the loadbar component on the layer loadbar, and press Ctrl + C to copy, select the layer playbar, press Ctrl + Shift + V in-situ paste, change its instance name playbar, and set its properties to 1-9

 

Figure 1-9
Return to the main scenario, select the first frame of the Action layer and enter the following code: (Note that the updated code is red and the old code is black)
VaR percent_loaded: Number = 0;
Loader. loadbar. _ XScale = percent_loaded;
Loader. playbar. _ XScale = 0;
VaR Duration: number;
// You can view the netstream. onmetadata processing functions in the help document.
// Obtain the video length in duration.
NS. onmetadata = function (OBJ: Object ){
Duration = obj. duration;
};
Function videostatus (){
VaR videototal: Number = NS. bytestotal;
VaR videoloaded: Number = NS. bytesloaded;
Percent_loaded = videoloaded/videototal * 100;
Loader. loadbar. _ XScale = percent_loaded;
Loader. Scrub. _ x = NS. Time/percent_loaded * loader. loadbar. _ width;
Loader. playbar. _ XScale = NS. Time/percent_loaded * 100;
}
VaR videointerval = setinterval (videostatus, 100 );
Okay, now we press Ctrl + enter to test the video. How about the slider moving with the playback time.

 

* **************************** Step 5: *****************************

We have watched the video once. At this time, we still want to watch a part of the video. We can't play it from the beginning. Therefore, we can drag the playback slider to achieve free video playback. Continue to write the code pai_^ Add the following code at the first frame of the Action layer in the scenario:
VaR scrubinterval;
Loader. Scrub. onpress = function (){
// When the slider is pressed, The videointerval timer is cleared.
Clearinterval (videointerval );
// Set the scrubinterval Timer
Scrubinterval = setinterval (scrubit, 10 );
// Set the slider sliding range this. startdrag (false, 0, this. _ y, loader. loadbar. _ width, this. _ y );
}
Loader. Scrub. onrelease = loader. Scrub. onreleaseoutside = function (){
// When the slider is released, clear the csrubinterval timer clearinterval (scrubinterval );
// Resume the videointerval Timer
Videointerval = setinterval (videostatus 100 );
This. stopdrag ();
}
// Create the scrubit Method
Function scrubit (){
// The number of seconds for the playback seek referred to by the slider is equal to the X coordinate of the slider divided by the loadbar width, and then multiplied by the total number of seconds
NS. Seek (math. Floor (loader. Scrub. _ x/loader. loadbar. _ width) * duration ));
// Let the zooming of the playbar change with the position of the slider
Loader. playbar. _ XScale = loader. Scrub. _ x/loader. loadbar. _ width * 100;
}
Now, press Ctrl + enter to test the video. Is it more and more like playback? ^_^

 

: *****************************

Next we will add sound control for the player. First, we create a new layer named sound on the control layer, select the text tool, use the webdings font, press SHIFT + W to print the symbol, select modify, deformation, and flip horizontally, press f8. Double-click to enter the editing status and insert a key frame at the second frame. We draw a diagonal line 1-10 on the symbol at the second frame.

 

 

 

Figure 1-10 1-10: write the code on the first frame:
Stop ();
VaR Vol = 100;

Write the code on the second frame:
Vol = 0;

Return to the scenario, name the instance of the component vsound, select the first frame of the layer action, and enter the following code:
Vsound. attachaudio (NS );
VaR video_sound: Sound = new sound (vsound );
Vsound. onrelease = function (){
If (this. Vol = 100 ){
Video_sound.setvolume (0 );
This. gotoandstop (2 );
} Else {
Video_sound.setvolume (100 );
This. gotoandstop (1 );
}
}

CTRL + enter. It should be noted that only one sound object can be created to control the sound. However, if you do not specify the sound of the root video, it controls the volume of the root video, therefore, the sound in NS is introduced to vsound video editing, and the video_sound object is specified to control the sound in vsound video editing.

 

: *****************************

Our player has a pattern at last, but there is still something missing. Do you often see buffering when playing streaming media? Yes, it's a buffer. What are you waiting for? Hurry up. First, we create a new layer between the video layer and the controlbar layer and name it buffer. Then, we use a rectangle to draw a black rectangle of 320*240 on the stage and align it with the video position, it can block video. Then we press F8 to convert it to a video clip and name its instance buffer_mc. Double-click to enter the editing status, create a new layer named text, and use a text tool to Enter Text: Video buffering. And convert it to a component to create an Alpha gradient animation, 1-11:

 

Figure 1-11
Return to the scenario, select the layer action, and enter the code:
// Set the NS buffer time to 15 seconds.
NS. setbuffertime (15 );
// Create the onstatus processing function of the NS. For details, refer to the help documentation.
NS. onstatus = function (Info: Object ){
// When the buffer is full, buffer_mc hides
If (info. Code = "netstream. Buffer. Full "){
Buffer_mc. _ visible = false;
}
// When the buffer is empty, buffer_mc displays
If (info. Code = "netstream. Buffer. Empty "){
Buffer_mc. _ visible = true;
}
// Play the video again when the playback ends.
If (info. Code = "netstream. Play. Stop "){
NS. Seek (0 );
}
}
OK. Export and test it.

 

* **************************** Step 8: *****************************

Right-click the player menu (; ^). First, enter the code at the first frame of the Action layer:
VaR mymenu: contextmenu = new contextmenu ();
Mymenu. hidebuiltinitems ();
Here we have customized a new contexmenu object for mymenu, And then we use the hidebuiltinitems () method to hide options other than "Settings" and "Copyright Declaration. Export and test. Then enter the following code:
VaR I1: contextmenuitem = new contextmenuitem ("::::: video controls :::::", trace );
VaR I2: contextmenuitem = new contextmenuitem ("play/pause", pauseit, true );
VaR I3: contextmenuitem = new contextmenuitem ("replay", replayit );
VaR I4: contextmenuitem = new contextmenuitem ("select a FLV files", selectit, true );
VaR I5: contextmenuitem = new contextmenuitem ("Copyright 2006 sailon", Trace, true );
Mymenu. customitems [0] = I1;
Mymenu. customitems [1] = I2;
Mymenu. customitems [2] = I3;
Mymenu. customitems [3] = I4;
Mymenu. customitems [4] = I5;

Define the i1-i5 as a new contexmenuitem and fill in the corresponding parameters in the contexmenuitem. For detailed parameter descriptions, see the help document ^_^ and then assign the property coustomitems (array) of mymenu to the i1-i5. Well, now we have defined the menu. Below we will write the method for the corresponding menu. The Code is as follows:
Import flash.net. filereference;
// Method of paused playback
Function pauseit (){
NS. Pause ();
}
// Replay Method
Function replayit (){
NS. Seek (0 );
}
// Select the FLV method function selectit (){
VaR listener: Object = new object ();
Listener. onselect = function (File: filereference): void {
Trace ("opened" + file. Name); playvideo (file. Name );
}
Listener. oncancel = function (File: filereference): void {
Trace ("User canceled ");
}
VaR fileref: filereference = new filereference ();
Fileref. addlistener (listener );
Fileref. Browse ();
}
The selectit () method triggers the playvideo () method after the FLV file is selected. Therefore, we need to modify the code in step 1. Modify the code in step 1 as follows:
VaR NC: netconnection = new netconnection ();
NC. Connect (null );
VaR ns: netstream = new netstream (NC );
VaR myvideo: video;
Myvideo. attachvideo (NS );
Function playvideo (video ){

NS. Play (video );
Trace ("playvido:" + video );
}
Playvideo ("BT player. FLV ");

Here is a small pity that currently the filereference class does not support reading the directory function, so the FLV file we need to select must be in the same directory as the SWF file for normal playback. OK. Let's export and test it. Finally, this article is just a reference here. Read and familiarize yourself with the function methods in the help document. I hope you can create more powerful and more fun players.