dispatchEvent() Blog™ » User Experience http://dispatchevent.org Collective thoughts on the Flash Platform, iOS, Unity, and any other technology we use. Wed, 18 Jan 2012 19:16:58 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 What I read and watched on my winter break http://dispatchevent.org/mims/winter-reading/ http://dispatchevent.org/mims/winter-reading/#comments Thu, 25 Dec 2008 01:52:39 +0000 Mims H Wright http://dispatchevent.org/?p=539 Continue reading →]]> I’ve been in Detroit, Michigan with my fiancé’s family this December with nothing to do but hang out. It’s been really amazing. I’ve done a lot of reading about some pretty heady CS topics and also watched a lot of TV. Here’s a list:

Reading:

Movies & TV:

  • No Reservations Marathon
  • The Bear who slept through Christmas
  • Flight of the Conchords
  • Eragon
  • Summer Heights High
  • Scrooged
  • Home Alone
  • Enemy Mine
  • I Am Legend
  • 8-Mile
  • The Serpent and the Rainbow
  • The People under the stairs
  • Die Hard
  • and of course… It’s a wonderful life
]]> http://dispatchevent.org/mims/winter-reading/feed/ 2 Understanding Comics Chrome http://dispatchevent.org/mims/understanding-chrome/ http://dispatchevent.org/mims/understanding-chrome/#comments Fri, 12 Sep 2008 14:50:27 +0000 Mims H Wright http://dispatchevent.org/?p=339 Continue reading →]]>

The launch of Google’s new browser, “Chrome” has a lot of people talking. Rather than bog us down with boring technical details, Google have hired acclaimed comic book artist and author of “Understanding Comics“, Scott McCloud to explain the new features and how they were conceived. It makes for some interesting and very digestible reading.

Understanding Chrome

]]> http://dispatchevent.org/mims/understanding-chrome/feed/ 1 IA Design Patterns http://dispatchevent.org/mims/ia-design-patterns/ http://dispatchevent.org/mims/ia-design-patterns/#comments Tue, 20 May 2008 01:00:12 +0000 Mims H Wright http://blog.extends.eventdispatcher.org/?p=274 Continue reading →]]> Here’s a site with some cool IA patterns.
Nice One
If you liked that, there’s more at Yahoo’s Design Pattern Library.
This link is from Information Aesthetics… aaand there’s more like this on Ethan Eismann’s blog who is incidentally an Adobe Thermo Developer.

]]> http://dispatchevent.org/mims/ia-design-patterns/feed/ 0 Bad Usability Calendar http://dispatchevent.org/mims/bad-usability-calendar/ http://dispatchevent.org/mims/bad-usability-calendar/#comments Thu, 07 Feb 2008 23:16:34 +0000 Mims H Wright http://mimswright.com/blog/?p=238 Calendar
A Norwegian usability firm called NetLife Research has put out their 2008 version of the Bad Usability Calendar. Check it out for the lulz and don’t forget to visit the archive page for more.

]]> http://dispatchevent.org/mims/bad-usability-calendar/feed/ 2 Head Tracking VR Display with WiiMote http://dispatchevent.org/mims/head-tracking-vr-display-with-wiimote/ http://dispatchevent.org/mims/head-tracking-vr-display-with-wiimote/#comments Sat, 26 Jan 2008 03:58:07 +0000 Mims H Wright http://mimswright.com/blog/?p=234 Johnny Lee

Johnny Chung Lee is my nerd hero!

Current Mortgage Rates

Mortgage Rates

]]> http://dispatchevent.org/mims/head-tracking-vr-display-with-wiimote/feed/ 1 The State pattern in Flex – combining view states with logical states http://dispatchevent.org/mims/the-state-pattern-in-flex-combining-view-states-with-logical-states/ http://dispatchevent.org/mims/the-state-pattern-in-flex-combining-view-states-with-logical-states/#comments Wed, 23 Jan 2008 07:15:17 +0000 Mims H Wright http://mimswright.com/blog/?p=229 Continue reading →]]> If you’ve used Flex, you’ve no doubt (er, hopefully) been using View States (AKA <mx:State>) to change the look of your RIA as it progresses through different situations of use. While this is immeasurably useful, it does not necessarily qualify as an implementation of the State Design Pattern which allows you to change not only how a component looks but how it functions as well.
(for more on design patterns, read my favorite book Head first design patterns).

Take the following example for a “Breakfast maker” application.

Download Source!

StateDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" currentState="{ENGLISH}">
	<mx:Script>
		<![CDATA[
			// define the state names as constants
			static public const ENGLISH:String = "English";
			static public const FRENCH:String = "French";

			/**
			 * When the "make breakfast" button is clicked, display the steps
			 * you'll need to follow to make breakfast.
			 * Imagine that you'd need to implement all of these steps as functions
			 * and that there are several more languages to support.
			 */
			protected function onBreakfastButton(event:Event):void {
				if (currentState == ENGLISH) {
					output.text = "Fry eggs" +
								  "\nFry tomatoes" +
								  "\nToast bread" +
								  "\nMake tea";
				}
				if (currentState == FRENCH) {
					output.text = "Tartiner du beurre sur baguette" +
								  "\nMettre le yaourt dans un bol" +
								  "\nTranche les fruits" +
								  "\nFaire cafe";
				}

			}
		]]>
	</mx:Script>

	<!-- Define the changes to the view in the <mx:states> tags -->
	<mx:states>
		<mx:State name="{ENGLISH}">
			<mx:SetProperty target="{breakfastButton}" name="label" value="Make Breakfast" />
		</mx:State>
		<mx:State name="{FRENCH}">
			<mx:SetProperty target="{breakfastButton}" name="label" value="	Préparer des petits-déjeuners" />
		</mx:State>
	</mx:states>

	<mx:VBox>
		<mx:Button id="breakfastButton" click="onBreakfastButton(event)" />
		<mx:TextArea id="output"  height="100" width="250"/>
		<mx:HBox>
			<!-- Swap states using these buttons -->
			<mx:Button label="English" click="{currentState = ENGLISH}" />
			<mx:Button label="French" click="{currentState = FRENCH}" />
		</mx:HBox>
	</mx:VBox>
</mx:Application>

Compiling this code gives you the following…
View SWF

The problem

While there’s nothing inherently wrong with this application, there could be complications when trying to make changes to the logic. First of all, the onButtonClick() handler has to provide different functionality based on the currentState. The states themselves need to add labels to the breakfastButton. Imagine what would happen if you expanded this application to support 15 languages or to create lunch, dinner, and teatime. Things could get out of control fast!

The Solution – applying the state design pattern

The state design pattern allows you to separate out state specific functionality and defer the execution of methods to those state objects.

BasicStatePatternDiagram

I’ll combine the state pattern with the view states by making a currentLogicalState property of the application. This setter will also automatically set the currentState based on a name stored in the currentLogicalState. This is easier done than said…

1. Define a logical state interface

My logical state interface only needs to have one getter for name so that we can associate it with a view state.

ILogicalState.as

package
{
	public interface ILogicalState
	{
		function get name():String;
	}
}

2. create a customized state interface for this application

This interface should contain any methods that are state dependent.

IBreakfastMakerState.as

package
{
	public interface IBreakfastMakerState extends ILogicalState
	{
		function get breakfastInstructions():String;
		function get breakfastLabel():String;
	}
}

Note that this interface extends ILogicalState.

3. create state classes

I’ll create two different state classes, one for English breakfast and one for French Breakfast. Each will implement the IBreakfastMakerState interface and will provide the functionality needed to prepare the appropriate breakfast.

EnglishBreakfastState.as

package
{
	public class EnglishBreakfastState implements IBreakfastMakerState
	{
		public function get name():String
		{
			return "English";
		}

		public function get breakfastInstructions():String
		{
			return "Fry eggs" +
				   "\nToast bread" +
				   "\nFry tomatoes" +
				   "\nMake tea";
		}
		public function get breakfastLabel():String {
			return "Make Breakfast";
		}
	}
}

FrenchBreakfastState.as

package
{
	public class FrenchBreakfastState implements IBreakfastMakerState
	{
		public function get name():String
		{
			return "French";
		}

		public function get breakfastInstructions():String
		{
			return "Tartiner du beurre sur baguette" +
				   "\nMettre le yaourt dans un bol" +
				   "\nTranche les fruits" +
				   "\nFaire cafe";
		}

		public function get breakfastLabel():String {
			return "Préparer des petits-déjeuners";
		}
	}
}

4. Refactor StateDemo.mxml

Finally, rewrite the StateDemo.mxml to take advantage of the new state objects and call it LogicalStateDemo.mxml. (Note, this application should run exactly the same as StateDemo.mxml)

LogicalStateDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"
	initialize="onInitialize(event)">
	<mx:Script>
		<![CDATA[

			// define the logical states as constants
			static public const ENGLISH:IBreakfastMakerState = new EnglishBreakfastState();
			static public const FRENCH:IBreakfastMakerState = new FrenchBreakfastState();

			/**
			 * keep track of the current logical state and when the currentLogicalState changes
			 * update the currentState using its name property.
			 */
			protected var _currentLogicalState:IBreakfastMakerState;
			public function set currentLogicalState(state:IBreakfastMakerState):void {
				_currentLogicalState = state;
				currentState = _currentLogicalState.name;
			}

			protected function onInitialize(event:Event):void {
				currentLogicalState = ENGLISH;
			}

			protected function onBreakfastButton(event:Event):void {
				// rely on the logical state to handle the logic of preparing the breakfast.
				output.text = _currentLogicalState.breakfastInstructions;
			}
		]]>
	</mx:Script>

	<!-- Define the changes to the view in the <mx:states> tags -->
	<mx:states>
		<!-- Name each view state using the name of the logical state -->
		<mx:State name="{ENGLISH.name}">
			<!-- Change the label using a value from the logical state -->
			<mx:SetProperty target="{breakfastButton}" name="label" value="{ENGLISH.breakfastLabel}" />
		</mx:State>
		<mx:State name="{FRENCH.name}">
			<mx:SetProperty target="{breakfastButton}" name="label" value="{FRENCH.breakfastLabel}" />
		</mx:State>
	</mx:states>

	<mx:VBox>
		<mx:Button id="breakfastButton" click="onBreakfastButton(event)" />
		<mx:TextArea id="output"  height="100" width="250"/>
		<mx:HBox>
			<!-- Swap logical states using these buttons -->
			<mx:Button label="English" click="{currentLogicalState = ENGLISH}" />
			<mx:Button label="French" click="{currentLogicalState = FRENCH}" />
		</mx:HBox>
	</mx:VBox>
</mx:Application>

Et voila! A state pattern that works with the existing view states. This may seem like a lot of work for such a simple thing but it will really pay off in the long run on a complicated RIA.

Download Source!

]]> http://dispatchevent.org/mims/the-state-pattern-in-flex-combining-view-states-with-logical-states/feed/ 3 Leopard 10.5 supports 512 pixel icons http://dispatchevent.org/mims/leopard-105-supports-512-pixel-icons/ http://dispatchevent.org/mims/leopard-105-supports-512-pixel-icons/#comments Wed, 28 Nov 2007 16:22:37 +0000 Mims H Wright http://mimswright.com/blog/?p=206 Continue reading →]]> While playing around with Icon Composer in the newest version of XCode Tools for I noticed that Leopard now supports 512×512 pixel icons – much larger than the older 128×128 pixel icons. I assume this has to do with the Cover Flow view for the Finder which displays icons much larger than the other views. Sure enough, Apple have redesigned all their icons for the new format and they look gorgeous. I took some screen grabs of my favourites. Click the thumbnails to see the details. Notice the small text in the iTunes and Dictionary icons and the textures on the truck and the guitar. Hawt!

Click for full size

Dictionary icon

Dictionary



Garage band icon

Garage Band



iTunes icon

iTunes



TextEdit icon

TextEdit



Transmit icon

Transmit


]]> http://dispatchevent.org/mims/leopard-105-supports-512-pixel-icons/feed/ 0 Napkintop web design for maximum impact http://dispatchevent.org/mims/napkintop-web-design-for-maximum-impact/ http://dispatchevent.org/mims/napkintop-web-design-for-maximum-impact/#comments Mon, 26 Nov 2007 23:11:08 +0000 Mims H Wright http://mimswright.com/blog/?p=203 Continue reading →]]> This link is an oldie but a goodie. It has helped me remember to KISS countless times and to focus on the needs of users when designing sites. Check it out.

An Introduction to Using Patterns in Web Design [37 Signals]

]]> http://dispatchevent.org/mims/napkintop-web-design-for-maximum-impact/feed/ 0 How Ironic – Aviary is a CS3 competitor built with Adobe products http://dispatchevent.org/mims/how-ironic-aviary-is-a-cs3-competitor-built-with-adobe-products/ http://dispatchevent.org/mims/how-ironic-aviary-is-a-cs3-competitor-built-with-adobe-products/#comments Mon, 26 Nov 2007 07:36:18 +0000 Mims H Wright http://mimswright.com/blog/?p=201 Continue reading →]]> Aviary

Aviary is a platform ecosystem for people who create. It is organized around a suite of Flex-based rich internet applications geared for artists of all genres. From image editing to typography to music to 3D to video, we have a tool for everything.

