Labs: Flash based Coverflow Revisited

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

• Demo
• Client Site (demo of functionality on site)

J#

Tags: actionscript, as3, concept, coverflow, papervision