How To Use Adobe Edge to Create HTML5 Animations
Adobe recently unveiled a new application to their suite of creative products called Edge. Adobe Edge is an application that lets users create Flash-like content, but using web standards like HTML5, CSS3, and JavaScript. This is great news for web developers who wish to forget about Flash and move on to these newer technologies. Let us show you the basics of Adobe Edge, and how to tweak a project before uploading it to your website.
How to Get Adobe Edge
The Adobe Edge Preview can be downloaded for free from the Adobe Labs website. You will be able to use the application without any limitations during the testing period. While on the Adobe labs website, you can also download sample project files. For this particular how-to, we’ll be using the sample project called “Ferris Wheel and Roller Coaster”.
The Basics of Adobe Edge
When you first launch Edge, you may notice that it looks similar to Adobe’s Flash offerings, but has a seemingly simpler user interface. The interface is also similar to other HTML5/CSS3 animation tools like Hype for Mac.
On the left-hand side of the window, the properties pane gives you the ability to rename objects, and change other properties such as location, size, opacity. Additional options like transform origin, rotate, skew, and scale let you animate the object.
In the center of the window is the preview area. This shows a live preview of the timeline contents. You can also click on objects in this area to load the properties.
At the bottom of the screen is the timeline. This area lets you drag and drop objects, and change the timing of the animations.
Downloading and Tweaking Sample Files
To give you an idea of how easy it can be to animate objects in Edge, we’ll download one of the sample files available from the Adobe Edge website called “Ferris Wheel and Roller Coaster.”
Once downloaded, unzip the files and double-click on the file named “Wheel.edge”. This will open the project and associated files in Adobe Edge.
For this project, we’ll add some text in the background. To do this, click on the small Text tool in the upper, left-hand corner of the screen. Next, click and drag on the main canvas and expand the text box over the area that you would like to place text on. After you release your mouse-click, a small pop up will allow you to specify the text that will be entered.
You can play around with the properties of the text until you it meets your requirements.
Exporting and Uploading Your Project to the Web
When you have finished tweaking your project, click File > Save. All of the necessary project files will be saved, including the HTML5 and CSS3 files. Navigate to the save location, and upload the entire folder contents to the location on your web server where you will be hosting the Edge animation.
You can then navigate to the Wheel.html page in your web browser to see the animation in action.
Follow this article’s author, Cory Bohon on Twitter.
