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 macProVideo.com 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 "video.com" bounce in and shortly after that the "macPro".
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
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, video.com.png) The assets should now appear underneath the assets panel.
Drag the square off the stage to the far left.
Then double-click the playhead on the timeline to leave the pin at 0 and move the playhead to .750.
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
Double-click the pin again to reset it and make sure the pin and the playhead are at .750.
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.
Next we need to bounce in both words. First we'll drag in video.com and when doing so it'll give you a prompt that the name is not suitable and change it for you to videocom.
Place it using the smartguides in place.
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.
Repeat the same process for macPro.png and apply the Ease Out: Bounce. Again press Spacebar to preview your animation.
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.