Eckstein1

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.

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

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

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

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.

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

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

Hi, thanks for your reply. How can I calculate the anchors inbetween to be able to use the AS3 drawing API?

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

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

I'm using the latest version of release 11. Version 12 still is beta, which makes me a bit concerned for complex productive developments.

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

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

Thanks Dave and Zync for your support. And now it works as documented...

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 }

Hi, after unloading i.e. an image or video bytesLoaded isn't set to 0. This example makes no sense, but it repeatable shows the effect described: 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.load(); function imageLoaded(e1:LoaderEvent):void { IMAGE1.unload(); trace(IMAGE1.bytesLoaded); // for images a number equal to bytesTotal } Kind regards Uli

Hi Carl, changed my coding as proposed and surprise-surprise it exactly does what it should do. Thanks a lot Uli

Hi again, I just realized that it makes no sense to move objects with alpha=0 and just 10 pixels, so I did a small change: 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:loadImage2}); var IMAGE2:ImageLoader = new ImageLoader("images/rose.jpg", {name:"rose", container:this, x:175, y:200, width:200, height:200, onComplete:loadImage3}); var IMAGE3:ImageLoader = new ImageLoader("images/sky.jpg", {name:"sky", container:this, x:350, y:0, width:200, height:200, onComplete:imagesLoaded}); IMAGE1.load(); function loadImage2(e1:LoaderEvent):void { IMAGE2.load() } function loadImage3(e1:LoaderEvent):void { IMAGE3.load() } function imagesLoaded(e1:LoaderEvent):void { var ARRAY:Array=[iMAGE1.content, IMAGE2.content, IMAGE3.content]; var TIMELINE:TimelineMax=new TimelineMax(); TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {alpha:0}, 0), TweenMax.allTo(ARRAY, 1, {alpha:1}, 0)], 0, "sequence", 0); TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {x:"-100"}, 0), TweenMax.allTo(ARRAY, 1, {x:"100"}, 0)], 2, "sequence", 0); } The problem remains the same. Kind regards, Uli PS: the changed files...

Hi, I try to tween several objects by multiple tween. If I run it I get an error message. Is there something I misunderstood or what am I doing wrong? Here is what I try to do (that's a simplyfied example just to show what I intend to do): At 0s I start tweening alpha to 0. After finishing it I want to move a bit. At 2s I want to start tweening alpha to 1 again. After finishing that I want to move back again. The timeline should be performed for all three objects. Now my code: 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:loadImage2}); var IMAGE2:ImageLoader = new ImageLoader("images/rose.jpg", {name:"rose", container:this, x:175, y:200, width:200, height:200, onComplete:loadImage3}); var IMAGE3:ImageLoader = new ImageLoader("images/sky.jpg", {name:"sky", container:this, x:350, y:0, width:200, height:200, onComplete:imagesLoaded}); IMAGE1.load(); function loadImage2(e1:LoaderEvent):void { IMAGE2.load() } function loadImage3(e1:LoaderEvent):void { IMAGE3.load() } function imagesLoaded(e1:LoaderEvent):void { var ARRAY:Array=[iMAGE1.content, IMAGE2.content, IMAGE3.content]; var TIMELINE:TimelineMax=new TimelineMax(); TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {alpha:0}, 0), TweenMax.allTo(ARRAY, 1, {x:"-10"}, 0)], 0, "sequence", 0); TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {alpha:1}, 0), TweenMax.allTo(ARRAY, 1, {x:"10"}, 0)], 2, "sequence", 0); } Thanks in advance and kind regards, Uli PS: attach you'll find the files:

Thanks again greensock for your immediate reply. I just did check the latest version 1.871 and it works perfectly. If I'm able to support your great work by pointing on such minor issues it's compared with what you are doing just nothing.

Thanks greensock for your immediate reply. Yes, I'm using the latest version of LoaderMax. As a development system I'm using Flash CS5 (11.0.2.489) and it's integrated version of Flash Player 10. The following attachment includes everything you need to generate the effect. I just did double check and I'm able to reproduce it with exactly these files: example.zip Thanks again for your great tool and support

I load a video with VideoLoader and it works just perfect, but if I set "crop=true" the video and it's background are flickering around. The video seems to pause and the performance of the whole animation turns bad. The attached code shows what I'm talking about. It loads the same video twice, uses the same parameters - except crop(, width, height and onComplete). import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; var video1:VideoLoader = new VideoLoader("videos/video1.flv", {name:"video1", container:this, width:200, height:200, bgColor:0xff0000, crop:true, hAlign:"center", scaleMode:"none", vAlign:"center"}); var video2:VideoLoader = new VideoLoader("videos/video1.flv", {name:"video2", container:this, onComplete:videoLoaded, bgColor:0x00ff00, crop:false, hAlign:"center", scaleMode:"none", vAlign:"center"}); video1.load(), video2.load(); function videoLoaded(e1:LoaderEvent):void { video2.content.width=video2.content.height=200, video2.content.x=200, video2.content.y=0; } The "onComplete" is just used to set the second video side by side with the first using the same size. What am I doing wrong using the parameters of the VideoLoader? Thanks for your support and kind regards, Uli

Hi jamiejefferson, just checked it out and it workes great. Again thanks a lot for your phantasic support Uli

Hi jamiejefferson, thanks a lot for your reply and it works great for sounds - life can be so easy... Now I try the same with a video and it's embedded sound, but again I can't get it working: import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.TweenMax; import com.greensock.plugins.*; TweenPlugin.activate([soundTransformPlugin]); // now it's there // create a VideoLoader that will begin playing immediately when it loads var loader:VideoLoader = new VideoLoader("videos/video3.mp4", {name:"loader", container:this, width:400, height:300, scaleMode:"proportionalInside", bgColor:0x000000, autoPlay:true, volume:1, requireWithRoot:this.root, onComplete:videoLoaded}); // begin loading loader.load(); function videoLoaded(e1:LoaderEvent):void { // // tween volume by volume plugin - works fine, use loader object for tween // TweenMax.to(e1.target, 5, {volume:1, repeat:-1, yoyo:true}); // volume init:1, try to set it to 0, but doesn't work e1.target.content.soundTransform = new SoundTransform(0, -1); // try tween, but doesn't work - where do I find the channel object? TweenMax.to(e1.target.content, 5, {soundTransform:{volume:1, pan:1}, repeat:-1, yoyo:true}); } Where do I find the channel of a video? Which object should I use instead If there's none available? Thanks again, Uli

I'm using the following code to tween a sound. Unfortunatelly I'm getting an error message: import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.TweenMax; // create a MP3Loader that will begin playing immediately when it loads var loader:MP3Loader = new MP3Loader("sounds/sound1.mp3", {name:"loader", autoPlay:true, repeat:-1, volume:0, onComplete:soundLoaded}); // begin loading loader.load(); function soundLoaded(e1:LoaderEvent):void { // // tween volume by volume plugin - works fine, use loader object for tween // TweenMax.to(e1.target, 5, {volume:1, repeat:-1, yoyo:true}); // tween volume and pan by soundTransform plugin - crashes, use channel for tween e1.target.channel.soundTransform = new SoundTransform(0, -1); TweenMax.to(e1.target.channel, 5, {soundTransform:{volume:1, pan:1}, repeat:-1, yoyo:true}); //TypeError: Error #1034: Typumwandlung fehlgeschlagen: NaN kann nicht in flash.media.SoundTransform umgewandelt werden. // at com.greensock::TweenMax/renderTime() // at com.greensock.core::SimpleTimeline/renderTime() // at com.greensock::TweenLite$/updateAll() } Am I using the correct objects to tween? Is there anything else I'm doing wrong? Thanks a lot for your help in advance, Uli PS: I'm using the latest version of TweenMax.