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

thanks carl..

 

i was thinking that animate cc was the new Adobe Edge...but it is totally different software..it's more the new Flash...

so different to work with it...

 

my steps in animation are:

 

1. adobe edge with timeline

2. adobe edge with placing images and animate them with code

3. codepen ( html with classes, css with positioning and JS for animation )

4. will be working with Animation CC....but i'm glad google now host greensock, so i hope that i can make banners below the 150kb

Link to comment
Share on other sites

I have Animate CC DCM clickTag and CSS style ready templates for every ad size, so I don''t touch my HTML files at all. If you author at 2X, using find and replace across multiple ad sizes was a pain.

 

Just import on advanced tab in publish settings, and make sure overwrite HTML is checked. I did not add GSAP, because I am using the built in tween.js, but you could easily add GSAP to my templates and save.

 

I also do not change the Adobe hosted createjs to Google's, and have had no issues.

 

 

bannerTemplates_X2.zip

Link to comment
Share on other sites

sorry, i don't get it...

 

do you also have animate doc?

these are html docs...

 

i'm a newbie, but do you mean, that you make 1 banner as example 300x250...and after you published it..you make the different sizes just by overwriting the html?

 

i'm also looking for a animate doc, gsap ready, where i can change the images and movings..

i've tried it with the one of gsap animate starter files...but it using a builded logo from illustrations...the best for my learning is a image..which i can overwrite or change, and from there changing, and so learning to animatie in animate cc with gsap...i hope you something like that..

 

grt newbie marcel

Link to comment
Share on other sites

sorry, i don't get it...

 

do you also have animate doc?

these are html docs...

 

 

Those are templates which can be imported into Animate and used as publish profiles.  More info here: http://blogs.adobe.com/animate/using-animate-cc-html5-canvas-templates-with-multiple-publish-profiles/

 

Using publish profiles is helpful if you have any custom settings in your HTML so that you don't have to worry about overwriting the HTML file or making changes after you publish.

Link to comment
Share on other sites

sorry, i don't get it...

 

1. Open. Create. Publish.

 

Google AdWords (without Exit function) Adobe Animate

http://www.marjantrajkovski.com/html5-banners-templates/google-adwords-adobe-animate-banner-ad-template.zip

Google AdWords (with Exit function) Adobe Animate

http://www.marjantrajkovski.com/html5-banners-templates/google-adwords-adobe-animate-exit-banner-ad-template.zip

Google AdWords (without Exit function) Adobe Animate + GSAP

http://www.marjantrajkovski.com/html5-banners-templates/google-adwords-adobe-animate-gsap-banner-ad-template.zip

Google AdWords (with Exit function) Adobe Animate + GSAP

http://www.marjantrajkovski.com/html5-banners-templates/google-adwords-adobe-animate-exit-gsap-banner-ad-template.zip

Google DoubleClick Adobe Animate

http://www.marjantrajkovski.com/html5-banners-templates/google-doubleclick-adobe-animate-banner-ad-template.zip

Google DoubleClick Adobe Animate + GSAP

http://www.marjantrajkovski.com/html5-banners-templates/google-doubleclick-adobe-animate-gsap-banner-ad-template.zip

 

* Templates are not retina ready. For retina ready create double-sized banner and manualy change ad format size meta tag within the <head> tag, for example: <meta name="ad.size" content="width=300,height=250"> and canvas style size, for example: <canvas id="canvas" width="600" height="500" style="width:300px;height:250px;"></canvas>.

 

If anyone have solution how to create retina ready template from those template is free to share with us. I would like to have script in template with math function, for example $WT / 2

 

 

2. Validate.

 

Google AdWords Validator

https://h5validator.appspot.com/adwords

Google DCM (DoubleClick Campaign Manager) Validator

https://h5validator.appspot.com/dcm

Google DBM (DoubleClick Bid Manager) Validator

https://h5validator.appspot.com/dbm

  • Like 1
Link to comment
Share on other sites

 

If anyone have solution how to create retina ready template from those template is free to share with us. I would like to have script in template with math function, for example $WT / 2

 

Personally, I like to use AdHelper and just include that in my templates.  You can use the highDPI() method to make all of the vector stuff from Animate look crisp at any screen resolution without building your whole banner at double the size, or highDPI(true,2) to enable high DPI support and then scale the banner down to the correct size if you are building at 2x the size.

 

