FlashTunes Template Tutorial
FlashTunes Component Tutorial
Adding the player to Myspace.com
Customizing FlashTunes in the Component Inspector
Customizing FlashTunes using XML
Setting Properties with Actionscript
Actionscript Methods
Requirements


FlashTunes Template Tutorial
 


The FlashTunes Template folder includes all you need to create a stand-alone audio player or a player to add to your html pages. You do not need the Flash application to use the FlashTunes Template.

Step 1- Add audio files
In the Template folder, add the mp3 files you wish to use.

Step 2- Populate the XML file
The XML file is a simple text file that tells FlashTunes where the audio files are and in what order to display them. It is also used to customize the look of the player. The Template includes an XML file named "sound_data.xml" for you to update. The XML structure looks like this:

 

<soundShow>
       <setup>
              <!--The lines below are used to edit properties to change the look of the player-->
              
<filePath>sounds/</filePath>
              <playerType>large</playerType>
              <backgroundColor>#666666</backgroundColor>
              <baseColor>#CCCCCC</baseColor>
              <hiliteColor>#333333</hiliteColor>
              <backgroundAlpha>100</backgroundAlpha>
              <dropdownDirection>up</dropdownDirection>
              <dropDownWidth>200</dropDownWidth>
              <maxListView>3</maxListView>
              <showJumpControls>false</showJumpControls>
       </setup>
       <!--The following lines are where you set the names of the mp3 files-->
       <item>
              <soundFile>mysong1.mp3</soundFile>
              <title>Sample audio one</title>
        </item>
        <item>
               <soundFile>mysong2.mp3</soundFile>
              <title>Sample audio two</title>
        </item>
       <!--You can add more audio files below. There is no limit to how many.-->

</soundShow>

Step 3- Test and load to your web site
Test your player by opening the index.html file in a browser. Then upload the following files to your web server: flashtunes.swf, index.html, sound_data.xml, swfobject.js and the sounds folder. - you're done!

FlashTunes Component Tutorial
 


Use the FlashTunes Component to add a player inside your Flash files. The download comes with sample Flash files to further show how the player can be set up.

Step 1- Set up the FlashTunes Component in Flash
In Flash, drag an instance of the FlashTunes component to the stage.
In the Flash menu, select: Window > Component Inspector.
The component inspector is where you customize your player. Find the property named "XML path", enter the location of you XML file. In this case enter: "sound_data.xmll"
Next, change any properties you wish to customize the look and feel of the player.

Next follow the three steps outlined in "FlashTunes Template Tutorial" above. Go there now
Note: any properties you define in the XML file will override properties you define in component Inspector.
Using the XML file to define your properties is any easy way to customize your player without having to republish the Flash file.


Adding the player to Myspace.com
 


1) First follow the steps from the Template tutorial above. In the XML file where you set the sound folder path, enter the full url to where you will upload the images. Example: <filePath>http://www.mysite.comsounds/</filePath>

2) Then upload the SWF file, sounds folder and XML file to an external webhost such as geocities, or a web host where you host another website.

3) After you have uploaded the files add the following code to any of the sections in your Myspace profile:

<embed allowScriptAccess="never" allowNetworking="internal" enableJSURL="false" enableHREF="false" saveEmbedTags="true" src="http://www.flashrelief.com/flashtunes.swf?xmlPath=http://www.flashrelief.com/sound_data.xml" " quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"
width="800"
height="600">
</embed>

3)Replace http://www.flashrelief.com/flashtunes.swf with your own path to the SWF file

4)Replace http://www.flashrelief.com/sound_data.xml with your own path to the XML file


5)Save the settings and you are done!


Customizing FlashTunes using the Component Inspector
 


You can customize the FlashTunes Component using the Component Inspector. To find the Component Inspector in Flash go to the menu: Window > Component Inspector.

The following is a list of all the properties you can change in the Component Inspector.

