Greensock in Adobe Animate - 3d flip

[TimKII]

Hello,

 

I'm currently beta testing the new Adobe Animate and I have a problem with the 3d rotation.

 

In Edge I am using :

 

var element = sym.$("Container");
var front = sym.getSymbol("Container").$("front");
var back = sym.getSymbol("Container").$("back");

TweenLite.set(element, {transformPerspective:800});
TweenLite.to(front, .1, {opacity:0, delay: .2});
TweenLite.to(back, 0, {opacity:1, delay: .3});
TweenLite.to(element, 2.2, {rotationY:-180, ease:Back.easeOut});

 

But in Adobe Animate the rotationY does not seem to work, 2d animation are no problem, so it's not the library not loading or something...

 

Does work :

 

var mc = this.symbol1;

TweenLite.to(mc, 1, {x:200,rotation:45});

 

Does not work :

 

var mc = this.symbol1;
TweenLite.set(mc, {transformPerspective:800});

TweenLite.to(mc, 2.2, {rotationY:-180, ease:Back.easeOut});
 

Any thoughts on why it's not working?  I don't have Flash CC at the moment, so I cannot test there.

I already posted this on the Adobe forum and got this answer : Have you tried the Greensock forum to see why this is not working.  We haven’t done any investigation yet on working with GreenSock libraries and there is no integration (so no errors).  We are also looking into this and will let you know if we find anything.

 

Thanks for any help!

 

Tim

[GreenSock]

Disclaimer: I have zero experience with the new [upcoming] Adobe Animate. My understanding, though, is that it's a rebranded version of Adobe Flash and that it uses the CreateJS canvas-based framework to render everything (well, EaselJS is the sub-component of CreateJS that does the canvas stuff). So where Edge Animate was all DOM-based, Adobe Animate is a completely different beast because it's canvas-based. Therefore, it's not using CSS properties or anything like that, so the transformPerspective:800 in your code wouldn't work (unless they have that property baked into CreateJS which I doubt). 

 

GSAP doesn't really care if you're animating DOM or canvas - it can work with just about anything. So you should definitely be able to get it to work here (as it sounds like you did for rotation) - the key is to animate the properties that actually exist for Adobe Animate. For example, if Adobe Animate is all canvas-based and it uses a property like "rotateY" or "yRotation" instead of "rotationY", that's what you'd need to use in your tween. See what I mean? And from what I can tell in the EaselJS docs, there is no 3D support at all, so "rotationY" doesn't exist. I could be wrong, though. 

 

In short, make sure you're animating properties that Adobe Animate supports (and I kinda doubt it supports 3D...yet). 

 

Does anyone else have any insight to share? 

[Carl]

Yeah, as far as I know there is no support for 3D when exporting to canvas / CreateJS.

[Jonathan]

Based on this Blog post .. it looks like Flash Animate CC will support 3D via WebGL, but i haven't looked at the latest update yet.

 

http://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/

 

But even though WebGL is supported i cant find anywhere on what features and properties of WebGL will be supported in Adobe Animate CC.

 

With that new name, its like putting lipstick on a pig. But in my heart Flash will always be as good as bacon

[GreenSock]

Yeah, it's a bit confusing because when anyone hears "WebGL", they instantly think 3D because that's really what it's perfect for and what most people leverage it for, but from what I can tell with Adobe, they're just using it to accelerate 2D rendering. I scanned that article you linked to, and I still don't see any mention of 3D properties like rotationX/rotationY. I kinda suspect that it's not gonna be supported, but hopefully they'll eventually get there. It only makes sense. I know that adding 3D rendering is no trivial task, though. It affects a LOT of things even in the 2D stuff. So I wouldn't be surprised if it's another year or more before they add support for true 3D properties. 

[somnamblst]

I know this is a Plan B type suggestion, but have you thought about loading your Edge Animate published 3-D flip using an iFrame, into your Flash CC canvas exported HTML doc?

 

Or using the DOM element?

 

http://www.createjs.com/docs/easeljs/classes/DOMElement.html

 

You might want to ask on Stack Overflow, Lanny of GSkinner.com, hangs out there.

 

http://stackoverflow.com/users/1252916/lanny

 

Very jealous that you are getting to beta test Animate CC.

[Jonathan]

Yep Jack your exactly right! 

 

In the EaselJS API looks like it just allows a WebGL layer to be passed to the 2D Context renderer, but only as a performance gain.

 

http://blog.createjs.com/webgl-support-easeljs/

 

Looks like in Flash (Animate CC or Flash CC) they allow manual rotation with the 3D rotation tool, but you can not animate that 3D rotation of a symbol, especially when exported out as canvas or WebGL document

 

http://www.adobepress.com/articles/article.asp?p=2242056&seqNum=14

 

Good find Jack!

[TimKII]

Hi guys,

 

thanks for all the replies, I guess the only solution for now is to add the flip to the html file after publishing, hopefully executing the javascript function to flip from within the Adobe Animate animation will be possible... there is hardly any documentation available and coding is totally different in Adobe Animate, prepare to learn again... actionscript > actionscript 2 > actionscript 3 > javascript > ......

 

The 3D rotation tool is not available in Adobe Animate when using canvas...

 

I'll keep you posted on the progress of the project!

 

Tim

[rizal72]

Hello everybody

 

I can tell you that the same issue with 3D rotation is already present in Flash CC 2015. In fact it is not possible to animate the rotationX or Y property as well.

 

On a second Off Topic note:

I'm doing lots of experiments in Flash CC, trying to find again the right tool to make Banners in the right way (the GSAP way!), that is the way I've made them in the last 15 years, with a very effective "patented" method of my own.

 

What I can say, after months of testing, is that the most effective way is still to use Flash CS6 and Swiffy (!!!)

That's to bypass all the terrible FONT EMBEDDING issues that all the other methods bring with them.

 

Yes, you could break apart your text fields, and have them rendered correctly in HTML, but you shall always keep a copy of any text box for future editing (it always happens that a client asks to change text five minutes before delivery)...

 

A feature to automatically break apart text fields while exporting, keeping the originals untouched, could be a life saver!

[retropunk]

Hi, have you tried the new version of Animate CC (previously Flash Pro) ?

If not you should try it right away. As a Flash user I think you will be very happy with Animate CC.

 

Tons of new features, text to outlines is one of them. No more keeping copies for future editing.

 

Take a look asap!

 

- Patrick

[cartimundi]

hello..retropunk..

 

do you if it is possible to make the flip in animate CC?