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

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

For the past couple of days I’ve had a look at creating Spark Icon Buttons. In this post I’ve created an FXG Icon Button with some transitions, leveraging pseudo selectors for states. The Icon was ‘hardcoded’ into the skin. For another Icon I would need to duplicate the skin and introduce another graphic. Not exactly generic. There are other ways to bring graphics into Spark Skins but none of them work with FXG Elements directly.

What I want is:

• work with FXG Graphic Elements for simpler manipulation and scaling
• easily export the FXG-Definitions for the icons from a tool and/or be able to change them in FB directly
• colorize the icons based on a color style-property and do this per state
• change the icons based on a style-property and do this per state
• change icons at runtime
• scaling effect on icon
• have ONE generic skin, so no duplicates for different icons are necessary

Most of the trouble with generic skins comes from the fact that there is no way to access the FXG Library-Definitions at run-time  (as far as I know) - like getting an instance of a symbol in the library, the way we had in flash. Here’s a hack but I’d rather not use it.

After some headaches I finally managed to get a solution I can live with:

Click here for a test.

You’ll find the source at the end of this post.

The solution regarding the work flow mainly comes down to (more…)

It was funny to see how many examples of Spark Icon Buttons have shown up in the past few days. Andy mcintosh did an example here, Ben another one here, I did one myself here. While all were using a slightly different approach the motivation behind them was probably, that the Spark Button does not have an icon property compared to the Halo coutnerpart.

Out of the box there are basically three ways to get graphics into a Spark skin. (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…)

Part of the FXG 1.0 specification in Flex 4 makes it possible to define elements inside a library. The elements can then be re-used in a FXG document:

<!--Library with the definitions -->
<Library>
   <Definition name="circle">
	<s:Ellipse x="0" y="0" width="100" height="100" >
	   <s:fill>
		<s:SolidColor color="0x000000" />
	   </s:fill>
	</s:Ellipse>
   </Definition>
</Library>
 
<!-- use some instances of the definition  -->
<circle/>
<circle x="200" y="100"/>
<circle x="300" y="100" height="75" width="75" />

As of now there is no way to create these symols at runtime. For example, if you’d like to create a starfield, you would need (more…)

The past few days I was digging a bit into Gumbo (flex 4 beta). I was happy to see that flex 4 will take a lightweight approach regarding components. Components are stripped down to their most basic behavior and there’s now a clean separation between model, controller and view.

This, in combination with an enhanced state architecture and the newly integrated graphics tag library FXG, makes it a snap to create a custom look and feel in flex (especially when CS4 export or thermo integration will be ready)

Here is a little example of a GUI done in Gumbo (flex 4 beta) to wrap up my sound experiments done earlier.

click here. Needs the latest Flash-Player 10 (rc of 091508).

The GUI for the player is straight forward. It uses some FXG-Elements to (more…)