For 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. :)

I’ve been slowly building up a toolbox of AS3 libraries, and I’ve decided to move my open-source code from sourceforge to googlecode. The as2 libs have not yet moved, but you can check out my latest work at http://bumpslide.googlecode.com/.

Old favorites including FTween, GridLayout, and “Model” (now BindableModel) have all been refactored and updated for AS3. I’ve been using this code in production for awhile now, and they all warrant separate blog posts. For now, just start digging through the code, and let me know if you have any questions.

The AS3 version of ModestMaps has finally been released. ModestMaps for AS3 allows you to create maps in Flash that load tiles from Google Maps, Yahoo, Virtual Earth or other custom tile providers. I used this library recently to build Platial’s new Frappr widget.

This release includes some changes that I contributed to the project including a new approach to marker event management. There is also a new Flash CS3 sample I created to demonstrate these changes.

Download the tarball or checkout directly from SVN.

The Flickr gallery demo from last night’s presentation is now online. Thanks to all who attended.

Demo: PureMVC Flash Gallery Demo

Source: puremvc_cs3_gallery_src.zip

Presentation: puremvc_bumpslide.ppt.zip

Just a reminder. I will be presenting a session on the PureMVC framework for ActionScript this Tuesday as part of the Goto+Play speaker series.

PureMVC is a lightweight framework for creating applications in ActionScript 3 (Flash and Flex), based upon the classic Model-View-Controller design meta-pattern. This presentation will provide an overview of PureMVC as well as a look at current best practices for day-to-day development as we walk through a sample application built with Flash CS3 and ActionScript 3.

Introduction to PureMVC
presented by David Knape, http://bumpslide.com/

Tuesday, January 15, 2008
doors open at 6, meeting at 6:30
(Old Town Pizza to follow?)

Fashionbuddha Studio
123 NW 2nd Ave, Suite 206
Portland, OR 97209
T: 503-490-4787

More info at gotoandplay.net

Update: Demo, source, and slides now available here. Also, the Acrobat Connect recording can be found here.

I just installed MAMP on my Macbook. This is great, as is gives me MySQL, Apache, and PHP all ready to go. First, I restored default ports in preferences, and then I discovered the beauty of TextMate shortcuts when I typed in vhost[tab] in my httpd.conf file while adding in some of my dev sites. Beautiful. I was ready to go. Now, I just needed to load up some databases. Off to the command line… But, there was no mysqladmin. On top of that, the default php 4 install was in my way when I went to do pear upgrades.

The binaries I wanted were there. They just weren’t in my bash path. Once I found the directories I needed, I just added them to my path by appending the following lines to my ~/.profile…

# Add MAMP binaries to front of path
PATH=/Applications/MAMP/bin/php5/bin:\
/Applications/MAMP/Library/bin:$PATH
export PATH

You’ll notice the existing PATH is appended to the end so that my MAMP php binary is now found before the old php4 version when I type ‘php’ from the command line. I also have access to mysqladmin, mysql, etc. like I would on just about every other machine as well as apachectl so I can do things like config tests and vhosts dumps (apachectl -S).

In my opinion, this should really be a part of the MAMP install. Anyway, I thought I’d document it here for future reference.

GridLayout (com.bumpslide.util.GridLayout) is a class I originally created to simply manage the attachment and positioning of a series of MovieClips. I began using it to build all my data grids, thumbnail lists, and various types of menus. Recently, I have refactored it to support scrolling and/or paging via an index offset as well as paged data loading via the AS2 DataProvider API. The end result is an all purpose utility that can be used to build everything from simple menus to custom data grids. This post is just a quick introduction to using the code. Parts 2, 3, and 4 (to come) will go into more details about scrolling and data loading as well as alternative uses of the GridLayout class.

You can get a sneak peak at the examples here.
(more…)

The site JD and I made for Burst Labs made Site of the Day for May 27th, 2007 on FWA. If you haven’t seen it, you should check it out.

http://burstlabs.com/

Everything you see was built from scratch. The back-end is a custom MySQL database and admin tool I built using CakePHP. Middleware is AMFPHP, and the front-end is all Flash 8 Actionscript 2.0. When I have more time, I will try to blog a bit about some of the components I built.

Nerd Highlights:
- Custom data grid built with com.bumpslide.util.GridLayout supports mousewheel and paged data-loading
- State management with com.bumpslide.data.Model
- SWFAddress for deep-linking and Back-button support tied directly to the Model

JD has more on the subject.

Demo: Easy Interpolation
Source: Interpolation.as

Commenting on my Interpolating Sine post, Saravanan wrote:

is there a way to smooth this line..........please help........

Why, yes, there is. Again, Patrick has done all the dirty work, but unfortunately his interpolation code was dependent on his demo movie clip classes. Rather that bother a man who is now retired, I borrowed his code, removed the dependencies, made it MTASC friendly, and am sharing it with you now. Patrick's cubic bezier and interpolation classes have been combined into com.bumpslide.util.CubicBezier.

Here is a quick sample of using this class to draw a smooth curve through a series of random points:

The full example and all related source files are all in my Bumpslide Library SVN repository.

References:
http://www.5etdemi.com/blog/archives/2006/10/interpolating-points-using-piecewise-cubic-beziers-source-code/
http://www.timotheegroleau.com/Flash/articles/cubic_bezier_in_flash.htm
http://www.moshplant.com/direct-or/bezier/

Just sharing a useful little JSFL script I made. This script started as a tool to output class vars for items on the timeline. It now actually creates an entire class that can be used as a starting point when coding up view components. Comments above each class var come from the timeline layer names, and the script even looks up assigned class names and adds appropriate import statements. It's useful for simple code generation, but can also help you quickly spot clips without instance names and things of that sort. Output goes to the trace panel where you can copy and paste just the pieces you want.

To install, just download and install the MXP file, or grab the plain JSFL file and drop it in your flash commands folder. The javadoc template and everything is just inline with the JSFL. So, open it in your favorite javascript editor, and hack away to personalize it if desired. And, despite what Extension manager tells you, no flash restart is required.

Flash Extension: timeline_to_class.mxp
Source JSFL: [tkd] timeline_to_class.jsfl