Parameter sample value Description
playerType small Change the type of player. Valid values are: "invisible","controls_only","volume_only","small","medium" or "large"
dropDownDirection down Sets the direction that the dropdown menu will open. Valid values are: "up", "down", or "none"
showJumpControls true This tells the player whether or not to display the "jump" controls. These are the double arrow buttons on either side of the play/pause button.
autoStart true If set to true, the audio will start to play automatically
loopType loopCurrent Action that occurs after a song finishes. valid values are: loopCurrent, playNext, none
dropDownWidth 220 Sets the width of the dropdown menu
backgroundColor #FF0000 Changes the color of te backround
backgroundAlpha 50

Sets the transparancy amount of the backround

maxListView 4 number of items to display in the dropdown. Items more that this number you would need to scroll to.
hiliteColor #FF0000 Color of the hilite elements in the player
baseColor #FF0000 Color of the base elements in the player.
xmlPath /xml/myxml.xml path to your XML file
 
Customizing the player using XML
 


You can also customize the look of FlashTunes using the XML file. When using the FlashTunes Component, any properties you add to the XML file will override properties in the Component Inspector. Add the properties you want to change by adding nodes inside the <setup> node.
Example:

 

<setup>
       <!--add any properties you would like to change for the player-->
       
<setup>
       <filePath>sounds/</filePath>
       <playerType>large</playerType>
       <backgroundColor>#666666</backgroundColor>
       <baseColor>#CCCCCC</baseColor>
       <hiliteColor>#333333</hiliteColor>
       <backgroundAlpha>100</backgroundAlpha>
       <dropdownDirection>up</dropdownDirection>
       <dropDownWidth>200</dropDownWidth>
       <maxListView>5</maxListView>
       <showJumpControls>false</showJumpControls>
</setup>


The following is a list of all the properties you can add and edit in the XML file.

Parameters with sample values Description
<filePath>sounds/</filePath> This is the file path to the folder that holds your mp3 files. It can also be an absolute path starting with "http://www"
<playerType>large</playerType> Change the type of player. Valid values are: "invisible","controls_only","volume_only","small","medium" or "large"
<backgroundColor>#666666</backgroundColor> Changes the color of te backround
<baseColor>#CCCCCC</baseColor> Color of the base elements in the player.
<autoStart>true</autoStart> If set to true, the audio will start to play automatically
<loopType>playNext</loopType> Action that occurs after a song finishes. valid values are: loopCurrent, playNext, none
 <hiliteColor>#333333</hiliteColor> Color of the hilite elements in the player
 <backgroundAlpha>100</backgroundAlpha> Sets the transparancy amount of the backround
<dropdownDirection>up</dropdownDirection> Sets the direction that the dropdown menu will open. Valid values are: "up", "down", or "none"
<maxListView>5</maxListView> number of items to display in the dropdown. Items more that this number you would need to scroll to.
<dropDownWidth>200</dropDownWidth> Sets the width of the dropdown
 <showJumpControls>false</showJumpControls> This tells the player whether or not to display the "jump" controls. These are the double arrow buttons on either side of the play/pause button.
Setting properties with actionscript
 


All properties that can be set in the Component Inspector and XML can also be set using actionscript.

A complete list of properties can be found in Flash in the Actions panel at the list on the left hand side. Listed under the directory: FlashRelief>FlashTunes. They can also be found in the help menu at the top under: Help>Flash Help. Then select: FlashRelief>FlashTunes

The following example sets properties using actionscript.

 

flashtunes.playerType="large"
flashtunes.backgroundColor="0xFF0000"




 

Actionscript methods
 


FlashTunes.changeXML()

 

Parameters
url A string that represents the URL where the XML document to be loaded is located. If the SWF file that issues this call is running in a web browser, url must be in the same domain as the SWF file.

Description:
changeXML() is used to draw a new player based on the information in the XML file. This is useful for example if you want to display different sets of music. You could load in different XML files when different buttons are clicked.

Usage:
myPlayer.changeXML("player.xml")



 

 


Requirements
 


To use the stand-alone FlashTunes Template, you just need a text editor to update the XML file. Your browser must have Flash Player 8 0r aboveinstalled. This is a free plugin available here.

To use the FlashTunes Component you need Macromedia Flash 8 or Flash CS3, Window or Macintosh. May be published for Flash Player 8 0r above.




Disclaimer and Privacy Policy