ScaleNine

I’ll be speaking about Degrafa at the 360Flex Conference in Atlanta, February 25-27. Degrafa is a declarative graphics framework for Flex that allows you to draw graphics, create skins, and more using MXML and CSS.

We’re getting really close to releasing a public beta and we’re pretty excited to see what people will do with the framework. We’ve been creating various examples to showcase some of the possibilities of what you can do and it’s really great to see. By the time the conference rolls around we hope to have more features added and possibly a second release.

In addition, several members of the Degrafa team will be there, which should provide for a pretty good session. You can learn more about the conference here. See you there!

Now that I’m back from Chicago I thought I’d put together a list of features I took away from the “Thermo” demo that was given at MAX. Imagine creating Flex UIs and experience using the very familiar toolsets in Photoshop, Illustrator and Flash. Adobe’s “Thermo” project does that and more with strict emphasis on a tool for a designer to create the front-end of an application. This is the answer to so many questions and issues people have had with the designer/developer workflow. There’s an Abobe Labs page where you can learn a bit more, which includes images.

There were a number of features shown, including the ability to import a Photoshop file and then easily convert artwork into working components. Once the artwork is imported a designer can go through and convert the artwork to working components. When this is done, everything that is selected is converted to MXML with reference to external image assets. One example that was shown was a graphic that was designed to be used as a text input was selected and then from a menu item was converted into a functional TextInput, skins and all. One thing I’m hoping is if you import vector art, the vector properties are maintained and converted to MXML path data and colors, alphas, etc. values remain editable.

For more complex components, like a scrollbar, you work within layers to specify which artwork is which part of the component. For example, you can designate which artwork is a scrollbar thumb by simply dragging the artwork within a layers palette into a folder called “thumb”. I imagine this feature may evolve to support custom components where a developer might specify the different parts of a component, which would translate into folders inside of the Thermo component/skin palette.

Another thing that was shown was the ability to create a relationship between a List and a ScrollBar. So, the List was separate from the ScrollBar, but there was an icon that was dragged to point to the List and a relationship was created. Once those items were linked the ScrollBar now controlled the List.

You can easily work with transitions and effects on different portions of the UI using layers and simplified timelines to do what traditionally may have taken a good understanding of writing those out in MXML. Once you felt your effect was where you’d like it, you could scrub through the timeline back and forth to preview your work.

Additionally, it is really easy to make a dummy data set for mockup purposes. What was traditionally a more elaborate process of creating a dummy XML file and assets has transitioned into a seamless process of using a very visually approach to defining data, editing data and simulating data populating your UI. The data can be worked with via a data grid based structure.

“Thermo” is great because Adobe has focused on patterns and tools a designer is already familiar with from other products and made a really familiar workspace for a designer to create user interfaces for Flex and AIR. The features that were presented were awesome and there’s already people talking about additional features they’d like to see. “Thermo” is an awesome tool, but from what I’ve heard we might have to wait a while, but it’ll be worth it.

The second part of the “Creating a Visual Experience in Flex” that Andy McIntosh and I did at 360Flex is now available for download. This is the hands-on portion of the “Skinning Mega-Session” and the supporting code and assets can be found here.

Check out the video here.

I spent part of my day in Los Angeles for the WIRED NextFest and there was definitely a lot of great stuff to see. The venue was split into different groupings of categories like education, exploration, design, entertainment, etc. I had read a little about certain things that I definitely wanted to check out, so I made sure to keep my eyes open for them.

As I first walked in there was a wall of fog that had different images and video projected onto it. It was called FogScreen and I thought maybe the fog would be more like a mist and I’d get water on me when I walked through it, but that didn’t happen. It was a super fine mist. Right in that same area I spotted something I had mentally tagged as something I wanted to check out. It was the Morpho Towers, which was these metal cone-shaped structures that sit in a pool of magentic liquid saturated with iron particles. As music played the liquid was drawn up the sides of the cone and an array of various forms were created around it. Almost like three-dimensional waveforms.

After wandering around a bit I noticed a large dual-screen display in the disctance and as I got closer to it I noticed it was the Multi-touch Collaboration Wall by Perceptive Pixel that I’d seen in a number of online videos. Sure enough, there was Jeff Han giving demos. I tried to reproduce some of the hand gestures Jeff was doing to bring up all these different menus, but I could only get a few to work. Guess I didn’t have the magic touch. It was great being able to play around on a touch screen of that size. It was like the iPhone on steroids.

Along that same wavelength of technology was BumpTop. Again, I’d seen videos of this and it was interesting to see how it performed. When I walked up to the display, one of the people there asked me if I’d ever interacted with files like this before and I responded with “You mean like TileUI?” The person seemed to pretend they didn’t hear me and proceeded with the demo. It didn’t seem as responsive as the Perceptive Pixel multi-touch device and I noticed some people struggling with the metaphor it was trying to use to allow user-interaction with a file system. The demo was given using a stylus that looked like a dry erase marker, but you could also use your fingers. I imagine the stylus was used for precision, as there were a number of tiny icons to be clicked.

Among the things I mentioned above was the mono-cycle, RFID Wine Rack, mind-controlled soccer game, FastTrack 1 and more. I could go on and on about where I think some of these technologies that were there might go. There were so many great things to check out and play with, but I left with the feeling that there was something missing, yet couldn’t really put my finger on it. Ah well, being able to play with the multi-touch screens made it worth the trip.

You can Check out my Flickr photo set here.

Day 2 of the 360Flex Conference started out with the “Creating a Visual Experience in Flex” back-to-back sessions presented by Andy McIntosh and I. We were up ’til 3am putting the finishing touches on our slide deck and hands-on materials to get it to where we were happy with it. The informational session ran a bit short to allow more time for the hands-on, which worked out great. Just for grins I thought I’d show the app we were going to build, which was a Mix Drinks Recipe type application. Here’s the mock up I did:

We ended up making a much simpler example for the hands-on session to insure people were able to grasp the core methods we were discussing, rather than getting caught up in the code. If anyone’s interested in making this an app let me know. All the artwork for this app is vector and those drinks are prepped and ready to go in Flash. You can check out the slide deck for the informational presentation and the grab the source files for the hands-on session here. There’s also a nice list of resource links on that page.

After the presentation I was able to get out of the hotel and explore Seattle a bit to grab some lunch. Later on I caught David Colletta’s presentation on Buzzword, which was great. I’m definitely looking forward to day 3 and a trip to the Space Needle restaurant.