Pinterest Stumbleupon Whatsapp
Ads by Google

create web animationFlash used to be the king of web animation, but now it’s been slowly abandoned because of the possible future ruler: a combination of HTML5, CSS3, and JavaScript. Even though Adobe is still strongly supporting Flash, it is also beginning to embrace the new alternative.

The proof is Edge – the new multi-platform tool from Adobe that will help users to create web animations using HTML5, CSS3, and JavaScript.

Get To The Edge

At the moment, Edge is still in beta and available for free. You can download the application after signing in using your Adobe ID. If you don’t have one, you can easily create an Adobe Account.

create web animation

Then download and install the application according to the operating system that you use. Edge comes in two flavors: PC and Mac. The beta version doesn’t require a serial number, but it will expire within the next 5 months.

00b Edge install

Ads by Google

At the end of the installation process, you’ll see a notification window stating how many more days are left in the pre-release period. My guess is that the tool will go commercial after the beta period is over, and we all know the pricing range of Adobe’s professional products. So if you want to try Edge out for free, you’d better download it as soon as possible.

javascript web animations

Playing Around With Samples

To help users understand about its new tools, Adobe provides a “Get Started With Edge” video tutorial and several downloadable sample animations. It’s recommended that you watch the video and play around with the samples.

The video is accessible via the “Get Started” pane which will appear when you first open Edge. The pane also gives you access to create a new animation file or open an existing one.

javascript web animations

The interface is divided into several main panes. The “Properties” pane on the left shows the composition tools of the selected elements.

javascript web animations

The “Timeline” pane at the bottom shows the choreography of each animated element related to the timeline.

html5 web animation

And the “Elements” pane allows you to select one item to edit from all the existing elements.

html5 web animation

Create A Simple Text Animation

The best way to understand any application is to use it. So, let’s explore Edge by trying to create a simple animated text.

  • Go to the “File” menu and choose “New“.

html5 web animation

  • A “stage” will be opened. This is the canvas where you can “choreograph” the animation. You can customize its name, size, and the background color from the Properties pane.

08b stage 2

  • Next, choose the “Text” tool and write something on the stage. Again, you can customize every aspect of the text from the Properties pane.

08c text tool

  • To animate the text, go to the timeline pane and modify each element of the text by deciding what changes will happen to it, and when the changes will happen.

08d choreographing

Basically, here’s what you should do :

  • Choose the diamond next to the “text” item on the Timeline pane,
  • Drag it to the position that you want,
  • Select the text from the stage,
  • Make the changes you want to the text.

You can add more text and other elements such as rectangles and/or rounded rectangles. Rinse and repeat the animating process for the other elements.

The last step is implementing the animation on your website. To do that, you have to save the animation as an HTML file in a folder, open the HTML using a plain text editor, then copy and paste the code to your webpage (or wherever you want the animation to appear). Don’t forget to put the “edge_includes” folder in the same location as the HTML file/code.

create web animation

The Next Move

Our experiment here is very simple, but you can use the basics to create more elaborate web animations using Edge. The app itself is still in its early stages, and there’s no doubt that it will have more elaborate features in the future.

At the moment, HTML5 is just making its baby steps into the virtual world and no one can tell when this newcomer will take the throne. But Adobe’s support for the new standard is surely blowing fresh air into the web.

So what do you think? Are you still supporting Flash or will you stand behind HTML5? Have you tried Edge? Share your opinions in the comments below.

  1. Phong Thai @JavaScriptBank.com
    September 4, 2011 at 4:00 am

    cool tips & tut, thank for sharing

    Can I share this post on my JavaScript library?

    Awaiting your response. Thank

    • Tina
      September 4, 2011 at 7:59 am

      Phong Thai,

      you are welcome to share this article in your JavaScript library. Please credit us and add a link back to MakeUseOf. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *