FlashMediaPlayer 2
Package content
The package you purchased contains the following files:
- Documentation folder
- FlashMediaPlayer2.fla
- FlashMediaPlayer2.swf
- data.xml
- stylesheet.css (used to define html formatting in item description)
- embed.html
- swfobject.js (javascript plugin for embed.html)
XML overview
In the data.xml file that comes with the package, you can set a number of settings and add your own albums and tracks / videos to the player. The xml has the following overall structure:
<settings
playerWidth="396"
playerHeight="264"
volumeBarWidth="34"
showPlaylist="1"
useScrollbar="1"
allowSorting="1"
groupByAlbum="1"
albumLineHeight="160"
playlistHeight="312"
playlistWidth ="574"
playlistX="396"
playlistY="0"
playlistHeadSpacing="1"
playlistMargin="1"
playlistLineHeight="54"
headerFont="Arial, 11, #595959"
playlistHeadFont="Arial, 11, #FFFFFF"
playlistFont="Arial, 11, #B7B7B7"
playlistDescriptionFont="Arial, 11, #777777"
albumTitleFont="Arial, 11, #FFFFFF"
albumArtistFont="Arial, 11, #C4C4C4"
playlistLineColor="#151515"
autoPlay = "0"
/>
<playlistColumns>
<playlistColumn title="Title" textVariable="mainTile" width="200" />
<playlistColumn title="Time" textVariable="duration" width="60" />
<playlistColumn title="Custom column 1" textVariable="customVariable" width="100" />
<playlistColumn title="Custom column 2" linkVariable="customLinkVariable2" imageVariable="customImageVariable" width="20" />
</playlistColumns>
<albums>
<album
title="Album title"
artist="Album artist"
imageURL="Folder/albumImage.jpg"
>
<tracks>
<track
audioURL="Folder/track.mp3"
title="Track title"
duration = "Track time"
customVariable="customValue"
customLinkVariable2="http://www.custom.url"
customImageVariable2="Folder/customIcon.jpg"
>
<description>
<![CDATA[<p> Description text goes here.</p> ]]>
</description>
</track>
</tracks>
</album>
</albums>
XML overview: settings
| Variable name | Variable type | Value range | Description |
| Player size | |||
| playerWidth | Number | Width of the videoplayer area in px. | |
| playerHeight | Number | Height of the videoplayer area in px. The controlbar height (48px) will be added to this. | |
| volumeBarWidth | Number | Width of the volumebar in px. | |
| Playlist | |||
| showPlaylist | Boolean | 0/1 | Whether or not to show the playlist. If this is set to 0, some of the variables below will not apply anymore. |
| useScrollbar | Boolean | 0/1 | Only applies if showPlaylist equals true. Whether to use a scrollbar or to scroll the playlist automatically depending on mouse position. |
| allowSorting | Boolean | 0/1 | Only applies if showPlaylist equals true. Whether or not to allow sorting the playlist. |
| groupByAlbum | Boolean | 0/1 | Only applies if showPlaylist equals true. If set to true, this will group tracks by album. |
| albumLineHeight | Number | Only applies if showPlaylist equals true and groupByAlbum equals true. Height of the album information block. | |
| playlistWidth | Number | Only applies if showPlaylist equals true. Width of the playlist. | |
| playlistHeight | Number | Only applies if showPlaylist equals true. Height of the playlist. | |
| playlistX | Number | Only applies if showPlaylist equals true. Horizontal position of the playlist. | |
| playlistY | Number | Only applies if showPlaylist equals true. Vertical position of the playlist. | |
| Player look | |||
| PlaylistHeadSpacing | Number | Only applies if showPlaylist equals true. Space between the column heads. | |
| PlaylistMargin | Number | Only applies if showPlaylist equals true. Space around the playlist. | |
| playlistLineHeight | Number | Only applies if showPlaylist equals true. Height of the lines in the playlist. | |
| headerFont | Quick font style | "Font name, font size, hex color" | Font appearance for current song title and playtime. |
| playlistHeadFont | Quick font style | "Font name, font size, hex color" | Only applies if showPlaylist equals true. Font appearance for column head text. |
| playlistFont | Quick font style | "Font name, font size, hex color" | Only applies if showPlaylist equals true. Font appearance for playlist items text. |
| playlistDescriptionFont | Quick font style | "Font name, font size, hex color" | Only applies if showPlaylist equals true. Font appearance for playlist items description text. |
| albumTitleFont | Quick font style | "Font name, font size, hex color" | Only applies if showPlaylist equals true and groupByAlbum equals true. Font appearance for album title text. |
| albumArtistFont | Quick font style | "Font name, font size, hex color" | Only applies if showPlaylist equals true and groupByAlbum equals true. Font appearance for album artist text. |
| playlistLineColor | Hex color | Only applies if showPlaylist equals true. Color of the lines between playlist items. | |
| Other | |||
| autoPlay | Boolean | 0/1 | Whether or not to automatically start playing on startup. |
XML overview: columns
In the playlistColumns tag you can add as many playlistColumn tags as you like. Each tag will make for one column in the eventual playlist. To make sure the columns display the values you want, you can set various attributes. Read through the following to see which:
| Variable name | Variable type | Value range | Description |
| title | String | The column name to show above the column. | |
| textVariable | String | This string contains a variable name. That same variable name should be put in a track tag later in the xml file, so the information from that variable will be shown in the column. Special value: "mainTile" (the column will show two textfields below eachother, one containing the "title" variable and the second containing the "description" variable) | |
| linkVariable | String | This string contains a variable name. That same variable name should be put in a track tag later in the xml file, so the information from that variable will be used as a button in the column. This can be used for example to link to a band website, a myspace page or an online music store. | |
| imageVariable | String | If you want to use a (small) image in the column instead of displaying text, use this. This string contains a variable name. That same variable name should be put in a track tag later in the xml file, so the information from that variable will be used as an image in the column. | |
| width | Number | Width of the column |
XML overview: albums
In the albums tag you can add as many album tags as you like. Each tag will make for one album in the eventual playlist. You can set the following attributes for every album:
| Variable name | Variable type | Value range | Description |
| title | String | The album title. | |
| artist | String | The album artist. | |
| imageURL | String | Location of the cover image of the album (advised: 80x80px, jpg/gif/png). |
XML overview: tracks
Inside every album tag there's a tracks tag. In there you can add as many track tags as you like. Each tag will make for one track in the eventual playlist. You can set the following attributes for every track:
| Variable name | Variable type | Value range | Description |
| audioURL | String | Location of the .mp3 audio file of this track. | |
| videoURL | String | Location of the .flv video file of this track. If this variable is defined, this entry will be treated as a video, else it will look for the audiotrack in audioURL. | |
| title | String | May be used by a column where textVariable is set to "mainTile" (see explanation above) | |
| <Custom variables> | Various | You can add as many custom variables as you want just by adding them like myCustomVariable="myCustomValue". These variables can be used to fill additonal columns. See below the explanation for adding columns. | |
| description tag | Html | May be used by a column where textVariable is set to "mainTile" (see explanation above). Can contain html. |
Adding columns
To add a column to your playlist, you should first add a row to the playlistColumns tag. First, set the title to display above the column and the width of the column.
A column can display a text value or an image. Whatever is to be displayed is not directly being set here, because you probably want to display different values for every track. Therefore, all you can set here is the name of the attribute in the track tag that contains the actual value. For example, we will first add a new text column using this code:
<playlistColumn title="MyColumn" textVariable="myColumnVariable" width="100" />Now, if you open the player you'll see this column added, but displaying no values. To add values, look for your track tags and add the following there:
myColumnVariable="My text"
If you open the player now, you'll see that for the one track you just edited, the column will display My text.
Image instead of text
Sometimes you want to display a small image instead of text. For example, you may want to display a small logo icon to link to an online store. To display an image you should leave the textVariable attribute out, and instead use imageVariable. The thing works the same, only you don't set a text value in the track, but a link to the image to display.
Add a link to the column
If you want the column value to link to a website URL when the user presses it, you should set linkVariable. Again, this works the same as setting the textVariable. This way, every track can have a link to a different URL. Of course you can also add two columns with links, for example one linking to a mySpace page and one to an online store.
Group by album
To display tracks grouped by album with their album images you should set groupByAlbum="1" in the settings tag.
Working from a custom .xml file
If you want to make various players, but don't want to upload a zillion copies of the .swf file, you can now choose a .xml file defined in the html, so that you only have to make several .xml files.
- Open embed.html
- On line 24, change data.xml to the name of your desire
Copyright notices
You may use this file in any of your projects, either commercial or non-commercial. You may not resell this file as is, or as part of a package, neither may you distribute this file freely, nor 'share' it with others who have not bought an original copy from www.activeden.net. You may though use this file as part of a custom project (e.g. website) for which you earn a payment.
Credits
I would appreciate it if you'd put my name and a link to my website (www.jurgencreative.nl) somewhere in the project where you used this file, but of course you don't have to. Also I love to see how my files are being used, so if you have finished your project I would really appreciate it if you would send me a link at flashden@jurgenvisser.nl.
Thank you for purchasing this file,
Jürgen