22 Replies Latest reply on Feb 5, 2016 10:49 AM by rosebudd

    HTML5 for ads - problems

    Falrinth Level 1

      Hello guys!

       

      There is more and more voice on the web saying that Flash will become obsolete in future - and now Chrome will pause the flash ads it says (which may result in agencies switching to html5 alltogether for better ads results). As a guy who is making flash campaigns for living for over 7 years i wonder what does that mean for me. I was trying to convert or to start from the scratch banners in HTML5 canvas in Flash Proffesional CC but at the very beginning i have encoutered problems:

       

      1. The custom non-system fonts seems to not get published - text is shown as default system font and is published as such. Does that mean, that to make banners in HTML5 one need to know HTML5 code well and code the stuff insetad of making it in the Flash Pro similiar way he have done it all the time? (I have found topics on this forum that you can use @font-face rule, but where exactly do you add this code in Flash Pro? And why cant the software ddo it itself? And why cant it manage the different colours for particular text pieces?)

      2. Simple AS bread-and-butter-for-ads codes like "stop();", "gotoAndPlay", "geturl" etc are not converted - what are the substitutes in html5 canvas file? - I guess learning HTML? (damn, what about those who dont have a mathematical brain for programming?)

      3. Wont HTML5 banners look different on each browser/operating system?

       

      Would be awesome if someone would make a nice guide for how to switch from Flash ads making to HTML5 ads making using Flash Pro - or basically this whole software will become obsolete aswell?

       

      Should i start learning different profession? :/

       

      Or its just artificial motion and Flash will never get obsolete and remain superior? What are your thoughts?

        • 1. Re: HTML5 for ads - problems
          kglad Adobe Community Professional & MVP

           

          1. The custom non-system fonts seems to not get published - text is shown as default system font and is published as such. Does that mean, that to make banners in HTML5 one need to know HTML5 code well and code the stuff insetad of making it in the Flash Pro similiar way he have done it all the time? (I have found topics on this forum that you can use @font-face rule, but where exactly do you add this code in Flash Pro? And why cant the software ddo it itself? And why cant it manage the different colours for particular text pieces?)

          yes, it's helpful to learn html5/javascript/jquery,css.  (and for text you can also create a bitmap of the text and use it.)

           

          2. Simple AS bread-and-butter-for-ads codes like "stop();", "gotoAndPlay", "geturl" etc are not converted - what are the substitutes in html5 canvas file? - I guess learning HTML? (damn, what about those who dont have a mathematical brain for programming?)

          this.stop(), this.gotoAndPlay(), window.open().  read the createjs api's starting with easeljs.

           

          3. Wont HTML5 banners look different on each browser/operating system?

          blame steve jobs.

           

          Would be awesome if someone would make a nice guide for how to switch from Flash ads making to HTML5 ads making using Flash Pro - or basically this whole software will become obsolete aswell?

          see 1 and 2.

           

          Should i start learning different profession? :/

          no, just charge more for html5 and make sure you get a list of browsers/versions that they want to use for testing.  charge for each one because each one may require somewhat different coding.

           

          Or its just artificial motion and Flash will never get obsolete and remain superior? What are your thoughts?

          html embedded swfs may become obsolete but flash pro seems to be making the transition adeptly.

          1 person found this helpful
          • 2. Re: HTML5 for ads - problems
            rezun8 Level 4

            Our agency is going thru the same thing. Heres what we are doing.

            Flash still is the animation king. But yes sadly the days of Flash seem to be closing in on us. We are using Googles's Swiffy online editor to take our flash files and publish them as HTML5. The flash file gets uploaded and spit out from which we then strip out the javascript from the html5 code and then dump into DoubleClick Studio. The result is near identical look but sacrificing the interactivity on certain places. We are currently working with Google to find a solution for this.

            Mind you we are doing flash banner ads, and little more then that.

            Hope this helps in some way

            1 person found this helpful
            • 3. Re: HTML5 for ads - problems
              Falrinth Level 1

              Thanks kglad. Yeah well, the problem is that i really cant get into programming anything more complex than simple interactivity and basic code to controll my animaition. So i woudlnt even know where to start learning that for my needs. I would love to skip "unneccesary" stuff and get to know only pieces of code i would be using so in fact not learning the code's language, but learning the portion i have to learn to get going. When i look at articles that were supposed to be helpfull in learning coding stuff, my "vision blurs", like if i would read chineese. After a while im simply not following what is writen

               

              I just hope Adobe will make it similiar to flash, so we can make banners same way and the software willl take care of the coding.

              • 4. Re: HTML5 for ads - problems
                kglad Adobe Community Professional & MVP

                you're welcome.

                • 5. Re: HTML5 for ads - problems
                  david.edeburn

                  Are you guys seeing issues with Swiffy? In our tests, results were unpredictable and buggy. How did you pull out the code? I've looked at the output of Swiffy and it looks like a complete disaster. Also - Swiffy forces the user to download an extra 120kb anytime the output is viewed which I imagine would affect media buy costs.

                   

                  Blendmodes and gradient masks in particular aren't working well (course I can't figure out if it's even possible to create a gradient mask inside of the flash canvas environment and can't find enough documentation on any of this either). 

                  • 6. Re: HTML5 for ads - problems
                    Colin Holgate MVP & Adobe Community Professional

                    Swiffy is in some ways a competitor to what is made by Flash Pro. Hopefully there are forums for Swiffy that can give you some help.

                     

                    Even in Flash Pro, filters are an issue. With HTML5 you may need to make more things be bitmaps, and not vectors with filter effects.

                     

                    The 120k libraries would hopefully get cached by HTML5, and not have to download every time.

                    • 7. Re: HTML5 for ads - problems
                      rezun8 Level 4

                      Hi David,

                      through trial and error we pull out the javascript from the generated file and save it as its own .js file. then we make a bare bones html file with just the link to the .js

                       

                      After this we upload to DCM and bam were good to go thru QA.

                       

                      PM me if you need a sample file

                      Cheers

                      • 8. Re: HTML5 for ads - problems
                        adam of the redwoods Level 1

                        Hi. I've been working on my own transition to HTML5 banners from Flas, and here are some rough notes so far:

                         

                        Notes on tools:

                        1. Swiffy: It's not bad if you are doing simple animations. I think it uses SVG for a backend so it is more compatible than most tools out there. Here's the catch: The plugin is not compatible with Flash CC, so I suspect that Google won't support it, so it's not a long-term solution. Also, the images are compressed as "Base64" which does not compress well. And finally, the generated code is not really human-readable. It is possible to rip out the Base64 data and replace it with a JPG filename, but it's clunky, and I think there are better solutions out there.

                         

                        2. Google Web Designer: It's beta and it's terrible. Not sure why Google thinks this is a solution.

                         

                        3. Adobe Muse: I haven't used this much, but I didn't find this to be as full-featured as Flash. Not sure why they split the two tools.

                         

                        3. Adobe Flash CC using Canvas: It's not bad! Seems like Adobe hasn't left us behind, so I suggest starting here when making new HTML5 / Canavs banners. The notes below describe some of my experience using it to create HTML5 banners.

                         

                        Notes on Media Networks:

                        So far I only have experience with Doubleclick, and here's what I've learned:

                        - Zipped file size limits are 80k-100k. Most networks seem to be flexible.

                        - limit of 10 total files max. So it's a good idea to put your images into a single image atlas / sprite sheet. I use Photoshop and export into a JPG.

                        - the clickTag we don't need to write the code for. Just use a "var clickTag='www.url.com' " in the banner html file and wrap the canvas tag with a link tag.

                        - I don't know if they'll host runtime libraries like EaselJS or the Swiffy runtime, so those need to be included in the zip file. With all this compressed, I think I usually have about 40kb-50kb of space for images before I reach the 80-90kb limit.

                         

                        Notes on compression:

                        - I use an image atlas / sprite sheet and compress using Photoshop exporting JPGs. Then I use masks to cut out the areas I use for animation. This works ok except for the Google Chrome "clipping bug" that doesn't anti-alias correctly. UGH. Still trying to find a workaround.

                        - I rarely use PNGs. They are too big.

                        - I pull out the generated PreloaderJS file and use this instead:

                        PxLoader | A Simple JavasScript Preloader

                        it's quite easy to replace it in the generated HTML code and it saves about 15k of zipped compression space. I'm happy to write a specific tutorial if anyone needs it.

                         

                        Notes on Fonts:
                        - I don't use Webfonts since the brands I work with are premium, so what I do is keep one layer as the original text (hide it as a "guide layer" trick), then create a new layer and "break" apart the fonts when publishing (command-B or control-B). If you do have a lot of text, like small legal, you could try using a webfont. This approach keeps fonts looking consistent on different platforms.

                         

                        Notes on coding:

                        - Javascript isn't that bad. I usually use the browser's console to debug code.

                        - most of the code uses the prefix "this" plus a period in front of your basic actionscript commands.

                        - "trace()" is now "console.log()"

                        - "getUrl(url)" is now "window.open(url)"

                        - frames start at 1 not 0.

                         

                        Notes on what I'd like to see in future Flash Canvas versions:
                        - A way to embed fonts like Flash CS did. It detects which glyphs a banner is using, collects them as vector shapes, and reuses them.

                        - A way to create separate JPG and PNG image atlases. Right now it just creates a single PNG atlas, but it really should divide them.

                        - A way to use greyscale bitmap masks. EaselJS has a way to do this programmatically, so we should do this ability in Flash Canvas. This is needed not as a nice feature, but because of the rendering error on Google's Chrome browser where masks are not anti-aliased and look terribly chunky. Bitmap masks may help solve this problem.


                        I hope that helps someone, and I hope Adobe continues their efforts as I still feel Flash CC is the best option out there.

                        Let me know if I can clarify anything, as I wrote this after a long, tiring day.

                         

                        - AdamRedwoods

                        • 9. Re: HTML5 for ads - problems
                          rezun8 Level 4

                          @Adam,

                          Thats the most comprehensive reply Ive ever come across. Thank you immensely for writing it out. I'll share what we've been able to find out during our on transition here in regards to your notes.

                          1. Swiffy, the plugin quite frankly blows, if a simple animation is required it can handle it, beyond that its needs a proper update. It obfuscates MC's which immediately renders it useless for our needs, as simple as we make them. use the online version at Swiffy   |   Google Developers it works great, downside it does not allow for interaction of elements as it writes a click event for the entire creative. We are working with some Google guys to fix this issue within the converter but dont hold your breath. After we export the html5 code we strip out the JS and put it in its own file, make a back up jpg, and then finally write a small html5 page that links the JS. Finally we upload the three files to DCM and run thru Q/A. So far we've been having great success in reaching a much larger audience.

                           

                          2. & 3. Agreed, Google Web Designer is unusable IMO. We've told them as much and they don't seem to want to improve it. Muse is also unusable for complex animations that Flash is native too.

                           

                          4. Flash Canvas isn't bad and we continue to experiment with this as time allows, Adobe seems to want this to work, but for now with our team we continue to use SWF and just convert as mentioned above.

                           

                          Media Networks : We haven't had any limitations with files,we also use DCM for publishing, but as I mentioned above we arent zipping anything so maybe thats a cause. We have been able to load 170 kb JS files with no issues. ClickTag wise we are using a basic EventListener that references "studio.events.) I'd love to see how your files are set up - (hints at files swap are being dropped here)

                          I don not believe they will host any libraries currently so not sure that is an option as well.

                           

                          Compression: We use jpg's straight out of PS, have found keeping them under 39 kb vs the so called 40 kb limit doesn't get them kicked back. As of Monday August 3, 2015 the latest update to DCM keeps showing this weird error that no 1 pixel border is visible even though it clearly is. we have ignored it and have no issues. If time ever permits I'd love to see  a quick step by step on your PreloaderJs method. It may be helpful for others as well, after all thats why most of us are here.

                          Inside Flash we have been able to bump up image quality as the 40 kb limit is no longer a factor, so now we are publishing .swf's at 55-70 kb and then converting to html5.

                           

                          Fonts: No webfonts, haven't tried yet but I'm curious to see about this once we start creating Dynamic banner ads inside of DCM. Even with text inside Flash we haven't had any issues, aside from our legal department wanting to write a paragraph worth of disclaimers on each creative.

                           

                          Final Notes: I can only hope Adobe keeps upgrading Flash and continues it as a product. Despite the html5 vs. Flash battle Flash still pulls out ahead in my book.

                          As a side project we are working on creating a way to serve html5 banners with the standard backup jpg as well as a Flash backup that in essence would first run a check to see if Flash can be served, if not fall back to html5, if that isnt possible retreat back to the jpg. If we get it running I'll gladly share it.

                           

                          -Cheers

                           

                          Russ

                          • 10. Re: HTML5 for ads - problems
                            david.edeburn Level 1

                            Anyone figure out how to create gradient masks in flash yet? I can't find info on that anywhere it would be incredibly helpful. I agree optimized jpegs then clipping them in flash work pretty well, if you have to use a png make sure to use tinypng to compress it.

                             

                            One note on fonts. We can't use web fonts either so I'm using PNGs and optimizing them with tinypng which will lower the file size considerably vs breaking text apart in some cases.  I saved 30kb doing that on the last html5 standard I built in flash canvas. 

                             

                            I've also observed a couple times that long classic tweens lowered my file size vs coding the movement...not sure why will keep testing that...

                             

                            I'd love to see working clicktags for DCM

                            • 11. Re: HTML5 for ads - problems
                              david.edeburn Level 1

                              Real quick on the sprite sheet...when you export as a sprite sheet you end up created a JSON file which is incompatible with DCM. If you run into this issue just don't export as sprite sheet and the JSON file won't be created / needed.

                              • 12. Re: HTML5 for ads - problems
                                Colin Holgate MVP & Adobe Community Professional

                                If you do use the CreateJS loader, look for these lines in the HTML:

                                 

                                  var loader = new createjs.LoadQueue(false);

                                  loader.installPlugin(createjs.Sound);

                                 

                                Change it to:

                                 

                                  var loader = new createjs.LoadQueue(false);

                                  loader.setMaxConnections(6);

                                  loader.installPlugin(createjs.Sound);

                                 

                                The page will then load a lot faster.

                                • 13. Re: HTML5 for ads - problems
                                  rezun8 Level 4

                                  Hi David,

                                   

                                  So I took a look and uploaded the html, js and jpg to DCM and had it go thru. Now I didnt push it thru to Q/A approval but that would be your next step.

                                  In your html file add <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>  this will call the Enabler that DCM needs to track your ad. AS well your .js ref files were out of date.

                                  use the following:

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

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

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

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

                                   

                                  once this was fixed and uploaded it did not throw any errors.


                                  as well you also need a backup static image with a CTA that users can click on.

                                   

                                  hope this helps some

                                  • 14. Re: HTML5 for ads - problems
                                    adam of the redwoods Level 1

                                    Good tip on TinyPNG for 24-bit images + alpha (or ImageAlpha if you want a stand-alone app http://pngmini.com/  ) I had forgotten about that.

                                    • 15. Re: HTML5 for ads - problems
                                      david.edeburn Level 1

                                      Thanks Adam.

                                      Chrome "clipping bug" that doesn't anti-alias correctly. UGH. Still trying to find a workaround.

                                      On your aliasing issue with chrome are you seeing it with PNG's too?

                                      I'm scaling some png text, I've got the typical smoothing setting on...and the edges are not aliasing correctly. It's perfectly smooth in firefox and IE...but chrome it looks a little rough. Really frustrating because if I drop vector text that's broken apart it ads about 25k to the file and I don't have room for it.

                                      • 16. Re: HTML5 for ads - problems
                                        adam of the redwoods Level 1

                                        Re: clipping bug

                                        I found a work-around and posted it here:

                                        Workaround for Chrome's Mask Clipping a Bitmap Bug (HTML5)

                                         

                                        I also ran into vector quality issues with retina and hi def displays. I found a simple solution and posted the code here:

                                        Flash Canvas Hack: Better vector graphics on Retina and HD

                                         

                                        Hope this helps!

                                        Heers,

                                        Adam

                                        • 17. Re: HTML5 for ads - problems
                                          Falrinth Level 1

                                          Thanks Adam!

                                          For now i myself just skip the texts and use bitmaps for all the texts that are on solid colour background. For the ones on other images i think i will just convert them to vectors in AS3 file and copy over to canvas file. Wonder by how much KB will it make the .js file larger tho. Good thing most of the ads im making are for clients who like clean ads with similiar scheme on white background where i can use png8 for texts. Wonder when Adobe gonna make the vector treatment for texts just like in action script files. Perhaps it aint as simple without flash player on viewers machines. Maybe the javascript cant handle text vectors with nice small sizes like flash did - hope its not the case (i have no idea about javascript so just guessing reasons why we are left with what we have right now).

                                           

                                          Do you think using some kind of preloaders is neccessary for ads? I guess when some client will ask for it i will thank you again for providing this link to the js preloader you wrote about. For now there is so much to learn about on this strange, virgin world of html5 canvas ads making, that i think i will take it step by step.

                                           

                                          Anyway it was great to read it. Good to know other people are thinking of workarounds and waiting for Adobe to enhance their canvas ads making stuff. Even better to see them sharing their ideas.

                                          Cheers!

                                          • 18. Re: HTML5 for ads - problems
                                            marjantrajkovski Level 4

                                            Edge Animate is the best tool for HTML5 ads but I really dont understand why Adobe maybe abandoning Edge Animate in favor of Flash Canvas and OpenGL that dont have bright future like pure HTML/CSS/JS with Edge Animate. Adobe in last few years dont have smell for good business.

                                            Here are my samples of HTML5 banners.

                                            • 19. Re: HTML5 for ads - problems
                                              rosebudd Level 3

                                              I'd love to see working clicktags for DCM

                                              DCM and DCRM are two different things. Thanks to everyone who uses DCM being upgraded to Enhanced Banners, what would have automatically required  paying Rich Media impression fees in the Flash SWF days, (multiple files) and tag trafficking through Studio is no longer required. Most banners won't be Rich Media and won't need to be trafficked through Studio.

                                               

                                              Therefore only Rich Media (DCRM) uses Studio enabler js. Rich Media is classified as expandable, dynamic, video, light box, etc.

                                               

                                              Create your banner starting with an AS3 doc, and duplicate your text layers, with one as a guide layer for last minute edits. Break apart your text twice, and convert to an MC. Then convert to  Canvas doc and start animating. Your AS will be commented out if there is any.

                                               

                                              Create a button symbol so your banner will have a cursor.

                                               

                                              In publish settings uncheck overwrite HTML, because you will be adding your clickTag variable to this file.

                                               

                                              Also uncheck use hosted libraries, not because you can't, but because AdWords bars external files, and we don't always know that our DCM uploaded files are ending up in AdWords. (hopefully this is a temporary restriction). If and when you don;t need to uncheck this make sure you change http to https. This is called SSL compliance.

                                               

                                              Uncheck create spritesheet, because Doubleclick does not permit JSON files.

                                               

                                              After publishing open that canvas.html file.

                                               

                                              Add this between style tags:

                                               

                                                body {

                                                margin: 0;

                                                position: relative;

                                                }

                                                

                                                canvas {

                                                position: absolute;

                                                top:0px;

                                                left:0px;

                                                }

                                               

                                              And this for your clickTag between script tags

                                               

                                              var clickTag = "https://www.google.com";

                                               

                                              and to your canvas div

                                               

                                              onclick="javascript:window.open(window.clickTag)"

                                              • 20. Re: HTML5 for ads - problems
                                                Jeffrey Bixler Level 1

                                                You, my friend, are a lifesaver. I've been looking everywhere for a concise set of instructions like this. Very much appreciate your comment!

                                                • 21. Re: HTML5 for ads - problems
                                                  just.emma Level 4

                                                  Actually, AdWords now accepts the Google (Doubleclick) hosted CreateJS links: Image ads - Advertising Policies Help

                                                   

                                                  All Other HTML5 Ads

                                                  All code and assets must be referenced using a relative path to resources included in the .ZIP file. No external references are allowed except references to:

                                                  • Google Fonts
                                                  • Google-hosted jQuery
                                                  • Google-hosted Greensock
                                                  • Google-hosted CreateJS

                                                   

                                                  Here are the Google-hosted CDN links: DoubleClick hosted JavaScript libraries - DoubleClick Creative Solutions Help

                                                  • 22. Re: HTML5 for ads - problems
                                                    rosebudd Level 3

                                                    Wonder when Adobe gonna make the vector treatment for texts just like in action script files

                                                    You can still break apart your text in a canvas document, you just won't be able to tweak it as much as you can in the AS3 doc, so say a superscript $ is best to create in an AS3 file, but for quick and dirty text creation doing it in your Canvas doc also works.

                                                     

                                                    Some people keep an AS3 file open with 2 layers for each block of text, one broken apart one not.

                                                     

                                                    Text created as images reportedly looks bad on retina display devices, unless you create it at twice the size.

                                                     

                                                    Regarding file sizes, Flash CC Canvas does a very good job compressing vector graphics. that is what that checked by default compact shapes is doing. I have banners with multiple vectors graphics pasted from Illustrator and I am very pleased with the size f my zipped assets. Keep in mind it is the zipped size that counts.

                                                     

                                                    Do you think using some kind of preloaders is neccessary for ads?

                                                     

                                                    If you have any bitmaps at all the Flash CC Canvas export uses the preloader.js file.