Adobe Edge Preview 5 Now Available
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
As the author of Adobe Edge for Dummies, I've been fortunate enough to get a behind-the-scenes look at Edge while it is in development. I've also had time to play with some of the new features, which I'll discuss in this article. Some of the new features in Preview 5 include:
- Optimizing your content for deployment on the web
- Create a down-level stage for non-HTML5 browsers by using the Poster Capture feature
- Preloader tools, such as spinning wheels, to show that the animation is loading
- Cursor attributes, so that your cursor changes in appearance when the visitor hovers over a link or other actions
For this article, I'll showcase the features used to create a very simple animation that has some pretty cool attributes. The sample animation can be seen here. This animation is not meant to be a clean and polished animation; it was created with a tongue-in-cheek attitude and the amateurish quality of the moving mouth is meant as part of the joke. The joke itself lends itself toward a popular video game meme from a game called Mass Effect 2, in which the main character in the game endorses one of his favorite stores in the citadel. Then, for the rest of the game, you hear your character repeat the line, "This is Commander Shepard and this is my favorite store on the Citadel." This phrase became popular on the internet and then turned into it's own meme in which people would slightly change the line to whatever was fitting. As part of the launch for Mass Effect 3, the site GoozerNation brought this meme back into the spotlight by using this animation as part of their page that highlights the game. Now that you have the background behind the animation, let's dive into some features of the animation.
Here's a list of features in this HTML5 animation:
- The mouth appears to move up and down to simulate talking
- Uses the clipping feature to make the text slowly appear
- Has a Play Again button that appears at the end of the animation
- Changes the cursor attribute when the visitor hovers over the button
- The text disappears when the animation is over
- The mouth only moves when the text is being displayed and thus provides the impression that the image is talking
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<!--Adobe Edge Runtime-->
<!--Adobe Edge Runtime End-->
<div id="Stage" class="EDGE-5359584">
Putting Your Animation Online
Simulating the Talking Mouth
I created the talking mouth with two images. I used the first image to cut out the bottom half of the mouth using a tool called SnagIt. You might prefer Photoshop or some other image tool. I then imported both images into Edge. Then I positioned the bottom half of the mouth so that it was in a closed state and then I moved the mouth so that it appeared open. I then copied and pasted this animation so that it appears the mouth is opening and closing. I had to time this with the text as that appeared on the screen.
Using the Clipping Tool
After I finished animating the mouth, I then added in the text. Each line of text appears at a different point in the Timeline. To make the text appear one letter at a time, I used the Clipping Tool. The screenshot shows what the Clipping Tool looks like within Edge.
The Play Again Button
At the end of the animation, a button appears so that the visitor can view the animation again. This was done through what Edge calls Actions. In this instance, it's a Click action that triggers the animation to begin playing at the Start. You can create labels in Edge that appear in the Timeline, or you can use the actual timecode. The below code snippet shows you the code Edge creates when you create a Click action that will play the animation from the start label.
// play the timeline from the given position (ms or label)
// insert code for mouse clicks here
Changing the Cursor Attribute
Changing the attributes of the cursor, such as changing the cursor from an arrow to a pointing hand, is a great way to tell your visitor that an item is clickable. Edge has an entire catalog of cursor attributes that you can use.
Removing Elements From the Stage
During your animation, you will most likely want certain elements to appear and disappear. Edge makes this easy to do from the Timeline. The screenshot below shows where you can click to turn the element on or off.
Download Adobe Edge Preview 5 for Free
Edge Preview 5 is now available for free from Adobe Labs. It won't always be free though, so it enjoy it while it lasts. When the software reaches it's peak build, Adobe will start selling the software. When that happens, you'll have to pay for software that will allow you to create animations like this. The Adobe Edge for Dummies book should be available for purchase roughly at the same time the software will become available for sale. In that book, I will provide far more in-depth information on how all of these features work.