I would like to create a game with a rounded corner border on a big background image. Where all the game content is only visible in the window of a "masked area" in withing the border.
To achieve this, I have created 3 layers in a new document. On the middle "Mask" layer, I have a rectangular sprite to act as mask and I have set the mask's blend mode to "Destination In".
On the top, layer was named "Frame" and I have a border sprite to cover the rectangular masked area. And on the bottom layer, everything I would like to appear in the masked "window".
Finally I exported the project with Project Properties > Clear Background set to "Yes".
It's all working perfectly on IE9 and Safari but the masking does not work on Chrome and FireFox? I have all the latest browsers installed.
Please see attached image:<img src="https://dl.dropbox.com/u/22331560/BrowsersTest.jpg" border="0" />
Project file: dl.dropbox.com/u/22331560/TransparentBGTest.zip
Exported files: dl.dropbox.com/u/22331560/TransparentBG.zip
How can I get the masking effect working on Chrome and Firefox? Is this possible? Your help is greatly appreciate. <img src="smileys/smiley10.gif" border="0" align="middle" />