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!
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:
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:
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.
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.
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.
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.
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.
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!
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.
“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 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:
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.
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.
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:
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.
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.
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 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.
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.
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.
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.
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.
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.
“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!
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.
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.
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.
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.
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!
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.
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…)
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.
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.