I love this. What it would be like if clients treated other professionals the way they treated Freelancers. So very true.

http://www.vendorclientvideo.com/

I recently discovered Skitch and have been raving about it as an Image Markup application. I’ve now also discovered that the Aviary suite also has an Image Markup tool called Falcon that works inside the browser and is coupled with a Firefox extension called Talon for quickly accessing the tools required to do a snapshot. This got me very excited as although I love Skitch for what it does and how well it does it the allure of doing the same thing completely in the browser was too much to ignore. So I’ve done some tests and here are my thoughts.

The Aviary Firefox plugin is great and allows you to launch your Aviary apps via a neat little menu bar button (although I wish it stuck to the design of the other buttons). The snapshot options allow you to choose a section of the screen, the visible area and also the entire page including the complete drop. This is also available in another plugin called Screengrab! and was a very useful way of viewing the design of a site outside of the browser. You can grab sites you admire. Like this one.

The first thing I noticed was that after selecting my snapshot area and hitting the save button it launched Aviary’s default Image editor Phoenix. I then had to save and create a file to open in Falcon. When I did eventually get to edit my image in Falcon I found it to be pretty much the same as Skitch as far as toolset and styling. Performance wasn’t as fast as Skitch overall but this is due to the Flash player and being inside the browser. Personally, this is the biggest issue though. For what I need to do with a tool like this the overall experience was too time consuming and I will be sticking to Skitch for the time being.

This is not to say that the Aviary suite will not be used. It’s important to remember that the Aviary snap will allow you to quickly get a screengrab into a very powerful suite of applications so if your work involves a bit more than just making notes and drawing arrows then this will be the better option. For example, if you were a designer working on some branding ideas and had snapped a logo you liked for inspiration you could very quickly get that snapshot into Raven (Aviary’s vector editor) and draw some curves out over the logo; rapidly generating some ideas for use later. Photographers could grab a snapshot of a photo from a site and open it in Peacock (the effects editor) so they could quickly play with some effects and ideas to use in their own work.

Aviary – I would allow users to login via the Firefox extension and set Falcon as an option when opening your snapshot.
Skitch – something I’d like to see in your tool as it stands is the ability to select an area or the entire snap and scale it up WITHOUT interpolation. I need to zoom in to show individual pixels sometimes.

Another feature I would love to see in any of these tools is the ability to draw a rect around an area of the snapshot and automatically render the rect’s dimensions in pixels next to the rect area. Sometimes I want to measure an area of the screen. The same kind of tool for stamping out the HEX colour of the pixel I’ve clicked on with an accompanying arrow or crosshair. This would be a great way for designers to deliver their designs to developers with dimensions and colour values all set out for them.

http://aviary.com/tools

http://skitch.com

UPDATE:
doodle.png on Aviary.
The plugin is available here.

View on skitch.com

This is what happened when I tried to view this Silverlight port of Quake 1. I didn’t get the message for 5 minutes and then when I clicked ‘yes’ I was sent ot the site to upgrade my plugin. It told me I had the latest plugin and so I tried again. The same thing happened. I guess it may be something to do with being on a mac in Firefox but still … sort out the detection boys. Take a look at the Express-Install feature of the Flash Player plugin.

Here’s a Button sub-class that will allow you to tint your Button icons when you interact with them. The tinting is all controlled via CSS. The example below also uses a Degrafa stateful skin (see previous article here).

The Button component creates an icon for each state even if you only have one image and the icons are added to the Buttons Display list as required. As you can see in the sub-class below the tinting of the icons is handled in the ‘added’ event handler. The Button component has set names for each of the icons it creates for each state. You can use the mx_internal namespace to access the classes CurrentIcon property but this is dodgy and the method shown works well and is future-proof. Well, saying that this entire example can probably be done much easier using FXG in Flex 4 but for all of you still battling it out in Flex 3 this technique should save you the trouble of saving out lots of different images for all your button states so long as your icon is a flat single-coloured symbol.

… and here’s the Application class with the styles for the icon tinting:

you don’t need to use Degrafa to do the skinning of the button and the icon tinting will work without any skins but I threw one in just because I’m enjoying using them at the moment. Here it is :

Download the Source

UPDATE: In the Source doc generated by Flex the Metadata for the Styles seems to have been written incorrectly. The correct way to assign custom style metadata to your class is like so …

[Style(name="iconUpTint", type="uint", format="Color", inherit="yes")]

Not sure why the doc was mis-read.

Finally a cross-browser, cross-os browser testing platform …

BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web. Also, Adobe Dreamweaver® CS4 software users have access to additional functionality such as testing local and active content.

Now I wonder if it will also allow for multiple plugin configurations.

https://browserlab.adobe.com/index.html#
http://labs.adobe.com/technologies/browserlab/

I’ve been using Degrafa lately to build programmatic skins for a Flex theme. Degrafa is a ‘Declarative Graphics Format’ that allows you to draw graphics using MXML. This isn’t all it does though. You can use binding to dynamically adapt the graphics and it also extends your ability to change the styles of skins with CSS. I’ll be looking closely at that next as it does look rather interesting.

Degrafa is very powerful and I think I will continue to use it even when I’m deep into Flex 4 and FXG which uses very similar syntax.

The latest version of Degrafa allows you to add states to a skin so you can easily change the visual appearance based on the state of the skinned object. Here’s an example …

If you view the source (right-click in the iFrame) and take a look at the PopButtonSkin class you can see how this simple PopMenuButton component was skinned without any graphics files.

And here’s the Application file for you to look over. You can also grab the source from the example above by right-clicking and ‘viewing the source’.

The main thing to know about PopButton components in Flex is that they have extra button states that you need to know about. They are the pop-up-over and pop-up-down states. It is these states that are triggered when the user is interacting with the ‘arrow’ part of the popButton although this symbol is only part of the default halo skin. Also, the arrow can be changed for any icon. Remember that the skin for these states covers the entire button and isn’t an overlay over the hit area. In my example I’m drawing a backslash where my arrow should be until you roll over and it prompts the interaction.

Notice in the skin file that the fills and strokes are created separately from the Geometry. This is very useful as it means you could create a completely separate file to manage the palette of your app. I don’t just mean the colour scheme though. You can set out all your grads, stroke weights and fills and then reference them in different skins to ensure consistency.

The geometry is very straightforward and the skinWidth and skinHeight properties ensure the skin fits the component perfectly. Notice my borders are comprised of three rectangles overlaid and I’m offsetting them to create a border around my button. I could have used two rectangles with strokes to get the same result. The strokes use gradients too.

Before Degrafa introduced states you would have a whole bunch of objects declared in your geometry and would differentiate each object with the button state by using the objects state property. This could get quite messy. Now you will notice that the states are set separately and work in just the same way that you would expect. You can adjust the properties of objects, add and remove children and you can base one state on another to avoid any duplication of code. Overall this is a very neat way of creating skins.

Notice I add the IsocelesTriangle AutoShape to the geometry only on the over state. The down state is based on the over state so it will retain the arrow. This arrow could also be animated when you click by creating a tween and effecting the RotateTransform angle property.

The next step is to add filter support and transitions. I’ve seen some animation done with Degrafa that seemed very easy to implement … it’s time to play some more.

I discovered Skitch a few days ago now and it has suddenly become completely invaluable to me. Skitch is a screen-grab app for OS X that allows you to quickly annotate and sketch on your grab before quickly uploading it to their site (or Flickr, FTP etc) and then link to or embed it into a blog. Note the use of the word ‘quickly’ there. That’s the key to the success of this tool and why it has become a staple in my arsenal of day-to-day tools.

I use this to grab images of UI work I’m doing, annotate it, upload it and then post a link to the image within a Basecamp message for my client to look at. It’s proven really useful.

While I’m waxing lyrical about tools I’m using here’s a quick list of other great tools I’m using and couldn’t live without at the moment with a quicker reason why.

Firebug – Firefox plugin for debugging CSS, HTML and network activity as well as Actionscript logging via Thunderbolt.

PixelPerfect – overlay a comp in your browser so you can match your development to the designers vision. This saves you a lot of time and effort screen grabbing your dev in the browser and overlaying the results in Photoshop with the original design to see if it all matches correctly. It is still a bit fiddly though and I would love to see an ‘onion-skin’ mode in Apple’s Preview app so I can just sit a window over the browser to do the same thing.

Pixus – this little AIR application is the nicest set of screen calipers I’ve used yet. I did find a screen ruler AIR app called ‘rulers’ but it didn’t allow you to change the registration point which rendered it almost useless.

Evernote – I use this all the time now. Any notes, images, ideas, links etc all get clipped to my Evernote account for safe keeping. Will be the first app I buy on my iPhone when I get one too.

DropBox – store files in the cloud but drop them in there via the finder as if it was on your machine. This works just like your iDisk but allows you to quickly grab the public link and paste it into an email.

