UPDATE: Added inertia to scroll & snapPixels. Thanks @danro!

UPDATE: Added snapping to topmost list item using TweenMan, and scrollY threshold.

I’m developing a lightweight touchlist component with current minimal specs:

- the list is the scrollbar, for touch-based scrolling
- addItem method accepts any subclass of DisplayObject
- exposed ‘buildRequest’ Signal for DisplayObject factory
- pool children outside of defined scroll-area for reuse
- infinite scroll loop

A usage benefit is that you’re free to define your list-items, and they can vary in height, with the only restriction that they subclass DisplayObject. A performance benefit is that large lists only ever instantiate enough list-items to fill the visible scroll-area, and can recycle pooled objects. I’ll be continuing development on this component, adding further enhancements, and API methods such as physics & list-edit methods. Please message me if you’re interested in being involved and contributing. I hope to open-source the TouchList & host it on github, any assistance is appreciated & would quicken the process.

In the FLA library I create a Sprite and design the look of my TouchList. In the linkage panel I set the class to TouchList. You could also handle the instantiation of a TouchList in AS and/or subclass it. I define the number of DisplayObject items available to the TouchList in an init method.

myList = getChildByName( ‘myTouchList’ ) as TouchList;
myList.buildRequest.add( buildItemAt );
myList.init( xml.length() );

On the buildRequest handler I instantiate a DisplayObject or reuse a pooled DisplayObject if one is supplied in the buildRequest event. I use event-parameter “index” to target the XML child data for our DisplayObject. In the FLA library, I have a Sprite that contains a TextField exported as MyItem.

function buildRequestHandler( e:TouchListEvent ) : void
{
	var listItem:MyItem = e.item ? e.item as MyItem : new MyItem();
	listItem.text = xml.children()[ e.index ];
	_touchList.addItem( listItem, e );
}

Requires Flash Player. Available here: http://get.adobe.com/flashplayer

The audio are beats I’ve produced.

We do a lot of work with audio-players, usually in Flash, so naturally I wanted to explore HTML5′s new audio element. The top player above is an all HTML5/CSS/JS player, and the one beneath it is Flash.

Unfortunately HTML is yet again tainted by cross-browser fragmentation. Firefox won’t support the MP3 audio-format, and the others won’t support the OGG audio format. It’s nonsense to expect music libraries support multiple file-formats in 2010, especially when they can easily weigh terabytes, and virtually everyone maintains an mp3 library. Firefox users will notice that the player doesn’t look quite as slick as it does in Chrome, or Safari, because CSS is still fragmented. And I just don’t have the time/patience to mess around with cross-browser inconsistencies when Flash can easily publish to all browsers that I care about ( sorry iOS ) without the added hassle. Flash also offers better performance, more capabilities ( HTML might offer in 2020 ), and if you leverage frameworks, like OSMF, it’s cake. We’re still waiting on IE9, which should support HTML5′s audio element, so don’t expect this to load in IE8. Another drawback I experienced, is that when loading audio from a PHP Gateway, Safari was able to seek to variable time-positions, whereas Chrome could only play & pause, and was unable to seek.

In final judgement, you could spend the time to make the HTML5 audio player more cross-browser friendly, and look slicker, but Flash development is cleaner, better for the environment ( less time spent at workstation handling browser fragmentation = less power consumed ; p ), has an advanced API, and is cross-browser w/out the hassle. Ultimately there are too many fail-points with HTML5 audio to be considered for active projects at this time, and although beat by web-plugin capabilities, it’s nice to see HTML5′s audio element coming along.

Using the Flash-built audio-player on your own site is as easy as downloading the SWF, and embedding with swfobject.

<script type="text/javascript" />
	var flashvars = {};
		flashvars.src	= 'pathToMy.mp3';
		flashvars.album	= 'myAlbumTitle';
	swfobject.embedSWF("swfAudioPlayer_v1.swf",
	"swfAudioPlayerDiv", "440", "95", "10", "expressInstall.swf",
	flashvars);
</script>

Optionally another great idea put forth by Andrian is using mod_rewrite to replace your .php gateway extension with .mp3.

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(Gateway)\.mp3$ $1.php [nc]


Lastly you could hack up org.osmf.elements.SoundLoader.as and on line 120 add an OR condition for "url.path.search(/\.yourextension$/i) != -1);"

Thanks to Andrian Cucu for pointing out the mediaType & mimeType properties of URLResource!

If you’ve used AS3′s Graphics, or BitmapData classes then you’ll find the canvas element to be familiar. Mozilla has a tutorial on using the canvas element. I still prefer Flash’s authoring tools & Actionscript 3 for programmatic animation. But here’s one way you might write the next snow effect using the canvas element.

*Notice: As fervently noted by @killerspaz this isn’t accomplishing an animation feat that dhtml, or web-plugins haven’t had finessed for centuries. Head over to chromeexperiments.com, or html5demos.com, or apple’s html5 demos for more HTML5 examples.

var pooledImg		= [ 'airplaneBlue.png', 'balloonRed.png' ];
var animatingImg	= [];
var context;

var $j = jQuery.noConflict();
$j(document).ready( initDemo );

function initDemo()
{
	var canvas	= document.getElementById( 'canvas' );
	canvas.clear	= true;
	canvas.fillColor= "#FFFFFF";
	context		= canvas.getContext( '2d' );
	animateImg();
	$j(document).everyTime( 50, drawToCanvas );
	$j(document).everyTime( 4000 + ( Math.random() * 4500 ), animateImg );
};

function animateImg()
{
	if( pooledImg.length )
	{
		var src			= randomImage();
		var imgObj		= new Object();
		var img			= new Image();
		img.onload		= function()
		{
			imgObj.x	= canvas.width;
			imgObj.offsetY	= ( Math.random() -.5 ) * .5;
			imgObj.speed	= Math.random() + 1;
			imgObj.y	= Math.round( Math.random() * canvas.height )
			context.drawImage( img, imgObj.x, imgObj.y );
		}
		img.src			= '/resources/images/canvasDemo/'+src;
		imgObj.img		= img;
		animatingImg[ src ] = imgObj;
	}
};

function drawOnCanvas()
{
	context.clearRect( 0, 0, canvas.width, canvas.height );
	context.fillStyle = '#FFFFFF';
	context.fillRect( 0, 0, 0, canvas.width, canvas.height );
	var imgObj;
	for ( var name in animatingImg )
	{
		imgObj = animatingImg[ name ];
		if( imgObj.x < 0-imgObj.img.width || imgObj.y < 0-imgObj.img.height )
		{
			pooledImg.push( name );
			delete( animatingImg[ name ] );
		} else
		{
			imgObj.x -= imgObj.speed;
			imgObj.y += imgObj.offsetY;
			context.drawImage( imgObj.img, imgObj.x, imgObj.y );
		}
	}
};

function randomImage()
{
	var index	= Math.floor( Math.random() * pooledImg.length-1 );
	return pooledImg.splice( index, 1 );
};

You can listen for strict combinations ( only the specified keys ) or ignore if the user entered an extra key or two.

Example AS3:

var ryu:MultiKey = new MultiKey( [82, 89, 85] );
    ryu.entered.add( ryuCharacter.jumpKick );	

var listener:MultiKeyMaster = new MultiKeyMaster( stage )
    listener.addMultiKeys( ryu );

UPDATE: You can listen for Javascript key events, in order to bypass the need for users to click your SWF before receiving key events. To use Javascript key events add the javascript includes to your HTML, set multikeymaster.id to your SWF id, and do not pass a target to the MultiKeyMaster constructor.

Example Javascript:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.hotkeys.multikeymaster.js"></script>
<script type="text/javascript">
	var swfid = 'SWF';
	multikeymaster.id = swfid;
	swfobject.embedSWF("MultiKeyMaster.swf", swfid);
</script>

Checkout the interactive MultiKeyMaster DEMO featuring Ryu!

Or download the SWC, source & demo files.

NOTE There’s a bug with Flash Player and the command-key on a Mac. KEY_UP events do not dispatch for keys released while the command-key is down. The best workaround I’ve found & implemented is removing all KEY_DOWN references when the command-key is released, otherwise you end up with false positives. In my experience it is most confusing & problematic when you press the + key, and suddenly an event fires intended for a “command +” key combination. Hopefully Adobe will fix this. Please vote for it in the Flash Player Bug Reporting System.

Listen & download mp3′s here.

There are eleven tracks including an introduction. Featured artists include James Allen, Partition 36, My Brother And I, myself, Jazpicious, The Compilers, Sea of Arrows, Sean McCracken, An Early Morning Letter Displaced, Bugbear, and Sleepwalker. Enjoy!

Supplies
Arduino
SparkFun
Parallax
LiquidWare
AdaFruit
DigiKey

Videos

So here’s how to use iTunes to manage playlists, and manually export to Android.

Tell iTunes to keep the iTunes Media folder organized, and Copy files to iTunes media folder when adding to library. I’ve specified a folder titled “Music” on my Shared Volume. This is done in iTunes > Preferences > Advanced Tab

Mount your device, and create a folder titled “Music” on the device’s root directory, if it doesn’t already exist. This “Music” folder will mirror the iTunes Music folder. Next create a folder titled “Playlist” in the Music folder.

In iTunes right-click your playlist and export a .m3u file to the “Playlist” folder you created on the mounted device.

Drag & Drop the contents of the iTunes Music folder to your Android device’s Music folder, or selectively drop whatever you’ve recently updated. If you use the default local iTunes location it is, Macintosh HD/Users/YourUsername/Music/iTunes/iTunes Media/Music

Unmount your device. Go do your thing.

It’s not as elegant as iTunes, but until an Android music manager bulletproof’s sync it’s better than dealing with buggy sync-ware, in my opinion. Cheers!