Jump to content


  • Posts

  • Joined

  • Last visited

About davi

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

5,661 profile views
  1. Hah, actually just smacked myself in the head about this when recreating this dynamically via registerEffect – and then your post pops up. Always something sitting right in front of you. Appreciate you taking a look!
  2. Latest version of GSAP (3.11.3) doesn't seem to want to animate mask-position. Here's a couple demos showing the issue. All that it is is a gradient wipe effect revealing the text from left to right. 1) Uses the exact same code, except uses the latest version of GSAP (3.11.3) 2) Uses an older version of GSAP (3.5.1) – works as intended. Can we get a fix pretty please? 😊 https://codepen.io/Davi-T/pen/GRdaVeY https://codepen.io/Davi-T/pen/vYjwoqa
  3. SVG via... Using a black and white image. There was a tool called Zorro SVG a while back that created it for you, not sure if it's still around somewhere. Here's something similar. This can sometimes get file size lower but depends on how busy the B/W image is and how well it compresses > https://codepen.io/shshaw/pen/jOemzQ https://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/ Or use a vector mask, something drawn in illy (see SVG mask for HTML elements). This will typically generate a smaller file size than most options > https://codepen.io/yoksel/pen/GRodvp There's css mask too, depends on how much support you're comfortable with. The client is still using IE half the time though > https://developer.mozilla.org/en-US/docs/Web/CSS/mask Not sure about DCM WebP support, but perhaps try uploading a test zip sample into their ad validator to see if you get an error or not. The fine folks over at Neo Pangea, always doing good stuff. I think we worked together like 20 years ago at AtmoBBDO
  4. New version of CreateJS came out then, so you need to specify the updated CDN link in your head. OLD to replace: <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> NEW: <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> Or via Google's CDN > <script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script> Once updated, should work fine.
  5. Well, as mentioned, you can't use it because it's being exported as part of the JS file (which will get overwritten every time you republish) and the pRatio variable is private. So basically you want to create your own function for that somewhere else instead. (Yes, total hack 🤣) In your template HTML file, just make a duplicate of that entire makeResponsive function from the exported JS file and put it somewhere else so it's not part of the exported JS file. For example, add it to the script tag in the template HTML file instead. Then in the handleComplete function, just change "AdobeAn.makeResponsive..." to "makeResponsive...". Then modify the makeResponsive function to your liking. Perhaps add an option like "defaultToHighDPI" where it determines if pRatio is checked against the device OR set manually to 2 (always render as HiDPI / Retina). Also, you'd need to access some of the items in the function you copied differently, since it'll be in a different scope. For example: "lib.properties.width" won't work. You'll need to access that from the template HTML file by using this instead : AdobeAn.getComposition(Object.keys(AdobeAn.compositions)[0]).getLibrary().properties.width
  6. Design Workflow: I still use Photoshop and still think it's best in the long run IMO. I've used Sketch/Figma which is great for the vector stuff, up until you need to deal with imagery (cropping, editing, and optimizing). For example, one of the tricks I do is adding a bit of Smart Blur to detailed images with textures to lower file size without any noticeable difference (only Photoshop can do that). Or, if I'm chopping up a character's parts in order to create a rig and animate, where I need to "fill in" overlapping part areas (again Photoshop). I still really like the legacy 'Save for Web' too, I just find the interface handy, the fine-tuned control you get, and I love the large preview. You can still export SVG out of Photoshop, including text. You can copy and paste CSS out of Photoshop as well, which comes in super handy (you can't use everything that it copies, but a lot of it is super helpful). Most people don't realize this. Re: Adobe Animate Blurry Text– Blurry Adobe Animate text on non-Retina is an easy fix: It's likely because of the font and how it's sitting on floating point positions (i.e. x=20.2 rather than x=20), or actually needs to sit on half-pixels (x=20.5). Some fonts (typically the more curvy ones) render better on the half-pixel, whereas others render better on whole pixels. Sometimes you need to tweak the height by half-pixel so both sides sit on the correct pixel (this is more of a font issue than Animate). Adjusting the positioning of your text typically works 95% of the time but again, depending on the font, it might not. The next solution (which will make your non-Retina banner look crisp like Retina) involves the canvas element, stage, and the code Adobe Animate exports out. I don't use the banner code Adobe Animate exports by default, personally, but you can modify the code in your HTML file manually to see the results. Inside of the JS it exports is a function called "makeResponsive" which is WAAAAY down at the bottom of the JS file. This "makeResponsive" function is being called in your HTML file. What it's doing is basically checking for pixel density and then determining how to go about creating the stage. On Retina displays, it's making a stage twice as large and scaling it down. On non-Retina it's not and making it the actual size (by default). What you need to change is the "pRatio" value in the makeResponsive function (it's for pixel Ratio). If you set that to 2 (rather than window.devicePixelRatio || 1), it'll treat it like a Retina display. However, if you republish the file it'll set it back to the way it was – obviously a problem. Right now all that stuff is in the exported JS file and that variable is private. So you need to figure out a way to change that on your end (either make your own export template or copy and paste that function into a new place and call it there rather than call Adobe's version). However, that also comes with its own set of caveats. There's probably a reason why it doesn't do that by default. There's likely some performance implications with doing so, and having to render a stage twice as large. If you're doing complex animation and using the timeline, probably best not to do that or at the very least, test it. But if you're using GSAP inside of Animate, you probably have a much better shot at it performing just fine Dynamic Text @Geedix: You can layer DOM text over the canvas (probably the best option) but you can also create dynamic text right inside of Animate. You load the font file the same way as if you were hand-coding it via font-face. Then you use CreateJS / EaselJS's method of creating text via code inside of Animate. (It's similar to dynamic text in the old Flash, so all of the drawbacks from back then, such as slowly moving dynamic text across pixels makes it a bit jittery, but there's a workaround for just about everything). From there, you can control it and animate it using GSAP 😘
  7. Like Jack said, nesting elements within another element, or an animation within another animation. Take, for example, the first guy that appears with the blue shirt and tie. His entire right arm is a group which is animating slightly (the entire arm is rotating slightly to the right as you scroll). Within that entire arm group, there are two separate elements: one for his bicep/top part of his arm and another for his forearm/lower part of his arm. It's "transform origin" (aka anchor point or point at which it rotates) for the entire arm, is likely near the top of the shoulder. Then within that animation is a separate animation of his forearm rotating even more at the same time as the entire arm is moving. The transform origin for that forearm is likely near the elbow. So essentially it's two parts, connected to each other (by nesting), that are doing two separate rotational animations. It's known as "character rigging". Many animation apps have this but it's essentially the same idea within HTML (except a lot more tedious to setup).
  8. Unless you're a time traveler, GSAP5 ain't out yet 😁 Doesn't have GSAP in it and not sure how up-to-date this is since Amazon acquired them, but worth a shot > https://support.sizmek.com/hc/en-us/articles/360031337971-HTML5-Standard-Banner-Ad-in-Sizmek-Ad-Suite Zip template direct download > https://services.serving-sys.com/sizmek/showcase/downloads/formats/base/html5_standard_banner_1_0_3.zip Then just add GSAP via a script tag, and then add GSAP animation code to the startAd function in the template. Sizmek GSAP CDN is listed here under 3rd Party > https://support.sizmek.com/hc/en-us/articles/360028287412-Sizmek-Ad-Suite-Ad-Serving-Shared-Libraries
  9. +1 on Geedix's note. Also, another trick when doing geedix's method, which I run into often: Sometimes when you scale a 2x image down in Adobe Animate to 50%, sometimes the sharp edges within the image content itself will get slightly softened / antialiased – which isn't intended at times. First, set the image within whatever container it is in (if it's in one) to have whole number X/Y positions (x:0, y:0 ... not x:0.3, y:0.95). Same with the container. Then re-export and check if the edges are softened on portions of the image that aren't supposed to be softened. The trick to getting it to have sharp edges again is to either shift on the half-pixel (0.5) or whole pixel on X or Y which will make the edges nice and crisp. Also also: GSAP in Animate is great, if you aren't already using it in there!
  10. Initial load: Generally means anything loaded up in the HEAD tag (CSS or JS files, etc), your HTML code in the BODY and images there, etc. Stuff that gets loaded immediately BEFORE the page displays / before the Window load event. Subload: Would be anything that gets loaded after that / AFTER the Window load event. So if you call a JS file at the end of the bottom of your HTML, and those subsequently load in image files – that's being subloaded in. When you hear subload load or "polite" load, the idea is that sites don't want there to be a hang up for stuff to appear for the user (after all, the user is visiting the webpage to see the site's content, not your banner ad :) So you have an initial load which is smaller in file size as to not slow up everything else on the webpage that's being loaded in (i.e. the website's actual content). Once the site's content gets loaded and gets priority loading, then you load in the heavier ad assets – hence the term "polite". The code you supplied doesn't really mean much to the initial/subload spec, that's just for starting the animation once stuff is loaded and the actual animation code. It's WHERE and HOW you're adding in those assets to the webpage that pertains to initial/subload, which can be either in HTML, CSS, or JS. So, for example, you could create HTML tag placeholders for your content (DIV's, buttons, etc), and then on page load, load a file that fills those tags with actual content and does stuff to it (load in images, animation code, etc) –– that would be considered subloading content. If all of your imagery is being added using DIV tags and CSS backgrounds via a CSS file loaded in the HEAD tag, as an example, or you're linking to images using an IMG tag, then all that stuff is being included in the INITIAL load. One alternative to that would be to load in those image assets via JavaScript when the window load event gets fired, and then adding them into their appropriate HTML containers once they've downloaded. To maximize file size spec and utilize all 500k that you can get (if you REALLY need all that file size), might be to load some images into that initial 200k within the initial load and then hide them until you are ready to use them. Then just load all the other assets into the subload @300kb (with via CSS or JS). Then once those are loaded start playing things back.
  11. Also, of note, that the 150kb max is determined after zipping up assets. However, if it's being site-served, and they don't allow external CDN's or have their own for GSAP, you may have to include GSAP. Also, I'm only seeing several images being used, and if optimized properly, should easily fit into 150k. If using PNG, make sure to run them through something like ImageOptim and ImageAlpha.
  12. ^ That is fantastic @gerbrandpetersen. Just pinged them to ask about pricing. That'd be a great alternative for Google Ad Validator as well, which is being deprecated soon.
  13. We won't be able to accurately help you without seeing an example or have those files to see what's going on. Whatever is happening is likely causing the AdHelper "onSlow" event to trigger, and in return, triggering your fallback, which you have specified as showing a backup image with the alt text "Adobe Animate CC". My guess (without seeing the files), is that you're incorrectly looping somehow, and causing some sort of error which is being constantly looped through (and subsequently causing slowdown triggering the AdHelper event). FYI, frame numbers within Animate CC start at 0 and not 1. So if you're specifying to go back to the first frame, use 0 instead (or use 1 if you really want to loop back to the 2nd frame). But be careful you're not looping back to a frame that has a bunch of code in it – and executing all of that code again.