Oliver16Years

Is it contains one timeline or separate tweens started by setInterval?

Nice Blog, Subscribed.

Copy-Paste from Sizmek.Com >>> As a creative designer, I would like to ensure that all common libraries of my ad are hosted and served from a shared location, increasing their chances to be cached on user browsers, so that publishers do not include them in ad size calculations. This article lists the links to the location of the Sizmek HTML5 shared libraries. Non-Secured AdKit http://ds.serving-sys.com/BurstingcachedScripts/adkit/1_0_6_0/adkit.js Jquery http://ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_42_0/jquery.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/2_1_4/jquery-2.1.4.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_4/jquery-ui.min.js Greensock http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TimelineLite.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TimelineMax.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TweenLite.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TweenMax.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/easing/easepack.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/plugins/cssplugin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TimelineLite.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TimelineMax.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenLite.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/easing/easepack.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/plugins/cssplugin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TimelineLite.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TimelineMax.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TweenLite.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TweenMax.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/easing/easepack.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/plugins/cssplugin.min.js Createjs http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/createjs-2015.11.26.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/preloadjs/0_6_1/preloadjs.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/preloadjs/0_4_1/preloadjs-0.4.1.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/soundjs/0_6_1/soundjs.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_8_1/easeljs.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_7_1/easeljs-0.7.1.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_8_1/movieclip-0.8.1.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_7_1/movieclip-0.7.1.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/tweenjs/0_6_1/tweenjs.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/tweenjs/0_5_1/tweenjs-0.5.1.min.js Hype http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/584/HYPE-584.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/584/HYPE-584.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/578/HYPE-578.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/578/HYPE-578.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/576/HYPE-576.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/576/HYPE-576.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/552/HYPE-552.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/552/HYPE-552.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/550/HYPE-550.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/550/HYPE-550.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/538/HYPE-538.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/526/HYPE-526.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/526/HYPE-526.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/518/HYPE-518.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/518/HYPE-518.thin.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/466/HYPE-466.full.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/hype/466/HYPE-466.thin.min.js Edge http://ds.serving-sys.com/BurstingcachedScripts/libraries/edge/6_0_0/edge.6.0.0.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/edge/6_0_0/edge.min.js http://ds.serving-sys.com/BurstingcachedScripts/libraries/edge/6_0_0/edge.min.customforamazon.js Modernizr http://ds.serving-sys.com/BurstingcachedScripts/libraries/modernizr/2_8_3/modernizr.min.js Secured Adkit https://secure-ds.serving-sys.com/BurstingcachedScripts/adkit/1_0_6_0/adkit.js Jquery https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_42_0/jquery.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/2_1_4/jquery-2.1.4.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_4/jquery-ui.min.js Greensock https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TimelineLite.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TimelineMax.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TweenLite.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TweenMax.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/easing/easepack.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/plugins/cssplugin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TimelineLite.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TimelineMax.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenLite.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/easing/easepack.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/plugins/cssplugin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TimelineLite.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TimelineMax.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TweenLite.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/TweenMax.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/easing/easepack.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_17_0/plugins/cssplugin.min.js Createjs https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/createjs-2015.11.26.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/preloadjs/0_6_1/preloadjs.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/preloadjs/0_4_1/preloadjs-0.4.1.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/soundjs/0_6_1/soundjs.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_8_1/easeljs.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_7_1/easeljs-0.7.1.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_8_1/movieclip-0.8.1.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/easeljs/0_7_1/movieclip-0.7.1.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/tweenjs/0_6_1/tweenjs.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/createjs/tweenjs/0_5_1/tweenjs-0.5.1.min.js Edge https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/edge/6_0_0/edge.6.0.0.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/edge/6_0_0/edge.min.js https://secure-ds.serving-sys.com/burstingcachedScripts/libraries/edge/6_0_0/edge.min.customforamazon.js Hype https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/584/HYPE-584.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/584/HYPE-584.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/578/HYPE-578.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/578/HYPE-578.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/576/HYPE-576.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/576/HYPE-576.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/552/HYPE-552.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/552/HYPE-552.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/550/HYPE-550.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/550/HYPE-550.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/538/HYPE-538.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/526/HYPE-526.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/526/HYPE-526.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/518/HYPE-518.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/518/HYPE-518.thin.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/466/HYPE-466.full.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/466/HYPE-466.thin.min.js Modernizr https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/modernizr/2_8_3/modernizr.min.js

