A Web Developer Takes Adobe Edge for a Spin, Part 1
On September 7, 2011 Adobe released preview 2 for Edge, which they describe it as, "...a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3." From what I can tell at this point, there is no Flash in Adobe Edge. For those of you who think Adobe is going to sink right along with Flash, think again.
Adobe is meeting the post-PC era by creating new development tools that does not rely on Flash. Therefore, as Apple and Microsoft turn their backs on Flash--and are doing so for the right reasons--Adobe is developing tools that embrace the future, namely: HTML5 and CSS3. So, how does Adobe Edge work?
After you're done trying to learn Adobe Edge on your own, you might want to watch the video from Adobe Fellow Mark Anders. While this video is well done, there are a couple of issues with it. First, Mark talks and works very fast. You'll probably want to watch the video several times. The second issue is that he rarely tells you what he's clicking or where he's clicking it from. Regardless, the video does show you how to get started. Although, you might have a hard time trying to follow along and create the same work Mark creates while watching. It's not a see-and-do video without having to do much pausing and playing. With all that said, I'll attempt to document the video here, which will be broken up in a two-part series.
Start by opening a blank new document in Adobe Edge. The first thing Mark does is draw a grey box. To do so, click the Rectangle
Then click and drag a box in the workspace. The Properties box will then populate with tools:
When you change the color of the box, this creates what Adobe calls a keyframe, which appears as a diamond in the timeline. The timeline appears at the bottom of the screen.
Next, Mark repeats the process of creating a box. While he clicked the Rectangle Tool a second time, it is possible to copy and paste the first box. Now that you have two objects on the screen you can see how easy it is to align them together. After you copy and paste the box, the second box will appear directly over the first box. Click to select, then drag away. Then slowly drag the second box close to the bottom of the first box. You should notice how smoothly and easily the two elements align. They almost snap together, but it's not a completely forced snap in that you can't easily adjust it. This is an unbelievably nice feature that designers should love. If you've ever tried to align objects in PowerPoint without the aid of grid lines, you'll appreciate how nice this feature is.
For the second box, Mark adds a skew affect. This is also done from the Properties box.