Category Archives: HTML5

Creating HTML Canvas content with Flash Pro

Flash, HTML5

Let’s get a lot more people making animated HTML5 content. To do that, we need to lower the barriers to entry. Letting the hundreds of thousands of people with Flash skills leverage those skills is a good solid step. Flash PM Tom Barclay shows how the Toolkit for CreateJS can help smooth the transition from ActionScript development to the JavaScript world.

And here Christian Cantrell goes into a bit more depth around things like sprite sheets:

CSS Regions: One Year In

HTML5

To make tablet publications lighter weight & more dynamic (offering liquid layout, etc.), publishers need HTML to get smarter.  Otherwise, to get the layout richness their brands require, they’re stuck with things like creating huge piles of PNGs.

That’s why Adobe’s been helping advance proposals for CSS Regions & Exclusions.  To hear about the progress they’re making, check out CSS Regions: One Year In. (For background, see the demo below from a couple of months back.)

Interview: Adobe inside the CSS Working Group

HTML5

Eng manager Arno Gourdol nails it:

We are in a unique position: we have deep expertise in relevant areas (typography, animation, layout, digital imaging, video and so on) and we have a deep understanding of the needs of creative customers who want to use the web to express themselves. We can represent their point of view and advocate on their behalf. The better the web, the better tools we can build, and the happier our customers.

Check out the rest of his interview with Molly Holzschlag for details (Adobe’s priorities on CSS; Regions & Exclusions; Shaders; and more).

Adobe Edge (HTML5 animation) Preview 5 is available

HTML5

Sounds like a lot of great stuff in the new build (available free on Adobe Labs):

New Publishing and Optimization Features:

  • Publish to web: Preview 5  has an option to specify if jQuery should be packaged with the composition, or downloaded from a CDN to produce lighter code and improve caching.
  • Down-level browser support: Define a fallback state of a composition for non-HTML5 browsers like IE8 and below.
  • Preloader improvements: Choose what gets shown during the preloader (before the framework, jQuery, or composition is loaded).

Emphasis on animation:

  • Timeline: We made several significant improvements to the timeline that make composing animations much easier and faster, such as an easier to use Pin (formerly the Mark) and smarter playback behavior.
  • On-stage tools: New clip and transform tools make it easier to manipulate objects and create animation effects.

Many other enhancements:

  • Improved symbol functionality, stage editing options, the ability to swap images, more intuitive contextual menus, many bug fixes, and much more have been added to preview 5.

InfoWorld names PhoneGap 2012 Technology of the Year

HTML5

Today Adobe’s open-source HTML5 app platform, PhoneGap, was named a 2012 Technology of the Year Award recipient by IDG’s InfoWorld Test Center:

Selected by editors and reviewers from the InfoWorld Test Center, the annual awards identify the best and most innovative products on the IT landscape that were tested in the past year and PhoneGap was selected for being the leading open source mobile framework for cross-platform app development.

[Via]

Adobe's sticking with Flex, investigating HTML5, for CS extensibility

Flash, HTML5, Suite Development

PM Gabriel Tavridis shares some thoughts on where things are headed. Key points:

  • The Creative Suite SDK and CS Extension Builder will continue to be developed and enhanced with new features and support for Creative Suite applications.
  • We will make CS Extension Builder available through the Adobe Store at a compelling price point. We want the tool to become broadly available, so that every Creative Suite developer can enjoy its benefits.
  • We will continue our investigation on new technologies (e.g. HTML5) for extension development and occasionally share our findings with the developer community. We want to be transparent with the community and keep you involved in our planning.

All these tools & runtimes are just means to an end–specifically, that Photoshop and other apps get really well tailored to your needs. Your feedback is always welcome.

"HTML5 Now and Next" event in SF Monday

HTML5

Adobe’s hosting an “HTML5 Now and Next” event next Monday, Dec. 5, in San Francisco:

  • 5:30pm – Registration Opens
  • 6:00pm – Welcome
  • 6:05pm – Greg Rewis “HTML5: What’s now. What’s next.”
  • 6:30pm – Tab Atkins “The Future of CSS: Current Experiments and Near-Future Reality”
  • 7:00pm – Vincent Hardy “New CSS Features”
  • 7:20pm – Quick Break
  • 7:30pm – Paul Irish “HTML5’s History and Vocabulary”
  • 8:00pm – Steven Gill “HTML5 and Phonegap, Now and Next”
  • 9:30pm – Networking ends

 

Google: "Flash developers: Export to HTML5 with new Swiffy extension"

Flash, HTML5

Like the idea of turning Flash Professional projects into HTML5, but don’t want to wait for a new version of Flash to ship?  Try Google’s new Swiffy plug-in for Flash CS4 or higher. Developer Esteban de la Canal writes,

The extension enables you to convert your animation to HTML5 with one click (or keyboard shortcut). The extension is available for both Mac and Windows, and it uses Swiffy as a web service, so you’ll always get our latest and greatest conversion. Information about the conversion process is shown within Flash Professional.

By the way, a number of comments on my related post Monday highlighted current challenges and shortcomings with HTML5 work (portability, file size, etc.). It strikes me that the only way forward is to improve the standards and the browsers.  If you think something sucks, jump in and contribute ideas and code, like Adobe’s doing. [Via]

Check out Flash Pro generating HTML5

Flash, HTML5

Let’s get a lot more people making animated HTML5 content. To do that, we need to lower the barriers to entry.  That means making content run reliably across browsers, and letting the hundreds of thousands of people with Flash skills apply those skills to a new output format.

Because HTML is so broadly useful (Web pages, mobile apps, magazines, etc.), there’s no one-size-fits-all solution. In this 10-minute demo, Adobe VP Paul Gubbay shows:

  • Animating in the new Adobe Edge app (download it from Labs)
  • Turning that output into an app using PhoneGap [jump]
  • Using Flash Professional to export animation as HTML [jump]
  • Running CSS Shaders in WebKit [jump]
  • Enabling “liquid layout” from InDesign [jump]

 

 

I find the Flash Pro HTML export demo especially exciting, because it helps you reach your audience across configurations (e.g. letting an ad run with or without Flash installed), and it helps migrate content from Flash into HTML.

I should emphasize that this technology remains a work in progress, but here’s some of what I’ve learned:

  • This path will be most useful for relatively simple pieces–think ads, microsites, & other animated branded experiences, not complex games.
  • Output will be editable in Edge where it can be choreographed with other Edge motion content and where you can add interactivity in JavaScript. Flash Pro can play to its strengths, such as frame-by-frame character animations, feeding these into Edge.
  • The Flash Pro team is experimenting with converting ActionScript to JavaScript, again with ads being a key use case.
  • Sprite sheet export (see separate demo) will be useful across a variety of tools & runtimes (CSS, Canvas, Starling, and more).

I find all this extremely exciting. What’s your take? Anything else Adobe should be doing here?

 

PS–This demo was excerpted from last week’s Adobe financial analysts meeting. You might find some of the complete recordings & slide decks interesting. (Paul spoke during the David Wadhwani segment.)

Sneak Peek: InDesign liquid layout

HTML5

Remember how I’m always going on about Adobe helping make HTML more capable of doing rich, print-style layouts? How might that benefit people? PM Kiyo Toma gives a sneak preview of how InDesign’s evolving to create lightweight, dynamic HTML layouts for tablets and other devices:

HTML & CSS are only growing in importance to digital publishing (e.g. see Amazon’s Kindle Format 8), and I’m excited to see InDesign expanding its HTML-creation chops.

CSS shaders: Hell yeah.

HTML5

“Flash’ll be dead soon,” I thought. “Web browsers will add animation support, plus live filters, and let me mix it all together on a page.”

That was back in 1999.

HTML animation is progressing, but it still lacks much of the richness that Flash Player can provide. So, what can we do about it?

Adobe’s contributing technology & expertise to enable CSS shaders. CSS shaders “define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.” They work particularly well with CSS animations and CSS transitions, but they even work on video & SVG animations. Check it out:

 

So, yeah: Adobe’s using Flash-derived technology to make HTML5 more competitive with Flash.

Crazy, right? Not at all: this increases your ability to present visually rich experiences, and that increases Adobe’s ability to sell you tools for creating those experiences.  The different playback technologies are just means to those ends.

Adobe has collaborated with Apple & Opera and has now submitted the spec to the W3C. The code is checked into WebKit under consideration for inclusion in WebKit, with this demo recorded using a build of Chromium. In addition Microsoft has added support for SVG filters in the IE10 platform preview. [Update: IE10 supports SVG filters, but it doesn’t support Filter Effects on HTML or CSS shaders.] For details, sample code, etc., check out this post from Vincent Hardy.

Exciting times.

Download b3 of Adobe's HTML5 animation tool, Edge

HTML5

Features introduced in Edge Preview 3:

Preview 3 introduces interactivity capabilities for Edge, the most requested functionality thus far. The first set of interactivity features include looping, hyperlinks, access to the Edge animation framework API, and the ability to handle HTML DOM events – all within Edge.

Actions — The core of Edge’s interactivity capabilities, Actions are functions that can be added to handle a single event.

  • The Actions Editor uses a popup interface that lets you enter JavaScript code for a function.
  • A built-in code snippet library is available for commonly used functions like go to, stop, hyperlink, etc.
  • Add your own JavaScript code to add new flexibility to your compositions.
  • Where actions can be attached:
    • Elements to handle click events
    • Stage to access composition-level events such as “loaded”
    • Timeline to access playback events such as “complete”
    • Triggers to allow time-based actions to be applied in the timeline
    • Objects other than triggers allow you to select multiple events you wish to handle, each with its own action.

