views:

551

answers:

2

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 :)

+1  A: 

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.)

fenomas
I have wmode set to transparent and scale set to noscale already. The problem is that the stage, or the area covered by the embedded swf container is not transparent to mouse events, and the content in the div below the swf's transparent areas does not respond to the mouse
Gary Benade
The kind of thing I am trying to achieve is this. say I have a page with html content, I want to overlay a swf in an absolutely positioned div covering the whole page. then if I animate a ball bouncing off the swf borders it wall appear as if a ball is on top of the html. this looks ok if I use transparent wmode, but the html doesnt receive any mouse events
Gary Benade
I don't believe it's possible for mouse events to pass through transparent Flash to the HTML below. Could you achieve a similar effect with DHTML? (i.e., put a graphic of a ball inside an absolutely positioned DIV, and then bounce the DIV around.)
fenomas
A: 

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

worked