0
votes

I have an HTML page with a background image. I now want to add a flash (swf) to the corner of the page (a paper-like fold that can be peeled). The thing is the the flash is a small piece of UI (fold) that later opens to a larger view that covers more of the HTML (2 states that switch when clicking). I'm using swfObject.js and embedSwf:

swfobject.embedSWF("fold.swf", "pageFold", "auto", "400px", "9.0.0");

And my HTML is:

<div id="pageFold"></div>

I did several different tries with the width and height parameters, including having them fixed, but my problem is that the swf keeps on covering the HTML's backgound image, even when the swf is in it's smaller state (the folded corner)

Ideally, I would like to have one of the two:

  1. Have a transparent background to the swf, so that I'll always see the HTML background image.
  2. Dynamically change the size of the embedded swf - when it in the smaller state (a folded corner), keep the embedded object small. When the swf is clicked and therefore the flash UI is enlarged, give the embedded object some more space in the HTML.

Is any of these possible? Any other options or ideas?

Thanks.

1

1 Answers

1
votes
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)

you need set parObj and attObj as "wmode=transparent" (maybe {wmode:"transparent"})

Also you may need use stage.scaleMode=StageScaleMode.NO_SCALE in your swf

Where callbackFn is a JavaScript function that has an event object as a parameter:
function callbackFn(e) { ... }
Properties of this event object are:
success, Boolean to indicate whether the creation of a Flash plugin-in <object> DOM was successful or not
id, String indicating the ID used in swfobject.registerObject
ref, HTML object element reference (returns undefined when success=false)

Use id parameter in callback function to manipulate your flash object - move, resize, etc