Multiple flash movies on the page, change with DHTML/Javascript

hi, I have a page that has 3 buttons to play 3 different flash video movies. I want to be able to show one movie at a time and let the user click to change to a different video, but without the page reloading.

If this weren't flash it'd be a snap-- just draw all 3 divs, and when the user clicks a button to choose one of them, show that one and hide the other two.

However, in this case, not only do I need to do the show/hide, but I also then need to tell the Flash movie to start playing (and for that matter, tell the other two movies-- the ones being hidden-- to STOP if they are playing).

How can I do this?

The Flash movie I'm using is actually the Flowplayer (to display FLV) files, at http://flowplayer.org/ 
The code to draw it on the page is below (and there's also a .js file that I have to include.)

Please help.

thanks very much

Eric

window.onload = function() {  
 
    flashembed("vid-div", 
   
		/* 
			first argument supplies standard Flash parameters. See full list:
			http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
		*/
      {
         src:'../libs/flowplayer/FlowPlayerLight.swf',
			width: 550, 
			height: 340
      },
		
      /*
			second argument is Flowplayer specific configuration. See full list:
			http://flowplayer.org/player/configuration.html
		*/
      {config: {
      		initialScale: 'scale',
			autoRewind: true,
       		loop: false,
			videoFile: 'my_video_file.flv',
			showMuteVolumeButton: false,
			showMenu: false,
			showStopButton: false,
			showFullScreenButton: false,
			showVolumeSlider: false
      }}
   );
}
</script>
 
<!-- this DIV is where your Flowplayer will be placed. it can be anywhere -->
<div id="vid-div"></div>

Select allOpen in new window