HTML5 is a new, promising technology, especially since many see it as a powerful technology that can compete with Flash in creating interactive content, such as videos and animations. Actually, there has long been a debate about this situation and many of the technology experts think it may be the end of Flash, especially after Apple stopped developing Flash Player for mobile devices. As a Flash expert who has been using Flash for years and knows its secrets, I have to disagree with the opinion that Flash is going to die because of HTML5.
While HTML5 is suitable for web and device projects, Flash is more capable of creating intensive animation and interactive content for the web, desktop and devices through the Adobe AIR technology. As a leading company in interaction and animation, Adobe released Adobe Edge as a powerful tool to create HTML5 animation and interaction using After Effects as an interface and timeline. In today’s tutorial, we will learn how to create a HTML5 banner animation in Adobe Edge. Adobe Edge is sold as part of the Adobe Cloud Membership.
If you are not part of the membership, you can learn more about it in our previous poll article The New Creative Cloud Membership: Is it Really Worth it?. Also, you can download the trial version of Adobe Edge Animate from Adobe Labs. This tutorial requires that you have a basic knowledge of the animation concept in Flash, After Effects or Photoshop. Now, let us move forward to the steps of the Adobe Edge tutorial. Also, you will need to download the source files of the tutorial to better understand the process.
Step1
Open Adobe Edge and choose the “Animation I” document from the Getting Started menu on the Welcome screen.
Step2
Now we will import a transparent PNG image. From the File menu, choose Import and navigate the tutorial files to Html5_logo.png
Step3
Select the image and drag it to the top of the document.
Step4
Now, we will activate the animation on the timeline. First make sure to click the red Auto-Keyframe Mode icon to enable auto animation.
Step5
From the left Properties, go to Position and Size. Click the small dot next to the Y to tell Adobe Edge that we will change the position of the image.
Step6
Click the timeline indicator and move it to frame number 00:01, which refers to the first second of the animation.
Step7
Drag the image to the center of the document as shown in the figure below. You will notice that the animation frame appears on the timeline.
Step8
Now note that the animation is just moving from the first position to the new one. Adobe Edge allows you to add animation effects using the Easing icon. It is the fourth icon right to the Auto-Keyframe animation icon.
Click the blue animation area on the timeline and click on the Easing icon to display the available easing effects, and choose Ease Out > Bounce and double click it. The effect will make the image bounce till it reaches its final position.
Step9
Move the timeline indicator to frame 00:1.489, and from the Properties panel, click the dot next to the X position to activate the animation on the X axis.
Step10
Similar to what we did in steps 6 and 7, move the image to the left side of the document.
Step11
Select the blue animation area in the timeline, and from the Easing icon select Ease Out > Elastic.
Step12
Select the Text tool from the top menu and type HTML5 next to the image like in the figure below; make sure that each letter is written separately, because we will animate each one individually.
Step13
Select all the letters from the Properties panel, and set their opacity to zero.
Step14
Move the timeline indicator as in the figure below and set the opacity to 100.
Step15
Select the colored animation areas for the letters while holding down the Shift key on the keyboard.
Step16
From the Easing icon, set the easing for the letters to Ease Out > Bounce
Step17
Move the animation areas for each letter as the figure below. This will make the letters appear one after one.
Step18
To preview the animation in the browser, choose Preview in Browser from the File menu.
In this tutorial, we have learnt how to create a HTML5 animation easily using Adobe Edge Animate. You can go beyond the above steps and try to create your own animation effects. Share with us your ideas and opinion about Adobe Edge and if you think it can compete with Flash.
