Hiding offscreen elements in Flash Catalyst

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 project showing offscreen elements.

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%“>

and

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

The project no longer showing offscreen elements. The grey frame was added for demonstration purposes.

Here is the original project, and the fixed version.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s