Example – Tony Fendall

Dynamic UI Components (with source)

Tony Fendall — Sun, 07 Feb 2010 16: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 23: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 16: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.