Animate CC GSAP Starter File Needed

[Carl 9,066 Likes (Superhero)]

Hey Folks,

 

I have a user asking for a very basic Animate CC file that includes TweenMax and does a very basic tween.

I'm fighting with the Creative Cloud app at the moment.

If someone could upload a simple example zip that would be great. Nothing fancy.

 

Thanks!

Carl

 

 

[Carl 9,066 Likes (Superhero)]

Finally got things working. (note when adobe apps give you trouble quit everything and restart)

 

To me the AnimateCC + GSAP process seemed the same as for Flash Pro 2015.

The only hassle was that Chrome was caching my files so every time I did a test I had to refresh as well.

 

Attached is my very basic setup with one tween

 

 

 

 

animateCC.zip

[Jonathan 5,176 Likes (Superhero)]

Thanks for the animateCC.zip Carl, very helpful

 

I was having issues with ne AnimateCC process too, thanks for the restart tip!

 

In Google Chrome Dev Tools you can disable cache when the dev tools is open by:

• Right-click and "Inspect Element" to open it or click the F12 key.
• Now click the Network tab in the toolbar.
• Then check the "Disable cache" checkbox at the top.

Hopefully that should disable cache, when your Dev Tools is open and testing with AnimateCC!

 

Keep in mind it will only clear cache on reload if Dev Tools is open

 

I hope this helps

[akytara 2 Likes (Newbie)]

Thank you for the starter file! Very helpful to have a hand with the first step to get the ball rolling.

[somnamblst 183 Likes (Specialist)]

The update fixed the cache issue, but only if you signed out before installing the upgrade. I couldn't find a place to sign out, so I am still SHFT+CNTRL+DELETE and dumping just cached images and files.

[celli 69 Likes (Contributor)]

Thanks for the Animate CC starter file! I have one, maybe obvious question, and not necessarily GSAP related--since the 'box' is a vector shape in Animate CC (I think), shouldn't it hold it's vector shape when viewing it in the browser ? It seems like it gets a little blurry on retina displays. But I guess that is just what the <canvas> element does because it's not a div or dom element--however, I thought Animate CC retains vector shapes, does anyone know ? I guess to compensate we could make the file 2x the size and set the HTML property to 1/2 the size to compensate for retina displays.

[Carl 9,066 Likes (Superhero)]

I believe to target retina you would need to export at double-size as you suggested, but you might get a better answer from Adobe.

[retropunk 126 Likes (Specialist)]

Hey guys, we have been experimenting with Animate CC and GSAP. It's been a lot of fun. Feels like the old days. 

I'm attaching a starter template for a banner that also shows a few other things.

 

Using GSAP with Animate CC is awesome.

 

Publish Profiles

Check the Publish Settings > Profile

You will see Standard and Double Click RM. This allows you to customize the HTML wrapper for the project.

You can then go under the Advanced tab and export a profile to create your own and then import it.

Ideally you would create templates with profiles. it has already sped up production for us.

 

For banners its best practice to keep all assets in the same folder. In Publish Settings you can set the Export Image assets to ./

This keeps everything in the root. Not everyone needs this but when you do it's really helpful.

 

Side note:  We've talked to Adobe about merging the JS and JSON in the HTML file. If this happens it will really make Animate CC and GSAP the ultimate tool for creating banners again!

 

Retina Export

This is a simple script that allows you to take advantage of retina screens. It won't automatically res up your graphics but your text to text outlines will look nice and crisp. What we are doing right now is working at 100% but exporting the graphics at 2x and scaling them down in Animate CC. This is one technique...I'm sure there are other ways. Happy to hear what you come up with. Kevin Newman wrote a post about it a while back (2014).

His code is more robust and he goes into more detail. Definitely worth the read Check it out

 

In the attached file you will see imports for GSAP and some other goodies. Like defining the border outline and rollover/clickTag code.

Of course you can easily use GSAP to animate elements on the stage. I have a timeline animation for the button but it can be whatever you want.

 

Please let me know if you find this useful and please share back your profiles!

 

Thanks guys!

- Patrick

BannerMaster.fla.zip

[OSUblake 9,990 Likes (Superhero)]

You can import and work with vectors inside Animate CC, but once your animation gets exported to canvas you lose the vector shape. This can cause blurriness on retina displays. To compensate for this you have to scale the canvas' context.

 

I don't know if Animate CC or Easel has an option to do this, but here's a function you can use. Just pass in the canvas element, width, and height, and it will set the correct scale.

