Tony Fendall

Animating ProgressBar Skin in Flex

Tony Fendall — Wed, 12 May 2010 07:54:01 +0000

When I was in university (college) I was told a story about a large office building which had notoriously slow elevators. People would often spend several minutes waiting for the elevator to arrive at their floor and the occupants of the building complained about the problem often.

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.

Using Vector Paths with Degrafa

Tony Fendall — Thu, 06 May 2010 08:33:44 +0000

In the last few weeks I have been lucky enough to work alongside Greg Dove. Greg is one of the core contributors to the Degrafa framework, and it’s been a good chance for me to look into Degrafa more and learn what can be done with it.

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.

Facebook Iframe Resizing Solution

Tony Fendall — Wed, 24 Feb 2010 10:29:14 +0000

Recently I have been working on working with a Facebook application which resides within an iframe. However, the application could change size as the UI state changed, and the iframe needed to change size to match.

Luckily for me Facebook provide a prebuilt solution for this which you can drop into your page with only a few lines of Javascript. They even provide a demo application.

Unluckily for me, after following Facebook’s instructions perfectly, the resizing didn’t work!

The behaviour I observed was:

Google Chrome Internet Explorer	The iframe would always open at 800px tall if the height of the content was less than 800px. The iframe would enlarge correctly if the contents grey beyond 800px tall, but it would never shrink.
Mozilla Firefox	The iframe resizing worked perfectly ?!

I confirmed that the demo application Facebook provided worked correctly in all browses, but I just couldn’t get mine to work the same. Eventually I removed lines from the Facebook demo application one-by-one until I discovered what caused my error.

In the end it turns out that it was simply a case of my application not specifying a DOCTYPE in the main html page. After I inserted the DOCTYPE tag from the demo application everything worked perfectly.

It’s a pity that Facebook didn’t mention anywhere in their documentation that this line is critical to the operation of the iframe resizing code. I’m glad things are working for me now though, and hopefully other people will be able to learn from my mistake.

Dynamic UI Components (with source)

Tony Fendall — Sun, 07 Feb 2010 04:16:16 +0000

Back in February 2008 I wrote an application called PostACard which ended up winning the 360|Flex API Contest. I’m really proud of what I was able to create (less than 20 hours total development time) and I have always wanted to go back to it and see if I can extend it further.

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.

Accurate Car Simulation in Flex

Tony Fendall — Thu, 04 Feb 2010 11:20:13 +0000

The demo below came from a technical challenge I set myself a few weekends ago. I often like to set myself small challenges like this… I guess it’s kind of like doing a cross word puzzle.

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.

How to Draw in Flex

Tony Fendall — Mon, 01 Feb 2010 04:27:17 +0000

Eye candy is an important, if often over looked, part of any Flex application. Unfortunately for me, I am much more of a developer than a designer and this has often left me with the short end of the eye candy stick.

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.

Hello, My Name is Tony Fendall

Tony Fendall — Sun, 31 Jan 2010 00:48:54 +0000

This blog represents a new direction for me. My previous web presence was a lot of fun, but over time that website lost its focus and direction.

This is my opportunity to start afresh and I’m really looking forward to it.

Welcome to my new home on the web, it’s great to have you here!