All Articles Adobe
Creating HTML5 Animations Using Adobe Edge
Tareq Fadel on Thu, April 11th 0 comments
Gone are the days when animation on the web meant only using Adobe Flash. In this excellent article, Tareq Fadel introduces the joys of animating in HTML5 using Adobe Edge.

You'd like to add a bit of sizzle to your site, maybe some animation? But at the same time you'd like your animations to run on your iPad and your iPhone. Traditionally, you'd build your animations in Adobe Flash and output them as SWF, but unfortunately the SWF format will not run in the browser on the iPhone, iPad or the new Android phones.

The alternative is to build your animations using HTML5, but that involves a lot of code and a lot of programming for just a simple animation. Luckily for us there is Adobe Edge. Adobe Edge is currently a free product that can be downloaded and used from the Adobe Creative Cloud. Adobe Edge will allow you to create animations and add interactivity to your HTML5 sites.

In this tutorial we'll be creating an animation for the logo. We'll start by having the gloss square move in from the left and then the logo fades in. After that, we'll have the "" bounce in and shortly after that the "macPro".

Pic 1

1 - Setting your stage

Create a new file and set the background to black and extend the width of the stage to fit the logo. In my example I've set the stage to 800

Pic 2

2 - Import your assets

Prepare all the images prior to importing them to web friendly formats. I've converted all the different pieces of the logo to PNG imported them by clicking the + symbol in Library/Assets. I imported the following files (gloss.png, hat.png, macPro.png, The assets should now appear underneath the assets panel.

3 - Animate

Drag the square off the stage to the far left.

Pic 3

Then double-click the playhead on the timeline to leave the pin at 0 and move the playhead to .750. 

Pic 4

Then move the square to the position on the stage where you want it to be. Press spacebar to see a preview. We'll then add an ease, click on the bar in the timeline and in the timeline choose Easing: Ease Out Quad

Pic 5

Double-click the pin again to reset it and make sure the pin and the playhead are at .750.

Pic 6

Now drag the hat.png and place it on the square. This time we'll use the pin in reverse. Drag the blue pin above the playhead in the timeline and move it +.75 to position 1.5s then select the hat on the stage and set the opacity to 0 on the properties panel. Press Spacebar to preview your animation.

Pic 7

Next we need to bounce in both words. First we'll drag in and when doing so it'll give you a prompt that the name is not suitable and change it for you to videocom. 

Pic 8

Place it using the smartguides in place. 

Pic 9

Same as before, drag the blue pin by double-clicking it and moving it ahead of the playhead to +.75 and then move the text above the stage. Change the easing to Ease Out: Bounce.

Pic 10

Repeat the same process for macPro.png and apply the Ease Out: Bounce. Again press Spacebar to preview your animation.

Pic 11

Once you've completed the animation, you may want to see your animation play in the browser. To perform the test in the browser, press Command-Enter and Edge will load the application in the default browser. If you're happy with your animation and would like to output it for use, then choose File > Publish and this will output HTML file that is ready to use.

Pic 12

Related Videos
Comments (0)

You must be logged in to comment.

Quicklook Guide
HTML & CSS 100
Dream It. Do It.
Do you want to learn Quicklook Guide?
Yes, I want to learn!
No Thanks, I just want to read the article.
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: