Thursday 10 September 2009

Create a Simple and Attractive MP3 Player

Author: Tut-Designer | Posted at: 11:21 | Filed Under: , , |

Getting started

First I'll just go through what we need to complete this tutorial:

I've used the 3rd party class Caurina Tweener to tween elements on the screen. This is not required because you can use Flash's own tween class to do the same job. Mind you, if you're not familiar with Caurina I suggest you to take a look. Tween Lite is another 3rd party tweener you might have heard of. It's a very powerful tween class which you could also use for this project if you wanted. You can find Caurina Tweener in the source code.

  • The source code includes one mp3 file that we'll need: Tarzan's mighty yell :). You can also use your own mp3 if you like.
  • Also in the source code you'll find the directory "ai" which contains the simplemp3player.ai file. This file includes all the graphics for the player.
  • Lastly I've included font that we need. It's called 04b03 and it's a bitmap font. Install it and you're ready to go.

Step 1: Create New File

First you need to create a new Flash Actionscript 3.0 document. You don't need to adjust any document properties.

Go to Flash > Preferences > AI file importer on Mac or Edit > Preferences > AI file importer on Windows. Make sure you have the following settings:

Save it and give it the name "SimpleMP3Player.fla". Also copy the directory "caurina" and "tarzan.mp3" to same place as your .fla file.

Step 2: Import Illustrator File

Now we're ready to import the Illustrator file. Go to File > Import > Import to Stage. Locate "simplemp3player.ai" from the source package "ai" directory, press OK and you'll get the screen as shown below. Set the Convert to layers "Flash layers" so you get all the layers contained within the ai file directly to Flash. The next two options, as shown in the image, place all the artwork to same coordinates as in ai file and resize your Flash document exactly to size that we need.

When you click OK in the import dialog your document should look like the image shown above.

Step 3: Create the Button Sprite

You probably noticed play and pause buttons in the last image. Those are going to be our button sprite that controls the sound. All the buttons are grouped into one group.

Select only buttons group and press F8 to get the "Convert to symbol" screen. Give it the name "buttons" and make sure you've selected MovieClip as the type. Set the registration to the top left corner and click OK. Switch to the Properties panel and give the object a instance name "buttons". The image below illustrates these steps visually:

We have our buttons in one movieclip, but the mask is not included. We need one more movieclip to bind them all together.

