Got Animate. How do I get GSAP up and running in it? Basic Q.

[Doctor XTN]

OK, so I admit I spent no time in Edge. Found a tutorial for GSAP in Edge that starts to become confusing as the programs are different. 

 

I also admit to perhaps missing the super obvious here. I used GSAP in Flash for years and the importation process was incredibly simple. 

 

So, how do I get GSAP to talk to Animate so I can tween my elements using those magical 'to' and 'from' lines of code?

Forget anything else. Help me get the hosted libraries working (end target Double Click, who hosts it as well) and tell me where to type my GSAP code (maybe there's a documentation link I haven't come across in my searching).

 

Do I make my bitmaps Movie Clips? Do I name them? Like in Flash.

 

I know this sounds basic, but I've been stuck in GWD hell since The Illuminati turned of Flash in September and I just hate timeline animation. 

 

Next questions will be how to make the ad clickable/tap-able and as mentioned before, what code to insert for DoubleClick (while this has been covered elsewhere, I'm still figuring it out). 

 

Thank you so much.

[somnamblst]

I will get the answer started. You will uncheck in publish settings, overwrite HTML, so the addition of the link(s) to GSAP don't get overwritten

 

In your HTML doc you will add the SSL compliant link to the DC hosted GSAP library file(s) you plan to use. Simply creating a button symbol in Animate Cc will give you a cursor. For DCM you will add your clickTag var and your window.open  to your HTML document. For the clickTag you will use this in the head: <script type="text/javascript">var clickTag = "https://www.google.com";</script>. You will add this right before the ending > to your canvas div: onclick="javascript:window.open(window.clickTag)".

 

I personally uncheck create spritesheet, and prepare my assets so that I have as small as possible k weight, something I learned in the 40K SWF days. Any transparent bitmaps can benefit from https://tinypng.com/

 

Some DCM documentaion says that ads may not contain a JSON file, this is the reason for not using spritesheets, though I have not tested it to see if it will lead to rejection or not.

 

I strongly recommend watching this banner specific MAX presentation. A caveat is that it is no longer necessary to break apart text, in Animate CC, as that is automatically done on publish.

 

https://images-tv.adobe.com/avp/vr/155ad5fb-a467-45ba-a599-6f0e3b4806ad/3e5d068a-7998-41d1-8607-d4f04a5579df/1aa439ad-0773-4ee7-b88b-28393984b4a0_20151007114929.854x480at800_h264.mp4

 

There is also an Ad Helper class

 

http://createjs.com/html5ads/

//Text Plugin
https://s0.2mdn.net/ads/studio/cached_libs/textplugin_1.18.0_08ea1916d9c
af67b128788a9c0f4f6eb_min.js

//TimelineLite
https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_1.18.0_dbe88c205
54c170a56f44600f31a97d9_min.js

//TweenLite
https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbe
f1c2f4d4346f0f0e6c3c_min.js

//TimelineMax
https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_1.18.0_d3d029f563
7c6d5b293e574d258b5eee_min.js

//TweenMax
https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378
545748ff12d372e59e9_min.js

Edited March 1, 2016 by somnamblst

[Carl]

Great job, Somnablst!

 

I created a video for Flash Pro's HTML5 export and from what I can tell from using Animate CC briefly the concepts are the pretty much the same:

http://greensock.com/forums/topic/12289-flash-professional-html5-canvas-export-with-gsap/?hl=flash+pro+export#entry50985

 

Also regarding ads, Patrick has provided a great set of templates that handle things like clickTags, mouseevents and more:

http://greensock.com/forums/topic/13774-animate-cc-gsap-starter-file-needed/page-2?hl=starter#entry58279

[somnamblst]

I think some banner specific timeline code snippets would help.  For instance Patrick's sample file uses this on a Canvas FLA single frame timeline. Both the text and the CTA button are movieclip symbols with instance names of txt and cta. 

TweenMax.set([exportRoot.cta, exportRoot.txt], {alpha:0, y:'+=50'});

var tl;

document.rollOverFunction = function () {
	document.displayCTAHighlight();
}

document.rollOutFunction = function () {
	//
}

document.displayCTAHighlight = function () {
	exportRoot.cta.gotoAndPlay(2);
}

document.startAnimation = function () 
{
	tl = new TimelineMax({onComplete:document.displayCTAHighlight});
	tl.set(banner, {visibility:'visible'});
	tl.staggerTo([exportRoot.txt, exportRoot.cta], 1, {alpha:1, y:'-=50', ease:Back.easeInOut}, 0.15);
	
}

[retropunk]

Also, if you create a profile similar to the ones I've included you can always include the JS imports and not worry about them being overwritten.