Here are some simple DCM templates I set up with examples of both; you just have to be sure to include a copy of AdHelper.min.js with your published banners. Animate_AdHelper_templates_simple.zip

 

You can also modify these to include other AdHelper methods if you want to; this version just keeps it simple. I don't bother with the "sleep" method since I just make sure to keep the timeline less than 15 seconds, but I can see how that could be a useful addition.

 

More info about AdHelper here: https://github.com/CreateJS/html5ads/tree/master/AdHelper

 

And here: http://createjs.com/html5ads/#AppendixAdHelper

  • Like 1
Link to comment
Share on other sites

Personally, I like to use AdHelper and just include that in my templates. 

I tried AdHelper but I am not satisfied. It is complicated and unpredictable with possible errors and sufficient script. I like clean code. I think that is better to manipulate with HD bitmaps when they are doubled on stage?

Link to comment
Share on other sites

I tried AdHelper but I am not satisfied. It is complicated and unpredictable with possible errors and sufficient script. I like clean code. I think that is better to manipulate with HD bitmaps when they are doubled on stage?

Really?  I haven't experienced any issues with AdHelper.

 

The nice thing about the highDPI code, is it will make text/vectors from Animate appear sharp on screens with any pixel density; even 3x or 4x, whereas if you author at 2x and scale down, text would still look slightly fuzzy on an iPhone 6+ for example.

Link to comment
Share on other sites

AdHelper.js hangs on my Enterprise security environment  :x  I see the preloader text, and no style is loaded because the preloader text is aligned right and partially out of the browser.

 

And apparently I am going to have to uninstall and reinstall Animate to get the latest update that fixes the template import errors issue. I just have not had time.

Link to comment
Share on other sites

AdHelper.js hangs on my Enterprise security environment  :x  I see the preloader text, and no style is loaded because the preloader text is aligned right and partially out of the browser.

 

And apparently I am going to have to uninstall and reinstall Animate to get the latest update that fixes the template import errors issue. I just have not had time.

 

 

Try my version when you get a chance; I simplified things a lot.  

 

AdHelper doesn't require a preloader & I didn't include it.  (It didn't really seem necessary for a lightweight standard HTML5 banner ad.)

  • Like 1
Link to comment
Share on other sites

I've just received files that use Animate CC and AdHelper.js, but no Flash file and have been asked to adapt several sizes. 

 

Unless I've missed some new revelation, you still need to revert to the original Flash file to make changes right?

Link to comment
Share on other sites

*Disclaimer* I think I'm supposed to disclose that I'm now an Adobe Community Professional (as of yesterday).  

 

But I would have shared this here anyway, because it's great news & I'm always excited to share this stuff with my fellow banner people!  

  • Like 5
Link to comment
Share on other sites

Ohem, regarding the high DPI support, are you changing your publish templates?

 

This update did fix my issues with adHelper.js hanging on preload  8-)

 

Edited to add, you no longer have to create a symbol for text, you can tween it without converting to a symbol, and it won't revert to a system font.  8-)  8-)

  • Like 1
Link to comment
Share on other sites

Ohem, regarding the high DPI support, are you changing your publish templates?

 

This update did fix my issues with adHelper.js hanging on preload  8-)

 

Edited to add, you no longer have to create a symbol for text, you can tween it without converting to a symbol, and it won't revert to a system font.  8-)  8-)

Yeah, I'm using the newest Animate default template just with added clicktags, cursor:pointer, and custom CDN links.  

 

I'm quite pleased with the new additions to the publishing options; not only the high DPI support, but also the option for a preloader which can be easily added (or excluded) in publish settings.

 

With the newly added high DPI support, I'm probably not going to use AdHelper going forward (even though it's been awesome) because it doesn't feel as necessary anymore.

Link to comment
Share on other sites

I posed the question on the Adobe Team blog announcing the new features, as to whether Cory Hudson was going to update his template files. Adobe said yes, and they were glad banner creators liked that blog post.

 

Edited to add, I also asked this question but the Adobe blog team has not respondded.

 

 

 

Question regarding high DPI. I currently author at 2X because I want imported bitmaps to look good on retina devices. My common sense wonders how it would be possible that bitmaps created at 1X, could magically have more data for high DPI.
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...