2 Replies Latest reply on Jul 15, 2009 9:13 AM by RandyJ99

    Javascript rendered flash problem

    RandyJ99

      Hi,

       

          I'm doing something kind of funky to facilitate some functionality.  I've got a client that has some camtasia style demos he wants to play of his product.  Problem is he wants the demos to play on top of the website and then have the ability to click a button to turn off the demo.  Now I've done that and it works great locally but when deployed to the server the flash based demo doesn't play until the entire object is downloaded.  In reality that's probably how it's working locally as well.  

          You can see the results by going to http://www.wbsus.com/beta/  click on the "view video demo" on the left side there in the circle.  A small submenu will popup click on one of the first two and you'll see what I mean.  If you wait long enough for the entire demo to download it'll start.  There IS a preloader in this swf but it's not firing because the flash object doesn't play until the entire swf is downloaded.  Locally the preloader fires up just fine.

      Below is a snippet of the code used to add a demo to that page dynamically via javascript.

       

       

       

       

      document.getElementById(

      "DemoMenu").style.visibility = "hidden";

      var

       

      newdiv = document.createElement('div');

      newdiv.setAttribute(

      'id', 'ReceivingDemoII');

      newdiv.style.zIndex = 820;

      newdiv.display =

      "block";

      newdiv.style.position=

      "absolute";

      newdiv.style.top=

      "0px";

      newdiv.style.left=

      "30px";

      newdiv.style.visibility=

      "hidden";

      newdiv.style.backgroundColor=

      "#FFFFFF";

       

       

       

      document.body.appendChild(newdiv);

      html=

      "<input type='button' value='Close' onclick='closeReceivingDemoII()' />";

      html+=

      "       May take up to 90 seconds to load demonstration.<br/>";

      html+=

      " <OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' WIDTH='1024' HEIGHT='790'>";

      html+=

      "<PARAM NAME=movie VALUE='" + returnPlace + "Demos/wbsreceiving.swf'>";

      html+=

      "<PARAM NAME=quality VALUE='high'>";

      html+=

      "<EMBED src='" + returnPlace + "Demos/wbsreceiving.swf' quality='high' WIDTH='1024' HEIGHT='790' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'>"

      html+=

      "</OBJECT>";

      html+="<br /><br />";

      html+=

      "<input type='button' value='Close' onclick='closeReceivingDemoII()' />";

      newdiv.innerHTML = html;

      document.getElementById(

      'ReceivingDemoII').innerHTML = html;

      document.getElementById(

      'ReceivingDemoII').style.visibility="visible";

       

      So I dynamically create the div.  Append it to the DOM.  Add the inner html that defines the object.  "returnPlace" is a field that may or may not depending on where the site is hosted,(localhost, production,beta), return a prefix like in this case http://www.wbsus.com or http://www.wbsus.com/beta.   This was done to assure that the object path was complete.  

       

      So after all that.  The demo plays, it just sits and waits for the entire demo to download and then the object starts to play.   It's like active-x is keeping it from playing until the entire object is downloaded because there is a working preloader in this flash object.   Behavior is the same in Firefox and I.E..  Thanks for any and all help!

       

      Randy

       

       

       

       

        • 1. Re: Javascript rendered flash problem
          kglad Adobe Community Professional & MVP

          download the demo in the background using your main swf.  once it's in the user's cache, enable your view demo button.

          1 person found this helpful
          • 2. Re: Javascript rendered flash problem
            RandyJ99 Level 1

            Kind of right but the solution was a bit odd but it works and that's l I care.   The solution was to put a javascript delay in making the div visible.  If the div is rendered immediately like the code in my original post does, the object for some reason is not allowed to activate (play) until it is completely downloaded.  If however the div is rendered as hidden, and then a delay happens and then the div is made visible.  The browser has enough time to render the div and then recognize that there's an active-x component there, and take the appropriate action when the div is activated (made visible)  so I added

             

            currentDivToPlay = "(whatever was just built)"

            setTimeout(

            'turnOnGeneralDemo()', 700);

             

            and the function

             

             

            function

             

            turnOnGeneralDemo(){

                  document.getElementById(currentDivToPlay).style.visibility=

            "visible";

            }

             

            With the delay for the browser all works well.