AS3 External Interface and IE

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

Post 3+ Months Ago

This is completely frustrating ..... IE you need to take a long walk off a short pier.

OK so this is an issue and I'm going not where with at the current moment.

Here is the issue I have a flash up loader that I made it communicates back and forth between flash and java script to give the desired effect. There is a function i call to setup the uploader I can set it up then right after make as many calls as I want however if i try to call the same function down the line I get

SCRIPT16389: script block (283), line 49 character 5

which is
JAVASCRIPT Code: [ Select ]
function __flash__addCallback(instance, name) {
  instance[name] = function () {
    return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
  }
}
 
  1. function __flash__addCallback(instance, name) {
  2.   instance[name] = function () {
  3.     return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
  4.   }
  5. }
  6.  
  • 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've figured out the issue and it a completely stupid thing that messed with me all damn day yesterday. The issue is IE seems to have unassociated the flash callback function to the JavaScript functions by means of Jquery and more specifically the dialog box.

So here is what cased this

// Problem code
JAVASCRIPT Code: [ Select ]
 
/***********************************/
/*  Upload Functions               */
/***********************************/
 
// This function will setup the uploaders
function make_uploader(uploader_name, custom_flashvars, custom_params, custom_attributes, custom_options) {
   
   // Setup defaults
   custom_flashvars  = custom_flashvars || {};
   custom_params     = custom_params || {};
   custom_attributes = custom_attributes || {};
   custom_options    = custom_options || {height: "30", width: "100%", version: "11.0.0"};
 
   // Setup flash vars
   var flashvars = {
   };
   
   // Setup the flash paramiters
   var params = {
      allowscriptaccess: "always",
      allowfullscreen: true,
      wmode: "transparent",
      scale: "exactfit"
   };
   
   // Setuo the flash attributes
   var attributes = {
      style: 'position:absolute; z-index:500; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -khtml-opacity: 0.0;',
      name: uploader_name + '_uploader',
      id: uploader_name + '_uploader'
   };
   
   // Setup custom info if we have any
   $.extend(flashvars, custom_flashvars);
   $.extend(params, custom_params);
   $.extend(attributes, custom_attributes);
   
   // Embed the swf
   swfobject.embedSWF("<?php echo web_path; ?>flash/upload.swf?no_cache=<?php echo mt_rand(); ?>", uploader_name + '_uploader', custom_options.width, custom_options.height, custom_options.version, "expressInstall.swf", flashvars, params, attributes);
   
   $(function() {
   
      // The following is to make the fake upload look like it is working
      // it is only for looks
      $("#"+ uploader_name +"_fileinputs").mouseenter(function() {
         
         // Set the mouse over state
         $("#"+ uploader_name +"_fake_browse").addClass('ui-state-focus');
     
      }).mouseleave(function() {
         
         // Remove the mouse voer state
         $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-focus');
         
      }).mousedown(function() {
         
         // Set the mouse down state
         $("#"+ uploader_name +"_fake_browse").addClass('ui-state-active');
         
      }).mouseup(function() {
         
         // Remove the mouse down state
         $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-active');
     
      });
     
   });
   
}
 
// This will be the uploader element
var uploaders = new Object();
 
// Make the uploader
make_uploader('portrait');
 
// This function setup the uploader
function im_ready(id) {
 
   switch(id) {
     
      // Portrait
      case 'portrait_uploader':
 
         // Setup the uploaders
         uploaders.portrait = $('#portrait_uploader').get(0);
         uploaders.portrait.setup('<?php echo web_path; ?>upload.php', 'portrait', 'All:jpg; *.jpeg; *.png, Jpg:jpg; *.jpeg, Png:png', false, 5*1024*1024);
         
         // Kickout
         break;
         
   }
   
}
 
