Jump to content
GreenSock

Eckstein1

Members
  • Posts

    30
  • Joined

  • Last visited

Eckstein1's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. Thanks Jack for your immediate response. Maybe I have to give you some more information what I intend to do: I have a Flash movieclip in a library which shows a machine (in my case a compressor). The machine has two rotating screws to compress air. The rotation of the two screws is realized by one Greensock timeline. Now we want to show the starting phase of the machine. The machine has a rotation speed of 0 and speeds up to it's maximum speed. To visualize it I tween the duration of timeline. So we tween to duration from a high value (slow rotation) to a low value (max rotation). While tweening and after the tween (max speed) we see jumps in the rotation of the screws. I interpreted the effect shown above as the same I saw with the rotating screws. To support you analysis I tried to create the simplest example possible. So what should we do to tween the speed? Thanks again for your kind support.
  2. Hi, I tween by a tween (t2) the duration of the tween (t1) and see the following. First my code: import com.greensock.*; import com.greensock.easing.*; var n1:Number=0; var t1:TweenMax; var t2:TweenMax; t1=TweenMax.to(this, 10, {ease:Linear.easeNone, n1:300, repeat:0}); t2=TweenMax.fromTo(t1, 2, {duration:10}, {duration:0, ease:Linear.easeNone, onUpdate:update, repeat:0}); function update():void { trace("n="+Math.round(n1*100)/100+", d="+Math.round(t1.duration()*100)/100+", p="+Math.round(t1.progress()*100)/100) } Please note the example makes no sense, it's just to show what I see. The code generates the following output. It shows the number I tween with tween t1 (n), the duration of tween t1 (d) and the progress of tween t1 (p): ... n=95.33, d=3.74, p=0.33 n=103.96, d=3.52, p=0.37 n=113.86, d=3.32, p=0.4 n=124.79, d=3.1, p=0.45 n=137.74, d=2.89, p=0.49 n=151.4, d=2.69, p=0.54 n=167.53, d=2.48, p=0.61 n=187.27, d=2.28, p=0.68 n=209.01, d=2.08, p=0.76 n=235.37, d=1.86, p=0.88 n=269.03, d=1.66, p=1 n=300, d=1.44, p=1.15 n=300, d=1.24, p=1.34 n=300, d=1.02, p=1.63 n=300, d=0.82, p=2.02 n=300, d=0.6, p=2.79 n=300, d=0.39, p=4.2 n=300, d=0.2, p=8.51 n=300, d=0, p=Infinity I'm wondering about the following: if the progress is 0.33 the number (tween range 0...300) should be 100, but it is 95; if the progress is 0.4 the number should be 120, but it is 113; etc. the progress is 1 for a number of 269 (end number should be 300) the progress becomes larger than 1 the end value of number is repeated during several tweens with progress larger than 1 What am I doing wrong? How can I avoid this behaviour? Thanks in advance and kind regards, Uli
  3. Thanks Carl, you are correct if I add this attribute it works as it should. I also have to add it to the first tween otherwise it will position at (500/400). I can find this problem only if I use beziers. It does not occur for other tweens. So I propose to set "immediateRender=false" by default if a bezier tween is added to a timeline. Otherwise it has to be done manually evertime a bezier tween is added to a timeline. At least a hint should be shown in the documentation. Again thanks and kind regards, Uli
  4. Hi, this is a simplified example of the problem I have. First I create a circle and place it at (0/0). Then I create a timeline. The timeline includes two bezier curves. Each bezier has a FROM(x/y) and a TO (bezier). Before tweening along the beziers the timeline waits for 2 seconds. import com.greensock.*; var m1:MovieClip = new MovieClip(); m1.graphics.beginFill(0xffcc00, 1); m1.graphics.lineStyle(1, 0xffcc00, 1); m1.graphics.drawCircle(0, 0, 10); m1.x=0, m1.y=0; addChild(m1); var TIMELINE:TimelineMax=new TimelineMax({repeat:-1}); TIMELINE.add(TweenMax.fromTo(m1, 5, {x:100, y:400}, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}), 2); TIMELINE.add(TweenMax.fromTo(m1, 5, {x:500, y:400}, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}}), 7); What i observe is that because of the FROM within the tweens to circle is immediatelly moved to the last FROM of the added tweens. So in this example to circle is initially positioned at (500/400) instead of (0/0) where it in my understanding should be. The positioning based on the timeline should not be done while initializing the timeline. It should happen if the corresponding tween is played by the timeline. Kind regards, Uli
  5. Hi, after double checking the code I did the following mod: /** @private **/ override public function _onInitTween(target:Object, value:*, tween:TweenLite):Boolean { ... //k this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate || "x,y,z", prepend) : _parseBezierData(values, vars.type, first); /*k*/ this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate || "x,y,z", prepend) : _parseBezierData(values, vars.type, prepend); ... Is this mod better than the previous. Please recomment. Thanks.
  6. Hi, at BezierPlugin.as I did deactivate the following lines and it works as it should: /** @private parses the bezier data passed into the tween and organizes it into the appropriate format with an array for each property. **/ public static function _parseBezierData(values:Array, type:String, prepend:Object=null):Object { type = type || "soft"; var obj:Object = {}, inc:int = (type === "cubic") ? 3 : 2, soft:Boolean = (type === "soft"), a:Number, b:Number, c:Number, d:Number, cur:Array, props:Array, i:int, j:int, l:int, p:String, cnt:int, tmp:Object; // if (soft && prepend) { // values = [prepend].concat(values); // } Unfortunatelly I have no idea what these lines are for. Kind regards, Uli
  7. Hi, thanks again for your answer. Now I got you. Look what I tried: import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; // movieclip for bezier var m1:MovieClip; m1 = new MovieClip(); m1.graphics.lineStyle(1, 0xff0000, 1); // bezier var a1:Array = [{x:0,y:300},{x:90,y:10},{x:280,y:200},{x:330,y:480},{x:580,y:190},{x:780,y:680},{x:800,y:400}]; // draw soft bezier m1.graphics.moveTo(a1[0].x, a1[0].y); m1.graphics.curveTo(a1[1].x, a1[1].y, a1[1].x+((a1[2].x-a1[1].x)/2), a1[1].y+((a1[2].y-a1[1].y)/2)); for (var u1:uint=2; u1<a1.length-2; u1++) { m1.graphics.curveTo(a1[u1].x, a1[u1].y, a1[u1].x+((a1[u1+1].x-a1[u1].x)/2), a1[u1].y+((a1[u1+1].y-a1[u1].y)/2)); } m1.graphics.curveTo(a1[u1].x, a1[u1].y, a1[u1+1].x, a1[u1+1].y); // circle var m2:MovieClip; m2 = new MovieClip(); m2.graphics.beginFill(0xffcc00, 1); m2.graphics.lineStyle(1, 0xffcc00, 1); m2.graphics.drawCircle(0, 0, 10); // tween circle along bezier m2.x=a1[0].x, m2.y=a1[0].y; var t1:TweenMax = TweenMax.to(m2, 5, {bezier:{autoRotate:false, timeResolution:6, type:"soft", values:a1}, ease:Linear, repeat:-1}); // add to display list addChild(m1), addChild(m2); This works perfect for all points except the first Segment. The circle moves above the ploted line. I don't understand what I'm doing wrong. The first one is quite simple it uses the first anchor and control point. I just have to calculate the second anchor (which is used as anchor for the next point, too). What am I doing wrong? Thanks in advance. Kind Regards, Uli
  8. Hi, thanks for your reply. How can I calculate the anchors inbetween to be able to use the AS3 drawing API?
  9. Hi, I'm creating a bezier curve of the type "soft". It works perfectly as it should. I want to draw the bezier path it's following. If I use all other available types I'm able to draw the bezier path, but I found no way to draw one of the type "soft". For the different types I'm using the following methods: 1. cubic: graphics.cubicCurveTo() method of Flash 2. quadratic: graphics.curveTo() method of Flash 3. thru: BezierPlugin.bezierThrough() method of Greensock and graphics.curveTo() method of Flash (attribute basic=false) 4. thruBasic: BezierPlugin.bezierThrough() method of Greensock and graphics.curveTo() method of Flash (attribute basic=true) 5. soft: ? Thanks for the great tool and your help Uli
  10. Hi, I'm tweening objects along a bezier curve with a linear easing. I'd expect that all objects are because I'm easing linear equally distributed along the curve. But indeed they are distributed like using a non-linear easing. Code reproducing this effect follows. Please note the code doesn't make sense. It's optimized to visualize the effect I'm talking about. I create six circles. They are tweened by a timeline along the same bezier curve. The circles are delayed with a distance of 1s. If the first circles completes it's tween all timelines are paused. Please take a look at the output. import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; var o1:Object; var u1:uint; o1 = {bezier:[{x:147, y:365}, {x:117, y:332}, {x:113, y:210}, {x:118, y:97}], delay:0, ease:Linear.easeNone, repeat:0}; for (u1=1; u1<7; u1++) { addTimeline("tc", u1, o1, createShape(true, "ci"+u1, u1*10000, o1)); } function createShape(b1:Boolean, s1:String, i1:int, o1:Object):Object { var o2:Shape; o2 = (this[s1] = new Shape()); o2.graphics.beginFill(i1, 0.5); o2.graphics.drawCircle(418, 197, 10); o2.graphics.endFill(); addChild(o2); o2.x = o1.bezier[0].x; o2.y = o1.bezier[0].y; return o2; } function addTimeline(s1:String, u1:uint, o1:Object, o2:Object) { var o3:Object; o1.delay = u1; o3 = {repeat:0}; if (u1 == 1) { o3.onComplete = pauseAll } this[s1+u1] = new TimelineMax(o3); this[s1+u1].insert(new TweenMax(o2, 5, o1)); } function pauseAll() { TweenMax.globalTimeScale = 0; } Is my expectation correct? What am I doing wrong? Thanks in advance and kind regards, Uli PS: I'm using the latest files of V11
  11. I'm using the latest version of release 11. Version 12 still is beta, which makes me a bit concerned for complex productive developments.
  12. Hi, the following makes no sense but tries to explain the problem I found: import com.greensock.*; var TIMELINE:TimelineMax=new TimelineMax({repeat:-1}); TIMELINE.addCallback(debug, 0, ["0"]); TIMELINE.addCallback(debug, 1, ["1"]); TIMELINE.addCallback(debug, 2, ["2"]); TIMELINE.addCallback(debug, 4, ["4"]); function debug(s1:String) { trace(s1) } I expect the output to be: 0, 1, 2, 4, 0, 1, 2, ... But it is 0, 1, 2, 4, 1, 2, ... What am I doing wrong? Thanks for your help. Uli
  13. Hi, is it possible to pin several images to one individually created PinPoint or does every image require an specific PinPoint? Thanks for answering Uli
  14. Thanks Dave and Zync for your support. And now it works as documented...
  15. Hey Zync, Thanks for your reply. I immediatelly check it out, but... import com.greensock.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.*; var IMAGE1:ImageLoader = new ImageLoader("images/flower.jpg", {name:"flower", container:this, x:0, y:0, width:200, height:200, onComplete:imageLoaded}); IMAGE1.addEventListener(LoaderEvent.UNLOAD, imageUnloaded); IMAGE1.load(); function imageLoaded(e1:LoaderEvent):void { IMAGE1.unload(); trace(IMAGE1.bytesLoaded); // 18067 } function imageUnloaded(e1:LoaderEvent):void { trace(IMAGE1.bytesLoaded); // 18067 }
×