Labels — Insert labels on the timeline as reference points in your code, to enable functionality like playing or seeking to that point in the timeline.

See Adobe Labs for a list of additional enhancements, and to give your feedback as the app progresses.

Adobe HTML5 progress update

HTML5

To enable lighter, more scalable, more beautiful digital publications, HTML needs to improve to handle richer text layouts. I’m delighted to see that Adobe’s CSS Regions contributions have reached the WebKit mainline & Chromium releases, and that the IE10 preview also supports the standard. Here’s a 2-minute demo (cued up to the relevant part):

So far so good; but what else? Adobe CTO Kevin Lynch hints that we’ll learn more about Adobe HTML tools & strategies next week. Stay tuned.

Adobe Muse improves HTML output in Beta 3

HTML5

Adobe’s new “Muse” HTML authoring tool has attracted huge interest & while stirring up controversy about whether it’s possible for a visual tool to generate good code. Knowing that the team was working hard on improvements, I urged them to post details that might assuage concerns.  No, they said, let’s just do our jobs, then show the results.

Now the team has posted Muse beta 3 for download and has detailed the output-related improvements in this release. “The primary focus of code improvements in Beta 3,” they write, “are around cross-browser compatibility and reducing page load times and data usage.”  Other improvements around SEO & accessibility are in the works.

I think that people who care about high quality code output will be pleased with the progress, and I encourage you to give the team your candid feedback.

[Via Terry White]

Update: PM Dani Beaumont gives three minutes of perspective on the new release:

Download Preview 2 of Adobe's HTML5 animation tool, Edge

HTML5

The second public release of Adobe Edge features a range of user-requested enhancements:

  • Smart guides — Precision guide and dimension markers are displayed when an object on the stage is moved/resized, helping to align objects in relation to others.
  • Specify semantic tags on managed elements — Change the tag type of each shape, image and text in Edge to reflect appearance in the HTML document object model (DOM).
  • Copy and paste elements — You can now copy and paste elements in Edge, to easily duplicate shapes, images or text. Duplicate images will refer to the same underlying asset.
  • Align and distribute elements — Select multiple elements, and align and distribute them via new options in the Modify menu.
  • Drag and drop z-index manipulation — In the elements panel, you can now control the z-order of shapes, text and images created in Edge.
  • Playhead time editing — You can now type into the timeline’s counter to move the playhead to a specific location, or by dragging the numeric value up or down with your mouse.
  • Windows 7 update — An error on the Windows version causing Edge to crash on startup is resolved, no longer requiring users to change the display bit depth from 32-bit to 16-bit.
  • jQuery update — Edge’s animation framework now works with the latest jQuery 1.6.2.

 

Edge remains a work in progress, so as always the team is eager to hear your feedback (and to see what you can create).

Adobe HTML5 Camp coming to London

HTML5

The event is set for Thursday Sept. 8 at the Vue Cinema, Fulham Broadway in London. Registration for the NY event filled up almost immediately, so if you’re game I’d suggest signing up now.

  • 13:30 – 14:00 Registration
  • 14:00 – 14:15 Welcome and Opening Remarks – John Cole
  • 14:15 –15:00 The State of the Web – Jeremy Keith
  • 15:00 – 15:45 Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile – Greg Rewis
  • 15:45 – 16:00 Break
  • 16:00 – 16:30 Chrome Developer Tools – Paul Kinlan, Google
  • 16:30 – 17:15 Edge Demo – Mark Anders
  • 17:15 – 18:00 HTML5 interest speaker (TBA)
  • 18:00 – 18:15 Wrap-up – John Cole

Adobe Muse enables great Web layout, no coding required

HTML5

When’s the last time you wrote PostScript code to lay out a print page?  Seems like kind of a bizarre notion, doesn’t it?

With Web design, though, coding is taken for granted, and WYSIWYG apps have come and gone many times.  But why is it, in 2011, we don’t have an InDesign-quality visual design tool for the Web?

Enter Adobe Muse. The new app (built by InDesign vets) promises to let graphic designers (especially print designers) “create websites as easily as you create layouts for print.”  It’s free for download in beta form right now. Key features:

  • Planning — Use easy-to-use sitemaps, master pages, and flexible, site-wide tools.
  • Design — Combine imagery, graphics and text almost as if you were using InDesign.
  • Interactivity — Drag and drop fully customizable widgets (nav menus, slide shows, etc.) & embed HTML code snippets.
  • Publishing — Preview in Muse, then convert to a live website hosted by Adobe or the provider of your choice.

Mashable writes, “[I]n our tests, the code that Muse outputs is clean and readable.”

Here’s the team’s vision:

And here’s a more hands-on tour of the functionality:

 

See Adobe TV for a comprehensive set of videos to help you get started making great stuff–and please let us know what you think.

[More coverage & perspective is on CNET.]

Download Adobe's new HTML5 animation tool

Flash, HTML5, Mobile

I joined Adobe specifically to build a Web-standards-based animation & interactivity app. Great thought, but we were a decade off base about when browsers would actually be ready to play ball.

That time has come, and the company is today releasing the first preview version of Adobe Edge, a fast, lightweight way to add life to your sites. Feature highlights in this release:

  • Create new compositions with Edge’s drawing and text tools.
  • Animate position, size, color, shape, rotation and more at the property level.
  • Bring motion to existing HTML files while preserving the integrity of CSS-based HTML layouts. (Edge stores all of its animation in a separate JavaScript file that cleanly distinguishes the original HTML from Edge’s animation code.)
  • Copy and paste transitions, invert them, and choose from over 25 built-in easing effects.

Check out Edge in action:

Additionally, Adobe has launched The Expressive Web, a site showing off some of the cool stuff you can make modern browsers do, especially by using Adobe tools like Edge and Dreamweaver CS 5.5. Here’s a demo:

Lastly, I don’t want to get into any tedious “Flash vs. HTML5” blah-blah here, though I do see that angle still bubbling up on link-baiting sites.  For that reason it’s worth noting that both Dreamweaver & GoLive were pushing Web animation starting in the 90’s, that Adobe championed SVG early on, and that it has been a main contributor helping to improve jQuery and lots of other HTML/JS/CSS tech.  Point is, Adobe’s been driving both rich, animated HTML and Flash for 15 years, and the company will keep evolving both to address different customer needs.

Meanwhile, we hope you like what you see in Edge, and we’d be grateful for your feedback. (Oh, and if you create some cool stuff with it, please show off a link in the comments; thanks.)

Related resource: Devnet on HTML5

Google Swiffy converts Flash to HTML5

HTML5

Interesting: Google’s Swiffy project “converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).” The gallery includes some ads & simple games. According to the FAQ,

How is Swiffy different than Wallaby?

Wallaby is an installable tool that converts .fla files, whereas Swiffy is a web-based tool that converts .swf files. Wallaby focuses on reusing parts of a Flash file in HTML, and thus produces code that can be edited by the developer, whereas Swiffy generates an efficient format that is not that easily editable.

What does Adobe think of Swiffy?

Adobe is pleased to see the Flash platform extended to devices which don’t support the Flash player. The result is that anyone creating rich or interactive ads can continue to get all the authoring benefits of Flash Pro and have the flexibility to run the ad in the Flash Player or HTML depending on what’s available on the system. Google and Adobe look forward to close collaboration around efforts like these.

The whole point of what we do remains, as always, solving customer problems; specific formats & runtimes are just means to that end. Onward.

Come attend the Adobe HTML5 Camp

HTML5

Adobe’s hosting a free HTML5 Camp July 22nd in San Francisco:

  • 5:00 pm – 5:45 pm Food and Drink
  • 5:45 pm – 6:00 pm Welcome & Opening Remarks
  • 6:00 pm – 6:45 pm The State of the Web — Dion Almaer and Ben Galbraith from Ajaxian
  • 6:45 pm – 7:30 pm Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile — Greg Rewis
  • 7:30 pm – 7:45 pm Break
  • 7:45 pm – 8:15 pm Google Chrome Evangelist Topic Q&A
  • 8:15 pm – 9:00 pm Adobe Edge Demo and Open Discussion — Mark Anders and Doug Winnie
  • 9:00 pm – 9:45 pm Deconstructing an HTML5 Project start to finish — Big Spaceship Web Designer
  • 9:45 pm – 10:00 pm Wrap-up & Closing
According to the registration site, subsequent events are planned for in August 4th in Tokyo, August 5th in New York, and mid-October in Berlin.

Adobe's enriching CSS, WebKit

HTML5, Mobile, Tablets, Typography

HTML is great, but its text-layout limitations have always been a drag for print designers–particularly those now wanting to create tablet-based magazines. That’s why Adobe has been proposing to enhance the CSS spec & contributing to the WebKit browser project.
Now you can download a build & learn more about CSS Regions. According to the project page, key highlights of CSS Regions include:

  • Story threading — allows content to flow in multiple disjointed boxes expressed in CSS and HTML, making it possible to express more complex, magazine-style threaded layouts, including pull quotes and sidebars.
  • Region styling — allows content to be styled based on the region it flows into. For example, the first few lines that fit into the first region of an article may be displayed with a different color or font, or headers flowing in a particular region may have a different background color or size. Region styling is not currently implemented in the CSS Regions prototype.
  • Arbitrary content shapes and exclusions — allows content to fit into arbitrary shapes (not just rectangular boxes) or to flow around complex shapes.

