Flash vs HTML5

While part I focused on the quarrel between Adobe and Apple, the future of Flash is much larger than the ramblings of an over-dramatic control freak. Flash has been a definitive tool for web interaction. It’s lived through the indirect blow of AJAX by being more animation-centric and object oriented. It’s lived through the increasing functionality of Java by, again, being more animation centric and having a very hands-on design view in the Flash development environment. HTML5 however, is taking direct aim at animation, graphics, video and even 3D applications. Beyond the momentum of the current Flash-comfortable army of web developers, where will Flash sit in the future of the web?

Adobe has proven to be adaptive and intelligent. There is no doubt in my mind that right now, in various offices, at various desks, there are well paid people looking for ways to have Flash outlive this next battle. According to the W3C, HTML5 will reach recommendation by late 2010. That’s not a lot of time to come out with dramatic advances in Flash’s functionality. Lets take a look at where the battle fronts lay.

Video

Right now, there are a number of barriers to entry for placing videos on the web. If you don’t have your own Flash video player, getting one is confusing enough to give up on. Using YouTube or Vimeo has you sign up for an account and be subjected to their quality limit, censoring, upload times, user interface, ads, and terms of service. Windows Media Player embeds are dead due to their poor handling of codecs and even Apple’s .mov “embedding” technique is terrible. YouTube, Vimeo or one of the many other video uploading communities are almost always your best bet.

The W3C thankfully recognizes the web video problem and has brought us the salvation that is the “<video>” tag. Browsers will be able to see video files much like the way they see image files. Video files are however very, very different. The video playback controls for HTML5 are built in (and customizable) but the video file codec is a beggar. While H.264 is a real winner in terms of compression, quality and streaming abilities, it’s a huge mess in terms of legal use. If you want to use the codec for commercial purposes (which so many people would), you have to pay royalties. OGG is the other codec available for HTML5 and is completely free, but not as impressive in quality and compression.

Right now, Flash accounts for around 70% of the web’s video. The biggest player here is YouTube which accounts for around 40% of all web video. While YouTube is the child of Google, who has shown extensive co-operation with Adobe to bring Flash to their mobile platform Android, YouTube has also co-operated with Apple to stream videos in the Apple-friendly H.264 format. It seems YouTube will (rightfully) innovate to keep their grip on internet video, firm. YouTube has already dabbled with HTML5 and was in fact one of the first to offer a demo. You can opt-in to their HTML5 beta here. So far though, HTML5 videos don’t have the in-video ad-showing abilities of their Flash counterparts. Until HTML5 offers a way to do this, Flash will be a part of the YouTube and the overall web video mix.

Verdict: Let’s not lose perspective. HTML5 allows you to embed videos with the H.264 and OGG codecs and has built in controls. Flash is a platform capable of streaming video in a variety of codecs, any video control scheme imaginable, overlays, in-video links, advertisements, subtitles, keyboard interaction.. and… well the list is ever-expanding. Flash’s interactivity both server-side and user-side will earn its place in the future of web video. Both HTML5 video and Flash embedding (via swfObject) offer alternative content. If a browser doesn’t support Flash, it can seemlessly display an HTML5 video in its place.

Read on:

• See the HTML5 video tag in action – w3schools.com
• H.264 is a codec, Flash is a platform. One can not kill the other. – streamingmedia.com
• A developers perspective on HTML5 vs Flash. A little homegrown but good points are raised. – YouTube.com

Animation & Graphics

Unless you seek out things like Flash games, most of a web users experience with Flash animation is (unfortunately) ads. Flash’s ability to distract you is worth billions (I’m definitely not kidding). HTML5 currently lacks the timeline animation environment of Flash, but coded animations could be on par with Flash via a canvas tween library. The idea behind browser add-ons like Flash Block is to protect your web experiance from animated and invasive advertisements. Ironically, it’s because of such programs that there will undoubtedly be HTML5 animated ads. Flash has been in this game a long time though and I have no doubt their verteran status will trump HTML5 for the next few years.

Graphics are a different story. With HTML5, the web will support vector graphics directly. This doesn’t really conflict with Flash however since embedding static non-interactive vector images, with Flash, doesn’t make much sense. The benefit lies mostly on the side of developers that will be able to scale images without making/saving multiple copies of an image or scale a logo with a liquid layout. The benefit on the user side lies with reduced loading times.

Verdict: Put simply, Flash will win. HTML5 through the canvas API has the potential for animation engines like the popular GreenSock suite. The performance thus far has been lacking though and unless Adobe themselves come up with an HTML5 compiling animation environment (which they might), developers will be sticking with Flash. Web vector graphics on the other hand are filling a need that Flash never filled anyways. Apples and oranges.

Connectivity

This is a much more convoluted battle ground. Through Java, browsers have plenty of live peer connection abilities. Flash has fought back with a number of connection services. Firstly, there’s AMFPHP. Not made by Adobe but still very powerful; if PHP can do it, so can Flash. There’s the barrier to entry with interface setup and complications around dealing with that interface, but the capability is there. Plenty of todays Flash applications connect with databases and display PHP-retrieved data. Then there’s RTMP (Real Time Messaging Protocol). This is what ChatRoulette uses for it’s awkward magic. RTMP enables a Flash player to stream a file (such as a .flv Flash video) from a Flash Server. Another punch came with the Adobe Labs release of the “Stratus” service.

Adobe Stratus

Stratus 1.0 (which I wrote about here), released in 2008, offered an exciting new way to connect Flash instances. When 2 Flash instances can connect directly to each other, this removes all server responsibility except the initial connection. The implications for chat and gaming were (and are) exciting. Then came Stratus 2.0, seen in the right panel above. Very exciting. Imagine the performance increase in gaming, conferencing and video streaming when you can receive information from your neighbors instead of a server half-way around the world. The only people more excited than Flash media users would be Flash media suppliers. The performance increase and server load decrease on something like YouTube would be phenomenal.

Verdict: This is the area in which Adobe has been advancing in leaps and bounds. Peer-to-peer connections are beyond the responsibility of the HTML5 specifications (or HTML6 for that matter). I don’t see HTML ever advancing to duplicate Adobe Stratus 2.0 functions. Flash wins this one in a big way.

3D

Let’s get something strait. This is not HTML5. It’s a Google Code project call O3D. In their own words – “Originally built as a browser plug-in, this new implementation of O3D is a JavaScript library implemented on top of WebGL”. While it’s not native HTML5, it makes use of HTML5, and it renders much more complex 3D environments, much better than Flash. 3D in Flash is sort of a hack – Adobe never intended for it to be a 3D engine. Papervision blazed the 3D Flash path and has since made a couple impressive advances. Away3D, Sandy 3D and Sophie 3D are other Flash 3D engines. With the release of Flash Player 10, Adobe recognized the 3D applications of Flash and made it much easier to render with it’s native 3D transformations. While it only allows 3D transformations of completely flat objects, this takes the calculation burden off of the imported library and dramatically improved performance. You can see what Papervision is capable of at papervisionshowcase.com (not currently working, but I assume it will be back soon).

Verdict: So far it’s a toss up which only time can settle. Even with Adobe offering performance enhancements and the dedication of the Papervision team, 3D in Flash is an exercise in how far you can push a hack. O3D is very young, but being a 3D-from-the-start development, it has a more solid foundation. It’s hard to say what will be developers’ mainstream choice. Sites that use 3D Flash, usually use to it to immerse a user in a product-centric environment. Flash’s animation abilities have proved much more immersive than any O3D (or Java based) implementation I’ve ever seen. I see that trend continuing for the next little while.

Games

Flash is without doubt the undisputed internet gaming king. Flash wins. By a lot. That was until my world was shaken… with this.

Quake II. In a browser. Don’t let the April 1st post date fool you – that’s Quake II running as well as it ever could. In a browser. This changes everything.

Verdict: Flash has an army of game developers behind it and a world of libraries such as Flixel. Developers are fickle and curious creatures though. I can see browser gaming exploding into 3D in the coming years and it will play out like the release of a new console. There will be communities and advocates for “retro” flash games, but the focus of internet gaming could entirely become HTML5 based Java ports like the one above. It’s a movement I would whole heartedly support.

In Conclusion…

The W3C aren’t bent on replacing Flash and it’s not what they’ve aimed for; Steve Jobs is responsible for any notion otherwise. HTML5 will change the role of Flash, but it is far from ever replacing it. I’d go as far to say that the role change would be minor – mainly simple video embeds and image rotators. The possibilities of Java and WebGL are very exciting and may largely replace Flash extensions such as Papervision, but not completely.

Read more on HTML5 vs Flash:

“We are scrapping three years of Flash development and betting the company on HTML5 because we believe HTML5 is a dramatically better reading experience than Flash. Now any document can become a Web page” Jared Friedman, CTO, Scribd

