After creating animations, you can control how they play back. Edge Preview 3 includes the ability to loop animations in a composition. Additionally, the new code snippet library includes pre-built logic that you can customize as desired. The new animation and interactivity capabilities open up a whole new set of possibilities.
In this article, you'll examine a sample project that was presented at Adobe MAX 2011. The site features a fictitious food truck named Rahko's Ramen. The completed website consists of three Edge compositions running in a single page. The compositions are coordinated to play simultaneously once all three have finished loading. The result is an engaging website that combines animation with interactive maps (that update based on the date selected) and a rotating display of the business's recent Twitter posts (see Figure 1).
Begin by downloading the sample files for this project. The site is comprised of seven different sections:
Note: The Modernizr folder contains a static version of the Home page to deliver a down-level browser experience for older systems that do not support HTML5.
Each of the bindings in the code correlates to a UI setting in the Edge workspace. For example, if you open the map_edgeActions.js file in a text editor to review it, you'll notice that the settings applied in the Edge workspace are reflected in the code (see Figure 2).
When you want to add interactivity and animations in Edge, you create triggers that execute code at a specific position on a timeline. You can also bind code to the document, timeline, and specific elements. This code is called in the context of a symbol — even when handling element actions. The current symbol is always stored in the "this" variable. For example, you can call Symbol API methods such as:
If you haven't already, check out the sample site.
The Rhako's Ramen sample site is designed to display acceptably across a wide variety of browsers with varying Internet connection speeds. When you first visit the Home page, a preloader displays an animation until all of the content has finished loading and is ready to play. Additionally, the site is set up to display an alternate page for older browsers.
In the lower left corner, an animation of a bird is displayed before loading the rotating series of posts from a Twitter account's data feed. As you view the final version of the site in a browser, notice how three separate Edge compositions are combined into one HTML page to add different features to the Home page.
The following overview highlights the workflow used to complete this project:
Step 1. The designer creates the page layout and slices the Photoshop comp to produce the assets for the truck section of the composition (see Figure 4).
Step 2. The assets are imported into Adobe Edge and the timeline is used to create the animated truck that appears to drive in from the right side and then split open to reveal a hidden seating area (see Figure 5).
Step 3. Back in Photoshop, the comp is sliced and the assets are exported for the map composition and the main Home page.
Step 4. Return to Edge to create the map animation. Configure the three different maps to display based on the date the user clicks and add the code to build out the map presentation (see Figure 6).
Step 5. Use the Home page assets generated in Photoshop to create the main index.html page. Animate the blue bird and wire up the Twitter feed to the animated elements so that it cycles through the recent set of tweets. At this point, create the animated preloader (animated GIF) that is displayed on the page until all of the compositions have loaded and are ready to play (see Figure 7).
Step 6. Embed the truck and map compositions in the index.html Home page (see Figure 8).
Step 7. Build and incorporate the modernizr.js file to add a (raw) down-level browser experience for older systems that do not support HTML5.
As you can see from this quick overview, Adobe Edge Preview 3 offers many new features you can use to create interactive sites and interesting animations that display across modern browsers and a wide assortment of devices, including tablets and smartphones. Use the provided sample project files to analyze how compositions are constructed and discover strategies for creating your own preloaders and animated elements.
To get started developing your own HTML5 web projects visit the following online resources. Download and install the Edge Preview 3 software and learn more about working with the Edge API and workspace:
Josh Hatwich is a senior computer scientist at Adobe Systems.