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!

hmm i made an example where instead of passing null into the colorTransform props I have a specific values. cs3 fla attached. save it into your project folder. i rapid-fired the button many many times and it always works. Carl

First off, great job on all the animation it looks really good. As you've realized you got yourself into a bit of a tricky situation here. Once you add more galleries it is going to be very difficult to detect which gallery is transitioning by testing all the gallery's alphas and then doing something to hide the current transition when a new gallery gets requested via rapid-fire clicking. Theoretically what you want to do is handle all the transitions dynamically, meaning that you write one function that can handle transitioning all the parts of any gallery/section based on its name. in order for this to work you need to have more consistency in your instance names such as chainsGallery chainsText instead of textBox1 chainsContent objectsGallery objectsText objectsContent somethingNewGallery somethingNewText somethingNewContent you would also create a variable that tracks which SECTION (words in bold) has been selected each time a button is clicked. var currentSection:String = "chains"; using some of your existing setup each nav button would call an eventListener that looks like this: function navClick1(e:MouseEvent):void{ introSection("chains"); } function navClick2(e:MouseEvent):void{ introSection("objects"); } function introSection(requestedSection:String):void{ //fade out current/active section TweenMax.to(this[currentSection + "Gallery"], .5 {alpha:0}); TweenMax.to(this[currentSection + "Text"], .5 {alpha:0}); TweenMax.to(this[currentSection + "Content"], .5 {alpha:0}); //fade in new stuff TweenMax.to(this[requestedSection + "Gallery"], .5 {alpha:0}); TweenMax.to(this[requestedSection + "Text"], .5 {alpha:0}); TweenMax.to(this[requestedSection + "Content"], .5 {alpha:0, onComplete:playGallery, onCompleteParams:[requestedSection]}); //now that the old is faded out and the new is on its way in, give currentSection a new value currentSection = requestedSection; } function playGallery(requestedGallery:String):void{ this[requestedSection + "Gallery"'].gotoAndPlay(2); TweenMax.to(this[requestedSection + "Gallery"], 1, {alpha:1, ease:Linear.easeNone}); } the above is untested pseudo code. it is only given as an example of a general approach with the emphasis on dynamically targeting the many clips. eventually you will need to add conditional statements to handle what happens if the user selects the same section twice (currentSection == requestedSection). You might want to star in a clean fla file and build something very simple that can tween in and out of multiple sections. There are many ways to approach this. The good news is once you have 2 sections transitioning well, its no big deal to handle 30 sections. for a simpler solution to your current situation you could just prevent people from requesting a new section while a section is animating in. whenever a button is clicked set a boolean value to true such as isSectionAnimating = true before a section is animated test to see that an animation isn't in progress. if(!isSectionAnimating){ //do all your code here for animating a section in tweenMaxto tweenMaxto tweenMaxto ... //onComplete of the very last tween or event fire a function that will set isSectionAnimating = false } hope one of these ideas helps you sort your issue, it may take a little re-working and more head banging but in the end you will be happy. Carl

Greetings. the reason that is happening is that when you click fast, sometimes you are clicking when somefield is already red, so when it tweens to red there is nothing to tween to as it already is red, or when the yoyo/repeat ends... since it started on red... it ends on red. the solution is to use a fromTo which allows you to specify the start and end values. This will allow your tween to always return to the initial starting values like so: TweenMax.fromTo(somefield, .2, {colorTransform:{tint:null}}, {colorTransform:{tint:0xff0000, tintAmount:0.5}, repeat:3, yoyo:true}); http://www.greensock.com/as/docs/tween/ ... ml#fromTo() enjoy Carl

Hello Ziociro, Welcome to the forums and Happy New Year to you. TweenLite is behaving exactly as you are telling it to. Your tween always says " move to the left the value of your width". for the sake of clarity lets just say the width is 100 pixels and we want to move right. assume your mc has an initial x of 0 So if I start a tween and say "hey mc, move 100 pixels to the right of where you are now" the mc will start moving from 0 to 100. If I get impatient half way through and yell again "hey mc, move 100 pixels to the right of where you are now". If the box had an x of 50 when I yelled or clicked again it will move to 150. This is what is happening in your example. Every time you hit the button, a new starting and end value are generated based on where the mc or btn currently is. With TweenMax there is an isTweening method available that allows you to easily test whether an object is tweening or not. So in your case what you want to do is make sure that a new Tween isn't being created while an existing tween is still in progress. TweenMax.isTweening(mc) will return a value of true of false. To make you code work do this: myBtn_left.addEventListener(MouseEvent.CLICK, moveleft); // function moveleft(e:MouseEvent):void{ trace(TweenMax.isTweening(myMc); //will output true of false //only if myMc is NOT tweening allow the tween to occur if(!TweenMax.isTweening(myMc){ TweenMax.to(myMc, 1, {x:myMc.x - myMc.nmbr_1.width, ease:Sine.easeOut}); } } Also also if you are going to be tweening to a relative value such as "100 pixels from where the mc is" you can pass in the target value as a String by putting it in quotes TweenMax.to(mc, 1, {x"100"}); if you are passing in a relative value that is the outcome of an equation or expression do this TweenMax.to(myMc, 1, {x:String(-myMc.nmbr_1.width), ease:Sine.easeOut}); enjoy Carl

very glad to hear it. it is a neat effect you were going for. you're welcome. Carl

I couldn't open the latest file. I'm working with Flash Pro CS4 anyway I made my file work like yours. view the swf here: http://snorkl.tv/dev/stickyNav_special/ you can download the fla here http://snorkl.tv/dev/stickyNav_special/ ... pecial.fla (use your own greensock classes) the code looks like this import com.greensock.*; nav_mc.buttonMode=true; nav_mc.addEventListener(MouseEvent.MOUSE_OVER, navOver); nav_mc.addEventListener(MouseEvent.MOUSE_OUT, navOut); nav_mc.addEventListener(MouseEvent.CLICK, navClick); nav_mc.nav1_mc.mouseChildren=false; nav_mc.nav2_mc.mouseChildren=false; nav_mc.nav3_mc.mouseChildren=false; nav_mc.nav4_mc.mouseChildren=false; //give each button a special tint color nav_mc.nav1_mc.tintValue=0xff0000; nav_mc.nav2_mc.tintValue=0xffff00; nav_mc.nav3_mc.tintValue=0x00ff66; nav_mc.nav4_mc.tintValue=0x6600ff; //give each button a reference to the rectangle box thing that grows nav_mc.nav1_mc.box=boxGrow1_mc; nav_mc.nav2_mc.box=boxGrow2_mc; nav_mc.nav3_mc.box=boxGrow3_mc; nav_mc.nav4_mc.box=boxGrow4_mc; var currentNav:MovieClip; function navOver(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; trace(navItem.name); if (navItem!=currentNav) { //tween the bar TweenMax.to(bar_mc, .5, {tint:navItem.tintValue}); //tweeen the little circle TweenMax.to(dot_mc, .5, {tint:navItem.tintValue}); //tween the box that grows TweenMax.to(navItem.box, .5, {tint:navItem.tintValue}); TweenMax.to(navItem.box, .5, {height:50}); } } function navOut(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; if (navItem!=currentNav) { TweenMax.to(navItem.box, .5, {height:10, tint:null}); // if a button has already been clicked then reset the bar and dot to the colors of the currently clicked item if (currentNav) { TweenMax.to(bar_mc, .5, {tint:currentNav.tintValue}); TweenMax.to(dot_mc, .5, {tint:currentNav.tintValue}); // or else if no button has been clicked yet, set things back to white or normal color } else { TweenMax.to(bar_mc, .5, {tint:null}); TweenMax.to(dot_mc, .5, {tint:null}); } } } function navClick(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; if (currentNav!=navItem) { if (currentNav!=null) { currentNav.useHandCursor=true; TweenMax.to(currentNav.box, .5, {height:10, tint:null}); } trace("play some animation"); navItem.useHandCursor=false; currentNav=navItem; } } hopefully this gets you closer. good luck with your project! Carl