Jump to content
Search Community

Animate CC for Canvas export is out with improvements

somnamblst 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

Some improvements seem designed for banner creators

 

The padding is gone. Create spritesheet is not checked by default.

 

And use hosted uses just this

 

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

 

and it is already SSL compliant.

 

So fewer things to add to your HTML doc, just clickTag var and onclick="javascript:window.open(window.clickTag)"

 

There is an option to provide a URL for web fonts.

 

And an option to import an HTML template so I imagine you can create one that has the clicktag stuff baked in.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Yes. The padding is removed in the body tag. so if you want to remove the body background color style, stop before margin:0px

 

I like the single createjs file. Corey Hudson referenced it in his CC Canvas for banners presentation, as being smaller than individual files.

 

I get the impression that easeljs does an extremely good job of minifying vector graphics. I had one campaign with 4 vector lockups or logos, and my js file was only 15k not zipped. Apparently that is what the Compact forms options does.

 

The one I am working on now has many keyframes for two masks and my js file is 56K.

 

The browser cache issue that began suddenly about a month ago is fixed, but you reportedly have to sign out of CC before you install Animate CC.

 

From the Adobe blog:

 

 

  • Support for HTML5 Canvas templates that can be customized with any code editor (for example, you can add script for Doubleclick or AOL tracking)

This week, we’ll have an all-star of cast of animators and game developers streaming live on Twitch, showing off what Animate can do.

 

Link to comment
Share on other sites

Been messing around with it.

 

Is there any (easy) way for Retina export or has that not been addressed?

There are several options!  (I went through this recently too).  

 

One option is building the ad at double the size and resizing with styles in the HTML file like this: 

<canvas id="canvas" width="600" height="500" style="background-color:#66CCCC; width: 300px; height: 250px;"></canvas>

Or, for code to make vectors crisp on any screen resolution without building the whole file at double the size, this works: https://forums.adobe.com/message/7864791#7864791

 

Or you can also use 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 shows everything in action.

  • Like 2
Link to comment
Share on other sites

Do you know if we can also use GSAP inside of Animate CC ? I guess, sure you can include TweenMax in an HTML template, but since it basically exports canvas--and anything done on the timeline would be part of the <canvas> ...then if you wanted to, you can use GSAP to code/animate DOM elements as a 'layer' on-top of that canvas element you technically could. But I am wondering can we mix the the GSAP DOM element manipulation with the canvas-based stuff ? or would that even make sense to do ?

Link to comment
Share on other sites

Do you know if we can also use GSAP inside of Animate CC ? I guess, sure you can include TweenMax in an HTML template, but since it basically exports canvas--and anything done on the timeline would be part of the <canvas> ...then if you wanted to, you can use GSAP to code/animate DOM elements as a 'layer' on-top of that canvas element you technically could. But I am wondering can we mix the the GSAP DOM element manipulation with the canvas-based stuff ? or would that even make sense to do ?

You can.  http://greensock.com/forums/topic/12289-flash-professional-html5-canvas-export-with-gsap/

  • Like 2
Link to comment
Share on other sites

Thanks Ohem! I've seen that post, but I guess I was wondering if you could somehow animate on the timeline in the new Animate CC, and it would generate DOM animation with GSAP somehow... I assume when animating on the timeline it is using create.js and creating the <canvas> layer, even if you wanted to leverage GSAP in the Animate CC environment. 

Link to comment
Share on other sites

I am doing timeline animation using tweenjs, simply because you have to use tweenjs anyways. But you certainly can use GSAP on the timeline to manipulate anything you have on the timeline.

 

There is apparently amazing minifying of imported vector graphics or anything you create in Animate CC, as my files are small even before zipping.

 

So go ahead and splurge on GSAP.

 

There is this

 

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

  • Like 1
Link to comment
Share on other sites

Anyone know what is with masks from Animate CC output being aliased in chrome? This doesn't happen with swiffy output, which also uses canvas.

 

aliased.png

 

Also noticing you can't animate filters or anything from the color effects panel, other than alpha.  It does it in the Animate timeline, but when you publish it doesn't work.  For example you can't animate the tint of an image.

 

Sad to say it but using swiffy still seems to be the most reliable and powerful option for most banners, aside from hand coding.

Link to comment
Share on other sites

Anyone know what is with masks from Animate CC output being aliased in chrome? This doesn't happen with swiffy output, which also uses canvas.

 

aliased.png

 

The masking thing is pretty annoying; it's a rendering issue with canvas in Chrome, not an issue specific to Flash/Animate CC though. (Swiffy actually doesn't use canvas; it uses SVG.)

 

