Jump to content
Search Community

Web Dizajner

Members

  • Posts

    130

  • Joined

  • Last visited

 Content Type 

Posts posted by Web Dizajner

    Banner calculators for adwords

    in Banner Animation

    Posted

    ...and then you can start to create banner adding more div, css and animation:

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>My Banner</title>
    <meta name="ad.size" content="width=300,height=250">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <!-- layout -->
    <style>
    body {
      margin:0px;
    }
    #stage {
      position: absolute;
      width: 300px;
      height: 250px;
      left: 0;
      top: 0;
      border: 1px solid black;
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
    }
    #rectangle {
      position: absolute;
      visibility: hidden;
      width: 100px;
      height: 100px;
      left: 100px;
      top: 75px;
      background: red;
      z-index: 1;
    }
    </style>
     
    <!-- animation -->
    <script>
        window.onload = function() {
     
        tl = new TimelineMax();
     
        tl.from(rectangle, 1, {autoAlpha:0, x:"-=300", ease:Back.easeOut}); 
    }
    </script>
     
    </head>
    <body>
    <div id="stage">
      <div id="rectangle"></div>
    </div>
    </body>
    </html>
    • Like 2

    Banner calculators for adwords

    in Banner Animation

    Posted

    Let`ts say I will only use mobile ads first: 300 x 250, 320 x 480, and 480 x 320

     

     

     

     

    You can start with HTML with CSS like this for e.g. 300x250 banner

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>My Banner</title>
    <meta name="ad.size" content="width=300,height=250">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <!-- layout -->
    <style>
    body {
      margin:0px;
    }
    #stage {
      position: absolute;
      width: 300px;
      height: 250px;
      left: 0;
      top: 0;
      border: 1px solid black;
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
    }
    </style>

     

    <!-- animation -->
    <script>
        window.onload = function() {
    }
    </script>

     

    </head>
    <body>
    <div id="stage"></div>
    </body>
    </html>
    • Like 3

    Animate CC vs hand coding

    in Banner Animation

    Posted

    Hand coding is not smart option for fast mass production of banner ads. Is it possible for one developer to prepare assets, hand code and prepare for specific ad server full set with 10 sizes for one 8-hour work day? With Edge Animate and Animate is possible.

    • Like 1

    "The ability to create new standalone image and HTML5 banner creatives will be removed on June 30." Huh?

    in Banner Animation

    Posted

    I think it is just renaming of product
     

    • Display creatives are non–rich media creatives that can use image or HTML5. Display creatives offer:

      • click tag reporting on individual exits
      • unlimited asset file size
      • polite loading

    • HTML5 banners are non–rich media creatives that use HTML5 and appear within set borders on a page. They have two advantages:

      • support on mobile devices and desktops
      • flexible dimensions

    • Rich media All other HTML5 creatives use rich media elements, so they must be created in Studio (e.g., display expanding or display interstitial creatives). You can get HTML5 rich media creatives from Studio and set them up in DCM. This includes rich media display banner HTML5 creatives, which use Rich Media elements. HTML5 banner creatives also render in-page, but they do not have rich media elements.

    Animate CC for Canvas export is out with improvements

    in Banner Animation

    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

    Animate Images or Divs?

    in GSAP

    Posted

    Is it better to animate images or divs? What is the best practice?

     

    When I use doubled retina ready images it is easiest for me to style images than div background images.

     

     

     

    Example of my HTML/CSS/GSAP code for e.g. banner ad 300x250 retina ready:

     
     
    <!DOCTYPE html>
    <html>
    <head>
     
    <!-- layout -->
     
    <style>
    body {
      margin:0px;
    }
    #stage {
      position: absolute;
      width: 300px;
      height: 250px;
      top: 0;
      left: 0;
      overflow: hidden;
      cursor: pointer;
    }
    #photo1 {
      position: absolute;
      width:100px;
      height: 100px;
      top: 10;
      left: 10px;
      z-index: 1;
    }
    #photo2 {
      position: absolute;
      width:100px;
      height: 100px;
      top: 50;
      left: 50px;
      z-index: 2;
    }
    </style>
     
    <!-- animation -->
    <script>
     window.onload = function() {
        
     var photo1 = document.getElementById("photo1");
     var photo2 = document.getElementById("photo2");
     
     tl = new TimelineMax();
     tl.from(photo1, .5, {x:"+=30", ease:Power1.easeOut});
     tl.from(photo2, .5, {x:"+=30", ease:Power1.easeOut}, "-=.5");
     
    }
    </script>
     
    </head>
    <body>
    <div id="stage">
    <img id="photo1" src="photo1.png"/>
    <img id="photo2" src="photo2.png"/>
    </div>
    <body>
    </html>


    photo1.png and photo1.png are doubled 200x200
    • Like 1

    Google DoubleClick and AdWords host GSAP on their CDN

    in Banner Animation

    Posted

    I've found that this is only true in the US and the UK, and some parts of Europe. I don't believe this was a full rollout across all regions, as I've been provided with similar looking docs pages that doesn't have the GSAP or CreateJS links.

     

    It will probably take some time before all regions are updated with the new validation code.

     

    Informations on english language are official for whole world. All other pages on other languages are not updated always on time.

3
4
5
Page 4 of 6  
×
×
  • Create New...