Have You Seen Thermo? The Sequel

About a year ago, I posted some information about a technology that I saw presented at Adobe MAX in Chicago. The technology was a future product called Thermo. At this past year's Adobe MAX conference, Adobe provided an update on the progress of this application, and also introduced the new official name of the product: Adobe Flash Catalyst. I've had a chance to play with a preview version of the application, and have written about my experiences and opinions on the application over at my MOGO Media blog. Take a look at let me know what you think!

ASK MORDY: Limitations between Flash and Illustrator

As they are both lumped together in the category of "vector" applications, one can easily assume that objects can be moved freely between Illustrator and Flash. Unfortunately, that is not the case.

Today's question comes in from Elisabeth:

I work for scientists and make presentations for them in Flash. I create the storyboards to go with them in Illustrator. In doing this I often have to copy and paste text from Flash to Illustrator and instead of text I get vector objects. Is there any way to get around this?

The reality is that when it comes to integration between these two powerhouse applications, there's a big fat "one way" sign, and the arrow points from Illustrator and leads to Flash. Try going from Flash to Illustrator and you're faced with a huge "Do Not Enter" sign instead.



Actually, go back a few versions and you couldn't even find a reliable way to go from Illustrator into Flash. While Illustrator and Flash are indeed both vector-based applications, their graphic engines and the way they export those vectors aren't the same. In fact, if you think about it, Flash was built to display artwork in one place, and one place only -- the Flash Player. Even as recently as Flash 8, importing Illustrator artwork into Flash resulted in some pretty ugly paths. In the CS3 release, Flash actually implemented Illustrator's vector graphics engine under the hood, which finally allowed Flash to interpret and maintain the integrity of each anchor point and respective control handle.



To understand the significance of this, take into account the screenshot that appears above. I drew a circle in Illustrator and copied and pasted it into Flash. The circle on the left is how the circle appears when pasted into Flash CS3. The circle on the right is how the same circle appears when pasted in Flash 8. Sweet, eh? In fact, Flash CS3 is pretty intelligent when it comes to pasting content from Illustrator -- live drop shadows from Illustrator become live editable drop shadows in Flash, gradients come in as gradients instead of bitmaps, clipping masks come in correctly, text become editable -- the list goes on.

Here's the thing though -- the code for bringing artwork into Flash was updated, allowing art to move from Illustrator into Flash, but the code for exporting artwork FROM Flash hasn't changed at all. Meaning that while there's a way to get awesome graphics INTO Flash, there's no way to go the other way around. Hence, if you try drawing a circle in Flash and then copy and paste it into Illustrator, you'll get the same result as you see in the circle on the right, in the above image. Likewise, text is also lost when going the "wrong way".

As I mentioned in a previous post, Fireworks CS4 now shares the same text engine as Illustrator does, making it now possible to move text easily between FW and AI -- but sadly, that isn't the case for Flash.

Looking forward, Flash Player 10 (recently released) does have support for something called FTE (Flash Text Engine -- formerly known by its codename, "vellum"), although support for this isn't available within the Flash application itself just yet. I would guess the hope would be that at some point, the FTE technology and the ATE technology (Adobe Text Engine) found in Illustrator, Fireworks, Photoshop, After Effects, etc, would be able to communicate with each other to allow text to move freely between all of these applications.

To wrap up, my understanding is that MOST people need to bring content from Illustrator into Flash, and so that workflow has a higher priority, and those pain points were addressed first. Workflows where designers need to bring content from Flash into Illustrator aren't nearly as common (although I'll admit I've been hearing more people ask for this lately). But since this workflow isn't as mainstream, it doesn't get a high priority at Adobe. If you're a designer and you feel differently, let Adobe know. Either comment here, or contact Adobe directly with your requests (yes, Adobe actually does listen).

Video clips of Adobe's keynote session in Miami

In case you weren't able to attend the recent InDesign and Vector Conference in Miami, here are two video clips from the keynote Address where Michael Ninness of Adobe demonstrated a "technology preview" of some stuff that might appear in a future version of Adobe software. The stuff that you see in the videos involves InDesign and Flash.

Michael starts off by talking about creating interactive buttons in InDesign. The implementation is actually pretty sweet and I only wish Illustrator would be able to do that someday. Michael then proceeds to create a SWF slide presentation from InDesign, with some pretty cool page transitions.



In the second video clip, Myke continues by taking an entire magazine publication from InDesign and bringing it right into Flash (all the pages come in as movie clip symbols as individual frames on the timeline, which alone is pretty cool). Then he attaches an ActionScript and turns the whole thing into a fabulous SWF version of the publication.



Would love to hear your thoughts on what you think of this stuff...

Have you seen Thermo?

I have seen the future, and its name is THERMO.

I was at Adobe's MAX conference in Chicago last week and had the opportunity to see what I can only describe as probably one of the most exciting pieces of technology I've seen in the past five years. It is something that will change the way I do my own work and will probably do the same for many others as well. It is called Thermo.

Adobe gave a little sneak peek of Thermo -- which is an application that Adobe is working on (they have made no formal announcement as to when it would ship). The name Thermo is also a codename -- no word on what the final application may be called.

Before I can accurately describe what Thermo is, I have to paint the picture of where things are today.

As my loyal readers, you are familiar with kuler -- which is what Adobe refers to as an RIA (or a Rich Internet Application). That's because while it uses the internet, it doesn't necessarily have to live in a browser. You may also be familiar with AIR (Adobe Integrated Runtime), which enables RIAs to simply run on your desktop -- no browser needed. Besides kuler, Adobe also recently took the wraps off AMP, or the Adobe Media Player -- which is a player (much like the Real Player or the QuickTime player), but which naturally supports FLV playback amongst many other things. AMP is an RIA that runs on AIR as well.

But how does one build such applications? Well, it usually requires both a designer and a developer to work together. The designer creates comps using applications like Illustrator, Photoshop, and even Flash. These designs may look nice, but they just sit there -- they aren't functional. A developer then has to write the code to make the application function as intended, using tools like Flash and Flex Builder.

Thermo is an application built for designers that allows you to design in Illustrator or Photoshop, and then easily convert design elements into functional code that works. Meaning, you can DRAW a picture of a button or a slider and then simply click on it and tell Thermo you want the picture or design element to be a button. In the background, THERMO WRITES ALL OF THE FLEX CODE FOR YOU. It also means that at the same time, a designer can tweak the LOOK of the app while a developer plugs in code to hook up your app to a back-end server, etc. It's all the same code.

It's unreal, and you really can't fully grasp the potential of this until you actually see it. And what do you know -- you can watch a video of the entire Thermo sneak peek right here... ENJOY.

Would love to hear comments on what others think about this...

CS3 Training videos now all available on Lynda.com

My latest video title, Illustrator CS3 and Flash CS3 Professional Integration is now available online over at Lynda.com. If you're looking for CS3 content, you'll find the following titles from me now:

Illustrator CS3 Essential Training - This title covers general training on using Illustrator CS3. As the title implies, the content here covers the essentials of using Illustrator. While the title is geared towards beginner and intermediate users, advanced users may find some of the content enlightening and extremely helpful.

Migrating from FreeHand to Illustrator CS3 - This title helps you make the jump from FreeHand to Illustrator CS3. Most of the tutorials start out in FreeHand and then progress into Illustrator, taking the time to explain differences in terminology and workflow.

Illustrator CS3 and Flash CS3 Professional Integration - This title is geared towards those who use both Illustrator and Flash. The title covers the differences and similarities between these two vector-based applications and explains key functionality and workflows when creating art in Illustrator and then moving that content into Flash. The title also covers the use of Adobe Device Central to create and test Illustrator and Flash content for mobile devices.

If you don't have access to the Lynda.com Online Training Library, you can use the link on the right side of this page to get a free 7-day trial. In general, I do find the Lynda.com offering to be an extremely good value.

By the way, if you are perusing the Lynda.com Online Training Library, check out Deke McClelland's Illustrator CS3 One-on-One series. In the Advanced Techniques title, make sure to check out the very last video (entitled "see ya") where Deke tells a wonderful (and humorous) story about me :)

