I’ve recently discovered Adobe Edge, a developer’s tool for creating animations in HTML5, CSS3 and JavaScript. While the software is not perfect, it’s not really supposed to be in that it’s only in Preview mode and the final retail version is not available as of yet. In my first three articles on Adobe Edge, I discussed the tutorial video from Adobe Fellow Mark Anders. From that series of articles, you can get your feet wet with Adobe Edge and can create your first animation. Here’s the first article in the series. Then, if you become motivated, you can move on and create your own first animation like I did. You can see the animation I created here. I made it for the consulting firm that I work for. Unfortunately, Edge animation does not work well in Internet Explorer 8 and below, so I’m restricted from placing it on my company’s site. However, Edge files do work perfectly well in IE 9, Firefox, Chrome, Safari and iOS and Android devices. My experience with creating my own animation taught me a few tips, tricks and bugs to look out for, which I present to you in this tutorial. I’ve discussed objects quite a bit. Did you know that you can name your objects? This is helpful so that not all of your text elements are labeled Text1, Text2, Text3, etc. Plus, if you need to tweak your CSS3 sheet, your specifically-named elements will show up there. Here’s an example: So far I’ve only discussed tips and tricks in working with Adobe Edge. Now for the bugs. Of course, I am discussing a preview release and not a final release, so bugs are expected. One bug that I kept tripping over was when I tried to select an object that was scaled down to 0%. If you scale an object down to 0%, you can’t click on it without getting an error message asking you to restart Edge. As a work around, I’ve been advancing the timeline to a point where the object starts to scale up and the object has more visibility than just a small blue square. By doing that, I could select the object and continue to work with it. This next bug is a bit more serious. Edge will become corrupt and will not save your work at random times. You’ll be working along, making changes, adding, deleting, then you click Save to finish, but when you re-open your work the project is completely gone. The moderators in the Adobe Edge forums recommended to fix this bug by uninstalling Edge and installing it a second time. Reinstalling Edge did not solve this problem for me. Source.

whatsapp button