Cool. (And do wake me when the Adobe-scourging Apple fansites pick up this news, won’t you?)
Update: To answer some questions I’ve seen, here’s some clarification I pulled from CNET’s coverage of the news:

“We’ve talked to everyone,” Gourdol said, noting that all the browser makers, though; all of the major ones are active in the CSS working group. They’re all very excited about it.
Next stop is getting the software accepted. Adobe has a team of 12 programmers [emphasis added] in the United States and Romania who work on WebKit, Arno said. Adobe hopes to build its CSS software into the browser engine, making it easy for Google, Apple, and others “downstream” of the central project to incorporate it into their actual browsers.
“Webkit is the most interesting area to focus right now because of its mobile presence,” said Paul Gubbay, vice president of engineering for Adobe’s design and Web group. “We’ll see if the [WebKit] community takes it.”

Adobe proposes CSS enhancements for richer layout

HTML5

When the InDesign-made Wired app for iPad first shipped, I saw a bunch of snide tut-tutting from Apple-oriented sites saying that of course Adobe should’ve “simply” leveraged HTML5, because that’s the ideal solution to everything.

Unfortunately HTML has never been known for its typographical richness* or control, and that’s why Adobe built a richer type engine for tablets derived from InDesign. Apple disallowed use of that engine via the Section 3.3.1 changes, and for visual fidelity the Wired project relied on generating bitmap images for each page.

The good news is that Adobe’s working to improve HTML to meet the demands of publishers, enabling HTML’s lightness & reflow chops to support more magazine-style layouts.  CSS Regions (proposal PDF) would enable things like text reflow around irregular shapes (screenshot). And it’s not just brave talk & wishful thinking: Adobe’s contributing layout code to WebKit (see previous article for demo & details), aiming to get adoption first on tablets.

It’s easy for armchair experts to tell the world how everything should be done; it’s harder to turn promises into reality.  I’m glad to see the latter happening.

[Via CNET’s “Adobe proposes standard for magazine-like Web” See also “So, what has Adobe actually done for HTML5 lately?“]

* TypeKit & similar efforts are helping, and they’ve got Adobe’s support as well.

"Wallaby" Flash-to-HTML5 conversion tool now available

Flash, HTML5

Adobe’s job is to help you solve problems, not to get hung up on one technology vs. another.

Millions of people have honed their Web animation skills in Flash, and now their customers want content that can run anywhere, including on non-Flash-enabled devices. Accordingly Adobe’s releasing “Wallaby,” an experimental Flash-to-HTML5 conversion tool. For now it’s aimed at WebKit-based browsers (notably Safari & Chrome):

The focus for this initial version of Wallaby is to do the best job possible of converting typical banner ads to HTML5. Wallaby does a good job of converting graphical content along with complex, timeline-based animation to HTML5 in a form that can be viewed with browsers using a WebKit rendering engine. Supported WebKit browsers include Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod).

Wallaby’s design goal was not to produce final-form HTML ready for deployment to web pages. Instead it focuses on converting the rich animated graphical content into a form that can easily be imported into other web pages in development with web page design tools like Dreamweaver.

The tool is new & presently limited (e.g. no ActionScript conversion), but the team welcomes your feedback on how it should evolve.

Having come here specifically to build standards-based Web animation software*, I’m delighted to see this release and a ton of other HTML5 initiatives from Adobe. As long as the company puts solving customer needs ahead of politics, I predict good things.

Update: Here’s the original demo from Wallaby’s sneak peek back in October:

* Back then, in 2000, we were assured that widespread SVG support was *riiiight* around the corner. Sometimes it takes a while for reality to catch up with on-paper standards; c’est la guerre.

Adobe & jQuery

HTML5, Mobile

While highlighting all the great stuff Adobe is doing around HTML5, I mentioned the company’s contributions to the popular jQuery JavaScript library. Now the folks involved have started a new blog to share interesting news:

jQuery Mobile–a touch-optimized UI framework for smartphones and tablets–is currently on its Alpha 3 release. We’re very excited about this project and have had one of our finest–Kin Blas–working closely with the rest of the jQuery mobile team since November. As a side note, Kin will be speaking about jQuery Mobile at a Bay Area Mobile (BAM) meetup in March. Highly recommended if you’re interested in getting an overview of the framework from one of its main contributors.

I’m really happy to see Adobe putting real skin in the game here, working to solve customer problems whether through HTML, Flash, video, or any other combination of technologies. It’s not about one runtime vs. another; it’s about results.

So, what has Adobe actually done for HTML5 lately?

HTML5

Oh, y’know, only little bits here and there. 🙂  Here’s a quick recap from just the last ~6 months. I’ve bolded/italicized the bits I find most interesting.

A beautifully done HTML5 book from Google

HTML5

Check out the company’s “20 Things I Learned About Browsers and the Web,” then check out some background info from the dev team:

We built “20 Things” in HTML5 so that we could incorporate features that hearken back to what we love about books—feeling the heft of a book’s cover, flipping a page or even reading under the covers with a flashlight. In fact, once you’ve loaded “20 Things” in the browser, you can disconnect your laptop and continue reading, since this guidebook works offline.

This is exactly the kind of thing that Adobe should help people create.  InDesign supports creation of similar content running in Flash, but runtimes are just means to an end. (I should note that this is just my opinion, and I’m not involved with digital publishing efforts.) [Via Scott Evans]

Microsoft enables Illustrator->HTML5 Canvas

HTML5, Illustration

How cool: Microsoft’s Mike Swanson has enabled Illustrator (CS3-CS5, Mac & Win) to export vector graphics as HTML5 Canvas elements. As former Illustrator PM Mordy Golding puts it,

Wouldn’t it be cool if you could generate great-looking and useful HTML5 content (with interactivity, motion, interaction, etc) DIRECTLY from Illustrator? Now you can — with a new FREE plugin for Illustrator.

Here’s a great 90-second demo (no embedding option I can discover, unfortunately). Now Illustrator can create SVG, CSS, and Canvas content, thanks to this plug-in plus the recently released Illustrator CS5 HTML5 pack. Way to go, Mike & Microsoft.
[Semi-pointless historical footnote: the plug-in brings back memories of Macromedia’s ancient Flash Writer plug-in for Illustrator (the system requirements for which still list Windows NT!). Here, I’ll make that same part of your brain twinge again: “DeBabelizer!”]

Adobe's enhancing WebKit for better typography

HTML5, Mobile, Tablets, Typography

I’m excited to say that Adobe’s working with Google to enable better HTML-based typography, contributing the work to the open-source WebKit project.

Why not just say “Web typography”? Because HTML goes beyond the Web, supporting apps like Adobe’s new tablet publishing solution.  Trouble is, for all its strengths (e.g. separating content from layout), HTML’s type handling has been pretty limited–especially for creating print-quality layouts.

Adobe wants to help solve the problem, making HTML better suited to more demanding applications.  Check out this demo from engineering VP Paul Gubbay:

Paul writes,

The team has taken the approach of extending CSS with a few new elements utilizing the webkit- prefix so that the designer can adequately describe their intent for the content as the page is resized to simulate working across different screens.  We look forward to working with the Webkit Open Source project and of course the W3C to contribute our work back in the most appropriate way.  And, as always your comments are very much appreciated.

Photoshop.com, Dreamweaver add HTML5 video playback

Flash, HTML5

I’ve seen some requests for Adobe TV to add HTML5 video playback support.  That’s indeed in the works, though I don’t have a schedule to share.

In the meantime, Adobe’s photo- and video-sharing site, Photoshop.com, has added HTML5 video support.  Here’s a random video* you can check out on play on any device that supports Flash or H.264-encoded HTML5 video.

Elsewhere, the Dreamweaver team has released the HTML5 Video Player widget.  The widget leverages both browser support & Flash Player as needed to ensure playback:

Code generated from the widget plays video in the best possible player for the requested platform using a range of video codecs. Based on the Kaltura open source library, the HTML5 Video Player widget is fully cross-browser compatible with support for Internet Explorer, Firefox, Safari, Chrome, and Opera. [Update: technical details here.]

 

I have to say, all this absurd zero-sum “Flash vs. HTML5 video” stuff makes me laugh (which is better than making me angry, as it used to do). [Background: H.264 isn’t an alternative to Flash]  Flash is a big reason that H.264 is ascendant, because by serving H.264 video, publishers can reach 98% of desktop machines through Flash, and reach non-Flash-enabled devices via HTML5.  Do you think we’d see that uptake if the content were viewable by only the <15% that use Chrome or Safari?  “Flash remains the dominant player within desktop environments,” and now viewers & publishers have more choices about how to use video online.  That’s all good.  (Er, I mean, it’s all bad and Flash is doomed; sorry, I went off script there for a minute.)

At the end of the day, you want to watch what you want, on whatever device you want. Through its publishing tools, servers, and players, Adobe’s working to get you what you want.

 

*In case you’re curious, Photoshop.com PM Jordan Davis was decorating his baby son’s room & experimenting with time lapse creation.

 

 

