Sign in to follow this  
burn

smooth wiggle

Recommended Posts

Hey Fellas.

Here Is my code of an TimelineLite animation:

import com.greensock.*;

var animation:TimelineLite = new TimelineLite({delay:5});
animation.append( new TweenLite(drat,2,{alpha:0.1}));
animation.append( TweenLite.from(text1,3,{alpha:0}));
animation.append( new TweenLite(text1,2,{alpha:0, delay:2}));
animation.append( TweenLite.from(text2,3,{alpha:0}));
animation.append( new TweenLite(text2,3, {alpha:0, delay:2}));
animation.append( new TweenLite(drat,2, {alpha:0, delay:-3}));
animation.append(TweenLite.from(paket1,1,{alpha:0, scaleX:0, scaleY:0}));
animation.append(TweenLite.from(paket2,1,{alpha:0, scaleX:0, scaleY:0, delay:-0.5}));
animation.append( TweenLite.from(text3,1,{alpha:0}));
animation.append( TweenLite.from(text4,1,{alpha:0}));
animation.append( TweenLite.from(text5,1,{alpha:0}));
animation.append( TweenLite.from(text6,1,{alpha:0, delay:1}));
animation.append( TweenLite.from(text7,1,{alpha:0, delay:-1}));
animation.append( TweenLite.from(text8,1,{alpha:0, delay:1, onComplete:gop}));

 

As you can the after the last Tween I´m starting a function which starts my wiggle. This wiggle is realy primitiv :

function go(){
timer.start();
}

var timer:Timer = new Timer(100, 0);
timer.addEventListener(TimerEvent.TIMER, wiggle);

function wiggle(evt:TimerEvent) {
paket1.x =95+Math.random()*6;
paket1.y =110+Math.random()*5;

}

Does anybody know how I can create an smooth wiggle? Maybe with TweenLite or TweenMax?!

Share this post


Link to post
Share on other sites

you could try something like this:

 

import com.greensock.*;

function wiggle(){

TweenLite.to(paket1, .2, {x:95+Math.random()*6,  y :110+Math.random()*5, onComplete:wiggle});

}


wiggle();

Share this post


Link to post
Share on other sites

Technical It works. Thanks.

But it´s more a jitter than a smooth animation.

I´ve checked som easing but it´s jittering also?!

function wiggle(){
TweenLite.to(paket1, 0.8, {x:93+Math.random()*4,  y :100+Math.random()*8,ease:Back.easeOut, onComplete:wiggle});
}

Share this post


Link to post
Share on other sites

Have you got an example? Do you mean like the iPhone icons do?

Share this post


Link to post
Share on other sites

Hey mr empty,

here is an tesfile of my animation.

http://burn4ever.de/temp/

At the End of it I´ve created an y-wiggle with this code:

import com.greensock.*;
import com.greensock.easing.*;


var animation:TimelineLite = new TimelineLite({delay:5});
animation.append( new TweenLite(drat,2,{alpha:0.1}));
animation.append( TweenLite.from(text1,3,{alpha:0}));
animation.append( new TweenLite(text1,2,{alpha:0, delay:2}));
animation.append( TweenLite.from(text2,3,{alpha:0}));
animation.append( new TweenLite(text2,2, {alpha:0, delay:2}));
animation.append( new TweenLite(drat,2, {alpha:0, delay:-2}));
animation.append(TweenLite.from(paket1,0.5,{alpha:0, scaleX:0, scaleY:0,onComplete:wiggle1}));
animation.append(TweenLite.from(paket2,0.5,{alpha:0, scaleX:0, scaleY:0, delay:-0.2,onComplete:wiggle2}));
animation.append(TweenLite.from(plus,0.5,{alpha:0, scaleX:0, scaleY:0,delay:-0.2}));
animation.append(TweenLite.from(cd,0.5,{alpha:0, scaleX:0, scaleY:0,delay:-0.2,onComplete:wiggle4}));
animation.append(TweenLite.from(stoerer,0.5,{alpha:0, scaleX:0, scaleY:0,delay:-0.2}));
animation.append(TweenLite.from(shoplink,1,{alpha:0}));



function wiggle1(){
var smooth:TimelineLite = new TimelineLite();
smooth.append( new TweenLite(paket1,1.5,{y:110,ease:Sine.easeOut}));
smooth.append( new TweenLite(paket1,1.5,{y:100,ease:Sine.easeOut,onComplete:wiggle1}));
}
function wiggle2(){
var smooth:TimelineLite = new TimelineLite();
smooth.append( new TweenLite(paket2,2.2,{y:117,ease:Sine.easeOut}));
smooth.append( new TweenLite(paket2,2.2,{y:110,ease:Sine.easeOut, onComplete:wiggle2}));

}

function wiggle3(){
var smooth:TimelineLite = new TimelineLite();
smooth.append( new TweenLite(plus,2,{y:136,ease:Sine.easeOut}));
smooth.append( new TweenLite(plus,2,{y:126,ease:Sine.easeOut, onComplete:wiggle3}));

}
function wiggle4(){
var smooth:TimelineLite = new TimelineLite();
smooth.append( new TweenLite(cd,2,{y:140,ease:Sine.easeOut}));
smooth.append( new TweenLite(cd,2,{y:130,ease:Sine.easeOut, onComplete:wiggle4}));

}

But I don´t realy like it. It´s stuttering and I want make the tween slower and smoother but don´t know how.

If I´m giving more time for every single tween, it´s stuttering more.

Share this post


Link to post
Share on other sites

The items at the end going up and down?

 

What frame rate is your FLA set to? If that's low, and you are doing slow movements, that'll be jerky. If I get time later today I'll try writing something, it would be useful for me to have some generic reusable tweens so I'll have a go at writing some.

Share this post


Link to post
Share on other sites

Also, have you ticked "Allow Smoothing" for the image options in the Library?

 

I do concur with the frame rate comment by mrEmpty also.

 

D.

Share this post


Link to post
Share on other sites

The framerate will be 40fps.

By using "allow smooting" images get blured?!

Share this post


Link to post
Share on other sites

adding a filter makes it render on whole pixels.

if you need to use filters, BlitMask does a great job of smoothing it out as seen in the rotated/glowy text example on the BlitMask page http://www.greensock.com/blitmask/

Share this post


Link to post
Share on other sites

Ahh, didn't know that about the filters. I don't use them unless I really have to.

Share this post


Link to post
Share on other sites

Hey Carl.

Thank you so much to make the effort with the custom fla.

By the way, I´m a beginner using the greenSock engine and with this one line of code you gave me a free lesson ;-)

I definitely have to studdy the whole "Learning Resource" to make my animations pro.

 

But back to my case.

I´ve checked youre advice, but I think the jitter comes more from the short distance and the duration of 2 seconds I use.

In this case I can live with that ;-)

http://www.drat-music.com

Share this post


Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.