Jump to content
GreenSock

somnamblst

Animate CC for Canvas export is out with improvements

By somnamblst, in Banner Animation. Views: 18,223

Moderator Tag

Recommended Posts

Posted

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
  • Replies 58
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ohem
ohem

*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 e

ohem
ohem

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 th

somnamblst
somnamblst

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

  • Author
Posted

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
Posted

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
Posted

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
Posted

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
Posted

@WebDizajner

 

Thanks for sharing the samples. Great resource.

Link to comment
Share on other sites
Posted

 

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
Posted

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
Posted

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
  • Author
Posted

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
Posted

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
Posted

AdHelper highDPI is working after reload of page?

Link to comment
Share on other sites
  • Author
Posted

Will do ohem. The bug fix I need to uninstall and reinstall to get the latest update for, is a template import issue, where you get an error message that the template file is not valid.

Link to comment
Share on other sites
Posted

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
Posted

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?

Yes, you need FLA.

  • Like 1
Link to comment
Share on other sites
Posted

Yep, the FLA... And if you happen to be working on ads with washer and dryers and happen to work at a place that starts with an O, then you'll be working with my files :)

Link to comment
Share on other sites
Posted

*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
Posted

Congratulations ohem!

 

We shall throw all the bugs at you from now on  :mrgreen:

 

Will you get us swag as well?  ;)

  • Like 2
Link to comment
Share on other sites
Posted

I tried new update and it is great.

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

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
Posted

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
  • Author
Posted

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account