function setScale(canvas, w, h) {
  
  var ratio = window.devicePixelRatio || 1;
  
  canvas.width  = w * ratio;
  canvas.height = h * ratio;
  
  TweenLite.set(canvas, { width: w, height: h });
  
  canvas.getContext("2d").scale(ratio, ratio);
}

Here's a demo using some vector shapes.

See the Pen 6f58ac0ffd4f81ae625c42bca088446f?editors=0010 by osublake (@osublake) on CodePen

 

EDIT: Haha. I just looked at the article that @@retropunk linked to and it uses a similar function, but with some Easel properties.

[retropunk 126 Likes (Specialist)]

Yeah I had the blurry issue but this takes care of it. The file I attached has that in the profile settings.

It could always be tweaked though.

[OSUblake 9,990 Likes (Superhero)]

I looked at your file, but I'm a total Flash/Animate noob and couldn't find any code so I just posted what I use. One of these days I might need to sit down and actually learn how to use it.

[celli 69 Likes (Contributor)]

Just as an added thing with Animate CC, you can export to SVG. It looks like it uses snapSVG, and retains vector output because it is SVG. The one thing I noticed is that the file size seems a little large--but I didn't do enough tests to really tell. But you can use also GSAP in the same way to animate objects that are on the timeline.

[OSUblake 9,990 Likes (Superhero)]

Oh yeah, I remember seeing CJ Gammon posting something about that. I'm curious as to how it works. Can you upload that? 

[Carl 9,066 Likes (Superhero)]

I've managed to get pretty confused trying to understand how Flash's publish profiles work with the associated html templates.

 

 

It seems Patrick has configured a way that changing publish profiles changes which html template to use. I think I'll need a tutorial on all that.

 

The huge value in what Patrick has provided is what you get when you export one of the 2 templates. 

Here is the guts of the Stanard GSAP template:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$TITLE</title>

<style>
html, body {
  margin: 0;
  padding: 0;
  background-color: white;
}
#banner {
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#banner-border{
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid grey;
  pointer-events: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

$CREATEJS_SCRIPTS
$SCRIPT_START
var canvas, stage, exportRoot;
function init() {
$CJS_INIT

stage.scaleX = stage.scaleY = window.devicePixelRatio;
}
$PLAYSOUND
$SCRIPT_END
</head>
<body onload="init();">
<div id="banner" style="cursor:pointer;">
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG;"></canvas>
<div id="banner-border"></div>
</div>
<script type="text/javascript">
var clickTag = "https://www.google.com";

var canvas = document.getElementById("canvas");
var w = canvas.width;
var h = canvas.height;

canvas.width = w * window.devicePixelRatio;
canvas.height = h * window.devicePixelRatio;
canvas.style.width = w + "px";
canvas.style.height = h + "px";

var banner = document.getElementById("banner");
banner.style.width = w + "px";
banner.style.height = h + "px";

banner.addEventListener("mouseover", function(){document.rollOverFunction();});
banner.addEventListener("mouseout", function(){document.rollOutFunction();});
banner.addEventListener("click", function(){window.open(window.clickTag);});

var border = document.getElementById("banner-border");
border.style.width = (w-2) + "px";
border.style.height = (h-2) + "px";
</script>
</body>
</html>

You will notice that he packed in all sorts of goodies for 

 

• loading GSAP
• canvas scaling for retina
• mouseevents
• borders
• more

All the code in that template dictates what ends up in the HTML that Flash spits out. Using this template can be a massive time-saver for sure.

 

The DoubleClick one is equally packed.

 

Thanks a ton, Patrick!

[Jonathan 5,176 Likes (Superhero)]

Blake when you open Animate CC formally Flash CC .. you can hit the F9 key on your keyboard and that will pull up the actions panel. In there on the left bottom of that panel, you should see various actions list you can click on to see any code on any frame.

 

[retropunk 126 Likes (Specialist)]

The retina snippet needs some refactoring but it does work. I'm sure someone smarter than me will edit the code and post it for us

[celli 69 Likes (Contributor)]

Hi Blake, below is a link to download a simple Animate SVG document, but I am noticing with SVG in Animate CC, we do not have the 'Actions' panel available! So I assume the only way, right now, to add GSAP is after the HTML file has been output of Animate CC...

http://visualla.com/sandbox/SVG-ANIMATE.zip

 

 

BTW, RetroPunk, I love that GSAP template file you have shared. I may have to start back in again with Flash, I mean Animate CC !

 

