Jumpy tween to alpha:1 with tweenmax...

[FraserJohnstone222]

Hi...I'm trying to tween in a movie clip to alpha:1 using the code

TweenMax.to(mc, 1.5, {delay:2.5, alpha:1});

But this results in a smooth tween to around 50% or so and then it jumps to 100%

I have had this problem before but it's really effecting a project I'm working on for a client. Is this a problem with the Tweenmax?

Thanks very much

Fraser

[sinious]

Any reason you're not using TweenLite?

Also is this for a device or for desktop? On iPad1 I have tween issues where TweenLites are sometimes so taxing during a transition they simply blink. Doesn't happen on iPad2 though. On desktop I've never seen this problem at all.

You might want to watch the onUpdate property during the tween to see if something else is interfering with it. Also check onComplete to see if it's quitting abnormally quick.

Consider other factors as well, such as onComplete firing off after the object is fully opaque (alpha=1). If it fires off AFTER it's fully opaque, something else might be interfering with the object before the tween finishes.

[kglad]

no, it's usually a problem with text.  is that what you're seeing?

[sinious]

If it's device then it has nothing to do with text as I bitmapdata.draw() to a clip before TweenLite and it still bogs if I don't wait a half century for the single A4 cpu to catch up.

The OP said a MovieClip. If you have excessive vectors in there (text potentially being one), that could certainly cause a stall. If on the desktop, a quick cacheAsBitmap on that MovieClip will solve that problem.

If you have no reason for TweenMax like arguments to event listeners and such then I'd consider TweenLite over it every time.

[FraserJohnstone222]

Hey. Thanks for the replies! Its for a site intended primarily for desktop.It is text that is inside the bitmap so I'll try cacheAsBitmap and see if that helps. I know I'm probably being simple but why should I be using tweenlite instead of tweenmax?

[kglad]

embed your font.

[sinious]

It's just a lighter framework that doesn't have the overhead of TweenMax. Ultimately the majority of the reason you'd use Greensock Tween* is it's a much faster tween engine with some interesting options. The vast majority of tweens are fairly simple. For the same reason you use a Sprite over a MovieClip, using TweenLite over TweenMax just gives more performance, as long as you don't need the extras with TweenMax.

On todays desktops, unless you're tweening thousands of things at once, you're largely not going to notice. It's just worth noting.

Same basic structure:

import com.greensock.TweenLite;

import com.greensock.easing.Quad;

TweenLite.to(someMC, 1, {alpha:1, ease:Quad.easeOut}); // tween someMC's alpha to 1 over 1 second, easing out

[sinious]

If your font is non-standard for the web then embedding is assumed. These outlines are computationally similar or a slight bit heftier than using OS fonts rendered as vectors. The lightest weight is if you use device fonts (which will lack anti-aliasing).

[FraserJohnstone222]

I think that may be the issue (the anti-aliasing. The site in question is at http://www.absolutionsaxophonequartet.com/new and you can see the issue whn clicking the biography link at the bottom

I tried a much lighter weight font and this stopped the problem, though i would rather not say to the client that the font he asked for is not possible if i can avoid it obviously. Is there any way i can work around this issue to smooth it out and keep the fornt with the custom anti-aliasing?

just so you can see the code for the biography click function is as follows (its probably very messy so any help in cleaning up the code would be very helpful as well.

function biographyClick(e:Event)
      {
            biographycontent_mc.visible = true;
 
            news_btn.visible = true;
            biography_btn.visible = false;
            press_btn.visible = true;
            listen_btn.visible = true;
            gallery_btn.visible = true;
            contact_btn.visible = true;
 
            members_mc.ant_btn.removeEventListener(MouseEvent.CLICK, antClick);
            members_mc.jen_btn.removeEventListener(MouseEvent.CLICK, jenClick);
            members_mc.spen_btn.removeEventListener(MouseEvent.CLICK, spenClick);
            members_mc.fraser_btn.removeEventListener(MouseEvent.CLICK, fraserClick);
 
            news_btn.removeEventListener(MouseEvent.CLICK, newsClick);
            biography_btn.removeEventListener(MouseEvent.CLICK, biographyClick);
            press_btn.removeEventListener(MouseEvent.CLICK, pressClick);
            listen_btn.removeEventListener(MouseEvent.CLICK, listenClick);
            gallery_btn.removeEventListener(MouseEvent.CLICK, galleryClick);
            contact_btn.removeEventListener(MouseEvent.CLICK, contactClick);
 
                  if(contentline_mc.x == 105.95)
                            {
                                   TweenMax.to(contentline_mc, .5, {delay:.5, x:"-40"});
                                   TweenMax.to(contentline_mc.upline_mc, 1.5, {delay:1, y:"-520", height:"+520"});
                                   TweenMax.to(contentbg_mc, 1.5, {delay:2.5, x:65.95});
                                   TweenMax.to(mainbg_mc, 1.5, {delay:2.5, alpha:.1});

                                   TweenMax.to(biographycontent_mc, 1, {delay:4, alpha:1});
    
                                   TweenMax.allTo([newscontent_mc, presscontent_mc, listencontent_mc, gallerycontent_mc, contactcontent_mc], 1, {delay:4, visible:0, onComplete:restoreEventListeners});
                             }

                  else
                             {
                                   TweenMax.allTo([newscontent_mc, presscontent_mc, listencontent_mc, gallerycontent_mc, contactcontent_mc], 1, {alpha:0});
    
                                   TweenMax.to(contentbg_mc, .8, {delay:1, x:-840});
                                   TweenMax.to(contentbg_mc, .8, {delay:2, x:65.95});
    
                                   TweenMax.to(biographycontent_mc, 1, {delay:2.8, alpha:1});
    
                                   TweenMax.allTo([newscontent_mc, presscontent_mc, listencontent_mc, gallerycontent_mc, contactcontent_mc], 1, {delay:2.8, visible:0, onComplete:restoreEventListeners});
                             }
      }

again thanks very much!

Fraser

[kglad]

did you embed the font(s) you want to use?

[FraserJohnstone222]

yeah, it doesn't seem to have made any difference. I have spoken to the client and he is actually fine with tahoma with anti-aliasing for animation which is working fine, however its still bothering me that i cant get the font i want to use working!

[kglad]

try a tint-fade instead of an alpha fade. 

[sinious]

Still might be worth encapsulating the text one level deeper and setting cacheAsBitmap which will soften your text a bit but perform a lot faster. You just can't cacheAsBitmap the container that actually has the TextField in it while animating that same container or you'll force that container to re-rasterize during alpha changes negating the benefit.

e.g.

// bad, will not help

container->TextField 

container.cacheAsBitmap = true;

... fade out container

// good, cache won't re-rasterize each frame

container->textContainer->TextField

textContainer.cacheAsBitmap = true;

... fade out container

The difference is the second example will not re-rasterize textContainer as it fades out.

[FraserJohnstone222]

Annoyingly this is not working still. Also I don't think a tint fade will do what I'm after.

[kglad]

don't use anti-alias for animation.  anti-alias for readability, if needed.

or, if you absolutely need anti-alias for animation, use tlf text or recheck that all your fonts are embedded.  what you're seeing is predictable when using a non-embedded font and anti-aliasing for animation.

[sinious]

Aliased text looks pretty awful, you should always leave it on for clarity and smoothness.

If you turn off the anti-aliasing right before an animation occurs you chance your audience seeing the text blink to aliased which won't look very nice depending on font size. If the font is small it gets much worse.

Sticking the text one clip level lower with cacheAsBitmap will keep the alias, soften the text a tad more but still look nice and smooth as well as give you the performance benefits of animating an uncomplex bitmap.