Not-so-Minimal Scrollbar
Monday, April 7th, 2008For view component development, I’ve been building on top of Kieth Peters’ MinimalComps, a beautifully simple component API. He has just moved this code to it’s own googlecode home, and I expect that we will be seeing a lot more here in the near future. Whether or not you like his little gray boxes and code-only style of component skinning, his component base class is a great starting point for building all your displayobject sub-classes, even those that are not technically reusable components.
Now, I must admit that technically, I am not building on his Component class, I have just borrowed from it. Ok, I straight up stole his component class, refactored it, and built some things on top of that. (see com.bumpslide.ui.Component) One thing I changed was the invalidation routine. I find that I often want instantaneous updates of my view components, and sometimes I want a delay longer than a frame. So, I’m using a timer-based delay with a configurable ‘updateDelay’ parameter instead of ENTER_FRAME events. This will probably come back to bite me, but so be it. It works for me.
I’ve also made my component base class extend my com.bumpslide.ui.BaseClip which provides a number of shortcut methods that I like to have in my view components. Note, this is tied to Tweener for some fadeIn/fadeOut shortcuts. One other bit of the mimalcomps standard that I’ve ditched is the whole parent,x,y being passed into constructors. I assume this is great for code-only experiments, but when building out components in Flash, it means more work when creating sub-classes. For the most part, I have found that I can make custom components by copying and pasting Keith’s code into a class that extends my Component base, and things mostly work.
So far, the only real example I have to share is my new scrollbar. I took the minmalcomps Slider, hacked it a bit, and made it a scrollbar. It’s still a slider, but now there is a new property called scrollTarget that accepts an implementation of a rather bare-bones IScrollable interface. When this is set, the slider handle size changes based on what is being scrolled. I also made it possible to skin it inside of Flash CS3. Basically, if assets are found on stage, they are used instead of the programmatically drawn gray boxes, and their initial location are used to determine things like padding and constraints. There is just a handle and a background, so skinning is much easier than with the CS3 scrollbar, and this one is actually better. Most of the magic is actually in a ScrollPanel component (vertical scrolling only, for now) that takes care of implementing this scrollable interface for display objects and adds mouse wheel support and tweening (via FTween). There is a textpanel there, too. Sorry, no buttons on the scrollbar. You are using swfmacmousewheel, right?
I hate branching codebases as much as the next guy, and now that Keith has updated his component set, it probably makes sense for me to refactor these to fit in with his setup. But, for now, these are nice, designer-friendly components that are easy to skin in Flash, and the original components didn’t lend themselves to that.
You can download sample FLA files from the googlecode source browser, but you will need the bumpslide library classes to compile, so I would recommend just grabbing my latest code from SVN:
svn co http://bumpslide.googlecode.com/svn/trunk/as3/
Example: ScrollPanel Test (now with macmousewheel support)
Note, this is all open-source under the MIT license. If anything is broken, or doesn’t compile, please let me know. I’m using all of this code on a daily basis, and I’m committing to trunk daily as this is where I keep the code I share among my projects.
Next on my list is to make some basic grid/repeater components built on top of gridlayout that also implement IScrollable. The pieces are all there. Hopefully I’ll get on this before someone convinces me to use Flex. :)
The site 