[Jonathan 5,176 Likes (Superhero)]

Hello celli

 

You can find the actions panel or script window in Adobe Animate CC by hitting the F9 key on your keyboard.

 

https://helpx.adobe.com/animate/using/writing-scripts.html

 

[celli 69 Likes (Contributor)]

Hi Jonathan, I think when you select an SVG document, the actions panel looks like it is grey'ed out and unavailable. I see it with HTML Canvas documents in Animate CC.... let me know if you see something different ...

[retropunk 126 Likes (Specialist)]

SnapSVG Animator is from CJ Gammon

https://github.com/cjgammon/SnapSVG-Animator

 

In Animate you can only do timeline animation at the moment. No timeline code.

I'm sure you could add GSAP code once the SVG is published. Certainly worth looking into.

 

This is marked as active development but it's been quiet for a minute.

Check out the examples in GitHub

 

- Patrick

[celli 69 Likes (Contributor)]

thanks Patrick Just wanted to make sure I wasn't missing anything with the SVG in Animate CC. This is all good stuff to dig into.

[ohem 324 Likes (Leader)]

The retina snippet needs some refactoring but it does work. I'm sure someone smarter than me will edit the code and post it for us

All of the variations I've tried work well:

 

http://www.unfocus.com/2014/03/03/hidpiretina-for-createjs-flash-pro-html5-canvas/

https://forums.adobe.com/message/7864791#7864791

 

And there's also AdHelper: https://github.com/CreateJS/html5ads/tree/master/AdHelper

 

With AdHelper, 

.highDPI();

does basically the same thing as the code above, and you can also do some additional cool stuff with it.  The garyad.html file on Github shows everything in action.

 

Or just building at double the size like Carl mentioned, and then scaling down the canvas with CSS works too.

<body onload="init();" style="background-color:#ffffff">
	<canvas id="canvas" width="600" height="500" style="background-color:#FFFFFF; width: 300px; height: 250px;"></canvas>
</body>

[celli 69 Likes (Contributor)]

I was able to create a 'template' from Patrick's .FLA he shared, and the 2x Retina display code make a real big difference. Also the fact that we load in GSAP automatically is really awesome! Attached is just a screenshot to show the difference the 2x code makes.

 

I also see it adds var clickTag = "https://www.google.com"; which is nice, but I was unsure how you'd plan on using that exactly. If you can share how you use it, that would be great.

 

I know this topic isn't exactly GSAP related, but for banners if we can leverage both GSAP and Animate CC, it can be a very useful tool again!

 

 

[ohem 324 Likes (Leader)]

I was able to create a 'template' from Patrick's .FLA he shared, and the 2x Retina display code make a real big difference. Also the fact that we load in GSAP automatically is really awesome! Attached is just a screenshot to show the difference the 2x code makes.

 

I also see it adds var clickTag = "https://www.google.com"; which is nice, but I was unsure how you'd plan on using that exactly. If you can share how you use it, that would be great.

 

I know this topic isn't exactly GSAP related, but for banners if we can leverage both GSAP and Animate CC, it can be a very useful tool again!

 

That's part of a standard DCM clickTag: https://support.google.com/dcm/partner/answer/3145300?hl=en

 

Sample click tag insertion

Here's an example of a click tag inserted in an HTML document:

<html>

<head>

<meta name="ad.size" content="width=300,height=250">

<script type="text/javascript">

var clickTag = "http://www.google.com"; </script>

</head>

[The rest of your creative code goes here.] </html>

Make sure your creative uses the click tag variable as the click-through URL:

<a href="javascript:window.open(window.clickTag)">

<img src="images/dclk.png" border=0>

</a>

[ohem 324 Likes (Leader)]

For a HTML5 canvas banner created in Animate CC, for DCM or Adwords all you really need for the clickTag is this in the head:

<script type="text/javascript">
var clickTag = "https://www.google.com";
</script>

and onclick="javascript:window.open(window.clickTag)" which can be added to the canvas tag like this:

<canvas id="canvas" width="600" height="500" style="background-color:#FFF; width: 300px; height: 250px;" onclick="javascript:window.open(window.clickTag)"></canvas>

or you could also add a button symbol within Animate and add the window open code like this with the same results: 

this.myBtn.on("click", function(evt){
	window.open(clickTag, "_blank");
});

Some ad serving companies have slightly different clickTag requirements, but it's generally pretty similar.