Swapping Flash movies with Javascript

replicating "document.getElementById("imageID").src" for flash

[whoisgregg]

I have a page with an IFRAME that calls a page with three different Flash movies. I need to be able to swap out a particular flash moview with onClick javascript handlers. Think "3 TVs side by side" with a "remote" for each monitor, although that is nothing like what I am doing. hehehe ;)

For plain ole' images, it's easy to just give the image an id="" and name="" parameters, then change the src with a function like this, called by onclicks that pass the filename as a variable:

function swapImage(filename) { 
 var a=window.framealternate.document.getElementById("imageID"); 
 a.src= (filename+".jpg"); }

I can't determine how to do the same thing with flash movies, using this code (abbreviated, Flash code is a pain to look at) to embed my Flash:

<object classid="clsid:d27cdb6e-ae6d _snipped_ >
_few snipped param tags_
<embed src="image.swf" id="imageID" name="imageID" _snipped_ />
</object>

So far I've tried the obvious (and a bunch of other silliness):

function swapImage(filename) { 
 var a=window.framealternate.document.getElementById("imageID"); 
 a.src= (filename+".swf"); }

And it does not work at all. I suppose I can't give an ID or name to an EMBED since it's not real HTML... But if I give the ID to the OBJECT, I still don't know how to then affect the EMBED. I also can't do a getElementByTagName because I've got three EMBEDS. So how can I change values in a flash movie using javascript? Help! :)

[RonPK]

Maybe it's easier to use the innerHTML property? Create some empty DIVs and have JavaScript modify the contents via innerHTML.

document.getElementById(divID).innerHTML = '<object ...><embed ...><\/embed><\/object>'; 

[Bernard Marx]

But if I give the ID to the OBJECT, I still don't know how to then affect the EMBED.

I'd be interested to know how this turns out. The RonPK's technique will probably do it. After all, doc.write() is used quite a lot for Flash.

You can grab the embed if you want though, even without an id...

I also can't do a getElementByTagName because I've got three EMBEDS

As long as they aren't all in the same object (even then if you know the order):

document.getElementById('_object_element_id_').getElementsByTagName('embed')[0]

Alternatively, I reckon that if you are using an <embed> element, then, I reckon, there's no reason why you can't give it an id, and that get.. methods, being non-specific, can reference it directly.

[whoisgregg]

Sorry for the delay in responding, here's the results of the two suggestions:

RonPK, if the code I used is correct, it does not work. Sorry for the length, but I think snipping code may snip the problem, I bolded where I plug in the filename variable:

function swapImage(filename) { 
 var b = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="380" height="340" align="middle"><param name="quality" value="high" /><param name="wmode" value="transparent" />[b]<embed src="' + filename + '.swf"[/b] quality="high" wmode="transparent" bgcolor="#ffffff" width="380" height="340" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'; 
 window.framealternate.document.getElementById('imageDIV').innerHTML = b; 
}

Bernard Marx, the three EMBEDS aren't in the same OBJECT. Trying to grab them ById or ByTagName just isn't working. This code fails:

window.framealternate.document.getElementByTagName('embed')[1].src = (filename +'.swf');

and when I define the EMBED this way:

<embed src="default.swf" id="flashSwap" name="flashSwap" quality="high" _snipped_

calling it like this doesn't work:

var c=window.framealternate.document.getElementById('flashSwap'); 
c.src= (filename+'.swf'); 

I'm beginning to suspect more and more that it's these elements being inside an IFRAME that's preventing them from being modified. :(

[Bernard Marx]

window.framealternate.document.getElementByTagName('embed').src = (filename +'.swf');

I realise the typo may have been introduced in-between your page and your post, but the method is:

getElement[red]s[/red]ByTagName

That said, your other results don't bode well anyway.
I take it that you do get an object for, say:

alert(window.framealternate.document.getElementById('flashSwap')); 

What I mean is that possibly the issue isn't that changing the element's src property doesn't do anything, but that there's just a problem with referencing the element (esp. via a frame)

[1][edited by: Bernard_Marx at 5:41 pm (utc) on Aug. 30, 2004]

[RonPK]

As for 'my' part: I tried it here on my PC and it works in IE6 when I add

<param name="movie" value="' + filename + '.swf" />

to the object tag.

[whoisgregg]

I'm going to start splitting responses, btw.

