Here’s a first version of a simple Ruler component that takes some of the techniques discussed in the couple of previous post into account.

The ruler can be scaled down or up by holding CTRL/SHIFT while clicking and can be moved by holding the ALT-Key and keeping the mouse button pressed. When scaling an animation is applied for smoother transitions. For the labels an array of Strings can be set, each one defining a division on the ruler. The number of subdivisions can be set as well

Simple ruler component. View source is enabled.

Custom GraphicElement to draw tick lines

Instead of using and FXG-Path element a custom GraphicElement has been created to draw (more…)

Mobile Flex Apps are around the corner. Hence it might be a good thing to inspect some of the more light-weighted approaches of Flex to create visual elements and components that can take part in the Spark layout process. In this last example I had a look at SpriteVisualElement.

Now, it’s time for the GraphicElement.

Example using custom Graphic Elements. View source is enabled.

The GraphicElement and its subclasses are responsible to draw a significant amount of the Spark components graphics. FXG elements like Rect, Path, Line etc. all derive from GraphicElement.

A GraphicElement is actually neither a DisplayObject nor does it offer any form of interaction. Its super class is the EventDispatcher and it uses an (more…)