Jump to content
GreenSock

djwaas

Members
  • Posts

    8
  • Joined

  • Last visited

Everything posted by djwaas

  1. Just wanted to thank you Carl for your very helpful suggestions. Tweening a timescale to 0 Vs using tweento function helped me better understand the mechanics behind your tween engine. In fact, getting stuck with this problem lead me to dicover a wonderful profiling tool: Scout. I found that adding 52 times a tl.to(...) instructions when the stop button is pushed is what really hurt the timing of my timescale tweening. By the way, reading about optimizing my code, I discovered two tools that sounds promising: - Starling API that makes better use of the GPU power - Object tooling method For someone who wants 52 cards that moves very fast from one side of the screen to the other, do you think I should try out the two suggestions above for better performance or frame rate? Have a nice weekend. BR
  2. Dear Carl: I completely understand how long it would be to read a 2.000 lines of code. Giving me some leads to try in your last post was all I was asking for. Thanks a million times!!!! Here’s what I found: I.Reminder: tl8 is my timeline that moves my cards from the right to the left of the screen. tl5 is the timeline used to slowly stop tl8 at a specific place by tweening its timescale to 0. My problem: Sometimes, the target card finishes off center. II. Measuring time: I followed your advice by measuring and logging elapsed times, here’s what I found: Test on desktop Flash Player On tl5's complete, tl8's elapsed time is: 0.666 (target card finishes on center) Second atempt: On tl5's complete, tl8's elapsed time is: 0.665 (target card finishes on center) Debugging on Android phone: On tl5's complete, tl8's elapsed time is: 0.682 (target card finishes past the center) Second atempt: On tl5's complete, tl8's elapsed time is: 0.663 (target card finishes before the center) tl8 stops at different times, especially on the phone, where differences are significant for each try. QUESTION #1: Can we conclude that due to weak CPU power, the tweening engine leads to different outcomes? I will try to make lighter PNG files for cards, maybe this will bring relief to the CPU (although displayed cards will keep same heights and width on stage, which is likely to change nothing). III. Using tweento(): So I got rid of tl5, got rid of timescale, and simply added a tweento() method to my tl8. Yes, tl8.tweento stops the target card right where it should be. The problem is: the stopping is too abrupt, and elastic easing hardly noticeable. I can’t control HOW (or how long) the stopping action can take with the tweento() method. QUESTION #2: Is there maybe a way to control speed and time of a tweento action? IV. Combining timescale with tweento(): This is where I settled so far: tl5 timescales tl8 to zero to get a nice and slow stopping of my wheel, then on tl5’s complete, tl8.tweenTo readjusts cards position right where they should be. It's no elegant code, but at least it's 95% close to what I seeking. Thanks a lot Carl for your insights!!! Best regards.
  3. Dear Carl: I uploaded a SWF file at the following address: http://we.tl/lwoy8hzphO After the START menu, just push the power button to spin the wheel, then push again the same button to stop it. Repeat the process as you wish. You will see that when you stop the spinning wheel for the "n" times, the "n" card is the one which stops in the center. Everything runs pretty smooth, except on phones, where sometimes the "target" card finishes off center, and that's my problem. I prepared a zip file (FLA + AS) for you if you want to have a look. Please let me know how I can send it to you privately. Best regards.
  4. @Carl: I tried your second option, and it works like a charm! Thanks a lot mate!
  5. Simple question please: I'm making a game, where a card appears on screen, and the user must enter a correct answer related to the card to move on to the next card. The faster the answer, the more points he scores. Every card appears on screen with an Elastic.easeOut in its movement. My problem is: If the user enters the correct answer very fast, he still must wait for the Elastic.easeOut of the displayed card to finish until the new card enters the screen. My goal is: If the user enters the correct answer before Elastic.easeOut of the displayed card is over, the timeline should instantly jump to the end of the running Elastic.easeOut ease, and launch the two appended animations. Is that possible? Here's my code: var tl36 = new TimelineMax(); tl36.to(card[variableToIncrement], 2.5, {rotationY:"+=360", x:centerScreen_X, alpha:1, ease:Elastic.easeOut}); //First card appears and moves to center of screen public function inputOK_handler(e:MouseEvent) //When user hits OK after he's entered a number { if (enteredNumber == cardValue) //The condition of a correct answer { trace("Right Answer!"); tl36.to(card[variableToIncrement], 2.5, {rotationY:"+=360", x:outsideScreen_X, alpha:0, ease:Elastic.easeOut}, "-=0"); //The card in center moves out of screen tl36.to(card[variableToIncrement+1], 2.5, {rotationY:"+=360", x:centerScreen_X, alpha:1, ease:Elastic.easeOut}, "-=2.5"); //The next card makes its appearance simultaneously variableToIncrement = ++variableToIncrement; } } I tried killing the timeline when a correct answer is entered, but the results are not what I'm seeking. So far, I use ease.None, but I would love to keep the Elastic easing. Many thanks in advance!
  6. So I thought my code was done, but I realized it needs that little something to be perfect. My 52 cards follow a circular path from one side of the screen to the other, at high speed to create an illusion of wheel of fortune. When the user pushes a “stop” button, the wheel slows done abruptly, with an elastic easing. He gets an illusion that the card that stops at the very center is a random card, but in reality, my code forces the “wheel” to stop at a very specific card. My problem is the following: when debugging on pc, the wheel stops with the forced card at the very center of the screen, except when I do something that “bothers” the course of events, like resizing my flash window, in that case, my card to be forced ends up off center. BUT: When testing on a mobile phone (so in an environment with less CPU power), the wheel stops 3 times on 4 off center, sometimes very close, sometimes quite far from center. My code is structured in this manner: TL1 tweens my cards from right to left. At the creation step of the timeline, it’s at a stopped state. TL0 will control TL1 by activating the tl1 animations through “timescale:1 action”. When “STOP” button is pushed, TL1 stops and all cards are replaced on the right, at their initial positions. TL8 is created. Just like TL1, it tweens my cards from right to left. At the creation phase, it’s at a stopped state. TL5 will control TL8 by simultaneously launching it AND stopping it through“timescale:0 action”. TL8 will stop at the right card on the center by using tl8.seek() function with the right value inside. gapFiller is a function that runs a tween of cards that fills the gap between my 52nd card and 1st card. //When START button is hit, the wheel of playing cards start spinning endlessly TweenPlugin.activate([CirclePath2DPlugin]); circle = new CirclePath2D(518.85, 1600, 1050); tl1 = new TimelineMax({repeat:-1, repeatDelay:-0}); tl1.timeScale(0); // tl1 Timeline is created in a stopped state, tl0 will launch it. tl1.to(card[0], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl1.to(card [1], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl1.to(card [2], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); // (…) Rest of the cards tl1.to(card [48], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl1.addLabel("tween3"); tl1.to(card[49], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl1.to(card [51], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl1.addCallback(gapFiller, "tween3"); //When the 48th card is moving, a different and shorter deck of cards is tweened to fill the gap between the 52nd and 01st card. //Timeline 1 is the timeline that runs when “START” button is pushed tl0 = new TimelineMax(); tl0.to(tl1, 3, {timeScale:1, ease:Linear.easeNone}); //Now, when the power button is hit to stop the wheel public function btnPower_handler(e:MouseEvent) { //The first tween of cards is stopped tl1.stop(); //All cards are replaced in their original position, off screen, on the right for (var i:int=0; i<52; i++) { card[i].x = initialX; card[i].y = initialY; } //tl8 timeline will replace the tl1 on screen tl8 = new TimelineMax({repeat:-1, repeatDelay:-0}); tl8.stop(); // tl8 Timeline is created in a stopped state, tl5 will launch it. tl8.to(card [0], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl8.to(card [1], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); // (…) Rest of the cards tl8.to(card [51], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); tl8.resume(3); //In order not to start from the very beginning and expose a gap in my wheel, I start from the third second //This is the real starting point of my tl8 Timeline, I tried many values of « targetToStop” until I found the value that stops my target card at the center tl8.seek(targetToStop); //tl5 is my timeline that “controls” tl8 and gives the Elastic easing to the stopping action tl5 = new TimelineMax(); tl5.to(tl8, 3, {timeScale:0, ease:Elastic.easeOut}); } public function gapFiller() { tl3 = new TimelineMax(); for (var v:int=25; v<29; v++) { tl3.to(card[v], 0.5, {circlePath2D:{path:circle, startAngle:-27, endAngle:190, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}, ease:Linear.easeNone}, "-=0.35"); } } So the question is: Is there a way to readjust my cards position so that when TL8 stops at the "targetToStop" value, my target card ends up in the middle? Thanks a lot!!!
  7. Thanks Carl, your suggestions are pure gold!
  8. Hello Everyone: I have created 52 playing cards, and placed them at the same X position outside the stage. The 52 playing cards mc are stored in the currentDeck[] table. Using a TimelineMax, I make these cards scroll from right to left at a high speed. When the app user hits a button, the overall scrolling speed will decrease, until everything stops. The card in the center of screen will be the card the user gets from this "lottery wheel". //Creating the "slower" variable, that will let me slow down later my animation/timeline. public var slower:Number=1 ; //Let's create now the Timeline that will rapidly scroll 52 cards horizontally on the screen from right to left in an infinite loop. //Cards are spaced so that, at any time, there are three cards displayed on screen. tl = new TimelineMax({repeat:-1, repeatDelay:0}); for (var j:int=0; j<52; j++) { tl.to(currentDeck[j], 0.5, {x:finalX, ease:Linear.easeNone} , "-=0.35"); } //Now, when the user hits the button, the srolling should slow down then stop //This will be achieved by tweening the "slower" value from 1 to 0 public function slowerThenStopBtn_handler(e:MouseEvent) { TweenMax.to(this, 2, {slower:0, onUpdate:changeDuration, onComplete: postRalenti}); } //Each new value of "slower" is then re-injected in my running timeline public function changeDuration() { tl.timeScale(slower); } public function postRalenti() { tl.stop(); } Now this code works, but it's not perfect. Question 1: EaseOut before the scrolling stops. Is there a way to get a Bounce.easeOut easing on the scrolling animation before it stops? This will enforce the "lottery wheel" effect. I tried to apply the EaseOut easing on the tweening of "slower" variable, but it doesn't give the expected result. Question 2: Continuous loop illusion. When the last card #52 scrolls out of the screen, the screen is empty for a split second before the loops starts again and card #1 appears on screen. How can I make cards #1 & #2 starts scrolling earlier so that 3 cards are always displayed, even at the end of the first loop. Trying to set repeatDelay:-0.35 makes the last card #52 disappear suddenly from screen while scrolling, which ruins the continuous loop illusion. Question 3: Outcome of the lottery wheel. Now by slightly changing the duration of the tween of the "slower" variable, I can manage to make a specific card to end up at the center of screen when scrolling stops. Is there a more precise and smarter way to do so? Well, thanks a lot and kudos to Greensock for such fun and useful products!!! Best regards.
×