This year's day 1 keynote was chock full of amazing stuff. Here are some of the key points for developers along with links. If you want to follow MAX with up to the minute news, get MAXimizr, an AIR app we built for those who aren't able to be in SF.

• Flash Platform - Umbrella terminology for all things Flash. Pretty sure this isn't a new term, but maybe to reiterate the centrality of Flash player in all of this. Flash Platform Home.
• Flash Catalyst - The app formerly known as Thermo promised to vastly improve designer/developer workflow. We should be seeing a lot more of it before MAX is over. Unfortunately, it won't be available on labs until early 2009. Catalyst on Labs. Catalyst Blog.
• Gumbo (Flex 4) - Not really breaking news as builds have been available on Labs for quite some time, but it is tightly connected with Catalyst so it deserves a mention. Gumbo on Adobe Open Source.
• AIR 1.5 - Updates include support for FP10 features, encryption in local databases and updated WebKit for faster html based rendering. Intro Article. Download the runtime. Download the SDK.
• Tour de Flex - a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR and data integration, as well as a variety of third-party components, effects, skins, and more. Download it.
• Cocomo - a "platform as service" that allows Flex devs to easily add real-time social capatilities to their apps. Cocomo on Labs. Developer Portal.
• Wave - a desktop notification service built in AIR allowing users to receive notifications from publishers that they specify. Wave on Labs.
• Flash player 10 for mobile - hopefully I'm reading this correctly, but they're shooting for a fully functional FP10 for mobile devices. Fantasic news for developers. Obviously hardware may be a limitation, but demos were shown on Symbian, Win mobile and Android (sorry, no FP on iPhone yet...that's in Apple's hands)
• Distributable Flash Lite player - another awesome piece of news! Apps can be deployed with the ability to install Flash Lite if required (over the air).

Also, not sure if this was directly touched on in the keynote, but Flash Media Server 3.5 was announced. Read about it here. Get it.

Can't wait to see what the Day 2 Keynote brings.

This year's Adobe MAX conference is shaping up to be one of the most exciting in recent memory with CS4 just released and much hyped previews of new products such as Thermo to come as well as lots of other cool tools. So in order to follow all of the goings on, we've built an AIR app called MAXimizr.

MAXimizr 0.1.0 aggregates all of the latest MAX related news as well as twitter entries. Also, it will directly link to videos and session files as they become available so you can stay on top of it all. Finally, it includes the entire MAX schedule so you can track what's going on. You can navigate through all of the content using the scrollwheel or the now familiar click/drag/throw as seen in the iPhone.

We have plans to build a lot more functionality in future versions of MAXimizr including:

1. Inline playback of video
2. Customizeable settings
3. Ability to favorite the sessions you are attending
4. Inline browser

If you're presenting at or attending MAX, feel free to email me once your session notes/files or recorded video are available and I'll link to it.

Requires the Adobe AIR Runtime. Use the badge below to install MAXimizr:

