Video lovers always have numbers of videos in various formats, why don’t share them on web page with other people. If you don’t know how, this tutorial will be for you.
What are needed:- Sothink Video Encoder for Adobe Flash
- HyperSnap
- Dreamweaver
- Flash
Step1 Convert your videos of different formats to FLVSelect the video you want to convert.Open Video Encoder for Adobe Flash, and select a video file. Many formats of videos are supported. You can also crop and trim the video. Then click “next”.
Specify audio and video settings for output FLV, and click “next”.
Select “Generate FLV”, “Generate SWF”, “Generate HTML”, “Generate thumbnail”, and “Auto play”. Also select “Get the FLV path from a URL variable and play progressively” and specify a name, “myvideo”, for example.
This is for creating thumbnails of listed videos at the end.Click “Options” button on the right side of “Generate thumbnail”, and you’ll see this pop up. Set “Dimension” for images. Select “Remember my settings”. And you can choose to set first frame or a certain frame as a thumbnail. Then click “OK” and “Next”.
Choose skin and style for playback
The Conversion is in progress.
When the conversion is finished, you will get your flv, swf, htm and jpg files.
For preparation, click .htm file and capture (with HyperSnap 6) the playback image at like this, and check its dimension is 482*344.
Step2 How to make a play list for videoOpen Macromedia Flash 8 and choose Flash document in Create New, and save as playlist.fla.
Click Size button at the bottom of the program to change document dimension.
This will pop up. Please insert the dimension: 482*344.
Use Rectangle Tool to draw first item of a play list:
Set color
Set corner radius
Draw a rectangle
Choose this tool to rotate the direction of color change.
Click it, and add texts.
Set texts as Dynamic Text
And input “name” and ”duration” in Var respectively
Now select the rectangle and two text boxes, and right-click on them. Choose “Convert to Symbol”, and choose Movie clip. Then it appears in Library as Symbol 1.
Double-click it, and use Oval Tool to draw a small circle like this and convert to movie clip
And name it “thumb”
Right-click on it and choose Convert to Symbol, and choose movie clip. Then it is in Library as symbol 2. Then drag Symbol 1 it to the stage twice.
Respectively select these three items and give names: listitem0, listitem1, listitem2
And write Actions respectively as below.
The “0” in the script should be “listitem” number.
Now select these three items, and convert to Movie clip as Symbol 3. And name it “playlist”.
Double-click it, and draw a triangle at the bottom for turning pages. Right-click the triangle and convert it to Button as Symbol 4. Drag it from Library onto Stage.
Select the triangle on the right and select Window > Transform.
Rotate it and you will get:
Then add action script for these two buttons:
For the left one, just change”-1” to “1” for the right one:
Now add a text, and set it property like this
Select Playllist and click in Timeline to add action script:
var xml:XML = new XML();
var mlist:Array;
var curpage=undefined;
var itemsperpage=3;
function loadPlayList(url:String)
{xml.onLoad = onPlayListLoaded;
xml.load(url);}
function onPlayListLoaded(success:Boolean)
{if(!success) return;
if(xml.hasChildNodes())
{mlist = new Array();
for(var xitem:XMLNode = xml.firstChild; xitem != null; xitem = xitem.nextSibling)
{if(xitem.nodeName == "item")
{var mitem = new Object();
mitem.url=xitem.attributes.url;
mitem.thumb=xitem.attributes.thumb;
mitem.title=xitem.attributes.title;
mitem.duration=xitem.attributes.duration;
mlist.push(mitem);}}
ShowPage(0);}}
function LoadFLV(id:Number)
{var url=mlist[curpage*itemsperpage+id].url;
_root.LoadFLV(url);}
function ShowPage(step:Number)
{if(curpage==undefined)
curpage=step;
else
{var dstpage=curpage+step;
if(dstpage<0) dstpage=0;
if(dstpage*itemsperpage+itemsperpage-1>mlist.length) dstpage=Math.floor((mlist.length-1)/itemsperpage);
if(curpage==dstpage) return;
curpage=dstpage;}
pagestr=String(curpage+1)+"/"+ Math.floor((mlist.length+itemsperpage-1)/itemsperpage);
for(i=0;i<itemsperpage;i++)
{var ListItem=eval("listitem"+i);
var id=curpage*itemsperpage+i;
if(id<mlist.length)
{listitem.name=mlist[id].title;
listitem.duration=mlist[id].duration;
listitem.thumb.loadMovie(mlist[id].thumb);}
listitem._visible=id<mlist.length;}}
loadPlayList("playlist.xml");
for(i=0;i<itemsperpage;i++)
{var ListItem=eval("listitem"+i);
ListItem._visible=false;}
Then Click Scene1, use Rectangle Tool to draw a shape and convert it to Movie clip as Symbol 5. And name it “Loader”.
Input 0 in X and Y
Click in Timeline and add action script:
function LoadFLV(url:String)
{
Loader.loadMovie("forbiddenkingdom.swf?myvideo=" + url);
Loader._visible=true;
onEnterFrame = function()
{
if(_root.Loader.g_isEnd)
{
onEnterFrame=undefined;
_root.Loader.unloadMovie();
_root.Loader._visible = false;
playlist._visible=true;
}
}
}
Loader._visible=false;
if(myvideo!=undefined)
{
LoadFLV(myvideo);
playlist._visible=false;}
Step3 Put video on web pageFirst open converted file: forbiddenkingdom.htm in Dreamweaver, and you will see:
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="482" height="344" align="middle">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="playlist.swf?myvideo=forbiddenkingdom.flv">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="allowFullScreen" value="true">
<embed src="playlist.swf?myvideo=forbiddenkingdom.flv" quality="high" align="middle" bgcolor="#ffffff" width="482" height="344" allowFullScreen="true" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>
Change swf name to “playlist .swf”
And we also need to create an xml file like this:
<item url="forbiddenkingdom.flv" thumb="forbiddenkingdom.jpg" title="The Forbidden Kingdom" duration="00:01:00"/>
<item url="10000bc.flv" thumb="10000bc.jpg" title="10000 BC" duration="00:00:32"/>
<item url="panda.flv" thumb="panda.jpg" title="Panda" duration="00:01:56"/>
<item url="darkknight.flv" thumb="darkknight.jpg" title="The Dark Knight.flv" duration="00:00:37"/>
<item url="spiderwick.flv" thumb="spiderwick.jpg" title="The Spiderwick .flv" duration="00:00:37"/>
<item url="horton.flv" thumb="horton.jpg" title="Horton Hears a Who" duration="00:00:30"/>
“url” is the name of flv name, “thumb” is the name of video thumbnail, “title” is content of the flv file, and “duration” is the length of the flv file.
Now you can upload flv, swf, and htm files to the folder where you put this web page on your server.
Now others can enjoy your video online!
Resource ShareIf you would like to use this playbutton, you can
download it here!
More video tutorial >>
