Adobe Edge Animate CC: Create ‘Flash-like’ Animation using HTML5

Adobe Edge Animate CC: Create ‘Flash-like’ Animation using HTML5

Bid adieu to creating animations with (Adobe) Flash as Adobe launches a new tool – Adobe Edge that will allow web design professionals to design animated Web content using Web standards like HTML5, CSS and JavaScript. Adobe Edge Animate CC (formerly Adobe Edge) – an HTML5 design tool lets you “create animated, interactive content for the modern web” or you can say Adobe Flash-like animations using HTML5.

How does Adobe Edge Animate CC work?

The Adobe Edge Animate CC helps you easily create engaging content with animation and interactivity, by working natively with HTML. Not only does it enable users to add motion to existing HTML documents without hampering design integrity of CSS-based layouts, it also enables users to effortlessly create visually rich content from scratch. This can be done by using familiar drawing tools that produce HTML elements styled with CSS3. According to Adobe, users can import standard Web graphics assets such as SVG, PNG, JPG and GIF files and style them using CSS3.

The design stage uses WebKit to enable design, preview and manipulation of content with incredible reliability. While the new timeline feature is both familiar for design professionals, a path-breaking innovation in animation productivity is created to enable users to define and customize motion applied to HTML elements with extreme precision.

 

Adobe Edge Animate CC: Features 

MOTION PATHS: For highly expressive movements

image001

 

This feature allows you to animate elements along with completely customizable, fine-grain motion paths for highly expressive movements. Besides that you can also apply enabling functions and use motion paths in resizable layouts.

[adsense]

TEMPLATES: For quicker access to reusable assets

image002

 

Adobe Edge Animate CC helps save custom templates for quicker access to reusable assets. This can save you time when working on repetitive projects.

 

Avail: FASTER CONTENT

image003

 

This feature allows you to take advantage of an option to host your Edge Animate CC runtime files on an Adobe content delivery network (CDN) powered by Akamai – at ZERO cost.

 

SWIPE GESTURE SUPPORT: For your mobile-focused projects

image004

This feature allows you to add left and right swipe events to elements for your mobile-focused projects.

 

PRECISE ANIMATION: Helps speed up the animation process

image005

 

This feature allows you add motion to graphics and HTML elements with remarkable accuracy courtesy the innovative timeline editor. You may easily edit property-based keyframes or use the Pin tool to help speed up the animation process.

 

REUSABLE SYMBOLS: To create nested animations

image006

 

Here you can use the symbols feature to create nested animations with independent timelines and interactive competences. Symbols are reusable and can be controlled via exposed APIs and pre-built code snippets.

 

RESPONSIVE LAYOUTS: To create designs for different screen sizes

image007

 

With the help of this feature, you can use percentage-based layouts in your compositions to create designs for different screen sizes, such as those for tablets and smartphones.

 

RICH INTERACTIVITY: Library to tap into a built-in code snippet

image008

 

You can now add depth to your work by integrating user interaction and playback control. This feature allows you to tap into a built-in code snippet library, or add your own JavaScript code using the code editor.

 

Adobe Edge Animate lets you create content that is MOBILE READY

image009

 

Adobe Edge Animate lets you create content that is mobile ready i.e. it is designed to work reliably on iOS and Android devices. Besides it works well in modern browsers such as Firefox, Internet Explorer 9+, Chrome, and Safari.

 

DIGITAL PUBLISHING SUPPORT: Allows you to import Edge Animate compositions

image010

 

This feature allows you to import Edge Animate compositions into Adobe Digital Publishing Suite. This is done with Adobe InDesign CC or CS6, or into Apple iBooks Author.

 

Offers NATIVE HTML SUPPORT

image011

 

Here Adobe Edge Animate works natively with HTML, and is great for workflows to be used by designers and developers. Moreover, you can also publish your projects with an HTML tool similar to the one in Dreamweaver CC.

[adsense]

INTUITIVE & STREAMLINED INTERFACE