Adobe demos Flash-to-HTML5 conversion tool

Flash, HTML5

Where there’s pain, there’s opportunity.
Pre-Adobe, I made my living building rich, Flash-intensive sites for Gucci, Coca-Cola, Nike, and other big brands. Doing that job today, I’d be in a jam: How could I create rich experiences that run on desktops (where Flash is the obvious, consistent (cross-browser/-platform) choice) and on iOS devices where Flash isn’t allowed? I’d have to create two versions of a everything–one Flash, and one HTML5*. Good luck getting clients to double their budgets, though, and yet they don’t want richness cut in half.
So, the opportunity: Cut the cost of targeting multiple runtimes & we’ll deliver real wins: more richness for clients, and a competitive advantage for customers.
Check out what engineer Rik Cabanier showed (just a tech demo, no promises, etc.) during MAX sneak peeks Tuesday night:

 

[You can skip the last minute–unless you happen to want to glimpse William Shatner watching the demo.]

 
Are you surprised? Don’t be. As I’ve written many times, Adobe lives or dies by its ability to help customers solve real problems. That means putting pragmatism ahead of ideology.
Flash is great for a lot of things, and this week’s demos showed it’s only improving. It’s not the only game in town, however, and Adobe makes its money selling tools, not giving away players. Let’s help people target whatever media** they need, as efficiently as possible.

 
* Someone will probably start quibbling with the use of “HTML5” as a stand-in for SVG, CSS3, Canvas, etc. I know, I know. I use the umbrella term in the loose, commonly understood sense: “Flash stuff without Flash.”
** Historical fun fact: Flash Professional used to export Java, as that was the relevant runtime of the day. Tools evolve to meet viewer demands.
Final footnote/disclaimer: I don’t work in the Flash group, so all this just represents my take on what’s possible. Your feedback is of course most welcome.

Eye-roll o’ the day

HTML5, Uncategorized

In response to Adobe demoing a new HTML5 authoring/animation tool, I’ve seen a few comments like this:

“Adobe could have been pioneering this about 6 years ago, but better late than never!”

Here’s the thing, guys: I came to Adobe ten years ago specifically to build a Web-standards-based animation tool, LiveMotion, because we were told that ubiquitous browser support for SVG & more was right around the corner.  And even before that, Macromedia and Adobe had both deployed timelines (in Dreamweaver and GoLive) for animating with JavaScript, DHTML, SMIL, etc.  Point is, some of us have been working for a long time to make things better, and it’s nice to see browsers* making such efforts more viable.

So, please excuse me if I get a little peevish in response to some of the righteous finger-wagging.  Thanks for your understanding.

*By the way, speaking of finger-wagging, Adobe isn’t just waiting for browsers to get better. More on that in a bit.

Illustrator CS5 gains HTML5 chops

CS5, HTML5, Illustration

Double rainbow ‘cross the sky, oh my God, so intense... Wait, that’s something else–but this is pretty great, too: the Illustrator team has just released the Illustrator CS5 HTML5 Pack, downloadable from Adobe Labs.  Highlights include the ability to:

  • Export named character styles as CSS
  • Export artwork appearances as CSS
  • Include selected Graphic Styles as CSS in SVG
  • Create parameterized SVG (vector graphics tagged with variables)
  • Create multi-screen SVG (leveraging media queries to serve up design variations)

See the download page or Mordy Golding’s nice summary for more details. You can ask questions & provide feedback on the Labs user forum.

I’m curious to see whether this news makes it onto the Mac sites that’ve beaten Adobe up for a perceived lack of enthusiasm about HTML5 (tough, as it just doesn’t fit that sterile, stupid narrative).  The funny thing is that these changes build on the SVG support that Illustrator has been shipping for ten years.  Sometimes it just takes a while for the world to catch up.

Adobe CTO Kevin Lynch wasn’t kidding when he said, “We’re going to make the best tools in the world for HTML5.” These Illustrator developments have been in the works for a while; Dreamweaver has just made its HTML5 Pack for CS5 official; and you’ll see more from Adobe going forward.

Update: Here’s a demo from evangelist Greg Rewis:

SlideShowPro does HTML5, Flash

Flash, HTML5, Mobile, Photography

Todd Dominey & co., the makers of the excellent Flash-based SlideShowPro, have created a visually rich alternative version that uses HTML5 instead of Flash.

This is a good thing.

Why?  Because it’s putting customers ahead of technologies, and it’s using both Flash & HTML to maximize viewers’ ability to see rich content, including on i-devices.  As the site explains:

SlideShowPro Mobile is an entirely new media player built using HTML5 that doesn’t require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But it’s not just any fallback — it’s specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application that’s intuitive, easy to use, and just feels right. [Demo]

