Author Archive

Burst Labs on FWA

Monday, June 4th, 2007

Burst IconThe 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.

Easy Bezier Interpolation

Monday, June 4th, 2007

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:

Actionscript:
  1. import com.bumpslide.util.CubicBezier;
  2.  
  3. // create some random points
  4. var targetPoints:Array = new Array();
  5. for(var i=0; i<9; i++) {
  6.     targetPoints.push({x:50+50*i, y:Math.random() * 300 + 50});
  7. }
  8.  
  9. // interpolate the points
  10. var overshootFactor = 20;
  11. interpolatedPoints = CubicBezier.interpolatePiecewise( targetPoints, overshootFactor );
  12.  
  13. // draw
  14. var holder:MovieClip = createEmptyMovieClip('holder_mc', 1 );
  15. holder.lineStyle(0, 0x880000);
  16. holder.moveTo(interpolatedPoints[0].x, interpolatedPoints[0].y);
  17. CubicBezier.drawBeziers(holder, interpolatedPoints);

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/

JSFL: Timeline to AS2 Class

Monday, April 16th, 2007

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

Paged Loading with XML-based Recordsets

Tuesday, February 13th, 2007

One of the nicest things about Flash Remoting in Actionscript 2 is the pageable recordset functionality. This allows you to split the results of a large data set into chunks, or pages, that can be downloaded on an as-needed basis. This is a demonstration of how to use this paging functionality with XML-based web services. Specifically, I've created a sample application that uses the Flickr REST API (XML) to do a photo search.

Demo: Flickr Tag Search
Source: FlickrDemo.zip

Enter a tag in the search box, and hit 'go'. The results are loaded in batches of 100, and they fill in as you scroll. As you can see, we know how many records are available even before they are all loaded. We are

I've used this feature on a number of projects that included Flash remoting, and it is truly amazing. When in paged loading mode, a recordset instance is like an array that doesn't have all it's slots filled in. If I am a movie clip representing a datagrid row that needs record at slot 537 and that record is not loaded yet, the recordset gives me a little message, "in progress", instead of the actual data. The mx.remoting.Recordset class and it's friends take care of managing the server requests needed to load the missing data. Then, I simply listen for model change events until I get the data I need. As the definition above states, the List-based v2 UI components all understand this data provider API and can auto-fill themselves on an as-needed basis. This makes it possible to create things like scrolling lists that have thousands of records.

There are times when I've needed this same kind of paged loading functionality, but I didn't have access to Flash remoting. Instead, I needed to use an XML-based service that returned results based on GET method parameters that would either specify or range of records to return or simply a page number and the number of items per page. So, I have built a couple of classes that fetch data using XML and then use the built-in paging functionality provided with the mx.remoting code. This system has been set up in such a way that you can simply extend my XmlRecordsetService base class, implement a few key functions, and your result will be an instance of a class that extends mx.remoting.RecordSet. This recordset can be plugged in to any of the list-based components that come with Flash including the DataGrid that I have used in my demo.

Now, on to the code...

(more...)

Bumpslide Library 0.9.4 Released

Tuesday, January 30th, 2007

I've created a new package of my AS2 libraries over on SourceForge.

http://bumpslide.sourceforge.net/

The latest release has been labeled 0.9.4, as I have updated things to work with the latest version of the ASAP Framework. Numerous bug fixes are here as well as general day-to-day improvements across all the utilities.

Unexpected Results - Interpolating Sine

Thursday, January 18th, 2007

interpol_sine_th.gif

Demo: Interpolating Points on a Sine Curve
Source: interpolate_sine.zip

A recent post on the gotoAndPlay.net flashlist asked about charting the sine wave in flash using the drawing API. The problem with the drawing API is that the quadratic bezier curveTo functions don't make for the smoothest curves without a little trickery.

Patrick Mineault has a great piece on his blog about piecewise cubic beziers. Using his code, we can interpolate between the points on a sine curve quite smoothly. I thought his demo was quite nice, so I download his source, hacked it a bit, and came up with this demo.

Yes, it makes a nice smooth curve, if that's what you're after, but the fun starts when you start playing with the controls. A good place to start is by setting the wavelength to 2 while increasing the overshoot. Once the wavelength gets below 4 pixels, the cubic bezier interpolation no longer has enough points to interpolate the high frequency wave accurately. Increasing the overshoot factor creates some unexpectedly fun curls. Altering the number of points plotted gives us even more variation.

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Mark Anders on Flash Development

Tuesday, December 19th, 2006

Ok, I told myself I wouldn't use this forum as a place to post links, but this is good. regdeveloper.co.uk has an interview with Mark Anders of the Flex team. He talks a lot about his experiences with .NET, and it's a quite revealing read.

Regarding tool development in Eclipse vs. .NET...

I'd spent the last six years working on building a managed code platform; I thought it was goofy to build in C++. The thing I concluded about .NET was if you're trying to build code to run on a variety of platforms .NET offers you nothing - where's the cross platform window forms?

Regarding changes to ActionScript...

When we moved to ActionScript 3, we had to port all this code and there were a number of places where the programmers said ‘How did we ever ship that? That code just doesn't work’. Once you have real strong typing it ferrets out things you didn't know were there, even if you're a great developer.

Target-based tweening with FTween

Friday, November 24th, 2006

FTween is a simple tweening utility designed to fill a need not met by the Penner family of time-based tweening solutions. The problem case is one where a target is constantly moving and/or changing at unexpected times. The Penner equations rely on the assumption that a tween will last for a known length of time, but it is often the case that I simply want a smooth transition from one state to another. Tweening content for smooth scrolling and animating a tree menu are two common examples where time-based tweening can have stuttering or less than desirable result. When animating a sprite in such as way that it follows a moving target, Penner tweens don't work at all.

(more...)

MTASC Applets

Wednesday, November 8th, 2006

quickbuild.jpgMTASC, the open-source Actionscript compiler, has become an essential part of my daily routine. I used it for a long time with custom built BAT files that would inject compiled code into my library SWF's, but now I can do all of this with FlashDevelop. There are other editors out there, but FlashDevelop is my current IDE of choice, and it just so happens that it has a cute little feature I've not seen elsewhere. That feature is called "Quick MTASC Build", and I use it all the time to build quick test SWF's without ever having to open up the Flash authoring environment. I refer to these FLA-less SWF's as MTASC Applets.

(more...)

The New Space

Monday, November 6th, 2006

Orange ChairI am now sharing an office space with my friend and former Second Story colleague, JD Hooge. After a month of work, we have finally moved into the little corner office at SE 6th and Alder here in Portland. We're one of a handful of tenants occupying spaces above the Melody Ballroom where they have a strange combination of wedding receptions, office parties, and church services a couple times a week.

Since signing the lease, we ripped up all the carpet, refinished the floors (with the help of some guys with big sanders), and put in a few days worth of patching and painting the walls. We're still acquiring necessities, but I'm officially working from an office again instead of that spare bedroom where my desk was 2 feet from the ironing board. I can proudly turn on the webcam again when Skype-ing.

Thanks to JD, pictures are on flickr.