trace(”Hello, world!”);

I am on my way to India after a long gap of about 4 years. Totally excited about this trip. I can’t wait to see my family and all my friends over there. I heard India has changed a lot in the last few years and I am about to witness all of those in a day. India…..here I come!

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.

A little known feature in Flex 3 is the ease with which you can define Custom Metadata. Custom metadata tags can be defined on a class and can be accessed at runtime. The compiler should be instructed to keep these metadata tags in FlexBuilder. This example shows you how to use custom tags to do logging on a class instance. I created a custom tag called ‘Log’ and added it to a class to log the click and mouseover events on the class. To include these tags at runtime, go to Project->Properties->Flex Compiler and add the following to your compiler arguments: -keep-as3-metadata+=Log. This will instruct the compiler to keep these custom tags. Remember to use += or all the current metadata tags like [Bindable], [Event] etc will be lost.

• View the source
• See it in action!

This movie requires Flash Player 9

Basically, use describeType() method to get the class definition xml which contains the metadata information for the class. Parse this xml to get the list of events that we need to log. You can do some really cool stuff with this custom metadata tags. Take a look at the source to see how this is done. As usual, the source is well commented.

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

Hey! Welcome to my personal blog. I’ve finally decided to get into creating my own blog after months and months of thinking (It’s more like laziness, I should say). I have learned a lot from other blogs and I think it is definitely time to give back what I have learned over the years. This blog will mostly focus on flex and related technologies.

About me:

I am working as a software engineer at Ooyala. I have been working on flex for a while now and recently picked up Papervision3d. Ooyala is developing some of the coolest stuff in the video world. Be sure to check it out here.