Archive | Animation RSS feed for this section

Adobe brings programmable 3D pizazz to the web

Now that the web standards bug has bitten Adobe Systems, the company is starting to produce some very interesting new technology.

Adobe's CSS shaders technology permits web pages — including text, graphics, animation and video — to be placed on curved 3D surfaces such as this flip book.

The newest example, revealed at the Adobe Max show this week, are CSS shaders.
Shaders are small programs run by computers’ graphics chips for games and other graphics-intensive applications. Shaders come in two varieties: vertex shaders, which control the geometry of the vertices used to construct the 3D surface meshes, and pixel shaders, which control pixel colours. CSS shaders employ both ideas.This newly proposed standard, developed in cooperation with CSS pioneers Opera and Apple, brings a common 3D graphics ability to the Cascading Style Sheets technology for controlling web page formatting.

Building shaders into CSS enables eye-catching, dynamic effects. Adobe demonstrated a few. With vertex shaders, it created web page elements that curve like pages or ripple like flags. Because the shaders operate on HTML content, that means shader-controlled surfaces can contain ordinary elements including forms, Scalable Vector Graphics (SVG) and HTML5 video.

CSS already has some 3D animation effects, but the shaders work would make the technology programmable for free-form control. The technology looks well suited for use in Adobe’s Edge software for creating dynamic web pages. Adobe said future preview versions of Edge will add better “expressivity”, and CSS shaders would serve that end.

The company is developing CSS shaders with WebKit, the browser engine used in Apple’s Safari, Google’s Chrome and Adobe’s AIR technology. It also wants to standardise CSS shaders, Vincent Hardy, principal scientist of web standards at Adobe and the person who proposed the standard, said in a blog post.

“Adobe is bringing CSS shaders to the W3C as part of the FX taskforce, and our goal is to start contributing this code to WebKit as soon as the work is accepted by W3C so that web developers can start enjoying this powerful new set of filter effects soon,” Hardy said. He cautioned that Adobe’s proposed syntax for using the technology could well change.

In combination with the CSS filter effects technology, CSS shaders can let programmers animate a swipe from one colour scheme to another, in this case on a 3D surface.

Adobe is working hard to jump aboard the web-standards train. Earlier this year, it proposed CSS Regions and Exclusions technology that lets text flow around objects, overflow into different regions and be placed within specific areas. That technology has attracted some support, for example in the latest Microsoft IE10 platform preview, and stands to help build more magazine-like layouts and to design web pages more adaptable to different screen sizes.

Also at its Max show, Adobe announced acquisition plans Nitobi and TypeKit, small companies that specialise in web development for mobile devices and web fonts, respectively.

Adobe’s web standards-push stands to draw some attention away from Flash, Adobe’s previous preferred method for building advanced web content. Adobe remains committed to Flash, though, and last night released Flash Player 11.

CSS shaders work in conjunction with a proposed CSS filter technology, which lets a computer apply present graphical transformations to content. Preset transformations include saturating colours or changing them into sepia tones, blurring or sharpening content, adding drop shadows and changing opacity.

Adobe's CSS shaders let this Google Maps page be folded like a real map. (Screenshot by Stephen Shankland/CNET)

Adobe, though, wants to add customisable filter effects. “CSS shaders provide the flexibility and expressivity needed to create arbitrary effects — from the simplest ones to the most complex,” Hardy said.

Another demo uses pixel shaders to control how a colour filter effect swipes across a page.

Shaders also are a feature of WebGL, a 3D graphics technology for the web led by Firefox and the Khronos Group standards committee. WebGL graphics are contained within a region of a web page defined using HTML5′s canvas element, but Adobe said its CSS approach works with “arbitrary web content” — an entire web page, for example.

 


Farewell Flash? Adobe Launches HTML5 Web Animations Tool “Adobe Edge”

Today, Adobe is launching a new tool called Adobe Edge which will allow creative professionals to design animated Web content using Web standards like HTML5, CSS and JavaScript. Not Flash.

Aimed to coexist with Adobe Flash, not replace it, the Web design software is Adobe’s big bet on how it will continue to solidify its position as a top player in the infrastructure of the modern Web, especially as the Web goes increasingly mobile. In this new mobile context, the Web has become a more hostile environment for Flash, which has no place on Apple mobile devices, and likely never will.

HTML5 vs Flash…or HTML5 and Flash?

Although Flash still accounts for the majority of website animations today, that won’t always be the case.

So does Edge’s launch mean that Adobe caved and ceded the battle to HTML5 over Flash? Adobe doesn’t see it that way. Although battles make for good headlines here in the world of tech journalism, it’s not really an either/or scenario when it comes to the “Flash vs. HTML5″ conundrum in the professional world. For today’s Web designers and developers, both technologies are still used.

Adobe’s Support for HTML5 Continues with Edge

“HTML5 is an opportunity for Adobe,” explains Devin Fernandez, Group Product Manager for Adobe’s Web Pro Segment, “that’s not to say there aren’t opportunities for Flash.” He contends that Flash will continue to push forward, and, as we have reported previously, it will focus on areas that HTML5 cannot yet address as well – like 3D gaming for example. (Although even there, HTML5 is making inroads.)

Still, with HTML5 being a relatively new technology, it doesn’t today deliver a consistent experience across the widest range of devices and browsers. For example, Windows XP, which even toMicrosoft’s own chagrin remains a fairly popular computer operating system, can only run up to Internet Explorer 8. That means it can’t take advantage of the many major leaps in terms of HTML5 support introduced in IE 9.

In other words, Adobe believes Flash still has a solid future here on the Web for some time. But when the Web is ready for an entirely Flash-free existence, this is surely Adobe’s plan for maintaining its relevance among the creative professionals crowd, including developers and designers alike.

What Does Edge Do?

Adobe claims it has been a strong player in HTML5, going back to April 2010, when it first began introducing support for the technology in its product line, including Dreamweaver, Illustrator, its Digital Publishing Suite and, more recently, its Flash-to-HTML5 conversion tool, Wallaby.

Now, with Adboe Edge, it aims to provide the tools that will help professionals build Web animations, and in the future, even simple games. At present, Edge will focus on its core animation engine, but in the future, it plans to add more HTML5 features, including Canvas support, support for HTML5 Audio and Video tags, richer support for animating SVG graphics and more.

The software (for both Mac and PC) is designed to have an intuitive paneled user interface, a fast startup time, and will include, at the bottom, the familar timeline feature creative professionals already know and understand. Edge users can import existing HTML documents and graphic assets including SVG, PNG, JPG and GIF and then sytle them with CSS3. Panels on the left and right provide access to properties of the .EDGE file and the various elements the designer is working with. And in the center, there runs an embedded version of the WebKit browser.

When a project is complete, it will work on modern Web browsers like those that run on Android, iOS, HP’s webOS, the BlackBerry PlayBook, plus Firefox, Google Chrome, Safari and Internet Explorer 9.

Where to Get Adobe Edge

Starting today, Adobe Edge is available as a free download while in its public preview period. The 1.0 product is expected to launch next year.

This is a hugely important launch for Adobe – one that IDC analyst Al Hilwa, says is “the biggest thing they have done so far.” Hilwa likes Adobe Edge, and believes it shows that Adobe is really in-tune with designer needs.

“Adobe has started working on HTML5 and has brought many little things, showing that they can pivot nicely to new trends,” Hilwa told us. “It shows that they can remain the premier tools vendor no matter what the technology inside is.”

Will designers agree with Hilwa’s sentiment, though? In time, we’ll know.