header_graphic
header_gradient
 
:: Documentation :: MP3 Player v.4

General File Descriptions:

  • XML - text file (i.e. flat file database) that is used to load multiple mp3 files at run-time
  • SWF - published Flash 8 movie file that is ready for immediate use on a website
  • FLA - Flash document that can be opened and modified using Flash 8/CS3/CS4
  • MXP - Macromedia Extension Package that can be installed into your Flash 8/CS3/CS4 component menu
  • CSS - Cascading Style Sheet that is used to configure the title and playlist text properties
  • HTML- example web page that shows how the MP3 component should be embedded in a webpage

Each package contains 1 customizable layout in FLA format and 1 published SWF file:

  • mp3player.fla & mp3player.swf - mp3 player size = 250x23.7 pixels, total swf size = 260x410 pixels (includes skinning elements)

dd

Basic use of the Default and Demo MP3 Player files:

  • Upload the following example files and folders to the same location on your server:
    mp3player.swf
    index.html
    tracks.xml
    textstyles.css
    /images/ folder
  • Once the MP3 Player is up and running, you can edit the XML file to begin playing your own mp3 tracks.
  • You can also edit the XML file to change the playback behaviors (autoplay, looping, random play, enable Google Tracking, and volume preset).
  • You can edit the "playlist" FlashVars in the index.html file to load a different XML file (e.g. to use a XML with a different filename or location).
  • You can open the FLA to change the size and other properties of the MP3 player and publish a new SWF.
  • You can install the MXP to add the MP3 Component to your Flash 8/CS3/CS4 Component Menu, which makes it easier to access for future projects.

dd

Adding the published MP3 Player (SWF) to your webpages:

To add the MP3 Player to your webpage you must add the following script (colored text) to your web document wherever you want the MP3 Player to appear. Please note that the swf path (red text), Flash player size (gray text; should be equal to the swf size), and xml path (dark blue text) are specified in two places. You can alter these variables to meet your needs.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="260" height="410" >
<
param name="movie" value="mp3player.swf" />
<
param name="FlashVars" value="playlist=tracks.xml" />
<embed
src="mp3player.swf" width="260" height="410" FlashVars="playlist=tracks.xml"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

dd

Modify the MP3 Player and Publish a new SWF file using the FLA:

  • Using your Flash 8/CS3/CS4 authoring software, open the "mp3player.fla" file.
  • Move the MP3 component around the stage by selecting it on the stage and dragging it to a new location, or you can use the Properties Inspector to accurately position the MP3 player using x and y coordinates (use the same approach for the Playlist component).
  • Change the size (width only) of the MP3 component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions (use the same approach for the Playlist component).
  • Modify the MP3 player settings and behaviors (see Table 2 below for options) by selecting it on the stage, then open the Component Inspector to access the list of configurable parameters (use the same approach for the Playlist component).
  • Once you have finished modifying the component, resize the stage background to fit your modified MP3 player, leaving room for a border if necessary, and save your project.
  • Publish or Export your new SWF file.

dd