Sign up on the site for an early preview invitation. These tools, if not truly competition for CS3, at least look very interesting on the surface. It’s hard to imagine developing so many tools at once.

]]> http://dispatchevent.org/mims/how-ironic-aviary-is-a-cs3-competitor-built-with-adobe-products/feed/ 0 Thermo makes us all a little less dumber http://dispatchevent.org/mims/thermo-makes-us-all-a-little-less-dumber/ http://dispatchevent.org/mims/thermo-makes-us-all-a-little-less-dumber/#comments Thu, 04 Oct 2007 16:02:57 +0000 Mims H Wright http://mimswright.com/blog/?p=185 Continue reading →]]> It’s the classic story in Flash development. A designer puts hours and hours of work into a Photoshop document or a Flash animation that ultimately gets thrown away and rebuilt when it comes time to develop the application. I’ve often wondered if this could be fixed by having information architects do their wireframes in FlexBuilder’s design view. Apparently, Adobe are on the same line of thinking and are taking a crack at solving this problem.

The solution they’ve come up with is a Dreamweaveresque WYSIWYG editor that can convert Photoshop elements directly into functioning Flex code. They call it Thermo and here is a sneaky video preview of it.

]]> http://dispatchevent.org/mims/thermo-makes-us-all-a-little-less-dumber/feed/ 0 Makibishi Comic http://dispatchevent.org/mims/makibishi-comic/ http://dispatchevent.org/mims/makibishi-comic/#comments Sat, 28 Apr 2007 19:36:15 +0000 Mims H Wright http://mimswright.com/blog/?p=148 Continue reading →]]> Makibishi Comic 1
Makibishi Comic 2

Makibishi Comic is a beautiful, silly, and very strange Flash based puzzle game. The objective is to find the 5 ninjas who are hiding from you by clicking through riddles. The puzzles are just challenging enough and the illustration is amazing.

