New Web App for Adobe Developers / Designers
Thermo
Back in late september and early october i went to adobe Max 2007 up in chicago. While i was there i got a sneak peek at a new application that will be released in 2008. Its code name is "Thermo".
Just a week before MAX I was wanting to write my project completely in Flex Builder. This was a really really frustrating thing from a design standpoint. I can write code when it comes down to it and I really enjoy figuring out the functionality of an app but I have always done all my sites or apps in the Flash IDE and laid them out in Photoshop before I move everything over to Flash for animation and coding.
When it comes to doing a project by setting up your design in Photoshop and then getting that design into Flex Builder. Well it can be a pain in the butt.
What is Thermo ?
Well imagine combining Flex Builder with a visual design tool. Kind of like Flash with out the drawing tools and such.
In the Demo, Adobe showed how they had a really nicely designed Photoshop layered comp. Once they launched Thermo they were able to choose the template they wanted to design there app around. In this case it was a comp from photoshop. Once you choose your PSD file you are able to view the layers in a dialog box just like the import dialog that you get in the Flash IDE. Choose your settings for each layer if you like and Boom all your assets are put on a stage that looks kind of like the design view in Flex Builder. Also over to the right you get a view of all your layers. Kind of like the layers view in Photoshop. Below is a a photo of the app in its present stage of production. The adobe example was showing the design and development of a music browsing app.
When you switch to code view you will see code that is MXML code. Adobe explained that the code view is just like using the Flex Builder interface. You will get all the code hinting and power of editing code that you get by using Flex Builder.
Another really cool example that Adobe gave during it’s demo of Thermo was the ability to click on graphical layers or text layers and change them into functional Flex components on the fly. A great example of this was a graphical scroll bar that they had designed in photoshop. Basically consisted of two layers. You had your background square that looked like the track of the bar and the scrub bar that was also a darker square in photoshop. They where able to select these two layers in Thermo > Right Click and tell Thermo to change these layers into a horizontal scroll bar. As soon as they did this if you switch to code view you where able to see that Thermo had rewritten all of the code to tell the app that these layers are now the functional scroll bar. To spare you more reading there where some other graphic and text areas they where able to click on and convert to other components in the app.
Just a week before I was trying all kids of ways to do this same thing. I was laying out my design in Photoshop, taking it to flash to create my MovieClips, then exporting all my assets as a SWC file to use in Flex Builder. This is a really cool thing being that Flex Builder will treat your assets in the library as Components so that gives you great code hinting. The down side of this for me is you can’t just drag a new “component” out of your SWC file and place it on the stage in Flex Builder. Thermo on the other hand will give you a virtual representation of where the button or graphic is located and you can drag it around and move layers how ever you like. As a “Deisgner/Developer” This totally rocks!!! I think even hardcore code head developers will find this to save them a lot of time.
Look for Thermo next year sometime at
http://labs.adobe.com/wiki/index.php/Thermo.
I will be talking more about it as Adobe releases more updates.
-db
Note: this post is mostly for code heads and workflow designers