Photoshop Express: Novice User Experience

I am by no means a designer. I do like to take pictures now and then, retouching them and sharing them with friends and family. While I've got CS3, it's an intimidating and complex product for my needs. This probably places my in the demographic targeted by Photoshop Express: nondesigners who want to do a little retouching and sharing.

I fired up the beta this morning, and here's the summary of my experience.

No custom loader?

If it's this high profile of a RIA, I'd expect a more branded version of the stock Flex application loader, even if it's just the Ps glyph over the progress bar.

Better-than-average Flex form validation

I'm not a huge fan of default Flex form validation, where you just glow the incorrect fields. I love how the signup form alerts you with what's wrong then returns you to the form with the incorrect fields highlighted, still showing intelligent messages on focus. The glowing fields did omit passwords not matching, though - probably a quick fix!

And is it a coincidence that my captcha contained "PDF"?

Verify account? What the heck?

Why am I taken to an HTML page asking me to verify my account instead of having this shown in the main Flex app? Why does this link take me to another HTML page that then links me to the Flex app? Kind of a wonky workflow that could've been done without ever leaving the app...

Quick Start -> Upload Photos

Oh my, this is slick. Someone really thought through getting a new user started. You want to get started immediately? Click Quick Start to drop to your library and be immediately prompted to upload a photo. Select a photo (or photos) and you get a great Flex UI showing you progress of your uploads. 54% and waiting...

Opening a photo

Ok, I see my photo..click. Nothing. We're so used to the Web that we've become single-click beings. Double-click...ok, now I'm editing. I guess I could've used the "Photo Options" or "Edit Photo" button, too, but some sort of action on single click would be nice.

Autocorrect and other basic tools

I expected to click "Autocorrect" and get a corrected image. What I got instead was a great surprise - it gives you its best guess as well as thumbnails of a few other correction candidates. Absolutely great for a nondesigner like myself! Rollover a thumb, and it'll show it to you in the large space. Click and hold "View Original" at any time to see what you started with. Sliiiick.

Ok, I'm all corrected and balanced...let's share this out so you can see what I've done.

Sharing Photos

Where's the Share button? Can't find it on the editing screen. Let's try Saving to see where I go...

Nothing saying "Share," but there's an E-Mail Photo and Create Album option. Maybe an Album is shareable to you?

Select two images (edited and an original copy I uploaded), create an album, and "Share Album," and it looks like we're good to go. Maybe a changing "Create Album" to "Create and Share Albums" would be good.

Anyhow, I'm now sharing the Album on My Gallery, but I'm not sure how to give you a URL to it. I could e-mail friends, but I'd rather have a link.

Ah, ok. Once in your gallery, you can choose an Album, click "Link" or "Embed," and you get some bits. Might be nice to just show these options on the prior screen as well as on the Album viewer itself.

Embed is cool! Here's a preview and link to the album

Summary

Absolutely great tool when it comes to allowing a nonphotographer / designer like myself to tweak pictures and catalog my photos. It took me a bit to learn how to use it, but I won't be forgetting what I found. I think there's a bit of room for making things easier on the user when it comes to sharing, but I dig it.

Flex "RadioButton" ListItemRenderer

I'm becoming an ever increasing fan of the way the Flex visual components were built. Yeah, some things are private when protected would be nice, but for the kind of data-focused work I do I find myself rarely getting stuck. On top of that, building Flex widgets is the perfect 3:00AM brain exercise for when our 3 month old daughter wakes me up.

Anyhow, I needed a better way to show long lists of radio buttons in a UI. Using a repeater just kind of stank - I wanted something that worked like a normal list, but showed a RadioButton beside each item. Thirty minutes later, I was in business:

I decided to blog it as it's a dead simple example of how to extend a base Flex component, add additional visual children, and control both the layout and data-focused aspects through the UIComponent "lifecycle" methods and Flex events.

Here's the code for the renderer:

