Adobe Edge – HTML5 website builder

by Kenny on
Adobe Edge is a new HTML5 website builder with easy to use interface and able to create an animation using HTML5, JavaScript and CSS3.

Look Inside

Adobe Edge Preview
Adobe Edge Preview

Adobe has introduced a brand new product called Adobe Edge last few months ago. Even though the product is still under developing stage, but right now you can actually grab the latest preview version of Edge – Adobe Edge Preview 3.1 from Adobe Labs site.


What is Adobe Edge?


Adobe® Edge Preview is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3. – by Adobe

As stated by Adobe, Adobe Edge has provided us an easy to use interface to create animation for our website with using HTML5 and JavaScript. It’s obvious that this might help a lot in HTML5 websites development especially for web designers since they don’t have to fully understanding how HTML5 works in order to create a HTML5 website. Instead, they can use the built-in features by Adobe Edge to build those complex animations.


Personal Review of Adobe Edge

As we all know, HTML5 and CSS3 will be a big trend for web design and web development in the future. Adobe wants to ensure that web designers and web developers will still use their product in case HTML5 has replaced Flash. Therefore, Adobe has introduced a brand new product Adobe Edge, which provides an easy to use interface to create HTML5 website. However, Adobe claims that both Flash and Edge can co-exist since Flash is still stronger for games and streaming video, while Edge will be for interactive web design and advertising.

Whatever the reason is, the important is we have such wonderful tools for HTML5 web development. With this, we can easily create HTML5 animations like Flash does! =)


Adobe Edge Features

Adobe Edge Preview Screenshot
Adobe Edge Preview Screenshot

As you can see, Adobe Edge seems to have a similar interface just like Adobe Flash (except the background color). If you are a Flash user, than I am pretty sure you will get used to it very quickly! Now let’s see what Adobe Edge can do.

Actions – The core of Edge’s interactivity capabilities. Actions is pretty similar to the Flash’s Actions, which you can attach your functions or JavaScript to certain events and elements. The only difference is the way to code the Actions, since JavaScript and ActionScript use different syntax.

Elements – Edge provided you an interface to create different shapes, images and text with using different tag types.

Stage – The elements created can be moved and resized directly on the stage. Otherwise, you might change its attribute under properties panel.

Timeline – This is where you create animations. You can easily create a transition, rotation, transformation or color animation with using Edge’s timeline panel since it support drag and drop feature. You might preview the animation on the stage directly.

Import – Edge allows you to import popular web graphics such as SVG, PNG, JPG or GIF files.


Adobe Edge Preview Sample output

Don't enjoy alone, share with your friends also
Read Next

Snow Effect Plugins for WordPress Blog and non-WordPress Site