ohem

February 22, 2017

When I paste text from Illustrator into Animate, it still ends up being "static text" in Animate, but it sounds like for you it's being converted to "dynamic text". Are you able to convert it back to static text within Animate?

If it's a logo, you could also create outlines in Illustrator first, to be sure that it maintains the exact same appearance in Animate.

Not sure why you're experiencing a different behavior than I am though; you can also report bugs to Adobe here: http://www.adobe.com/products/wishform.html

February 13, 2017

Edge is no longer being developed by Adobe. If you're just starting out, it would be best not to invest time learning an outdated program.

February 11, 2017

Like, an actual functional calculator? You can Google "Javascript calculator" or check Codepen for examples:

See the Pen by search (@search) on CodePen

January 31, 2017

Edit: see my other post above.

January 31, 2017

Both are using custom events. And DoubleClick allows 200kb instantly loaded and additionally 300kb politely loaded as recommended by the IAB:

https://www.iab.com/guidelines/rich-media-guidance/

That's for DoubleClick Rich Media, not DCM (DoubleClick Campaign Manager). DCM is for standard banners only, and has a hard file size limit of 200k.

Seems like you already have the information you need for how to set up polite loading (not just pre-loading) for either DoubleClick Rich Media (using the enabler) or DCM.

This thread was originally asking about polite loading not specific to any platform, which is why the initial answers didn't have a way to communicate with the parent window when an ad is live, since that ability would be dependent on the ad platform used.

January 30, 2017

It's normal for sprite sheets to fail locally (mainly in Chrome) due to browser security settings. Does it work when you preview directly from Animate using Test Movie (Ctrl+Enter on a PC or Command+Return on a Mac) or if you upload to your own server?

Same issue discussed here: https://forums.adobe.com/thread/2070547

January 28, 2017

Hi,

I am a little bit confused why those two snippets are "polite loading". The window.onload and DOMContentReady events refer to the ads iframe not to the parent window. So it is not sure if the parent window is completely loaded.

So there have to be communication between the parent window and the ad iframe to be sure. Seems to be the reason why Doubleclick calls a custom event:

https://support.google.com/richmedia/answer/2672514

And I've read here in the forums that this is not possible in DCM. But this is a help page for DCM, isn't it?

Could someone enlighten me, please? This industry is so damn confusing...

That's a help page for DoubleClick Rich Media.

With DCM, you don't need to do anything special in your HTML or JS file to add a polite load. A polite load image can be uploaded/specified during trafficking, and DCM will display it until the parent window is fully loaded.

https://support.google.com/richmedia/answer/6279526?hl=en

Polite load file

Upload a polite load image so that you have something to show if there are delays loading your primary HTML5 asset in a browser.

When your creative is delivered, the polite load asset loads first before each impression, followed by your primary asset. This way, if the user's browser experiences a delay loading your primary asset, the polite load image will be there until everything else finishes loading. We recommend that your polite load asset matches the first frame of your asset so users don’t experience any interruption between the two assets loading.

File type: Add an image file that is under 40 KB. It can be the same asset as your backup image. If you upload multiple image files, choose the one you want in the Polite load file menu.
Dimensions: The polite load image dimensions should match your backup image dimensions. (This means they will also match any non-flexible HTML5 dimensions.)

January 23, 2017

Have you tried asking on the Adobe forums? https://forums.adobe.com/community/edge_animate

January 18, 2017

Try adding a slight rotation to the tween. This is a common issue: https://greensock.com/forums/topic/12760-animation-slowjerky-not-smooth-in-firefox/

January 17, 2017

Unless that banner was posted on Codepen or somewhere open source, you shouldn't take other people's work for real world projects. If you do, you may be violating copyright, plus it's not really an ethical thing to do.

It's totally fine to learn from other people's files, but not to take/use/profit from them without permission.

In terms of downsizing though, the example you posted is all vector & super lightweight; something similar to that shouldn't be an issue to traffic through Adwords.

January 6, 2017

I usually use Animate CC because it's a faster workflow for me; especially, like Davi said, when it comes to fonts, masks, and QA; and also when it comes to positioning things. The ability to import custom HTML templates has also expedited my workflow.

In some situations, if I need to use SVG or 3D transforms, or if I can use Google Fonts, or if it's such a simple banner that it doesn't make sense to load the whole CreateJS library, I do hand code with HTML/CSS/GSAP. I probably use Animate 85% of the time though.

January 4, 2017

This example by Diaco is also helpful:

See the Pen MYdwRP by MAW (@MAW) on CodePen

January 3, 2017

Hi guys!

I used After Effects to create the animation and export everything. I'm being told I need a .gif file that's under less than 150k for Google Display Network.

I have no experience with HTML or those other formats. I attached the .gif below that I'm trying to bring down.

If you have to do an animated gif and not HTML5, you would need to simplify.

Try reducing the frame rate in After Effects, so you have less total frames.

January 3, 2017

Hi there,

I'm an animator tasked with taking an animation I made awhile back and converting it to a banner ad. I made the .movs and .gifs but the smallest I know how to make the animations are 500kb and I need them to be 150k max for GDN.

Does anyone have any suggestions for how to bring down these files? I've never made banner ads for the web before so am quite ignorant on the process. Do I need have this thing built in a different program? Is my animation too complicated for a banner ad?

If you can't do a Rich Media banner and use your actual video footage, you will need to recreate your animation to meet standard specs.

If you don't know how to code, you can use Adobe Animate (formerly Flash Pro) to do timeline animation. (HTML5 Canvas has been supported in Flash since the release of Created Cloud.)

The other alternative would be just doing a static banner.

December 21, 2016

