Adobe Edge Tip #1

Now that Adobe Edge Preview 1 has been public released, I can start talking about some of the things I have learned while exploring the tool. One of the first things you might notice is the alignment of the composition area.

Adobe Edge User Interface

By default, the ‘stage’ div is aligned to the upper left of the composition area (actually a running version of the Webkit browser). This can be problematic if you are trying to animate elements coming from the left side of the screen. The solution is actually quite simple.

Since Adobe Edge can open standard html files, there is a quick file. Create a new Adobe Edge project. Locate the html file, and open it in your favorite editor (Yes, round-trip integration would be nice, or even code editing within the tool, but hey, it is only Preview 1).

Once you have opened the html file, simply add:

<style type="text/css">
	#stage {margin-left:auto; margin-right:auto;}
</style>

before the </head> tag and save the file. If you kept Adobe Edge open, it will notify you that a file has changed, and ask if it should reload it.

Click yes, and your composition area should now be centered within the panel.

Advertisements

One comment

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