Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

The Coverflow of Fortune: Discontinuous Tweening with graphics updating

Recommended Posts

I need to 'spin' a coverflow that will go from the start element to another random element after looping through the entire coverflow list a couple of times.  


That is, let's say you were spinning a wheel like the wheel of fortune (the game show) -- you have integers on the wheel that range from 0 to 8 (or whatever) -- you are staring at some random place (e.g. 3) and will simulate a random spin to another value (e.g. 6) -- you have different spin directions -- the user can spin left and right.


In this case, it's not a wheel, so I can't use rotation — it's a coverflow, and I need to update the coverflow graphics each time an element changes (bring the new one to center, move the other ones to the side).


My two questions are:


1) does it make sense to do this with some kind of discontinuous tweening?  Perhaps I could use TimelineMax, but trying to make a smooth animation of the several tweens that would be added to the timeline seems a bit awkward.  I'd have to calculate the TweenLite times based on where I started and ended.  Is there any way to use some kind of rotation tween of the current element number?


2) what's the best way to do a complex graphics update mid tween?  Sometime that takes longer than a split second?


Perhaps, now that I consider it, a tween might not be the best way to go, or even a timeline — perhaps I simply have to move the index one element at a time, updating the graphics at each turn, and not rely on tweening to do it for me, but I was curious…


Thanks for any help.

Link to comment
Share on other sites

I'm not entirely sure I'm visualizing exactly what you mean, but I definitely think you can use the tweening engine here - it's just a matter of figuring out how to structure things. Here are a couple of approaches:

  1. You could build a class that handles the rendering of all the elements based on some "position" value. Maybe that value can be between 0 and however many items are in the list (let's say 8). So when you do myClass.render(1) it has all the logic internally that positions the items so that the first one is showing front-and-center. If I did myClass.render(1.5), that'd show a state that's halfway between the first and second item, etc. Then you can simply tween that value. You could add logic internally to have it wrap too, so if I do myClass.render(9) when there are only 8 items, it'd interpret that to be wrapped to item 1. That way, I could tween to some random number and it'd always work. TweenLite.to(myClass, 3, {render:7});
  2. Set up all your tweens in a TimelineMax initially, like they're transitioning all in a nice sequence. Use ease:Linear.easeNone. Then, you can simply use the TimelineMax's tweenTo() to move to different spots or manually tween the progress of that TimelineMax. 

I hope that helps. 

  • Like 1
Link to comment
Share on other sites

Oh, and I didn't quite understand your question #2. Could you give a few more details about what you mean? You should be able to update graphics whenever you want - that's unrelated to tweens. 

Link to comment
Share on other sites

I am using a Coverflow AS3 animation (http://www.weberdesignlabs.com/2009/12/flash-10-coverflow/) that I've taken apart and modified somewhat. The basic structure is intact, though.



The coverflow I'm doing needs to simulate a sort of random 'spin of the wheel' and then land on a predetermined end card. I'm doing this by simulating clicking left or right, and looping through the array of cards a couple of times before checking each one and then stopping when I've got the right one. "Simulating clicking left or right" means simply calling his 'previous click' or 'next click', which takes care of all all animation and housekeeping. As I'm under tight deadline, this seemed easiest — what I needed to do was allow for sufficient time for his animations to play out, so in the loop I'm using a TweenMax.delayedCall to wait for the nextclick/prevclick to finish before I call it again. That's what I meant when I said that I had to be able to update graphics.


It works OK, but the client, while they like the effect, isn't happy with the way it plays out — they'd like the entire thing to have some nice easing in it — so that the cards flip through faster at the start and then do a Quad.easeOut as they move towards the end.


I did it this way: adding a series of callbacks to at infinitesimally small intervals on a TimelineMax and then in each callback pause the TimelineMax, call the next/prev click,then resume it on end of the coverflow click animation. I calculate the number of callbacks to add by number of loops I want to go through the deck plus/minus the distance from where I'm at to where I want to end up. Seems pretty good.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.