$(function() {
   
   // This is the upload dialog box
   $("#portrait_upload_form_container").dialog({
      title: "Portrait Upload",
      width: "500",
      autoOpen: false,
      show: "blind", ///////////////////////////////////////////// TAKE NOTE OF THIS LINE
      hide: "blind",
      closeOnEscape: false,
      modal:true,
      open: function(event, ui) {
         
         // Get the form we're working with
         var $this = $(this);
         
         // Set the progress bar to 0 percent
         $("#portrait_progressbar").progressbar({
            value: 0
         });
     
         // Change the label
         $("#portrait_progressbar_label").text('Upload Progress');
         
         // Reset the form
         $('#portrait_upload').get(0).reset();
         
         // Remove errors
         tips.text('');
         tips.removeClass("ui-state-highlight");
         tips.addClass("display-none");
         all_fields.removeClass("ui-state-error");
         
         
         // Check for the key press
         $this.keypress(function(e) {
                           
            // Check for the  enter key
            if( e.keyCode == 13 ) {
               
               // Click the submit buton
               $this.parent().find('.ui-dialog-buttonpane button:first').click();
               
               // Kick back a false to stop from sending twice
               return false;
           
            }
           
         });
         
      },
      buttons: {
         "Upload": function() {
           
            // Reset some info
            var valid = true;
            all_fields.removeClass("ui-state-error");
           
            // Validate the fields
            valid = valid && check_length(photo, 'Photo');
           
            // Check to see if we have something
            if(valid) {
               
               // Upload the video
               uploaders.portrait.upload($('#portrait_upload').serialize());
               
            }
                 
         },
         "Cancel": function() {
           
            // Close the upload box
            $(this).dialog("close");
                 
         }
         
      }
     
   });
 
});
 
 
  1.  
  2. /***********************************/
  3. /*  Upload Functions               */
  4. /***********************************/
  5.  
  6. // This function will setup the uploaders
  7. function make_uploader(uploader_name, custom_flashvars, custom_params, custom_attributes, custom_options) {
  8.    
  9.    // Setup defaults
  10.    custom_flashvars  = custom_flashvars || {};
  11.    custom_params     = custom_params || {};
  12.    custom_attributes = custom_attributes || {};
  13.    custom_options    = custom_options || {height: "30", width: "100%", version: "11.0.0"};
  14.  
  15.    // Setup flash vars
  16.    var flashvars = {
  17.    };
  18.    
  19.    // Setup the flash paramiters
  20.    var params = {
  21.       allowscriptaccess: "always",
  22.       allowfullscreen: true,
  23.       wmode: "transparent",
  24.       scale: "exactfit"
  25.    };
  26.    
  27.    // Setuo the flash attributes
  28.    var attributes = {
  29.       style: 'position:absolute; z-index:500; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -khtml-opacity: 0.0;',
  30.       name: uploader_name + '_uploader',
  31.       id: uploader_name + '_uploader'
  32.    };
  33.    
  34.    // Setup custom info if we have any
  35.    $.extend(flashvars, custom_flashvars);
  36.    $.extend(params, custom_params);
  37.    $.extend(attributes, custom_attributes);
  38.    
  39.    // Embed the swf
  40.    swfobject.embedSWF("<?php echo web_path; ?>flash/upload.swf?no_cache=<?php echo mt_rand(); ?>", uploader_name + '_uploader', custom_options.width, custom_options.height, custom_options.version, "expressInstall.swf", flashvars, params, attributes);
  41.    
  42.    $(function() {
  43.    
  44.       // The following is to make the fake upload look like it is working
  45.       // it is only for looks
  46.       $("#"+ uploader_name +"_fileinputs").mouseenter(function() {
  47.          
  48.          // Set the mouse over state
  49.          $("#"+ uploader_name +"_fake_browse").addClass('ui-state-focus');
  50.      
  51.       }).mouseleave(function() {
  52.          
  53.          // Remove the mouse voer state
  54.          $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-focus');
  55.          
  56.       }).mousedown(function() {
  57.          
  58.          // Set the mouse down state
  59.          $("#"+ uploader_name +"_fake_browse").addClass('ui-state-active');
  60.          
  61.       }).mouseup(function() {
  62.          
  63.          // Remove the mouse down state
  64.          $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-active');
  65.      
  66.       });
  67.      
  68.    });
  69.    
  70. }
  71.  
  72. // This will be the uploader element
  73. var uploaders = new Object();
  74.  
  75. // Make the uploader
  76. make_uploader('portrait');
  77.  
  78. // This function setup the uploader
  79. function im_ready(id) {
  80.  
  81.    switch(id) {
  82.      
  83.       // Portrait
  84.       case 'portrait_uploader':
  85.  
  86.          // Setup the uploaders
  87.          uploaders.portrait = $('#portrait_uploader').get(0);
  88.          uploaders.portrait.setup('<?php echo web_path; ?>upload.php', 'portrait', 'All:jpg; *.jpeg; *.png, Jpg:jpg; *.jpeg, Png:png', false, 5*1024*1024);
  89.          
  90.          // Kickout
  91.          break;
  92.          
  93.    }
  94.    
  95. }
  96.  
  97. $(function() {
  98.    
  99.    // This is the upload dialog box
  100.    $("#portrait_upload_form_container").dialog({
  101.       title: "Portrait Upload",
  102.       width: "500",
  103.       autoOpen: false,
  104.       show: "blind", ///////////////////////////////////////////// TAKE NOTE OF THIS LINE
  105.       hide: "blind",
  106.       closeOnEscape: false,
  107.       modal:true,
  108.       open: function(event, ui) {
  109.          
  110.          // Get the form we're working with
  111.          var $this = $(this);
  112.          
  113.          // Set the progress bar to 0 percent
  114.          $("#portrait_progressbar").progressbar({
  115.             value: 0
  116.          });
  117.      
  118.          // Change the label
  119.          $("#portrait_progressbar_label").text('Upload Progress');
  120.          
  121.          // Reset the form
  122.          $('#portrait_upload').get(0).reset();
  123.          
  124.          // Remove errors
  125.          tips.text('');
  126.          tips.removeClass("ui-state-highlight");
  127.          tips.addClass("display-none");
  128.          all_fields.removeClass("ui-state-error");
  129.          
  130.          
  131.          // Check for the key press
  132.          $this.keypress(function(e) {
  133.                            
  134.             // Check for the  enter key
  135.             if( e.keyCode == 13 ) {
  136.                
  137.                // Click the submit buton
  138.                $this.parent().find('.ui-dialog-buttonpane button:first').click();
  139.                
  140.                // Kick back a false to stop from sending twice
  141.                return false;
  142.            
  143.             }
  144.            
  145.          });
  146.          
  147.       },
  148.       buttons: {
  149.          "Upload": function() {
  150.            
  151.             // Reset some info
  152.             var valid = true;
  153.             all_fields.removeClass("ui-state-error");
  154.            
  155.             // Validate the fields
  156.             valid = valid && check_length(photo, 'Photo');
  157.            
  158.             // Check to see if we have something
  159.             if(valid) {
  160.                
  161.                // Upload the video
  162.                uploaders.portrait.upload($('#portrait_upload').serialize());
  163.                
  164.             }
  165.                  
  166.          },
  167.          "Cancel": function() {
  168.            
  169.             // Close the upload box
  170.             $(this).dialog("close");
  171.                  
  172.          }
  173.          
  174.       }
  175.      
  176.    });
  177.  
  178. });
  179.  
  180.  


