click doesn't fire when WMODE=TRANSPARENT in SWFUpload button

Question

I have a Flash-based SWFUpload upload button in a HTML page.

I am trying to style that button. SWFUpload provides a Javascript setup interface to the Flash button's settings. I don't have Flash myself, so I have to work with the pre-compiled SWF file.

   ..... 
   button_width: "100",
   button_height: "20",
   button_placeholder_id: "spanButtonPlaceHolder",
   button_text: '<span class="theFont">Upload</span>',
   button_text_style: ".theFont { font-size: 18; font-family: Verdana; color: #FFFFFF; }",
   button_text_left_padding
   .... 

Now, I want the button to fit in with the background colour of the HTML element it resides on. I don't care whether I achieve this by transparency, or by giving the flash button a colour. But SWFUpload 2.20 doesn't have a setting to specify the background colour any more, and I don't want to use a background image with a specified colour.

I tried

   button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,

this gives me a transparent button, but it does not react to click events any more. Not even when I click the tiny white pixels of the text.

I tried giving it a transparent background image:

    button_image_url : "$swfupload_widget_webroot/images/transparent.png", // 1x1 Pixel 
    button_image_width: 100, 
    button_image_height: 20,

but to no avail.

Does anybody have an idea what to do?

Why won't the movie handle clicks any more when set to transparent?

I'm testing on Firefox 3.5 on Windows 7.

Answer 1

Window modes like transparent and opaque are notorious for the odd input bugs they inflict. It is definitely a good idea to stay away from it when you can.

I haven't used SWFUpload, so I'm not entirely sure how it goes about embedding the SWF file. But regardless of the specifics, in the end I'm sure it's using embed/object tags, and for those, there's the bgcolor parameter that overrides the background color specified inside the SWF file. I would suggest taking a look at this parameter (scroll down).

SWFObject is a common way to dynamically embed SWF files using javascript. In case that's what SWFUpload uses, you should be able to apply the following principle to set the bgcolor parameter:

var params = {
  bgcolor: #ffcc00,
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
  "expressInstall.swf", {}, params, {});

As I said, I'm not sure what the SWFUpload interface looks like, but the key is to find a way to specify the embed parameters. Hopefully that will at least nudge you in the right direction!