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…)

During the past year I’ve posted a couple of custom Gumbo (flex 4 beta) components and skins.

Since they’ve been built on beta sdks, these components might need some adjustments to work with the Flex 4 release sdk.

To save you the work of figuring out what to adjust here are the most requested components updated to Flex 4 release sdk. Click on the images, view source is enabled.

Flex 4 Spark Rating Component. View source enabled. Original post here.

Flex 4 Spark Icon Button based on a generic skin.View source enabled. Original post here.

Flex 4 Spark icon button. View source enabled.Original post here.

Flex 4 Spark custom checkbox. View source enabled. Original post here.

Flex 4 Spark custom knob button. View source enabled. Original post here.

While updating the Gumbo-Components on this blog to flex 4 final I noticed that the style-property baseColor has been changed to chromeColor.

In addition to this the flag useChromeColor can be set to tell the SparkSkin to use chromeColor for colorization. For custom skins this can be set by overriding initializationComplete() in the skin.

override protected function initializationComplete():void  {
 
	useChromeColor = true;
	super.initializationComplete();
}

Internally Flex checks this flag in updateDisplayList() of a SparkSkin and uses the value in chromeColor for colorization (respecting exclusions in get colorizeExclusions()).

If you are using Gumbo-Components from this blog that use baseColor be sure to make these adjustments.

I was experimenting a little with the PopUpAnchor in Spark Flex 4 and came up with a new custom component for ratings. The new component has the following characteristics:

• Show a placeholder-icon that reflects the current rating and serves as an interactive element to open the ratings
• ratings pop up for adjustment
• both the placeholder-icon and the ratings-icons will be gradually filled with color when adjustments are being made
• the icons are defined in FXG
• the icons are not defined in the skin but can be passed as a style for generic use (one skin for different icons and ratings)
• there is colorization of the icons based on styles
• smooth transitions when opening the ratings

Here’s a pseudo city-rating demo that shows variations of the component using different icons and color settings for different ratings.

You’ll find the source at the end of this post. It is (more…)

update: Check this example for a more advanced and generic approach

Here’s an example of a Spark Icon Button done in Flex 4. There are smooth transitions on the background gradient between the up and over states. From the over state to the down state the shadows are removed smoothly. Each button has a different base color.

Click here for a demo.

Apart from the new skinning architecture there are a couple of (more…)

Here’s an example of how to enhance the default Spark CheckBox. This example uses a mark for the unchecked states and one for the checked states. Some simple transitions are used to make things a little bit nicer.

The skin uses two additional properties (symbolColorChecked,  symbolColorUnchecked) for the (more…)

Changing the look of a spark component mainly comes down to customizing the skin-class, but there are situations where this might not be enough.

In a project I’m working on, we wanted to have a smooth transition when a text-input gets or loses focus. The default Spark TextInput and the associated skin-class do not have a focused state. (In Flex the FocusManager manages the focus by drawing a border around a component, but we wanted the focus on the skin itself and a transition)

One way to achieve this is to enhance the TextInput Component: (more…)

This post looked at creating a custom flex 4 component from scratch. The knob button defined there had a min/max-value for the range and the rotation. The user could adjust the value by pressing the knob and then dragging the mouse. Now, we would like to extend the control a bit by adding a text input-field where the value of the knob is reflected. Likewise a value can be entered into the textfield and the rotation of the knob would reflect this.

Instead of extending the knob I decided to create another control that is a composition (more…)

In this and this post I had a look at skinning components in Flex 4. Here I had a go at creating a simple custom component in Flex 4 (Gumbo) from scratch. The goal was to create a simple knob-button like those found on many softsynths.

The user clicks the button and drags the mouse to adjust the value. The advantage of a knob compared to a slider is that it needs much less screen estate and could be more intuitive in specific contexts to control a value.

click here to view the demo. Full source at the end of this post.

Creating a custom visual component in Flex 4 is similar to the procedure in Flex 3 but states and skins are handled differently (in a much better and cleaner way). Basically we need to (more…)