somnamblst

Since there have been a few questions regarding creating responsive banners, I thought I would post this tutorial (complete with sample FLAs). http://inflagrantedelicto.memoryspiral.com/2016/02/responsive-scaling-in-animate-cc/ I personally have been using the I think it is new, scale content in Animate, not for responsive, but to change banner sizes, and then just tweak to suit, like from 300x600 to 160x600, and then 728x90 to 468x60 and then 320x50. .

cartamundi Animate CC has unbelievably amazing compression ability of imported vector graphics. I have zip files that are 11-33 K I think you will be surprised even if you don't use hosted libraries.

A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed within the DOM as though it is child of the Container it is added to. However, it is not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be drawn in front of or behind the canvas). The position of a DOMElement is relative to their parent node in the DOM. It is recommended that the DOM Object be added to a div that also contains the canvas so that they share the same position on the page. DOMElement is useful for positioning HTML elements over top of canvas content, and for elements that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML content. http://www.createjs.com/docs/easeljs/classes/DOMElement.html

On the Adobe forum, due to the massive confusion of Flash being renamed Animate despite an older Adobe program being named Edge Animate, some are calling the renamed Flash/Animate program Flanimate. But seriously, I have seen at least one participant on the Adobe Edge forum say he used GSAP with Edge. Maybe ask there if you want to use Edge rather than Flanimate with GSAP.

I have experience with Pointroll and Doubleclick. But each vendor has it's own API which is why contacting the vendor is always a first step. They even call them different names. Like Tandem or Local Connection.

More than OK. I got my 280 zip files created this morning. Working on my 280 backup images.

Here you go. Thanks Dipscom There are no FLAs in that folder. The FLAs aren't an issue, but they do help me spot any versions, I forgot to preview, if I see FLA icons not separated by an html and js file, I know I forgot to preview. I have found if you forget to preview as you churn through versions using guide layers, you won't get an html file, despite publishing.

Hi Anusky, This would fall under Rich Media banners. Do you know which ad vendor will be serving your synched banners?

Newly renamed Adobe Animate AKA Flanimate has the ability to create custom templates and have multiple Publish Profiles. For the purpose of banners, you could create different publish profiles for different vendors, or for different sizes if you are editing the width and height style for high DPI displays. http://blogs.adobe.com/animate/using-animate-cc-html5-canvas-templates-with-multiple-publish-profiles/

Thanks, Dipscom. I don't have an issue with using the command line. My FLAs are also in the folders, so it would need to just grab a js and html file with the same name. I am using Win 7. It literally takes seconds to create them, but it is just so monotonous. Using Flanimate to create banners even at twice the size for retina display, I have zip files that are only 11-33K

I can't take credit for the moniker Flanimate. Someone on the Adobe forum started calling it that, because of the very predictable confusion, thanks to the new name being too easy to confuse with Edge Animate. I think what is going to make my scenario difficult is I have 11 versions in each folder, the one thing they have in common is size. The thing they don't have in common is file name.

Someone on Stack Exchange suggested 7zip. For it to be a time saver, it would need to be able to select the *.js and *.html file with the same name, and include the images folder if one exists.

I create a few assets, and or paste vector files from Illustrator, then build everything in Flanimate. I create my storyboards with Flanimate. I go from one ad size to the next, by editing the content inside symbols. You can also go from 728x90 to 468x60 then to 320x50 by scaling content when you resize the stage. Only things that can't be created in Flanimate should be created in PhotoShop (like cropping or resizing bitmaps).

Check out the AdStarter FLA Cory Hudson created. It has an ad specific Publish Profile that includes a commented out call to GSAP, and a buch of stuff related to AdHelper.js http://blogs.adobe.com/animate/need-html5-ads-adobe-animate-cc-to-the-rescue/ AdStarterFLA.zip

Thanks Carl, I posted a comment to the blog post that is still under moderation regarding the AdStarter FLA linked to the White Paper. The file is hanging on the preloader, the Dev tools errors make no sense and commenting out the preloader does nothing. I don't have time to do anymore troubleshooting, so it is attached in case it is just some weird Enterprise security issue on my end. The publish profile Cory created looks awesome, as it is taking advantage of the AdHelper.js, and I was hoping to incorporate some of the things it is doing into my own publish profile. It also has GSAP baked in AdStarterFLA.zip

I have a question about this best practice. If the static text, which has been converted to a movieclip, has two tweens, placement and opacity at each end, is it considered a good candidate for cache as bitmap, or is that just for text that isn't animated in any way? Static text can have two meanings in Animate CC. Does not change over time, or not dynamic or input text.

