trace(”Hello, world!”);

I have noticed that quite a few people ask for smooth scrolling on list based components in Flex. Smooth scrolling offers a much nicer feel as opposed to snapping to a particular position in the list. The list classes in Flex do not support this as of now. So, I put together this small component which uses the Box component and provides smooth scrolling.

The disadvantage of using this component is that it does not offer all the optimizations that the list has and hence can choke if it has a large number of items in the data provider. However, it can be safely used for a small list of items, such as displaying a bunch of images etc.

• View the source
• See it in action!

This movie requires Flash Player 9

This component offers vertical smooth scrolling. You can modify the code to easily make it work for horizontal scrolling.

• I have a map based interactive flex application. I want to know where most of my users are clicking on the map.
• I have a flex application with lots of features. I want to know which features are being used more than others.
• I want to find out how users are using my application (where did they start? where did they go from here? what are they clicking most on?)

Several different visualizations have been built to analyze these user behavior patterns and I believe the most impressive of all is a HeatMap. It shows you the hot and cold areas on your application. CrazyEgg, ClickDensity etc have already done this for web applications. I am trying to do something similar for flex based applications. The following is a screenshot of the early stages of this project. It is only a proof of concept for now.

Over the next several days, I will add more features and show you the next revision.

I am finally back with the source for the divider component. Take a look at it before you read any further.

• View the source
• See it in action!

The divider illustrates a couple of basic drawing concepts using the graphics class. It uses the following drawing methods.

1. moveTo
2. lineTo
3. curveTo
4. drawCircle
5. beginFill/beginGradientFill
6. drawRect/drawRoundedRect

Read the source if you want to know how to use these methods. I have included comments in the source where appropriate. Please leave a comment if you like it or have any suggestions/questions.

Here is the divider component that is drawn entirely using the graphics class in actionscript. Click on the center circle to expand and collapse the list section. I am only posting the swf file for now. Will present the detailed steps and source in my next post.

This movie requires Flash Player 9

I am back with another simple yet elegant selector component. This is based on a design from one of the most talented UI designers, Kyle Stauffer. The component simply lets you select a child component from a horizontal list. I am using buttons here as children but you can change the source to use any component you want.

This movie requires Flash Player 9

• View the source
• See it in action!

My next post will focus on how to programmatically draw a divider component. Hope you will find these simple components useful.

This component simply scrolls through a list of labels horizontally. It makes use of the reflection component from Narciso (nj) Jaramillo and TweenLite, a very lightweight tweening package. Before any further explanation, check out the component below.

This movie requires Flash Player 9

• View the source
• See it in action!

There are three main parts to the component.

• Drawing the arrow buttons
• Creating the children dynamically and assigning the reflection
• Use the tweening class to tween the movements of the children

The source code has sufficient comments. If you have doubts, questions or comments, send me an email