Carl

hello scott, nice example. 2 problems 1: your timeline2 will not automatically play when you append something to it,so you must explicitly tell it to play like timeline2.play() 2: every time you rollover test your roomShow function will be adding new tweens each time, so if you rollover test 30 times... timeline2 will have 30 tweens in it. instead do this set up timeline2 at the top of your script to include the tween at the start but have the timeline paused var timeline2:TimelineMax = new TimelineMax({paused:true}); timeline2.append(TweenMax.to(willow, 1, {alpha:"1"})); function roomshow (event:MouseEvent):void { timeline2.play(); } function roomhide (event:MouseEvent):void { timeline2.reverse(); } also since you only have one tween, you may not need to use TimelineLite at all. A simple single TweenLite would suffice willow.alpha=0; var roomAnimation:TweenLite = TweenLite.to(willow, 1, {alpha:1}); test.addEventListener(MouseEvent.ROLL_OVER, showImage); test.addEventListener(MouseEvent.ROLL_OUT, hideImage); function showImage(e:MouseEvent):void{ roomAnimation.play(); } function hideImage(e:MouseEvent):void{ roomAnimation.reverse(); }

hi edward, i don't know if i totally understand the question but this will allow you to cross-fade between two images in one container sprite import com.greensock.*; //initialize alpha of 2 image to 0 containerSprite.image2.alpha=0; //create timeline with tweens to fade image1 out and image 2 in var tl:TimelineMax=new TimelineMax({}); tl.insert(TweenMax.to(containerSprite.image1, 1, {alpha:0})) tl.insert(TweenMax.to(containerSprite.image2, 1, {alpha:1})) btn1.addEventListener(MouseEvent.CLICK, showImage1); btn2.addEventListener(MouseEvent.CLICK, showImage2); function showImage1(e:MouseEvent):void{ //tween to beginning of timeline to show image 1 tl.tweenTo(0) } function showImage2(e:MouseEvent):void{ //tween to end of timeline to show image 2 tl.tweenTo(tl.duration) }

you're welcome. glad to help.

make sure you have the import for the eases. import com.greensock.easing.*;

good job a at incorporating into TimlineMax! just a few small adjustments: var tl:TimelineMax=new TimelineMax({repeat:-1}); var stf1:SplitTextField = new SplitTextField(myTextField1); tl.appendMultiple(TweenMax.allFrom(stf1.textFields, 4, {y:"-100", autoAlpha:0, ease:Elastic.easeOut, repeat:1, yoyo:true}, 0.05)); var stf2:SplitTextField= new SplitTextField(myTextField2); tl.appendMultiple(TweenMax.allFrom(stf2.textFields, 4, {y:"-100", autoAlpha:0, ease:Elastic.easeOut, repeat:1, yoyo:true}, 0.05)); addChild(stf1); addChild(stf2); text 1 comes in text 1 goes away text 2 comes in text 2 goes away text 1 comes in text 1 goes away ...

this is a good problem to solve with timelinemax, but start by fixing this var stf:SplitTextField = new SplitTextField(myTextField1); TweenMax.allFrom(stf.textFields, 1, {y:"-100", autoAlpha:0, ease:Elastic.easeOut}, 0.05); var stf2:SplitTextField = new SplitTextField(myTextField2); TweenMax.allFrom(stf2.textFields, 1, {y:"-100", autoAlpha:0, ease:Elastic.easeOut}, 0.05); addChild(stf) you for your second splitTextField you were using the same name as the first one: stf so the first one was getting overwritten before it could even be animated. if you want tweens to repeat you need to use a repeat property most likely in combination with yoyo:true. if you want to wait for for a tween to happen, use delay. i have to run. if you don't get this fixed i will check in later. ultimately timelinelite/max will make the sequencing much easier to manage. http://www.greensock.com/as/docs/tween/ ... enMax.html carl

very glad you got it fixed. i make a mess all the time. nothing to worry about. that's why there are forums and how we all learn. i hope the rest of your project goes smoothly. best, Carl

my apologies on the killAll comments... i was totally focusing on the big sections of code and missed the whole part about how you changed it to killTweensOf. I finally got to looking at your file. One issue really had me pulling at straws. Instead of focussing on the transitions, I wanted to figure out why sometimes when you rolled over a button the green bar would quickly disappear. It seemed as if a a rogue mouse_out was taking place. I had an interesting time tracking it down. instead of writing out a whole bunch of stuff I made a quick screencast. please excuse the sleepy rambling. once you understand the rollOver issue/bug, you can jump to 4:57 for the solution this video is unlisted meaning only people who view this thread can see it. I'm hoping the steps I went through can hopefully save you or other people some valuable time. if for any reason you don't want your file exposed in this fashion I will take it down... no problem. the final solution to the odd nav behavior was removing the init of OverwriteManager and the overwrite props in the over/out tweens. I don't know why that is. I've done quite a bit with the GreenSock platform and have never had a reason to overwrite anything different than the default settings so I don't have any input on why the behavior was happening or what the OM has to do with it. again, your project looks really great and is a very good example of how much can be done with the gs platform. Carl

