Jump to content
Search Community

ohem last won the day on April 23 2017

ohem had the most liked content!

ohem

Members
  • Posts

    383
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by ohem

  1. Yes, all of my demo links which use iframes still work fine.

     

    I've always uploaded/tested my own files on Sizmek/MediaMind/Eyeblaster (way back when), too.  I'm surprised there are agencies that don't get their developers logins.

     

     

    It would be really helpful if you could share an example file/link so we could try to help troubleshoot.

    • Like 1
  2. Hi everyone,

     

    I'm new to creating banner ads and have trouble understanding how to do 'polite loading' with javascript. I've googled how to do it but everything that comes up is related to specific platforms like Double Click and libraries like Enabler.

     

    Can anyone explain how to polite load for example a jpg before loading in heavy assets? Any information would be really appreciated.

     

    Thank you

    Do you know what ad serving company the ads will be trafficked through?  A lot of platforms have their own way of handling polite loading.  

     

    For example, with DCM or Sizmek a backup image/pre-loader image can easily be uploaded for each banner to show while the page is loading.

  3. You already have high DPI support enabled so building the banner at double size is unnecessary.

     

    On my retina display, the text actually looks great.  

     

    The text doesn't look quite as good on my non-retina display because it's small and thin, but I wouldn't say it's blurry.  You would have the same appearance with thin/SVG text on a non-retina display regardless of whether you use Animate or not.  

     

    I would recommend using a bolder font weight for better legibility, and increasing the font size if possible.

    • Like 1
  4. https://advertising.amazon.com/ad-specs/en/policy/technical-guidelines

     

    HTML Ad Security

    HTML ads must be served secure (https:) and must not include dynamic creative content, which changes based on pre-determined variables (Ex. Weather, IP, Date) unless otherwise approved by AMG rep.

    Shared libraries (including use of web fonts) that are hosted on an approved, certified third party domains, are exempt from the initial ad load. Ensure you have the proper license for webfont use in your ad creative. Amazon holds no responsibility to obtaining, granting, or extending webfont licenses. Open source webfonts are permitted.

    HTML Ad Requirements

    • All ads must meet Amazon’s existing creative acceptance policies
    • All ads are to be provided as JavaScript or iFrame tags in .txt or .xls format.
    • Accessing device API’s such as Local Storage, Geolocation, Microphone, or Camera is prohibited.
    • Console statements must be omitted to avoid verbose logging and errors in older browsers.
    • Ad serving and tracking must be over https.
    • Clicks are limited to three redirects.
    • Ads must limit https requests to 10.
    • Max CPU: ad not to exceed 30% CPU usage during host-initiated execution.
    • Assets must be hosted on a Content Delivery Network (CDN).
    • External CSS/JS libraries must be pulled from a server that supports gzipping.
    • All code must be minified and concatenated.
    • Use of emerging CSS properties for style purposes only should include proper vendor prefixes for cross-browser support. Ads must not use emerging CSS layout properties such as Flexbox.
    • Ads must provide a static backup when JavaScript is disabled via a “noscript” as well as dynamically load a static image if the ad fails to load.
    • Ads must reference click tags via: var clickTag = “https://www.example.com”;
    • In the event of multiple click destinations, ads must reference click tags as clickTag1, clickTag2…
    • Animation can be inline-video, CSS, SVG/SMIL, and/or JavaScript (WebGL, Canvas, DOM) driven.
    • Progressive in-banner video for animation must not be larger than 2.5mbs.
    • Ads with JavaScript animation must use the requestAnimationFrame API and should gracefully fail when not supported.
    • Ads must support all modern browsers and have graceful failovers for older browser versions. If an older browser is detected a static backup/default must be served.
    • Like 1
  5. Any ideas on improving quality of text in an HTML5 Canvas ad from Adobe Animate CC?

     

    All text looks a bit fuzzy when publishing.

     

    Google search mentioned 

     

    stage.snapToPixelEnabled = True;

     

    That helped a bit but our Campaign Managers are expecting a higher quality. There are tons of other scripts to scale the stage up and down which are actually mystifying to me. Not sure where to plug these methods into the .html and .js that Animate CC generates.

     

    Thanks in advance for the amazing brains out there.

     

    -Ray

    I'm guessing you're on a retina display?

     

    If so, if you're using an old version of Animate or an outdated publishing template, you might not be taking advantage of Animate's High DPI support which is now built it.

     

    Can you upgrade to the latest version of Animate and try publishing from the newest default template?

  6. We have a staging site/server, so I just set up a HTML page with links to each banner, and then I load the banners into an iFrame when the corresponding link is clicked.  

     

    It's pretty quick to use the same page as a template & swap out file names for different creative.

  7. Thank You. It worked. However, it seems the transformOrigin does not overide. For instance when I scaleX or Y the origin is 50% 50%, so it scales from the center. I need the width to increase from the top left or "0% 100%". I tried setting the registration in the properties on the object and setting the transformOrigin, but no dice. It only scales from the middle. Any advice?

    transform-origin is a css property; it won't work in canvas.  

     

    To change the registration point in Animate, you would select your symbol and then move the white circle, as joe_midi described earlier in this thread.

    • Like 1
  8. I would suggest to use CDN version of TweenMax or TweenLite.

    Here's the CDN for Robust version (TweenMax)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 

    Here's the CDN for Lightweight version (TweenLite)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script> 

    For comparison about TweenMax and TweenLite there's no difference in performance they are good to use the only difference is that their size here's the great answer from Carl!

     

    Link: http://greensock.com/forums/topic/10136-difference-between-tweenmax-tweenlite-based-on-gc-speed/

    Adwords does not accept external references like cloudflare.  They only allow the Google-hosted libraries, as mentioned by Oliver and Joe.

    • Like 1
  9. The flash is occurring in the brief instant before TweenMax has loaded.

     

    If you want to use "from" tweens, the best thing to do is to first make your content invisible using CSS; you can apply the visibility setting to the whole parent container.  Then use TweenMax to set the visibility of the content to visible, so that the content doesn't show before TweenMax has loaded: 

    See the Pen AXGqEG by ohem (@ohem) on CodePen

     

    You can do it even without the window.onload part.

    • Like 3
  10. A brand that i am currently building retail media ads for, has an animated 156K  animated GIF representation on Moat. What I am wondering, as it looked horrible, is Moat converting HTML5 banners to animated GIF for preview search purposes, or did this brand actually create those horribly choppy dithered animated GIFs. I did message Moat on their Facebook page, and will report back if they answer.

    I think they just created the horrible choppy gif on their end.  

     

    From what I've seen, Moat only shows swf and jpg/gif banners.  When I look for ads of clients I've worked on, I only see static banners because we just don't typically do gifs; none of our HTML5 banners have been converted.

    • Like 1
  11. Pretty sure DC advise against using jQuery in banners: https://support.google.com/richmedia/answer/6098183?hl=en-GB

     

     

    https://support.google.com/richmedia/answer/6261897?hl=en#js

     

     

     

    The validators aren't a 100% and it will always depend on which network on DC your banners are doing to AdWords/GDN/DCM/YouTube all have different rules.

     

     

    That's interesting.  For Adwords, they list (Google-hosted) Jquery as one of the few external references that's allowed: https://support.google.com/adwordspolicy/answer/176108#otherhtml5

    • Like 1
  12. HTML5 expandable banners are definitely possible; how the functionality should be implemented will totally depend on the ad serving company, as they all have very different APIs.

     

    For DoubleClick, you can get a template/starter file here: https://www.richmediagallery.com/tools/starterfiles#tplGeneratorPath:expanding%2F300x250%2Fimage%2Fborder%3Dfalse%3BautoExpand%3Dfalse%2Fe%2F500x500%2Fimage%2FexpandingDirection%3Ddr~

     

    For Sizmek, here: http://showcase.sizmek.com/formats/demo/html5-expandable-banner

     

    Adform here: http://creative.adform.com/support/documentation/build-html5-banners/html5-banner-formats/single-file-expanding-ad/

    http://creative.adform.com/support/documentation/build-html5-banners/html5-banner-formats/double-file-expanding-ad/

     

    Etc.

     

    The size of the expansion will usually depend on the media buy/specs for various sites.  Many sites have specific dimensions like a 300x250 should expand to 700x500 or something like that... but expanding to full screen is possible if it's allowed where your ad is running.

     

    Sizmek has an example of a banner that expands to full screen already built out: http://showcase.sizmek.com/formats/demo/html5-full-screen-expandable-banner and Doubleclick has an article about expanding to full screen too: https://support.google.com/richmedia/answer/4526014?hl=en

     

    Can't offer much more advice unless you know how your ad will be trafficked.

    • Like 3
×
×
  • Create New...