geedix

Animate exports to canvas, which is just a bunch of pixels that can't be read by screen readers. It seems like a good idea to add fallback text and Aria attributes in the html. You might also use javascript to add keyboard access to interactive elements. I spent ten years building banners, and never heard a peep about accessibility. Glad to hear it's becoming a consideration. Anyone using a screen reader is probably using an ad blocker too, but you might as well add some text so they can read it if they want to. I don't imagine that ads (served in iFrames) would prevent a site from being ADA compliant, since they come from a different domain.

It depends on what the logo element is made of, but assuming it's SVG, you can target the fill of the path like fill: "#0000ff" https://codepen.io/geedix/pen/poPXKYP

Don't cry over spilt text! If you're using static text in Animate, you can go modify - break apart, then Modify - Timeline - Distribute to layers. With each letter on its own layer, you can do timeline animation, under a motion guide or whatever you need, with each letter being independent. Or, you could turn a string into an array of letters with javascript, then move them around with gsap, if you're more clever than I am right this morning.

That's working, thanks! Spaces can be better than commas in an SVG path? I would never have guessed it.

My codepen is copied from a bigger animation where other motion paths are working as expected. I've tried redrawing the paths for this one, but the "corner" element still doesn't align to its motion path without the offsets. Is it trying to wrap around to the left? Mystified as to why I need offsetX: 1545, offsetY:-112

Ah, so it's a Firefox thing! I've had this happen occassionally -- I go back and forth between Chrome and FF.

XD doesn't have html export, but it's good for SVG, and for prototyping animation. It has paid plugins to export html, but code I've seen from those looks too bloated for me. We did some banners that used dynamic html text in a div on top of canvas animation done in Animate. There should be an easier way to keep text consistently crisp with Animate, but I haven't tried it lately

I like Figma, Sketch or XD more than Photoshop for laying out banners and animations, but it's not a huge difference; you have to get your assets organized somewhere. I try to export everything aligned at 0,0. Keep transparent pngs at full banner dimensions (200% for crispness), logo, text, whatever -- the blank space doesn't add file size. GWD is popular for wysiwyg banners. I had to use it on a couple of inherited projects and I didn't like it, but maybe that's just me. Adobe Animate with canvas export is still used a lot, and could be your best option if you're doing intricate masks or animation that's best worked out on a timeline. Keep bitmap assets at 2x size in your Animate file (with more compression) and they'll be sharp on hi dpi screens.

GSAP in Animate works like it did in Flash. Just avoid moving an object with GSAP and the timeline at once. You've got a createjs.Ticker in there that can clash with gsap.ticker if you aren't clear about which one you want to be in control of your animation.

Ah well, "maybe try" anyway! 😅. @aaronmaxdesign's gsap.pauseAll() is not a thing either, right? pauseAll() worked in TweenMax to target a timeline or tween, but pause() is what works with gsap3. Here's a pen using pause() for an ISI in a banner. https://codepen.io/geedix/pen/XWMLJBQ

There are lots of ways to auto-scroll an isi. It sounds like you were close with a gsap solution. I think pauseAll() is a v2 method, maybe try gsap.pause()?

Hi, here are two - https://jbradleyjohnson.net/work/hemlibra300x600/index.html and https://jbradleyjohnson.net/work/ocrev300x600_seemore/index.html

When I built pharma banners, if they were done with Animate I avoided gsap, and used create.js tweens instead, since that's what Animate is already loading. The scrolling ISI would be html, in its own div, above the canvas. Ideally that would use system fonts, but more often, we had to have brand fonts with specific weights and sizes determined not by the design team, but by the legal department. So we would make the text an image. Are you trying to animate the isi scroller?

I did banners for a long time, starting with Flash and continuing into the HTML5 days. I would say, "I can't build these without specs" and the project manager would find an outdated spec sheet for me. Most likely, your ads will run on Google. Could also be Sizmek, or Flashtalking, or site-served if it's a special placement. Not huge differences, aside from where you download libraries, and maybe different click tags. Sizmek might have changed after Amazon bought them. good luck!

This is an interesting topic for me too. I think the idea is that as long as your library is coming from the same CDN as the rest of your ad, then it's likely to already be cached on most clients. Due to "cache partitioning" on some browsers, there's no caching benefit from other domains, so you wouldn't be able to load from cdnjs or whatever without downloading a fresh instance every time. You should be getting specs from the publishers that you're building your banners for, that will give you file size limits and 3rd party library rules.