burn Posted December 8, 2011 Share Posted December 8, 2011 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?! Link to comment Share on other sites More sharing options...
Carl Posted December 8, 2011 Share Posted December 8, 2011 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(); Link to comment Share on other sites More sharing options...
burn Posted December 9, 2011 Author Share Posted December 9, 2011 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}); } Link to comment Share on other sites More sharing options...
mrEmpty Posted December 9, 2011 Share Posted December 9, 2011 Have you got an example? Do you mean like the iPhone icons do? Link to comment Share on other sites More sharing options...
burn Posted December 9, 2011 Author Share Posted December 9, 2011 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. Link to comment Share on other sites More sharing options...
mrEmpty Posted December 9, 2011 Share Posted December 9, 2011 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. Link to comment Share on other sites More sharing options...
X10 Posted December 9, 2011 Share Posted December 9, 2011 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. Link to comment Share on other sites More sharing options...
burn Posted December 9, 2011 Author Share Posted December 9, 2011 The framerate will be 40fps. By using "allow smooting" images get blured?! Link to comment Share on other sites More sharing options...
Carl Posted December 10, 2011 Share Posted December 10, 2011 thanks for posting your example. it looks like you have a case of the jitters: preview http://www.snorkl.tv/dev/jitters/jitters.html cs4 fla http://www.snorkl.tv/dev/jitters/jitters.fla Link to comment Share on other sites More sharing options...
mrEmpty Posted December 10, 2011 Share Posted December 10, 2011 So just adding the filter makes it jittery? Link to comment Share on other sites More sharing options...
Carl Posted December 10, 2011 Share Posted December 10, 2011 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/ Link to comment Share on other sites More sharing options...
mrEmpty Posted December 10, 2011 Share Posted December 10, 2011 Ahh, didn't know that about the filters. I don't use them unless I really have to. Link to comment Share on other sites More sharing options...
burn Posted December 11, 2011 Author Share Posted December 11, 2011 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now