Jump to content
Search Community

jr_blackridge

Members
  • Posts

    9
  • Joined

  • Last visited

jr_blackridge's Achievements

0

Reputation

  1. Thanks for the responses. I think my issue is a little deeper than I originally hoped. I thought (hoped, expected) that given the viewBox or height/width of an SVG (and I'm new to this, so please correct or forgive ignorance), I could animate named <g> elements around the container like I would in Flash using a common coordinate system. And I eventually got it to work with absolute values by using a modification of Jacks's normalizeSVGOrigin function that is based on getBBox( ) : var K = document.querySelector("#K"); .to(K, 1.0, {x:245-normalizeSVGOrigin(K).x, ease:Quad.easeOut}) But this enormously complicates sequencing because all the SVG groups need to be referenced individually rather than on a common coordinate system such as the viewBox or height/width (or the parent DIV). So an array of 20 named <g> elements tweened to a common location (say x:100) need to be broken up into individual tweens and adjusted based on getBBox( ) because each element has a different reference point. Is there an easy way around this? http://codepen.io/blackridge/pen/jEVMjz Thank you!
  2. Let's say I have a DIV that's 640x480 and some SVG graphics in the DIV. How do I tween an SVG element (#LetterG) to the top left corner of the DIV ( x:0 y:0) or to the bottom right (x:640 y:480) from it's current position? All my attempts to tween my SVG "#LetterG" to an absolute position in the div are treated as a relative tween. TweenMax.to( "#LetterG", 1.0, {x:640, y:480, ease:Quad.easeOut}) TweenMax.to( "#LetterG", 1.0, {x:"640", y:"480", ease:Quad.easeOut}) are effectively the same as TweenMax.to( "#LetterG", 1.0, {x:"+=640", y:"+=480", ease:Quad.easeOut}) What am I missing? Many thanks.
  3. Carl rocks! Thanks - I'll look into it. Really appreciate the help.
  4. This has to be a scope problem, but I'm a bit of an oop noob, and can't figure out what's going on. Essentially I'm trying to encapsulate the approach used in the Physics2D plugin example (where tweenDot calls tweenDot through an onComplete) But in the class I've created, the TweenLite onComplete call isn't working unless the methods and properties are static (and of course I need instance properties). It appears to call the method, but none of the instance properties are available (exist?), so the recursion doesn't work. I've tried using "this" to reference my instances, and I've also tried making a property to store a reference to the instance of the class and use that in the onComplete. Any guidance on how to make my onComplete work in my class instances? TIA
  5. Can you explain how to correctly do the following? I want to fade in an array and animate them, and fade them out as they come to the end, but my attempts to appendMultiple for the fade out seem to either overwrite the initial values, or is pre-appending them ? I'm stymied. import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([bezierPlugin]); t1 = new TimelineMax(); var ballArr:Array = [ball1,ball2,ball3,ball4,ball5,ball6]; //fade in and animate, offset both by .25 //works great t1.appendMultiple([TweenMax.allFrom(ballArr, .25, {_alpha:0}, .25), TweenMax.allTo(ballArr, 1.5, {bezier:[{_x:515, _y:44}, {_x:485, _y:200}]}, .25)]); // append an allTo() to the end of the timeline -- should place new tweens at the end of the timeline? // doesn't work. Seems to overwrite initial values in the timeline, and the offset var offsetVal = 3 t1.appendMultiple(TweenMax.allTo(ballArr, .25, {_alpha:0}, .25), offsetVal ) // or some variation of this t1.appendMultiple([TweenMax.allTo(ballArr, .25, {_x:0}, .25)], offsetVal )
  6. I guess I'm surprised that it works for you. I'm on a different machine and it doesn't work here either. Changing the instance name effectively does the same as changing the layer, so that doesn't surprise. I thought I understood that the clip "detaches" from the timeline. But maybe I don't. I thought that I could effectively "reset" it with a new instance of the same clip at a new _x, _y, scale, etc. and then do a tween.from() based on the new keyframe. But what you are saying is that since the clips are on the same layer, and contiguous, actionscript still has hold of the clip. I see you are right from a basic test without greensock classes. Ok, I'm a little wiser. I've got a couple of different strategies for approaching what I want to do. Thanks for the support.
  7. Ok, but only if the mc hasn't had any tweens prior? Very simply - I want to tween the mc from _alpha:0 and then later in timeline use transformMatrix on the same mc The only way I could get from() to work is by moving the mc to another layer. But to() works without moving the mc so on frame 1 place mc on layer 1 import com.greensock.*; import com.greensock.easing.*; TweenLite = TweenLite.from(mc, 1.5, { _alpha:0}); //and then on frame 35 move mc to layer 2 trace("hello"); import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; TweenPlugin.activate([TransformMatrixPlugin]); TweenLite.from(mc, 1.5, {transformMatrix:{_x:-349, _y:-129, _xscale:100, _yscale:100}}); And then it works. But I can do a to() if I don't change layers.
  8. I want to use .from and transformMatrix. Is this possible, or can I only transform .to ? TweenLite.from(mc, 1.5, {transformMatrix:{_x:-349, _y:-129, _xscale:1, _yscale:1}});
  9. I was about to post this question but figured it out. Hope it helps someone else: ************* Is there any way to prevent physics2D from displaying (stacking) all the initial movieclips on the stage before tweening them? Using AS2. ************* The answer is to attach the movie clip with an alpha of zero and then use the onStart: and onStartParams: to set the _alpha to 100. onInit: didn't have any affect (or I don't understand how to effectively use it yet). Attached is an example of using movie clips with physics2D and a motion blur and using "onStart:" to prevent the initial loop from stacking the movies on the stage.
×
×
  • Create New...