trace(”Hello, world!”); » Flex Components

Scroll to the top… Scroll to the bottom…

Venkat — Mon, 28 Jan 2008 05:26:09 +0000

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.

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

Know your users. My vacation project.

Venkat — Sun, 30 Dec 2007 07:04:42 +0000

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.

Fancy Divider (with source)

Venkat — Fri, 21 Dec 2007 04:36:22 +0000

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

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

moveTo
lineTo
curveTo
drawCircle
beginFill/beginGradientFill
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.

Fancy Divider

Venkat — Tue, 18 Dec 2007 08:53:06 +0000

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.

A Simple and Pretty Selector Component

Venkat — Mon, 17 Dec 2007 06:42:44 +0000

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.

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

Label Scroller Component

Venkat — Sun, 16 Dec 2007 05:07:59 +0000

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.

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