Led wheel-of-fortune animation

[gigbig]

Hi,

I am trying to create a sort of wheel of fortune animation: I have 37 numbers, I always start from the first number, I know how many numbers I have to pass before reaching the right one (I could complete more than one cycle) and the time needed.

 

The basic tween to turn a number on like a fading led is something like this

TweenLite.to(led#, 0.5, {onInit: setLedAlphaTo1, alpha: 0, ease: Linear.easeNone});

 

If I have to make 2 cycles and a half I will create about 93 tweens, this not a problem.

My problem is: how do I tween the sequence of tweens using an ease? That is: i.e. I want to tween these 93 tween on 5 seconds with an ease:Quad.easeOut, making the spinning gradually slowing down.

 

I thought about TimeLineLite-Max, but... if I append the 93 tweens they will start as soon as the previous one has completed, but this is not the case as they partly overlap, and then I don't know if I can tween the total time with an ease.

 

Have you got any idea of how I can do this?

Thanks

[Carl]

Hi Gigbig,

 

I'm not exactly sure how intend to implement all the features of your wheel of fortune wheel, but I can directly address your concerns towards the end of your post.

 

1) You can certainly add tweens that overlap to TimelineLite/Max

2) You can tween the time or progress of any timeline (v11 currentTime, currentProgress)

 

In v11 the append() method takes an offsetOrLabel parameter which if negative places your tween before the end of the timeline

 

In v12 TimelineLite/Max have add(), to(), from(), fromTo() (and more) methods that have a position parameter that also allows for overlapping tweens

 

var tl:TimelineMax = new TimelineMax({paused:true});
tl.to(mc, 1, {x:100})
 .to(mc2, 1, {x:100}, "-=0.5") //tween gets added 0.5 seconds before previous tween ends

//add easing to the entire timeline
tl.tweenTo(tl.duration(), {ease:Bounce.easeOut}); 

 

The position property is very new (added last night) in v12. Although some examples on this page refer to javascript, the same concepts apply to ActionScript : http://www.greensock.com/v12-api-change/

 

Check the timeline docs for the version you are using to learn more about the methods you can use for adding tweens.

 

Let us know which version you are using if you need more help or a concrete example

[gigbig]

Yeah!

Thank you Carl! Your post convinced me to start using timelines, and I wounder how I could do without them.

 

BUT... timeline does not solve my problem, unless I miss something. I have to nest the leds animations/tweens into a timeline, at a fixed distance from eachother, and this is ok, offset is what I needed (ah, I am using v11). Now I can choose the ease for the whole timeline, and this is fine, BUT I'd like to execute the nested animations/tweens (the leds) at the native speed, independently from the timeline speed/ease: is this possible?

 

In the past I tried updating from 11 to 12, but I encountered a problem (VerifyError: Error #1053, maybe a have to recompile all the SWFs). What about the recent discussion about the timeline modifications? I read something about it, but I don't remember the details.

If I switch to v12, will I have to modify the timelines written in v11?

 

Thank you!

[Carl]

I'm really not sure what the best solution is for trying to ease out the animation of all your tweens but keep the led animation constant. Perhaps you need to use the timeline to ease the rotation of your elements but the led alpha fades shouldn't be part of that timeline. Really not sure.

 

Also, we dropped onInit in v12. Have you tried using a fromTo tween? from your code I think that would work just fine. 

 

And yes, we went ahead with all the proposed API changes, you can read about them here:

http://www.greensock.com/v12-api-change/

 

These changes apply to all ActionScript and JavaScript versions of v12.

[gigbig]

Hi!

Today I have returned on that piece of code, and I have combined the previously separated Tweens of the leds (delayed in order to simulate a slowing down spinning wheel) into a timeline.

 

Previously I was using an approach similar to this:

 

for (var i:uint = 0; i<led.length; i++) {
   delay += Math.pow(step, 2);
   TweenLite.delayedCall(delay, flashLed(i));
}

 

Now I have converted it in a timeline:

 

var ledTimeline: TimeLineLite = new TimeLineLite();
for (var i:uint = 0; i<led.length; i++) {
   delay = Math.pow(step, 2);
   ledTimeline.to(dummy, delay, {onStart: flashLed(i)});
}

that should reproduce the same identical animation.

 

BUT! But if I want to use an ease instead of the delay calculation...... I could do like this

 

var ledTimeline: TimeLineLite = new TimeLineLite({ease: Quad.easeOut});
for (var i:uint = 0; i<led.length; i++) {
   ledTimeline.to(dummy, 0.1, {onStart: flashLed(i)});
}

right? I would create a sequence with a constant speed, bended by the ease to slow down it, without slowing down the flashLed animation, this is important.

I still have to try this solution, what do you think about it?

I am sort of faking the timeline with a dummy object to execute my flashLed function into an eased sequence.

[Carl]

Yeah it sounds like you are on the right path, but there are some syntax issues:

1: you can't apply an ease to a Timeline in the constructor

no good

var ledTimeline: TimeLineLite = new TimeLineLite({ease: Quad.easeOut});

You can build your TimelineLite and then tween its time() property with an ease.

 

var tl:TimelineMax = new TimelineMax();
tl.to(...)
tl.to(...)
tl.to(...)
...
TweenLite.to(tl, tl.duration(), {time:tl.duration(), ease:Bounce.easeOut});
 

 

This tutorial here explains it in detail: http://www.snorkl.tv/2011/03/tween-a-timelinelite-for-ultimate-sequencing-control-and-flexibillity/ *note v11 code in that tutorial but same concepts apply.

---

Also, instead of adding dummy tweens to a timeline, you can just place function calls at exact positions in the timeline using the call() method

timeline.call(flashLed, [i], i*.01)

[gigbig]

Yeah, I have written those lines in a hurry, sorry. I think the call function is what I needed!

Oh, and your tutorial looks perfect to understand the concept: are you going to create an updated version for v12? I am sometimes confused by the v11 and v12 examples, maybe because I am pretty new to GSAP timelines.

 

Thank you Carl!