Adobe Edge Preview 5 Now Available

By Mike Rohde

Adobe Edge Preview 5 is now available for free download here. If you haven't heard of Edge yet, then you should take the time to learn about this web animation tool that uses HTML5 and JavaScript. Some pundits have claimed that Edge will slowly replace Flash as time goes on. Edge is fully compatible with all modern browsers and can work where Flash does not in mobile browsers such as the iPhone and iPad. Edge even works in Internet Explorer 9 and this latest version provides a down-level stage for browsers that do not support HTML5. This allows web developers to create animations and post them online without fear that the site will appear broken to anyone using Internet Explorer 8 and lesser.

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

Edge is basically WYSIWYG (what you see is what you get) software but it does allow you to open the files that it produces. One of those files that you can open, along with several JavaScript files, is the HTML file. For this particular animation, the HTML5 file looks like this:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
 <title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="commander-shepard-talks_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->
 </head>
<body style="margin:0;padding:0;">
 <div id="Stage" class="EDGE-5359584">
 </div>
</body>
</html>

Putting Your Animation Online
The HTML output that Edge creates is very basic and very condensed. You'll also probably notice that the majority of the coding is linked to a preloaded JavaScript file. That makes it very easy to embed this animation into a web page (simply insert the js script into the HTML page where you want it to appear, provided of course that you also have the other files uploaded as well). Of course, you could simply link directly to this HTML page if you want the animation to be it's own page. But the majority of animations will most likely compliment a page that is filled with other content. If you want to insert this animation into a Joomla site, like I did for this example, you can simply upload all of the files through FTP, then use a Wrapper Module that points to your animation. Then create a unique loadposition for that module and then insert the loadposition into your article.

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)
sym.play('start');
// 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.

 

 

 

 

 

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date