In an effort remedy the problem the owners of the building hired an engineer to come in and recommend ways to speed up the elevator service.  The engineer reviewed the existing elevator system and all compatible upgrade options.  Eventually the engineer came back with his recommendation:

The most cost effective way to improve the elevator service was to cover the elevator doors with mirrors.

The idea was unconventional to say the least, but it was so much cheaper than replacing the existing elevators that the building owners decided to try it.  The employees did not realize that no further modifications had been made, and everyone agreed that the new ‘upgraded’ elevators were much faster than the old ones.

The moral of the story is that sometimes it’s easier to simply distract the user while they are waiting than speed up the thing they are waiting for.  In the elevator story the people were distracted by having something to look at while they were waiting (themselves!) and this was enough to make the wait not feel as long.  This story has always stuck with me and I am always on the look out for places where I can use this principle within my applications.

With this goal in mind I created an animating progress bar skin.  The progress bar fills up at the same speed as any other, but as it does so the texture occasionally slides from left to right. This gives the impression that the bar is moving faster than it is and the whole wait feels much more positive

Check out the example below to see the principle in action.  The top progress bar has a regular skin applied and moves painfully slowly.  The bottom progress bar moves at the same speed but has an animating skin applied.  It’s easy to see that it feels like things are progressing much faster.

The full source code is available here.  Feel free to take it and use it in any way which us useful to you.  This skin has been built using Degrafa so you can easily change the colour scheme and use it in other applications.

The below example is something I created while playing with Degrafa Paths (using my movable components library again).  Paths were a huge revelation for me because they allow you to create skins (buttons etc) with arbitrarily complex shapes.  Now able to create speech bubbles and starbursts without having to embed a PNG asset.  That’s really cool

Try it Out:

The full source code is available here.  Feel free to take it and use it in any way which us useful to you.

Recently I have been playing around with the source code some more and in particular have been trying to see if I could reuse the movable component libraries I wrote.  As part of this I have tidied the code up a bit and have extracted it from the rest of the application.  Check out the demo below.

How it Works:
The movable component framework is based on the MovableCanvas class.  This class can contain movable components and is responsible for managing selections and copy/paste etc.  Into the MovableCanvas we can place any component we wish as long as it extends the class MovableComponent.  In the example below the image components are MovableComponents which contain an Image.

Try it Out:

The full source code is available here. Feel free to take it and use it in any way which us useful to you.

Things to Look Out For:

• The MovableComponent class contains a public function called clone().  You must override this function in order for the copy/paste functionality to work.
• It is also possible to force MovableComponents to maintain their aspect ratio using the maintainAspectRation property.

The challenge this week was to accurately simulate the movements of a car in 2D.  Most people don’t realize this, but when a car turns it is rotating about a point outside itself, and that point is perpendicular to the wheels.  It’s a little hard to explain, but if you check out the demo below then it all should become clear.

This app was challenging mainly due to the geometry involved, and I definitely had to scratch my head for a while before I remembered how to rotate one point around another.  I’m pretty happy with how it turned out however.  It was definitely an afternoon well spent.

Try it Out:

The full source code is available here. Feel free to take it and use it in any way which us useful to you.

A few people have me why I didn’t allow you to control the car using the arrow keys.  The answer is simply that this demo is more impressive when you can appreciate the analogue nature of car steering.

The strength of being a developer however is in the custom functionality we can add.  Recently I have put together a DrawableOverlay Flex component which can be used to allow the user to annotate/draw on any part of the application.

The example application below shows how this component works in practice.  The DrawableOverlay component can be placed over any other components in the application (in this case a Image and a Container) and the user is then able to annotate anywhere within the DrawableOverlay area.

Try it Out:

The full source code is available here.  Feel free to take it and use it in any way which us useful to you.  Come back soon to see me extend this simple example to show off some of the things which are possible.