First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Vivian | Website: http://www.sothink.com
Comparing to embedded video, the method Playback external FLV offers a number of benefits over embedded video, including following:
1. Fast to preview and text Flash: For that you only need to publish the SWF interface during creation activity, you can preview Flash fast and the same time minimize the test time.
2. Quicker to start playback: Unlike embedded video, the file starts playing before it has completely downloaded.
3. Easy to update: To add or change content independently of the video player without the need to republish the SWF file is relatively easy.
4. Better performance: The performance and result of your video playback will definitely be better for that the FLV and SWF files are separate. The problems we met such as lack of sync between the fps rate of the video and the fps rate of the SWF file will never be a problem.
5. Easy to add title to video content: You can use call-back function to visit metadata of the video.
Here is a tutorial to show you how to use ActionScript to playback FLV with Flash Maker -- Sothink SWF Quicker.
If you can not see the following SWF displayed correctively, please refer to http://www.sothink.com/tutorials/viewtopic.php?t=69.


Series: SWF Quicker 2.0
Estimated Time of Completion: 30 minutes
Prepared work: download Sothink SWF Quicker -- http://www.sothink.com/product/swfquicker/download.htm

1. Before you begin this learning experience, you should prepare some components first, I suggest copying them from the source file. Click videoctrl.rar (3.88 KB) to download the source file.
Vivian tips: For that the FLV file is large in size -- about 2749KB, we didn't include it in .rar file for your downloading. In fact, the FLV file in this tutorial can be replaced by any other one.

image002.jpg



2. The external video source file formats can be converted to FLV file format by third-party software, such as Sothink Flash Video Encoder, Sorenson Squeeze and so on. Besides, SWF Quicker can also convert video source file to FLV video stream. Click File->New->New Window to open a window. In this tutorial, I click File->Import to Library to import the video file "videocontrol.avi". Click open and then set the parameters in Import Video popup box.

For that our bandwidth is 512K for DSL customers, you can direct select DSL (512Kbps), and set the width and height as 320×40. Under the same bandwidth, the smaller the frame size is, the higher quality the video is. For details about settings of showed in the following dialog box, you can refer to the article "Video Delivery Options" I present here- http://www.sothink.com/tutorials/viewtopic.php?t=67.

Vivian Tips: You should select "Save a copy of the Flash Video File" (*.flv) to export video file.

image004.jpg


Click Next to convert video file, after that, please close the new window and back to the first window. In this tutorial, I present you with videocontrol.flv, you can direct copy it from source file.

3. Set canvas size as 400×20, frame rate as 25. Position each component on proper place of stage as following illustration. To make better control, it is good to place different components in different layers and you can also give each layer an easy-to-distinct name. One more thing, you need to make the two buttons play button and Stop button overlapped. The visual properties of the two buttons can be controlled by ActionScript when movie playback.

Vivian Tips: Remember to give the video window on the stage a size more than 320×40 in Transform panel.

image006.jpg



4. Enter "progress" as an instance name for progress bar and double-click the instance on the stage to enter into movie clip-editing mode. As the following illustration shows, layer3 is the mask of layer2. The rectangle in layer2 with an instance named "bar" and the triangle in layer 5 with an instance named "thumb" will move rightwards by using ActionScript along with the rate of progress of playback. The "thumb" can locate the specified position of the progress bar according to rate of progress when you drag it.

image008.jpg



The ActionScript in layer 6 is :

Code:
stop();


Add ActionScript for "thumb":

Code:
on(press)

{

//Start to drag and limit the drag area.

this.startDrag(true,-72,11,72,11);

this.draging = true;

//Pause the video.

_root.oldvalue = _root.mediaPlaying;

_root.mediaPlaying = false;

_root.my_ns.pause(true);

}



on(release)

{

//Stop dragging.

this.stopDrag();

this.draging = false;

//Return to play state

_root.mediaPlaying = _root.oldvalue;

_root.my_ns.pause(!_root.mediaPlaying);

}



on(releaseOutside)

{

//The same to event "release".

this.stopDrag();

this.draging = false;

_root.mediaPlaying = _root.oldvalue;

_root.my_ns.pause(!_root.mediaPlaying);

}



onClipEvent(mouseMove)

{

//Compute the current proportion and call the function "scrubbing" to locate specified position for video while dragging.

if (this.draging)

{

_parent.bar._x = this._x -72;

_root.scrubbing(Math.floor((this._x+72)/144*100));

}

}




5. Back to main scene. Double-click the volume controller to enter into editing mode; the layer fracture is as follows. The crystal ball with an instance name "VolBtn" in layer 5 is volume control handle, which control the volume according to proportion when you drag crystal ball.

image010.jpg



Add ActionScript to "VolBtn":

Code:
on(press)

{

//Start to drag and limit the drag area.

this.startDrag(true,0,-60,0,60);

this.draging = true;

}



on(release)

{

//Stop dragging

this.stopDrag();

this.draging = false;

}



on(releaseOutside)

{

//Stop dragging

this.stopDrag();

this.draging = false;

}



onClipEvent(mouseMove)

{

//Compute current proportion and set the volume when you drag.

if (this.draging)

{

percent = Math.floor((60-this._y)/120*100);

sound.setVolume(percent);

}

}



onClipEvent(load)

{

//Initialize audio object, target movie clip is set as movie clip which includes video, It is "_root" in this sample.

var sound = new Sound(_root);

}


