VIDEO DEMO: New Features in Adobe Flash 9

Along with upgrades to many of the Adobe tools (see story here) Adobe has released Flash 9 featuring tighter integration with the rest of the Adobe Creative Suite, a redesigned user interface, the ability to import Photoshop and Illustrator files, new drawing tools and a workflow solution to bridge the gap between design and code.

Scroll down for two exclusive demos on Flash 9 presented by David Dodson of advertising and marketing agency Magnetik in NYC.

In Flash 9, Adobe seeks to solve the problem of a cluttered desktop. Now users can collapse the various palettes and display them as icons along the side of the UI. The timeline, which could not be collapsed as an icon in prior versions of Flash, can also be treated in the manner. Once a user has selected the palettes they often use, the workspace can be saved.

Mac users will see a dramatic change in the UI as Flash on the Mac, like prior versions in Windows, now has a docked user interface instead of floating panels, and the app can be easily enlarged to full screen mode. Click below for a quick demo of the new UI.

The most significant feature in the new version is the ability to import Photoshop and Illustrator files in their native format, maintaining all the layers and properties.

“Until we joined Adobe we couldn’t do that because there aren’t any third-party import libraries,” explains Mike Downey, senior product manager for Adobe Apollo. “Obviously with this release we have the native code.”

Click below for a demo on importing PSD files into Flash 9.

With Flash 9 all the layer and file structure in the PSD file is maintained as well as the kind of layer it is (bitmap or vector layer). In an effort to maintain efficiency, Flash only imports the layers selected in the PSD file.

“Users told us that they often use a single Photoshop file as a kind of file system to track iterations on design. As a result people often have hundreds of layers in one PSD file and they didn’t want us to import all the layers because that would just be too much content,” says Downey. “So we allow you to go through layer by layer and choose what you want imported. And there is a list of specific information on the side when importing relative to how you want to treat this content.”

Another small, but significant, improvement aims at resolving the tedious and time-consuming task of creating symbols in Flash. Directly upon importing files they can be turned into symbols rather than the former process of first importing images and then selecting them manually and turning them into symbols and giving them instance names.

Designers and animators will be happy to hear that the old Pen Tool in Flash has been scraped and the Pen Tool is now the same as the popular one used in Illustrator.

“One thing we heard consistently from users was that the Pen Tool was poor and people preferred the Pen Tool in Illustrator. One designer described using the Pen Tool in Flash as ‘like drawing with your feet,'” notes Downey. “People preferred the Pen Tool in Illustrator so we worked with the Illustrator team and changed the Pen Tool so it works just like Illustrator. And we’ve added all the different types of Pen Tools and all the new ones that are available in the new version of Illustrator.

“Under the hood we did some optimizations about how Flash preserves the Bezier points went you import vectors from Illustrator. One of the core problems was that Illustrator and Flash use different vector calculations ‘ one uses cubic and the other uses quadratic equations. That is under the hood and you can’t really change that. So what we did is that when you are designing it uses the same model that Illustrator uses but then when you publish it converts those on Publish. So that way when you are manipulating Bezier points you are doing it in the same way you would be doing in Illustrator. So that makes it a little easier to design in Flash,” Downey explains.

Flash 9 also adds ‘graphic primitives’ that allow users to start out with either a rectangle or oval shape and manipulate it while the shape maintains the properties associated to them.
“Before Flash just saw everything as the same shape. It doesn’t see the difference between a rectangle and an oval,” says Downey. “But now you can create these basic elements, manipulate them while they maintain the general properties and then you can just double-click to turn off the graphic primitive and it Flash will just treat is a as a generic shape.”

Additionally, a new JavaScript API has been exposed for developers to access these capabilities and create custom tools and share them on the Adobe Exchange.

Flash 9 also takes a significant step to bridging the gap between designers and program developers with what Downey describes as "the sexiest new feature in Flash 9."

“As we talked with customers, especially those working in teams where there were designers and then developers writing code, we found there was a lot of dysfunction going from design in Flash to development in Flash,” says Downey. “A specific scenario had to do with animation. A lot of designers would prototype what they wanted the app to look like and work to a very precise detail and get signoff from the client. Then they would take that animation and give it to a developer who would redo that animation in code because doing animation in code is usually more efficient with a smaller file size and it also is easier to update. The problem was that the designer would hand the file to the developer and that file uses the timeline very extensively. And then the developer would open that file on one screen, create a new file on another screen and attempt to recreate it in code and there were all sorts of problems between the developer and designer.

“We knew there was a better way to go from timeline animation to a high quality code equivalent. In our programming language, ActionScript 3, we added a feature which basically allows you to work very easily with XML data right within your code. It’s called E4X and it is very straightforward and intuitive, you just write that XML right within your code and then manipulate that code very easily. What we did is we figured out that we could take any animation on the timeline and double click on it and copy the animation as ActionScript 3. What we’re doing is going through and analyzing that animation and writing it out to an XML description. So we have an XML description that describes the key fames, the speed of the animation, how many frames it covers, filters, all the different details of the animation. It even includes animations done with a guide layer, which is pretty complex to do in code. We automatically figured all that out. So when you say Copy Motion you put in the name of the object that you want to apply this code to. So it is very easy for developers to understand and it is a good way for designers who are trying to learn how to code, you can do something visually on the timeline and then convert that to code and see how the code works.”