Thank You Emmanuelluloa! Great tutorial video and tool! It is really helpful, I lovet it!

I am working on a banner exporter which can speed up the ad developement by 5 to 8 times. It is written in NodeJS and residing in Photoshop. A few months and I will release it on Adobe exchange. I can't say more at the moment but it is fast and producing 100% bug free DOM/SVG/Canvas ads.

I just guessed the mechanism of compress-or-die. It can be really helpful for most people. The .jxs uploader is really a nice and generous part Christoph. The downside for me is: i can only use MIT/free licensed binaries or .js code in my engine. So If I decide to use .tjpg spirtesheets, I have to write the exporter from the available free and offline parts.

As I see now transparent .jpg sprite sheets could be an optimal solution to store all the graphical elements of an ad. If we could automatically add more quality to red areas ( they are often blocky ). Then we export all the assets in raw 32bit .png format, pack them into a single spritesheet, separate it's transparency into a grayscale .jpg and it's rgb values into a non transparent .jpg, load them in the ad, reassemble the rbg values with alpha values, split them with canvas and json data, and finally put them into <img> || <canvas> elements.

This is a fine solution but, some adServers wont' allow .json files so the data must be embedded in the html. Other problem is when you pnquant an image, the size of the transparent area and the colors of the various packed images affecting the overall quality of the 8bit .png as i noticed. ( can be fine with Christoph's transparent jpgs ) Since Google messed up the background-image displaying of Chrome I switched back to simple <img> tags, which means the only way to split up a spriteSheet is via js+canvas pixel manipulation, which can be slow, but possible. Because of these, it seems like the separate Base64 encoded, inline .pngs in <img> elements is the simplest way. This adds ~1.33% file size overhead, but removes all the asset http requests and the quality of the .pngs are the maximum possible.

Must be difficult to rotate these assets. I think You have to determine their transformOrigin somehow. I saw this solution just after Flash was killed. Hard to win the battle versus slicing + CSS positioning with bare PS + Sublime.

Interresting. I am looking for ways to reduce my ads size more than Photoshop can. Do You plan to relase the compressor as a binary? Are these transparent .jpgs useable in banner iFrames?

Can I ask what compressor is running on the backend? Is it Your own binary or pngquant/ImageMagick? I have tested dozens of png optimizers but pngquant was the only useable.

You can invoke functions from timeline: mc1.add( function(){ mc2.play(); }, 7 ) Set up some variable and check it from the function if it is the first run or not. https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/play/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/ If You are in a banner's iFrame, You can delete the getElementById(); lines because IDs are present as global references to the DOM elements.

No, sadly no. Png8 is switching to 8 bit .png but it is not optimized. It is 100% pngquant quality. Lets say generator is producing 20k png8s with pngquant. But if You hack/patch whatever the source code, you can set the desired quality and the output can be 10k. Adobe just left the pngquant process call with default settings. I am just working on my banner engine and migrating to generator from superPng. Here You can see the difference in file sizes from 0% to 100% pngquant qualities:

This is very cool idea, but too generic. Can't optimize .pngs event though can use pngquant as a background process. You have to corehack generatorCore to allow optimization. But if You put a gulp watch on it's output folder It can save a lot of time.

I have noticed that they intended to mean "scaleable" when they ask for "responsive" ad. This is simplifying the solution, which is already not an easy one when You have to make an expanding rich media banner. /** * @global W {Nubmer} - Width of the ad * @global H {Nubmer} * @global Stage {DOMElement} - Main containeer of the ad */ function resizer() { var scaleFactor = Math.min( window.innerWidth / W, window.innerHeight / H ); TweenMax.set( Stage, { scaleX: scaleFactor, scaleY: scaleFactor, transformOrigin: '0% 0%', left: ( window.innerWidth - scaleFactor * W ) / 2, top: ( window.innerHeight - scaleFactor * H ) / 2 }); } window.onresize = resizer; setInterval( resizer, 100 ); Setinterval is needed because one of the contraptions can't do it's job. I would require a working solution/example + an expanding template from the media agency to reverse engineer them before starting the task.