image012

 

Edge Animate CC allows you to create your designs on a WebKit based stage. This helps your compositions to have reliability across modern browsers. Make an attempt to design with a variety of familiarized styling options and effects to create engaging HTML content.

 

DRAWING & TEXT TOOLS: Helps build compositions from scratch

image013

 

This feature allows you to build compositions from scratch using drawing and text tools; besides influencing objects with a range of styling and transformation options. It also lets you import a variety of web graphics such as SVG, JPEG, PNG, and GIF files.

 

Give your compositions a richer feel with GRADIENT SUPPORT

image014

 

You can now give your compositions a richer feel with new gradient support in Adobe Edge Animate CC. You may even use a new interface to style and animate elements with radial or linear gradients.

 

CSS FILTER SUPPORT: Create stunning effects

image015

 

You can now add stunning effects with consistently striking simplicity, i.e. you may now avail CSS filters such as blur, grayscale, sepia, brightness, contrast, hue-rotate, invert, and saturate.

 

WEB FONT SERVICES SUPPORT: for richer typography

image016

 

This feature allows you to add richer typography with web font services such as Typekit, Edge Web Fonts, and more. You may easily choose custom typography and preview fonts from the Edge Web Fonts service via the web font interface.

 

Avail: DOWN-LEVEL BROWSER SUPPORT

image017

 

If you are getting the above error message, then you surely need to generate content with elegant static contingency for legacy browsers. Moreover, Edge Animate also supports Google Chrome Frame for added compatibility.

 

Avail: MULTIPLE PUBLISHING OPTIONS

image018

 

Adobe Edge Animate CC now allows multiple publishing options. This includes emission of HTML markup for SEO friendliness, deciding whether jQuery should be packaged with the project, or adding a pre-loader that allows viewers to know that content is being downloaded.

 

Adobe-HTML5: Bonding gets Stronger

image019

 

Adobe asserts that it has been a strong player in HTML5 since 2010, when it initiated support for the technology in its product line. This comprises of a strong and impressive ensemble of HTML5-based Adobe products – Dreamweaver, Illustrator, Digital Publishing Suite, the Flash-to-HTML5 conversion tool – Wallaby and, more recently Adobe Edge Animate CC.

Adobe Edge Animate CC works towards providing the tools that will help web design professionals build Web animations; and possibly even simple games in future. Even though Adobe Edge is currently concentrating on focusing its core animation engine; in the near future it has plans to add more HTML5 features like Canvas support, richer support for animating SVG graphics, support for HTML5 Audio and Video tags, and more.

 

HTML5 and Flash: Co-exist NOT Replace

Adobe is clear from the start that it has no plans to replace Adobe Flash or a HTML5 vs. Flash strategy, but prefer to coexist. In fact, the Web design software is Adobe’s big gamble in its endeavor to strengthen its position as a dominant player in the infrastructure of the modern Web – especially at a time when the Web is increasingly going mobile.

 

Get Started: Create Adobe Flash-like’ animation with HTML5

Adobe with Edge Animate CC plans to take things a step further. Conceptualized as an HTML5 design tool, it promises to bring animation, similar to that created in Flash Professional, to websites. Moreover, content created with Edge is designed to work on modern browsers including those on iOS, Android, BlackBerry Playbook, HP webOS and other smartphone mobile devices; besides Firefox, Google Chrome, Safari and Internet Explorer 9.

 

Have you tried creating animations using HTML5? Share your experiences with us.

Posted in HTML
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Daniel Rusling

Daniel Rusling is a professional web designer associated with VITEB – an offshore outsourcing web design company in India providing complete IT solutions. He has contributed many technology articles covering web design, usability, conversion optimization, social media related subjects. Follow him on Facebook & Twitter.
  • Bruce

    Its funny that you list “brightness” as one of the supported CSS filters. However, in the very screen shot you show, brightness is not listed. I’ve been trying to determine how brightness could be controlled in An but without success.