davi

I know the browser makers were lowering the frame rate for Flash banners when they weren't in view anymore. Think they started doing this a couple years back. Wonder if they did the same thing for HTML5 banners. I noticed this too when switching between tabs that my one banner will essentially pause itself (or have like a 1FPS frame rate) when not in view.

First, make sure the text is on whole pixel positional values and that the text isn't being scaled. Then make sure you're dealing with Retina display correctly, like others have said. And finally, if that doesn't work... What I do sometimes (and it doesn't work with every font and isn't always the ideal situation), is to break the text apart and then expand the shape by 0.1 - 0.2 pixels or whatever (Select shape > Modify > Shape > Expand or something like that). Sometimes the edges of the text will sit on half-pixels, even if the text's position is on whole values or it's just slightly too thin, and this causes the text's shape to anti-aliase and be blurry. By expanding it, you get it closer to sitting on even pixels. Now when you say 'fuzzy', this can also be caused by adding a filter or some type of effect that rasterizes the text. In this case, sometimes the trick is to actually sit it on half-pixels rather than whole pixels. (This trick also works with using hand-coding, SVG, or fonts/CSS and translate)

I think I've read you need to include the CreateJS library with the package, not use externally-hosted JS file (ie. not from a CDN, but local file).

There was a guy building something like this a year ago or so, was in Beta at the time. A whole preview thing specifically for banners, almost identical to what you're thinking but it was pretty much fleshed out. I was giving him feedback on his app but haven't seen an update since. Was called Banner Monkey or something like that (you may have to Google it). Like Dipscom said, most agencies keep it simple. Build it wherever you want, zip it up and send it over. Personally, I think a Preview Tool is great. I'd pay for something like that. Thoughts on batch processing / continuous deploy / integration: I like the idea of batch processing the banner at the end (like minifying and packaging it up). I don't think I'd personally use any kind of system during creative development though, feels too over-complicated. Not everyone creates banners the same either. Would your app also factor in banners being created with AnimateCC? Would it need to adhere to some kind of specific file structure if it's hand-coded? However, if you were to create a way to make dynamic / programmatic banners much easier to create, then that is something I would think agencies would find super valuable. Something like GSAP components or even AnimateCC drag and drop components.

https://github.com/gka/canvid and https://github.com/bfred-it/iphone-inline-video

Firstly, you don't need the banner playing back at 60FPS, 30FPS will be just fine. I'm also not able to tell the difference between the two too much. I 'think' when I first played one back it kind of had a little jank / stutter but that may have been because of the preview page you're using which is loading while the banner is loading and playing back. I haven't checked out your files but the first thing I'd say and what usually causes this is time syncing. Try commenting out the line of code ".timeSync()" -- (around line 130). This doesn't look necessary in this concept.

I wouldn't say there's anything in particular that lowers CPU specifically. However, there is stuff that checks IF it's not playing back fast enough or slowing down and then has a fallback which you set. You can even lower the frame rate which will help CPU if it is playing back slower. That's all that code watchFPS, fail count, and on "slow". In that example, the fallback is that it shows the backup image if it's runs slow a specific number of times. There's also time sync which makes all movie clips sync their timelines (but this can sometimes force clips to keep up with one another and can look choppy (which gives the appearance of it using too much CPU)

Jonathan: Same issue on that link, probably worse towards the end when it eases into place. Yep, I know the code is sloppy, just threw it together for comparison. I'm in no rush to get this resolved! I already finished this project back in March/April However, I'm sure someone else will run into this issue. Jack: Might be specific to Safari but it's definitely not an anomoly with just my computer. It happens on both my wife's mac's too, and my other MBP. Her work MBP which must be old, has a silver lid and the screen doesn't go to the edge; and her new gold macbook. I've only tested on Safari there though since she doesn't have other browsers installed. For me, it's happening in Safari and occasionally in FF (like 1 out of every 5 tries in FF and it's very subtle jank). The current Chrome has no issue whatsoever. I know when I was building this earlier this year, I was having this issue on more than just Safari. I'm not knocking GSAP, GSAP is awesome, I use it a lot, my new site coming up uses it mostly, it certainly makes life easier, and is certainly faster in almost every case. It seems though, that with this specific scenario (sliding a large image over semi-slowly) CSS is animating it more smoothly in Safari. And who knows, it could be very specific, perhaps just with this image at these dimensions. I haven't had to animate a large image again like that since but am sure I'll have to do it again coming up. I wonder if that would be the case with something different. Again, it's not terrible jank and most people probably won't even notice it, but to me, it's certainly noticeable. Here's a video screen grab with the GSAP version on the left and the CSS version on the right. The GSAP version produces some jank occasionally whereas the CSS version is consistently ultra-smooth. http://www.davi-t.com/misc/videos/codepen_slide_comparisons.mov Here's a video showing it on my wife's gold macbook and my new MBP. Difficult to tell with this video but it's even worse on these computers. > http://www.davi-t.com/misc/videos/IMG_0798.MOV Might be worth looking into...

Hey Jack, Apples to apples, same thing, probably even worse > http://codepen.io/Davi-T/pen/qNgNpj I see it on both computers. My MBP is brand new. Here are the specs on my iMac: • 3.4GHz Quad-core Intel Core i7, Turbo Boost up to 3.9GHz • 32GB 1600MHz DDR3 SDRAM - 4x8GB • 3TB Fusion Drive • NVIDIA GeForce GTX 680MX 2GB GDDR5

Hey Jonathan, Here you go. Sorry, it’s a bit sloppy, just copied and pasted some parts that were relevant and quickly adjusted. The GSAP version isn’t how it was originally created but it used this 3-step kinda tween (it’ll do the same thing with a single straight forward tween though). However, good enough to see the comparison. I’ve also added the lil rotation trick too. Think I made a bunch of different variations of this to try and figure out why. Any who, if you look at both, the CSS version is clearly a lot smoother (in Safari at least). Right now, I’m on my older late-2013 iMac Non-Retina (but it was top of the line at the time, so it’s not a slow computer by any means). However, think I remember seeing the same issue on my brand new MBP. Currently viewing it on the latest version of Safari, which it certainly does it in. Think it’s fine in Chrome. Can’t remember exactly what browsers I was having issues with at the time though (this was back in March when I originally created this). If CSS is doing it better in more browsers, then CSS is what I’d be using’. GSAP > http://codepen.io/Davi-T/pen/bZzEJg CSS > https://codepen.io/Davi-T/pen/RRvApO?editors=1111

I ran into this issue as well using GSAP back in March. It was a rather large image but not too large, not fullscreen width or anything (for a banner, was something like 800x600 or along those lines). Tried all the suggestions above and everything I could find online etc. The small rotation trick didn't work either. It was a simple pan with easing left to right fairly slow but not too slow. No clue why GSAP couldn't handle it. Now it wasn't terrible or even bad looking, and most eyes couldn't tell, but not even close to how smooth CSS did it. Animating it with CSS ended up being the only really smooth solution.

Yeah, it's definitely one of AdHelper's failovers that are being triggered. The backup appears (but that' s not correctly set up yet since you don't have an actual backup image). This code is found in the HTML, not the FLA, by the way. I'm not entirely sure why it's being triggered, perhaps something in your FLA is being continuously fired off or something. If you just comment (or delete) the code for the failovers in the HTML, then you should be fine. However, if I were you, I'd personally investigate why they were being triggered...if it's either your code or a bug in AdHelper or Animate CC. It's weird that it's being triggered a minute out. Here's the code to comment out > if (!createjs.AdHelper.isSupported()) { createjs.AdHelper.showAltImage(canvas, "images/backup_300x250.jpg", "javascript:doClickthrough(this)", "BannerWave", "_blank"); } and then ... var failCount = 1; ad.on("slow", function(evt) { if (failCount === 0) { evt.preventDefault(); failCount++; this.watchFPS(15, 1); } else if (failCount === 1){ createjs.AdHelper.showAltImage(canvas, "images/backup_300x250.jpg", "javascript:doClickthrough(this)", "BannerWave", "_blank"); } }); or just comment out the line .watchFPS(15,1) in the code just above the stuff above.