MAMP – virtual apache server and MySQL server. Just works instantly. I used to spend days trying to get this stuff to work. Now I can build Wordpress themes straight from localhost.

Basecamp – awesome Project management site online. Even if you find yourself flying solo on a project this app will help you stay organised and in control. Use it with Skitch to post grabs of your work and you will never need to clog up in-boxes again.

Versions + Beanstalk = great subversion management. I’ve tried to setup repositories in the past and have had some success but mainly headaches and have lost the files over time. Beanstalk is a site/service that gives you space to store your source code using subversion. Versions is a really nice Mac desktop app that will then allow you to manage the repositories you create. I know keep all my source code in the cloud so I don’t need to worry if my machine fails.

There’s so many more great tools being developed. Please let me know about yours.

I’ve been seeing a lot of very clever spam getting through Askimet’s net lately. At first they completely threw me and I let them go. It’s only been recently that I’ve delved deeper and realised that everything isn’t as it seems. These are comments I’ve received …

is there a FREE program that i can add alpha channels to png imagesIMPORTANT: please include a tutorial on how …

and this equally baffling one …

Interesting. Not that bad as you are saying. Keep trying. Thanks

These comments were not completely out of context to the posts they were commenting on but were contextless enough to seem … well, odd.

Digging deeper (but not too deep) revealed that the authors were an assortment of retailers and services that could only have been spam clientele. You have to hand it to the spammers though, this is very clever spamming. They seem to be able to generate the comments based on other comments on the same subjects or are able to structure generic comments that fit the tone of the post.

Pearl has a similar problem and a great church sign image here.

Thom James has an interesting post on a similar and much less perceptible comment spamming technique here.

Anyway, I’ve installed reCaptcha to try and stop this. ReCapthcha has a novel way of using the data that users input …

reCAPTCHA improves the process of digitizing books by sending words that cannot be read by computers to the Web in the form of CAPTCHAs for humans to decipher. More specifically, each word that cannot be read correctly by OCR is placed on an image and used as a CAPTCHA. This is possible because most OCR programs alert you when a word cannot be read correctly.

But if a computer can’t read such a CAPTCHA, how does the system know the correct answer to the puzzle? Here’s how: Each new word that cannot be read correctly by OCR is given to a user in conjunction with another word for which the answer is already known. The user is then asked to read both words. If they solve the one for which the answer is known, the system assumes their answer is correct for the new one. The system then gives the new image to a number of other people to determine, with higher confidence, whether the original answer was correct.

Some of you may remember I tried to embed a screen recording captured with Jing but it wouldn’t resize the FLV stream to fit the SWF. The player provided by ScreenToaster works a bit better because it fits almost perfectly within the width of my post but allows the user to go fullscreen to see the action. What is interesting about ScreenToaster is it also allows you to embed your webcam stream as a little thumbnail at the bottom of the screen. More on this soon.

The video below is a failed attempt at a Flex tutorial on the Tree component post I wrote recently. Please don’t expect to learn anything.

Following on from the recent post about automatically closing the open branches of the Tree control when you open a new branch; this is a slicker implementation that does the same thing but allows you to keep the animation. Currently the Flex control falls over if you try and animate multiple branches opening or closing.

The main thing to point out here is that this example also works if you click the Tree disclosure icon (the little triangle) as well as the item. Most of the examples out there in the blogosphere that show you how to click on items to open branches forget that the disclosure button will open/close the branch and ignore the itemClick handler you’ve setup.

I listen for the itemOpening and itemClick events and pass on to a method called handleSelectedItem. This method then checks the depth of the selected item like so.

This looks crazy but you need to grab the itemRenderer’s listData property to find the depth of the object. It’s quite convoluted but you can grab the renderer with the Tree’s itemToItemRenderer method, cast it to the default TreeItemRenderer class and cast the listData property to the default TreeListData class to get the depth property off that … phew!

We need the depth because I only want to work with the root level branches which is level 1 in the case of a Tree. I then cycle through the Tree’s dataprovider which gives me the items in my XMLListCollection. These will correspond to the root level items as they are XML nodes with all of the children nodes (branches) in them. I can then look for siblings to the selected item using the getRoot method and close any open siblings.

I create an eventListener to listen for when the open root level branch is closed and because there will ever only be one branch closing I can use animation. The openInstantly Boolean prevents the selectedItem from opening … yet. When the closed item has finished I run a short Timer delay to make sure the animation listeners are all cleared and then open the selected item.

Here’s the Application class: