Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

davi

ShockinglyGreen
  • Posts

    113
  • Joined

  • Last visited

Everything posted by davi

  1. 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.
  2. 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
  3. 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 😘
  4. 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).
  5. 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
  6. +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!
  7. 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.
  8. 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.
  9. ^ 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.
  10. 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.
  11. Another update for this thread in case people come back here. GSAP DevTools will trigger a DCM Validator error. It's related to storageSession ... or ... comes up as a malformed SVG asset (perhaps one of the graphics in DevTools is missing one of the silly things mentioned in other places in this thread, like self-closing tags or declarations). I typically comment out DevTools on final packaging of files, but accidentally didn't and found this error. I'd imagine some folks are going to come across it. Anywho, more documentation...
  12. Try using Google's CDN instead > <script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script> ...and if that doesn't work, you can always embed the createjs library into the HTML (just copy and paste all of the javascript code from that link into its own <script> tag.
  13. Now I haven't delved too much into your code but by looking at the animation, you probably need to restart the clips (two/twob rollover + rollout), plus have a way to determine if either animation has finished, otherwise you'd run into an issue if you rollover/rollout before the animation completes and having it jump back to the beginning of the state and playing from there. Since it looks like it's just going back to the default state, a better option for two may just be to play the timelines in reverse or yoyo.
  14. I've noticed this too. Perhaps their validation tool, HTML5 Validator, has a list of accepted CDN links and the new GSAP CDN needs to be added to the list in that tool. They need to add the new CreateJS as well. Anyone gotta connection?
  15. Used to be both years back, depending on what site's allowed. Then gradually became more start collapsed, and then expand on click. Probably because of it messing with user experience, and ended up being more of a on user-interaction approach instead. I rarely even see expandable ads nowadays.
  16. Verizon didn't create that format, the 970x250 is just a standard billboard ad, part of the IAB fixed unit portfolio. Most campaigns I take on have that unit included. I believe the collapsible ad you see is an older format (at least I can remember those years back on YouTube). Yeah, just make the ad 970x250 that doesn't expand/collapse.
  17. It's your version of CreateJS, likely nothing to do with GSAP. Animate2020 will export using version 1.1 but older versions use the version from Nov 26, 2015.
  18. Run a quick test for us: - Go into your published JS file that it exports. Do a search for "StageGL". It should appear more towards the bottom of the file in bootstrap callbacks section. - Change to "new createjs.Stage()" rather than "new createjs.StageGL". Then let us know what happens.
  19. Didn't work for me. Tried Safari and Chrome, using GSAP-based banners and an Animate CC-based banner. After uploading, I just get a blank screen with the banner title in red. Sometimes "Undefined variable: y_axis" appears, not sure what that is (I searched all of the code in the banner and that's not even in there). I also got "Illegal string ''offset 'images'" on one of the ads I uploaded to test with. Opening the config file that appears just shows curly brackets. Sounds promising, and love the idea of the single HTML page if it actually does create a smaller file than manually optimizing – although I don't think I'd send a client a purple and pink preview page Kinda like AdPiler > https://adpiler.com/features/
  20. Yeah, this is how banners that have movie or show times are created, "tune in" dates (i.e. Show date, out tomorrow, out today, etc). Use the JavaScript Date object > https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/ Depending on your needs, it can be simple or a bit more complex. Typically, with movie or show banners, you just use 3 scenarios or outcomes > Coming out today, tomorrow, or XX days until it reaches tomorrow. Obviously, if you're putting a real countdown where the time is constantly changing or it's giving an actual amount of days or minutes until showtime, it gets a bit more complex.
  21. I know this is an old thread but just wanted to add in another solution just in case someone else is running into this issue and none of the above solutions work out. For me, it was the "<use>" tag. Removing it got rid of the error. (I ended up recreating the SVG so it doesn't need that tag).
  22. I know this is an old thread but just wanted to add in another solution just in case someone else is running into this issue and none of the above solutions work out. For me, it was the "<use>" tag. Removing it got rid of the error. (I ended up recreating the SVG so it doesn't need that tag).
  23. It's definitely a super heavy effect, I wouldn't use it on anything at this time (stuff like this makes me miss Flash ? I'm on an iMacPro and I can tell it runs chunky and that's even with small things. Not quite ready to use these types of animated effects just yet. Here's a quick snippet to test it out > function blurFromTo(_element, _start, _end, _duration, _ease, _delay) { _element._blur = {}; _element._blur.amount = _start; TweenMax.set(_element, { webkitFilter: "blur(" + _start + "px)", filter: "blur(" + _start + "px)" }); TweenMax.to(_element._blur, _duration, { amount:_end, onUpdate: function() { TweenMax.set(_element, { webkitFilter: "blur(" + _element._blur.amount + "px)", filter: "blur(" + _element._blur.amount + "px)" }); }, ease:_ease, delay:_delay }); } Google has a solution (and I do something similar in Animate CC), where they take a few blurred instances at different blur levels and fade them into each other over time. You can probably easily modify this to use GSAP as well. Still not a great solution but probably best case as of right now. https://developers.google.com/web/updates/2017/10/animated-blur https://github.com/GoogleChromeLabs/ui-element-samples/tree/gh-pages/animated-blur
  24. I've had issues where you apply an SVG blur filter and try to tween the filter values as well as an issue if you were to then slide the element across the screen (this was a while back or so). From what I remember, some browsers were creating a "trailing" effect, leaving behind the remnants of that trail in the path that it took that stayed there after the tween too (Some browsers did it, other didn't). Think of it looking similar to onion-skinning. I was attempting to create motion blur effects at the time. It worked but had that garbage on some browsers (and didn't perform so great on some devices). Not sure if the same issue appears if you don't try to tween the filter values, try to slide it, or if you keep it static. Might be fine if you create a duplicate version of the element with blur and just fading that in and out overtop of a static version without the blur – rather than trying to tween the blur filter itself.
×