package com.firemoss.controls.list
{
   import mx.controls.RadioButton;
   import mx.controls.listClasses.BaseListData;
   import mx.controls.listClasses.ListBase;
   import mx.controls.listClasses.ListItemRenderer;
   import mx.events.ListEvent;
   
   public class RadioButtonListItemRenderer extends ListItemRenderer
   {
   
      /**
       * Radio button shown at left of control.
       */
      private var radioButton:RadioButton;
      
      /**
       * List owning this renderer.
       */
      private var list:ListBase;
      
      /**
       * Override createChildren() to create a radio button.
       */
      override protected function createChildren():void
      {
         super.createChildren();
         
         // Create our radio button and add it to the display list.          
         this.radioButton = new RadioButton();
         this.addChild(this.radioButton);
      }
      
      /**
       * Override updateDisplayList to position radio button
       * and shift label.
       */
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         // Shift what super thinks of width by our radio's width...          
         super.updateDisplayList(unscaledWidth - this.radioButton.width, unscaledHeight);
         
         // For my purposes, a hard width is fine.      
         
         this.radioButton.width = 25;
         
         // Place our radio          
         this.radioButton.x = 6;
         this.radioButton.y = this.height / 2 - this.radioButton.height / 2;

         // Slide that label over          
         this.label.x = this.radioButton.width;
         
      }
      
      /**
       * Override the listData setter to add listener for changes to the owner (List selection change)
       */
      override public function set listData(value:BaseListData):void
      {
         super.listData = value;
         
         // If we're in the right condition          
         if (value.owner is ListBase)
         {
            // Remove event listeners from any prior assigned list             
            if (this.list)
            {
               this.list.removeEventListener(ListEvent.CHANGE, ownerChangeHandler);
            }
   
            // Keep the list around             
            this.list = value.owner as ListBase;
            
            // Watch the list for changes to its selection             
            this.list.addEventListener(ListEvent.CHANGE, ownerChangeHandler, false, 0, true);
         }
      }
      
      
      /**
       * When the list's selection changes, update the state of the radio button.
       */
      private function ownerChangeHandler(event:ListEvent):void
      {
         // If the list has a selection and it's this renderer's data, check the button          
         this.radioButton.selected = (this.data != null && this.data == this.list.selectedItem);
      }
      
   }
}

Enjoy, and happy listing!

Custom Flex ToolTips made easy with CustomToolTip

Over the past year, I've spent a good deal of my time reconciling what designers create with what Flex provides. One of the items I run into most frequently is the need for a seriously custom tooltip: images, formatted fonts, etc.

Until today, my approach matched many others, handling the toolTipCreate event and setting the tooltip to use manually. This got a bit repetitive, so I've wrapped up the logic in a CustomToolTip class (attached to this blog entry, download it here) that makes it a declarative process.

You simply state the component creating the tooltip (the "source") and what class to use (not instance, but class!) as a ToolTip (the "renderer"):

<tooltip:CustomToolTip source="{someButton}" renderer="{com.myapp.SomeToolTip}" />

<mx:Button id="someButton" label="Some Button with a Custom Tooltip" toolTip="someTooltipText" />

When the button is moused over, a new instance of com.myapp.SomeToolTip will be created.

If your renderer class implements ICustomToolTip (in the attached .zip), it'll have the source's instance set into its "source" property. This allows you to place a custom tooltip on something like an itemRenderer and access its underlying "data" property.

Flex 3 SDK and BlazeDS in Subversion Repos!

How cool is this? It looks like Adobe's taking their Open Source stance pretty seriously. If you want to get your hands on BlazeDS or the Flex 3 SDK, they're using straight-up Subversion repositories that you can directly access!

For example, I'd like to look into why circular references are such a bear to serialize / resolve. Now, I can geek to my heart's content looking at the serialization code directly in the repo!

Silverlight 2: Looks good!

Odd for me to say something positive about Silverlight. I tried 1.0, and sort of gave up. After reading Scott Guthrie's blog entry about Silverlight 2.0, I might have to give it another shot - I like C#, but just can't stand ASP.NET.

What I really like about the Silverlight 2.0 screenshots shown is the the darn thing looks good. Frankly, out of the box Flex looks pretty lousy next to it. It's got clean scroll bars, good-looking buttons, and I don't see anything that's the weird-shade-of-blue-green-not-found-in-nature that's all over default skinned Flex apps.

Odd to see a Microsoft product that's graphically more pleasing than something from Adobe. Maybe Flex 4 (or a 3.01) could bring about a real skin update that makes our default applications look halfway decent?

30onair - cf.Objective Scheduler

I posted a 30onair video over at YouTube today showing the first pass at the cf.Objective 2008 conference scheduler application I'm working on.

I've spent about 3 hours on it, and it's already pretty usable!

DTO's Part 1: Real-World Flex, ColdFusion, and Java Can Be Painful!

This is the first blog entry in a series (that'll be completed in an asynchronous manner...) about managing data with Flex. I've been talking to a number of ColdFusion and Java developers that encounter the same problems with using Flex in a real-world, non-classroom situation where managing data and instances becomes problematic. Through this series, we'll be exploring solutions to these problems.

[More]

Flex Skinning: Too easy with CS3 and FB3!

From about 2001 to 2003, I spent a good deal of my time writing ColdFusion applications that backed Flash movies, first with loadVars() and then the blessing of Flash remoting. Flash is really the only "design" package I've ever felt comfortable with, and since I stopped working with it, I've really lost touch with skinning or designing just about anything.

Until now.

With Flex Builder 3 (Beta 3) and Flash CS3 (or just about any CS3 design product), I can skin my Flex apps pixel-perfectly with almost no sweat.

If you've got FB3 and Flash CS3 installed, here's a quick tutorial (works almost the same for Photoshop or Fireworks, too!):

  1. Install extensions.

    The Flex Skin Design Extensions for Flash CS3 are available on the Adobe Labs site. They install like any other extension pack.

  2. Open template.

    Start Flash and create a new project based on any template from the Flex Skins category. Let's use a button for our example:

  3. Redraw the Button to your liking.

    Seriously. World's your oyster (with some limits). Redraw that thing and do a basic Save / Publish to create a .SWC.

  4. Import into Flex

    Open up your Flex project, right click it, and do Import -> Flex -> Skin Artwork:

    Choose the .SWC you just exported from Flash. Select (if necessary - for this simply example, it isn't!) which parts of the skin to import and click Finish:

    It'll ask you if you want to to generate and include the necessary CSS automatically - say yes as you can just clean up the new .css file later:

You're done. Seriously. It'll 9-slice nicely (did you see the dashed guides in Flash), import your new css, and compile your new skin right into you application.

How slick is that? I think I'm going to move beyond my basic "white" CSS file that I use in all my Flex projects!

Flex Configuration Demystified: services-config.xml, Destinations, and Channels

For a long time, my IM status really was "LCDS configuration sucks," and I meant it. I found its XML files very intimidating, and I deal with XML-based frameworks on a daily basis! Over the past week, I've come to realize it's not that bad. More than anything else, it was the documentation that got me a bit backwards. I don't know if it has to do with its style or my method of comprehension. It seems to immediately dive in to minute configuration detail without ever giving a high-level overview of what all the stuff it talks about actually is.

[More]

A J2EE Flex dev environment a ColdFusion guy can use!

I've done a little bit of Flex work with Java RemoteObjects. I enjoyed the code side of it, which is where I was helping out, but the server deployment seemed very confusing and the development environment I encountered was painful, involving compiling a Java web app, deploying, compiling Flex app, running, debugging Java app via its logging, wash, rinse, and repeat.

[More]

More Entries

© 2008 Firemoss, LLC
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.