Improved Cover Flow with Flash and AS3
Update: Watch it live on videoslots which was the target site.
I just finished fixing some issues with Stephen Weber’s Itunes like coverflow that he made with Flash and ActionScript 3. A word of warning, at the time of writing this article his site seems to have been compromised by bad people, I get some very weird behavior there, being prompted to download some ant-virus stuff which is probably a virus and so on.
Since Stephen’s site has been hacked I’ve taken the liberty of uploading the project here instead, the zip includes my changes, if you want the original you have to brave Stephen’s site, make sure you have your anti-virus turned on. Note that I have changed the graphics in the scroll bar too.
Over to the issues, the location of the xml config file was hard coded, probably some debug related stuff Stephen forgot to remove, well I just did. Secondly, scrubbing the scrollbar back and forth didn’t really behave like I wanted it to, the motion was not smooth at all due to the fact that it was using the update event handler which pressing the left and right buttons is also using. I had to launch a new event handler.
To see what I mean with the jerky motion compare Stephen’s demo with my demo.
Let’s take a look at the code:
coverSlider.addEventListener("MOVE", coverSlider_Move);
addChild(coverSlider);
coverLabel.x = (_stage.stageWidth/2) - (coverLabel.width/2);
coverLabel.y=coverLabelPositionY;
addChild(coverLabel);
addChild(coverSlider);
addChild(coverLabel);
}
private function coverSlider_Move(e:Event):void {
var value:Number=(coverSlider.value);
_currentCover=value;
reOrderCover(value);
e.stopPropagation();
}The above are lines 315 – 333 in Coverflow.as, note the MOVE event listener that is mapped to coverSlider_Move, feel free to compare with coverSlider_Update.
private function getXpos(xPos){
if(xPos < 25)
return 25;
else if(xPos > 855)
return 855;
return xPos;
}
private function mouseMove(e:MouseEvent):void {
var _mouseX:Number=this.mouseX;
var _availableTrackLength:Number=track.width-scrubber.width;
if ((_mouseX<track.width) && (0 < _mouseX)) {
var _xPos:int = _mouseX/_ratio;
if (_mouseX<_availableTrackLength) {
_value=_xPos;
scrubber.x = getXpos(_mouseX);
} else {
_value = (_maxValue);
scrubber.x = getXpos(_availableTrackLength);
}
dispatchEvent(new Event("MOVE"));
}
}The above is from Scrollbar.as, note the use of the new MOVE event. The result is just what I want, the jagged motion is gone, replaced with a smooth dito.
Change getXpos and the scrollbar clip to make things work with the size you’re after in your project. Or better yet make that stuff dynamic by way of a setting in the XML config.
Related Posts
Tags: actionscript3, AS3, coverflow, flash