A lot of people asked me many times what you need to do to nest the the mp3player in a movieclip and still be able to keep it’s functionality. Beforehand I need to tell you that I never expected such a big run on this tutorial, it is by now available since ca. 2 years on Pixel2life.com and on my blog, and it’s amazing that I’m still getting feedback on this one.
The player was never mentioned to port as a sole movieclip as it has been used originally for www.toscanorecords.com.
Now how do you place the mp3player into a separate movieclip?
1. First of all create a new empty movieclip by pressing CTRL+F8 (PC), give it an instance name of “audioPlayer”
2. Copy & Paste all frames of the original mp3 player .fla to the newly created movieclip
By now you should have all the elements (graphics, masks, actions) in the new movieclip.
VERY IMPORTANT!!!!
Select all elements on the stage by pressing CTRL+A (PC) and place them at X:0 and Y:0
3. Next we are going to have a look at our Actionscript:
Play button action
1 2 3 4 5 6 7 8 9 | btn_play.onRelease = function() { if (pause == true) { _root.sound_mc.sound_obj.start(posiP); } else { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; this._parent.sound_mc.songStarter(songfile[song_nr]); } }; |
replace the this._parent bit with _root.
Playbutton:
btn_play.onRelease = function() { if (pause == true) { _root.sound_mc.sound_obj.start(posiP); } else { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; _root.sound_mc.songStarter(songfile[song_nr]); } };
Pausebutton:
btn_pause.onRelease = function() { _root.sound_mc.sound_obj.stop(); posiP = _root.sound_mc.sound_obj.position/1000; pause = true; };
Stop Button:
btn_stop.onRelease = function() { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; _root.sound_mc.sound_obj.stop(); };
In the for..loop where we create our song buttons you need to change from _root. to _root.audioPlayer
Piece of for…loop
eval("but"+i).id = i; this["but"+i]._x = 5; this["but"+i]._y = 40+(i*15); this["but"+i].but_txt.text = songname[i]; if (i>=3) { this["but"+i]._x = 160; this["but"+i]._y = -5+(i*15); } this["but"+i].onRelease = function() { clearInterval(timeInterval); this.timeDisplay_txt.text = "00:00/00:00"; _root.sound_mc.songStarter(songfile[this.id]); }; }
Next our volume handler also needs a bit of tweaking:
Replace this._parent.. with _root.audioPlayer…
Volume Handlers
_root.audioPlayer.volume1.dragger.onPress = function() { startDrag(this, true, 0, this._y, _root.audioPlayer.volume1.volBG._width, this._y); _root.audioPlayer.toolTip._visible = true; setInterval(draggableTip, 100); function draggableTip() { _root.audioPlayer.toolTip._x = _root._xmouse; } this.onEnterFrame = function() { var p = (this._x/_root.audioPlayer.volume1.volBG._width)*100; _root.sound_mc.sound_obj.setVolume(p); }; }; _root.audioPlayer.volume1.dragger.onRelease = function() { delete this.onEnterFrame; stopDrag(); }; _root.audioPlayer.volume1.dragger.onReleaseOutside = function() { _root.audioPlayer.toolTip._visible = false; stopDrag(); }; };
Last but not least, you will notice that the textfield is just blank.. Well it isn’t the text is outside of the mask therefore not visible, the only thing you need to do is open the textscroller movieclip on the audioplayer mc and replace _root.title_txt with _root.audioPlayer.title_txt.
this.onEnterFrame = function() { _root.audioPlayer.title_txt._x -= 1; if (_root.audioPlayer.title_txt._x < (-100-_root.audioPlayer.title_txt.width)) { _root.audioPlayer.title_txt._x = 219; } }
as well don’t forget to change line 84 & 86 where the songStarter function assigns values to the textfield.
hello…i;m sorry but i cant find code of pause and other values,i downloaded file from tutorial part 3,maybe i missed part 4 with new flash project?Can you send me a link or a project to my email- thrasher@list.ru
thanks alot!!!
Hello, I have a question regarding this one…In my situation, I need several players on one single movie clip.
So what I did was, I made a movieclip called audioPlayer, and then, copied this to the movieclip I need the players to be…so for the next player I changed everything that was _root.audioPlayer to _root.audioPlayer2…now…in each appart movieclip, it loads their specific playlist.xml (they all have a different one) … but when I put them all together, they all play the same song…how can I fix this?
Jesse kindly, and in his own way, remidned me of the asynchronous tendency of Flash – You got bizz-nat by the izz-naughthering time bug. Well.. not a bug, butanyway When you nest clips with classes, or as he calls them, components, you have to make sure that everyone is loaded and happy before they can have event listeners attached to them. The old onLoad function can be applied to this. I’m so used to onLoad getting blown away with loadMovie, I never even thought to consider it! DOH!Phil had a similar solution in waiting a frame before calling addEventListener.So instead of a register() function I change it to onLoad() now my encapsulation is saved to a certain extent.
I need a playlist selector.
I would like to be able to pick which playlist is loaded to the player from a dropdown list. I am no expert and any help is greatly appreciated.Thanks in advance.
I have a doubt… i have succesfully made your xml musicplayer but now i want to put the play, pause and stop buttons… how do i make them to work as they would work in they weren’t in a movieclip?
//Music
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function(success) {
if (success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
}
}
_root.createEmptyMovieClip(“sound_mc”,1);
_root.sound_mc.sound_obj = new Sound();
_global.song_nr = random(songfile.length);
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);
};
MovieClip.prototype.songStarter = function(file, name) {
this.sound_obj.loadSound(file,true);
};
this.sound_obj.onSoundComplete = function() {
(song_nr == songfiles.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfiles[song_nr],songname[song_nr]);
};
sfx.btn_play.onRelease = function() {
if (pause == true) {
this._parent.sound_mc.sound_obj.start(posiP);
} else {
clearInterval(timeInterval);
this._parent.sound_mc.songStarter(songfile[song_nr]);
}
};
sfx.btn_stop.onRelease = function() {
this._parent.sound_mc.sound_obj.stop();
};
sfx.btn_pause.onRelease = function() {
this._parent.sound_mc.sound_obj.stop();
posiP = _root.sound_mc.sound_obj.position/1000;
pause = true;
};
playlist.load(“playlist.xml”);
i tried to use this code but i isn’t working… help anyone?
Wow~~~
Seriously.
THANK YOU.
About 6 months back I was working on learning to make a streaming audio player guy of sorts.
It used a method that involved making a layer for the sound file, and extending the video’s frame length until the end of the song, and saving seperate .swfs for each song.
I’m currently working on getting my page online for hosting music me and my friend make, and was going to re-use that media handler I already made…
Flash kept crashing any time I tried to import a “song” into the library — and when I imported the control video without a song, it was totally disfunctional anyway (scope problems regarding _roots, I’m certain.)
I went to find solutions – and was coming up dry. I also didn’t want to spend much if any money. I would rather laboriously learn how to make something that someone else sells for $10-$20 (components)
I stumbled across your page after lots of googling… THANK YOU SO MUCH!
This functionality is EXACTLY what I want to be able to apply my custom design stuff, and easily manage files via an XML file (instead of having to update the flash code).
TIAGO! ! ! +1
Tim, thanks a bunch for the nice words, I’m also the kind of person that prefers to create my own stuff instead of go buying components made by someone else. anyway I’m happy that it worked out for you
He tiago,
I did the exact thing here.. but track title still not visible! also the playhead isn’t moving? volume bar neither…
Do you have a working FLA? So I can check what I am doing wrong? Or mayb you forgot to mention something :$
Hey Tiago, I can tell from your countless number of questions that it will be a little hard for me to get to you, also with the date of this tutorial…But I have a question, that must make a thousand submissions for your help on this particular tutorial.
I have set up my MP3 player and used your code and tutorial as a wonderful reference, but when I load my MP3′s into the XML playlist, I lose the scrolling song title…any advice on this one?
hello,
I put just playlist in a movie clip,
so now I have :
_root.playlist["but"+i]._x = 5;
_root.playlist["but"+i]._y = 40+(i*15);
and is the problem with id,
eval(“but”+i).id = i;
so now when i have this:
_root.playlist["but"+i].onRelease = function() {
_root.sound_mc.songStarter(songfile[this.id]);
it says “undefined”.
Can I solve this somehow else, but putting it ALL in a separate movieClip ?
???
Hey Tiago, great mp3 player by the way. I was looking for as2 xml mp3 player to implement into a flash site that I’m working on for music producers.
I have it on the music page of the flash site.
The only real issue I have is that when the user initially goes to the music page, two songs play at the same time. I haven’t uploaded it to the server yet, I’ve only tested it locally so far.
When you hit the stop, or the previous or next buttons then only one song plays, which is how it should work, which is good.
But how do I get it to not play two songs at the same time when the user initially goes to the page?
Also to note, the timer only works when the user initially goes to the music page. After hitting, stop, or previous or next, the timer goes to all zeros and never moves, even though the music is playing. Something tells me that by solving the main issue, of the the two songs playing at the same time when the user initially goes to the music page, will solve this issue as well.
Also, the volume control, is selectable but when you move it, it goes all the way down to mute, and the user can’t bring the volume back up. But this is not so important to me, I was actually going to get rid of the volume control if I couldn’t get it to work.
stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function(success) {
if (success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
// trace(songname[i]+" "+songfile[i]+" "+songband[i]);
}
}
_root.createEmptyMovieClip("sound_mc", 1);
_global.song_nr = random(songfile.length);
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
function timer(sound_obj) {
time = sound_obj.position/1000;
min = Math.floor(time/60);
min = (min<10) ? "0"+min : min;
sec = Math.floor(time%60);
sec = (sec0) {
delete this.onEnterFrame;
_root.page1.level002.audioPlayer.display_txt.text = name+" / "+band;
timeInterval = setInterval(timer, 1000, this.sound_obj);
} else {
_root.page1.level002.audioPlayer.display_txt.text = "loading...";
}
};
this.sound_obj.onSoundComplete = function() {
clearInterval(timeInterval);
_root.page1.level002.audioPlayer.timeDisplay_txt.text = "00:00";
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
_root.page1.level002.audioPlayer.volume1.dragger.onPress = function() {
startDrag(this, true, 0, this._y, _root.page1.level002.audioPlayer.volBG._width, this._y);
this.onEnterFrame = function() {
var p = (this._x/_root.page1.level002.audioPlayer.volBG._width)*100;
_root.sound_mc.sound_obj.setVolume(p);
};
};
_root.page1.level002.audioPlayer.volume1.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};
_root.page1.level002.audioPlayer.volume1.dragger.onReleaseOutside = function() {
stopDrag();
};
};
btn_play.onRelease = function() {
clearInterval(timeInterval);
_root.timeDisplay_txt.text = "00:00";
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
btn_stop.onRelease = function() {
clearInterval(timeInterval);
_root.timeDisplay_txt.text = "00:00";
_root.sound_mc.sound_obj.stop();
};
btn_fw.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = "00:00";
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
btn_rev.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = "00:00";
(song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr--;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
playlist.load("playlist.xml");
Sorry for before, I was using the html code tag to show you my code but it just greyed everything out. So I re-pasted it down below in regular text.
Any help is very much appreciated. Thank you.
__________________
stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function(success) {
if (success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
// trace(songname[i]+" "+songfile[i]+" "+songband[i]);
}
}
_root.createEmptyMovieClip("sound_mc", 1);
_global.song_nr = random(songfile.length);
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
function timer(sound_obj) {
time = sound_obj.position/1000;
min = Math.floor(time/60);
min = (min<10) ? "0"+min : min;
sec = Math.floor(time%60);
sec = (sec0) {
delete this.onEnterFrame;
_root.page1.level002.audioPlayer.display_txt.text = name+” / “+band;
timeInterval = setInterval(timer, 1000, this.sound_obj);
} else {
_root.page1.level002.audioPlayer.display_txt.text = “loading…”;
}
};
this.sound_obj.onSoundComplete = function() {
clearInterval(timeInterval);
_root.page1.level002.audioPlayer.timeDisplay_txt.text = “00:00″;
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
_root.page1.level002.audioPlayer.volume1.dragger.onPress = function() {
startDrag(this, true, 0, this._y, _root.page1.level002.audioPlayer.volBG._width, this._y);
this.onEnterFrame = function() {
var p = (this._x/_root.page1.level002.audioPlayer.volBG._width)*100;
_root.sound_mc.sound_obj.setVolume(p);
};
};
_root.page1.level002.audioPlayer.volume1.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};
_root.page1.level002.audioPlayer.volume1.dragger.onReleaseOutside = function() {
stopDrag();
};
};
btn_play.onRelease = function() {
clearInterval(timeInterval);
_root.timeDisplay_txt.text = “00:00″;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
btn_stop.onRelease = function() {
clearInterval(timeInterval);
_root.timeDisplay_txt.text = “00:00″;
_root.sound_mc.sound_obj.stop();
};
btn_fw.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
btn_rev.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr–;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
playlist.load(“playlist.xml”);
Todo se ha reducido a tener una pe1gina web donde las pesronas te puedan encontrar. Eso significa que la competencia online ya no es tanto una guerra de ideas novedosas sino una guerra de quien puede posicionarse correctamente en los buscadores importantes. Expresiones como promocif3n web y la publicidad de Google han tomado importancia en los faltimos af1os especialmente en Hispanoame9rica. Existen ahora empresas que ofrecen servicios de mejorar posicionamiento web de cualquier website. Esto lo hacen a trave9s de una gestif3n de SEO. SEO es un te9rmino en ingles que significa “Search Engine Optimization”.SEO no es nada mas que el arte de ajustar una pe1gina a los requerimientos de un buscador en particular. El buscador me1s importante es desde hace af1os ya Google. Este buscador maneja alrededor de un 70-80 por ciento del tre1fico mundial. Y cualquier pagina web promedio recibe mas de un 60 por ciento de su trafico de los buscadores, por ende ajustar la pagina a los requerimientos de Google por ejemplo puede significar la diferencia de estar indexado en el buscador mas usado mundialmente a estar perdido en el ciberespacio y que ninguna persona pueda encontrar tu pagina.
Man, I’m sorry to keep posting.
But I figured out why it was playing twice. I have an animation effect on my flash site where I had to have the same symbol but with different instance names, so basically duplicated the symbol and deleted the mp3 player from the duplicate, and then placed the duplicate in place of the original symbol in the time lime.
SO everything works great now!
Except for the volume control…ha.
It would be cool to figure out why that isn’t working.
I’m sure it has something to do with the way it’s being targeted.
I haven’t changed the code at all since my first two posts. So if you see something in the code that I’m doing wrong in terms of the volume, then I would really appreciate it if you told me about it.
Thanks again.
And once again, this is a great mp3 player for as2. Really came in handy.