Scribd ditches 3 years of Flash development for HTML5 – slashgear.com

• W3School’s HTML5 Tag Reference – w3schools.com
• HTML5 experiance on the iPad – YouTube.com
• Introduction to HTML5 by Google developer Brad Neuberg (a must-see!) – YouTube.com

FITC Toronto 2010

FITC 2010 is well underway, here at the Hilton Hotel in Toronto. Saturday’s free “Get a Job!” event managed to be considerably larger than last year and while success is in the eye of the resume-holder, I’d call it a big success. The same goes for the presentations. We’ve seen great talks from Lee Brimelow about multi-touch, great (and hilarious) advice derived from an important mantra from Hoss Gifford and a wonderful look into inspirational works of the past from James White. In just a few moments Adobe presenters Richard Galvan and Mark Anders will wrap up their keynote where Flash and Adobe patriots were enticed with CS5 and wooed with Adobes future plans. The full three day schedule is here. I suspect my favorite event will be the last one.

It’s too bad a fair number of people couldn’t make it. Ash clouds. Think they own the place. No matter where you are, don’t forget to tune in online!

People on the project were myself – Joshua Mark, Chris Atallah, Chris Burt, Kevin Paquette and Matt McLean. If you’d like to learn more or build a touch table yourself visit the project “learning center” at BitBox.Archonic.com. The touch input to Flash is driven by open source software called CCV (Community Core Vision) developed by the good people at the NUI Group. If you want to make one yourself, NUI Group is an invaluable resource. Let me (and the NUI forums) know of your multi-touch creations!

It’s here! Greensock’s already very useful and comprehensive tweening platform has evolved into an entire suite of even more light weight and powerful animation engines. I try my best to avoid Flash’s default timeline animations due to their reliance on frame rate, choppiness, lack of easing options and inconvenient editing. There’s other tweening engines out there such as caurina’s, but you won’t find one as versatile, fast, lightweight, well documented and well supported as the ones produced by Greensock.

Version 11 appears to be the most changed release since the tweening platforms inception and there’s a small learning curve to get over. So, here’s the breakdown…

TweenNano

It’s 1.6k! TweenNano can handle your tweening needs for BLANK but it stops there with no support for timeline functions and limited overwrite controls.

TweenLite

This is currently the most commonly used class of the group. It’s gained a little weight (1.9k) which may seem surprising, but the with the utility it’s gained with timeline methods and with the introduction of TweenNano, you shouldn’t have any file size issues. The most comprehensive update to TweenLite is the pause(), resume(), reverse(), play(), and restart() methods, which you can see the power of in the animation on the Greensock blog.

TweenMax

A personal favorite. On top of TweenLite’s functionality, TweenMax adds performance enhancements, overwrite management, tweens for filters, hex colours, volume, tint, and even do bezier tweening.

TimelineLite

A new class that brings timeline controls for building and managing sequences at just 2.5k (8.1k with OverwriteManager and TweenLite).

TimelineMax

On top of TimelineLite’s utility, this brings infinite timeline nesting, time scale manipulation, listeners for START, UPDATE, REPEAT, REVERSE_COMPLETE, COMPLETE events and much more.

The full breakdown is of course on greensock’s version 11 page. All of the above are frequently updated for both AS3 and AS2. I’ll be using TweenMax and TimelineMax in my current project – a suite of 4 Flash touch games for the Royal Canadian Mint’s Vancouver 2010 Olympics campain playable on an HP Touchsmart dx9000.

You can see how it’s supposed to work in the demo video but judging by the comments on abduzeedo and my own attempt to navigate, it doesn’t work terribly well.

I wonder if and when we’ll ever trump the mighty mouse…

0. Get with the times.

This is point zero because I imagine most reading this (who actually do Flash) are using ActionScript 3 and CS3. If you are, move on to point 1.

I’ve done an unfortunate number of ActionScript 2.0 to 3.0 conversions recently. We’re now on Flash player version 10 and CS4, so making projects in Flash 8 and AS2 is downright anti-social. Some advertisers specs require Flash 8 for things like click tags, which is just unfortunate (I feel your pain). If you’re stuck in the past and afraid to make the jump, a free 30-day CS4 trial and a visit to 8BitRocket’s AS2 to AS3 series should get you rolling. A great resource for automatic up converting is Jobe Makar’s Upconverter. For motivation, check out some of the cool things you can do with Flash 10 and AS3. Eventually that is…

1. Use Classes

