Flash Builder

It’s been quite awhile since I last posted, but I’ve been keeping busy. Now that we’ve released Flash Catalyst CS5, I’ve shifted my focus to helping lead the team working on mobile application development features in Flex and Flash Builder. Last night we posted the public announcement of the next version of Flex, code-named “Hero”, which will include the first version of our mobile development features.

If you’ve been following Flex over the last year or so, you might have heard of a related effort, code-named “Slider”, which was going to be a separate version of the framework that would be specifically optimized for mobile devices. What we’ve found over the past year is that vast improvements in Flash and AIR runtime performance on mobile devices, as well as the rapidly increasing power of modern touchscreen smartphones, have made it unnecessary for us to split off a separate framework. So going forward, we’ll have a unified framework for both desktop and mobile development, and “Hero” will be the first fruit of this approach.

For a good overview of our plans for mobile development, take a look at the Flex and Mobile whitepaper, FAQ, and Adobe Labs page. We’ve also started to post draft specs for the mobile features (as well as the rest of Hero) to the Flex Open Source site, and we’ll be rolling out more over time.

I’m excited that we’ve started talking about our mobile Flex efforts publicly, and look forward to revealing more over the next few months. Watch this space!

Digg!digg this | del.icio.usdel.icio.us | No Comments

I’ve been so busy that I completely forgot to mention that my article on designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3 went live on the Flex Developer Center when we launched Flex 3. Check it out for information on how to use CS3 with Flex Builder, as well as the new CSS Design View in Flex Builder.

Also, Juan Sanchez of ScaleNine, who built the CS3 Flex skin templates, has just posted some great tips and tricks for using the skin templates. Thanks Juan!

Digg!digg this | del.icio.usdel.icio.us | No Comments

“Well,” you may be saying, “Thermo looks great and all, but what do I do in the meantime?” The good news is that we have some nice improvements coming in Flex Builder 3 that help automate the visual design workflow, and you can try them out in the Flex Builder 3 beta that we posted to Adobe Labs last week.

In Flex 2, if you wanted to style components using CSS, you could use the Flex Style Explorer to experiment with the styles, then cut and paste the CSS into a Flex app. If you wanted to skin components with custom graphics, you could use my Developer Center article on creating skins using the Creative Suite tools, but you would likely still need to edit some of the CSS by hand.

The new design features in Flex Builder 3 help automate both of these workflows. Here’s a quick summary:

Flex Skin Design Extensions for CS3. These actually aren’t a feature of Flex Builder 3 itself, but rather a set of extensions for Photoshop, Illustrator, Fireworks, and Flash that make it easy to create skins for Flex components. Essentially, we’ve taken the templates from my Developer Center article and integrated them into the CS products through a “New Flex Skin” menu command in each tool, adding the ability to create individual component skins as well as a whole template, and to create multiple variations on a single component. We’ve also created a one-step “Export Flex Skin” command for PS/AI/FW that automates the manual export steps from the article.

You can download beta versions of the skin design extensions from Adobe Labs. Thanks to Juan Sanchez of ScaleNine for building out the new templates for us!

Flex Component Kit for Flash. For Flash, we’ve gone one step further, and redone the skin template entirely to use multi-state symbols using the Flex Component Kit for Flash. If you’re not familiar with the Kit, it allows you to build components and skins in Flash that can be used in Flex applications–participating in layout, sending and receiving events, building states and transitions on the timeline, and more. In the case of skins, this means you can build animations between the different states of a component–for example, between the up and over states of a button–using the Flash timeline.

Import Skin Artwork. In my dev center article for Flex 2, we provided a pre-built CSS file that worked in conjunction with the skin templates to glue the template artwork into your Flex application. If you wanted to create multiple variations of a component, you had to do this by hand, and if you wanted to only skin certain components, you’d need to edit the CSS file manually.

In Flex Builder 3, we’ve automated this process with File > Import Skin Artwork. Now you can just point at a folder of bitmaps or a SWC exported by the CS3 skin design extensions, and Import Skin Artwork will automatically write all the CSS code to glue those skins into your app. You can even create multiple styles for a given component using the CS3 “New Flex Skin” commands, then import them as separate CSS class styles. And if you have fully custom components that expose their own skin properties, you can build skin templates for those components that can be imported using Import Skin Artwork by following a simple naming convention.

CSS Design View. This is really the heart of the new design features in Flex Builder 3, and it works with both the skinning and styling workflows:

  • If you’re following the skinning workflow from the previous features, then the CSS Design View will let you visually customize things like font styles and scale-9 grids for the imported skins. Previously, you had to do this by hand in the CSS.
  • If you’re doing pure styling, you can use the CSS Design View like a beefed up version of the Flex Style Explorer, to create global, component, or class styles, preview them directly in Flex Builder, and write the code directly into your Flex application.

Accessing the CSS Design View is simple–just open any CSS file, then click the “Design” button to switch to Design View.

If you want to see some demos of these features, here are some resources:

  • We showed off a number of these features at Flex Camp in SF a couple of months ago; you can watch the videos of CS integration and skinning workflow (boy, I hate the sound of my voice in this video!) and CSS Design View and other FB3 features. (Update: forgot to put in a link to the second part of this originally.)
  • The Flex Builder team put up writeups and video of Import Skin Artwork and the CSS Design View (but not the CS3 extensions or the Flex Component Kit for Flash).
  • Peter Flynn also gave an excellent talk on this topic at MAX, but there’s no video of that up yet–I’ll post a link when it becomes available.

Download the Flex Builder 3 beta, give the new features a try, and let us know what you think!

Digg!digg this | del.icio.usdel.icio.us | 14 Comments

Lots of people have reported the news that Flex 2 has shipped (yay!), so I won’t repeat the details here. (Just go download the free Flex SDK or a trial of Flex Builder already! You know you want to.)

Instead, since it’s all about me, I’d like to point out an article I just published on the Flex Developer Center about designing skins for Flex 2 using Flash, Photoshop, or Fireworks. It’s aimed at visual designers who want to use their familiar design tools to customize the Flex components, but Flex developers might find it valuable as well to understand how skinning works.


Digg!digg this | del.icio.usdel.icio.us | 12 Comments