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;}

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.

One comment

Leave a Reply

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

You are commenting using your 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.