Héctor had the most liked content!

# Héctor

Members

18

• #### Days Won

2

Héctor had the most liked content!

5 Newbie
1. ## Updating rotation values of tweens inside an infinite timeline

Thanks Carl, Your solution works as a charm. It's like you said: Timelines have many great uses and we tend to use them for almost everything. They are pretty cool, clean and packed with lot of funcionality but sometimes we get obsessed in using them when other solutions would work better. Thanks for your time Héctor
2. ## Updating rotation values of tweens inside an infinite timeline

Hello, I've got this code: leanLeftTween = TweenMax.to(trapecista, 1, { rotation: -10, ease:Linear.easeNone } ); leanRightTween = TweenMax.to(trapecista, 1, { rotation: +10, ease:Linear.easeNone } ); leanBackLTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); leanBackRTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); var tremble:TimelineMax = new TimelineMax( { repeat: -1 } ); tremble.append(leanLeftTween); tremble.append(leanBackLTween); tremble.append(leanRightTween); tremble.append(leanBackRTween); TweenLite.delayedCall(1,updateRotation); } private function updateRotation():void { leanLeftTween.updateTo( { rotation: -30 } ); leanRightTween.updateTo( { rotation: 30 } ); } The rotation values are changed, but the animation seems to jump. I just want to increase/decrease the amplitude of the rotation tween on user interaction (using delayedCall is just to simplify code). Any help?
3. ## remove TweenMax(); instance

If by removing a tween, you mean isntantly stop it from doing whatever it was doing, i suggest you try the kill method: sampleTween.kill(); Will stop the tweening animation.
4. ## Infinite timeline tween paramaters update [solved]

Thanks Carl, This is the thing I was looking for. Regards
5. ## Infinite timeline tween paramaters update [solved]

I can think on a workaround to the issue: rollTween = new TimelineMax( repeat: -1, repeatDelay: 0}); for (var i:uint = 0; i < 12; i++) { rollTween.append([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )]); } Someone could ask why I needed a timeline (when using onComplete events to update the rotation value and restart the tween could work) and the fact is one of the animations should have delays inside it so every time the hoursBar rotates 30 degrees, there was a short delay (I was using repeatDelay when I used TimelineMax. For that behaviour the workaround just should include offsets when the appendings are done: rollTween = new TimelineMax( { paused:true, repeat: -1, repeatDelay: 0 }); rollTween.append([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )]); for (i = 0; i < 11; i++) { rollTween.append([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )], 0.5); } Still I'm curious on knowing if there is some kind of property for the tweens being repeated to re-calculate its tween values at the repeat moment.
6. ## Web Banner

If you just need to change width or height, why dont just use the swf file as a MovieClip Symbol and then resize its instance height or width? That assuming you lost the .fla file but still have the .swf file,
7. ## Dynamic video resize during runtime

I would suggest trying AutoFitArea (http://www.greensock.com/autofitarea/) if you aren't already. So you could create 5 AutoFitArea objects width differents sizes: 1 full size (to use when the slides are closed) 2 where both have the same size 2 where one is smaller and the other is larger Then you position then where they should be, and just control the attachments of the video and slides playbacks window to the auto fit areas as the user clicks the buttons. That should work for the buttons. For the dragging, should be fair more complicated and maybe this approach wont work.
8. ## Infinite timeline tween paramaters update [solved]

Hello, Suppose this code: rollTween = new TimelineMax( repeat: -1, repeatDelay: 0}); rollTween.insert([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )]); Where minutesBar and hoursBar are the pointers of a clock asset that I want to animate. I would like to achieve an infinite rotation for the pointers. The problem is with the hours pointer. As its completes the 30 degrees rotation, it jumps back to its starting position to repeat the same over and over. I would like to know if there is any way to change that, so the tween uses his updated rotation value everytime the timeline repeats it. Thanks, Héctor
9. ## How to prevent a 0 duration tween to render inmediately

Thanks! With paused:true and immediateRender:false works as expected. The 0.001 duration also works btw. Sorry for that misspell error. I find really useful those 0 duration tweens, because for me It's easier using tweenlite/tweenmax plugins than the core AS3 classes.
10. ## How to prevent a 0 duration tween to render inmediately

I think is worth to mention why I want to play the tween on the onClick method instead of just creating it "on the fly". What I really want is to create a button with onRollOver and onRollOut listeners so I can play() the color tint tween on the RollOver event, and then just reverese() the tween on the RollOut. I could actually use the AS3 native colorTransform class to do that, without using a tween, but this way is just cleaner and I was curious about why it doesn't work.
11. ## How to prevent a 0 duration tween to render inmediately

Hello, i was wondering how to prevent a 0 duration tween to render his final state inmediately. I've tried setting its paused state to true, but it doesn't work. Also the inmediateRender property doesn't seem to work if it isn't a from() tween. Some example code: package { import com.greensock.plugins.TintPlugin; import com.greensock.plugins.TweenPlugin; import com.greensock.TweenLite; import flash.display.Sprite; import flash.events.MouseEvent; public class Main extends Sprite { private var tween:TweenLite; TweenPlugin.activate([TintPlugin]); public function Main():void { var sprite:Sprite = new Sprite(); sprite.graphics.beginFill(0xFF0000); sprite.graphics.drawRect(0, 0, 100, 100); sprite.x = 100; sprite.y = 100; addChild(sprite); tween = TweenLite.to(sprite, 0, { tint: 0x00FF00, paused: true, inmediateRender: false } ); addEventListener(MouseEvent.CLICK, onClick); } public function onClick(evt:MouseEvent):void { tween.play(); } } } Thanks in advance, Héctor
12. ## Unexpected behaviour when adding Tweens to a Timeline

Finally I took your advise, and took another approach. Using onComplete callbacks for loading following tweens rather than appending all of them to a timeline in advance. More code, but less problems I was using v11 still because of the v12 beta status, but seeing there are no bugs and people seem to give good feedback im upgrading now. Thanks for your time.
13. ## Unexpected behaviour when adding Tweens to a Timeline

I'm not sure but after having looked through the code I think the way of changing tween properties in the onInit "event" won't work. Because it seems the onInit function is called just before setting tween properties, and of course, you won't be able to change the duration or whatever other property of a tween that is not created. Relying in the onStart method doesn't seem a good solution because if I've understanded it well, it would get called with the tween already started, and that could cause unexpected jerks and so.
14. ## Unexpected behaviour when adding Tweens to a Timeline

Ok, I have just realized where the fail was, and of course, it wasn't in the Tweening engine. The problem is the duration calculation when the tween is being created. I'll copy the code I was using to replicate the problem above: package { import com.greensock.easing.Linear; import com.greensock.TimelineLite; import com.greensock.TweenLite; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite { private var timeline:TimelineLite; private var sprite:Sprite; public function Main():void { sprite = new Sprite(); sprite.graphics.beginFill(0xFF0000); sprite.graphics.drawRect(0, 0, 20, 20); sprite.x = 400; sprite.y = 300; sprite.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage); addChild(sprite); } private function moveToBottom(target:DisplayObject, speed:Number = 1200):TweenLite { var distance:Number = 600 - target.y; var duration:Number = distance / speed; // 0 duration in execution means tween wont run trace("[onCreation]moveToBottom: target.y = " + target.y + " distance = " + distance); return TweenLite.to(target, 1, { y: 600, ease:Linear.easeNone, onInit:onInitMoveToBottom} ); } private function moveFromBottom(target:DisplayObject, speed:Number = 1200, inmediateRender:Boolean = true):TweenLite { var distance:Number = 600 - target.y; var duration:Number = distance / speed; trace("[onCreation]moveFromBottom: target.y = " + target.y + " distance = " + distance); return TweenLite.from(target, 1, { y: 600, ease:Linear.easeNone, immediateRender:inmediateRender, onInit:onInitMoveFromBottom } ); } private function onInitMoveToBottom():void { trace("[onInit]moveToBottom: target.y = " + sprite.y); } private function onInitMoveFromBottom():void { trace("[onInit]moveFromBottom: target.y = " + sprite.y); } private function onAddedToStage(evt:Event):void { timeline = new TimelineLite( { paused:true } ); timeline.append(moveFromBottom(sprite,1200),1); timeline.append(moveToBottom(sprite, 1200), 1); timeline.play(); } } } The problem is on the creation of the to() tween. When it's created, target's y property is 600 so the distance is 0 (600 - 600) and as a result, tween duration is 0. So I think the solution should be simple if I can calculate the duration during the onInit "event" instead of the tween creation time. The only doubt I have is how could I change the tween duration (better said, how could I pass the tween Im am creating during its creation as a onInitParam?) Is this possible? This doesn't seem to work: var tween:TweenLite = TweenLite.to(target, 0, { y: 600, ease:Linear.easeNone, onInit:calculateDuration, onInitParams:[tween, speed]} ); Using a class level variable also doesn't work. Any ideas?
15. ## Unexpected behaviour when adding Tweens to a Timeline

What I wanted to avoid is just that, having to place assets into positions before tweening, so I could build the timeline on the objects or assets construction and then just play that timeline when I just add the object to the stage after having set its coordinates (using an ON_ADDED_TO_STAGE event handler) So in order to create an animation what i would do is the following: Create the display object. Create the timeline within its constructor call Setting the display object coordinates in the stage, and adding the ON_ADDED_TO_STAGE listener Playing the timeline in the listener handler function. At this time is where the different tweens in the timeline, should try to read the object property values, but just when they are about to start in the timeline. In this way I could plan all the animations without having to care about starting positions (setting x and y outside of the stage for example) and just setting the final coordinates where the object is doing all the rest of the stuff. I will try another aproach, where the tweens can be built before the animation or timeline takes place even if i had to pass property values through parameters and setting starting positions prior to the animations.
×