Jump to content
GreenSock

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

Héctor last won the day on January 30 2013

Héctor had the most liked content!

Héctor

Members
  • Posts

    18
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Héctor

  1. 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. 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. 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. Thanks Carl, This is the thing I was looking for. Regards
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  16. I think what I need in my case, is not the first tween [the from() call] being not inmediately rendered, but the second [the to() call]. Lets suppose I have this simple tween: // simple tween TweenLite.to(object, 5, {y: object.y + 100}); ¿Is there any way the tween renders and read the object.y property just before the tween starts instead of the moment the tween is being created? I think I could use the onInit property, but maybe is there any easier way of doing it. Similar to the inmediateRender property for the from() method, that I can't find in the to() method.
  17. I think the names I gave to the functions aren't the best and they may lead to confusion. The animation does the following (I will explain in movement terms). An object is being moved up from the bottom of the screen. Initially, the object isnt visible because it is out of the stage, and then it starts to be visible as it moves up. Then the movement is just the oposite. The object is moved down from its position on the stage to the bottom of the stage until it is out of the stage. Thanks for mentioning that property. I think it may be useful but then I'll have to deal with pre-positioning the object outside the stage so the animation starts from then. If not, the object seems to start in its tweening end position, then jump to its tweening start position (because is a from tween) and then end again in the starting position. I'll look it again more carefully. Thanks again.
  18. Hello, It's has been some time since I don't post here so I'll seize this oportunity to thanks again the greensock comunity for this great free framework. I've been trying to do something easy: An animation of an sprite being pulled down from the bottom of the stage, and then pushed down again. Some simple transition. I have 2 functions for that (they use speed instead of seconds) public static function pushDown(target:DisplayObject, onCompleteFunction:Function = null, onCompleteParams:Array = null, speed:Number = 1200):TweenLite { var distance:Number = stageHeight - target.y; var duration:Number = distance / speed; trace("PUSH: target.y = " + target.y + " distance = " + distance); return TweenLite.to(target, duration, { y: target.y + distance, onComplete: onCompleteFunction, onCompleteParams:onCompleteParams, ease:Linear.easeNone } ); } public static function pullDown(target:DisplayObject, onCompleteFunction:Function = null, onCompleteParams:Array = null, speed:Number = 1200):TweenLite { var distance:Number = stageHeight - target.y; var duration:Number = distance / speed; trace("PULL: target.y = " + target.y + " distance = " + distance); return TweenLite.from(target, duration, { y: target.y + distance, onComplete: onCompleteFunction, onCompleteParams:onCompleteParams, ease:Linear.easeNone } ); } The problem comes when I use them in a simple timeline: var timeline:TimelineLite = new Timeline({paused:true}); timeline.append(SlideAnimations.pullDown(object)); timeline.append(SlideAnimations.pushDown(object)); // play will takes place within a listener handler function (ON_ADDED_TO_STAGE), but ill simplify it timeline.play(); What I have realized (tracing the y property of the object being tweened) is that before the timeline is created, the object has y = 0. But then after appending the first tween, the y property of the object is changed. I didnt expect this to happen. Shouldn't the property being tweened change during/after the tween is taking place? In other words, the first tween (TweenLite.from) should not change the Y property of the object being tweened until the timeline starts to play, but what I have seen is that it gets changed just after adding it to the timeline. I hope what im trying to explain is understandable, if not, ill add more details. Thanks for your time. Héctor
×