At Projectplace we are currently in the process of developing an exiting thing: a fast and easy to use planning tool (working name: Yap)! You can read more about that at Projectplace Labs.
The reason for this little post however is to promote the open source project flexlib and more specifically a component contained therein, the DragScrollingCanvas. Brad Rice covers the basics of this component.
We’ve had much use of this little component in our early development of our timeline view, and whatever your Flex needs might be, you are sure to find tons of helpful components in flexlib.
One thing that we were lacking was the ability to make some components contained in a DragScrollingCanvas move together with the view port. Basically, we wanted a few components to be able to “float” on top of the Canvas, keeping its relative position at all times. We solved this by dispatching an event from within the DragScrollingCanvas itself. So, first we typed up a little Event (the below event only allows relative positioning vertically).
package com.projectplace.graphics.events { import flash.events.Event; public class DragScrollEvent extends Event { public static const DRAGSCROLLED:String = "dragscrolled"; public var _y:Number; public function DragScrollEvent(type:String, y:Number) { super(type, false); this._y = y; } } }
and within DragScrollingCanvas we dispatched this event as soon as some scrolling occured, in the systemManager_mouseMoveHandler function. Last in this function we added:
dispatchEvent(new DragScrollEvent(DragScrollEvent.DRAGSCROLLED, this.verticalScrollPosition));
This allowed us to be able to listen for the event in the application, and move whatever component within the canvas to a new position on the canvas, while the user is scrolling. If you’re crafty you can easily expand this functionality to the horizontal axis as well. Anyway, this is the result, so far. Notice how the date bar on top, follows your scrolling vertically 
#1 by Yulia on July 30, 2009 - 11:26
Very interesting post! Thank’s a lot. In my current task I’m doing something similar, as the ability to make some components contained in a DragScrollingCanvas move together with the view port. Can you share example, how to listen for DragScrollEvent in application. I’ve tryed to implement your steps, but I have no results (
#2 by Jon on July 30, 2009 - 19:43
Hey, thanks for your comment. Since I wrote this article I’ve figured out loads of other ways to do this, mostly because my knowledge of AS has improved
But since this is the example I posted I will try to help you finish your implementation of it.
You can basically listen for the event anywhere in your application wherever you have access to your canvas, perhaps in a singleton container class for your canvas, or even just in your main mxml file. Assuming your DragScrollingCanvas is called “canvas”. Do a canvas.addEventListener(DragsCrollEvent.DRAGSCROLLED, functionName);
In the function functionName(event:DragScrollEvent) you can use the event._y variable to add to or subtract from the y value of which ever components contained in the canvas to make it move with the viewport. Just remember to take care of edge cases so that when you reach the bottom or top of the canvas the components dont keep moving out of view.
Hope this helped.
#3 by Jon on July 30, 2009 - 19:46
Also, you can easily expand on the functionality by adding an x value to the event and use that the same way to have items moved along horizontally with the viewport.
#4 by Yulia on August 3, 2009 - 10:05
It helps! Thank’s a lot! Hope, my knowledge of AS will also be better soon.