Recently someone in the Adobe forums asked why elements that were not on Flash Catalyst’s artboard visibile in the browser?
This is a good question. It comes down to whether you have your application set to be resizable. If you have your Flash Catalyst project to be resizable, the HTML code will set the width and height of the swf to be 100%.
The question is how to solve this? There are two solutions depending on what you need your application to do. The more complex solution is to apply constraints to ALL your components in your project. This will then provide the proper information on how to correctly position each element as the browser’s dimensions are changes.
But what if I don’t want to update all those components? What if, my project is actually of a fixed size and I don’t care about resizing. Then, go to Modify… > Artboard Settings and uncheck Resizable. Publish your project, and only the artboard will be shown.
Alternately, you can edit the exported html file as well. Look for swfobject.embedSWF values and change the “100%”, “100% to the project’s actual width and height. You will need to make two more changes in the <object> tags as well:
<object type=”application/x-shockwave-flash” data=”Main.swf” width=”100%” height=”100%“>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”100%” height=”100%” id=”Main”>
Save the file and test it in your browser. Your project should now look like this: