Simple Gesture-Like Kinetic Scroller in Flex 4

KineticScroller

In learning the new features in Flex 4, I ported a kinetic scroll component from Flex 3 that adds a decaying motion to view ports when you apply a 'swipe' motion with the mouse or your finger, for touch screens.

I created a swc file that you can drop into the lib folder of a project. Then, simply create an instance of kineticScroller and assign the allowable directions (vertical, horizontal or both), and set the decay speed, to a group box contained within a skinnableContainer or whatever, like:

var ks:KineticScroller = new KineticScroller(myGroup, KineticScroller.BOTH, 7);

I'm eager to start in on the new gesturing interfaces in Flex, but this project has really been more of a learning tool for me, and anyway I'll need to maintain some backward compatibility if and when I port some of my existing touch panels.

View the example and download the swc here. Includes a quick ASDoc, but just look at the example code to see it in action.

Using Flex Framework Assets

Glen Whitbeck posted a nice way to re-use Flex assets on gorillalogic that I need to remember.

There may be times when you want to use an asset/graphic that exactly matches an asset/graphic used by the Flex framework. For example, if you’re already using the Tree component and need to mimic the opening and closing of folders, you may want to use the same icons that the tree uses. It’s really very simple to do this.

The Flex framework stores these types of assets in Assets.swf. To find out what assets are available in Assets.swf, you can peruse the “default.css” file provided in the sdk ([path-to-your-sdk]/frameworks/projects/framework/default.css).

For example, the Tree component has this entry in default.css:

/*
//------------------------------
//  Tree
//------------------------------
*/

Tree
{
  defaultLeafIcon: Embed(source="Assets.swf",symbol="TreeNodeIcon");
  disclosureClosedIcon: Embed(source="Assets.swf",symbol="TreeDisclosureClosed");
  disclosureOpenIcon: Embed(source="Assets.swf",symbol="TreeDisclosureOpen");
  folderClosedIcon: Embed(source="Assets.swf",symbol="TreeFolderClosed");
  folderOpenIcon: Embed(source="Assets.swf",symbol="TreeFolderOpen");
  paddingLeft: 2;
  paddingRight: 0;
  verticalAlign: "middle";
}

There are five assets here that we can use (TreeNodeIcon, TreeDisclosureClosed, TreeDisclosureOpen, TreeFolderClosed, TreeFolderOpen).

One way that we might use them in our application is to embed them into a Class object and then use that as the source property for an Image object. For example, if you wanted to use the little triangle that appears next to a closed folder in the Tree component, you could do the following:

Declare this in your section:

[Embed(source="Assets.swf", symbol="TreeDisclosureClosed")]
private const myClosedIcon:Class;

Then, use this in your MXML code:

<mx:image source="{myClosedIcon}" />

...lather, rinse, repeat.