Install the MXP in your Flash 8 or CS3 Authoring Software:

  • Before installing the MXP file, shut down your authoring software if it is open.
  • Double click the file named "MP3.mxp". This will open the Extension Manager, which will prompt you to complete your installation.
  • Open your copy of Flash 8/CS3/CS4 and create a new document.
  • Open the Components Panel and look for a folder named "ESA MP3 Player ". In this folder, there will be two components named MP3 and Playlist.
  • Add an instance of the MP3 component to the stage and give it an instance name of "myMP3" (use the same approach to add the Playlist component to the stage, and make sure to reference "myMP3" in the component inspector's "MP3 Instance" parameter field).
  • Move the MP3 component around the stage by selecting it on the stage and dragging it to a new location, or you can use the Properties Inspector to accurately position the MP3 using x and y coordinates (use the same approach for the Playlist component).
  • Change the size (width only) of the MP3 component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions (use the same approach to resize the Playlist component).
  • Modify the MP3 player settings and behaviors (see Table 2 below for options) by selecting it on the stage, then open the Component Inspector to access the list of configurable parameters (use the same approach to configure the Playlist component).
  • Once you have finished modifying the component(s), resize the stage background to fit your modified MP3 player, leaving room for a border if necessary, and save your project.
  • Publish or Export your new SWF file.

dd

Modifying the source files and compiling a new component (SWC file):

  • Using your Flash 8/CS3/CS4 authoring software, open the files named MP3.fla and MP3.as (located in the /source/ folder).
  • Alter the source files according to your own specifications, and save them.
  • In the MP3.fla file, right click the uncompiled MP3 component in the ‘Library’, and export a new SWC file to:
    c:\Program Files\Macromedia\Flash 8\en\Configuration\Components
  • To get the new SWC to show up in the Component list within your Flash authoring software (in the Windows menu), you’ll either need to close and reopen Flash, or you can use the “reload” button (open the components menu, click the small button just below the close button, and hit reload). Once the component list has been refreshed, you will double click the new MP3 component to load it on the stage.
  • Use the same approach to create a new Playlist component (files associated with the Playlist component include: MP3.fla, Playlist.as, and HtmlCellRenderer.as - located in the /source/ folder).

Updating a component in an existing project:

  • First you have to get the new component to show up in the Components Menu within your Flash authoring software (in the Window Menu). If you have downloaded an update from our site, you should install the MXP then open your existing project FLA (Flash should be closed when you install the MXP). If you have created your own SWC using the steps above, you either need to close and reopen Flash, or you can use the “reload” button (open the Components Menu, click the small button just below the close button, and hit reload).
  • Once the Component Menu has been refreshed, you will locate and double click the new component in the list to load it on the stage.
  • Flash will open a "Resolve Library Conflict" window, and ask if you want to replace the existing item in the library - toggle the "Replace existing items" button and click "OK".
  • You should now see 2 components on the stage; one in the same position as the original, and a new component near the middle of the document.
  • Select the new component near the middle of the document and delete it.
  • The remaining component on the stage is the updated component with your previous settings.
  • You can now modify the component parameters in the Component Inspector, save your project, and publish a new SWF.

dd

Table1. Default MP3 Player with Built-in Controls and Playlist

 

Table2. Configurable Parameters that can be set for the MP3 Player and Playlist components using the Component Inspector in Flash 8/CS3/CS4.

 

Description of each configurable parameter available within the MP3 Player's Component Inspector:

  • 1 - xmlLocation - absolute or relative path to the xml file; this should be blank if you're using FlashVars to load the xml path dynamically
  • 2 - singleMP3 - absolute or relative path to a single MP3 file; this should be blank if you're using FlashVars to load the mp3 path dynamically
  • 3 - CSS URL - absolute or relative path to the CSS file that is used to configure the title and playlist text
  • 4 - Button Color 1 - hexadecimal color code, applies to the symbols on the buttons in their _up state
  • 5 - Button Color 2 - hexadecimal color code, applies to the symbols on the buttons in their _over state
  • 6 - Slider Color 1 - hexadecimal color code, applies to the download-progres indicator and the background color on the volume slider track.
  • 7 - Slider Color 2 - hexadecimal color code, applies to the playback-progres bar and the volume level indicator
  • 8 - Enable Continuous Loop - determines the looping behavior; options include: true, false
  • 9 - Enable Autoplay - determines the autoplay behavior; options include: true, false
  • 10 - Enable Random Play - determines the order of the tracks (random or sequential); options include: true, false
  • 11 - Enable Nav Buttons - determines whether the "previous" and "next" navigation buttons are visible or not; options include: true, false
  • 12 - Enable Volume Buttons - determines whether the volume controls are visible or not; options include: true, false
  • 13 - Volume Preset - sets the default volume level as a percentage; options include: numbers 0 through 100
  • 14 - Enable Google Tracking - enables the Google Analytics tracking nodes in the XML; you must have a Google Analytics account and implement the codes to track your site statistics; options include: true, false
  • 15 - Duration Metadata Source - determines the source of the "duration" metadata; options include: XML, ID3. Set to "XML" if you want to manually specify the "duration" using the XML file. Set to "ID3" if you want to use the ID3 "duration" metadata within your MP3 files (note: some MP3 files do not contain ID3 metadata). Must be set to "ID3" if you're loading a single MP3 file.
  • 16 - Title Metadata Source - determines the source of the "title" metadata; options include: XML, ID3. Set to "XML" if you want to manually specify the "title" text using the XML file. Set to "ID3" if you want to use the ID3 "title" metadata within your MP3 files (note: some MP3 files do not contain ID3 metadata). Must be set to "ID3" if you're loading a single MP3 file.
  • 17 - Display Track Title - determines whether the track "title" is visible or not; options include: true, false
  • 18 - Track Title X - determines the "x" coordinate of the title textfield's upper left corner (coordinate is relative to the "x" location of the MP3 component on the stage)
  • 19 - Track Title Y - determines the "y" coordinate of the title textfield's upper left corner (coordinate is relative to the "y" location of the MP3 component on the stage)
  • 20 - Track Title Width - determines the "width" of the title textfield
  • 21 - Track Title Height - determines the "height" of the title textfield (supports multiple lines of text)
  • 22 - Display Track Image - determines whether the track "image" is visible or not; options include: true, false
  • 23 - Track Image X - determines the "x" coordinate of the track image's upper left corner (coordinate is relative to the "x" location of the MP3 component on the stage)
  • 24 - Track Image Y - determines the "y" coordinate of the track image's upper left corner (coordinate is relative to the "y" location of the MP3 component on the stage)
  • 25 - Track Image Width - determines the "width" of the track image (images are not resized when they are loaded into the MP3 and Playlist components, so they should be resized/cropped to match this width prior to loading)
  • 26 - Track Image Height - determines the "height" of the track image (images are not resized when they are loaded into the MP3 and Playlist components, so they should be resized/cropped to match this height prior to loading)

MP3_config

Figure 1. Screenshot of the parameters available within the MP3's Component Inspector

 

 

Description of each configurable parameter available within the Playlist's Component Inspector:

  • 1 - MP3 Instance - instance name of the MP3 component (e.g. myMP3)
  • 2 - CSS Location - absolute or relative path to the CSS file that is used to configure the text in the playlist and title textfield
  • 3 - Row Height - height of each row in pixels
  • 4 - Alternate Row Color 1 - color of alternating rows (optional)
  • 5 - Alternate Row Color 2 - color of alternating rows (optional)
  • 6 - Roll Over Color - row color upon rollover
  • 7 - Selection Color - row color of selected item
  • 8 - Background Color - color of playlist background
  • 9 - Background Transparent - determines the transparency status of the playlist; options include: true, false
  • 10 - List Border Style - determines the style of the list border; options include: none, inset, outset, solid
  • 11 - Vertical Scroll Policy - determines the state of the vertical scroll bar; options include: auto, on, off
  • 12 - Scroll Track Color - color of the scroll bar track
  • 13 - Scroll Arrow Color - color of the scroll bar arrows
  • 14 - Scroll Border Color - color of the scroll bar border
  • 15 - Scroll Highlight Color - color of the scroll bar highlight
  • 16 - Scroll Shadow Color - color of the scroll bar shadow
  • 17 - Icon Symbol Name - name of a movie clip in the library that is added to each row of the playlist (optional)

MP3_config

Figure 2. Screenshot of the parameters available within the Playlist's Component Inspector

 

dd

Working with the XML Playlist:

Configurable Parameters set within the XML: link to xml example with parameters
(note: parameters set within the xml file will override the published SWF settings)

  • autoplay - 'true','false'
  • looping - 'true','false'
  • random - 'true','false'
  • googleTracking - 'true','false'
  • volume preset - the default volume level upon pageload (ranges from 0 to 100 percent)

Nodes for loading dynamic content: link to xml example without parameters

  • file - absolute or relative path to the mp3 track
  • playlist - used to populate the playlist component, and is therefore only necessary if you are using the playlist component. [img src = "path to the thumbnail image"] [hspace = "horizontal padding in pixels"] [vspace = "vertical padding in pixels"] [class='text styles defined in the textstyles.css file'].
  • title - this text will appear as an overlay on the MP3 player; you can either use this node to enter the title manually or you can use the ID3 metadata within the MP3 file (see "Track Title" parameters in the component inspector); you set the location and size of the text field in the component inspector.
  • duration - duration of the track in seconds; you can either use this node to enter the duration manually or you can use the ID3 metadata within the MP3 file (see "Duration Metadata Source" parameter in the component inspector).
  • image - absolute or relative path to an optional JPG, SWF, GIF, or PNG image for each track. You set the location and size of the image in the component inspector (see "Track Image" parameters in the component inspector).
  • googleTracking - this string is used to track the number of plays for each track in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/").

dd

Converting your audio and image files to work with the MP3 Player:

  • Only MPEG Audio Layer III (MP3) files are supported by this component, so you must convert all other audio file types to the MP3 format. You must include ID3 metadata in your MP3 files for the "Duration" and possibly the "Title" if you want to avoid typing this information into the XML playlist.
  • The MP3 component will display JPG, SWF, PNG, or GIF images (only the first frame of an animated GIF will be loaded), so you need to convert your image files to one of these formats using Flash authoring software or another type of image conversion software.
  • The images you display will not be resized when loaded into the MP3 player, so you should create images that fit perfectly within the allocated image spaces.

dd

Actionscript Application Programming Interface (API - used for advanced customization):

Public Properties:
n/a
 
Public Methods:
loadXML(pathToXML:String); //load XML playlist dynamically
loadMP3(pathToMP3:String); //load single MP3 dynamically
jumpToTrack(n:Number); //Jump to a specific track number in the XML array (n starts at 0)
 
Listener Syntax:
function handleEvent(evt) {
  if (evt.type == "start") {
    trace("start");
  }
}
 
Listener Events:
addEventListener("start", handleEvent);
addEventListener("end", handleEvent);
addEventListener("trackLength", handleEvent);
addEventListener("trackTime", handleEvent);
addEventListener("xmlLoaded", handleEvent);

dd

Related Links:

dd

Release Notes:

  • 4.1 - Added a back-up function that allows the player to determine the duration of a MP3 file once the entire track has downloaded (only used when the duration metadata is not available). However, it is best if you include the track duration as an ID3 metadata parameter (TLEN), or use the <duration> node in the XML, because both of these approaches provide the player with the duration metadata as soon as the track starts to dowload (i.e. the track duration will appear immediately).
  • 4.2 - Altered the name of the MP3 player's "playlist" component, so it does not interefere with the HD Video player's "playlist" component when used within the same Flash application.
  • 4.3 - We are no longer recommending the Javascript embed approach (AC_RunActiveContent), because it is no longer required to automatically activate Flash objects in Internet Explorer.

 

 
footer_graphic

Support - Documentation - Skin Wizard - Sample Skins - Tutorials
Copyright © 2003-2012 Earth Science Agency, LLC - All Rights Reserved