davi

Might just be the state of the industry, ad fraud, ad blocking, and possibly more of the budgets being allocated towards social / video. Might also be specific advertisers, I believe I read some advertisers were cutting budgets for them a while back unless the ad fraud thing got worked out (P&G, Unilever, etc). I don't think it's going away though, someone's gotta pay for the internet. Think Amazon's just getting in, so someone's gotta make them.

That's definitely easily editable. Thanks for sending that example. I'd like to be a tester when the Mac version comes out.

Sounds cool, wish I could review but I'm on a Mac. Let us know when a Mac version is out! My only concern (and it may not even be an issue), is that the app would be required to edit the file once it has already been created and the developer would need experience with using it. I saw the code editor portion but is the code it generates able to be easily edited without the app? File handoff and editing files at a later date is important and something that's more of a GSAP "helper" would be more useful to me than a standalone app that tries to do it own thing (think Adobe Edge, GWD, Hype, etc -- that aren't very easily edited outside of the app and generate their own mess of code). Is the code that it generates more of a standard GSAP workflow? (Think file setup like in this GSAP article, which uses timelines, master timelines, nesting etc etc). Outside of the GSAP library, does it have any other dependencies? If so, what are the file size of that? Are there other things that add to file size other than your obvious assets (fonts, images, etc)?

It likely has to do with the unique id in the default code in the html file. From 2017.1 - 2017.5, they introduced a unique number called "composition id" that gets created for each "new" FLA created. I put quotes over 'new' because if you copy the FLA file it still uses the same comp id (You have to create a new file from the menu up top to get a new unique comp id). In the JS file it exports out from a normal HTML canvas export, you'll see something like this > lib.properties = { id: '24565gh6788...blahblahblah'... This gets referenced in the default HTML that is exported out. Animate Commons probably doesn't have that included in it since that was created before that change was made by Adobe. You can probably get it to work by implementing that compID check in the file that gets exported.

Try this instead, adding the keyword this to replayBtn (this is if this code is in a FRAME script wherein the replayBtn is accessible within that frame number) > this.replayBtn.on("click", function() { til.invalidate().restart(); }); or if you're using the default HTML it exports, you should end up with a reference called exportRoot, which you can use if you can't figure out scope (just replace this with exportRoot and it should work). How scope works in Animate CC --> var til = "blah"; // Frame-level Scope this.til = "blah"; // Movieclip-level Scope til = "blah"; // Global Scope

My first thought was that DoubleClick might be automatically injecting code into your banner after you've delivered it that may have issues with your own code, so the actual trafficked ad is getting code added to it that you didn't create or QA. This is that typical code that gets injected (see below). You may have noticed this code if you've ever looked through the source of a banner ad online. You may want to ask if the actual trafficked ad had this code added or see if you can find one live and check the source and QA from there. Perhaps mobile is picking this up differently than desktop or there is some issue with that code and the template. <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>

Not sure about Pixi and Animate CC, it likely has to do with the setup and how both work with each other. Never crossed my mind to use the two together but I'll be looking into it. You could simulate that effect within Animate CC without having to use Pixi. It's not (currently) possible to natively animate the native filter effects in Animate CC since they've disabled that for performance reasons (see this link, Filter and Color Effects section). However, like that doc recommends, if you make a separate clip with the filter applied to the object, you can tween that clip overtop of the other clip (fading the blurred clip in and out), to simulate a blur effect. Sounds like the animated mask was a separate issue (it is possible, and easy, to do that with Animate CC using the timeline -- just make a keyframed mask layer with no tweening). As far as creating an animated mask via hand-coding with DOM elements, I guess you could use SVG for the mask and create a sequence of masked clips that you turn on and off. Otherwise, I don't think it's technically possible to do animated masks with actual DOM elements unless you're just using rectangles and square masks, you're back at using canvas at that point, and might be a fairly complex task to do if you're not familiar with it. it'd be cool to see some sort of library / plugin to make doing this specific task with canvas easy (cough cough). Agree that you should learn to hand-code too and make that part of your arsenal but don't throw away your timeline skills! There's a reason why apps like After Effects exists

The spec for animation that the IAB set has always been 15 seconds, not 30 seconds, and still is in the IAB's new specs (see page 17 under Animation). Autoplay video is still 15-seconds too (page 19). I'm, personally, glad this is a spec, and would actually prefer it to be much shorter, like 10-seconds. No one wants ads that continually use up resources or screams look at me. The link above and Ohem's links contain pretty much all best practices you should be using. The new specs aren't as wide spread yet but I'd imagine this will be changing quickly this year.

You're totally right! That was throwing me off for a sec. Happy hour at the desk not makin me think straight. Happy Friday!

I do them often, never had any issues. Typically a tune in time for shows or movies (i.e. "Starts tonight", "Starts tomorrow", starts on this date, etc. The only issue I really see with yours is getMonth starts at zero, not 1. So d.getMonth()+1 == 11, would be December, not November. Your fallback could be a something similar to what you have now but perhaps use a switch statement with a default case.

5 ain’t that many Your code isn’t really decrementing or incrementing in a predictable fashion. I mean you could change defaultEase and defaultOverwrite so you don’t have to write that again OR you can use a variable for that. You could use an array for the values and then a loop but that’s total overkill and a loop is going to be slower than just doing the 5 lines. I think what you’re doing is just fine TBH. You could also go random but looks like these are precise values you’re animating visually, not totally random.

Another option would be to actually create the DOM text elements instead of Animate CC dynamic text and control it along with other Animate CC objects, if need be (like if the text is nested in another container), via EaselJS's DOMElement class. In this case, the TextPlugin would work as normal (or should technically :). So basically create text div's in the same div as the canvas element and treat it as another layer in canvas.

Well, the most major change is the flexible ad sizing. There's no longer a unit that stays the same size, they'll all need to scale up or down now or at least be able to (Animate CC can do this easily though, just need to select responsive scaling). The main thing to take note of is the MIN and MAX sizing. It's not like we need to create a 100x100 ad that also needs to work at 1000x1000. The min and max sizing isn't that far off from each other, so you can probably just use assets that work at the largest size (or worst case, scale up and get slight blurriness). The only caveat with this is, of course, saying goodbye to pixel-perfect designs, and perfect antialiasing but as we move more towards devices with higher resolutions, this becomes less of an issue. The other one is how external libraries are counted. If it's on a CDN, only the first 50k does NOT get counted. After that you need to include it into the file size limit. However, file size limits have been bumped up quite a bit, so that's good news (just need to make sure TweenMax doesn't get too heavy, or make a TweenNano again *cough cough*) The other major change to take note of is the INITIAL and SUB-LOAD file size specs. They can be completely different between sizes and can be easily missed. So that needs to be factored into lowest common denominator and how you structure the ad to take that into account.

Add a wrapper to the asset, create a separate timeline for it. Basically, just nest it again.

Hi Code21, It's definitely going to be best and a lot easier for you to just spend a bit of time creating a CodePen so that we can help you with this, as other have said. Otherwise we're just looking at code without actually being able to see it. Use your own server, tinypic.com, cloudinary, or something else to host your images. Right off the bat I can tell that things are a bit messed up. There's a couple of brackets missing in the stayLit function (for the function and if statement), the variable "i" is getting incremented, so it will never get to -1, that code will never fire, it should probably be your number of loops not -1. You have quotes around your TweenMax id and duration in the tween inside of the stayLit function. Plus, it's autoAlpha not autoAplha. You should check if 'i' (the loop count), is at a certain point, and then execute the action you want when it's done doing the amount of loops you want. Now I haven't looked at others code above or even your code into too much depth but an easy option would be to go to a specific point in the timeline to stop at the end of the loops, (obviously fix the coding errors I mentioned above), and then just point your GSAP timeline to a specific point, like tl.progress(.95) or whatever the point should be.

I’m on my iPhone right now so it’s difficult to write out code or a lot of text. But looking at your code you can probably just fade out the whole banner at the end of the timeline since it fades in at the beginning. So just copy your first line for the banner, change the alpha to zero instead of one, and add a delay to the end like how you did with the other tweens.

Sounds like the main issue is that you're animating some parts with GSAP timeline code, and other parts manually with the AnimateCC timeline. So it depends on how all of the movieclips are setup and how they're animated. If they are nested movieclips, does the parent movieclip have more than one frame (i.e. is it on an animated Animate CC timeline with length / enough frames)? If so, and if your child movieclips don't have any interactivity, you could change the child movieclips to Graphics / Play Once, then it'll act and sync just like it's part of the parent movieclip's timeline (Animate CC timeline not GSAP's timeline). That would be an easy option but sounds like the parent movieclips are animations generated with GSAP code, not the Animate CC timeline. It sounds like the child moveclips are hand-animated Animate CC timeline animations since you're using gotoAndPlay and not adding to GSAP's timeline or a separate GSAP TimelineMax. If you were to use GSAP for those child animations, and then add them to the GSAP timeline, it would be controlled there easily -- if that makes sense. If your child mc's are hand-animated with Animate CC's timeline, another option would be to loop through each of the child instances whenever the timeline is paused, get their current frame, determine if they're animating (if the current frame is greater than zero but less than total frames (some simple logic like that), and if so, target them via this.childMovieClipInstanceName.stop(); ... or make them play again when it's resumed.

You'll see a flicker because it's not animating back to its initial state at zero alpha/opacity, before they fade in again on the loop. You need to add more tweens to fade each one back to zero alpha/opacity before looping.

There is a library you can use for 3D with CreateJS in AnimateCC called DepthJS: http://mbmedia.cc/depthjs/ And EaselJS does have a class called DOMElement where you can control a DOM element within AnimateCC > http://createjs.com/docs/easeljs/classes/DOMElement.html Here's an example someone made of that (you can see the difference between the DOM elements and canvas) > http://www.cs.vu.nl/~eliens/projects/multimedia/research/media/mobile-graphic-easel-examples-HtmlElements.htm However, that's probably overkill. Your best bet is to recreate it using AnimateCC graphics, movieclips, and JS and GSAP. If you do a search for Animate CC and DepthJS in the forums, I posted on a thread with an example using DepthJS in AnimateCC, works just fine. Basically, you're going to want to swap out any target that's a DOM-based element in the CodePen example, with a movieclip instance within AnimateCC. Then for any of the 3D-related props, use the DepthJS name instead. I think it's something similar too. You'll also need to set up the other DepthJS stuff too (you'll need to find my post regarding that).

Perhaps they're getting file size via GZip. Also, (i think) there's a difference in file systems between Mac and PC whereas one uses 1024 versus 1000 bytes per kb, which could also be causing the bump.

Now I haven't delved into this too deeply but it looks like the ads, which are out of view, are being throttled by the browser -- which is throwing everything off. I did check out your Animate CC file and looks like you're using a delay timer based on a createjs ticker event. Rather than use that code for your delay, replace it with this instead and let us know how it works out. // "exportRoot" is the main timeline. This variable is // set in your HTML. Same as your "tl" variable. I just // added it so you don't need to worry about scope. I // added an anonymous function for playing the timeline, // but feel free to add to the callback if you want. // Add this code to the first frame in your Actions layer. exportRoot.pause = function(dur, mc){ mc.stop(); setTimeout(function(){ mc.play(); }, dur * 1000); }; // Then, whenever you need to pause the timeline, // add this code to those other keyframes, replacing // all of that ticker-based code > exportRoot.pause(3, this); I just wanted to add in, your problem is likely occurring because you're using mostly code for animation, which is great, but then you're using the Animate CC timeline to advance frames and content within the FLA (not code-based). You're mixing code-based and Animate CC animation timeline-based animation. If it's getting throttled, your code versus the Animate CC timeline syncing will be off -- reason why some of those animations aren't doing what they're supposed to be doing. So if the code above doesn't work, trying getting rid of all of those other frames in the Animate CC timeline and have everything in one frame and then adjust your code accodingly.

Scope issue likely. Easiest to add this to the main timeline's code and traverse clips starting from there from wherever you are > var root = this; then something like> buttonOver(root.myButtonParentContainer.myButtonChildExample);

Just use regular Animate actions. So make your mask animation inside of a movieclip and give it an instance name (i.e. "myClip_mc"), add a stop action in frame 1 inside that movieclip > this.stop(); then add a frame label to frame #2 and call it something like "in". This is where your mask animation starts but it's waiting idly for you to tell it to start playing. Then somewhere else (wherever it should be) just call this.myClip_mc.gotoAndPlay("in"); Obviously, the path to which you target the clip will change based on your own file. You can add the script to Animate's timeline or attach it to one of GSAP's events like onStart, onComplete, etc etc.

It's possible but it's a pain in the butt and probably overkill. I wrote the code for it on some other thread for Animate CC. Hopefully Adobe changes this. It'll be easiest to animate it manually, and then trigger it via script when you want to have it happen.

Wrong post edit!