first off, very nice looking site and the tweens work very well under the conditions you mentioned. the big problem here is killAll. you are passing in a reference to button such as TweenMax.killAll(button)... but kill all does not need to know what object it should kill the tweens of. It automatically kills the tweens of ALL objects. in the version from the first link, if you roll off a button very slow and dont rollover another button you will see that the active button's green bg tweens back to the left. if you rolloff quickly and onto another button it doesn't... it just snaps back. this is because when you roll over the next button you kill all tweens. I don't think killAll is the solution you want. I think the repetitive killAll calls that are being made when you rollover buttons during a timelinetransition is what is causing the flickering as well... but I'm not totally sure. furthermore i think the onComplete:endTransition may be firing often which creates the "flicker" effect. even though you are killing tweens, it seems that whatever is handling the fading in of the next scene is still happening. I haven't looked at your file yet. might do that later. one thing i would do troubleshoot is slow down all the tweens so that you can better see exactly what is happening and also add some traces to your functions to see when they are firing.

you have come to the right place. yes, a series of tweens from a to b to c to d can be done. TweenLite is used for getting your object from a to b. You can sequence a few tweens by running one tween, then delaying the second one to start after the first... but for ultimate control and flexibility you would want to use TimelineLite which allows you to sequence, rewind, pause and whole bunch more. the interactive example here http://www.greensock.com/timelinelite/ gives a tremendous look at the features. i would really urge you to get familiar with the TweenLite/Max basics before diving into TimelineLite though. http://www.greensock.com/tweenlite/ http://www.greensock.com/get-started-tweening/ http://www.greensock.com/learning/

if textBox1 is re-used for each section, then leave it the same. naming things textBox1 and textBox2 though make it difficult for other developers to understand what you are doing. something like galleryTextBg would be better. Carl

hi brant, i glad you experimented with the card flip. I would love to help you but I really don't know much about liquid stage. from your description it sounds like a very strange flash rendering bug is happening. if you zip and post a simplified fla with only this behavior / functionality present someone will look at it. perhaps the html and swf would be helpful as wel. -don't post the greensock classes thanks Carl

thank you for posting the zip. I have been curious and a bit mystified about the motionPath classes. This example makes it all ridiculously clear what they do and how they work.

welcome to the forum. it is very difficult to visualize your file / problem based on your description. when you say the arrow is drawing right away, do you mean it is animating? or just appearing? you mentioned it was part of the clip that was fading in... so it makes sense that you will see it. perhaps you could set the arrow's alpha to 0 initially and then fade it in before or while the frame:48 animation plays. it is difficult learning a bunch of things at once. with flash these little troubles turn out to be the best learning experiences. keep at it. Carl

yes, please take a few moments to read: http://www.greensock.com/get-started-tweening/ http://www.greensock.com/as/docs/tween/ ... nLite.html to call a function while a tween updates do this: import com.greensock.*; import com.greensock.easing.*; var myTween:TweenLite = TweenLite.to(burger, .5, {alpha:0, ease:Linear.easeNone, onUpdate:myUpdateFunction}); function myUpdateFunction(){ //write some code to do whatever you want trace("myTween's current time is " + myTween.currentTime); } The way you pass in tween/object properties like intance name, property, duration, ease, is a little bit different than the built in AS3 Tween class but TweenLite is FAR FAR FAR FAR superior in flexibility, ease of use, performance and everything else. one of the most basic advantages is that TweenLite allows you to tween multiple properties (INCLUDING FILTERS) at once like: TweenLite.to(mc, 1, {alpha:.5, x:300, y:200, glowFilter:{color:0x91e600, alpha:1, blurX:30, blurY:30}) looking at your code again it looks like you are using an onMotionChanged to adjust a blur filter... no need for that at all with TweenLite/max, you can tween filter settings as easily as you can tween alpha. check out the plugin explorer on the getting started page. have fun Carl

thank you! i downloaded the new files and onRepeat does not fire when the timeline is restarted.

goto http://www.greensock.com/tweenmax/ scroll down to the plugin explorer click on "example" next to scrollRect enter the following values l:0 r:288 t:216 b:216 press green tween button use the following code (includes plugin activation for TweenLite) import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([scrollRectPlugin]); TweenLite.to(mc, 1, {scrollRect:{left:0, right:288, top:216, bottom:216}}); put the text inside a movieclip with instance name mc adjust the ltrb values according to the size of your mc. Carl

Hey ChristaFlash, Yeah you can remove an eventListener. To my understanding proper eventListeners and the callBack functions that add as tween properties are a little different. To implement an eventListener on a tween that is removable the following approach will work: import com.greensock.* import com.greensock.events.TweenEvent; var tweenMc:TweenMax = TweenMax.to(mc, 5, {x:600}); tweenMc.addEventListener(TweenEvent.UPDATE, updateFunc) function updateFunc(e:TweenEvent):void{ trace("update " + mc.x); if(mc.x>300){ trace("update done"); tweenMc.removeEventListener(TweenEvent.UPDATE, updateFunc); } }

http://asgamer.com/2009/creating-an-as3 ... tom-cursor scroll down to the gray box below step 4 for an interactive example. have fun Carl

yes you can use a TweenMax to control the playback rate of a timeline. the way I'm familiar with allows you to tween a timelines currentProgress property and apply an ease to that tween like so: TweenMax.fromTo(timeline, 8, {currentProgress:1, ease:Circ.easeOut}); I made a little example that you can view here: http://www.snorkl.tv/dev/easedTimeline/ ... eline.html the code looks like this: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineMax = new TimelineMax({paused:true}); // add a whole mess of boxes to the stage and append tweens for each to a timelinemax instance: for(var i:Number = 0; i var newBox:Box = new Box(); newBox.x=i*62; addChild(newBox) tl.append(TweenMax.fromTo(newBox, .8, {alpha:0}, {alpha:1, immediateRender:true}), -.6); } //setup the buttons normal.buttonMode=true; normal.mouseChildren=false; eased.buttonMode=true; eased.mouseChildren = false; normal.addEventListener(MouseEvent.CLICK, playNormal) //function to play the timeline normal function playNormal(e:MouseEvent):void{ easedTimeline.kill(); tl.restart(); } eased.addEventListener(MouseEvent.CLICK, playEased) //special tween to ease the playback of the timeline: var easedTimeline:TweenMax = TweenMax.fromTo(tl, 8, {currentProgress:0}, {currentProgress:1, ease:Circ.easeOut, paused:true}); //control the tween that tweens the timeline's currentProgress property function playEased(e:MouseEvent):void{ easedTimeline.restart(); } there may be a more elegant approach, but this seems to work pretty closely to your example. fiddle with the easedTimeline duration and ease types download flash cs4 fla here: http://www.snorkl.tv/dev/easedTimeline/easeTimeline.fla enjoy Carl

thanks bassta, I will check it out. looks great.

you really had me thinking here. the problem was a bit in our understanding of how onRepeat works. onRepeat fires when the timeline rewinds for the first part of the yoyo AND it also fires immediately after the timeline is told to play when the next question comes in. or atleast that's what my traces were telling me. I semi-fixed the file by getting rid of the clear() and using timeline.restart() instead of timeline.play(). The problem though was on playing the timeline the second time... the onRepeat would fire immediately when it started playing SO the question would change before the blue thing covered it up. If that is confusing, don't worry. I found a good fix. to minimize those onRepeats from firing I broke you timeline into 2 tweens replace the following code in your file var timelineTransition:TimelineMax = new TimelineMax({paused:true, onComplete:timelineComplete}); // changed your values of 989 to 500 so I could see the questions change and I slowed it down. //the first tween moves the blue thing on screen and when its done it switches the question timelineTransition.append(TweenMax.to(transitionMe, 2, {width:500, height:500, ease:Linear.easeNone, onComplete:timelineRepeat})); //the second tween brings the blue thing back to where it started timelineTransition.append(TweenMax.to(transitionMe, 2, {width:31.5, height:31.5, ease:Linear.easeNone})); goNext.addEventListener(MouseEvent.MOUSE_DOWN, gotoNextFunction); function gotoNextFunction(e:MouseEvent):void { goNext.alpha = 0; goNext.mouseEnabled = false; transitionMe.alpha = 1; trace(timelineTransition.currentProgress + " / " + timelineTransition.duration); //restart() forces the timeline to play from the beginning timelineTransition.restart(); i++ } function timelineRepeat():void { trace("repeat"); arrayString[i](); questionFeedback.text = ""; } function timelineComplete():void { transitionMe.alpha = 0; //timelineTransition.clear(); trace("complete! my progress is" + timelineTransition.currentProgress); trace("***\n") } let me know how it works out. I know this helped me understand onRepeat better. Carl

oh, just noticed function timelineComplete():void { transitionMe.alpha = 0; timelineTransition.clear(); } i don't think you want that in there.

hello, thanks for the clear question and sample. I couldn't open your fla. upload a cs4 version and I will give it a peak. Carl

yup!