Have you tried getting rid of the blur filters? I know animating filters can often cause lag.

December 21, 2016

Can anyone provide an example .fla for the mask antialiasing issue fix for Chrome? I followed the instructions here https://forums.adobe.com/thread/1921367, but the image being masked just disappears. Thanks.

Is it just me, or do canvas masks look fine in Chrome now?

I remember they used to look terrible & jagged in Chrome for the longest time, but I'm not seeing that issue in Chrome 55 on my Mac. Not sure when it was fixed but this is great!

November 15, 2016

As far as I know DCM is able to change this on the fly, probably using some RegEx check or it just re-assigns the global variable

All you really need to do is give the banner
var clickTag = 'https://www.google.com';
And the DCM system does the rest.

I was curious how they do it, so I viewed the source code of one of my live DCM ads when I saw it in the wild. When the ads get trafficked, this automatically gets injected into the head of the banners:

<script type="text/javascript">
    
      (function() {
        var relegateNavigation = '';
        var handleClickTagMessage = function(e) {
          try {
            var eventData = JSON.parse(e.data);
          } catch (err) {
            return;
          }
          if (eventData.isInitClickTag) {
            if (eventData.clickTags) {
              for (var i = 0; i < eventData.clickTags.length; i++) {
                var clkTag = eventData.clickTags[i];
                window[clkTag.name] = clkTag.url;
              }
            } else if (eventData.clickTag) {
              window.clickTag = eventData.clickTag;
            }
            relegateNavigation = eventData.relegateNavigation;
          }
        };

        if (open.call) {
          window.open = function(open) {
            return function(url, name, features) {
              if (relegateNavigation === 'parent') {
                var message = {'clickTag': url, 'isPostClickTag': true};
                parent.postMessage(JSON.stringify(message), '*');
              } else {
                var args = [url, name];
                if (features) {
                  args.push(features);
                }
                open.apply(window, args);
              }
            };
          }(window.open);
        }

        if (window.addEventListener) {
          window.addEventListener(
              'message', handleClickTagMessage, false);
        } else {
          window.attachEvent('onmessage', handleClickTagMessage);
        }
      })();
    
  </script>

November 15, 2016

Thanks @joe_midi That's super helpful.

I guess that means though that there's no one-size fits-all HTML5 clickTag script that you use -- meaning you'd have to know whether it was flighting via DCM or DC Studio?

You do need to know how your ads will be served to set them up properly, but if they're not rich media, there's no reason to use studio.

November 15, 2016

Unless you need Rich Media (expandable, dynamic, floating, video), you are probably building for DCM rather than DCRM (Studio).

so it is

<script type="text/javascript">var clickTag = "https://www.google.com";</script>

And

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

Yeah, this is all that's needed.

It's what they recommend in their support docs, and the clickthrough URL is updated during trafficking which is standard for any ad server. https://support.google.com/richmedia/answer/6279525?hl=en

Sample click tag using JavaScript

Here's an example of a click tag inserted in an HTML document:

<html><head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[The rest of your creative code goes here.] </html>

Make sure your creative uses the click tag variable as the clickthrough URL:

<a href="javascript:window.open(window.clickTag)"><img src="images/dclk.png" border=0>
</a>

Sample with multiple click tags using JavaScript

Display creatives support multiple click tags. Here's an example of multiple click tags inserted in an HTML document:

<html><head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type="text/javascript">
  var clickTag = "https://www.google.com";
  var clickTag1 = "https://www.doubleclickbygoogle.com";
  var clickTag2 = "https://www.google.com/doubleclick/studio";
</script>
</head>
[The rest of your creative code goes here.] </html>

Make sure your creative uses the appropriate click tag variable as the clickthrough URL:

<a href="javascript:window.open(window.clickTag)"><img src="images/dclk.png" border=0>
</a>
<a href="javascript:window.open(window.clickTag1)">
<img src="images/dclk.png" border=0>
</a>
<a href="javascript:window.open(window.clickTag2)">
<img src="images/dclk.png" border=0>
</a> 

November 15, 2016

I recently came across this site: https://vendordb.com/ but I haven't used it myself.

November 10, 2016

I don't use GWD, but this might help you with implementing a rollover state: https://support.google.com/webdesigner/answer/6179124?hl=en

November 10, 2016

Every time I use a filter for drop-shadow, the drop shadow 'strenght' is 100%, even though I change it to like 5%. It's totally useless...

I really don't get it.

In HTML5 Canvas documents, there is less control over the filters than there was with ActionScript.

I also see that changing the strength doesn't work, however one workaround is that you can change the alpha when setting the color of your shadow. You can also adjust the blurriness.

Alternately, for what you want to do with a simple button, you could just make a dark rectangle on a layer behind your button, and use a blur filter on that to get a similar effect.

November 10, 2016

Box shadow is a CSS property which will not work in canvas.

In Animate CC, you can use a filter: https://helpx.adobe.com/animate/using/graphic-filters.html

October 26, 2016

The default code from Sizmek is this by the way:

var adDiv;

function initEB() {
    if (!EB.isInitialized()) {
        EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
    } else {
        startAd();
    }
}

function startAd() {
    adDiv = document.getElementById("ad");

    addEventListeners();
}

function addEventListeners() {
    document.getElementById("clickthrough-button").addEventListener("click", clickthrough);
}

function clickthrough() {
    EB.clickthrough();
}

window.addEventListener("load", initEB);

(The template you're using didn't come directly from Sizmek and the visibility styling isn't required or part of their API.)

October 26, 2016

Interesting. I always just do a simple window.onload to start my timeline & make my content visible (separate from the EB init code) and have no issues viewing in an iFrame when it's set up like that.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by ohem