This seems like a totally trivial point, but they are plenty of Flash developers not taking advantage of the power of classes. With Flash’s inherently object based environment, it’s an excellent place to implement reusable structures. One of a design firms greatest assets is their reusable class library. A powerful collection of classes can cut project time down by well over half. If you’re new, ActionScript.org has a great place to start. The rest of this article is a collection of classes that can make your platform vastly more powerful.

2. GreenSock’s Tweening engine: TweenLite and TweenMax

I use this in about every project I make. This is the most full featured, stable and well documented tweening engine out there. If your flash project needs a refined series of tweens and/or is more interactive than a basic 1-click banner (which should be just about all of them), the benefits are vast. Even if it is just a quick banner, the ability to enter fractions of a second for roll over tweens will separate you from the unenlightened masses. Where this class set shines is in it’s ease of use, speed, and documentation. Jack (a.k.a. GreenSock) is an admirably dedicated developer and the GreenSock support forum is basically a one on one classroom. Very handy.

2. Uza’s Global Class

So you’ve started using classes. You love them. You start dabbling in a more complex project, but wrapping your head around the communication between class and main variables and references to positions on the stage and within class objects has you beating your head against your keyboard. AS2 has native global variables but AS3 discontinued them. Uza.lt to the rescue! This class uses something called a singleton. All you need to know is you can create variables and functions which will be accessible anywhere. I recently used it in this project for the Royal Canadian Mint. Those dates at the top are members of a small class. Getting each instance of that class to react to the scroll bar would be cumbersome without the use of a global class. Speaking of scroll bars…

3. Archonic’s scrollbar

My own creation! Ever tried using Adobe’s component scrollbar? It’s not very fun. This (as you may have guessed) is a dynamically added scrollbar which will mask the movieclip you are scrolling and work out all your scroll ratios and distances automatically. The best part is you can customize each and every bit to look and feel any way you like. And don’t worry, the collection of event listeners on each part and mouse wheel handling makes it behave just like a scrollbar should. Kudos to Kyle Brekke who provided the starting point.

4. MIT’s Bulk Loader

MIT is a wonderful provider of all things brainy and useful. This class set is a large and powerful extension of Flash’s ability to make requests for external information. I’d recommend this particularly for larger projects which are subject to having external assets maintained by a client or anyone other than you. All it takes is a capital letter or under score in the wrong place and Flash can have a crippling hissy fit of a crash. With the bulk loader however, that crash is much more graceful, and may allow the project to continue functioning (just without whatever failed to load). The ease of syntax is also a strong point.

There you have it! Those are just a small collection of general tools to whet your appetite. Here’s some more resources which, if you’re your keen, can keep you busy indefinitely. And I do mean indefinitely.

• GoToAndLearn

  Possibly the greatest resource for both bleeding edge and beginner Flash, Flex, Photoshop and any combination of Adobe publishing tools.

• Adobe.tv

  This isn’t as widely known as it should be. Adobe’s own library of video tutorials on everything Adobe.

• Senocular’s ActionScript Library

  If you’ve ever posted your Flash woes on various forums out there then you know senocular (who has his own Flash blog here).

• Kirupa Forums

  A very enthusiastic community with lots of extra curricular chat.

• ActionScript.org Forums

  Quite busy – your question might go unanswered. Make sure to do some extensive searching though, your answer is probably there.

• GoToAndLearn Forums

The most professional of the bunch. No matter the complexity of your problem, the experts here have tackled it.

If you’re to take just one point from this post, make it this: Be active! Be a member of the community and you’ll find yourself swimming in no time.

Scroll bars in Flash are largely taken for granted. Until you try to craft your own from scratch, you don’t realize the math and combination of mouse listeners that go into a seemingly simple but proper scroll bar. In frustration, some settle for an even more frustrating user experience with just arrows that scroll content a painfully small amount with each click. There is of course the Flash components scroll bar, but try to edit it’s look and feel and you’re presented with a limited and confusing interface. Although editing components in CS4 is notably easier than previous versions, I found a scroll bar class by fellow Flash blogger Kyle Brekke which did just what I needed it to. What I’ve added to Kyle’s framework is this:

• A stage presence in form of a blue box. Resize this box (presence_mc) and the scroll bar will adopt the appropriate dimensions.
• The container movie clip the scroll bar is dynamically added to allows you to use layers to cover and tween it’s properties. This is more adaptive than adding it to the stage.
• Added scroll track click and hold functionality (more like conventional scroll bars).
• No support for horizontal scrollbars. No one likes using them and it slims down the code.

A word of caution: If you’re using GreenSock’s TweenLite, make sure this scrollbar and your project use the same version.

Here’s the example:

And here’s the source:

/**
 * Archonic Customizable Scrollbar Component
 *
 * Derived from Kyle Brekke's Scrollbar
 * 	Derived from Li Jiansheng's Scollbar
 *
 * @author Joshua Mark
 * @date 31/07/2009
 * @version 1.0.0
 * @website http://www.Archonic.com
 */

package com.archonic.utils {

	import com.greensock.TweenLite;
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Rectangle;
	import flash.geom.Point;

	public class scrollbar extends MovieClip {

		// Private Get/Set Type Constants
		private const XY:String = "xy";
		private const WH:String = "widthHeight";
		private const TB:String = "topBottom";

		// Speed of Content Scroll
		private const arrowMove:Number = 10;
		private const scrollSpeed:Number = 10;
		private const transSpeed:Number = 0.1;//seconds to tween

		// Assets used in Drawing the Class
		private var _arrowProgress:arrowProgress = new arrowProgress();
		private var _arrowRegress:arrowRegress = new arrowRegress();
		private var _scrollTrack:scrollTrack = new scrollTrack();
		private var _scrollButton:scrollButton = new scrollButton();

		// Standard Vars Set in Constructor
		private var _target:MovieClip;
		private var _stage:Stage;
		private var _container:MovieClip;

		// Numbers used in Calculating Slide Ratio
		private var trackTop:Number;
		private var dragBot:Number;
		private var trackRange:Number;
		private var slideRect:Rectangle;

		// Allow user to click and hold arrows and continue to scroll
		private var isUp:Boolean = false;
		private var isDown:Boolean = false;
		private var trackDown:Boolean = false;

		// Constructor
		public function scrollbar(s:Stage, c:MovieClip, target:MovieClip, maskWidth:Number, maskHeight:Number):void {
			_stage = s;
			_container = c;
			_target = target;			// Set the _target
			_target.startPoint = new Point(_target.x, _target.y);// Set the _target's original point

			// Set positions of the assets (into scrollbar form)
			initAssets();
			// Sets all listeners in one place
			initListeners();
			// Find the sliding range with which to create the ratio
			initTrack();
			// Draws and sets the mask
			initMask(maskWidth, maskHeight);
		}
		private function initAssets():void {
			var targetWidth = _container.presence_mc.width;
			var targetHeight = _container.presence_mc.height - (2*targetWidth);

			_scrollTrack.width = targetWidth;
			_scrollTrack.height = targetHeight;

			_scrollButton.width = targetWidth;
			_scrollButton.y += _scrollButton.height/2;//stops jumping when scrolling up with _scrollTrack

			_arrowRegress.height = targetWidth;
			_arrowRegress.width = targetWidth;
			_arrowRegress.y = _arrowRegress.height * -1;

			_arrowProgress.height = targetWidth;
			_arrowProgress.width = targetWidth;
			_arrowProgress.y += _scrollTrack.height;

			// Set arrows as buttons
			_arrowRegress.buttonMode = true;
			_arrowProgress.buttonMode = true;
			_scrollButton.buttonMode = true;

			// Add assets to this class
			addChild(_scrollTrack);
			addChild(_scrollButton);
			addChild(_arrowProgress);
			addChild(_arrowRegress);
			y = _container.presence_mc.y + _arrowRegress.height;

			// Add this class to the timeline container
			_container.addChild(this);
		}
		private function initListeners():void {
			// Event listeners for dragging and scroll wheel
			_scrollButton.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
			_scrollButton.addEventListener(MouseEvent.MOUSE_OVER, stopTrackScroll);
			_stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
			_stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);

			// Event listeners for arrows
			_arrowRegress.addEventListener(Event.ENTER_FRAME, _arrowRegressHandler);
			_arrowRegress.addEventListener(MouseEvent.MOUSE_DOWN, upScroll);
			_arrowRegress.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
			_arrowProgress.addEventListener(Event.ENTER_FRAME, _arrowProgressHandler);
			_arrowProgress.addEventListener(MouseEvent.MOUSE_DOWN, downScroll);
			_arrowProgress.addEventListener(MouseEvent.MOUSE_UP, stopScroll);

			// Event listeners for track
			_scrollTrack.addEventListener(Event.ENTER_FRAME, _trackHandler);
			_scrollTrack.addEventListener(MouseEvent.MOUSE_DOWN, trackScroll);
			_scrollTrack.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
		}
		private function initTrack():void {
			trackTop = _get(XY, _scrollTrack) + (_scrollButton.height/2);
			trackRange = _get(WH, _scrollTrack) - _get(WH, _scrollButton);
			dragBot = trackTop + trackRange;

			slideRect = new Rectangle(0, trackTop, 0, trackRange);
		}
		private function initMask(w:Number, h:Number):void {
			if (_target.mask == null) {
				var square:Sprite = new Sprite();
				square.graphics.beginFill(0xFF0000);
				square.graphics.drawRect(_target.x, _target.y, w, h);
				_stage.addChild(square);
				_target.mask = square;
			}
		}

		// Next 4 functions deal with hitting the up/down arrows on the scrollbar
		private function upScroll(e:MouseEvent):void {
			isUp = true;
		}
		private function downScroll(e:MouseEvent):void {
			isDown = true;
		}
		private function _arrowRegressHandler(e:Event):void {
			if (isUp) {
				if ( _get(XY, _scrollButton) > trackTop ) {
					_set(XY, _scrollButton, _get(XY, _scrollButton) - arrowMove);
					if ( _get(XY, _scrollButton) < trackTop ) {
						_set(XY, _scrollButton, trackTop);
					}
					startScroll();
				}
			}
		}
		private function _arrowProgressHandler(e:Event):void {
			if (isDown) {
				if ( _get(XY, _scrollButton) < dragBot ) {
					_set(XY, _scrollButton, _get(XY, _scrollButton) + arrowMove);
					if ( _get(XY, _scrollButton) > dragBot ) {
						_set(XY, _scrollButton, dragBot);
					}
					startScroll();
				}
			}
		}
		private function _trackHandler(e:Event):void {
			if((isUp || isDown) && trackDown) {
				if(mouseY < _scrollButton.y) {
					_arrowRegressHandler(null);
				} else if (mouseY > _scrollButton.y) {
					_arrowProgressHandler(null);
				}
			}
		}
		private function trackScroll(e:MouseEvent):void
		{
			isUp = true;
			isDown = true;
			trackDown = true;
		}
		private function stopTrackScroll(e:MouseEvent):void
		{
			trackDown = false;
		}

		// Next 3 functions deal with dragging and mouse wheel
		public function dragScroll(e:MouseEvent):void {
			_scrollButton.startDrag(false, slideRect);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
		}
		public function mouseWheelHandler(e:MouseEvent):void {
			if (e.delta < 0) { //Scrolling Down
				if ( _get(XY, _scrollButton) < dragBot ) {
					_set(XY, _scrollButton, _get(XY, _scrollButton) - (e.delta * scrollSpeed));
					if ( _get(XY, _scrollButton) > dragBot ) {
						_set(XY, _scrollButton, dragBot);
					}
					startScroll();
				}
			} else { // Scrolling Up
				if ( _get(XY, _scrollButton) > trackTop ) {
					_set(XY, _scrollButton, _get(XY, _scrollButton) - (e.delta * scrollSpeed));
					if ( _get(XY, _scrollButton) < trackTop ) {
						_set(XY, _scrollButton, trackTop);
					}
					startScroll();
				}
			}
		}

		// Replicates the startScroll function except it works during the drag
		// because it runs off the MOUSE_MOVE event
		public function moveScroll(e:MouseEvent):void {
			startScroll();
		}
		private function stopScroll(e:MouseEvent):void {
			isDown = false;
			isUp = false;
			_scrollButton.stopDrag();

			stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
		}
		// Major controlling function
		private function startScroll():void {
			var ratio:Number = ( _get(WH, _target) - trackRange ) / trackRange;
			var sPos:Number =  ( (_get(XY, _scrollButton) - trackTop) * ratio ) - _get(XY, _target.startPoint);

			TweenLite.to( _target, transSpeed, {y:-sPos} );
		}

		// Functions used to minimize code switch for verticle/horizontal bars
		private function _set(type:String, targ:*, val:Number):void {
			if (type == XY) {
				targ.y = val;
			} else if (type == WH) {
				targ.height = val;
			} else if (type == TB) {
				targ.bottom = val;
			}
		}
		private function _get(type:String, targ:*):Number {
			if (type == XY) {
				return targ.y;
			} else if (type == WH) {
				return targ.height;
			} else if (type == TB) {
				return targ.bottom;
			}
			return 0;
		}
	}
}

Download the Archonic scrollbar

The license is MIT open source – use it, distribute it, edit it. Enjoy!