Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,152
  • Joined

  • Last visited

  • Days Won

    532

Everything posted by Carl

  1. 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
  2. oh, just noticed function timelineComplete():void { transitionMe.alpha = 0; timelineTransition.clear(); } i don't think you want that in there.
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. very glad to hear it. it is a neat effect you were going for. you're welcome. Carl
  9. 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
  10. i went to download your file yesterday. uploading.com asked me to wait a minute before it would allow me to download. i switched to another tab and got distracted. went to retrieve the file today and the link expired or uploading.com was inaccessible. perhaps you can zip the fla and upload it here using the "upload attachment" option when you post. hope you made some progress in the interim. Carl
  11. Hello Beno, I'm glad things are getting closer. The sum of all your code is a bit much to digest. This isn't a criticism of your code, just the fact that its a bit rough to look at it all and make any real sense of it without knowing the full scope of what it is trying to accomplish. That being said, your recent explanation does help quite a bit. In general terms it seems you are re-sorting your images each time you want them to tween. Back to the key issue of the tween not repeating, I think the expectations of what the following code should do is where the problem lies: var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()}); while (i { timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) ); ++i; } this is the only place that any animation takes place. its also the only place that the x property of parent_container is referenced. the only thing that loop does is something SIMILAR to TweenLite.to(parent_container, 1, {delay:1, x:j-_w}) TweenLite.to(parent_container, 1, {delay:2, x:j-_w}) TweenLite.to(parent_container, 1, {delay:3, x:j-_w}) TweenLite.to(parent_container, 1, {delay:4, x:j-_w}) TweenLite.to(parent_container, 1, {delay:5, x:j-_w}) TweenLite.to(parent_container, 1, {delay:6, x:j-_w}) ... TweenLite.to(parent_container, 1, {delay:7, x:j-_w, onComplete:nextSlide}) (i've simplified the delay) the focus here is on the fact that each new TweenLite that is being created in the loop is tweening the same object (parent_container) to the same final x position (j-_w) once the first tween runs, parent_container is at an x of j-_w... so all subsequent tweens have nowhere to move parent_container TO as it is already there. in addition, the onComplete:NextSlide will only fire once the timeline completes all of its tweens. From what I gather you want an image to tween, some re-sorting to occur, tween another image and so on. I don't believe that the use of the loop with TimelineMax in its current state is going to achieve that goal. Again, just trying to offer my 2 cents. Its much easier for me to troubleshoot a specific functional problem of a GreenSock implementation than to troubleshoot what isn't working when it is combined with much more complex mathematics and conditional statements. From a development standpoint it might be easier to create a button on the stage that calls the nextSlide() function. get that function to visually re-sort / reposition your assets without tweening. once you are positive that nextSlide() can infact get the next slide on the screen and move others around then consider how it can be animated efficiently. Right now there is too much like: j = i%_numOfSlides; var container:MovieClip = new MovieClip(); img.myArray = [imagesArray[j], "index.py", _w, _h, (_w+spacer)*j+_x+70, _y]; that is impossible to understand without further context whether there is something in the TimelineMax set up that is causing the delay problem or something elsewhere. If you get things running better and need help cleaning something up GreenSock-related, let me know. Best of luck on your project Carl
  12. Hey Bassta, I was going to recommend the sticky showcase thread in this tweening forum, but it seems you already know about it Frankly, I never really bother to look in there It does seem that a thread showcasing client projects / fully working sites is a bit different than a repository for working code samples. this site here is a pretty cool resource for the AS3 community as a whole: http://cookbooks.adobe.com/actionscript As far as there being a forum on forums.greensock.com dedicated to this sort of thing that would be something for the admin to weigh in on. As a GreenSock enthusiast/nut I agree that such a resource would be quite valuable. Perhaps if this thread does not get the attention of an admin you can create a new thread addressing this issue or try to contact info@greensock.com. I assure you that the support channels around here are world class and you will get an answer. Carl
  13. since each tab already has a linkId you could create a frameArray like: var frameArray:Array = new Array("home", "about", "contact", "etc"); the tabUp() function for MOUSE_UP could include something like var target:Object = event.currentTarget; trace("my linkId " + target.linkId); trace("my frame " + urlArray[target.linkId]); gotoAndPlay(urlArray[target.linkId]);
  14. hey beno the main source of trouble is that in your loop you are recreating a timeline many times. I believe that in each iteration of the loop you are overwriting the timeline that was created in the previous iteration of the loop. further more if the values of j and w aren't changing, you are also telling the container to tween to the same place a bunch of times so you will probably only notice one tween happening. to start try something like this //Have one timeline created outside the loop var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()}); //then use your loop to add TweenLites to the parent timeline while (i { //each time you append a new TwennLite, make sure the ending x value is different timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:(j-_w)* i or someEquationToGenerateAUniqueValueForTheEndPositionOfEachTween}) ); ++i; trace(i); } also your onCompleteNextSlide may work better if it happens on the end of each Tween that is added and not the parent timeline. There is a good chance that I'm not understanding your situation completely and my advice may not be completely helpful, but perhaps it will help get you closer to having this work. Carl
  15. Bassta, thank you for sharing your work. I personally enjoy looking at how other people organize their code and get things to work. I believe many people can benefit from just downloading and exploring your files. It is a very neat component and makes very good use of the powerful GreenSock platform. Happy New Year Carl
  16. very glad you got it working!
  17. Carl

    Error #1069

    this line here seems strange: var timeline:TimelineMax = new TimelineMax(NextSlide); you should only be passing a vars object into a TimelineMax constructor, not the name of a function. remove the NextSlide from the line above and see if you still get errors Carl
  18. hello it is extremely rare if not impossible that a swf once published and working in Flash will fail to run in a browser because of something related to the GreenSock code. perhaps you could show some of the code you are using or upload a simplified fla file for someone to look at. thanks Carl ps. make sure you clear your browser cache to ensure that you are seeing the most recent version of the swf that you uploaded
  19. there are a few errors in the way you are incorporating the code from the tutorial. every where I use the var navItem it is to determine which button is being clicked on as I applied my MOUSE_OVER eventListeners to a movieclip that contains all my buttons. this approach allows me to apply eventListeners to many objects without having to code them all individually. more here: http://www.snorkl.tv/2010/08/assign-eve ... enttarget/ since you are applying your listeners diretly to each buttons such as portfolio_btn.addEventlistener it is going to work differently. furthermore, in the tutorial each button contains a dot_mc which has its tint changed. in your file your buttons are effecting movieclips that live outside the buttons and have unique instance names such as portfolio_mc. with your current implementation navItem.portfolio_mc is what is throwing the error as portfolio_mc probably doesn't live inside portfolio_btn or whatever navItem is referring to. if you upload a simplified fla file I will take a look at it. Being a holiday I may not get to it until tomorrow. thanks and Happy New Year Carl
  20. oh, in addition, you could also create your subtimelines in advance, append them to the supertimeline right away (have the super paused) and then later on prepend() a whole bunch of stuff.
  21. Hello cipriancaba, Thank you for so clearly explaining your issue. In order to better provide a solution can you explain why it is that your subtimelines need to be created prior to the supertimeline being created and played? In a situation like this I would normally just recommend that you create or populate the subtimelines as soon as they are being placed in the supertimeline, this way there is no need to pause and resume and they will perform as expected. import com.greensock.*; //set up supertimeline with some stuff in it var superTL:TimelineMax=new TimelineMax({paused:true}); superTL.append(TweenLite.to(b0, 1, {x:300})); //create subtimelines for future use var child1TL:TimelineMax = new TimelineMax(); var child2TL:TimelineMax = new TimelineMax(); stage.addEventListener(MouseEvent.CLICK, playTL); function playTL(e:MouseEvent):void { //populate first subtimeline child1TL.append(TweenLite.to(b1, 1, {x:300})); child1TL.append(TweenLite.to(b1, 1, {alpha:0})); //populate second subtimeline child2TL.append(TweenLite.to(b2, 1, {x:300})); child2TL.append(TweenLite.to(b2, 1, {alpha:0})); //append to supertimeline superTL.appendMultiple([child1TL, child2TL], 0, TweenAlign.SEQUENCE); //play supertimeline superTL.play(); } Perhaps there is a way to approach your situation with your current setup and reach your desired results. If you just want to "have them coded prior to coding the supertimeline" you could create them in a function and just call that function prior to appending them to the supertimeline as well. Again, it would help to know why they need to be created in advance. Thanks Carl CS4 fla attached for reference (no greensock classes)
  22. in general terms you need to do the following: when each button is clicked record somewhere which button has been clicked when you roll_out of each button ask "am I the button that has most recently been clicked? if yes, than I won't play my out animation. If no, then play my out animation. the same thing will apply when you roll over each button. if the button you are rolling over is the most recently clicked... then do nothing. if you are rolling over a button that isn't in its clicked/active state then it can perform its animation. This principle is illustrated in this tutorial here: http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/ here is a sample of the code. t 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; //the variable currentNav is used to hold a reference to the most recently clicked button/MovieClip var currentNav:MovieClip; function navOver(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; trace(navItem.name); //when you roll over the currently selected nav item you probably don't want it to animate if (navItem!=currentNav) { TweenMax.to(navItem.dot_mc, .5, {tint:0x00CCFF}); } } function navOut(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; //when you mouse out ask "hey, am I the most recently clicked button?" if (navItem!=currentNav) { // if I'm not the most recently clicked button than play my "out" animation, or else do nothing TweenMax.to(navItem.dot_mc, .2, {tint:null}); } } function navClick(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; //disable the previously clicked button if (currentNav!=null) { TweenMax.to(currentNav.dot_mc, 0, {tint:null}); } //activate the currently clicked button TweenMax.to(navItem.dot_mc, .2, {tint:0xFF6600}); currentNav=navItem; } there is a sample file to download from the link above as well. My file may be set up a bit differently than yours but the concepts you will need to apply are the same. by applying my eventListeners to the MovieClip that holds all the nav items (nav_mc), I don't have to apply eventListeners to each item individually Carl
  23. Hi patrick. thanks for posting. I'm very glad to hear that you had success!
  24. sorry I can't open the rar file. perhaps you can provide a .zip
×