Select the buttons movieclip and the mask object. Again press F8 and now give it a name of "buttonSprite". Also remember to give it a instance name. This time "bs" (I know what you're thinking, but this is an abbreviation of ButtonSprite).

Step 4: Manual Masking

Now our button sprite is almost ready to rock. All we need to do is mask it so that it shows just one button at a time.

Double-click your buttonSprite movieclip. Create a new layer above the active layer and name it "mask". Select the mask object and cut it using "Cmd + X" on Mac or "Ctrl + X" on Windows. Select the mask layer and paste using "Cmd + V" on Mac or "Ctrl + V" on Windows. It doesn't matter where your mask object is because next we align it to right place.

With your mask still selected open up the Align panel(Window > Align) and make sure the "To stage" button is pressed down. Now press the "Align top edge" and "Align left edge" buttons and your mask object should now be in the correct position, the top left corner of your movieclip.

The only thing remaining to do is mask the buttons. Right-click above the mask layer and choose Mask.

You can see the effect instantly; only one button is visible.

Step 5: Start Creating the Display

Let's forget the buttons for a while and focus on the MP3 player's display. I'll show you how to build this display element manually. It could be done with AS3, of course, but let's do it manually this time.

First select the mask element from mask layer. Convert it to a movieclip and give it the name "displayMask". Use this name as the instance name too. The mask for display is ready, so hide the layer. Next, create a layer between the buttons layer and the mask layer. Name it "text". Select the Text tool from the Tools palette and use the options shown in the image below:

Step 6: Add Textfields to Display

We need textfields to show our information (artist, song name, loading percentage and song length). We'll create textfields manually to the stage.

First draw textfieds on the text layer as shown in the image below. Convert all three textfields in to one single movieclip called "playerTexts". Create one more textfield and call it "preloader". You don't need to convert this to a movieclip.

Step 7: Complete the Display

All we need to do is include our new loader-textfield and playerTexts-movieclip in one movieclip so we can control texts as and when we like.

Select the loader-textfield and playerTexts-movieclip and press F8. Give it a name and an instance name of "display". Now we've completed our display hierarchy, it should look like this:

To write a data example to songInfo-textfield we have to write the following line of code:

view plaincopy to clipboardprint?
  1. display.playerTexts.songInfo.text = 'This is where we put the artist and song name';

So now we have every graphical element ready that we need for the MP3 Player. Next we'll jump deep into the code, so dive with me!

Step 8: Create Document Class File

To get the code to work we need to create the document class. Document class code is executed first when .swf files play. You don't need to write your code to the timeline anymore and your class is easier to import to another .fla file in the future if it's needed.

Go to File > New. Select "Actionscript file" from the window which opens and click OK. Save the file to the same folder as your .fla file and name it "SimpleMP3Player.as".

Now assign your new .as file as document class. Click the stage and go to the Properties panel. There you'll find the "Class" field where you need to enter the class name you've created. Enter "SimpleMP3Player" and click the small pencil button. If you spelled the class name correctly the "SimpleMP3Player.as" file should become active. Otherwise Flash will throw an error.

Step 9: The Code

Code brings everything to life. Here's the completed ActionScript, I'll explain it block by block. Check also the source code from the source package, I've commented it from beginning to end.

view plaincopy to clipboardprint?
  1. package
  2. {
  3. import flash.display.MovieClip;
  4. import flash.events.Event;
  5. import flash.events.EventDispatcher;
  6. import flash.events.IOErrorEvent;
  7. import flash.events.MouseEvent;
  8. import flash.events.ProgressEvent;
  9. import flash.events.TimerEvent;
  10. import flash.media.Sound;
  11. import flash.media.SoundChannel;
  12. import flash.media.ID3Info;
  13. import flash.net.URLRequest;
  14. import flash.utils.Timer;
  15. import flash.text.TextField;
  16. import flash.text.TextFieldAutoSize;
  17. import caurina.transitions.Tweener;

  19. public class SimpleMP3Player extends MovieClip
  20. {
  21. // Create some variables that we need
  22. private var mp3File:Sound;
  23. private var mp3FilePosition:SoundChannel;
  24. private var id3Data:ID3Info;
  25. private var id3InfoAvailable = false;

  27. private var updateTime:Timer;

  29. private var playingSound:Boolean = false;
  30. private var soundPosition:Number;
  31. private var songReachedEnd:Boolean = false;

  33. private var buttonPos:Array = new Array('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252');

  35. public function SimpleMP3Player()
  36. {
  37. display.playerTexts.x = -73;
  38. display.mask = displayMask;

  40. bs.buttons.buttonMode = bs.buttons.enabled = false;
  41. bs.buttons.y = buttonPos[3];

  43. loadMP3();
  44. }

  46. private function loadMP3():void
  47. {
  48. mp3File = new Sound();
  49. mp3File.addEventListener(ProgressEvent.PROGRESS, mp3FileLoading);
  50. mp3File.addEventListener(Event.COMPLETE, mp3FileLoaded);
  51. mp3File.addEventListener(IOErrorEvent.IO_ERROR, errorLoadingSound);

  53. mp3File.addEventListener(Event.ID3, getID3Data);
  54. mp3File.load(new URLRequest('tarzan.mp3'));

  56. Tweener.addTween(display.preloader, {x: 96, time:1});
  57. }

  59. private function mp3FileLoading(e:ProgressEvent):void
  60. {
  61. var currentPercent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
  62. display.preloader.text = 'LOADING...' + currentPercent + '%';

  64. if (currentPercent > 50 && id3InfoAvailable)
  65. {
  66. Tweener.addTween(display.preloader, {x: 200, time:1, onComplete:playMP3, onCompleteParams:[false, 0]});
  67. mp3File.removeEventListener(ProgressEvent.PROGRESS, mp3FileLoading);
  68. }
  69. }

  71. private function mp3FileLoaded(e:Event):void
  72. {
  73. mp3File.removeEventListener(Event.COMPLETE, mp3FileLoaded);
  74. mp3File.removeEventListener(ProgressEvent.PROGRESS, updateBufferField);
  75. Tweener.addTween(display.playerTexts.buffer, {x: 200, time:1});
  76. }

  78. private function errorLoadingSound(e:IOErrorEvent):void
  79. {
  80. trace('Error loading sound: ' + e);
  81. }

  83. private function getID3Data(e:Event):void
  84. {
  85. id3InfoAvailable = true;
  86. id3Data = mp3File.id3;
  87. }

  89. private function playMP3(useSp:Boolean, sp:Number):void
  90. {
  91. if (useSp) mp3FilePosition = mp3File.play(sp);
  92. else mp3FilePosition = mp3File.play();

  94. playingSound = true;
  95. mp3FilePosition.addEventListener(Event.SOUND_COMPLETE, songFinished);
  96. mp3File.addEventListener(ProgressEvent.PROGRESS, updateBufferField);

  98. bs.buttons.buttonMode = bs.buttons.enabled = true;
  99. bs.buttons.y = buttonPos[0];

  101. bs.buttons.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBs);
  102. bs.buttons.addEventListener(MouseEvent.MOUSE_OUT, mouseOutBs);
  103. bs.buttons.addEventListener(MouseEvent.CLICK, mouseClickBs);

  105. updateTime = new Timer(100);
  106. updateTime.addEventListener(TimerEvent.TIMER, getMP3Time);
  107. updateTime.start();

  109. var si:String = id3Data.artist + ' - ' + id3Data.songName;
  110. si = si.toUpperCase();
  111. display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT;
  112. display.playerTexts.songInfo.wordWrap = false;
  113. display.playerTexts.songInfo.text = si;

  115. Tweener.addTween(display.playerTexts, {x: 60, time:1});
  116. }

  118. private function updateBufferField(e:ProgressEvent):void
  119. {
  120. var currentPercent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
  121. display.playerTexts.buffer.text = currentPercent + '%';
  122. }

  124. private function getMP3Time(e:TimerEvent):void
  125. {
  126. var totalMinutes = Math.floor(mp3File.length / 1000 / 60);
  127. var totalSeconds = Math.floor(mp3File.length / 1000) % 60;
  128. var currentMinutes = Math.floor(mp3FilePosition.position / 1000 / 60);
  129. var currentSeconds = Math.floor(mp3FilePosition.position / 1000) % 60;

  131. if (totalSeconds < totalseconds =" if (currentSeconds < currentseconds ="
  132. display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;
  133. }

  135. private function songFinished(e:Event):void
  136. {
  137. mp3FilePosition.removeEventListener(Event.SOUND_COMPLETE, songFinished);
  138. updateTime.removeEventListener(TimerEvent.TIMER, getMP3Time);

  140. bs.buttons.y = buttonPos[3];
  141. mp3FilePosition.stop();

  143. playingSound = false;
  144. songReachedEnd = true;

  146. soundPosition = 0;
  147. display.playerTexts.times.text = 'PLAY AGAIN?';
  148. }

  150. /*
  151. * allButtons.bs event methods begin
  152. */

  154. private function mouseOverBs(e:MouseEvent):void
  155. {
  156. if (playingSound) bs.buttons.y = buttonPos[5];
  157. else bs.buttons.y = buttonPos[1];

  159. if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[1];
  160. }

  162. private function mouseOutBs(e:MouseEvent):void
  163. {
  164. if (playingSound) bs.buttons.y = buttonPos[0];
  165. else bs.buttons.y = buttonPos[4];

  167. if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[3];
  168. }

  170. private function mouseClickBs(e:MouseEvent):void
  171. {
  172. if (playingSound)
  173. {
  174. bs.buttons.y = buttonPos[4];
  175. soundPosition = mp3FilePosition.position;
  176. updateTime.stop();
  177. mp3FilePosition.stop();
  178. playingSound = false;
  179. display.playerTexts.times.text = 'PAUSE';
  180. }
  181. else if (!playingSound)
  182. {
  183. bs.buttons.y = buttonPos[2];
  184. playMP3(true, soundPosition);
  185. playingSound = true;

  187. }
  188. else if (songReachedEnd)
  189. {
  190. songReachedEnd = false;
  191. playMP3(false, 0);
  192. }
  193. }
  194. }
  195. }

0 nhận xét:

Post a Comment

Subscribe to: Post Comments (Atom)
 

Blogroll

Site Info

Text

Tut - Designer Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template