Author Archive: Rich Lee

Adobe Flash Professional CC for HTML5 animation

Guest Post by Colin Holgate, senior programmer, Funny Garbage

titlescreen At Funny Garbage, we love working on projects that are both fun and that let us flex our development muscles. We recently worked on a mobile and Facebook app for the Aéropostale P.S. brand. Targeted to teens, the app lets them use their own headshots to personalize crazy dances comprised of complex animations. This is the kind of fun characterization that Adobe Flash Professional does so well.

The development time was short and the app had to be delivered on iOS, Android, and Facebook. We knew we had to have both a Facebook and mobile presence, and we wanted to easily replicate the functionality without building separate experiences. However, a major requirement of the job was that the animation had to be HTML5 compatible for desktop browsers. This would enable users on iOS and the latest Android OS to access and share the same playback links. The same links would also work for desktop users who had not installed Flash Player. We used Flash Professional CC (using Adobe AIR to deploy to iOS and Android mobile and SWF for Facebook) to create the app, here’s how we did it.

addingperson We conducted an early test of the HTML5 Canvas feature in Flash Professional CC while it was still in beta, and it was remarkably successful. We were able to proceed with all of the other features of the app knowing from the outset that the playback was going to work. Without that ability to port over to HTML5 with complete confidence, the only alternative was to develop this project natively in four separate environments—much too complex a process and not a realistic option within our production schedule. In fact, we actually beat the launch deadline and I was the only Flash developer working on the project.

Our artists, animators, and designers spent several weeks working with the client on style, animation, and music. They used Adobe Photoshop CC and Illustrator CC for all the graphical assets, as well as for the Flash Professional animation timeline. The files were then handed over to me to use in the Facebook and mobile apps, and also to create the HTML5 versions. We included placeholder headshots for seven different animations, featuring up to three people, which users can override with their own “selfies.”

flashproscreenshot The workflow of taking the regular Flash Professional animations and exporting them as HTML5 files is quick and as simple as choosing “convert to HTML5 Canvas from AS3 document formats” from the Commands menu. When the HTML5 Canvas document is published it exports all of the code, images and sounds needed to create the animation. We did further optimizations on the exported folders of images, so that the loading of the HTML5 pages is fast.

In the end, our client was happy with the outcome—a fun, creative app to showcase the P.S. brand. We’re excited to see where we go next with using Flash Professional CC as a development tool for code-driven HTML5 Canvas projects, not just for animations. We’re also keeping an eye on Adobe Edge Tools & Services, which will help us create more responsive designs. Having cutting edge tools encourages us to stretch our skill sets and our imaginations, while at the same time discover new ways to save time and money.

Introducing Native HTML5 Canvas in Flash Pro CC

HTML5 Canvas workflow

Have you ever wondered what it would be like to create animated content using a familiar authoring environment, while being able to target a diverse set of platforms like HTML5 Canvas, in addition to Flash Player and AIR?

Great news – the latest version of Flash Professional CC, available now, includes native HTML5 Canvas support. As you may recall, Flash Professional CC was released in June, marking its rebirth as a modernized 64-bit authoring tool for multiple platforms. This update continues that theme, emphasizing its focus on HTML5.

The new HTML5 Canvas support lets you create interactive content leveraging well-established Flash Pro paradigms of timeline, frame-scripts and creation tools, all customized for the HTML5 Canvas platform. Add frame-script using native support for JavaScript including code-hinting, code-coloring, and more.

Check out more details here, or download the free trial.

Thanks and we hope you enjoy this update!

Rich Lee, Sr. Product Marketing Manager
Ajay Kumar Shukla, Sr. Product Manager

Flash Pro CC aka “Hellcat” is coming in June!

Flash Professional CC
Today was a big day for Adobe fans and customers — at our MAX conference this morning, we announced that major updates are coming in June for all of our most popular tools, from Photoshop to — you guessed it, Flash Pro!

At the end of March, senior product manager Tom Barclay gave you a first glimpse at Hellcat, the next generation Flash Professional. We’re proud to announce that Hellcat will be released as Flash Professional CC, representing years of development and a huge leap forward.

In addition to being faster and more reliable thanks to a completely new 64-bit modularized architecture, and having a new user interface, we’ve added some really powerful new features:

  • Full HD audio and video export without dropping frames
  • Improved HTML publishing
  • New code editor
  • Real-time drawing and live color preview
  • Unlimited paste board size
  • Native iOS simulator support
  • Advanced content profiling with Adobe Scout
  • Custom metadata support

More details about the new features are listed here. Flash Pro CC and all the other updated tools will be here in June – come back for more updates!

Best Regards,

Rich Lee
Sr. Product Marketing Manager

Video: First look at the next generation Flash Professional

In December, I promised to give you more details about the next generation of Flash Professional, codenamed Hellcat. Our team has been hard at work on this for the past few years, and we’re (finally) ready to show you the proverbial fruits of our labor. Check out this quick tour from from senior product manager Tom Barclay:

As Tom showed you, Hellcat is completely re-engineered, modernizing Flash Pro for the next generation. Here’s a quick recap of just some of the work we’ve done so far:

  • 64-bit architecture, native cocoa: modularized, faster, more reliable so you can be more efficient
  • Faster start time, file opening and saving, timeline scrubbing, and more
  • New user interface with light and dark themes, plus support for HiDPI displays (aka MacBook Pro Retina displays).

If you’re a game developer and going to GDC, come visit us to learn more. For everyone else, stay tuned for even more news at Adobe MAX!

Thanks for your support, and ’til next time!

Rich Lee
Sr. Product Marketing Manager