I’d love to see this support added to the Lightroom version of SlideShowPro, as I rely on it for all our family shots.  I want to generate two presentation layers (one Flash, one HTML) that both provide a rich, beautiful presentation of the same image files, and I want the gallery to auto-select the correct presentation layer based on viewers’ devices.  Make the whole tedious Flash-vs.-HTML thing a non-issue for customers.

“CSS is the new Photoshop” (?)

HTML5, Uncategorized

Shawn Blanc hit on a great, if perhaps deliberately overstated, phrase on Monday that pegs an important trend: Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.  He points to impressive iOS icons from Louis Harboe among other examples.

He’s not alone: Håkon Wium Lie from Opera predicts that CSS3 could eliminate half the images used on the Web.  You can use various graphical tools to generate things like CSS gradients and rounded corners.  As people can do more and more in code, it makes sense to ask whether even to use Photoshop in designing Web content.

I think Adobe should be freaking out a bit, but in a constructive way.

HTML’s new graphical richness means great opportunities to generate efficient, visually expressive content.  “What is missing today,” says Michael Slade, “is the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Of course, this is far easier said than done.  As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.”  Over the last 15 years, innumerable smart people have tried and failed to make WYSIWYG HTML design tools whose output got respect. And yet it strikes me as unreasonable to say, “Spend a bunch of time perfecting your design in PS/AI, then throw it all away and start again!”

As for Photoshop, we could either teach the app to speak HTML natively (via live HTML layers), or we could translate Photoshop-native artwork into HTML (e.g. “copy this button/text as HTML/CSS”).  It’s not yet clear to me, however, how such code would smoothly integrate into one’s projects.

At the moment I have more questions than answers.  If you have ideas on the subject, please lay ’em on us.

[Note: Ideas need not include, “Put your heads in the sand and say that people simply have to switch from Photoshop/Illustrator to Fireworks.”  FW is a great app, but that suggestion is a non-starter.]

YouTube talks Flash and HTML5

Flash, HTML5

The folks at YouTube have put up an informative post about why, despite positive advances in what browsers support, “Adobe Flash provides the best platform for YouTube’s video distribution requirements.”

Of course, Flash is at death’s door, right?  I suppose you didn’t hear that ESPN just streamed the US-Algeria World Cup match via Flash to “the largest U.S. audience ever for a sports event on the web,” with 1.1 million unique viewers.  Through 14 days of World Cup coverage, 5 million viewers have watched the World Cup on ESPN3.com and consumed more than 9.2 million total hours.  Somehow the Mac sites fail to notice these things.  (Actually, that few people notice is a good thing: billions of times a month, Flash just works.)

I’m sure someone will point out that Hulu will be streaming video to iPads without using Flash as the presentation layer, so now Flash is screwed, haw haw.  In that case, let me repeat what I said a few months ago:

John Gruber wrote the other day that “Hulu isn’t a Flash site, it’s a video site. Developers go where the users are.” Well sure, of course they do. Flash is a means to an end for Adobe, too, not the end unto itself.

The folks at Hulu, like those at YouTube, are pragmatists.  They’ll use whatever delivery mechanisms, presentation layers, etc. they need to reach the most eyeballs.  On desktops Hulu prefers Flash, for the same reasons YouTube cites.  (Even if more than 13% of the audience could play back H.264-format video on their desktops without using a plug-in, the browsers are lacking in content protection & other vital areas.)  On mobile devices, Flash Player’s support for H.264 (and later VP8) makes it easy to use an alternate player to display the same video files.

I’m not saying all this to rile people up.  I just get tired of all the uninformed rah-rah triumphalism out there, so I thought I’d help share some real-world perspectives.

Beautiful HTML5 slides on Web design

HTML5, Illustration

My friend Matthew Richmond from Chopping Block has posted a beautifully designed slide deck on “Web Design Concepts for Non-Web Designers.”*

In this case the medium is much of the message: the slides demonstrate what can be done with the (relatively) rich typography, positioning, and transitions supported in modern browsers. It’s great to see custom fonts, rotated type, and more getting used for real, but I want to see Adobe tools enable much easier, higher fidelity support for these standards. The print designers who approached Matthew after his talk reinforced this point: We know how to design, they said, and we like our tools–but how do we transition those designs to clean Web output?

There are plenty of interesting challenges here. Translating between formats and rendering models is tricky, and much more so when the destination format is human readable/editable. Almost no one would look inside, say, an EPS file and harrumph, “Well, that’s not how I’d write PostScript”–but they absolutely do that with HTML. Even if apps generate the code well, it’s hard to know how to blend it with the coding styles of each user. But hey, no one ever said progress was gonna be easy.

* “There’s nothing more magical than a robot riding a unicorn.” — Quote o’ the week