iCandy was my entry into the ScaleNine Skin to Win competition. It took third place and a copy of CS4 Web Premium. There were some hiccups in the process of getting these graphical skins into a Flex app, which anyone doing graphical skinning should be aware of (I've documented here), but overall I was happy with the result.

Thanks to Juan for putting this on, and to Adobe and EffectiveUI for sponsoring with some great prizes.

The skins should be available for download on ScaleNine shortly, but you can preview the skins here. Congrats to the other winners, the team from Undefined for their Undefined skin, and Nahuel Faronda for his Brownie skin.

[UPDATE: The iCandy project files as well as the source FLA are now available on ScaleNine. Enjoy!]

Having done several CSS skins for various projects in the past, recently, I had the opportunity to create a set of almost entirely graphical skins. Having stepped through that process, I wanted to write down some tips when attempting to create graphical skins. All of these skins were created using Flash CS3 as opposed to Photoshop or Fireworks. This isn’t so much a step by step tutorial (a good tutorial by Narciso Jaramillo can be found on DevNet) as it is a list of pointers as there are a few issues you may run into when implementing graphical skins.

I’ll start by saying that my experience in general was positive and in large part, the tutorial was a great resource. For a large number of the components, skinning was super simple and Adobe really did a good job (though skinning in Gumbo is that much better). However, there are some little things that needed massaging in order to work. I’ll touch on each of those below.

As mentioned in the tutorial, install the Flex Component Kit for Flash CS3 as well as the Flex Design Extensions. These will make your life a whole lot easier as they include template files for most components (New > Templates > Flex Skins). Once you publish from the template file as a swc, you can import them easily into Flex Builder.

When modifying graphics in Flash, here are a few tips:

• Try to make the size of your graphics match the size of the default graphics in the template fla. If you change the size and position of graphics, you may get unexpected results.
• Make sure the size of graphics in all states is the same. If sizes change across states, it will likely result in text labels or other parts of your component moving when the state changes. This includes things like keeping the “check” in your checkbox inside the bounds of your “box.”
• When importing a slider skin into Flex from your template, you’ll need to add a CSS style definition for both HSlider and VSlider. By default, the swc imports a definition for Slider only which doesn’t change skins for either Slider component.
• When customizing the shape of your skin, you can round or unround corners, but if you do, make sure you use the “focusRoundedCorners” style along with “cornerRadius” for that component to either round or unround the focus rectangle.
• When customizing the indeterminate graphic for ProgressBar, be careful with the spacing of your barber pole or you’ll get skipping during the animation. Going with the same spacing in the template file of course is the easiest way to go.
• An obvious one, but make sure that you don’t use MovieClip symbols inside of your skin clips that require 9-slice scaling as they won’t scale properly. I’ve also found that using Graphic symbols can also cause weirdness. In general, it’s best to just use shapes in your skin clips.
• The skin for the MenuBar_itemSkin doesn’t work properly. By default, the template contains a single clip with separate states for up/over/down. However, in order to get it to work properly in Flex, I had to break it into separate clips (MenuBar_itemUpSkin, MenuBar_itemOverSkin, MenuBar_itemDownSkin), each representing a single state only.
• When customizing background skins for List based components, keep in mind that by default, the ItemRenderer background extends to the edge of the component, so that it will obscure your border at the very least in over and selected states. In order to have your ItemRenderer background sit inside your component border, you need to create a custom renderer. The other options are to either have no border or to make your ItemRenderer backgroundColor style the same color as your border.
• Remember that some component skins are used by other components either via inheritance or composition (i.e., NumericStepper uses the TextInput borderSkin, ComboBox uses List’s, TextArea uses ScrollBars, etc.). So if your TextInput skin graphic has rounded corners, take that into account when creating your stepper button skins.
• Another obvious one, but remember that CSS styles don’t work with custom skin graphics. Unfortunately, this means that creating a set of graphical skins that can be styled using CSS isn’t possible by default (i.e., backgroundColor, borderColor, etc.). Not sure if anyone has implemented this ability with graphical skins, but I’ve started looking into it so stay tuned.
• Unfortunately, there isn’t a simple way to graphically skin the DateChooser background as it’s baked into updateDisplayList of the DateChooser class, so your easiest bet is via CSS.
• ComboBox’s editableSkin doesn’t work properly. The symbol actually needs to be broken down into 4 separate symbols (ComboBox_editableUpSkin, ComboBox_editableOverSkin, ComboBox_editableDownSkin, ComboBox_editableDisabledSkin) and imported into Flex that way in order to work properly. Also note that even though the template symbol is 21 pixels wide, the default width for the editable ComboBox's button is 22 pixels so you may want to resize the symbol so your arrow doesn't get stretched.
• Unfortunately, using graphical skins for Panel can result in a bit of a mess as discussed here. Basically, the contents of the panel don't respect the padding values. One workaround is to set up the panel contents in a container and set the top/bottom/left/right values of that container to the same as the border in your panel graphic.

This is old news for some, but seriously, after reading the skinning architecture docs and building a couple of sample skins using the Flex 4 SDK, I have to say that it completely rocks!

Up until Flex 4, the approach for architecting UI components (starting back with MX2004 all the way up to Flex 3) has been largely the same. The result has generally been robust components with an amazingly wide feature set but that could take quite a bit of work to customize, particularly in regards to skinning. Each generation of components has improved upon the previous one, but after looking at the Gumbo components, I absolutely love the new true MVC approach. The fact that the view (skin) is pretty much completely decoupled from the controller makes customization more flexible and easier than ever.

Here is a simple button skin built entirely in MXML (Flash player 10 required). Not super complex, yet it shows how easy skinning really is. This example contains small customizations like animated transitions between states, lots of layered gradients, multiline label, label with glow, and others which could take quite a bit of work to implement in the existing framework.

Here is the MXML for the skin.
Here is the entire source package.

Here are my top 10 things to love about skinning in Flex 4:

• FXG - A lot of this just wouldn't be possible without graphics tags introduced in Flex 4.
• hostComponent - The ability to bind anything in your skin to any property in the component allows the skin to pull the data it requires and display itself accordingly.
• States and Selectors - The ability to define states that correspond to states in the controller is made hugely powerful by the introduction of "state-selectors." In MXML, you can now define values for any state your component implements (for example, in button, you can do alpha.over="0.5").
• Integration with the Flex 3 framework - the Gumbo components extend the existing UIComponent class so things you are already familiar with like component lifecycle, events, and tabbing all still apply.
• Skin parts - The ability to break up your skin into parts, each defined in your controller to have it's own behavior.
• Layout Agnostic - You can quickly snap in different layout classes to display the component in different ways. No longer is the layout tied into the component.
• Flexibility - Using all of the above techniques, Ely has already demonstrated that you can customize a list to act like an Accordion or a TabBar without much difficulty.
• Building via composition - In this new architecture, it's super simple to just snap new pieces into a skin and wire them up to the hostComponent properties to create more complex components. For example, List doesn't contain a ScrollBar by default, but to add one and make it work is fairly trivial.
• Lightweight - Since all of the non-essentials have been pulled out of these components, there is far less code which should mean improved performance. Can they do as much as the Flex 3 component set? No, but I don't think that's the intent initially, as these don't appear to be a replacement for those components, rather an alternative.
• Thermo - ever since I was blown away by the initial Thermo demo video (particularly the parts on converting artwork to components), I was skeptical about how they would be able to support skinning in that way using the existing Flex component framework. However, after seeing how skinning works in Gumbo, it now makes tie in with a tool like Thermo much more obvious.

Flex 4 rocks!

One of the biggest issues for me in the Flash/Flex workflow has been bringing graphics created in Flash into Flex. Don't get me wrong...I don't think the workflow is hugely painful. All you need to do is draw in Flash, compile, embed the swf in your Flex app and you're good to go. However, if you need to tweak your graphics, resize a few pixels here, tweak a gradient there, for some reason, it just felt uncomfortable to have to go back to the Flash IDE, tweak, recompile, etc.

However, after reading the FXG spec, I'm excited about what this will add to our arsenal. A markup for graphics is something already implemented in Silverlight and was something we were sorely missing. Degrafa got the ball rolling in that arena, and it showed the capability to do some pretty amazing stuff. That team continues to work with Adobe in the implementation of FXG.

This new feature brings to bear a few questions in my mind:

• Will we get additional UI controls in the Flex 4 IDE that allow manipulation of the markup (changing shape properties, applying/editing filters, changing text)? Considering that the Flex IDE initially was created to make developers feel more at home by removing that "extraneous" stuff, it should be interesting to see what happens. Or is Thermo solely the tool that will allow this capability?
• For more complex graphics that can be created in the Flash IDE (or even in Illustrator and imported into Flash), will there be an option to export to FXG? I know there are inherent problems with this since the IDE supports things that FXG does not (i.e., timeline animation), but even the ability to select one or more graphics on stage and have it output FXG would be a cool feature.
• How will creating/manipulating the graphics via UI controls bloat the markup. In working with Blend and XAML, you could draw a rectangle to the stage and change a few settings and all of a sudden you get something that looks like this:

  

  Then try changing some of that XAML manually and it blows up if you're not careful.
  

I'm excited about the potential this has for improving workflow.