davi

ShockinglyGreen
  • Content count

    67
  • Joined

  • Last visited

Community Reputation

68 Contributor

About davi

  • Rank
    Davi-T

Contact Methods

Profile Information

  • Gender
    Male

Recent Profile Visitors

2,484 profile views
  1. 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.
  2. 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
  3. 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>
  4. Getting a blur effect in Animate CC

    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
  5. Google doesn't allow longer than 30 seconds?

    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.
  6. Timer with GSAP

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

    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.
  8. Simplify a lot of similar movement...

    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.
  9. GSAP TextPlugin for Animate cc 2017

    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.
  10. IAB New Standard

    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.
  11. multiple yoyo mc in a timeline

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

    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.
  13. Looping Animation

    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.
  14. 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.
  15. Looping Animation

    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.