I see cloudflare CDN links in the html. What happens when You use these? https://support.google.com/richmedia/answer/6307288

Are You using Cloudflare CDN to load GSAP? If Your answer is "yes", try this: https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js Regards

I also don't see any anim in IE11. I have one guess: CSS based mask animation is not understandable for IE. But I am curious too what is the true cause of this malfunction. If You could make a minimal test case, we could debug it easier.

This is a part of my adFormats.json. As You can see there are just a bit difference between the 2 formats. "DOUBLECLICK": { "scripts": "SCRIPTS_CDN", // GSAP can be on Google CDN "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "fallback": true, // Static/backup.jpg "separateFallback": true, // Not included in adSize. Put it beside the .zip "landingpage": true, "engine": "<script> var clickTag = '{{landingpage}}';</script>\r\n", "clicktag": "\t<a id = clickArea href = 'javascript:window.open(window.clickTag)' ></a>", "clicktagid": "clickArea" }, "DOUBLECLICKSTUDIO": { "scripts": "SCRIPTS_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "fallback": true, "landingpage": true, "engine": "<script src=\"https://s0.2mdn.net/ads/studio/Enabler.js\"></script>\r\n<script> var clickTag = '{{landingpage}}';</script>\r\n", "clicktag": "\t<a id = clickArea href = 'javascript:window.open(window.clickTag); Enabler.exit(\"clicktag_exit\");' ></a>", "clicktagid": "clickArea" }, I am not sure if DOUBLECLICKSTUDIO counting in the statik's size. + You have to put a <scrip> tag with Enabler.js in DOUBLECLICK format.

I would try to address container.children as can be seen in the EaselJS documentation: http://www.createjs.com/docs/easeljs/classes/Container.html#property_children "children Array Defined in children:62 The array of children in the display list. You should usually use the child management methods such as addChild, removeChild, swapChildren, etc, rather than accessing this directly, but it is included for advanced uses. Default: null" I am guessing now because I don't have Animate. This lib ( EaselJS ) is part of the open source CreateJS, which is the engine of Animate's HTML export feature under the hood. Worth to glance through the docs for a better understanding of the possibilities.

I think the stagger argument is missing from Your code: TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array https://greensock.com/docs/#/HTML5/Animation/TweenMax/staggerTo/ Try something like this: tl.staggerTo([root.headline, root.tagline, root.logo, root.cta], 1, {alpha: 1, ease: Back.easeOut}, 0.1 );

Arrange the petals around the center of the flower, behind it, then with a staggerFrom( [ petal1... petaln], .5, { scale: 0, transformOrigin: 'x% y%'}, 0.1 ) bring them out. Hand tune the transformOrigin values: these can be negative vales, outside the petals. But this is working only if You have fixed text with a few letters only.

It seems tl is independent from Your animation. Try to put the .from()/to()s into tl like: var tl = new TimelineMax( { repeat: 3, repeatDelay: 1 } ); tl .addLabel( 'myLabel1' ) .from( this.twofor3, 1, { scaleX: 0, scaleY: 0, alpha: 0, ease: Elastic.easeOut }, 'myLabel1' ) .from( this.txt1, 0.75, { alpha: 0, x: -50, ease: Power2.easeOut }, 'myLabel1+=1.2' ) .addLabel( 'myLabel2', 'myLabel1+=1' ) ... You can add tweens to the timeline with dot chaining. If You put labels at key time positions, You can easily control the delays.

I love Your endurance Pensketch! AdWords is a ugly beast to tame.

Sadly 3D rotation is the ability of HTML DOM only. But, you can put DOM elements above Your Animate <canvas> with DOMElement Class. http://www.createjs.com/docs/easeljs/classes/DOMElement.html.