Phần các chi tiết trên Mp3 Player :Tạo một file thực hành mới với kích thước tùy ý . Sau đó, tại Frame 1 các bạn vẽ thanh loading rồi Convert sang movie clip và điều chỉnh như sau :
Sau đó đưa đoạn mã sau vào :
stop();
onEnterFrame=function(){
if(_framesloaded==_totalframes&&getBytesLoaded()==getBytesTotal()){
gotoAndStop(3);
}
}
Tại Frame 2 các bạn đưa đoạn mã sau vào :
stop();
var songs:Array = new Array();
var curtrack:Number = 0;
var playingsong:Sound = new Sound();
if (_root.playlist == undefined || _root.playlist == "") {
_root.playlist = "playlist.xml";
}
var playlistXml:XML = new XML();
playlistXml.ignoreWhite = true;
playlistXml.load(_root.playlist);
playlistXml.onLoad = function() {
loadSongs();
loadplaylistbox();
loadSong(curtrack);
if (_root.autostart == "false") {
toggleplaypause();
}
};
function loadSongs() {
for (songIndex=0; songIndex<playlistXml.childNodes[0].childNodes[0].childNodes.length; songIndex++) {
var songdata:Object = new Object();
for (songNode=0; songNode<playlistXml.childNodes[0].childNodes[0].childNodes[songIndex].childNodes.length; songNode++) {
switch(playlistXml.childNodes[0].childNodes[0].childNodes[songIndex].childNodes[songNode].nodeName){
case "creator":
songdata.artist = playlistXml.childNodes[0].childNodes[0].childNodes[songIndex].childNodes[songNode].childNodes[0].nodeValue;
break;
case "title":
songdata.title = playlistXml.childNodes[0].childNodes[0].childNodes[songIndex].childNodes[songNode].childNodes[0].nodeValue;
break;
case "location":
songdata.location = playlistXml.childNodes[0].childNodes[0].childNodes[songIndex].childNodes[songNode].childNodes[0].nodeValue;
break;
}
}
songs[songIndex] = songdata;
}
}
function loadSong(track) {
playingsong = new Sound();
playingsong.loadSound(songs[track].location, true);
playingsong.start(0);
updatevolume();
playingsong.onSoundComplete = function() {
loadSong((curtrack+1)%(songs.length));
};
playpause.gotoAndStop(1);
playpause.playpausebutton.onPress = function() {
toggleplaypause();
};
songdisplay.text = songs[track].artist+" - "+songs[track].title;
eval("playlistbox.playlistitemcontainer.playlistitem"+curtrack+".playlistitemhighlight")._alpha = 4;
eval("playlistbox.playlistitemcontainer.playlistitem"+track+".playlistitemhighlight")._alpha = 20;
curtrack = track;
}
function loadplaylistbox() {
for (songIndex=0; songIndex<playlistXml.childNodes[0].childNodes[0].childNodes.length; songIndex++) {
playlistbox.playlistitemcontainer.attachMovie("playlistitem", "playlistitem"+songIndex, playlistbox.playlistitemcontainer.getNextHighestDepth(), {_x:0, _y:15*songIndex});
eval("playlistbox.playlistitemcontainer.playlistitem"+songIndex+".playlistitemtext").text = songs[songIndex].artist+" - "+songs[songIndex].title;
eval("playlistbox.playlistitemcontainer.playlistitem"+songIndex).songindex = songIndex;
}
}
playpause.playpausebutton.onPress = function() {
toggleplaypause();
};
function toggleplaypause() {
if (playpause._currentframe == 1) {
playpause.gotoAndStop(2);
playpause.curpos = playingsong.position;
playingsong.stop();
} else {
playpause.gotoAndStop(1);
playingsong.start(playpause.curpos/1000, 0);
}
playpause.playpausebutton.onPress = function() {
toggleplaypause();
};
}
onEnterFrame = function () {
if (songdisplay.movingright) {
songdisplay.hscroll -= 10;
if (songdisplay.hscroll<=0) {
songdisplay.movingright = false;
}
} else {
songdisplay.hscroll += 10;
if (songdisplay.hscroll>=songdisplay.maxhscroll) {
songdisplay.movingright = true;
}
}
if (!draggingslider) {
progressslider._x = (playingsong.position/playingsong.duration)*182+61;
if (progressslider._x == 0) {
progressslider._x = 61;
}
}
if (draggingplaylistscroller) {
updateplaylistscroll();
}
if (draggingvolmeslider) {
updatevolume();
}
tempsongtime = "";
if (Math.floor(playingsong.position/60000) == 0) {
tempsongtime += "0";
} else {
tempsongtime += Math.floor(playingsong.position/60000);
}
tempsongtime += ":";
if (Math.floor((playingsong.position/1000)%60)<10) {
tempsongtime += "0";
}
tempsongtime += Math.floor((playingsong.position/1000)%60);
tempsongtime += "/";
if (Math.floor(playingsong.duration/60000) == 0) {
tempsongtime += "0";
} else {
tempsongtime += Math.floor(playingsong.duration/60000);
}
tempsongtime += ":";
if (Math.floor((playingsong.duration/1000)%60)<10) {
tempsongtime += "0";
}
tempsongtime += Math.floor((playingsong.duration/1000)%60);
songtime.text = tempsongtime;
//trace(Math.floor(playingsong.position/60000));
//if(Math.floor(playingsong.position/1000)%60)
//songtime.text=Math.floor(playingsong.position/1000)%60+"/"+Math.floor(playingsong.duration/1000)%60;
};
progressslider.onPress = function() {
draggingslider = true;
progressslider.startDrag(true, 61, progressslider._y, 243, progressslider._y);
};
progressslider.onRelease = progressslider.onReleaseOutside=function () {
progressslider.stopDrag();
playingsong.start(((progressslider._x-61)/182)*playingsong.duration/1000, 0);
playpause.gotoAndStop(1);
playpause.playpausebutton.onPress = function() {
toggleplaypause();
};
draggingslider = false;
};
progressbar.onPress = function() {
playingsong.start(((_xmouse-61)/182)*playingsong.duration/1000, 0);
playpause.gotoAndStop(1);
playpause.playpausebutton.onPress = function() {
toggleplaypause();
};
};
volumebar.onPress = function() {
draggingvolmeslider = true;
volumebar.volumeslider.startDrag(true, 0, volumebar.volumeslider._y, 47, volumebar.volumeslider._y);
};
volumebar.onRelease = volumebar.onReleaseOutside=function () {
draggingvolmeslider = false;
volumebar.volumeslider.stopDrag();
updatevolume();
};
function updatevolume() {
playingsong.setVolume((volumebar.volumeslider._x/47)*100);
}
previoussong.onPress = function() {
loadprevioussong();
};
function loadprevioussong() {
var loadtrack = (curtrack-1)%(songs.length);
if (loadtrack<0) {
loadtrack = songs.length-1;
}
loadSong(loadtrack);
}
nextsong.onPress = function() {
loadnextsong();
};
function loadnextsong() {
var loadtrack = (curtrack+1)%(songs.length);
loadSong(loadtrack);
}
playlistscroller.onPress = function() {
draggingplaylistscroller = true;
playlistscroller.startDrag(true, 283, 70, 283, 171);
};
playlistscroller.onRelease = playlistscroller.onReleaseOutside=function () {
draggingplaylistscroller = false;
playlistscroller.stopDrag();
};
playlistscrollup.onPress = function() {
playlistscroller._y = Math.max(70, playlistscroller._y-10);
updateplaylistscroll();
};
playlistscrolldown.onPress = function() {
playlistscroller._y = Math.min(171, playlistscroller._y+10);
updateplaylistscroll();
};
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta:Number) {
playlistscroller._y = Math.min(171, Math.max(70, playlistscroller._y-delta));
updateplaylistscroll();
};
Mouse.addListener(mouseListener);
playlistscrollbar.onPress = function() {
playlistscroller._y = Math.min(171, Math.max(70, _ymouse));
updateplaylistscroll();
};
function updateplaylistscroll() {
playlistbox.playlistitemcontainer._y = -((playlistscroller._y-70)/101)*(playlistbox.playlistitemcontainer._height-149);
}
function visitswfspot() {
getURL("http://www.swfspot.com", "_blank");
}
var myMenu = new ContextMenu();
var menubezz = new ContextMenuItem("SWF Spot Mp3 Player", visitswfspot);
myMenu.customItems.push(menubezz);
var menuplaypause = new ContextMenuItem("Play / Pause", toggleplaypause);
menuplaypause.separatorBefore = true;
myMenu.customItems.push(menuplaypause);
var menuprevioustrack = new ContextMenuItem("Previous Song", loadprevioussong);
myMenu.customItems.push(menuprevioustrack);
var menunexttrack = new ContextMenuItem("Next Song", loadnextsong);
myMenu.customItems.push(menunexttrack);
myMenu.hideBuiltInItems();
_root.menu = myMenu;
Tạo thêm một Layer nữa, tại Frame 2 các bạn ấn F6.
- Nút bắt đầu và tạm ngưng bài hát (Play/Pause) :
- Sau khi vẽ xong các bạn convert sang movie clip và điều chỉnh như sau : - Các bạn đặt Instance Name cho nó là playpause và nhấp chuột phải vào nó rồi chọn Edit. Tại Frame 1 các bạn convert nó sang Button và đặt Instance Name là playpausebutton. - Tại Frame 2 các bạn ấn F7 sau đó vẽ lại hình chiếc nút như sau : - Vẫn convert sang Button và đặt Instance Name là playpausebutton - Cuối cùng, các bạn đưa đoạn mã sau vào mỗi Frame stop(); - Nút lùi lại bài hát trước (Previous Button) :
- Sau khi vẽ xong các bạn convert sang Button các bạn đặt Instance Name cho nó là previoussong - Nút bỏ qua bài hát (Next Button) :
- Vẽ giống như nút lùi lại bài hát. Vẫn convert sang Button và đặt Instance Name cho nó là nextsong - Thanh âm lượng (Volume Bar) :
- Các bạn vẽ một hình chữ nhật như sau rồi convert sang movie clip: - Nhấp chuột phải vào Movie này và chọn Edit: -Tại Layer 1 : + Convert hình chữ nhật vừa vẽ ở trên sang Movie Clip và điều chỉnh như sau : + Đặt Instance Name là volumeslider - Tại Layer 2 : + Các bạn một hình tam giác như sau : + Nhấp chuột phải vào Frame này và chọn Mask. - Trở lại Scence 1 và đặt Instance Name cho nó là volumebar - Nút hiện thị vị trí thời gian ca khúc đang phát (progress slider) :
- Sau khi vẽ xong, các bạn convert sang Movie Clip và điều chỉnh như sau : - Trở lại Scence 1 và đặt Instance Name cho nó là progressslider - Thanh thời gian (progress bar) :
- Sau khi vẽ xong, các bạn convert sang Movie Clip và điều chỉnh như sau : - Trở lại Scence 1 và đặt Instance Name là progressbar - Thời gian của ca khúc (song time) :
- Các bạn dùng công cụ Text Tools và điều chỉnh như sau : - Sau đó, vẽ một hình chữ nhật và đặt Instance Name cho nó là songtime - Tên bài hát (song display) :
- Các bạn tiếp tục dùng công cụ Text tools và giữ nguyên mặc định như trên rồi vẽ một hình chữ nhật. - Sau đó đặt Instance Name là songdisplay - Các bạn nhấp chọn nút Embed và chọn các dòng sau : - Danh sách bài hát (playlist box) :
- Các bạn vẽ một hình chữ nhật như sau rồi Convert sang Movie Clip : - Các bạn đặt Instance name cho nó là playlistbox và chúng ta bắt đầu vào làm việc với nó : Chúng ta bắt đầu vào làm việc với nó : - Tại Layer 2 : + Các bạn ấn Ctrl + F8 rồi ấn OK. Các bạn có thể bỏ trống và không cần vẽ gì vào cũng được  + Trở lại, làm việc với Playlistbox, các bạn kéo thả phần movie vừa convert vào trang giấy như sau : - Tại Layer 3 : + Các bạn vẽ một hình chữ nhật bằng với hình chữ nhật ở Layer 1 + Nhấp chuột phải vào Layer 3 rồi chọn Mask - Thanh trượt (scroll bar) :
- Các bạn vẽ nút mũi tên đi lên và convert sang Button : - Đặt Instance Name cho nó là playlistscrollup - Các bạn vẽ nút mũi tên đi xuống và convert sang Button : - Đặt Instance Name cho nó là playlistscrolldown - Các bạn vẽ nút để kéo thả và Convert sang Movie Clip - Đặt Instance Name cho nó là playlistscroller - Các bạn vẽ một hình chữ nhật và convert sang Movie Clip : - Đặt Instance Name cho nó là playlistscrollbar - Nút chọn bài hát (play list item) :
- Ở Scence 1 , các bạn ấn Ctrl + F8 và điều chỉnh như sau : - Tại Layer 1 : + Các bạn vẽ một hình chữ nhật có chiều ngang bằng với danh sách rồi Convert sang Movie Clip + Đặt Instance Name cho nó là playlistitemhighlight + Sau đó, đưa đoạn mã sau vào Layer 1 : this.onPress = function() {
_parent._parent._parent.loadSong(songindex);
};
this.onRollOver = function() {
if (songindex != _parent._parent._parent.curtrack) {
playlistitemhighlight._alpha = 10;
}
};
this.onRollOut = function() {
if (songindex != _parent._parent._parent.curtrack) {
playlistitemhighlight._alpha = 4;
}
};
- Tại Layer 2 : + Các bạn dùng công cụ Text Tools và vẽ một hình chữ nhật bằng với hình chữ nhật ở Layer 1 + Các bạn đặt Instance Name là playlistitemtext + Click nút Embed và điều chỉnh như sau : Phần mã XML :<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<creator>Jim Carroll Band</creator><title>People Who Died</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song1.mp3</location>
</track>
<track>
<creator>Danzig</creator><title>Mother</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song2.mp3</location>
</track>
<track>
<creator>Iron Maiden</creator><title>Fear of the Dark</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song3.mp3</location>
</track>
<track>
<creator>Social Distortion</creator><title>Ring of Fire</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song4.mp3</location>
</track>
<track>
<creator>Iggy and the Stooges</creator><title>Search and Destroy</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song5.mp3</location>
</track>
<track>
<creator>Bouncing Souls</creator><title>True Believers</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song6.mp3</location>
</track>
<track>
<creator>The Clash</creator><title>The Guns of Brixton</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song7.mp3</location>
</track>
<track>
<creator>Dream Theater</creator><title>As I Am</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song8.mp3</location>
</track>
<track>
<creator>Dropkick Murphys</creator><title>Fortunate Son</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song9.mp3</location>
</track>
<track>
<creator>Megadeth</creator><title>Peace Sells</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song10.mp3</location>
</track>
<track>
<creator>Misfits</creator><title>Night of the Living Dead</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song11.mp3</location>
</track>
<track>
<creator>Flogging Molly</creator><title>Drunken Lullabies</title>
<location>http://www.bezzmedia.com/swfspot/resources/42-song12.mp3</location>
</track>
</trackList>
</playlist>
Các bạn lưu file chứa đoạn mã này vào cùng với thư mục chứa File thực hành ở trên và đặt tên là playlist
Đoạn mã vừa viết trên có định dạng mặc định là XML các bạn cần chú ý điều này nhé.
Download FIle thực hành tại đây!Download File XML tại đây! | 
Không có nhận xét nào:
Đăng nhận xét