Warning – You may be tempted to spend an hour playing this game, as I was.

]]> http://dispatchevent.org/mims/makibishi-comic/feed/ 0 How to replace HTML with Flash http://dispatchevent.org/mims/how-to-replace-html-with-flash/ http://dispatchevent.org/mims/how-to-replace-html-with-flash/#comments Tue, 27 Feb 2007 20:05:52 +0000 Mims H Wright http://mimswright.com/blog/?p=106
  • Create your page
  • Replace the text
  • Replace the images
  • Replace everything else
    • ]]>     http://dispatchevent.org/mims/how-to-replace-html-with-flash/feed/ 0     Napskin http://dispatchevent.org/mims/napskin/ http://dispatchevent.org/mims/napskin/#comments Mon, 05 Feb 2007 16:53:20 +0000 Mims H Wright http://mimswright.com/blog/?p=96 This guy who doesn’t have an about page talks about creating a custom skin in Flex based on numbers he’s received from ladies (your mom) at bars.

    Napkin Skin

    On Reflexion

    ]]>     http://dispatchevent.org/mims/napskin/feed/ 0     Oldest New Feature Awards http://dispatchevent.org/mims/oldest-new-feature-awards/ http://dispatchevent.org/mims/oldest-new-feature-awards/#comments Mon, 22 Jan 2007 16:26:31 +0000 Mims H Wright http://blog.mimswright.com/?p=83 Continue reading →]]> OK, OK, I promised myself I wouldn’t knock on Vista until I’ve really given it a fair shot, and I think that’s what I was doing when I went to the Vista features showcase too see what fantastic new innovations are on their way from Redmond. I’m sure it’s no surprise that most of them had already been fantastically innovated by their competitors.

    But there are some among these which many of us have been enjoying for so long now that they are as much features of an operating system as a steering wheel is a feature of a car. So without further ado, I present

    The Oldest New Feature Awards

    The Michael Chertoff Award for Preparedness goes to

    Security

    Security

    Windows Vista includes compelling security features that make it even more secure than earlier Windows client operating systems. You can achieve your business and computing goals with confidence, knowing that Windows Vista provides more protection against the latest generation of security threats through new features and fundamentally more secure architecture.

    Windows Vista also builds upon the User Account Protection initiative by default, limiting Internet Explorer 7 to just enough permissions to browse the web, but not enough to modify your files or settings keeping your PC safer from web-based attacks.

    So let me get this straight, when you’re browsing the web, don’t expose system files to hackers. Why didn’t I think of that!?

    The William Lumberg Award for Office Achievements goes to

    Fax

    Faxing and Scanning

    Faxing and scanning functions come together in Windows Vista through Windows Fax and Scan. Sending and receiving faxes through your PC is now as simple as performing the same tasks on a fax machine, especially for digital documents.

    Only for Windows users would performing tasks on a fax machine actually be considered simple.

    The Linus Torvalds Award for Best Thing about NOT using Windows

    Sleep

    Sleep

    Windows Vista introduces a new power state called Sleep. The new Sleep state in Windows Vista combines the speed of Standby with the data protection features and low power consumption of Hibernate. Resuming use when your PC is in the Sleep state takes just 2-3 seconds. You can shut down and restart your computer less often by using the new Sleep state, a simple one-click on and off experience which not only reduces power consumption, but also helps protect your data.

    My Powarboke has done this for years, but you’ll be amazed at how great it is when you turn off Vista!

    ]]>     http://dispatchevent.org/mims/oldest-new-feature-awards/feed/ 0     PhotoShop CS3 Public Beta Drops http://dispatchevent.org/mims/photoshop-cs3-public-beta-drops/ http://dispatchevent.org/mims/photoshop-cs3-public-beta-drops/#comments Fri, 15 Dec 2006 22:41:08 +0000 Mims H Wright http://blog.mimswright.com/?p=65 Continue reading →]]> Photoshop CS3 Logo

    I know what you’re thinking, “that’s so 6 hours ago.” But nevertheless, Adobe has just released a public beta of the new version of PhotoShop. It offers a load of improvements to non-destructive editing, a redesigned UI, and support for new Macs and Vista.

    Go get PS!

    Taking a back seat to PhotoShop is the somewhat less glamourous release of JSEclipse, a plug-in for the Eclipse tool (upon which Flex Builder is also built). Also, a new update to the Spry framework. Both could be very interesting. I’ll probably end up using the JSEclipse plug-in to write WPF/E code. LOL

    Go get JSEclipse!

    Go get Spry!

    See the full review after the jump

    I’ve only played with this app for a few minutes so far but I’ve already found some very exciting new features. I’ll list my favorite first impressions here. [I should note that the last version of PS I used regularly was CS1 so please forgive me if I accidentally get excited about something that's not new.]

    Smart Objects & Smart Filters

    The coolest thing by far is Smart Objects and Smart Filters. This is essentially your method for doing non-destructive edits. Converting a layer to a smart object recreates it as a dynamic photoshop file that you can edit as its own composition. It allows you to apply smart filters which are like adjustment layers but include the entire set of filters, yes, even gaussian blur.

    Smart Objects and Smart Filters

    Quick Selection Tool

    This tool is filed with the magic wand tool. It allows you to draw over the shape of an object to magically select exactly what you want. It’s like a marriage of the magnetic lasso and the magic wand tools. It’s incredibly useful and intuitive.

    AutoSelection Wand

    Refine Edge

    PS CS3 wraps up several of the selection refinement tools into a new dialog called Refine Edge. This let’s you play around with the selection’s edges with much more control than before. A preview window shows you what you’re doing and there are matting options so you can choose the best background to work from.

    Refine Selection Edge Dialog

    Surface Blur

    One neat addition is the surface blur which blurs out the textures of an image selectively while keeping the general shape of the image intact. Depending on how you adjust it, it kinda makes the subject look like it was drawn in illustrator but in a much less tacky way than posterize.

    Surface Blur Filter

    Compatibility

    It’s been about a 20 months since CS2 launched but it feels like it’s only been about a million years. Time flies when you’re running PPC apps on a macbook! The new version (supposedly) works great on PPC, Intel, Win XP and Vista. My experience on a MacBook Core Duo have been very smooth so far. There are no significant lags even when working with RAW files. Adding lots of SmartFilters and layering causes some slowdown but that’s nothing new.

    Toolbars & Workspaces

    CS3 has a brand new look that I’m not sure whether I like yet. The toolbar on the left is compacted into a single column. The panels on the right have been organized so that they group themselves together into little expandable icons. They’ve also added a workspace dropdown that lets you switch workspaces easily although this seemed to be broken or unimpressive. The menus are also enhanced with highlighted words based on what workspace you’re in. It’s a little jarring but it might be useful in the long run. Time will tell.

    Workspaces

    Image Processor

    Finallly, a much needed feature the Image Processor script allows you to batch process images into another format and apply actions at the same time. The old way of doing this was to either write an AppleScript or JavaScript or use Actions to process the images. I’m sure I’ll use this quite a lot when preparing assets for the intarwebs.

    PS3 Image Processor Script

    These are just my initial reactions. I hope to write some more after I’ve had a chance to play with it some more. Prognosis: w00t!

    ]]>     http://dispatchevent.org/mims/photoshop-cs3-public-beta-drops/feed/ 0