Adobe Edge Animate CC: Create ‘Flash-like’ Animation 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
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
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
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
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
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
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
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
Adobe Edge Animate lets you create content that is MOBILE READY
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
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
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
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
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
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
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
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
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
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
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.