January 23, 2014
Check out new responsive Web design features in Adobe Edge Reflow
These top requested features are now here: add form elements (buttons, text inputs, selects, checkboxes, radio buttons), links to multipages, view hover, active and focus state and more. Plus, we’ve made visualization easier with our new insertion caret. No more guesswork!
Check out this series of quick getting-started videos, or zero in on just the new stuff here:
January 21, 2014
New HTML5 animation chops come to Creative Cloud
- Audio support: Import and sync audio files with animation playback or user interactions
- Responsive animations: Apply scaling or percentage-based layouts to fit mobile and desktop screens.
- Script loading: Integrate 3rd-party libraries like Greensock or jQuery UI for extended capabilities.
Here Paul Trani shows how to add audio, scripts & responsive scaling:
January 10, 2014
Demo: Create fluid, responsive web pages in Dreamweaver
Check out how Dreamweaver’s Fluid Grid layout can create a responsive web design that adapts to different screen sizes.
December 10, 2013
New HTML coding goodness from Adobe
Check out the Bézier Timing Editor & more in the new Edge Code CC:
- HTML Live Development, including live preview which enables users to see HTML and CSS edits immediately in the browser without having to save or reload. Users can see results instantly making it easier to experiment and quicker to get results.
- CSS Quick Edit makes it easy to jump from an HTML file into a new CSS file to make changes to the CSS. Now, you can also add entirely new CSS rules without leaving the context of the HTML file you’re working on.
- The new CSS Bézier Timing Editor gives you the exact transition and animation effects you want through visual changes, rather than working with a string of numbers.
- Preview images within the editor. Your image will be displayed along with file size and dimension info, giving you the ability to incorporate image files into your project more easily.
- Plus additional enhancements and ongoing code improvements.
Check out a quick demo from excellently-’stached PM Jonathan Dunlap:
October 24, 2013
Introducing Snap.svg: Open-source JS library for SVG graphics
“Flash, schmash: SVG’s clearly the future.”
That’s what I thought as I joined Adobe back in 2000 to build an SVG animation tool. Unfortunately we were 10+ years ahead of the market (specifically of Web browser support)—and as Marc Andreessen says, “Being early is the same as being wrong.”
Things have progressed, though, and once again Adobe is working hard to make SVG adoption more widespread. Check this out:
In the height of the Adobe-Apple conflict three years ago, I wrote, “Adobe isn’t in the Flash business,” and this is what I meant: We get paid to help you solve problems, and things like Flash, SVG, PDF, H.264, whatever are just implementation details—means to that end. The richer & more expressive we can make the Web, the better the tools we can build, and the happier, we hope, you and your clients will be.
September 19, 2013
Build HTML5-based extensions for Photoshop, more
Flash will be out & HTML5 is in as the cross-app, cross-platform foundation for extending Creative Cloud apps:
When Creative Cloud was launched in June 2013, we added support for HTML5-based panels in several Adobe products… Since June, support for HTML5-based panels has been added to more Adobe products. As of now Photoshop CC, Illustrator CC, Premiere Pro CC and Prelude CC support HTML5-based panels.
A preview of Adobe Extension Builder 3, a new developer tool that supports creating HTML5-based extensions, was launched in June at Adobe Labs.
Starting in the middle of 2014 we will begin removing Flash-based extension support in Creative Cloud products, starting with Photoshop CC. We encourage all developers to start planning and migrating to the new extensibility framework based on HTML5.
Here the excellently named Hallgrimur Th. Bjornsson shows how to create a couple of panels. You can follow more from his team via their blog.
September 10, 2013
Photoshop CC -> Adobe Reflow: Responsive Web design
Take two minutes & check out how the newly released Generator technology for Photoshop CC helps you kickstart a responsive Web layout in Adobe Edge Reflow:
If you’d like a more detailed look, check out this tour from Terry White:
August 27, 2013
Dreamweaver gets Live Highlights, a new rendering engine, & more
Dreamweaver CC has “integrated a brand new rendering engine, which displays web content with the same performance and HTML5 technology support available in Google Chrome™. Now you can spend more time in Dreamweaver CC and less time switching in and out of the browser to test your content.”
The new Live Highlight feature
enables you to visualize the relationships between the HTML elements in Live View and applied CSS selectors. Inspect and highlight elements in Live View in real time while you interact with the CSS Designer. Simply hover and click Selectors in the CSS Designer to see Live Highlight in action.
Perhaps obviously by now, this is a free update for Creative Cloud members.
August 15, 2013
Adobe Muse adds scroll motion effects, more
Adobe’s visual HTML authoring tool gets new features, free for Creative Cloud members to download:
Now designers can:
- Experiment with scroll motion effects quickly using the new Scroll Effects panel
- Make long, single page sites easier to navigate
- Have confidence that sites with scroll motion effects will work more smoothly on tablets and smartphones, including iPhones and iPads
With over half a million websites created with Adobe Muse, there are a lot of great ideas for inspiration to get started. Visit the Adobe Muse Site of the Day to see some of the more engaging sites Adobe Muse users are creating.
August 08, 2013
New Adobe HTML5 tooling updates
Looks like good stuff:
- Edge Reflow CC. Create and manage responsive comps for your entire site with new support for multi-page web designs.
- Edge Code CC. Test content across devices with new Edge Inspect CC integration, and get access to your favorite Kuler themes as you code.
- PhoneGap Build. Extend the functionality of your mobile app with third-party plugins.
You can grab the updates from creative.adobe.com.
May 09, 2013
“Adobe Love” from Jeffrey Zeldman
After admitting that he’d viewed Adobe as a company “slowly leaking relevance… like a beloved but somewhat shameful old uncle,” Jeffrey Zeldman (one of the most respected voices in Web design & standards, in case you didn’t know) writes about how attending this week’s MAX event spun his perceptions 180º:
Every Adobe employee I saw seemed to be excited, happy, and on-board with the mission. I see that kind of energy at good startups and small studios. I never see it in big corporations. It sometimes seemed to me that Adobe hadn’t so much acquired Typekit as the reverse…
I never expected to see that in my lifetime, and to me, it is even more impressive than the amazingness and realism of the new product line or the transformation of the company from a shrink-wrapped product manufacturer to an inventor of cloud-based services. I never expected to see people like us running companies like that.
It makes me feel good about the future, when so many other things conspire to make us feel the opposite.
Obviously there’s a wide range of reactions to Adobe’s moves to Creative Cloud. I’m glad to see such a strong, positive response from a thought leader from the design community.
April 17, 2013
New tools for making responsive HTML from InDesign
Last month, we added support for InDesign’s native Liquid Layout, allowing for a single, responsive design in HTML5, as well as support the Baker Framework (which is an open source ebook format for iOS devices).
This week, we’ve added support for Multi-State Objects, Form Elements, and several additional Button behaviors, allowing a user to create an enormous amount of interactivity from InDesign.
April 02, 2013
Download Edge Reflow Preview 2
Adobe’s new tool for responsive Web design (layouts that change based on how they’re being viewed) has been updated. Jacob Surber shows you the new improvements:
Sneak peek: Dreamweaver.next
Check out the new CSS Designer:
The CSS Designer delivers cutting-edge CSS features in a new visual interface that works with CSS properties — gradients, box shadows, and media queries. It also gives you the ability to visually apply and set different media queries for web content to be presented in different sized media!
February 27, 2013
Adobe Muse keeps improving
Adobe Muse, the new visual HTML creation tool, has gotten a raft of much-requested new functionality, including hierarchical master pages, widget updates, and a new spellchecker. Check out the details here, and apply the update simply by opening Muse and clicking “install now” from the updater screen.
February 15, 2013
Come download Reflow, Adobe’s new responsive-Web design tool
“Photoshop speaks a fundamentally different language from the web,” writes PM Jacob Surber. That’s great for many things, but Adobe’s new Edge Reflow—available to download now, for free—takes a different approach, creating designs that present themselves differently depending on device (phone, tablet, desktop):
Focus on standards: Reflow will ONLY enable designers to create experiences that are compatible with the web. In some situations this can be limiting, but as the capabilities of the web changes, Reflow will evolve as well. Adobe has committed to contributing and advancing web standards. Our goal is to integrate that work, as experimental features, in our web tools such as Reflow.
Check out a quick tour:
[Update: An overview from Forbes concludes, "None of these tools design the site for you, and they don’t address the engineering issues that I mentioned above, but they sure make the multi-screen design process a lot more accessible to a lot more designers. Someone deserves to be knighted for that!"]
Adobe delivers new HTML5 animation chops
Adobe Edge Animate 1.5 has arrived, bringing support for CSS filters & gradients that can be animated, plus enhanced Web font support (powered by Typekit). You can download it here, and check out the details in this blog post and in the demo below:
February 02, 2013
Combining citizen video journalism with HTML5
UC Berkeley’s interesting Rashomon Project is billed as “An Online Toolkit for Assembling Multi-Perspective Chronologies.” In other words, it takes multiple videos, auto-aligns them (by analyzing their metadata & audio signatures), and presents them via an HTML5 interface. “Our goal,” they say, “is to allow the public (potentially hundreds of thousands of viewers) to gain a much better understanding of contested events from user-generated photos and video than is currently possible.” Here’s their 1-minute demo video.
Update: By coincidence I just discovered that Andy Baio synchronized TV coverage of a car chase with man-on-the-street footage of the same broadcast & chase:
January 29, 2013
Friday Demo/Q&A: Rich, Responsive Web Design and Animation
Learn what Edge Animate and the Creative Cloud can do for you, this Friday at noon Pacific:
December 17, 2012
in5: InDesign-to-HTML tool now available
November 20, 2012
Adobe’s HTML5 tour: Upcoming cities & dates
Adobe’s Web experts are traveling around the US, China, India, Mexico, Chile, and Brazil over the next month, showing how the company’s advancing Web standards & tooling. Check out html.adobe.com for dates & details.
November 13, 2012
Typekit needs a PM, Rails engineer
October 11, 2012
HTML5: Announcing WebPlatform Docs
Adobe has teamed up with Apple, Facebook, Google, HP, Microsoft, Mozilla, Nokia, Opera, and the W3C to deliver the new Web Platform Docs (WPD) on webplatform.org. WPD aims to become “the most comprehensive and authoritative resource for web technologies on the planet.” And to enable everyone to contribute, WPD is implemented as a wiki.
Here’s a bit more info from Adobe engineering manager Arno Gourdol.
October 05, 2012
HTML5: Adobe’s Contributions to the Web Platform
Vincent Hardy, director of the Web Platform Group, talks about enabling better effects and interactivity, authoring surfaces, and creating mobile apps with web standards.
October 03, 2012
Get started in Adobe’s open-source HTML editor, Brackets
The new Edge Code product is built on an open-source effort called Brackets. Check out some key features:
October 02, 2012
New Dreamweaver features for Creative Cloud members; demo/Q&A Friday
Dreamweaver CS6 just released a major update via our Creative Cloud. Learn about the enhanced HTML5 support for Forms and Semantic tags, integration with Edge Animate, and the ability to easily insert HTML audio and video into projects. Plus, meet our new DW Product Manager, Alejandro Gutierrez. Bring your Dreamweaver questions! Join us Friday (10/5 at 12 pm PT).
Here’s a taste of the new functionality in action:
September 28, 2012
Demo: Edge Reflow for responsive design
PM Jacob Surber describes Adobe’s view of how Web design is changing, then demos how we can help you build responsive layouts for multiple screen sizes:
September 25, 2012
Adobe introduces Edge Web Fonts
Edge Web Fonts gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. The fonts are served by Typekit, so you can be sure of high performance and stability. Plus, it’s free!
Learn all about it (and about how Adobe’s releasing new open-source fonts, working to improve the quality of fonts created by others, and more) on the Typekit blog.
September 24, 2012
Adobe unveils a new responsive design tool, Edge Reflow
Edge Reflow is coming soon, enabling designs that change in response to varying screen sizes (phone, tablet, desktop, etc.):
Create responsive layouts and visuals with standards-based CSS. Edge Reflow offers an HTML-based design surface, enabling web designers to accurately and confidently realize their visions throughout design and development.
Check out a sneak peek:
September 19, 2012
New Adobe HTML5 announcements due Monday
On Monday Sept. 24 Adobe will be hosting a free, full-day event for web designers and developers who want to learn more about the latest techniques to create content for the modern web. The event will kick off with a keynote where Adobe will introduce new web tools and technologies followed by in-depth sessions around HTML5, CSS3, motion graphics, and more.
The keynote will feature Jeff Veen (Typekit, etc.) and others starting at 10am event Pacific time, and it’ll stream live on html.adobe.com.
September 06, 2012
Atari uses Flash Pro to make… HTML5?
The job’s never been about Flash per se; it’s been about helping people express themselves & solve problems. Flash Professional (the authoring tool) is a great way for animators to create assets for multiple runtimes (HTML or Flash Player):
The project involved creating multitudes of animated assets to create touch-friendly games with rich content. Yes, you guessed it right, Flash Professional CS6 along with the Toolkit for CreateJS extension and some custom JSFL was used to carry out this mammoth task of preparing assets.
Here’s more info.
September 03, 2012
HTML5 animation session tomorrow
The Adobe Edge Animate team is doing a live presentation/Q&A tomorrow, Tuesday the 4th, at noon Pacific:
Join our Ask a Pro next Tuesday to get an up close and personal look at what’s new in Preview 7. Our fearless Product Manager Sarah Hunt will cover new features like resizable layouts, enhancements to the timeline and stage, and much more. Sarah will also show you how to add interactivity to your compositions, as requested by our fans.
August 27, 2012
Yet more Adobe HTML goodness: New Muse, Shadow releases
- Release 4 of Adobe Shadow, which helps you preview & inspect content across your devices, is available from Adobe Labs. The release offers a range of improvements, and Shadow now lives in the menu bar on OS X and the task bar on Windows. Check out the team blog for more info.
- Adobe Muse (visual page creation, no code required) has been updated to enable creating interactive forms. Check out the video below for a tour.
August 21, 2012
Edge Animate preview 7 arrives
Adobe’s HTML5 animation tool has just released preview release 7, available for download from Adobe Labs. Key improvements:
Resizable Layouts: Enable your compositions to adapt to multiple screen sizes.
Rulers and Guides: Design with more accuracy using on-stage rulers and draggable guides.
Shadows: Apply and animate text and box shadows for richer effects.
Adjustable Timeline Grid: Gain greater animation precision by adjusting the time granularity where the playhead snaps.
Enhanced Text: Create multi-line text and control leading, indentation, and spacing with added text properties.
And that’s just the tip of the iceberg. Check out the features page for a full list of improvements, and watch this tour from product architect Mark Anders:
August 20, 2012
Illustrator HTML5 Canvas Exporter-In Updated for CS6
Developer Mike Swanson has rewritten his plug-in (used to turn Illustrator artwork into HTML-native Canvas code) to be 64-bit native & thus run inside Illustrator CS6. Download it here, or for a refresher on what it does, check out the earlier introductory video.
August 10, 2012
HTML5: A closer look at CSS blending
Adobe’s bringing Photoshop know-how to Web standards, helping drive the design & implementation of blending modes in CSS. Engineer Rik Cabanier discusses the topic, providing examples & sample code, on the Adobe Developer Connection.
July 31, 2012
New Kickstarter project: InDesign to HTML5
Here are just a few of the ways in which our product will differ from the existing HTML export feature:
- Layout. Element positioning will be maintained.
- Format. Up-to-date HTML will be used (rather than an older version).
- Font embedding.
- WYSIWYG. No programming knowledge will be required to adjust the final layout.
- Built-in page navigation (if desired).
- Master page content will be included.
Check out the project page for more details.
July 30, 2012
See Flash get good at making HTML5
Live demo/Q&A, Friday at noon Pacific:
Senior Product Manager Tom Barclay will show you powerful new capabilities in Adobe Flash Professional CS6, including the Toolkit for CreateJS extension that lets you easily convert Flash content to HTML5. Join us and learn what’s new, as well as interacting with the pros from our team.
July 26, 2012
Adobe Powers BBC’s Olympics Coverage
“Wait, what the heck is ‘Project Primetime‘?” – probably nearly everyone who reads this blog
Glad you’re said to have asked: It’s an end-to-end toolchain that links Adobe streaming, DRM, ad serving, audience management, analytics, and optimization. The tools rapidly convert live video into on-demand content. Besides streaming via Adobe tech, the content is being delivered through a new HTML5 app built with Adobe PhoneGap. Jolly good!
Check out the video team’s blog post for more details.
July 11, 2012
HTML5 animation demo/Q&A this Friday
Interested in adding HTML5 motion and interaction design to your creative arsenal? Learn about Adobe Edge preview, a powerful tool to create animated and interactive HTML5 content. With new SEO upgrades and publishing improvements, see how easy it is to start creating HTML5 content. Join us this Friday, 10:00 AM PT (new time). Register here.
July 04, 2012
Pixel Bender discontinued in PS, AE CS6
In CS6 the Photoshop & After Effects teams have decided to move away from enabling the Pixel Bender language for writing imaging filters. The popular Oil Paint effect has been brought into Photoshop CS6, but the Pixel Bender Gallery plug-in will no longer be offered on Adobe Labs.
Pixel Bender is very cool technology, but it just didn’t get widespread adoption from developers, and it’s important to focus dev efforts. This step frees up Adobe’s graphics whizzes to help bring GPU-accelerated filters to everyone via CSS shaders, like this:
July 03, 2012
Come help Adobe make HTML more awesome
Adobe on HTML5: “We’re trying to go beyond what you can do with Flash.”
Cool, right? Flash is & was always just a means to an end (helping people express themselves, and making money selling tools to do so). Adobe continues to pour manpower into bringing Flash innovations (hardware-accelerated filters, better typography, etc.) to HTML. Check out CNET’s interview with engineering manager Arno Gourdol for more details for what we’re doing with blending modes, SVG, and more.
Oh, and if you want to help us move things along, see my next post.
June 27, 2012
HTML5 animation: Edge session this Friday
Raghu Thricovil and Sarah Hunt, experts from the Adobe Edge team. This session is intended to introduce Adobe Edge, its features and outline how Edge can make your HTML5 motion and interaction design simple and powerful.
June 25, 2012
Adobe introduces Brackets, “A free, open-source code editor for the Web”
Think Adobe’s just about Dreamweaver & Flash?
The new Brackets app offers inline editors & tight browser integration:
Today we’ve all gotten used to doing the save-reload-copy-paste dance… Brackets opens a live connection to your local browser and brings some of those in-browser tools back into the editor where it makes sense. When Live File Preview is enabled your browser shows real-time changes to CSS classes and properties as you type. Because the code lives in your editor but runs in your browser there is no need to save-reload-copy-paste. w00t!
May 26, 2012
Demo: Making HTML5 animation for iPad apps
What’s new in Edge Preview 6? Check it out:
Here’s a tutorial specifically on putting HTML animation into tablet publications Adobe’s Digital Publishing System.
On a related note, here’s how to convert a multilayer Illustrator document to SVG format for use by Edge:
And if you’re new to all this, see also a demo on getting started with Edge.
May 10, 2012
Download the new Adobe Edge preview
Adobe’s new HTML animation tool, Edge, has just released preview 6. Improvements include:
- Built-in lessons: Six new tutorials are built right into Edge, to help new users get familiar with the basics.
- Coding: A new code panel provides a complete view of the actions code in a composition, and the code editor has a new full code mode.
- Publishing: Projects can be published into DPS or iBooks formats. There’s also a new Static HTML Markup feature for SEO benefits, and Google Chrome Frame support for better fidelity on non-HTML5 browsers.
- Symbols: Users can now copy/paste and import/export symbols from one project to another.
- Languages: Edge is now available in French, German, Japanese, Italian, and Spanish.
- Other cool stuff: The Preview in Browser function is now compatible with Adobe Shadow, auto-keyframe mode has been improved, editable time codes are back, and so much more to make Edge more efficient.
April 12, 2012
Look at the great stuff Adobe’s putting into WebKit
Seriously, look at it: Blending modes, better typography, Web inspector improvements, lots of CSS Regions improvements, a WebKit HUD in Dreamweaver, and more–and that’s all in the course of three days. (Boy, Adobe sure is stuck in a Flash-only mindset…)
April 09, 2012
Adobe’s working on blending modes for HTML
“The better the web, the better tools we can build, and the happier our customers.”
Well, okay then: now Adobe’s helping bring Photoshop-style blending modes to HTML. The work can enable more beautiful, flexible pages & higher fidelity hand-off from design tools like Photoshop & Illustrator.
A couple of years ago we heard that “CSS is the new Photoshop.” It’s a deliberate overstatement, but the underlying point is true: One can make more & more graphically rich, flexible elements using just markup, not bitmaps. We find that exciting for customers & for the future of Adobe tools.
[Via Narciso Jaramillo]
March 31, 2012
Design HTML5 visually with Adobe Muse beta 7
Generating lots of excitement, and getting better with each rev:
With this Beta 7 release, you can expect incredible improvements to performance and a significantly more streamlined workflow for previewing and publishing your sites, plus a host of bug fixes and enhancements. Muse will also be part of the upcoming Creative Cloud Membership! For a complete list of updates, visit the Muse Beta 7 blog post.
March 30, 2012
Creating HTML Canvas content with Flash Pro
And here Christian Cantrell goes into a bit more depth around things like sprite sheets:
March 19, 2012
CSS Regions: One Year In
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.)
March 13, 2012
Interview: Adobe inside the CSS Working Group
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).
March 12, 2012
Adobe Edge (HTML5 animation) Preview 5 is available
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.
February 19, 2012
Adobe HTML5 animation survey
The Edge team would like to hear your perspective on the relative importance of supporting older browsers, etc. If the subject is important to you, please fill out this quick survey. Thanks.
February 08, 2012
Adobe Muse (visual HTML authoring) gets updated
February 06, 2012
Demo: Adobe HTML apps working together
Mike McHugh wireframes a mobile site using Adobe Proto & opens the HTML output in Adobe Edge to add animation. He then creates some SVG graphics in Illustrator, applies animations, and roundtrips the graphics back to Illustrator. (Skip past the first minute.)
January 30, 2012
Adobe Edge preview 4 supports Web fonts, symbols, more
Adobe’s HTML5 animation tool gets beefed up with a host of new features in Preview 4, available now. Here’s a demo from Mark Anders:
January 09, 2012
InfoWorld names PhoneGap 2012 Technology of the Year
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.
December 28, 2011
Video: New features coming to Adobe’s HTML5 animation tool
Here’s a preview of Adobe Edge beta 4, due in January:
December 10, 2011
Adobe’s sticking with Flex, investigating HTML5, for CS extensibility
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.
December 01, 2011
“HTML5 Now and Next” event in SF Monday
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
November 16, 2011
Video: Make HTML5 animations interactive in Edge
Check out this brief tour, then grab yourself a copy of Edge.
Google: “Flash developers: Export to HTML5 with new Swiffy extension”
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]
November 14, 2011
Check out Flash Pro generating 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.
- 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.)
November 09, 2011
“Flash to Focus on PC/Mac Browsing & Mobile Apps; Adobe to More Aggressively Contribute to HTML5″
Adobe VP Danny Winokur has published an official piece on how Adobe is pushing hard on HTML5 for mobile Web browsing, discontinuing work on Flash Player for mobile. I’m not an official Adobe spokesperson, and I don’t work on Flash, so please direct any comments to Danny’s post.
November 04, 2011
Adobe Muse Beta 4 ready for download
Adobe’s new visual HTML authoring tool, Muse, has been downloaded by more than 330,000 designers (!) since it debuted in August. Now it’s been revved to version 4. Key features:
- Over 40 product enhancements and bug fixes, driven by Muse user community feedback
- Support for 5 additional languages: French, German, Spanish, Swedish, and Dutch
Check out the team blog for a full list of improvements & bug fixes.
October 27, 2011
Sneak Peek: InDesign liquid layout
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.
October 11, 2011
CSS shaders: Hell yeah.
“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.
October 07, 2011
Download b3 of Adobe’s HTML5 animation tool, Edge
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.
- A built-in code snippet library is available for commonly used functions like go to, stop, hyperlink, etc.
- 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.
September 29, 2011
Adobe HTML5 progress update
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.
September 26, 2011
Adobe Muse improves HTML output in Beta 3
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:
September 12, 2011
Swiffy Flash-to-HTML5 converter updated
Speaking of HTML5 tooling, Google has updated Swiffy, the experimental (and open source) Flash-to-HTML5 converter:
Download Preview 2 of Adobe’s HTML5 animation tool, Edge
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).
August 24, 2011
Adobe HTML5 Camp coming to London
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
August 17, 2011
HTML5, Flash, 3D meetings in SF this week
August 16, 2011
Adobe Muse enables great Web layout, no coding required
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.
August 02, 2011
Adobe Edge Hits 50,000 Downloads in First 24 Hours
August 01, 2011
Download Adobe’s new HTML5 animation tool
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.
- 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
June 28, 2011
Google Swiffy converts Flash to 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.
June 22, 2011
Preview: Adobe’s HTML5 animation tool
A preview of Adobe’s HTML5 animation tool, codenamed Edge, will soon be available for download from Adobe Labs. In the meantime, PM Doug Winnie gives a quick tour of some upcoming features.
Come attend the Adobe HTML5 Camp
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
June 06, 2011
CNET: Adobe’s Web design work lands in WebKit browser
I mentioned last month Adobe’s endeavors to make HTML more suitable for magazine-style layouts via the CSS Regions spec. Now I’m happy to see the code making its way into WebKit proper. Hopefully we’ll next see it appear on tablets & phones, giving designers & publishers efficient new layout power. Onward.
May 18, 2011
Adobe’s enriching CSS, WebKit
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.”
March 15, 2011
Adobe proposes CSS enhancements for richer layout
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.
* TypeKit & similar efforts are helping, and they’ve got Adobe’s support as well.
March 07, 2011
“Wallaby” Flash-to-HTML5 conversion tool now available
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.
February 11, 2011
Adobe & jQuery
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.
November 22, 2010
So, what has Adobe actually done for HTML5 lately?
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.
- New authoring support shipping now:
- Shipped the Dreamweaver CS5 HTML5 pack, facilitating multiscreen work
- Shipped the Illustrator CS5 HTML5 pack, enhancing CSS & SVG export
- Added support for using HTML5 content in digital publications
- Added support for Firebug, Safari 5, and more to BrowserLab
- HTML5 Video:
- Facilitated the use of HTML5-tagged (non-Flash) video in Dreamweaver
- Added HTML5 video publishing to the Scene7 hosted service
- Added HTML5/Flash support to the Open Source Media Framework
- Future authoring tools:
- Demonstrated a prototype tool for creating HTML animations & interactivity
- Demonstrated technology for converting Flash graphics and animation to HTML5
- Announced a new tool for creating HTML without coding
- Supporting community technology:
- Working to contribute advanced typographical layout code to WebKit
- Actively contributing to jQuery Mobile (which leverages HTML5 & CSS3)
- Added HTML5 slideshows to Photoshop.com, in parallel with Flash
- Added HTML5 video playback for videos hosted on Photoshop.com; Adobe TV to follow
- Embedded WebKit in CS5 apps to facilitate HTML-based extensibility
- Added HTML5 compatibility tracking (NetAverages) to CS Live
- Began offering typefaces via TypeKit
This isn’t about one technology (HTML, Flash) “vs.” another; it’s about putting customers, and the solutions to their problems, ahead of any technology.
So, let’s stick a fork in the “Adobe doesn’t like/doesn’t support HTML5″ canard once and for all. Can I get an amen? [Update: If that war of perception is truly over, fantastic. As I say, I'd be delighted to lay it to rest.]
November 18, 2010
A beautifully done HTML5 book from Google
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]
November 10, 2010
Microsoft enables Illustrator->HTML5 Canvas
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!"]
November 02, 2010
Adobe’s enhancing WebKit for better 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:
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.
October 29, 2010
Photoshop.com, Dreamweaver add HTML5 video playback
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.
October 28, 2010
Adobe demos Flash-to-HTML5 conversion tool
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.
October 27, 2010
Eye-roll o’ the day
“Adobe could have been pioneering this about 6 years ago, but better late than never!”
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.
October 26, 2010
Adobe demos new HTML5 authoring tool
Things are starting to roll in a more serious way. More to come.
September 12, 2010
Illustrator CS5 gains HTML5 chops
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)
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:
July 02, 2010
SlideShowPro does HTML5, Flash
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” (?)
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.
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.]
June 29, 2010
YouTube talks Flash and 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.
June 14, 2010
Beautiful HTML5 slides on Web design
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
June 01, 2010
Feedback, please: HTML5 layers in Photoshop?
Let’s start by acknowledging that A) I’m possibly totally crazy, and B) what I’m describing may well never happen. I want, however, to present an idea that you might find interesting. Whether it’s worth pursuing is up to you.
[Update: Fireworks fans, please see this quick note.]
What if Photoshop implemented native HTML as a layer type? Just like the app currently supports special layer types for text, 3D, and video, it could use the WebKit engine (which CS5 already embeds) to display HTML content. Among other things you’d get pixel-accurate Web rendering (text and shapes); the ability to style objects via CSS parameters (enabling effects like dotted lines); data-driven 2D and 3D graphics; and high fidelity Web output (HTML as HTML).
On a really general level, I’m proposing that Photoshop enable programmable layers, opening the door to things like much smarter objects–everything from intelligently resizing buttons (think 9-slice) to smart shapes as seen in FreeHand and Fireworks.
If this sounds interesting, please read on in this post’s extended entry.
May 20, 2010
Google brings Flash to TV
Here’s more info.
By the way, Hulu recently posted some info on why they prefer Flash Player to HTML5:
We continue to monitor developments on HTML5, but as of now it doesn’t yet meet all of our customers’ needs. Our player doesn’t just simply stream video, it must also secure the content, handle reporting for our advertisers, render the video using a high performance codec to ensure premium visual quality, communicate back with the server to determine how long to buffer and what bitrate to stream, and dozens of other things that aren’t necessarily visible to the end user.
May 19, 2010
Dreamweaver adds HTML5 chops
Hey, did you hear the one about how Adobe hates hates hates HTML5, and how the only thing that matters to the company is the advancement of Flash (to the exclusion of everything else)?
I have, and the story is stupid, lame, and inaccurate–always has been. But honestly, talk in either direction is cheap, and I think people want to see “a little less conversation, a little more action.“
To that end I’m very happy to see the Adobe Dreamweaver CS5 HTML5 Pack made available for download. According to the development team:
- The HTML5 Pack extension includes new code hinting for HTML5 and CSS3 elements to enable Dreamweaver users to easily make use of new HTML5 tags.
- The extension also includes WebKit engine updates and improvements to support video and audio in Dreamweaver CS5′s Design View and Live View.
- New CSS3 capabilities users can more easily design multiscreen web pages, with previews of how they will render across multiple browsers and devices.
To see the features in action, check out this demo from DW engineering manager Jorge Taylor:
You can also download a free 30-day trial of Dreamweaver CS5 here.
May 05, 2010
My Decade at Adobe
Looking out on the Lake Washington Ship Canal & drawbridge outside of Adobe’s Seattle office today, I’m hit by a profound sense of déjà vu: I looked at the same scene exactly 10 years ago, my first day at Adobe & working in this office.
I’d given up my Flash & HTML design gig, moved out from New York, and joined a team that set out to make a great new Web animation product.
- Back then the open-standard SVG was just about to take over the world (for real!), and we were getting set to support it. We’d export Flash SWF files, too, but fundamentally we wanted to support open standards.
- The browser wars were still blazing away, bringing rapid innovation in HTML.
- We were starting to see hardware-accelerated Web content, and it seemed inevitable that such support would soon be widespread.
Well, you know, funny stuff happens… But here we are, exactly 10 years later, and I’m looking at today’s headlines:
- Adobe CTO Kevin Lynch: We’re Going To Make The Best Tools In The World For HTML5.
- Microsoft is supporting SVG and talking open standards. (Hey, it’s only a decade late; but so it goes…)
- Browser innovation is once again red hot, with Google showing off Chrome speed, and MSFT, Apple, and others leveraging GPUs.
- Flash Player is being optimized for GPUs on mobile & desktop systems.
Interesting times, to say the least.
In the intervening decade I moved coast-to-coast two more times with Adobe, hung up my flamed shoes & the flamed Volvo I bought in Seattle, met & married a great Seattle girl, had two most excellent boys, and got to help design, build, and support five versions of perhaps the most important graphics application in the world.
And now I’m about to take on some brand new challenges. More details to come, soon.
March 30, 2010
H.264 isn’t an alternative to Flash
Did you think they were competing formats? If not, congrats: you’re better informed than most. Seems like a lot of people are confused, or at least are kind of careless with their phrasing.
In common usage, “H.264″ refers to a video format, and “Flash” refers to a video player. Flash Player displays H.264-encoded video, as do other players (QuickTime, and now the Safari and Chrome Web browsers reading HTML5 video tags–with Internet Explorer to follow).
This all gets muddied, however.
Daring Fireball noted the other day, “TED Goes H.264: Chris Anderson announces a non-Flash version of TED.com for iPhone OS.” Seeing a statement like that, you might think that the TED site has switched file formats, from Flash video to H.264.
I haven’t talked to the TED folks, but I’d be surprised if they weren’t using H.264 already, displaying it in browser via the Flash Player. The news here, such as it is, is that they’re using an alternate player on a device where Flash Player isn’t allowed to run.
That makes perfect sense, of course. If you’re creating content, you probably have no ideological allegiance to formats or players. You don’t care much whether video is, say, H.264 or VC-1 or PDQ-One-Niner, nor do you care whether the player is Flash or QuickTime or anything else. Rather, you care about results. Most particularly, can your audience see it? Once that’s taken care of, does the presentation meet your needs (e.g. interactivity, integration, content protection, stats measurement, etc.)? And from there, do you have effective tools for creating the content? And so on.
TED.com uses Flash Player to display videos because that lets them reach 98% of browsers. If they chose to display the same video via HTML5 markup, they’d reach ~10% of browsers (Safari + Chrome). On the iPhone/iPad, because they’re not able use Flash Player, they’re using an alternate player.
- You can debate one format vs. another (e.g. H.264 vs. Ogg Theora)
- You can debate one player vs. another (e.g. Flash Player vs. a Web browser reading HTML5 tags)
- You can’t really debate “Flash vs. H.264″
On systems where both Flash and other players can run, it’s perfectly legitimate to debate which one to use; each will have pros and cons. My goal mentioning all this is to add a little clarity to those debates.
February 14, 2010
Adobe is “sabotaging” HTML5??
In a word, bullshit.
Apple Insider–via an article whose writer can’t be bothered even to spell the names of several participants (Ian Hickson, Dave McAllister) correctly, to say nothing of doing other fact checking–accuses Adobe of saying one thing (that it supports the development of HTML5 and other standards) while working to delay & destroy those standards. Wow–so lurid, it must be true!!
No part of HTML5 is, or was ever, “blocked” in the W3C HTML Working Group — not HTML5, not Canvas 2D Graphics, not Microdata, not Video — not by me, not by Adobe.
Neither Adobe nor I oppose, are fighting, are trying to stop, slow down, hinder, oppose, or harm HTML5, Canvas 2D Graphics, Microdata, video in HTML, or any of the other significant features in HTML5.
Claims otherwise are false. Any other disclaimers needed?
There are some things that are wrong with the spec I’d like to see fixed. There are some things that are really, really, wrong with the process that I’d like to improve.
I’ve been working on web standards since the beginning of the web in the early 90s, and standards for even longer; long before I joined Adobe. My opinions don’t come from Adobe, and I don’t get approval or direction. I hate to see decades of work on web architecture messed up in the short-term interest of grabbing control of the web platform for a few vendors to own. If you think that position doesn’t match what you imagine Adobe’s position is, well, I’m glad Adobe’s planning to support HTML5 in its products.
As for the HTML standards process: I’ve worked in scores of standards groups in IETF and W3C, as well as a few others here and there, and I’ve never seen anything as bad as this one, with people abusing their official positions to grandstand and promote proprietary advantage. I’ve blogged some about this, but I’d rather fix things along.
I think progress of HTML5 in W3C could be faster if the subsections on graphics and metadata could (if not now, then eventually) be moved to separate subgroups focused on those topics. The organization of work in W3C is determined by the “charters” of working group and the “scope” of he charters, so saying work is “out of scope” even if you are marking a snapshot of the (already published) documents as “Working Draft”, means you might rewrite the “Status of This Document” section to say that it might move. That’s what I was asking for, in the somewhat stilted language of “objection”.
If you want to know who is sending in technical objections, you can see the working group mailing list at http://lists.w3.org/Archives/Public/public-html/. And if you want to see more of my opinions, I’m also on the W3C Technical Architecture Group (TAG) and post there a lot, see http://lists.w3.org/Archives/Public/www-tag/; the TAG often discusses HTML5.
Any more questions about my opinion? My email address should be easy to find.
I should note that I’m not involved in Adobe’s relationships with these standards bodies. Others with more direct involvement will likely share more detail soon. In the meantime, I’m posting this for two reasons:
- A number of people have posted angry, accusatory comments here & via my Twitter feed, demanding an explanation.
- I’m angry and depressed about the total ignorance/laziness of online “journalists” and the sheer credulity of their readers. For God’s sake, guys, do the most rudimentary due diligence before you start defaming people who’ve devoted their entire careers to the advancement of standards. Have enough respect for your profession to take the impact of your words seriously.
Addendum: Here are some comments from an HTML WG member, Shelley Powers, who is not affiliated with Adobe: I’m a member of the HTML WG, but I’m not speaking for the HTML WG, or W3C. I’m only expressing my opinion, and what I know to be facts. I’m also not an employee of Google, Adobe, Apple, Microsoft, or any other company (I’m a writer, for O’Reilly). There is no truth to this rumor. The posting here is inaccurate. Grossly inaccurate I would add. This was an issue that has been under discussion, off and on, on the publicly accessible HTML WG for months. It has to do with scope and charter, not the specifications themselves. The Adobe representative to the HTML WG registered his concerns about the fact that the HTML WG is working on specifications that push, or exceed the group’s charter. This includes Microdata, RDFa-in-HTML, and the 2D Canvas API. Adobe is not blocking any specification. There are dozens of issues that are “blocking” HTML5, if you want to use that term, of which I’m responsible for many at this time. Technically the HTML5 specification can’t advance to Last Call status until these issues are resolved. However, the W3C management can override my issues, and the issues of any individual or company. No one company can block the advancement of any specification without the concurrence of the W3C leadership. All of these issues are based on improving all of the specifications, including HTML5 and Canvas. it’s unfortunate that the HTML5 editor, who is also the Google representative to the HTML WG introduced such wild, and unfounded speculation, causing harm not only to the Adobe representative, but distracting all of us from the work of finishing the HTML5 and other specifications. I would hope that people would seek to get confirmation before posting unfounded accusations.
Addendum: Here are some comments from an HTML WG member, Shelley Powers, who is not affiliated with Adobe:
I’m a member of the HTML WG, but I’m not speaking for the HTML WG, or W3C. I’m only expressing my opinion, and what I know to be facts. I’m also not an employee of Google, Adobe, Apple, Microsoft, or any other company (I’m a writer, for O’Reilly).
There is no truth to this rumor. The posting here is inaccurate. Grossly inaccurate I would add.
This was an issue that has been under discussion, off and on, on the publicly accessible HTML WG for months. It has to do with scope and charter, not the specifications themselves. The Adobe representative to the HTML WG registered his concerns about the fact that the HTML WG is working on specifications that push, or exceed the group’s charter. This includes Microdata, RDFa-in-HTML, and the 2D Canvas API.
Adobe is not blocking any specification. There are dozens of issues that are “blocking” HTML5, if you want to use that term, of which I’m responsible for many at this time. Technically the HTML5 specification can’t advance to Last Call status until these issues are resolved. However, the W3C management can override my issues, and the issues of any individual or company. No one company can block the advancement of any specification without the concurrence of the W3C leadership.
All of these issues are based on improving all of the specifications, including HTML5 and Canvas. it’s unfortunate that the HTML5 editor, who is also the Google representative to the HTML WG introduced such wild, and unfounded speculation, causing harm not only to the Adobe representative, but distracting all of us from the work of finishing the HTML5 and other specifications.
I would hope that people would seek to get confirmation before posting unfounded accusations.
January 26, 2010
Sympathy for the Devil
In the last couple of years, it has become trendy to bash the Adobe Flash Player. I need to say a few things on that subject.
First, let’s be very clear: I’m not on the Flash team. I don’t speak for them. (I don’t speak for anyone but myself.) This post is just my personal take on things. Caveat lector.
I came to Adobe ten years ago to build an open standards (SVG)-based Web animation tool. I like standards, and I have some experience here. Both authoring for & competing with the Flash Player gave me some good perspective. Here’s a quick summary of my long piece below:
- Flash is flawed, but it has moved the world forward.
- Open standards are great, but they can be achingly slow to arrive.
- Talk of “what’s good for standards is bad for Adobe” is misinformed nonsense.
- Flash will innovate or die. I’m betting on innovation.
Let’s be clear: It’s fine to say that Flash is flawed; it is. (You know who’d agree? The Flash team.) It’s fine to hope for alternatives to take root. (Competition makes everyone better.) But let’s also be honest and say that Flash is the reason we all have fast, reliable, ubiquitous online video today. It’s the reason that YouTube took off & video consumption exploded four years ago. It’s the reason we have Hulu, Vimeo, and all the rest–and the reason that people now watch billions of videos per day (and nearly 10 hours apiece per month) online. Without it, we’d all still be bumbling along.
Macromedia was the only company that delivered truly ubiquitous (99% penetration) video playback. Apple didn’t*. Microsoft didn’t. Real didn’t. (Remember how you used to see sites offering multiple streams, making the user pick a player, because the content creator couldn’t rely on everyone being able to view one format? Good riddance to that crappy customer experience.) Content creators, whose income is proportional to their ability to reach customer eyeballs easily and reliably, have voted with their feet, moving to Flash. As a result, more than three quarters of online video now streams in Flash formats (up from 25% three years ago).
All these years later, we still don’t have a standard, browser-native alternative, much less one that’s achieved widespread viewership. (WebKit-based browsers remain in the single digits on the desktop. Firefox, which uses a different video format, is at 25%. Microsoft is off doing its own thing.) That sucks.
I don’t doubt that some video standard will eventually emerge & make its way into most if not all browsers. In the meantime, Adobe spends millions of dollars a year building & giving away software–for which content viewers & even content creators don’t have to pay a dime–to compensate for the rest of the world’s failure to get the job done.
Maybe that sounds harsh, but I find the Flash-bashing tedious and hollow. Flash has all kinds of shortcomings; helping address them is why I joined Adobe, for God’s sake! But Flash, as Winston Churchill might say, is “the worst except for all the others ever tried.” It will improve, as will competing implementations. In the meantime, how about we give the devil (if that’s how you see it) his due, giving Flash credit for helping the world get this far?
– On Standards –
Stepping a bit beyond video, I’m personally delighted to see Web standards like HTML5 emerge. Adobe makes nearly all its money selling authoring tools that target great runtimes. (Conversely, as I’ve mentioned, Adobe loses money building runtimes (Flash Player, Adobe Reader) that it gives away in order to sell authoring tools.) More great runtimes to target means more opportunities to build content for them. Adobe will naturally follow the money, building authoring tools that produce what customers demand, and that includes HTML5-based work. Don’t believe me? Check out a demo of Illustrator, Flash, and Dreamweaver targeting the HTML Canvas tag.
Guess what, though? When I posted that story, almost no one paid attention. People want a certain “killer” narrative: Good guys vs. bad guys, open vs. proprietary, blah blah. That’s simpleminded and lame.
I keep seeing the video standards discussion phrased as “H.264 vs. Flash video**” (e.g. John Gruber writing about Apple “replacing” Flash video with H.264). Apparently people are unaware that Flash has been playing H.264 for years. It’s easily the most popular H.264 player in the world.
Adobe’s choice to embrace H.264 in Flash is what allows sites like Vimeo and YouTube to create HTML5/AVC (i.e., non-Flash) versions of their sites without gobbling up petabytes of storage and loads of CPU cycles creating and storing alternate versions of their videos. Instead of locking people into some proprietary solution it created, Adobe has spent millions of dollars to enable use of a more standard format.
The obvious problem with open standards, of course, is that they often take eons to implement, and developing for different implementations sucks up time and money. Does anyone else remember seeing really sexy “DHTML” demos that featured full-screen animation and more? I do. You know when that was? 1998. And today, more than 15 years after Netscape debuted, Flash remains the only way to, say, display a vector chart across browsers (i.e., such that you can count on every viewer seeing it). That’s sad–especially given that Adobe plowed a hell of a lot of time & money into trying to get the open SVG standardized & adopted.
SVG taught me some painful lessons: While we sat waiting on months (at least) of committee meetings, review periods, etc., Macromedia was free to innovate & iterate quickly with Flash. Their implementation was lean & ran circles around the Adobe player that dutifully tried to support a cumbersome spec. (Again, remember that all this is just my personal opinion.) Openness and standards and kumbayah don’t matter if someone is pantsing your big, ponderous committee.
And this gets to two key, interrelated questions: Why will Flash live on (i.e. what are its competitive advantages?), and Why isn’t Flash open-source/an open standard? Again, I do not speak for the Flash team, but my take is that Flash’s advantages are predictability & agility:
- It doesn’t require you to target multiple runtimes (browsers, etc.) from multiple vendors. Instead, there’s effectively one Flash Player with a predictable set of capabilities. Fonts, pixels, etc. render consistently across OSes, browsers, and devices. You don’t need something like BrowserLab (a free Adobe service, by the way) for Flash.
- If Adobe develops a new technology (e.g. the Text Layout Framework, leveraging InDesign tech and enabling beautiful Web typography), it can be deployed quickly & reliably to all systems. That is, we don’t have to say, “Yeah, we’d love to see better type on the Web, but first we have to convince these groups to add support, and then wait several years for updates to achieve broad adoption, and then hope it all works the same…” We can just do it, and support will hit critical mass quickly.
In a sense it’s a more Apple-like approach: Control things yourself, so design-by-committee doesn’t compromise your product. Open-sourcing Flash would lead to a fragmentation of the format & Flash runtimes, and that would destroy the predictability and agility that differentiate Flash from other standards.
If the Flash team continues to innovate–that is, if they deliver better features more quickly, more predictably, and with better authoring tools than other technologies–then Flash will endure. If they don’t, it won’t–nor should it. But I’m betting they will.
– On Mac vs. Windows performance –
Finally, let’s turn to a touchy subject.
If Flash runs faster on Windows than on Mac, that must be proof of Adobe’s incompetence and/or anti-Mac malice, right? Of course, if Flash ran faster on Mac than on Windows, that would be taken as proof of OS X’s modern awesomeness. Heads they win, tails we lose. (Come on, tell me I’m wrong.)
Despite the Flash Player team investing disproportionate resources in the Mac player (where the Mac has ~5% market share to 90+% for Windows), and despite them making big strides on the Mac, it’s true that Flash performance on OS X has lagged behind Flash on Windows. That needs to change.
My understanding is that there’s work that both Adobe & Apple could do to improve matters. Mac users*** complain about high CPU usage when playing video. The latest Flash Player uses many fewer CPU cycles for video, but the needed hardware decoding support isn’t available on the Mac right now. I don’t have any inside info here, but I’ve heard that the Safari team is a great group of folks, and I hope they’re able to work with the Flash Player team to added the desired support.
– In Conclusion –
I’m very optimistic about Flash, Web standards, and what Adobe can to help customers. In particular:
- The Flash Player team has been very hard at work leveraging the GPU to deliver great performance on mobile devices. I expect those optimizations to make their way into the desktop Flash Player.
- Developers are pushing standards like CSS 3D, WebGL, and Canvas to deliver interesting results. It’s about time Web browsers got good at this stuff, for everyone’s sake, and those enhancements roll right into Adobe AIR and the Creative Suite (both of which use WebKit).
- Adobe sells tools that can adapt to fit customers’ needs. As new technologies open new possibilities, Adobe will deliver great authoring apps.
* I just checked, and the download for QuickTime is more than ten times the size that of Flash Player. If you want ubiquity, size still matters.
*** I’ve been a fervent one since 1984.
December 10, 2009
WebKit & Creative Suite extensibility
Hey, what if I told you that to offer consistent, Suite-wide extensibility we’d ditched Flash Player and had gone with WebKit instead? Would we hear a bunch of attaboys about open standards, HTML5, etc.? Would Mac aficionados in particular cheer Adobe’s embrace of an open source, largely Apple-driven initiative?
Good, because we are indeed embracing WebKit for extensibility. We just happened to keep Flash as an option, too. (The union of the two is at the heart of Adobe AIR, and that’s what we’ll leverage going forward.) Now, let the touch-of-gray-finding begin…
October 09, 2009
Sneak peek: Illustrator + Flash + Dreamweaver -> CANVAS
Check out this demo of Illustrator handing vector art to Dreamweaver, and DW binding the artwork to data so that it can be displayed via the HTML5 CANVAS tag:
Mordy Golding summarizes the demo as follows:
[The engineer] starts by taking art drawn in Illustrator and copies it to the clipboard. Then he goes into Dreamweaver, selects a DIV and chooses a function called Smart Paste. Dreamweaver then pastes an FXG conversion of the Illustrator art directly into the page. If you aren’t familiar with FXG, it’s basically a better SVG* (you can get more information on the open source FXG spec here). In other words, you draw in Illustrator, copy and paste into Dreamweaver (which converts it to code), and the art displays as vector art in a web browser. What’s more, the engineer proceeded to actually bind XML data to the chart.
After that, the presenter copies an animation in Flash Professional as XML, then pastes it in DW as a CANVAS animation.
It’s kind of funny to see this demo now, as Illustrator could export XML vector graphics (SVG) to the Web some 10 years ago. Later people made various efforts to display & manipulate SVG using Flash. This new demo uses different tools & a different display engine to do similar things.
I think this is a key point: Adobe makes money selling tools, not distributing viewing software. Those tools must address customer needs. If Flash Player is the right choice for some projects & HTML/CANVAS for others, no problem: we get paid to help you solve problems, not to force one implementation vs. another.
* I have no idea whether FXG is “better” than SVG overall & don’t want to get into a debate on that subject. FXG is based on SVG but maps more closely to the Flash drawing model.