Flash - Tạo một máy mp3 player chạy cùng vái xml (phần 1)

Flash - Tạo một mỏy Mp3 Player chạy cựng vỏi XML (phần 1) Phần cắc chi 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 movỉe clip và điều chỉnh như sau : 30,Ũ fps o Graphic Edit Basic Linkage buffergraphic •Base dass; y J 'S ề ' L i n k a g e : / port for ActionScript l~ l Eft port for runtime sharing 0 Im p o rt in f irs t fra m e im p a r t fo r f'jủ tirn ộ 'shaping ƯRL: I bource Browse, Symbol. File: C:Ị,U5ers\3ohnyDocunnents^cornbs,fla Symbol name: buffergraphic I Always update before Publishing Enable guides for 9-slice scaling Sau đú đưa đoạn mó sau vào : CODE 1. stopO; onEnterFrame=function() { if(_framesloaded==_totalframes&&getBytesLoaded()==getBytesT otal()){ gotoAndStop(3); } } Tại Frame 2 cỏc bạn đưa đoạn mó sau vào : CODE 1. stopO; var songs:Array = new ArrayO; var curtrack:Number = 0; var playingsong:Sound = new Sound(); if (_root.playlist == undefined II _root.playlist == "") { _root.playlist = "playlist.xml"; } var playlistXml:XML = new XML(); playlistXml.ignore White = true; play listXml.load(_root.play list); playlistXml.onLoad = functionO { loadSongs(); loadplaylistbox(); loadSong(curtrack); if (_root. auto start == "false") { toggleplaypauseQ ; } function loadSongs() { for (songlndex=0; songIndex<playlistXml.childNodes[0].childNodes[0].childNodes.l ength; songIndex++) { var songdata:Object = new Object(); for (songNode=0; songNode<playlistXml. childNodes [0]. childN odes [0]. childN odes [s onglndex] .childNodes.length; songNode++) { switch(playlistXml.childNodes[0].childNodes[0].childNodes[songI ndex] .childNodes[songNode] .nodeName) { case "creator": songdata.artist = playlistXml.childNodes[0] .childNodes[0] .childNodes[songIndex] .c hildN odes [songN ode]. childN odes [0] .nodeV alue ; break; case "title": songdata.title = playlistXml.childNodes[0] .childNodes[0] .childNodes[songIndex] .c hildN odes [songN ode]. childN odes [0] .nodeV alue ; break; case "location": songdata.location = playlistXml.childNodes[0] .childNodes[0] .childNodes[songIndex] .c hildN odes [songN ode]. childN odes [0] .nodeV alue; break; } } songs [songlndex] = songdata; } function loadSong(track) { playingsong = new Sound(); playingsong.loadSound(songs[track].location, true); playingsong. start(O); update volume(); playingsong.onSoundComplete = function() { loadS ong((curtrack+1) % (songs .length)); }; playpause.gotoAndStop(l); playpause.playpausebutton.onPress = function() { toggleplaypause(); }; songdisplay.text = songs [track]. artist+" - "+songs [track].title; eval("playlistbox.playlistitemcontainer.playlistitem"+curtrack+".pl aylistitemhighlight")._alpha = 4; eval("playlistbox.playlistitemcontainer.playlistitem"+track+".playli stitemhighlight")._alpha = 20; curtrack = track; function loadplaylistbox() { for (songlndex=0; songIndex<playlistXml.childNodes[0].childNodes[0].childNodes.l ength; songIndex++) { playlistbox.playlistitemcontainer.attachMovie("playlistitem", "playlistitem"+songIndex, play listbox .playlistitemcontainer. getN extHighestDepth(), {_x: 0, _y: 15 * songlndex}); eval("playlistbox.playlistitemcontainer.playlistitem"+songIndex+". playlistitemtext").text = songs [songlndex]. artist+" - "+songs[songIndex].title; eval("playlistbox.playlistitemcontainer.playlistitem"+songIndex).s ongindex = songlndex; } playpause.playpausebutton.onPress = function() { toggleplaypause(); function toggleplaypause() { if (playpause._currentframe == 1) { playpause. goto AndStop(2); playpause.curpos = playingsong.position; playingsong. stop(); } else { playpause. goto AndStop( 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=Matới.floor(playingsong.position/l000) % 60+"/"+M ath.floor(playingsong.duration/1000)%60; progressslider.onPress = functionQ { draggingslider = true; progressslider.startDrag(true, 61, progressslider._y, 243, progressslider._y); progressslider.onRelease = progressslider.onReleaseOutside=function () { progressslider. stopDragO; playingsong.start(((progressslider._x- 61)/182)*playingsong.duration/1000, 0); playpause.gotoAndStop(l); playpause.playpausebutton.onPress = function() { toggleplaypause(); }; draggingslider = false; progressbar.onPress = function() { playingsong. start(((_xmouse- 61)/182)*playingsong.duration/1000, 0); playpause.gotoAndStop(l); 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. stopDragO; update volume(); function updatevolume() { playingsong. setV olume((volumebar. volumeslider._x/47)* 100); previoussong.onPress = function() { loadprevioussong(); function loadprevioussong() { var loadtrack = (curtrack-l)%(songs.length); if (loadtrack<0) { loadtrack = songs.length-1; } loadSong(loadtrack); nextsong.onPress = function() { loadnextsong(); function loadnextsong() { yar loadtrack = (curtrack+l)%(songs.length); loadSong(loadtrack); playlistscroller.onPress = function() { draggingplaylistscroller = true; playlistscroller.startDrag(true, 283, 70, 283, 171); playlistscroller.onRelease = playlistscroller.onReleaseOutside=function () { draggingplaylistscroller = false; playlistscroller. stopDragO; 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("", "_blank"); var my Menu = new ContextMenu(); var menubezz = new ContextMenuItem("SWF Spot Mp3 Player", visitswfspot); myMenu.customltems.push(menubezz); var menuplaypause = new ContextMenuItem("Play / Pause", toggleplaypause) ; menuplaypause.separatorBefore = true; myMenu.customltems.push(menuplaypause); var menuprevioustrack = new ContextMenuItem("Previous Song", loadprevioussong) ; myMenu.customltems.push(menuprevioustrack); var menunexttrack = new ContextMenuItem("Next Song", loadnextsong); myMenu.customltems.push(menunexttrack); myMenu.hideBuiltlnltemsO ; _root.menu = myMenu; Tạo ứiờ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) : II - Sau khi vẽ xong cỏc bạn convert sang movie clip và điờu chỉnh như sau Symbol Properties Mame Type play pa use OK (â M o v ie dip CTòỹtton o Graphic Cancel Edit Linkage Identifier: I play pause art for Action Script art for runtime sharing art in first frame Import for runtime sharing URL: Basic v' g y ế Source Browse,.. File; - y nho!,, Symbol n a me : Sy m b ol 1 Always update befare publishing HU Enable guides for 9-slice scaling - Cỏc bạn đặt Instance Name cho nố là playpause và nhấp chuột phải vào nố rồỉ chọn Edit. Tại Frame 1 cỏc bạn convert nố sang Button và đặt Instance Name là playpausebutton. Symbol i'lopeities pausebuttonl Edit Linkage identifier; Class: Base class: Linkage: Q Export for ActionScript O Export for runtime sharing ..Eipbrt in first frame H I Import for runtime sharing URL: OK Cancel Basic Source Browse,., File: Symbol name: Symbol 1 Always update before publishing Enable guides for 9-slice scaling - 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 stopO; Nỳt lựi lại bài hỏt trước (Previous Button) : T - Sau khi vẽ xong cỏc bạn convert sang Button cỏc bạn đặt Instance Name cho nú là prevỉoussong Symbol Properties changesong Movie clip @)utton J Graphic Edit Linkage Identifier; Class; Base class: Linkage; Q E x p o r t For AcHori5crlpt □ Export For runtime sharing Export in First frame Q Import For runtime sharing URL; OK Cancel Basic ✓ y Source Browse.,, File: Symbol name; Symbol 1 Always update herore publishing ' Enable guides for 9-slice scaling Nut bo qua bai hat (Next Button): -Vẽ giống nhu 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 B a r) : Cỏc bạn vẽ một hỡnh chữ nhật như sau rồi convert sang movỉe Symbol Properties y Name: Type: volumebdt OK Movie clip ) Button O Graphic Cancel Edit Basic Linkage Identifier^ volumebar dass: Base da55: </ i? 'S ỏ? Linkage/ 0 E-tort for ActionScript I I Export for runtime sharing 0 EiCnrt in first frame [port for runtime sharing URL: Source Browse,,, File: Symbol name: Symbol 1 Always update before publishing 17] Enable guides for 9-slice scaling Flash - Tạo một mỏy Mp3 Flayer chạy cựng vổi XML (phần 2) 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 điều chỉnh như sau : + Đặt Instance Name là volumeslỉder - 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 : Symbol Properties [Mame: Type progressiver ovie dip Jtton o Graphic Edit Linkage Identftoit progresssider Class: Base class: Linkage:/[7] ixport for ActionScript I I Export for runtime sharing L 0 Export in first frame import for runtime sharing URL: OK Cancel Basic Source Browse... File: Sym bol nam e: Sym bol 1 Always update before publishing Enable guides fỹr 9-slice scaling - Trở lại Scence 1 và đặt Instance Name cho nú là progressslỉder 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 : 0— rssn C5D r=~ỡ| - Trở lại Scence 1 và đặt Instance Name là progressbar Thời gian của ca khỳc (song time): 0:00/0:00 A - Cỏc bạn dựng cụng cụ Text Tools và điờu chỉnh như sau : 1 0 Properties X 1 Filters 1 Parameters 1 Actions - X E H m B ICpynamic Text ) V- A ( Futura Md BT ) V Gy songtime AW 0 |vj AỈ 1 Normal V 1 Anti-alias for readability 1V [ Embed... J &W: 56.0 1X; 244.9 1 a 1 Single line 1V- i i Var: 1 1 □ Auto kern “ Hi 13.6 1Y: 1 28.9 1 % Target: - Sau đú, vẽ một hỡnh chữ nhật và đặt Instance Name cho nú là songtớme Tờn bài hỏt (song display): Iron Maiden - The Trooper - 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à songdỉsplay - Cỏc bạn nhấp chọn nỳt Embed và chọn cỏc dũng sau : t liai ac te i Em be- ớl lililớằ Select the character sets you want to embed, To select multiple sets or to deselect -3 set., use Ctrl+dick. •AH"f5TiT65 glyphs) Uppercase [A..Z] (27 glyphs) Lowercase [a. ,z] (27 glyphs) Numerals[0..9] (11 glyphs) Pu n ctu a t ion [ I %.,, ] (52 glyph .Latin (95 glyphs) Japanese Japanese Kanji - Level 1 (3174 glyphs) Japanese (All) (7517 glyphs) Korean Basic Hangul (3454 glyphs) Korean Hangul (All) (11772 glyphs) Traditional Chinese - Level 1 (5609 glyphs) T rad I tional_Chine se f All) ( 18439 alvoh sj Include these characters; A u to Fill Total number of glyphs: 114 Don't Embed OK Cancel 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 Movỉe Clip : o - Cỏc bạn đặt Instance name cho nố ỉà 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ỏ ừống và khụng cần vẽ gỡ vào cũng được + Trở lại, làm việc với Playlỉstbox, cỏc bạn kộo thả phần movỉe vừa convert vào toang giấy như sau : 0 - 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à playlỉstscrollup - Cỏc bạn vẽ nỳt mũi tờn đi xuống và convert sang Button : V - Đặt Instance Name cho nố là playlistscrolldown - Cỏc bạn vẽ nỳt để kộo thả và Convert sang Movie Clip X - Đặt Instance Name cho nố là playlỉstscroller - Cỏc bạn vẽ một hỡnh chữ nhật và convert sang Movie Clip - Đặt Instance Name cho nố là playlỉstscrollbar Nỳt chọn bài hỏt (play list item) : Tỹndởfiriởd - Undefined - Ở Scence 1 , cỏc bạn ấn Ctrl + F8 và điều chỉnh như sau Symbol P iopeities Name: playlistitem Type: (Ăâ flovie dip 1 Button ) Graphic Edit Linkage Identifier! playlistitem Class: Bise class: Linkage^ 0 acpo rt for ActionScript □ e :port for runtime sharing _[^lacport in first frame Import for runtime sharing URL: Source Broi/vse,., File: Sym bol nam e: 5ym bo l 1 f i update before publishing _| Enable guides for 9-slice scaling OK Cancel Bask - 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 _ — Symbol Properties ỉ\l ame : pla ù'Iis t item h i g hlight Type: fớj'Ylo'v’ie clip Cv Button o Graphie Edit Linkagi rt for ActionScript rt for runtime sharing brt in first frame lợiipỷrt for runtime shụfinỗ URL: OK Cancel Basic Source Browse. File: Symbol name: Symbol 1 Always Update b&fore publishing I I Enable guides for 9-slice scaling + Đặt Instance Name cho nố là playlistỉtemhighlỉght + Sau đú, đưa đoạn mó sau vào Layer 1 : CODE 1. this.onPress = funcỹonO { _parent._parent._parent.loadSong(songindex); }; this.onRollOver = funcỹonO { if (songindex != _parent._parent_parentcurtrack) { 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à playlỉstitemtext + Click nỳt Embed và điều chỉnh như sau : Chaiaitei Embedding, Select the character sets you want to embed. To select multiple sets o r to d e se le c t a se t, u se Ctrl+click, Phan ma X M L : CODE 1. <?xml version=" 1.0" encoding="UTF~8"?> 2. 3. 4. 5. Jim Carroll BandPeople Who Died 6. http ://w w w.bezzmedia. com/swfspot/resources/42- songl .mp3 7. 8. 9. DanzigMother 10. ưresources/42- song2 .mp3 11. 13. Iron MaidenFear of the Dark ưresources/42- song3 .mp3 15. 17. Social DistortionRing of Fire ưresources/42- song4 .mp3 19. Iggy and the StoogesSearch and Destroy 22. ưresources/42- song5 .mp3 23. Bouncing SoulsTrue Believers ưresources/42- songú .mp3 27. 29. The ClashThe Guns of Brixton ưresources/42- song7 .mp3 31. 33. Dream TheaterAs I Am ưresources/42- song8 .mp3 35. 37. Dropkick MurphysFortunate Son ưresources/42- song9 .mp3 39. 25. 41. MegadethPeace Sells 42. ưresources/42- song 10.mp3 43. 44. 45. MisfitsNight of the Living Dead 46. ưresources/42- songl l.mp3 47. 48. 49. Flogging MollyDrunken Lullabies 50. ưresources/42- song 12.mp3 51. 52. 53. 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à playỉỉst Đ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ộ.