Note the show property in the code above that stupid LITTLE line is what caused all of my headaches yesterday. So basically when Jquery does the animation is moves or wraps the div in another until the animation is complete when it does this IE has a heart attack and forgets that there were functions attached to the flash object. So at this point flash can talk to javascript but javascript can't talk to flash. So as for my fix, Sure I could take that line out and the dialog box would just popup and everything will work fine, But that's not how I roll. I want that "blind" animation on open. So I know that the open command fires before the animation is complete so that wont help. So i need something to fire on complete. which i tried many methods and found one that worked so i moved the make_uploader('portrait'); to that method.

This would go into the open method
JAVASCRIPT Code: [ Select ]
// Wait for the complete
$(this).parent().promise().done(function () {
                               
   // Make the uploader
   make_uploader('portrait');
           
});  
 
  1. // Wait for the complete
  2. $(this).parent().promise().done(function () {
  3.                                
  4.    // Make the uploader
  5.    make_uploader('portrait');
  6.            
  7. });  
  8.  


// So to put it all together looks like this
JAVASCRIPT Code: [ Select ]
 
/***********************************/
/*  Upload Functions               */
/***********************************/
 
// This function will setup the uploaders
function make_uploader(uploader_name, custom_flashvars, custom_params, custom_attributes, custom_options) {
   
   // Setup defaults
   custom_flashvars  = custom_flashvars || {};
   custom_params     = custom_params || {};
   custom_attributes = custom_attributes || {};
   custom_options    = custom_options || {height: "30", width: "100%", version: "11.0.0"};
 
   // Setup flash vars
   var flashvars = {
   };
   
   // Setup the flash paramiters
   var params = {
      allowscriptaccess: "always",
      allowfullscreen: true,
      wmode: "transparent",
      scale: "exactfit"
   };
   
   // Setuo the flash attributes
   var attributes = {
      style: 'position:absolute; z-index:500; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -khtml-opacity: 0.0;',
      name: uploader_name + '_uploader',
      id: uploader_name + '_uploader'
   };
   
   // Setup custom info if we have any
   $.extend(flashvars, custom_flashvars);
   $.extend(params, custom_params);
   $.extend(attributes, custom_attributes);
   
   // Embed the swf
   swfobject.embedSWF("<?php echo web_path; ?>flash/upload.swf?no_cache=<?php echo mt_rand(); ?>", uploader_name + '_uploader', custom_options.width, custom_options.height, custom_options.version, "expressInstall.swf", flashvars, params, attributes);
   
   $(function() {
   
      // The following is to make the fake upload look like it is working
      // it is only for looks
      $("#"+ uploader_name +"_fileinputs").mouseenter(function() {
         
         // Set the mouse over state
         $("#"+ uploader_name +"_fake_browse").addClass('ui-state-focus');
     
      }).mouseleave(function() {
         
         // Remove the mouse voer state
         $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-focus');
         
      }).mousedown(function() {
         
         // Set the mouse down state
         $("#"+ uploader_name +"_fake_browse").addClass('ui-state-active');
         
      }).mouseup(function() {
         
         // Remove the mouse down state
         $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-active');
     
      });
     
   });
   
}
 
// This will be the uploader element
var uploaders = new Object();
 
// This function setup the uploader
function im_ready(id) {
 
   switch(id) {
     
      // Portrait
      case 'portrait_uploader':
 
         // Setup the uploaders
         uploaders.portrait = $('#portrait_uploader').get(0);
         uploaders.portrait.setup('<?php echo web_path; ?>upload.php', 'portrait', 'All:jpg; *.jpeg; *.png, Jpg:jpg; *.jpeg, Png:png', false, 5*1024*1024);
         
         // Kickout
         break;
         
   }
   
}
 
$(function() {
   
   // This is the upload dialog box
   $("#portrait_upload_form_container").dialog({
      title: "Portrait Upload",
      width: "500",
      autoOpen: false,
      show: "blind",
      hide: "blind",
      closeOnEscape: false,
      modal:true,
      open: function(event, ui) {
 
         // Wait for the complete
         $(this).parent().promise().done(function () {
                               
            // Make the uploader
            make_uploader('portrait');
           
         });
         
         // Get the form we're working with
         var $this = $(this);
         
         // Set the progress bar to 0 percent
         $("#portrait_progressbar").progressbar({
            value: 0
         });
     
         // Change the label
         $("#portrait_progressbar_label").text('Upload Progress');
         
         // Reset the form
         $('#portrait_upload').get(0).reset();
         
         // Remove errors
         tips.text('');
         tips.removeClass("ui-state-highlight");
         tips.addClass("display-none");
         all_fields.removeClass("ui-state-error");
         
         
         // Check for the key press
         $this.keypress(function(e) {
                           
            // Check for the  enter key
            if( e.keyCode == 13 ) {
               
               // Click the submit buton
               $this.parent().find('.ui-dialog-buttonpane button:first').click();
               
               // Kick back a false to stop from sending twice
               return false;
           
            }
           
         });
         
      },
      buttons: {
         "Upload": function() {
           
            // Reset some info
            var valid = true;
            all_fields.removeClass("ui-state-error");
           
            // Validate the fields
            valid = valid && check_length(photo, 'Photo');
           
            // Check to see if we have something
            if(valid) {
               
               // Upload the video
               uploaders.portrait.upload($('#portrait_upload').serialize());
               
            }
                 
         },
         "Cancel": function() {
           
            // Close the upload box
            $(this).dialog("close");
                 
         }
         
      }
     
   });
 
});
 
  1.  
  2. /***********************************/
  3. /*  Upload Functions               */
  4. /***********************************/
  5.  
  6. // This function will setup the uploaders
  7. function make_uploader(uploader_name, custom_flashvars, custom_params, custom_attributes, custom_options) {
  8.    
  9.    // Setup defaults
  10.    custom_flashvars  = custom_flashvars || {};
  11.    custom_params     = custom_params || {};
  12.    custom_attributes = custom_attributes || {};
  13.    custom_options    = custom_options || {height: "30", width: "100%", version: "11.0.0"};
  14.  
  15.    // Setup flash vars
  16.    var flashvars = {
  17.    };
  18.    
  19.    // Setup the flash paramiters
  20.    var params = {
  21.       allowscriptaccess: "always",
  22.       allowfullscreen: true,
  23.       wmode: "transparent",
  24.       scale: "exactfit"
  25.    };
  26.    
  27.    // Setuo the flash attributes
  28.    var attributes = {
  29.       style: 'position:absolute; z-index:500; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -khtml-opacity: 0.0;',
  30.       name: uploader_name + '_uploader',
  31.       id: uploader_name + '_uploader'
  32.    };
  33.    
  34.    // Setup custom info if we have any
  35.    $.extend(flashvars, custom_flashvars);
  36.    $.extend(params, custom_params);
  37.    $.extend(attributes, custom_attributes);
  38.    
  39.    // Embed the swf
  40.    swfobject.embedSWF("<?php echo web_path; ?>flash/upload.swf?no_cache=<?php echo mt_rand(); ?>", uploader_name + '_uploader', custom_options.width, custom_options.height, custom_options.version, "expressInstall.swf", flashvars, params, attributes);
  41.    
  42.    $(function() {
  43.    
  44.       // The following is to make the fake upload look like it is working
  45.       // it is only for looks
  46.       $("#"+ uploader_name +"_fileinputs").mouseenter(function() {
  47.          
  48.          // Set the mouse over state
  49.          $("#"+ uploader_name +"_fake_browse").addClass('ui-state-focus');
  50.      
  51.       }).mouseleave(function() {
  52.          
  53.          // Remove the mouse voer state
  54.          $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-focus');
  55.          
  56.       }).mousedown(function() {
  57.          
  58.          // Set the mouse down state
  59.          $("#"+ uploader_name +"_fake_browse").addClass('ui-state-active');
  60.          
  61.       }).mouseup(function() {
  62.          
  63.          // Remove the mouse down state
  64.          $("#"+ uploader_name +"_fake_browse").removeClass('ui-state-active');
  65.      
  66.       });
  67.      
  68.    });
  69.    
  70. }
  71.  
  72. // This will be the uploader element
  73. var uploaders = new Object();
  74.  
  75. // This function setup the uploader
  76. function im_ready(id) {
  77.  
  78.    switch(id) {
  79.      
  80.       // Portrait
  81.       case 'portrait_uploader':
  82.  
  83.          // Setup the uploaders
  84.          uploaders.portrait = $('#portrait_uploader').get(0);
  85.          uploaders.portrait.setup('<?php echo web_path; ?>upload.php', 'portrait', 'All:jpg; *.jpeg; *.png, Jpg:jpg; *.jpeg, Png:png', false, 5*1024*1024);
  86.          
  87.          // Kickout
  88.          break;
  89.          
  90.    }
  91.    
  92. }
  93.  
  94. $(function() {
  95.    
  96.    // This is the upload dialog box
  97.    $("#portrait_upload_form_container").dialog({
  98.       title: "Portrait Upload",
  99.       width: "500",
  100.       autoOpen: false,
  101.       show: "blind",
  102.       hide: "blind",
  103.       closeOnEscape: false,
  104.       modal:true,
  105.       open: function(event, ui) {
  106.  
  107.          // Wait for the complete
  108.          $(this).parent().promise().done(function () {
  109.                                
  110.             // Make the uploader
  111.             make_uploader('portrait');
  112.            
  113.          });
  114.          
  115.          // Get the form we're working with
  116.          var $this = $(this);
  117.          
  118.          // Set the progress bar to 0 percent
  119.          $("#portrait_progressbar").progressbar({
  120.             value: 0
  121.          });
  122.      
  123.          // Change the label
  124.          $("#portrait_progressbar_label").text('Upload Progress');
  125.          
  126.          // Reset the form
  127.          $('#portrait_upload').get(0).reset();
  128.          
  129.          // Remove errors
  130.          tips.text('');
  131.          tips.removeClass("ui-state-highlight");
  132.          tips.addClass("display-none");
  133.          all_fields.removeClass("ui-state-error");
  134.          
  135.          
  136.          // Check for the key press
  137.          $this.keypress(function(e) {
  138.                            
  139.             // Check for the  enter key
  140.             if( e.keyCode == 13 ) {
  141.                
  142.                // Click the submit buton
  143.                $this.parent().find('.ui-dialog-buttonpane button:first').click();
  144.                
  145.                // Kick back a false to stop from sending twice
  146.                return false;
  147.            
  148.             }
  149.            
  150.          });
  151.          
  152.       },
  153.       buttons: {
  154.          "Upload": function() {
  155.            
  156.             // Reset some info
  157.             var valid = true;
  158.             all_fields.removeClass("ui-state-error");
  159.            
  160.             // Validate the fields
  161.             valid = valid && check_length(photo, 'Photo');
  162.            
  163.             // Check to see if we have something
  164.             if(valid) {
  165.                
  166.                // Upload the video
  167.                uploaders.portrait.upload($('#portrait_upload').serialize());
  168.                
  169.             }
  170.                  
  171.          },
  172.          "Cancel": function() {
  173.            
  174.             // Close the upload box
  175.             $(this).dialog("close");
  176.                  
  177.          }
  178.          
  179.       }
  180.      
  181.    });
  182.  
  183. });
  184.  


So now my headache is gone and i can relax :D

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 4 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.