Understanding 9-Slice Scaling

9-slice scaling is a new feature that has been added to Illustrator CS3. However, the feature is a bit misleading on several points, and I thought I'd take a few moments to clarify exactly what 9-slice scaling is, and what it isn't.

WHAT IS IT?

Normally, I would start by explaining what 9-slice scaling actually is, but I think that as we discuss it, it will become very clear what it does. The generic way to describe it is that it's a way to intelligently scale objects (very descriptive, right?).

9-slice scaling is an attribute found in the Flash Player. Basically, you can "program" a Movie Clip symbol to scale in a certain way when that symbol is displayed with the Flash Player (think of it as a run-time effect). This certain way of scaling is only applied in the Flash Player -- and this point is significant for two reasons:

1. 9-slice scaling is useful only when applied to symbols that will be viewed with the Flash Player (as SWF).

2. Since it's an effect applied in the Flash Player, you won't be able to preview the result of a 9-slice scale unless you're viewing your art in the Flash Player.

If you haven't figured it out by now, 9-slice scaling is useful only when you're creating SWF files from Illustrator or when you're moving art from Illustrator into Flash. 9-slice scaling (unfortunately) has no use at all in the world of print. Hopefully this changes in a future version of Illustrator.

HOW DO I USE IT?

In order to use 9-slice scaling, you must first define a symbol (F8). In the Symbol Options dialog box, check Enable Guides for 9-slice scaling. The symbol must be defined as a Movie Clip.



Next, double-click on the Symbol (either on the artboard or in the Symbols panel), and you'll see two horizontal guides, and two vertical guides. You can position the guides to determine how the artwork will scale. Refer to the image below to understand what each section represents.



Double click on a blank area of the artboard to save the symbol.

Oh, BTW, after performing this action, I think I figured out WHY Illustrator CS3 has guides UNLOCKED by default (read here), because if guides are locked, you can't position the 9-slice scale guides. So to prevent users from thinking the feature was broken, they unlocked guides so that you can just edit a symbol, edit the guides, and get out. Nice if you care about 9-slice scaling and Flash workflows, but I can't imagine that the majority of Illustrator users (who don't currently use Flash) are happy about this. But I digress...

OK, so now that you've specified the 9-slice scaling, you're done, and you can scale the object.

HOW DO I SEE THE RESULT?

So now you scale your symbol on your artboard in Illustrator, but you don't get the result you expect. The entire artwork is scaled, without any difference in appearance than you would get with a normal scale.



Well, remember that earlier we discussed that you can only preview the result of 9-slice scaling in the Flash Player, so you won't see the result on your artboard in Illustrator. The easiest way to see what your artwork will really look like when played back in the Flash Player is to choose File > Save for Web & Devices and to choose SWF for the file format -- the file will correctly display with the 9-slice scaling in the preview there.



Alternatively, you can export a SWF and view it in your Web browser.

If you're bringing your symbol into Flash CS3, (either by copying and pasting the symbol into Flash or by importing a native Illustrator file onto your stage), you can preview the proper 9-slice scale result by checking Enable Live Preview from the Control menu (it's on by default from what I can tell).




WHAT ABOUT FIREWORKS?

FireWorks CS3 also has a 9-slice scale feature for Symbols, but unfortunately, there's no way to bring an Illustrator symbol into FireWorks (you can import Illustrator files, but the Symbol attributes aren't preserved). It seems that FireWorks CS3 treats 9-slice scaling just a tad bit differently than Illustrator and Flash. First, FireWorks CS3 can display the result of 9-slice scaling right on your screen (no need for previews or anything -- it just works as you would expect). Also, FireWorks CS3 seems to treat text differently. If you have text that is fully contained within the center area, then the text itself does NOT scale at all. Which is cool when creating and resizing buttons and tabs in web navigation elements and user interface designs. You CAN bring symbols from FireWorks CS3 into Flash CS3, at which time the 9-slice scaling behaves according to Flash's way of doing things.