BlendBanner I’m going to preface this post with a few things. First, I am not a closet Silverlight developer. I’m also not a firestarter. With regards to some recent talk about whether or not Microsoft’s presence should be allowed at Flash conferences, I have no involvement or say. I don’t want to start an Adobe vs Microsoft flame war, because honestly, it’s played out already, and I’ll leave that up to the tech tabloids. I am however, a developer and a UX designer, which means that I love thinking of ways to make everything better, more structured, and more usable. That includes IDEs I work in, but also IDEs I’m not working in. It’s silly to ignore other development environments, especially ones that are seen as competition to the ones we work in. So I decided to investigate. I took some time to look at other IDEs, namely Microsoft Expression Blend, and have seen some head-slappingly clever “Why didn’t we think of that!?” kind of UI/workflow elements that any RIA tool could benefit from. Blend has a lot of slick little features to offer when it comes to workflow. At least on the surface, Blend is great at being a smart and intuitive IDE. Microsoft has taken a big step forward in of RIA building arena. To be fair, however, Blend has youth and Adobe’s experience on it’s side. Microsoft has wisely learned the pain points of the Flash Platform and did something to improve those areas, on top of an already great IDE.I didn’t work with Expression Blend for an extended amount of time, but I found a swath of really nice additions built-in that make me rather envious. Want to see what I mean? If you haven’t seen this video, take 10 minutes and check it out.(Under Discovery Tours > Top right, ’Expression Blend 3’) Here are some specific examples in a not so specific order: 1. Container parenting. Each layer has a ’Group Into’ right-click menu that allows you choose view components to group items into.

Layer Parenting GroupInto 2. Enhanced States. There are really nice visual features here. You can specify transition durations, easing type, and even ’pin’ states with an eye icon so you can see them over your current state. You can also see which state each state is currently being transitioned. This thinking applies to buttons as well, giving you a high-level view of each state. There is also a custom easing editor as well as easing presets, which I am super jealous of. States Panel States Panel - Pinned States Panel - Transitions States Panel - Easing CustomEasing EasingPresets ButtonStates

  1. Blend’s Asset Menu in the toolbar is like Flash Builder’s Package Navigator and Components panel combined. A lot to talk about here. There is a button at the bottom of the toolbar that shows a menu and all of the assets in your project. When I say ’all’ I mean all. It also shows behaviors and styles as visual objects, as well as explanations of each! This menu can be subdivided into areas like ’controls’, ’styles’, ’behaviors’ etc. Selecting an item makes it the default drawing object. In other words, instead of dragging and dropping from the library, you can draw a symbol or image at whatever size you want when you first put it on stage. AssetMenuProjectPanel AssetsImagePreview AssetsMenuInsertControlExplanations ControlsInToolbar DimensionsWhileDrawing DimensionsWhileResizing
  2. Visual Hints. Nice little options for Tooltips, Cursors, and HitTestVisibility. CommonProperties
  3. Split Code and Design View. I know, I know. Just throwing it out there. Source-Design_Split
  4. Visual, Reusable Event Programming. This is nothing terribly novel, but still a useful area of functionality. Notice the Volume Property of a Sound object. Very slick! To be honest, I’m not really an advocate of behaviors, but I think Microsoft is on the right path here. It’s a graceful implementation in my opinion. EventProperties ProjectBehaviors
  5. Enhanced Layout Panel. A bunch of sexy little additions like columns and rows, scroll policies, and layout rounding. Solid development UX here. LayoutPanel 8. In house prototyping with SketchFlow. I know I’m going to get some flack for this, but Adobe really should have made Catalyst Flash Builder’s Design View in my opinion. Yes, that includes a timeline. Either way, Microsoft has what I consider a beautifully analog-to-digital approach right under the roof of their own IDE. SketchFlow SketchFlowPrototype
  6. Quick Access Stage Functions. These are just some really convenient functions to be able to quickly access when you’re working on the stage canvas. These buttons toggle grid displays, rendering, snapping, and annotations. Also, something little I noticed when you’re dealing with tons of layers was a right-click, Set Current Selection context menu item. It’s just all these little things that add up to a really smooth RIA development experience. ToggleAnnotations ToggleGrid ToggleRender ToggleSnapping SetCurrentSelection So, that’s just a first-glance take of Expression Blend. It’s nice seeing what other IDEs can do. I personally have spent countless hours logging bugs and feature requests for the IDEs I use by studying other products like this. It’s also a great way to understand why the IDE you’re logging features for, is built the way it is. You really gain an understanding of how software is architected this way. If you can, download the trial of Expression Blend, load up an example, and play around. Oh, and I don’t want to hear any flack. :-) I’m a Flasher for life.