Using the Wimpy Player in Flex

Note: this article is no longer maintained on this site.I got more than a little tired of having to format code using no-plugin WordPress, so I set up my own. For updates & submitting comments, please check www.active6.com/blog

This one took some digging. The Wimpy Player uses the ActionScript 2.0 _root variable for configuration, and this has of course been deprecated in AS 3.0.

Wimpy expects some variables to be defined at _root level: the filename of the Wimpy Player (usually wimpy.swf) and the name of the wimpy Configuration XML file (wimpyConfigs.xml).

Since there is no way to pass this information from Flex through an Image or SWFloader element, I decided on using an intermediate Flash file, much like the WimpyLoader example that can be found on the Wimpy Site for embedding Wimpy into Flash. However, I wanted to construct it in such a way that anyone who doesn’t have Flash could use this Flex Loader without having to adjust the dimensions in the source file depending on the Wimpy Player skin used (and as a result, recompile the loader in Flash). You can see the result on my MySpace artist pageYou will need my preloader. You can get a trial version of the Wimpy Player at www.wimpyplayer.com.

The following files need to be in the same folder as the Flex SWF File:

• The preloader (player.swf)
• The Wimpy player (wimpy.swf)
• The Wimpy Player skin and its resource files
• The Wimpy Configuration file (wimpyConfigs.swf)

Controlling Wimpy

Fortunately, all Wimpy controls can be set from the wimpyConfigs file. It will look something like this:

<?xml version=”1.0″ encoding=”UTF-8″?>
<wimpyConfigs version=”1.0″>
<wimpySwf>wimpy.swf</wimpySwf>
<wimpyApp>playlist.xml</wimpyApp>
<wimpySkin>skin_tube.xml</wimpySkin>
<startupLogo>no</startupLogo>
<trackPlays> </trackPlays>
<voteScript> </voteScript>
<startPlayingOnload>no</startPlayingOnload>
<randomOnLoad> no</randomOnLoad>
<shuffleOnLoad> no</shuffleOnLoad>
<startOnTrack> </startOnTrack>
<autoAdvance> yes</autoAdvance>
<loopPlaylist> off</loopPlaylist>
<popUpHelp> no</popUpHelp>
<displayDownloadButton>no</displayDownloadButton>
<forceDownload> no</forceDownload>
<scrollInfoDisplay> yes</scrollInfoDisplay>
<infoDisplayTime> 3</infoDisplayTime>
<theVolume> 100</theVolume>
<bufferAudio> 0</bufferAudio>
<limitPlaytime> </limitPlaytime>
<getMyid3info> no</getMyid3info>
<serveMP3> no</serveMP3>
<hide_folders> goodies,playlister_output,skins,getid3,_notes,_private,_private,_vti_bin,_vti_cnf,_vti_pvt,_vti_txt,cgi-bin</hide_folders>
<hide_files> skin.xml,wimpyConfigs.xml</hide_files>
<!– D:\dev\startdir –>
<startDir> </startDir>
<getid3libPath></getid3libPath>
<defaultVisualBaseName>coverart</defaultVisualBaseName>
<defaultVisualExt> jpg</defaultVisualExt>
<defaultImage> </defaultImage>
<wimpyHTMLpageTitle>Music</wimpyHTMLpageTitle>
<tptBkgd> yes</tptBkgd>
<bkgdColor> 000000</bkgdColor>
<forceXMLplaylist> no</forceXMLplaylist>
<useSysCodePage> no</useSysCodePage>
<ecommerce> no</ecommerce>
<ecomWindow> _blank</ecomWindow>
<icecast> </icecast>
<useMysql> no</useMysql>
</wimpyConfigs>

As you can see the wimpySWF, wimpyApp (the playlist) and the skin have been set to simple filenames so they need to be in the same folder. I’ve tried using URL’s, but I kept running into security sandbox errors, even if I allowed all domains in the Flash preloader file.

The rest of the configuration items in the wimpyConfigs.xml are not relevant to this article and can be explored in the Wimpy documentation.

Getting Wimpy into Flex

The essence of the Flex code looks like this:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application horizontalScrollPolicy=”off” verticalScrollPolicy=”off” layout=”absolute” backgroundColor=”#000000″ usePreloader=”true” xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:ns1=”*”>

<mx:Script>
<![CDATA[

public var wimpyWidth:int = 244;
public var wimpyHeight:int = 422;
public var wimpyDefWidth:int = 480;
public var wimpyDefHeight:int = 140;

Security.allowDomain( ["flex.active6.com","mymp3source.com"] );

public function initWimpy(): void
{
wimpy.scaleX = wimpyWidth/wimpyDefWidth;
wimpy.scaleY = wimpyHeight/wimpyDefHeight;
}

]]>
</mx:Script>

<mx:Image init=”{initWimpy()}” id=”wimpy” width=”480″ height=”140″ autoLoad=”true” scaleContent=”true” source=”player.swf” top=”100″ right=”20″/>

</mx:Application>

OK, that’s not too difficult, is it? Let’s go over the main lines…

We’ll need some dimensions

public var wimpyWidth:int = 244;
public var wimpyHeight:int = 422;
public var wimpyDefWidth:int = 480;
public var wimpyDefHeight:int = 140;

I start by defining some size variables that we’ll need. The first two define the actual width and height of the skin that I’ll use for Wimpy (it’s the Tube skin readily available in the Wimpy skin download section). It’s dimensions are 244×422.

The second dimensions are the default dimensions of the Wimpy player without any skin loaded. We’ll need these because we’re going to dynamically resize the Wimpy player movie within our Flex file because we don’t want to recompile the preloader every time.

If you want to play MP3 files that are not on the same domain…

Security.allowDomain( ["flex.active6.com","mymp3source.com"] );

This is needed because I’m going to pull in mp3’s from a fictuous site called mymp3source.com.

Using an Image Tag to load Wimpy

<mx:Image init=”{initWimpy()}” id=”wimpy” width=”480″ height=”140″

autoLoad=”true” scaleContent=”true” source=”player.swf” top=”100″ right=”20″/>
This defines a Flex Image component that will load the preloader (and the preloader will load Wimpy). The initial dimensions MUST be set to the default Wimpy width and height. When the preloader is initialized, we will call the initWimpy() function. scaleContent MUST be set to true.

Getting Wimpy to resize properly

public function initWimpy(): void
{
wimpy.scaleX = wimpyWidth/wimpyDefWidth;
wimpy.scaleY = wimpyHeight/wimpyDefHeight;
}
initWimpy() dynamically resizes the Wimpy player to the skin dimensions. You are wondering why we still need to do this even after we set scaleContent for the image to true? Well, it’s because the Wimpy Player is embedded into a movieClip in the preloader and redimensions itself based on the width and height it gets from the skin XML file. Redimensioning the preloader by setting its width and height does not trigger the embedded Wimpy player to resize. My guess would be that in the Wimpy code Stage.scaleMode is explicitly set. So you have to use scaleX/scaleY to get to PreLoader->Wimpy.

Enjoy!

And there you have it: a reusable preloader for Wimpy that doesn’t require recompiling to use another skin.