Pilatus

I resolved the issue, I was assigning matrixes manually, hence losing scale/rotation information. Now I use GSAP for the whole mouse interaction from start to end, and it works.

Everytime I receive a delta object, I just moved the mouse a little bit, I get a mouse movement notification, calculate the difference in scale and angle, then apply it to the object. it works but scale is perturbed by rotation. I'll try to build something extremely simple to pin point the problem, but it's not easy because it's part of a big project.

TweenLite.set(dummySprite, {transformAroundCenter: {rotation: dummySprite.rotation + rad2deg(delta.angle), scaleX: dummySprite.scaleX*delta.scale, scaleY: dummySprite.scaleY*delta.scale}}); When I rotate an object, also its scaling properties are affected and when I apply rotations over and over this effect is accumulated. See video of the effect (if you still don't see the HD version, wait a bit that google renders it), I just enabled rotation in there, as you can see, scaling is being affected. Essentially the scaling values shrink. I tried multiple ways to counter this effect but without success, how could I do it? There must be a trick for this. If I just scale with some rotation already existing, the rotation is not affected too much. But when I rotate, scaling is perturbed really bad. Maybe there is something I miss. This is what I tried but it didn't work, banging my head on how to solve this. if(delta.angle != 0 && delta.scale != 0) { TweenLite.set(dummySprite, {transformAroundCenter: {rotation: dummySprite.rotation + rad2deg(delta.angle), scaleX: dummySprite.scaleX*delta.scale, scaleY: dummySprite.scaleY*delta.scale}}); } else { if(delta.angle != 0) { var unperturbedScaleX:Number = dummySprite.scaleX; var unperturbedScaleY:Number = dummySprite.scaleY; TweenLite.set(dummySprite, {transformAroundCenter: {rotation: dummySprite.rotation + rad2deg(delta.angle)}}); TweenLite.set(dummySprite, {transformAroundCenter: {scaleX: unperturbedScaleX/dummySprite.scaleX, scaleY: unperturbedScaleY/dummySprite.scaleY}}); } else if(delta.scale != 0) TweenLite.set(dummySprite, {transformAroundCenter: {scaleX: dummySprite.scaleX*delta.scale, scaleY: dummySprite.scaleY*delta.scale}}); }

Thanks, got it, and it works.

Yes, resolved Thanks to you guys. Do you plan on releasing the new .swc? At the moment I just had to add the class in my project sources, it does bypass the .swc old class.

Ok, my app is quite complex so I had to make an effort to extract and minimize to an example. I posted also resulting video animations and yes I am not getting what I really want. I want the object to move past the left edge and get out of the way, rotating around its own the center. This is the code with x inside transformAroundCenter: var o:flash.display.Sprite = new flash.display.Sprite(); o.graphics.beginFill(Color.RED, 1); o.graphics.drawRect(400, 400, 100, 100); o.graphics.endFill(); addChild(o); TweenLite.to(o, 200, {useFrames: true, transformAroundCenter:{x: -400, rotation:360}}); this is the result animation: https://tinyurl.com/ljcgdth ------------------------------------------------------------------------------------------------------------------------ This is the code with x outside transformAroundCenter: var o:flash.display.Sprite = new flash.display.Sprite(); o.graphics.beginFill(Color.RED, 1); o.graphics.drawRect(400, 400, 100, 100); o.graphics.endFill(); Starling.current.nativeStage.addChild(o); TweenLite.to(o, 200, {useFrames: true, x: -400, transformAroundCenter:{rotation:360}}); this is the result animation: https://tinyurl.com/m69orgn

I am running a simple animation which animates an image to negative x coordinates outside the stage towards the left, so that the image disappears. When I enable transformAroundCenter, the image would stop with its center point at x 0, so I see half of it on the left edge. If I disable transformAroundCenter, then the animation completes properly. Is this the wanted behaviour? I would expect the animation to just work and move the object out of the way.

Actually I am already using Starling. I can use GSAP with starling faking the animaton with a dummy sprite and then updating all the animation matrixes into the starling display object, frame by frame. I use GSAP for matrix calculation only, then "steal" the matrix out the dummySprite and give it to Starling, then play it. The problem is still there in Starling as it is in Flash, no difference. For my project I will also try to output to WebGL in the future, still using GSAP, and see how it goes, but for now it seems like I've hit an hard limit with the Flash Player. Indeed, there is nothing I can do to avoid that little flicker every now and then. I could try tiling the image and see, but for now sufficiency is what matters!

Hello, When I animate large images (e.g. 1600x900 px) throughout the screen, I see it stuttering sometimes. Animation must run at 60 fps with big images, otherwise it won't show smooth. I suspect these stutters I see every now and then, say once every 15 seconds, are nothing else than my process being preempted by the OS.. Even a the smallest preemption can cause a the process to lose minimum 10-15 ms, so in that time slice I lose the opportunity to play that frame (at 60 fps it has to play 1 frame every 16.6 ms). So if the amount of time to draw completely that frame is more then 6.6-1.6 ms, it will stutter... isn't it? Probably, with big images, the amount of time to draw stuff is more than 1.6-6.6 ms. My conclusion is that we cannot get rid of these problems, can we? So to recap, the eye needs to see 60 fps played, if we get preempted it won't play 60 fps, but say 57, then it it will be noticeable immediately. Indeed try to set 57 fps on large images, you will see the same stuttering happening more often than not. At the same time we cannot go over 60 fps as far as I know because we are approaching that minimum 10-15 ms quantum assigned to the drawing thread. Catch 22 situation. Do we need RTOS if we want smooth animations all the time? Thing is that customers complain about these stutters every now and then!

I made it work like this: TweenMax.set(dispObj, {x:dispObj.x, y:dispObj.y}); dispObj.alignPivot(); TweenMax.set(dispObj, {x:dispObj.x+dispObj.pivotX, y:dispObj.y+dispObj.pivotY}); TweenMax.to(dispObj, 210, {useFrames:true, rotation: deg2rad(360), scale: 0.5, yoyo:true, repeat:-1, ease: Linear.easeNone}); Haven't really understoon why through, was more a trial error process. Scaling and rotating around center with yoyo.

aaah shame, would be nice to have a workaround.

Sorry, please move to the other forum.

Hello, Is there a way to rotate starling display objects around the center? The plugins do not work with starling so there must be another way to use TweenMax with it. Thanks.

Makes sense, but how would I retrieve the matrix values once I set the progress? Like it's explained here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html a,b,c,d,tx,ty Maybe I need to calculate the values of a,b,c,d out of "X,Y, skewY, skewX, rotationY, rotationX, scaleY, scaleX".

Hi, Is it possible to get all the intermediate transform matrix of a tween given the start, end and time? Without actually executing the animation. Thanks.

Thanks Jack, your answer is already satisfactory, indeed I was more looking for a general direction. I have to put up something to show as soon as I am back from vacation.

Hello, I am looking if it possible to animate matrix values directly like with the TransformMatrixPlugin. Values would then be updated for each frame to webgl rendering using the Flash’s WebGL Runtime API. https://helpx.adobe.com/flash/webgl-runtime-api-help/matrix.html Do you reckon this approach can work? I am looking for a workflow which would allow to reuse Flash IDE assets exported to WebGL, then animate them via GSAP but still render everything to WebGL via Flash’s WebGL Runtime API. The unicorn! GSAP is great for manipulating object properties. Thanks.

Understand perfectly, then I vote for the change , thanks.

Thanks for the clarification Jack. Any plan in the near future to make it work also for DOM elements?

Hello, I was using the smoothOrigin feature but it appears to be working in a different way than the intended one, or maybe just the way I interpret it . Basically I scale an element forth and back and it jumps, wasn't it supposed to not jump by default? It jumps when I scale back to 1 and it doesn't when I scale to 2. Please have a look at the demo.

Hello guys, In our project we develop an aircraft simulator with the cockpit visuals running in the browser (there is no landscape visualization). We started in 2010 with this project and our only choice by then was pretty much Adobe Flash. Flash hasn't been an easy path, but with optimization and elegant code we achieved excellent results, it just allowed us to do everything we wanted and quickly. We are planning to move the whole front-end to SVG. We've been relentless till now because of the browser lack of support and the immense amount of work to do the port. So it wasn't really worth. Now we decided to push a bit the limits with SVG and test the feasibility at the present time. Another reason for the change is that we feel Flash is being abandoned on the long term (5-10 years from now). Passing from flash to pure SVG graphic would allow us to support multiple browser/platforms. We will be having "many" objects on the screen, let's say up to 500 with a good 25% of them animated in the worst case, everything runs in full screen. Animations will be pretty much scaling, translations, opacity fade ins/outs, rotations, masking. My question is , in the current state of the modern browsers, which operations are more likely to be hardware accelerated when animating SVG? Recently I've read SVG is not yet accelerated at all, is it true? Is there any trick which I need to follow to speed up the tweens?

Hello guys, Altough your examples did not apply directly to my work, they helped figuring out the viewbox attribute was getting on my way so I changed my solution without using it and resizing my paths with a .set call. Also I changed from top,left approach to x,y as suggested and reworked all my algos. Now I've got it done and WITH border control. Also, borderLeftWidth issue is gone. Thanks!

I am still trying to figure out why my resize box is more "sensible" to mouse movement with the beta version. You can see the difference here: 1- http://codepen.io/anon/pen/KpNXJg (old version) 2- http://codepen.io/anon/pen/jPVGRr (same code, beta version) As you can see in case 2- it way more sensitive to the mouse movement. This is an example, but using a div: http://codepen.io/anon/pen/OVbxxG (old version)

I quickly tested it and the border functionality seems to work as advertised. Also, when testing on IE10 I spotted an error in the debugger, you can see it in the attachment. Normally I operate on IE10 and IE11. I noticed the behaviour of my resize draggable changed, need more time to understand it, maybe it's my fault, thing is, with the old version it was ok ;( (maybe current beta still unstable?). But this is unrelated with bordering. But yes, again the bordering works.

Yes that's it thanks. I'll ask my boss for the business membership here, it's very cool.