AS3 External Interface

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Hello again everyone its been a while since I had an issue I couldn't figure out so I back. The issue I'm currently having seems like it should be the simple. However IE wants to be a poo nugget. Before the bashing of my use of IE know that I am required to have this working in IE, and I love Firefox. So to give you a bit of background on what I'm doing. I am making a AS3 video player which has some awesome features and it is nearing completion one feature is different quality videos and when the user selects the quality it will re size the stage to fit the video, this is where the External Interface comes into play. I have done this before in AS2 with no issues at all. I'm using the same code from AS2 to AS3 to complete the task and it works in everything except I frickin E. (IE oh how I hate you).

So here is the code I am using
ACTIONSCRIPT Code: [ Select ]
// Setup the function to be made and called in a string format
function_text =
   " function() { "+
      "document.getElementById('launcher_object').style.position = 'relative'; "+
      "document.getElementById('launcher_embed').style.position = 'relative'; "+
      "document.getElementById('launcher_object').width = '"+ video_width +"'; "+
      "document.getElementById('launcher_object').height = '"+ (video_height + controls_height) +"'; "+
      "document.getElementById('launcher_embed').width = '"+ video_width +"'; "+
      "document.getElementById('launcher_embed').height = '"+ (video_height + controls_height) +"'; "+
   "}";
 
// Make the call
ExternalInterface.call(function_text);
 
  1. // Setup the function to be made and called in a string format
  2. function_text =
  3.    " function() { "+
  4.       "document.getElementById('launcher_object').style.position = 'relative'; "+
  5.       "document.getElementById('launcher_embed').style.position = 'relative'; "+
  6.       "document.getElementById('launcher_object').width = '"+ video_width +"'; "+
  7.       "document.getElementById('launcher_object').height = '"+ (video_height + controls_height) +"'; "+
  8.       "document.getElementById('launcher_embed').width = '"+ video_width +"'; "+
  9.       "document.getElementById('launcher_embed').height = '"+ (video_height + controls_height) +"'; "+
  10.    "}";
  11.  
  12. // Make the call
  13. ExternalInterface.call(function_text);
  14.  


So I'm using the HTML pages Javascript to do the work for me. No I cannot make a function to have flash call the Javascript function needs to be made on the fly.
If you need to know more info please let me know I am still going to be working with this an will post a solution if I do come across one. If you have another option or way to do the same stage resizing functionality please let me know as well.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK so I figured it out and here is what the issue was. The script I use to build the flash object for the HTML page is the same across IE and Firefox however the way IE decides to render it OR deal with it if the issue. Either the embed object is removed from both browsers and Firefox ignores the missing embed and continues to run the Javascript or IE removes it and errors out because of the missing embed.

So when the Javascript called document.getElementById('loader_embed'). Javascript stop because it did not exists in (for sure) IE so my solution was this

ACTIONSCRIPT Code: [ Select ]
// Setup the function to be made and called in a string format
function_text =
"function() { "+
   "var myWidth = 0, myHeight = 0; "+
   
   //Non-IE
   "if(typeof(window.innerWidth) == 'number') { "+
      "myWidth = window.innerWidth; "+
      "myHeight = window.innerHeight; "+
   
   //IE 6+ in 'standards compliant mode'
   "} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { "+
      "myWidth = document.documentElement.clientWidth; "+
      "myHeight = document.documentElement.clientHeight; "+
   
   //IE 4 compatible
   "} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { "+
      "myWidth = document.body.clientWidth; "+
      "myHeight = document.body.clientHeight; "+
   "} "+
         
   "var object_element = document.getElementById('launcher_object'); "+
   "var embed_element = document.getElementById('launcher_embed'); "+
   
   "if(object_element) { "+
      "object_element.style.position = 'absolute'; "+
      "object_element.style.height = myHeight + 'px'; "+
      "object_element.style.width = myWidth + 'px'; "+
      "object_element.style.left = '0px'; "+
      "object_element.style.top = '0px'; "+
      "object_element.style.zIndex = '10000'; "+
   "} "+
   
   "if(embed_element) { "+
      "embed_element.style.position = 'absolute'; "+
      "embed_element.style.height = myHeight + 'px'; "+
      "embed_element.style.width = myWidth + 'px'; "+
      "embed_element.style.left = '0px'; "+
      "embed_element.style.top = '0px'; "+
      "embed_element.style.zIndex = '10000';"+
   "} "+
 
