Jump to content
Search Community

Animate CC GSAP Starter File Needed

Carl 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

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

 

 

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

Thanks for the animateCC.zip Carl, very helpful :D

 

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 :)

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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

  • Like 5
Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

EWCl803.png

 

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!

  • Like 5
Link to comment
Share on other sites

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 !

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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!

 

 

compare_HiDPI.png

Link to comment
Share on other sites

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

 

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>

Link to comment
Share on other sites

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.

  • 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...