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!

Theo bezzmedia