"}";
 
  1. // Setup the function to be made and called in a string format
  2. function_text =
  3. "function() { "+
  4.    "var myWidth = 0, myHeight = 0; "+
  5.    
  6.    //Non-IE
  7.    "if(typeof(window.innerWidth) == 'number') { "+
  8.       "myWidth = window.innerWidth; "+
  9.       "myHeight = window.innerHeight; "+
  10.    
  11.    //IE 6+ in 'standards compliant mode'
  12.    "} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { "+
  13.       "myWidth = document.documentElement.clientWidth; "+
  14.       "myHeight = document.documentElement.clientHeight; "+
  15.    
  16.    //IE 4 compatible
  17.    "} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { "+
  18.       "myWidth = document.body.clientWidth; "+
  19.       "myHeight = document.body.clientHeight; "+
  20.    "} "+
  21.          
  22.    "var object_element = document.getElementById('launcher_object'); "+
  23.    "var embed_element = document.getElementById('launcher_embed'); "+
  24.    
  25.    "if(object_element) { "+
  26.       "object_element.style.position = 'absolute'; "+
  27.       "object_element.style.height = myHeight + 'px'; "+
  28.       "object_element.style.width = myWidth + 'px'; "+
  29.       "object_element.style.left = '0px'; "+
  30.       "object_element.style.top = '0px'; "+
  31.       "object_element.style.zIndex = '10000'; "+
  32.    "} "+
  33.    
  34.    "if(embed_element) { "+
  35.       "embed_element.style.position = 'absolute'; "+
  36.       "embed_element.style.height = myHeight + 'px'; "+
  37.       "embed_element.style.width = myWidth + 'px'; "+
  38.       "embed_element.style.left = '0px'; "+
  39.       "embed_element.style.top = '0px'; "+
  40.       "embed_element.style.zIndex = '10000';"+
  41.    "} "+
  42.  
  43. "}";
  44.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK so i just confirmed the it is IE removing the Embed tag when it renders.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK so I ran into another issue using the same method which I'm not sure at the moment how to deal with but for some reason in Safari. It seems like it restarts the flash when it set the CSS to position absolute top and left to 0 and width and height to the screens width and height. If i click on the button twice the movie loads and works fine but if i only click it once it gives an error something like safari 5 canceled opening page.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

is there a developer console or error log you can check in the browser to see if you can find the element that is causing the issue.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Yes but it doesn't throw an error or a warning.

I made some screen shots to show whats going on I can't grant access to the actual player since it is on an intranet.

As soon as you load the page you get this.
http://www.indefinitedesigns.com/saf-start.jpg

When you click on the HD button with the player loaded, playing or even a fresh start in safari you get this
http://www.indefinitedesigns.com/saf-c1.jpg
Notice the players controls haven't changed however the player fills the viewable space in the page. The filling of the viewable space is what it is supposed to do. At this point the video is suppose to be playing but all that is there is the video thumbnail. If you click the play button it goes back to the start state (http://www.indefinitedesigns.com/saf-start.jpg).

