Advertisement

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.

AdobeEdge-fig01.png

Step2

Now we will import a transparent PNG image. From the File menu, choose Import and navigate the tutorial files to Html5_logo.png

AdobeEdge-fig02.png

Step3

Select the image and drag it to the top of the document.

AdobeEdge-fig03.png

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.

AdobeEdge-fig04.png

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.

AdobeEdge-fig05.png

Step6

Click the timeline indicator and move it to frame number 00:01, which refers to the first second of the animation.

AdobeEdge-fig06.png

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.

AdobeEdge-fig07.png

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.

AdobeEdge-fig08.png

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.

AdobeEdge-fig090.png

Step10

Similar to what we did in steps 6 and 7, move the image to the left side of the document.

AdobeEdge-fig10.png

Step11

Select the blue animation area in the timeline, and from the Easing icon select Ease Out > Elastic.

AdobeEdge-fig11.png

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.

AdobeEdge-fig12.png

Step13

Select all the letters from the Properties panel, and set their opacity to zero.

AdobeEdge-fig13.png

Step14

Move the timeline indicator as in the figure below and set the opacity to 100.

AdobeEdge-fig14.png

Step15

Select the colored animation areas for the letters while holding down the Shift key on the keyboard.

AdobeEdge-fig15.png

Step16

From the Easing icon, set the easing for the letters to Ease Out > Bounce

AdobeEdge-fig16.png

Step17

Move the animation areas for each letter as the figure below. This will make the letters appear one after one.

AdobeEdge-fig17.png

Step18

To preview the animation in the browser, choose Preview in Browser from the File menu.

AdobeEdge-fig18.png

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.