Building the banners at double the size (which is good for retina displays anyway) and scaling them down in the HTML helps disguise the jagginess.

 

You might also find some of these comments relevant/helpful: http://stackoverflow.com/questions/9536257/how-to-anti-alias-clip-edges-in-html5-canvas-under-chrome-windows

  • Like 4
Link to comment
Share on other sites

Noco they actually referenced your questions about filters and effects in this MAX presentation. Some things that are not available are because they are too expensive to render. 

 

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

 

I took screenshots and added my notes

 

http://greensock.com/forums-support-files/flashCC_canvas_HTML5ads.png

  • Like 3
Link to comment
Share on other sites

That same issue happens in Google Chrome for SVG  +  SVG Masks and Clip Path elements. In that case some padding around the element to make sure the anti-alias edges have more room to display.

 

I would presume that you would also need to add some extra pixels to your radius so the anti-alias edges display in your mask.

 

:)

Link to comment
Share on other sites

  • 2 weeks later...

I would presume that you would also need to add some extra pixels to your radius so the anti-alias edges display in your mask.

 

Hey Jonathan,

I'd like to explore your workaround above in Animate CC. What do you mean by adding some extra pixels if we're talking about clipping masks? In the IDE, you would set the mask as a mask layer, just like how it was done in Flash. Works great in everything except Chrome. How would this translate to Animate CC or even Canvas in general?

 

I've found a workaround using code (composite operation), which works okaaaay. The mask isn't perfect but it's a lot better than aliased edges. For things that are animated, however, I need to continually apply the composite operation code and recache every tick. This isn't ideal obviously. Vector masks are especially useful in being able to use a JPEG to create transparency around an image, rather than using a PNG (even a PNG optimized in ImageAlpha). File sizes are way smaller (i.e. I have an image as a JPEG that's 11k, and the PNG8 ImageAlpha version that 58k).

 

 

Link to comment
Share on other sites

  • 3 weeks later...

Building Sizmek compatible Adobe Animate ad

@howto Build a Sizmek Compatible Flash Ad Using Flash CC HTML5 Canvas – Sizmek Help Center

 

 

1. Create transparent button on the top layer with instance name clickthrough_btn

 

2. In the first frame include action with clickthrough code for that button

 

this.clickthrough_btn.addEventListener("click", clickThroughFunc.bind(this));

function clickThroughFunc(){

    EB.clickthrough();

}

 

3.  In the head section of html include <script src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>

 

4. Use Sizmek's shared CreateJS library to shrink ad's size

@reference @glossary HTML5 Shared Libraries – Sizmek Help Center

 

5. Maximum weight for ad (zip file) is 100 kb
Sizmek HTML5 Workspace Specs

Link to comment
Share on other sites

 

Building Sizmek compatible Adobe Animate ad

@howto Build a Sizmek Compatible Flash Ad Using Flash CC HTML5 Canvas – Sizmek Help Center

 

 

1. Create transparent button on the top layer with instance name clickthrough_btn

 

2. In the first frame include action with clickthrough code for that button

 

this.clickthrough_btn.addEventListener("click", clickThroughFunc.bind(this));

function clickThroughFunc(){

    EB.clickthrough();

}

 

3.  In the head section of html include <script src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>

 

4. Use Sizmek's shared CreateJS library to shrink ad's size

@reference @glossary HTML5 Shared Libraries – Sizmek Help Center

 

5. Maximum weight for ad (zip file) is 100 kb

Sizmek HTML5 Workspace Specs

 

This is outdated; the maximum zipped file size is now 200k for Sizmek standard HTML5 banner ads.

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

Including your GSAP library into Animate CC 2015 is super easy! All you need to get started is include it in your HTML document at the start of the project - use the "Template for publishing HTML" feature in Animate CC. 
Sample of GSAP library for DoubleClick banners.

<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"

Once done use Greensock:

var t1 = this.txt_01; // reference your movieClip  
TweenMax.fromTo(t1, 1, {alpha:0} ,{alpha:1,  ease:Sine.easeOut});

Code away!

Link to comment
Share on other sites

Link to comment
Share on other sites

a little notice do i have to make animations by the code...or can it be done in animate with the tools?

 

i can do both, but maybe with tools is quicker and easier

 

i think its in code...because when i start the timeline..nothing is happend

Link to comment
Share on other sites

HI cartamundi,

 

Not really sure what you are asking.

You can do code-based animations in AnimateCC or use the built in timeline.

 

If you want to use GSAP in Animate CC definitely read http://greensock.com/animatecc-quickstart and grab the starter files.

 

If you have a specific question about Animate CC it will be best to start a new thread than continue the conversation here.

 

Thanks!

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