If you click the HD button a second time in this state (http://www.indefinitedesigns.com/saf-c1.jpg) it works perfectly like it should
http://www.indefinitedesigns.com/saf-c2.jpg
The players HD button changes to the SD button and it starts to play.

// The code I'm using to fill the viewable space
ACTIONSCRIPT Code: [ Select ]
function set_stage_size():void {
   
   // Setup the function call
   var function_text:String;
   
   // See if it is the hq version
   if(quality_selected == 'hq') {
     
      // Setup the function to be made and called in a string format
      function_text =
      "function() { "+
         "var myWidth = 0, myHeight = 0; "+
         
         // Non-IE
         "if(typeof(window.innerWidth) == 'number') { "+
            "myWidth = window.innerWidth; "+
            "myHeight = window.innerHeight; "+
         
         // IE 6+ in 'standards compliant mode'
         "} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { "+
            "myWidth = document.documentElement.clientWidth; "+
            "myHeight = document.documentElement.clientHeight; "+
         
         // IE 4 compatible
         "} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { "+
            "myWidth = document.body.clientWidth; "+
            "myHeight = document.body.clientHeight; "+
         "} "+
         
         "var object_element = document.getElementById('launcher_object'); "+
         "var embed_element = document.getElementById('launcher_embed'); "+
 
         "if(object_element) { "+
            "object_element.style.position = 'absolute'; "+
            "object_element.style.height = myHeight + 'px'; "+
            "object_element.style.width = myWidth + 'px'; "+
            "object_element.style.left = '0px'; "+
            "object_element.style.top = '0px'; "+
            "object_element.style.zIndex = '10000'; "+
         "} "+
         
         "if(embed_element) { "+
            "embed_element.style.position = 'absolute'; "+
            "embed_element.style.height = myHeight + 'px'; "+
            "embed_element.style.width = myWidth + 'px'; "+
            "embed_element.style.left = '0px'; "+
            "embed_element.style.top = '0px'; "+
            "embed_element.style.zIndex = '10000';"+
         "} "+
         
      "}";
     
   } else {
     
      // Setup the function to be made and called in a string format
      function_text =
      " function(){ "+
   
         "var object_element = document.getElementById('launcher_object'); "+
         "var embed_element = document.getElementById('launcher_embed'); "+
         
         "if(object_element) { "+
            "object_element.style.position = 'relative'; "+
            "object_element.style.width = '"+ object_info.width +"px'; "+
            "object_element.style.height = '"+ (object_info.height + skin_mc.box.center_bar.height) +"px'; "+
         "} "+
         
         "if(embed_element) { "+
            "embed_element.style.position = 'relative'; "+
            "embed_element.style.width = '"+ object_info.width +"px'; "+
            "embed_element.style.height = '"+ (object_info.height + skin_mc.box.center_bar.height) +"px'; "+
         "} "+
         
      "}";
     
   }
   
   // Make the call
   ExternalInterface.call(function_text);
   
}
 
  1. function set_stage_size():void {
  2.    
  3.    // Setup the function call
  4.    var function_text:String;
  5.    
  6.    // See if it is the hq version
  7.    if(quality_selected == 'hq') {
  8.      
  9.       // Setup the function to be made and called in a string format
  10.       function_text =
  11.       "function() { "+
  12.          "var myWidth = 0, myHeight = 0; "+
  13.          
  14.          // Non-IE
  15.          "if(typeof(window.innerWidth) == 'number') { "+
  16.             "myWidth = window.innerWidth; "+
  17.             "myHeight = window.innerHeight; "+
  18.          
  19.          // IE 6+ in 'standards compliant mode'
  20.          "} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { "+
  21.             "myWidth = document.documentElement.clientWidth; "+
  22.             "myHeight = document.documentElement.clientHeight; "+
  23.          
  24.          // IE 4 compatible
  25.          "} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { "+
  26.             "myWidth = document.body.clientWidth; "+
  27.             "myHeight = document.body.clientHeight; "+
  28.          "} "+
  29.          
  30.          "var object_element = document.getElementById('launcher_object'); "+
  31.          "var embed_element = document.getElementById('launcher_embed'); "+
  32.  
  33.          "if(object_element) { "+
  34.             "object_element.style.position = 'absolute'; "+
  35.             "object_element.style.height = myHeight + 'px'; "+
  36.             "object_element.style.width = myWidth + 'px'; "+
  37.             "object_element.style.left = '0px'; "+
  38.             "object_element.style.top = '0px'; "+
  39.             "object_element.style.zIndex = '10000'; "+
  40.          "} "+
  41.          
  42.          "if(embed_element) { "+
  43.             "embed_element.style.position = 'absolute'; "+
  44.             "embed_element.style.height = myHeight + 'px'; "+
  45.             "embed_element.style.width = myWidth + 'px'; "+
  46.             "embed_element.style.left = '0px'; "+
  47.             "embed_element.style.top = '0px'; "+
  48.             "embed_element.style.zIndex = '10000';"+
  49.          "} "+
  50.          
  51.       "}";
  52.      
  53.    } else {
  54.      
  55.       // Setup the function to be made and called in a string format
  56.       function_text =
  57.       " function(){ "+
  58.    
  59.          "var object_element = document.getElementById('launcher_object'); "+
  60.          "var embed_element = document.getElementById('launcher_embed'); "+
  61.          
  62.          "if(object_element) { "+
  63.             "object_element.style.position = 'relative'; "+
  64.             "object_element.style.width = '"+ object_info.width +"px'; "+
  65.             "object_element.style.height = '"+ (object_info.height + skin_mc.box.center_bar.height) +"px'; "+
  66.          "} "+
  67.          
  68.          "if(embed_element) { "+
  69.             "embed_element.style.position = 'relative'; "+
  70.             "embed_element.style.width = '"+ object_info.width +"px'; "+
  71.             "embed_element.style.height = '"+ (object_info.height + skin_mc.box.center_bar.height) +"px'; "+
  72.          "} "+
  73.          
  74.       "}";
  75.      
  76.    }
  77.    
  78.    // Make the call
  79.    ExternalInterface.call(function_text);
  80.    
  81. }
  82.  

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 13 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.