Array based perpetual scrolling navigation AS3
Posted on | February 27, 2008 | 4 Comments
This is a pretty specific case study, but one that comes up more often than you’d think. What i’m talking about is a list of items, thumbnails for instance, that are all displayed staked either horizontally or vertically. The idea is to get a seamless loop going, so that when you get to one end, the last item becomes the first and vice-versa. People have all kinds of dirty hacks for doing this exact thing, but it’ll only get you into a mess if you ever need to update, or your list changes in length. Now, i’m the first to admit that these bulletproof, fluid, designed to grow sites very rarely do grow, but in this case it could easily happen. When you LEAST EXPECT IT.
The ideal solution, in my opinion, is to harness the super-powers of array manipulation to push things around for you. That way, you can shrink or grow your list of items without any worry of it breaking or falling down. I loosely based this example on something that the superb Dave Stewart wrote for Mazda back in 2004. What i’ve prepared is a simple case – a vertical-scrolling navigation bar that holds more options than can fit in the space. I’ve chosen to separate the code as if it were for a live project, into neat little classes and sub classes. Download the source and have a play, i’ll do a more in depth write up later.
Comments
4 Responses to “Array based perpetual scrolling navigation AS3”
Leave a Reply
April 21st, 2008 @ 4:58 am
This is great. It is a lot like the functionality of the AFComponents SlidePanel component. I wanted to use the SlidePanel component in an open-source project I am working on, but a commercial component kills the whole point!
So I am doing some work to this in flex to make it a more generic component, support axis changes, xml list for items, slideshow, etc. I will be sure to give you a heads up when I post the code.
Cheers!
April 21st, 2008 @ 8:40 am
[...] The Scroll Panel from AFComponents was my first choice. It is a very nice component, well priced, and would be just what I need, if not for the fact that my project is open-source and using a commercial component sorta kills the whole thing. After scouring the internet I finally stumbled upon the work Peter Wright has put in on a perpetual scrolling list. [...]
April 21st, 2008 @ 8:43 am
I’ve got some initial work done on converting your classes into a Flex component:
http://joelhooks.com/2008/04/21/continuous-scrolling-image-thumbnail-component-for-flex/
April 21st, 2008 @ 9:32 am
[...] sous forme de slideshow horizontal ou vertical des images. Lui même basé sur le travail de Peter Write, le composant permet d’afficher cette liste d’image à partir d’une XML [...]