Archive for April, 2010

Canvas with an easing scrollbar

Unfortunately, Flex does not contain a container class with an easing scrollbar. I mean a scrollbar that will give you an ‘organic’ or ‘physical’ feeling. This is often implemented with an effect that causes the container content to gradually stop scrolling after you have stopped dragging the scroll thumb. Compare it with how you scroll through a list in for example an iPhone.

I superficially read some articles on how people implemented their version. I didn’t find a ready to use component, so I decided to make one myself as a challenge.

My component behaves like a Canvas with an HScrollBar and the idea is really simple:
There is an inner Canvas and an outer Canvas. The inner Canvas contains the content you want to scroll. The HScrollBar of the inner Canvas is hidden. The outer Canvas creates a proxy HScrollBar and positions this over the hidden HScrollBar. Now the user interacts with the proxy HScrollBar and each change is copied to the HScrollBar of the inner Canvas. And the trick now is to use an easing function when you copy the proxy Scroll thumb position to the hidden Scroll thumb position.

Here you see both HScrollBars on top of each other. The upper HScrollBar is the original scrollbar of the inner Canvas. The lower HScrollBar is the proxy version.

Get Adobe Flash player

And if we hide the upper HScrollBar and shift the lower HScrollBar upwards to take its place, we get this:

Get Adobe Flash player

While the principle seems to work, the feeling is not perfect. It’s not as nice as it is on an iPhone. So I’ll have to work on that.

Furthermore, I want to combine two behaviours:

  • Slow scrolling with a behaviour almost without easing
  • Stepwise/fast scrolling with a strong apparent easing

I’ll continue working on this and post improvements.

1 Comment

Refer to an embedded image by a string variable

I’m making a small banner like application. All images have to be embedded into the application, but I want to be able to dynamically create these images. The position on the stage is configured using an external XML file. So, somehow, I have to be able to make references to the embedded images in my XML-file.

Example of an embedded image:

[Embed(source="assets/image.jpg")]
[Bindable]
private var myImage:Class;

An easy way to do this is of course:

var imgClass:Class;
switch (imageName) {
    case 'myImage':
        imgClass = myImage;
        break;
   case 'otherImage':
        imgClass = otherImage;
        break;
}

But there is an easier solution. Say that the image is embedded in MyView.mxml, then you can use this statement in MyView.mxml;

var imgClass:Class = getDefinitionByName(getQualifiedClassName(this)+'_'+imageName) as Class;

If you use the debugger, you’ll see that imgClass looks like: MyView_myImage. Or more specifically, if MyView.mxml is located in package, e.g. ‘views’, then imgClass = views.MyView_myImage;

No Comments

How to make a Dictionary bindable

The Dictionary class in Flex is not bindable. To make a Dictionary bindable, use the ObjectProxy class as a wrapper.

public class BindableDictionary extends ObjectProxy
	{
		private var _state:Dictionary;
		public function BindableDictionary() {
			_state = new Dictionary();
			super(_state);
		}

	}

Now you can set eventlisteners on the wrapper:

var bd:BindableDictionary = new BindableDictionary();
bd.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handler);

I haven’t done full functional testing on this, but it seems to work fine so far.

2 Comments

Monthly open source donation: Efflex – Flex effects

Efflex logoI wanted to donate in March to the Efflex project. There is a Paypal button on the site, but it doesn’t lead to page where you can actually donate. So I’ll wait until this button is fixed.

The project presents some excellent effects, especially for use with viewstacks.

Update april 14, 2010:
The button now works!

2 Comments