Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to let a Flash movie embedded in HTML start on MouseOver?

    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">
    </object>
    </div>

    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?
    Last edited by kippie; 08-12-2004 at 03:03 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    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.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>show-hide swf</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background:#f2f8ff;
     }
    div#layer {
         width:450px;
         height:300px;
         margin:auto;
     }
    div#button {
          width:100px;
          margin:auto;
     }
    button {
          background:#f2f8ff;
          font-family:arial;
          font-size:16px;
          color:#aaaaaa;
     }
        
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    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"/>'+
    '</object>';
     }
    else {
    document.getElementById("layer").innerHTML='';
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="button"><button onclick="showHide()">show - hide</button></div>
    
    <div id="layer"></div>
    
    </body>
    </html>
    
    
    coothead
    Last edited by coothead; 09-17-2004 at 11:10 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •