Jump to content
Search Community

GSAP and Adobe Animate CC

Zhur test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everybody,

 

I used to integrate Greensock in Flash Actionscript files, by the past.

When mobile devices arrived, I used GSAP JS version with Edge Animate.

Actually, Edge is abandonned by Adobe and focus is on the new Animate CC (ex Flash) with HTML5 export.

So, I am trying to integrate GSAP in Animate CC, but that works bad.

 

If I can write some codes like this :

TweenMax.to(this.lien_mc,3,{rotation:180});

 

Other commands doesn't seem to work :

TweenMax.to(this.lien_mc,3,{rotationY:180});

or :

Draggable.create(this.lien_mc );

 

This is the comment found on Chrome when I inspect the object (when using Draggable) :

Uncaught Cannot tween a null target.

Also, 3D properties seems not to be found : rotationX, rotationY, rotationZ.

 

Do you have an example files to understand where is the conflict between GSAP and CreateJS ?

Do you have a documentation to know how to use all GSAP possibilities inside the new Adobe Animate CC ?

Thanks.

 

Zhur

animate cc.zip

  • Like 1
Link to comment
Share on other sites

The great news about GSAP is that it doesn't really care what you are animating or where it is being rendered. 

You can animate the css backgroundColor of a DOM element, the cx attribute of an SVG <circle>, the x position of an EaselJS object rendered to canvas (from Animate CC) and much more.

 

However you do need to be conscious of what properties are available to be animated. For the most part GSAP doesn't have any restrictions, if the value is numeric, GSAP can animate it. 

 

Animate CC now allows you to create files that output to both swf (ActionScript) and html5 2D canvas (JavaScript) with EaselJS (part of CreateJS). The HTML5 export is quite good BUT the HTML5 canvas output does not support the same features as the swf. As far as I know there is no support for 3D, so the properties rotationX and rotationY simply don't exist on those objects. You may notice that when you create an HTML5 document in Animate CC there are no 3D tools available in the GUI. 

 

When Flash first started doing the HTML5 output there were some migration guides available but I'm not sure what the latest info is on Animate. If you are going to be doing any scripting inside of Animate for HTML5 you should read up on the EaselJS docs and pay attention to the properties of DisplayObjects: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html as those are the things you will be animating.

 

 

 

As for Draggable, it only works with DOM (and SVG). There is no support for canvas at the moment. 

Link to comment
Share on other sites

I keep a Notepad doc of code for future reference. This is  what I have for Drag and Drop

this.circle.addEventListener("pressmove", fl_MouseClickHandler_2.bind

(this));
 
function fl_MouseClickHandler_2(evt)
 
{
 
  evt.currentTarget.x = evt.stageX ;
 
  evt.currentTarget.y = evt.stageY ;
}
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...