Bernard Marx, I had the ByTagName wrong and was missing the 's'. It's fixed now, but it didn't make it work. :(

I always forget about using alerts to debug, here's something truly interesting... this code:

function swapFlash(filename) { 
alert(window.alternateframe.document.getElementById('flashSwap').src);
window.alternateframe.document.getElementById('flashSwap').src = (filename + '.swf'); }

First pops-up the default filename that's in the embed tag (yay!) then doesn't do anything else. :(
So it can definitely find the embed tag in the inline frame by the ID, it just won't change the src!

[whoisgregg]

RonPK, I have the .innerHTML working now with the movie param added. Interestingly, it only works when I don't use a variable to store the "window.framealternate.document.getElementById('imageDIV').innerHTML"

It HAS to read:

window.framealternate.document.getElementById('imageDIV').innerHTML = '<object classid ...snipped...';

for it to work at all. But it sure does work now! Thanks very much RonPK!

I still want to understand why changing just the src doesn't work but at least now I have it functioning. :D

[whoisgregg]

Bernard Marx, I have switched to only working in the actual page to debug this, eliminating the iframe altogether until we can solve it. I have two onclicks that swap the embed src and the movie param value from one value to another and uses alerts to tell the current value:

function swapper(filename) { 
alert(document.getElementsByTagName('embed')[0].src);
alert(document.getElementById('movieParamValue').value);
document.getElementsByTagName('embed')[0].src = filename +'.swf';
document.getElementById('movieParamValue').value = filename +'.swf'; }

Guess what? When I click the first link the first time it pops up my default values: "src.swf" and "param.swf". When I click it a second time, the pop ups give the changed value "filename.swf" and "filename.swf" but the Flash movie doesn't update to the new value. My other link will also work, changing the values to "filename2.swf" and filename2.swf" but still, the flash movie doesn't change.

It seems as though the whole block has to be rewritten for the flash plugin to realize something has changed. Javascript is doing it's job -- Flash isn't. Not sure if this is a bug or what.

[Bernard Marx]

If it's working, I'd go for the re-writing option, of course.
Good stuff.

It works because when re-writing the content, a new object is being created.

There one more option for the 'direct' technique, but I'm clutching at straws now.
Instead of

.src

, try

.setAttribute("src","_new_value_")

[whoisgregg]

Bernard Marx, no luck with .setAttribute. I am going the .innerHTML route with this one.

Thanks for your help, to both of you! :)

[StupidScript]

(Sorry, Bernard ... I can't help myself ... :)

Flash has a direct connection to Javascript, either from the movie to the HTML page or the reverse. In my search for the proper syntax, I discovered a fine example which should suit your needs exactly.

It's at: [echoecho.com...]

The illustration is between Flash and Javascript, and describes simply changing the background color of either the Flash movie triggered by the JS or of a DIV, triggered by the Flash.

The author also notes how to jump to a specific frame in your movie, which, if memory serves, could easily be a frame with a "loadMovie()" command. You could set up several such frames in each movie with little problem, and then trigger which movie loads by sending the current movie to the appropriate frame, and loading the new movie into the existing Flash instance.

Here's the simple illustration, for MSIE and others:
=====SNIP=====
<script language="vbscript">
<!-- For MSIE/Windows
Sub flashfile_FSCommand(ByVal command, ByVal args)
call flashfile_DoFSCommand(command, args)
end sub
// done hiding -->
</script>
<script language="javascript">
<!-- For Other browsers
function flashfile_DoFSCommand(command, args)
{
if ( command == "color" ) {document.bgColor=args}
}
// done hiding -->
</script>
=====SNIP=====

Fortunately, it's not MY code! :) Best of luck.

(See:
[livedocs.macromedia.com...]
for the Flash ActionScript/Javascript Dictionary)

[whoisgregg]

Thanks StupidScript. This particular project however requires changing of the actual movie file, not frames within one movie. If I had my way, the whole darn thing would've been flash! :)

[StupidScript]

Hi whoisgregg.

If your goal is to have someone click an HTML hyperlink, and have the Flash movie be replaced by a different movie, then you can specify a jump to a particular frame in the existing movie, and that frame (loadMovie()) causes the original movie to be replaced by another movie.

It's two different movies, but the same instance of Flash keeps running and handles the movie switch, instead of loading a new iframe src or whatever which reinitiallizes Flash, causing an increased delay in the loading of the next movie.

Do you need to change the width/height of the movies, too? If not, then telling the existing movie to jump to a frame that calls to the next movie would work for you.

Just modify your movies to include a few extra frames at the end. Set it so the movie pauses or stops before it hits those frames. In each of the extra frames, add a Flash script that loads one of the other movies you want to show. Do this in each of the movies, including frames for each of the other movies.

Then, using the code I linked to, when someone clicks a hyperlink on the page, it instructs the existing movie to "jump to frame 112" (or whatever) which contains the "loadMovie('movie3')" (or whatever) instruction in it. Flash then dumps the current movie and loads the requested movie. Baddabing. You have changed the actual movie file, not just a frame within a movie. Can you dig it? :)

[whoisgregg]

I dig it, now. I had missed the part where you said "could easily be a frame with a "loadMovie()" command" and was still thinking that each frame would actually hold the file. Thanks for that solution!