Kinda sounds like AdHelper's performance failover is being triggered...but you don't have the failover set up correctly just yet. Can't really narrow it down without seeing the actual example though.

Perhaps narrow it down to seeing if it's a scope issue. So outside the function make a reference to the clip. var myClip = this.c10; Then in your function change this.c10 in the tween to myClip, then see if it works. Also, I believe it would be this.playvideo in the event listener, not just playvideo -- this might be the issue as well.

Yep, the FLA... And if you happen to be working on ads with washer and dryers and happen to work at a place that starts with an O, then you'll be working with my files

I believe CSS filters are just shortcuts to their SVG counterpart. I've tried a motion blur in banners (motion blur meaning animating just the X or Y, not both X and Y). Worked fine on my end but the clients thought they were running slow. I don't think browsers are quite ready for animated filter effects with banners just yet, like how we did in Flash (especially with anything larger). Typically in a banner, you're probably animating more than just one thing, and with a motion blur, you're probably also sliding the object and applying the filter just about every tick, at the same time. Then you have other banners that might be on the same page, as well as other site content -- all running at the same time. Just because you can do something, doesn't mean you should Personally, I would skip the motion blur but if it is absolutely necessary, then I would make a static copy of the object with the blur applied...and then just fade out the blurred copy overtop the unblurred copy during the tween. Doing this rather than continually updating the filter.

Hey Jonathan, I'd like to explore your workaround above in Animate CC. What do you mean by adding some extra pixels if we're talking about clipping masks? In the IDE, you would set the mask as a mask layer, just like how it was done in Flash. Works great in everything except Chrome. How would this translate to Animate CC or even Canvas in general? I've found a workaround using code (composite operation), which works okaaaay. The mask isn't perfect but it's a lot better than aliased edges. For things that are animated, however, I need to continually apply the composite operation code and recache every tick. This isn't ideal obviously. Vector masks are especially useful in being able to use a JPEG to create transparency around an image, rather than using a PNG (even a PNG optimized in ImageAlpha). File sizes are way smaller (i.e. I have an image as a JPEG that's 11k, and the PNG8 ImageAlpha version that 58k).

Figure I should probably post this here as this is where I came as I was searching for an answer to an issue related to this and took me a while to figure out the issue. I was using inline SVG from Flash CC and tweening a fill color wasn't working. Searched everywhere and couldn't find an answer. If you're using inline SVG code from Flash CC exported SVG's and am wondering why tweening a SVG CSS value isn't working, then you'd need to do some slight modifications to the SVG code it spits out. If you're using Illustrator SVG code (via copy and paste from AI to Sublime for instance), then you don't have to worry about this because AI does this correctly. Flash will probably give you two additional lines of code for 'g transform matrix'. However, it puts those two lines after the path info. What you need to do is nest that path code inside those two 'g transform matrix' lines. Then everything works as expected, otherwise you'll get an error regarding a null target when using GSAP. The original Flash CC SVG code will probably look like this: <path etc etc /> <g transform="matrix...etc etc etc example1></g> <g transform="matrix...etc etc etc example2></g> The modified Flash CC SVG code should look like this: <g transform="matrix...etc etc etc example1> <g transform="matrix...etc etc etc example2> <path etc etc /> </g> </g>

Think X uses transforms but it's still relative to css left. Unless there's a workaround. It would be great if x/y would be relative to the top/left hand corner (or at least had an option). This way, one workflow for animating (especially character animation or more complex animations), could be using Flash's timeline to animate, convert the timeline animation to GSAP Flash, grabbing all of those x/y/rotational values from the timeline animation as a reference to convert to GSAP code, and finally just translating that to GSAP JS to use in your HTML. Perhaps there is a way to specify x as a co-ordinate system rather than relative. Anyone else care to share thoughts? (Update: Looks like me and Carl posted at the same time. So the solution would be setting all CSS top/left to 0,0, then using Flash's co-ordinate system for GSAPJS x/y values)

Got an SVG motion blur working with TweenLite (albeit super sloppy, can certainly be cleaned up. Still transitioning from Flash!) > http://codepen.io/Davi-T/pen/YXBRXM