Question

a .fla is 500 x 300. Inside, content moves OUT of the 500 x 300 stage so that it appears like it hides or moves off of the screen.

.fla complied... loaded into Flex via SWFLoader:

<mx:Conainer width="500" height="300">
       <mx:SWFLoader width="100%" height="100%" />
</mx:Conainer>

Loaded .swf file shows outside of the 500 x 300 Container in Flex.

How can i get it so that only what is INSIDE of the Container is visible?

Was it helpful?

Solution

Ok, i figured it out.

<mx:Canvas id="swfHolder" mask="{maskCanvas}">
        <mx:SWFLoader id="swffer" scaleContent="true" />
</mx:Canvas>

<mx:Canvas id="maskCanvas" backgroundColor="#000000"/>

The trick is to use the "mask" property. Note the object doing the "masking" must have a backgroundColor property set. I found this article helpful: link text

OTHER TIPS

please use scaleContent="true" in SWFLoader tag.

<mx:Conainer width="500" height="300" clipContent="true">
       <mx:SWFLoader width="100%" height="100%" />
</mx:Conainer>

Use "clipContent" property

Flex help for Canvas:

clipContent:Boolean [read-write]

Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.

If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top