Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

Flash content div/Javascript problem

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthornebutch
    • CommentTimeDec 15th 2007 edited
     
    Hello,
    Problem: I'm trying to fire an 'onmouseout' and 'onmouseover' event from the div that is holding the flash content. The problem is that those events are not firing. I'm just trying to get a couple of alerts to fire for now, and that doesn't even work (even when I put them inline within the div tag).

    Here's the 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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExternalInterface</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <style type="text/css">

    body {
    background-color: #999999;
    font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    }

    #flashcontent {
    width: 800px;
    height: 600px;
    }

    </style>
    </head>
    <body>

    <div id="flashcontent" onmouseout="mouseOut()" onmouseover="mouseOver()">
    Alternate text here.
    </div>

    <script type="text/javascript">
    // <![CDATA[

    var so = new SWFObject("carousel3.swf", "Carousel", "800", "600", "9", "#000000");
    so.useExpressInstall('expressinstall.swf');
    so.write("flashcontent");

    // ]]>
    </script>

    <script type="text/javascript">
    function mouseOut() {
    //document.getElementByID("Carousel").controlMovement(false);
    alert("Mouse out");
    }
    function mouseOver() {
    //document.getElementByID("Carousel").controlMovement(true);
    }
    </script>

    </body>
    </html>

    It does work with divs that are just holding images/text, it seems to only be a problem with a div holding flash content using swfobject.

    Thanks.

    PS - I've tested this on FF2 and IE7 (both PC) with similar results..
    • CommentAuthorphilip
    • CommentTimeDec 15th 2007
     
    i'm not sure it's a good idea to use an onmouseover/onmouseout script in conjunction with a SWF (couldn't you code the functionality into the SWF?), but here's a working example for you.

    note: your script is set inline, whereas mine is set in the head, in an onload function. by placing it in the onload function, it will be applied to the flashcontent div after the flash is loaded (after SWFObject has performed its magic). if flash is not found, the script will still work with the alternate content (assuming javascript is not disabled).

    working example


    function addSwf(){
    var so = new SWFObject('sample.swf', 'sampleSwf', '550', '400', '7', '#000000');
    so.write("flashcontent");
    }

    function setMouseMovements(){

    var div = document.getElementById("flashcontent");

    div.onmouseover = function (){
    mouseOver(this);
    };

    div.onmouseout = function (){
    mouseOut(this);
    };

    }

    function mouseOut(div) {
    alert("OUTta here...");
    //Clear function to eliminate endless loop!
    div.onmouseout = function (){};
    }

    function mouseOver(div) {
    alert("get OVER it");
    //Clear function to eliminate endless loop!
    div.onmouseover = function (){};
    }

    window.onload = function(){
    addSwf();
    setMouseMovements();
    }


    - philip
    • CommentAuthornebutch
    • CommentTimeDec 15th 2007 edited
     
    Thanks for the reply philip,
    Are you sure the example posted is supposed to be working? It seems that the div will only fire the onmouseover if I roll over the area next to the movieclip, rather than on top..

    The reason I'm doing this is because I'd like to use the ExternalInterface to send a command to the flash movie to stop some movement when the cursor leaves the stage. The problem with coding that in the swf is that if the user moves the mouse too quickly, the swf will read the mouse location as where it was before the user moved it. (yeah, I've used a setInterval with updateAfterEvent to detect whether the mouse is local, but that doesn't work).

    Another option I've thought of is to place the div holding the flashcontent within a table, and firing the listeners from that. It works to a point, but then the ExternalInterface part of it breaks. This is what I have:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExternalInterface</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <style type="text/css">

    body {
    background-color: #999999;
    font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    }

    #flashcontent {
    width: 800px;
    height: 600px;
    }

    </style>
    </head>
    <body>

    <table width="800" height="600" onmouseout="mouseOut()" onmouseover="mouseOver()">
    <td>
    <div id="flashcontent">
    Alternate text here.
    </div>
    </td>
    </table>

    <script type="text/javascript">
    // <![CDATA[

    var so = new SWFObject("carousel3.swf", "Carousel", "800", "600", "9", "#000000");
    so.useExpressInstall('expressinstall.swf');
    so.write("flashcontent");

    // ]]>
    </script>

    <script type="text/javascript">
    function mouseOut() {
    document.getElementByID("Carousel").controlMovement(false);
    }
    function mouseOver() {
    document.getElementByID("Carousel").controlMovement(true);
    }
    </script>

    </body>
    </html>

    _____

    Now, as I said, the mouseout and mouseover parts work - I can get an alert to fire. But as I said, with the div in a table, I can't get the ExternalInterface to communicate to the swf.

    Just to make things complete, this is the AS I'm using (just the EI part of it, anyway):

    ExternalInterface.addCallback("controlMovement", this, onControlMovement);

    var isOver:Boolean = true;

    function onControlMovement(arg) {
    isOver = arg;
    }


    I know this is almost a deprecated way of doing this, with the new AS3 event "MOUSE_LEAVE", but I'm helping someone out who doesn't have the option of moving to AS3 yet.

    BTW - I've never used this forum - How do you get the code format when posting code?

    Thanks again!
    • CommentAuthorphilip
    • CommentTimeDec 15th 2007
     
    ahh, i see what you mean.

    i'm out of time tonight, but i'll see if i can take another look tomorrow.

    for posting code, just wrap your code in <code></code> tags.

    be sure to select "format comments as HTML" (radio button at bottom of comments section)

    - philip
    • CommentAuthorphilip
    • CommentTimeDec 16th 2007
     
    after looking at your issue a bit more, i'm not convinced that using JS and externalinterface is the best way to achieve your goal. whether you're using AS2 or AS3, i think you should be able to handle the mouseover functionality in the SWF without needing to get the browser and DOM involved. what if someone is viewing the SWF with javascript disabled?

    since this isn't a flash coding forum, i suggest going to flash-specific forums to get more detailed suggestions about how to handle the SWF's mouseover functionality. some good places to start would be actionscript.org or kirupa.com. sorry, don't mean to cop out on you. :)

    also, i suggest getting rid of the table and using DIVs with CSS to handle your layout. getting rid of the table simplifies the markup, and best practices dictate that tables should only be used for tabular data, such as spreadsheets. since you're using an XHTML strict doctype, you probably understand my point already. :)

    good luck!
    - philip
    • CommentAuthornebutch
    • CommentTimeDec 16th 2007 edited
     
    LOL. Well, thanks for the advice. Although, you failed to mention gotoandlearn forums ;) (I'm one of the admins)

    It's pretty much unanimous across the board that trying to capture the cursor leaving the stave via AS2 is difficult at best, most commonly it's downright unpredictable. As I mentioned, it's a problem with Flash that has been addressed with AS3.

    TBH, this was brought up over on the forums recently, so I thought I'd give it a shot. It's not a life or death situation, and I've already suggested to the original poster that if it's an absolute requirement, to move up to AS3 and take care of it in Flash.

    And I agree with the table sentiment. I personally hate using tables unless absolutely required. I was just playing around with different workarounds in this case.

    Thanks for taking the time to look at this.
    Happy Holidays!
    nebutch
    • CommentAuthorphilip
    • CommentTimeDec 16th 2007
     
    re: monitoring the mouse movements, i think doing it in JS and sending the result to the SWF via externalinterface can be as unpredictable -- and more complicated -- than doing it purely in AS2. but AS3 is a whole 'nother can of worms, so i can understand the hesitance to switch.

    ahh, gotoandlearn! yes, that's a pretty good site. i'm an elearning developer in my day job, and have been impressed with some of the tutorials there.

    happy holidays :)
    - philip

1 to 7 of 7

  1.