Animated Scrolling List

In Flex 4, the Spark List has a function called ensureIndexIsVisible(index). This function immediately scrolls the list to that index if it is not visible.

I've added a slight modification to this to animate the scrolling over half a second to make it much smoother. The animation is done using an AnimateProperty instance on the list's data group, and setting the property to verticalScrollPosition.

Here it is in action, as usual right click to view source:


For simplicity I am only scrolling the vertical scrollbar. If you are using a horizontal or tiled list, you'll want to animate the horizontal scrollbar too. In the tile case, you could use a Parallel instance to animate both the horizontal and vertical scrollbars.

Grayscale Preloader

Following on from my last post on grayscale images, I've made another preloader to illustrate how you can animate an image from grayscale to colour.

The preload consists of an image and a loading label. The image starts off gray, and as the preloader progress value increases it gradually becomes coloured. The alpha value also increases from 0.5 at the start to 1 at the end. To spice it up a little I also added in a GlowFilter and a DropShadowFilter.

Here it is in action, click the RELOAD button to show the preloader again.



For another example of a custom preloader, check out this blog post on Another Custom Preloader.

Grayscale Images, ProgressBar, Rating Control

I've been learning some neat tricks for working with images and graphics. One of them is how to take a color image (or a graphic like an ellipse that you've drawn using MXML/FXG) and make it grayscale.

Obviously if you have the image, you could just as easily open it up in your favorite image editor like Photoshop and make a grayscale copy of the image and save it to your Flex project.

Anyway, here is how you can do it dynamically. I've shown two different ways of doing it. Again I want to emphasize that all the images and graphics below are in color, they are simply modified at run time to appear in grayscale.

The first way is to set the UIComponent.blendMode or GraphicElement.blendMode property to "luminosity" on the image or graphic. This method works by blending the colours in the image with the color "behind" the image (usually the background color of the parent container or application). So if the color behind the image is white or light gray, then the image will become gray. If the color behind is green, then the image will be colourized to green. See the bottom part of example #6 where 4 red circles are drawn with various background colours.

The second way is to use a ColorMatrixFilter on the BitmapImage which converts the color image into grayscale.

To illustrate this, I've created 6 examples:

1. Normal color image
2. Color image turned into grayscale using the blendMode="luminosity" property
3. Color image turned into grayscale using a ColorMatrixFilter
4. Combination of a grayscale image (as the background) with part of the color image as the foreground. To draw only part of the color image, set the fillMode="clip" property on the image, and then set the width and height properties and then the image will be clipped.
5. A custom ProgressBar
6. A sample non-interactive rating control, as well as some luminosity examples

For more information on making skins for progress bars, see these two articles:
Creating a Custom Track Skin on an MX ProgressBar and Creating a Custom Bar Skin on an MX ProgressBar.

And finally, here are the examples. As always right click to view the source code.


The rating control in example #6 actually uses a Star graphic that is drawn with FXG (Adobe help on Using FXG). You could just as easily do this in MXML or simply use an image from your computer. I've noticed that Flash Builder doesn't really support FXG files properly (no autocomplete or new file wizards), so it's not that easy to create them unless you know the specifications well.

The rating control could easily be extended to be a fully functional user interactive rating control. You could also use the technique shown in example #4 to display fractional rating values (e.g. 2.5 out of 5).