6. Back to main scene. Right-click library panel and select "New Symbol", enter "video" as symbol name. Please note the symbol type is "Video", click OK to finish creating new symbol.

image012.jpg



Insert a new layer in timeline and drag it to ahead of other layers. I will put a video window in this layer. Drag the symbol "video" from library to stage, and then you get the a transparent video window, which is an instance of video symbol. Set the transparent video window's size as 320?40 and enter "my_video" as its instance name.
Vivian Tips: To select the transparent video window on the stage, you can click the cross line.

image014.jpg



7. Insert a new layer as AS layer. Add actionscript in first frame as follows:

Code:
//Create local connection.

var my_nc = new NetConnection();

my_nc.connect(null);

//Create stream which is used to playback FLV file by the specified object "NetConnection".

var my_ns = new NetStream(my_nc);

//Attach the video import signal "NetStream" to video object instance "my_video".

my_video.attachVideo(my_ns);

//Set the buffer time.

my_ns.setBufferTime(5);

//Playback FLV file.

my_ns.play("videocontrol.flv");

//Get FLV file information, "duration" value is the length of time of FLV video stream.

my_ns.onMetaData = function(infoObject:Object)

{

totalTime = infoObject.duration;

};

//Get play state, set the relative variables when video stream finishes playback.

my_ns.onStatus = function(info)

{

if (info.code == "NetStream.Play.Stop")

{

mediaPlaying = false;

isEnd = true;

setPlayBtn(true);

}



};

//Set progress bar and time information.

function onEnterFrame()

{

if (mediaPlaying)

{

setTime(my_ns.time);

setBar();

}

}

//Set progress bar, converse the proportion of current time and total time to the location of progress bar.

function setBar(percent:Number)

{

if (percent==undefined)

percent = Math.floor(my_ns.time/totalTime*100);

progress.thumb._x = percent/100*144-72;

progress.bar._x = progress.thumb._x-72;

}

//Converse the time properties (unite is second) of video stream to format--"hour: minute: second: millisecond", and then set them to corresponding text block.

function setTime(aTime)

{

var Hours = Math.floor(aTime / 3600);

var Residue = aTime % 3600;

var Minutes = Math.floor(Residue / 60);

Residue = Residue % 60;

var Seconds = Math.floor(Residue);

Residue = Residue % 1;

var Millisecond = Math.round(Residue * 1000);

var TimeString = Hours + ":" + (Minutes < 10 ? ("0") : ("")) + Minutes + ":" + (Seconds < 10 ? ("0") : ("")) + Seconds + ".";

if (Millisecond < 10)

{

TimeString = TimeString + ("00" + String(Millisecond));

}

else if (Millisecond < 100)

{

TimeString = TimeString + ("0" + String(Millisecond));

}

else

{

TimeString = TimeString + String(Millisecond);

} // end else if

time = TimeString;

} // End of the function

//Locate the specified position for video stream according to proportion when you drag the progress bar. Remember to do some specific change when you drag the control handle to any place of the progress bar.

function scrubbing(percent:Number)

{

if (percent == 100)

{

isEnd = true;

setPlayBtn(true);

}

else

{

isEnd = false;

setPlayBtn(!oldvalue);

}

my_ns.seek(percent*totalTime/100);

setTime(my_ns.time);

} // End of the function

//Set the visual state of play button and pause button.

function setPlayBtn(bool:Boolean)

{

playBtn._visible = bool;

pauseBtn._visible = !bool;

}

//Initialize some variables.

mediaPlaying = true;

isEnd = false;

playBtn._visible = false;

stop();


8. Add ActionScript for Play button.

Add ActionScript for Pause button as follows:

Code:
on(release)

{

//Stop video playback, locate on initial position.

//You should use "my_ns.close();" if the video playback end stream, which can be used in other aspect.

mediaPlaying = false;

my_ns.seek(0);

my_ns.pause(true);

//Set Play button state and initial progress state.

setPlayBtn(true);

setBar(0);

}


Add ActionScript for play button as follows:

Code:
on(release)

{

//Playback video. If the video ends, it replays.

mediaPlaying = true;

if (isEnd)

{

my_ns.seek(0);

isEnd = false;

}

my_ns.pause(false);

//Set the Play button state.

setPlayBtn(false);

}


Add ActionScript for pause button as follows:

Code:
on(release)

{

//Pause playback.

mediaPlaying = false;

my_ns.pause(true);

//Set Play button state.

setPlayBtn(true);

}



Vivian Tips: For that the file name used in my_ns.play() is relative path, the FLV file and SQF ought to be saved in the same directory. The same, the SWF file published and FLV file also should be put in the same directory.

OK, everything is done! Press Ctrl+Enter to preview you presentation now.

Vivian Tips: You can put a list of FLV file in SWF Quicker and let users to specify the one they want to playback; or you can put them in the external XML file. SWF can read the XML file in order to get playback list, it is convenient for updating at any moment.

Glad to share learning experience with you! Hopefully it is useful to many of you. Any time, Good luck!

If you are interested in Sothink SWF Quicker -- a Flash Maker with a lot of features, such as create Flash Video, support ActionScript 2.0, include plenty of built-in templates & animated effects, etc., You can have a tour of this Flash software here.

To download Sothink SWF Quicker, please click here.

» Level Advanced

Added: 2006-05-25
Rating: 9.08 Votes: 12
(10 being the highest)
» Author
I use Sothink SWF Quicker for TWO years. I am happy to introduce this Flash Maker and share the learning experience with you friends in Flash Kit.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.