Labs: Flash based Coverflow Revisited

by

Siminn Coverflow Small

The initial post that featured our very own Flash based Coverflow has gotten a huge response. We have been bombarded with email since we posted it and we’ve come to realize that we will probably have to write, at least, a couple of follow-up articles to answer some of the questions we’ve received. Here is one such article.

The Question:

Josh asks: “I saw your Coverflow thing. Nice. I”m looking and wondering how you got it to loop. I know you guys are working on a post about it and can’t release all the info but I’d love to pick your brains about it. At least could you point me in a direction.”

Ari Answers:

Hi there Josh.

Interested in the loop you say. Let’s dig into our code, shall we?

To keep every slide’s position, I don’t store its x pos, I actually store its relevant position from the middle. From that index I calculate the x pos every frame the coverflow is moving.

By that I mean that the front slide in the center has the index 0, the slide to the right has the index 1, and the slide to the left has the index -1. As the slides go farther right or left, the index increases/decreases.

The rightmost slide then has the index Floor(slidecount/2) (Floor() cuts away any remainder of a number, 5.9 = 5), and the leftmost -Floor(slidecount/2), assuming we have an odd number of slides. If you want to support even numbers (which our solution does) you are going to have to make a few “if”‘s here and there.

To demonstrate:

Three slides and their indexes:

[-1 ] [ 0 ] [ 1 ]

Five slides and their indexes:

[-2 ] [-1 ] [ 0 ] [ 1 ] [ 2 ]

and so forth.

The reason for why I do it like that is because it is easier to find the relative scale position, meaning it is easier to find where one slide is supposed to go between the value 0 – 1 rather than 275px – 550px, and it is also much easier to tween.

So when a slide is at its center, its index is 0, and scale position is also 0, (0 / Floor(slideCound / 2) = 0) when it is at its rightmost position, its index is Floor(slideCound / 2), and scale position is Floor(slideCount / 2) divided by Floor(slideCound / 2), which is 1. Then, we can figure out exactly where the slide’s x position is supposed to be by multiplying (slide.index / Floor(slideCount / 2) ) with (paneWidth / 2). This makes the coverflow really dynamic and you can, in theory, have as many slides as you want.

We can even put that scale index in power of some number to push the slides away from the center. (Since putting a scale value (a value between 0 – 1) in the power of some number still outputs a number between 0 -1, only eased.)

I already know how much space each slide is allocated for its x value, it’s stored in a variable I call paneWidth (that you can adjust in the example on our site), therefore I can calculate exactly where each slide is supposed to be according to its index. When I want to make the slides loop I simply check if its index is more than Floor(slidecount/2) or less than -Floor(slidecount/2) when I’m moving them.

I move the slides simply by increasing every slide’s index by one, using the easeInOut easing function.

When one slide’s index has passed the edge index (Floor(slidecount/2) + .5) its index is decreased by slidecount. The +.5 is so it loops in the middle of the flip, but not the beginning or at the end.

So that is how we make it loop. I can make it fade out by simply checking if its index is between Floor(slidecount/2) and Floor(slidecount/2) + .5(Floor(slidecount/2) is full alpha, Floor(slidecount/2) + .5 is no alpha) and for the minus values too.

If you have any more questions feel free to ask.

Conclusion

This answer requires some in-depth knowledge of programming in Flash and is not intended to be a “beginner-friendly” walk-through. Additional posts will be at the same level as this one, since we are more interested in addressing complex issues and solutions.

Please take a look at our initial Coverflow demo and how it is currently being used at a client site

J#

Tags: , , , ,

5 Responses to “Labs: Flash based Coverflow Revisited”

  1. Kevin Says:

    Do you guys provide this coverflow source code / original flash files, etc for use by others?

  2. Jónas Antonsson Says:

    Sorry, no. We are, however, willing to help others tackle similar situations through pointers, general help and useful information🙂

    At some point, though, we might release a “lite” version for others to download – a “framework” version, which could be added on to. I’m not promising anything though, since we need a little time to create it – and lately, time has been a precious commodity around here…

    J#

  3. $anchor$basketball Betting,final Four,final Four Betting,final Four Gambling,final Four Sports Book,final Four Sportsbook,march Madness,march Madness Betting,march Madness Gambling,march Madness Sports Book,march Madness Sportsbook,ncaa,ncaa Betting,ncaa Says:

    $anchor$basketball Betting,final Four,final Four Betting,final Four Gambling,final Four Sports Book,final Four Sportsbook,march Madness,march Madness Betting,march Madness Gambling,march Madness Sports Book,march Madness Sportsbook,ncaa,ncaa Betting,…

    $anchor$basketball Betting,final Four,final Four Betting,final Four Gambling,final Four Sports Book,final Four Sportsbook,march Madness,march Madness Betting,march Madness Gambling,march Madness Sports Book,march Madness Sportsbook,ncaa,ncaa Betting,nc…

  4. Not impressed with Cover Flow Code Help Says:

    Hi,

    I find it rather skimpy to even put that as a help post. Well if that’s the best you can do…

  5. Andre Says:

    Awesome work you guys, I have done something similar only using as3, I still dont find how to make the moviclips change places, and your post help me out, thank you, awesome work and design in the client site…!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: