how do I allow objects in a flash SWF that are partially off stage to be visible and not cropped

Question

I have an AS3 flash player 9 swf with a stage size of 500x100, on the stage I have some objects which extend over the stage border, for instance a 50 pixel diameter circle at 490,90.

What is currently happening when I embed the swf in HTML is that the circle is getting cropped, I would like it to still be totally visible even though it is outside of the stage area. This is critical to the behaviour of this particular application because I need the mouse to be able to access the html elements below the flash movie. If I simply make the stage bigger the circle is visible but the mouse events are getting caught by the transparent flash stage area.

If I view the swf on it's own in a browser eg: localhost/test.swf, the circle is intact. I remember having the exact opposite problem in flash 8 years ago when I didn't want these off stage objects to be visible but they were, so I'm pretty sure it must be possible but I can't get the right combination of parameters for the embed to work correctly.

I am using swfobject 2 to do the embed, but I tried other methods and got the same results.

Any thoughts or suggestions will be highly appreciated :)

Answer 1

Your problem isn't Flash's stage area, but the size of the browser container that Flash is embedded into. It's hard to explain without drawing pictures, but I'll take a shot:

When you create a SWF, you choose a size in the authoring tool. Call that size the "Stage size". Later, when you embed your SWF in a browser, you define a size in the HTML - call this the "Container size". Usually the two sizes will be equal, but they don't have to be.

What's important here is that when you view your SWF in a web browser, the Stage size is largely irrelevant (* see note below) - Flash will render everything, regardless of whether it's inside or outside of the Stage size. The Container size, rather is what determines the extents of your SWF's visual area in the browser. It's exactly the same as defining a <div> in HTML - when you embed your SWF at a certain size, you are telling the web browser to allocate only that much area to Flash, and not to allow Flash to render anything outside that area.

Now with all that in mind, the solution to your problem is one sense simple - just embed Flash into a larger container. If that solves your problem, then fine. However, I'm guessing that the reason you're asking is that you want your SWF's graphics to appear to be extending outside of its container. If this is the case, the only way to do it is to embed your Flash with a transparent background, into a larger container that is absolutely positioned with CSS to overlay the rest of your HTML content. This is kind of an advanced topic, but search for tutorials about "wmode=transparent" and they should get you started.

---

note: (Throughout this answer I'm assuming that you are embedding with scaleMode set to "noScale" - if you're not, you probably should be unless you understand why not.)

Answer 2

The answer above is good, but another feature you can utilize (after "opening up" the containerSize) is the salign property. This property allows you to adjust the location of the swf within this container.

http://help.globalscape.com/help/cutehtmlpro5/Flash%5FSupport%5FParameters.htm