Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by somnamblst

  1. This is the CSS. I don't know anything about how resolution effects CSS. 

            position: absolute;
            top: 20px;
            text-align: center;


        ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 7px;

    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgba(255,255,255, .5);
      box-shadow: 0 0 1px rgba(255, 255, 255, .5);

    .example {
      display: inline-block;

  2. On 2/12/2020 at 3:49 AM, Salakala said:

    I have not had the chance. The next campaign that asks for GDN banners I will slip one gsap 3.1.0 version in. See if it makes a difference. Though it should not matter as the rejection was weirdly for the domain not  a specific javascript file.


     It was a bit over a year ago, but I did some banners freelance that were for GDN, using Animate  (no GSAP) and it was a major PITA. Your issue is GDN. They have much stricter rules. The banners I do for day job go to DCM, not GDN, so I was flummoxed initially. If memory serves the Animate file had to include the JS in the published HTML. It took 2 or 3 tries to get past the initial rejections.


    Looking back at my final email to the person who contracted me for the banners, I wrote this:


    OK looks like I have to include the JS in the HTML file and not use CDN hosted create.js.


    • Like 2
  3. The entity formerly known as Doubleclick Studio has a unit they call Teaser Reels Component. Super easy, but you do need Studio access, as you do upload your video(s) as an asset to Studio.  The video is transcoded and served as appropriate based on the viewer's bandwidth, with poster image as the default.


    Teaser Reels allow for up to 30 seconds of muted video that will play even on mobile. User interaction starts the video over with sound and will play the entire video if it is longer than your teaser duration.


    And if you have Studio access, then you also have access to Studio Live Chat.




    <!DOCTYPE html>
    <html lang="en">
        <!-- Studio Enabler Required -->
         <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
        <script src="https://www.gstatic.com/external_hosted/polymer/custom.elements.min.js"></script>
        <script src="https://s0.2mdn.net/ads/studio/videoteaser/0/avc_codec.js"></script>
        <script src="https://s0.2mdn.net/ads/studio/videoteaser/0/video_teaser_lib.js"></script>
        //Declaring elements from the HTML i.e. Giving them Instance Names like in Flash - makes it easier
    var container;
    var content;
    var bgExit;
    var vid1Container;
    var vid1;
    //Function to run with any animations starting on load, or bringing in images etc
    init = function(){
        //Assign All the elements to the element on the page
        container = document.getElementById('container_dc');
        content = document.getElementById('content_dc');
        bgExit = document.getElementById('background_exit_dc');
        vid1Container = document.getElementById('video1_container_dc');
        vid1 = document.getElementById('vid1');
        //Bring in listeners i.e. if a user clicks or rollovers
    //Add Event Listeners
    addListeners = function() {
        bgExit.addEventListener('click', bgExitHandler, false);
        vid1.addEventListener('ended', videoEndHandler, false);
        Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
        studio.video.Reporter.attach('video_1', vid1);
    bgExitHandler = function(e) {
        //Call Exits
    videoEndHandler = function(e) {
        vid1.currentTime = 0;
    window.onload = function() {
      /* Initialize Enabler */
      if (Enabler.isInitialized()) {
      } else {
        Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    @charset "UTF-8";
    /* CSS Document */
    /* Default style, feel free to remove if not needed. */
    body, body * {
        vertical-align: baseline;
        border: 0;
        outline: 0;
        padding: 0;
        margin: 0;
    #container_dc {
        position: absolute;
        width: 300px;
        height: 250px;
        top: 0;
        left: 0;
        margin: auto;
    #content_dc {
        position: absolute;
        width: 298px;
        height: 248px;
        top: 0;
        left: 0;
            border:1px solid #666666;
        background-image: url(BG_teaser-Reel_KRO.png)
    /*    background-color: #FFF;*/
    /*    z-index: 100;*/
    /* Invisible button for background clickthrough. */
    #background_exit_dc {
        position: absolute;
        width: 300px;
        height: 80px;
        top: 170px;
        left: 0px;
        cursor: pointer;
        opacity: 0;
        z-index: 400;
    /* Div layer containing the video player and video controls. */
    #video1_container_dc {
        position: absolute;
        width: 298px;
        height: 169px;
        top: 33px;
        left: 1px;
    /*    background-color: #FFF;*/
    /*    border: 1px solid #666666;*/
        z-index: 500;
    #vid1 {
        z-index: 600;
            .video_controls_dc {
        position: absolute;
        width: 20px;
        bottom: 20px;
        top: 357px;
        cursor: pointer;
        z-index: 300;
    /* Video button hiding an positioning */
    .video_controls_dc:hover {
    #video_control_play_dc {
        left: 5px;
    #video_control_pause_dc {
        left: 5px;
        visibility: hidden;
        left: 30px;
    #video_control_unmute_dc {
        right: 5px;
    #video_control_mute_dc {
        right: 5px;
        visibility: hidden;
    #video_control_replay_dc {
        left: 55px;
     :focus {outline:none;}
    ::-moz-focus-inner {border:0;}
    ::-moz-focus-inner {border:0;}
        <div id="container_dc">
            <div id="content_dc">
            <button id="background_exit_dc"></button>
            <div id="video1_container_dc">
                      <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    if (!Enabler.isInitialized()) {
    } else {
    function enablerInitialized() {
      // Enabler initialized.
      // In App ads are rendered offscreen so animation should wait for
      // the visible event. These are simulated with delays in the local
      // environment.
      if (!Enabler.isVisible()) {
      } else {
    function adVisible() {
      // Ad visible, start ad/animation.
     var video1 = document.getElementById('vid1');
    Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
      studio.video.Reporter.attach('vid1', vid1);


    • Like 3
  4. It is just CSS animated snowflakes falling behind all the other elements in the ad. The only other time I violated the 3x/15 second rule, was a very small car that periodically drives across a masked letter X. When I ran it as a dynamic campaign through Doubleclick Studio I preempted possible rejection during QA by asking in advance if it would be rejected and they said no. If I do get dinged after I package my files for DCM, I just have to change the iterationCount with a find and replace so I am very tempted to do it.

  5. Reply. Yes. Just frame labels in a Movieclip. The CTA is a nested movieclip with a label called cta. I initially had buttons that grew a bit on rollover, but color tweens I think are more noticeable, so I started doing shape tweens from one color to the rollover color.  It is Animate, so no Codepen. 


    In this example both the button and the button copy change color on rollover, and then back on roll off.



    • Like 1
  6. I did not use GWD for Dynamic but what I did learn is that the feed controls almost everything. FYI Studio provides live chat, and they actually are more into GWD Dynamic than they are into custom HTML Dynamic. You need to set up your Dynamic campaign in Studio and transform your feed so you can get the local dev code. 


    Edited to add, you definitely use HTML tags in your feed columns that are for copy. 


    When you transform your feed, you then choose whether you want GWD or custom HTML output


    Also you will not see things the way they are intended under Creative preview in Studio. Only under Dynamic preview do you see the values being pulled from the feed. If you have multiple sizes in your feed, you must filter for the correct size.


    I actually used Animate CC for animation, and just made Animate publish templates that used the Studio CSS and JS. After I transform my feed, the generated code looks something like this. In this example logos, background images and subline are dynamic based on Metro Codes.


    / NOTE: Here starts the pasted section from Studio.
        var devDynamicContent = {};
        devDynamicContent.****_8sizes_subline_Sheet1 = [{}];
        devDynamicContent.****_8sizes_subline_Sheet1[0]._id = 0;
        devDynamicContent.****_8sizes_subline_Sheet1[0].uniqueid = 10;
        devDynamicContent.****_8sizes_subline_Sheet1[0].Reporting_Label = "***_300x250";
        devDynamicContent.****_8sizes_subline_Sheet1[0].isActive = true;
        devDynamicContent.****_8sizes_subline_Sheet1[0].isDefault = false;
        devDynamicContent.****_8sizes_subline_Sheet1[0].geo_location_name = "";
        devDynamicContent.****_8sizes_subline_Sheet1[0].logo = {};
        devDynamicContent.*****_8sizes_subline_Sheet1[0].logo.Url = "https://s0.2mdn.net/creatives/assets/*******/***_300x250.png";
          devDynamicContent.****_8sizes_subline_Sheet1[0].background = {};
        devDynamicContent.****_8sizes_subline_Sheet1[0].background-image.Url = "BG_300x250_v1.jpg";
        devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL = {};
        devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL.Url = "https://someURL.com";
        devDynamicContent.****_8sizes_subline_Sheet1[0].subline = "Free 1 Hour Shipping!";
         devDynamicContent.****_8sizes_subline_Sheet1[0].cta = "Shop Now";


    • Like 1
  7. 5 hours ago, cartimundi said:

    Sad enough the company which use my banners want GWD files...they say that the GWD operates better..


    Maybe they are talking about the way ads are trafficked. Doesn't GWD have the ability send files directly to DCM?

  8. Thanks Ohem,


    I tried choosing Dynamic from the popover menu, and only GWD templates, populate the search results. But when you start typing dynamic in the search box it autocompletes for Dynamic_Auto, Dynamic Telco, and Dynamic Retail, which are all HTML5 templates.