tweenmax slot machine

[cnapsys]

Hey all,

I was following the tutorial posted by Carl
(http://snorkl.tv/dev/blitmask/slotDemo.html) and I'm trying to add a
couple of things.

First I would like to add a blurFilter to the tween but I'm having a couple of issues:

1.
When the blur starts the blitmask gets clipped. Since I blur it only on
the Y axis for 30px it actually makes the blitmask show 15px more on
top and 15 more on the bottom.

How could I fix this???

2. I would also like the blur to fade out when the tween is complete.

Using remove: true, removes the blur but the action is too sudden.

The
animation is blurred nicely and then right as the strips of numbers are
about to stops the blur disappears and the numbers are sharp again. But
it looks too funky.

Is there a way to transition the remove blur process???

3. Is there a way to get the value/name of the mc the tween stops on?

I can trace the randomNumber generated and get the value in px of the tweens for each strip.

However, this doesn't really help in the later cycles since the tweens continue from their end positions.

 

This is what I have so far:

 

TweenMax.to(this["strip" +i], 3 + (i*.5), {y:strip1.y + newNumber,  blurFilter:{blurY:30, quality:3, remove: true}, onComplete:showBtn});

 

Any pointers are greatly appreciated.

thx and have a great day!!!

[Carl]

Hi,

 

That's an interesting challenge.

 

The problem is that the blur changes the size of the target display object and also flash gets funky when you try to apply a mask to an object with a filter on it. I had to nest the strip in another mc called stripHolder. 

 

strip1 has the blur tween on it

stripHolder contains strip1

a new clip called mask_mc masks stripHolder

 

In essence, the object being blurred isn't being masked directly, its parent is being masked.

 

I added a little math that figures out the ending number based on the y position of the strip that is being tweened. You can use this number to dynamically target movieclips if you like

 

strip1["number" + winning + "_mc"].alpha = .5 //or whatever

 

You can see the modified file here: http://snorkl.tv/dev/blitmask/BlitMask_blur.html

 

And, yes, "remove" on a blur tween immediately removes the blur tween. You could use a tweenmax that blurs to a certain value and then does a repeat with yoyo to remove the blur.

 

 

 

TweenMax.to(strip1, 3, {y:String(newNumber), onComplete:showBtn});
        //blur to 40 and then back to 0.
        TweenMax.to(strip1, 1.1, {blurFilter:{blurY:40}, repeat:1, yoyo:true});
 

CS5 source files attached.

 

 

BlitMask_blur.zip

[cnapsys]

That looks super super cool.

I'll have a look at it in the morning and post back my results.

Thanks so much for taking the time Carl...

[cnapsys]

Works like a charm. I'll try to incorporate it in my project and will post a link once everything is done.

You're the man Carl. Mad props!!!

[cnapsys]

Hey Carl,

I got another question if you don't mind...

When playing around with your 3 strip version I noticed that the "Spin" button does not get disabled or hidden while the tween is animated.

I tried to incorporate the onComplete: showBtn call at the end of the tween but I noticed a couple of things:

 

The showBtn function gets called when the first strip stops tweening and not at the end of the while loop.

It is my understanding that by passing a function onComplete it fires that right away and the button shows up as soon as the first strip stops tweening.

 

Is there a way to call that function at the end of the loop when all the tweens have stopped?

Thanks again for your time and have a great day!

[cnapsys]

I think I may have found a solution by using the onCompleteParams call:

 

TweenMax.to(this["strip" +i], 2 + (i*.5), {y:strip1.y + newNumber, onComplete:myFunction, onCompleteParams:[i]});

having the tween in a loop...

 

function myFunction(i):void {
    //trace("finished tweening " + event.target.target);
	if (i==3) spin_btn.visible = true;
	else spin_btn.visible = false;

when i = 3 it means that the last tween reached its end and the spin button is displayed again.

Not sure if this is the best way or if it may cause any other issues but it seems to be working fine.