Searching for a flex component that does this...

Posted by Joshua on May 8, 2008 * Add comments
Categories: Flex

I Googled and checked out flex.org for a component that has already been built that mimics the functionality provided in the two links below.  I have seen it on quite a few sites today and I like how it flows.  I think this would be great as a flex component.  Before I start coding something I wanted to make sure it doesnt already exist.  No sense in re-inventing the wheel.

Has anyone seen this in Flex and if so does anyone know if someone has coded this as a custom reusable component yet?  I didnt see anything on Ely Greenfields site either.  The effect basically creates a horizontal scrolling effect with a smooth transition.  The controls in both examples have arrows and in the panic example the tabs also control the animation.  Check it out and let me know if you know of a similiar component that provides the capability already so I dont waste any energy on this. :)

http://www.panic.com/coda/ (Check out the tabs/arrow animation and the rewind effect when you get to last tab)
http://www.juliendassonval.fr/ (same as above under projects)

 

PS: I think the panic site just crashed... dont quote me on that though, my internet has been shady the last two days.


7 responses to “Searching for a flex component that does this...”


  1. Kevin Hoyt on  May 8, 2008 at 12:28 PM

    Kevin Hoyt I wrote a while back about this UI pattern for multi-step processes. It seems to me to be a web adaptation of the classic wizard pattern we find on the desktop. While I had added a blur filter to smooth things out, I didn't go so far as a component. In case some sample source helps, you can download the code for my wizards.

    http://blog.kevinhoyt.org/2007/02/18/thoughts-on-accordion-usability/

    Hope this helps,
    Kevin

  2. Nate on  May 8, 2008 at 2:39 PM

    Nate I'm looking for this too. I've seen it in some flex apps but I haven't implemented it. If you do make it please share the code :).

    -Nate

  3. Tony Fendall on  May 8, 2008 at 3:37 PM

    Tony Fendall I created one once using a bunch of canvases, and a bunch of move effects.

    That catch was that my solution required one effect for every possible transition, so as the number of tabs went up, the number of effects got really high really fast. You could probably do something more efficient if you tried though.

  4. Paul Rangel on  May 8, 2008 at 5:19 PM

    Paul Rangel We did some examples of components for the FIG and one of which was the Paged List which is pretty close to what you are talking about. To make it efficient I added caching which is why the items fade in if you navigate past the previous or next set.

    http://www.adobe.com/devnet/flex/samples/fig_pagedlist/

    Hope it helps.

  5. Josh on  May 9, 2008 at 7:24 AM

    Josh Thank you everyone! This will definitely get me headed in the right direction. I love how this network of people shares ideas and information. Truly inspiring.

  6. Danny Gold on  May 9, 2008 at 7:34 AM

    Danny Gold I've used the PagedList a few times in applications and it can be a very usable component.

    As far as the sliding transition for tabs, I've done that for TabNavigators in a few places simply by tweening the x coordinates. I listen for the "change" effect on the TabNav, which signals that the selectedIndex is changing, then I do a move effect for the old tab and the new tab. Maybe I'll try to pair it down to a simple example and post it on my site.

  7. Danny Gold on  May 9, 2008 at 7:42 AM

    Danny Gold Hey guys, haven't typed up a post about it yet, but I have posted a simple example of creating this effect with a TabNavigator in Flex. View source enabled:

    http://www.thegoldhold.com/examples/SlidingTabNav/SlidingTabNav.html

Leave a Reply