View Full Version : How to let a Flash movie embedded in HTML start on MouseOver?

08-12-2004, 01:56 PM
I've made a simple FlashMovie and embedded it in HTML within a layer:

<div id="layer">
<object width="100%" height="48">
<param name="movie" value="cyclersdef3.swf">
<embed src="sunmovie.swf" width="200" height="148">

The layer is hidden, only on a certain command (MouseOver) the layer is made visible. I would like to make it so that at that time (onMouseOver in the HTML) the clip starts playing and when the layer is hidden again the clip stops playing. So I would like to start and stop the clip using a HTML command. Could anyone tell me how this can be done?

08-12-2004, 06:40 PM
You would have to integrate Javascript to work with your Actionscript -- I would post in the Javascript forum to get that going, they would know more than us here:)

As a flash option -- you could essentially make your movie a BIG button, and have it play or not play depending on your mouse rollover. You could do this as a movie clip. You'd need to make your whole movie a 'movie clip' and then give it mouse options via actionscript, but it can be done if you'd prefer that way?

08-12-2004, 06:44 PM
One idea might be to use an iframe for your hidden layer containing the movie. Then use location.href to load the file with the embedded movie on mouseover.

If I'm thinking this through correctly, the flash movie would not begin until mouseover calls the hidden layer and simultaneously loads the iframe.

08-23-2004, 09:01 PM
Hi there kippie,

I don't know if you found a satisfactory solution to your problem.
If not you may be interested in this, it uses 'onclick' rather than 'onmouseover'.
This gives the option of turning it off again :)
I have also used the 'Satay' method for validation purposes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<title>show-hide swf</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">

body {
div#layer {
div#button {
button {


<script type="text/javascript">

function showHide() {

if(document.getElementById("layer").innerHTML=='') {
document.getElementById("layer").innerHTML='<object type="application/x-shockwave-flash" '+
' data="smiles.swf" width="450" height="300">'+
'<param name="movie" value="http://coothead.homestead.com/files/smiles.swf" />'+
'<param name="wmode"value="transparent"/>'+
else {



<div id="button"><button onclick="showHide()">show - hide</button></div>

<div id="layer"></div>