Corey Hudson wrote: http://blogs.adobe.com/animate/need-html5-ads-adobe-animate-cc-to-the-rescue/

If you were using Flash prior to Edge Animate, then changing back to Flash/Animate and exporting HTML5 canvas will be the most pain free, because you already know the Flash UI. It has the advantage of using any font you want, as it converts to vector shapes on publish.

Filters can be so problematic in canvas, that there is a filter finder JSFL for locating filters in nested symbols so you can delete them. http://blogs.adobe.com/animate/2015/03/ From the white paper released this past October.

If you watched the MAX presentation on Flash/Animate CC canvas export you heard the discouraging words regarding the use of filters we relied on during the SWF days. In fact if you try to use a drop shadow anyways, you will see your shadow not tween separately from the object you applied it to. And we are also being warned that filters are expensive* to render. But I really need a drop shadow.... Enter hack I duplicated my symbol, and placed a keyframe with the duplicate symbol right after my tween, my duplicate symbol which does not get tweened has a drop shadow. * drop shadow filter on two symbols cost me 17K

I keep a Notepad doc of code for future reference. This is what I have for Drag and Drop this.circle.addEventListener("pressmove", fl_MouseClickHandler_2.bind (this)); function fl_MouseClickHandler_2(evt) { evt.currentTarget.x = evt.stageX ; evt.currentTarget.y = evt.stageY ; }

I think some banner specific timeline code snippets would help. For instance Patrick's sample file uses this on a Canvas FLA single frame timeline. Both the text and the CTA button are movieclip symbols with instance names of txt and cta. TweenMax.set([exportRoot.cta, exportRoot.txt], {alpha:0, y:'+=50'}); var tl; document.rollOverFunction = function () { document.displayCTAHighlight(); } document.rollOutFunction = function () { // } document.displayCTAHighlight = function () { exportRoot.cta.gotoAndPlay(2); } document.startAnimation = function () { tl = new TimelineMax({onComplete:document.displayCTAHighlight}); tl.set(banner, {visibility:'visible'}); tl.staggerTo([exportRoot.txt, exportRoot.cta], 1, {alpha:1, y:'-=50', ease:Back.easeInOut}, 0.15); }

I will get the answer started. You will uncheck in publish settings, overwrite HTML, so the addition of the link(s) to GSAP don't get overwritten In your HTML doc you will add the SSL compliant link to the DC hosted GSAP library file(s) you plan to use. Simply creating a button symbol in Animate Cc will give you a cursor. For DCM you will add your clickTag var and your window.open to your HTML document. For the clickTag you will use this in the head: <script type="text/javascript">var clickTag = "https://www.google.com";</script>. You will add this right before the ending > to your canvas div: onclick="javascript:window.open(window.clickTag)". I personally uncheck create spritesheet, and prepare my assets so that I have as small as possible k weight, something I learned in the 40K SWF days. Any transparent bitmaps can benefit from https://tinypng.com/ Some DCM documentaion says that ads may not contain a JSON file, this is the reason for not using spritesheets, though I have not tested it to see if it will lead to rejection or not. I strongly recommend watching this banner specific MAX presentation. A caveat is that it is no longer necessary to break apart text, in Animate CC, as that is automatically done on publish. 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 There is also an Ad Helper class http://createjs.com/html5ads/ //Text Plugin https://s0.2mdn.net/ads/studio/cached_libs/textplugin_1.18.0_08ea1916d9c af67b128788a9c0f4f6eb_min.js //TimelineLite https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_1.18.0_dbe88c205 54c170a56f44600f31a97d9_min.js //TweenLite https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbe f1c2f4d4346f0f0e6c3c_min.js //TimelineMax https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_1.18.0_d3d029f563 7c6d5b293e574d258b5eee_min.js //TweenMax https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378 545748ff12d372e59e9_min.js

I guess my biggest concern is that the majority of banners are not Rich Media, and perhaps clearly labeled template files like say banner_DCRM, banner_DCM would prevent someone from inadvertently building to the wrong specs. And that is coming from the Publisher side where agency provided creative does not fail until it gets to DFP. I found that everything you could possibly do to make it fool proof helps. One other thing. I noticed you have console.log. Apparently that needs to be removed before publish due to old versions of IE

The only question I have Patrick, and I do fault DC for not making this division more clear, is are you using DCRM also known as Doubleclick Studio for a reason, now that we no longer need to use Studio simply because we have multiple files. I was told by our contact that unless I was doing expanding, video, or dynamic, that DCM was the route to go. DCRM uses enabler.js DCM uses <script type="text/javascript">var clickTag = "https://www.google.com";</script> and onclick="javascript:window.open(window.clickTag)"