HTML5 / GWD WHAT WE’LL COVER TODAY:

Tips N’ Tricks ● Animation and fonts

○ GWD: Using Groups

○ GWD: Using Events in animation

○ Using 3rd Party Library

○ Custom Fonts

● Launch it Seamlessly

○ Publisher Specifications

Google Confidential & Proprietary 1

Animations /
Fonts
Google Confidential & Proprietary 2
GWD: 3D and Sprites

● GWD allow a full 3D environment

● You can use Sprites for image base animation

Google Confidential & Proprietary 3

GWD: Using Events in Timelines

● Use Events in Timeline allow you to trigger

play/pause/gotoAndPlay etc.
● Use this to “chain” animations from one to another.
● Set Label in Timeline so that you can gotoAndPlay specific
points in the timeline.

Create Labels at specific timeline to

gotoAndPlay specific time

Google Confidential & Proprietary 4

GWD: Using Groups

● Groups = Symbols in Flash

● Use Groups allow you to repeat animations in a
creative
● Changing a Group will affect all instances on the
stage
● Use “Wrap” if you want unique animations for a
series of elements
● Use document.querySelector to select specific
group to change its content
3 Instances of the same
group created

Google Confidential & Proprietary 5

GWD: Using 3rd party libraries like Greensocks

● Use Google Hosted Library:

○ https://s0.2mdn.net/ads/studio/cached_libs/
○ tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js

● Use GWD events to start the animations only when ready.

● Chain animation could be much faster than using Timeline

var tl = new TimelineLite();

tl.staggerFrom([img1, img2, img3], 1.5, {opacity:
0},
0.25).call(gwd.onchaindone); // Scoping is taken
care by greensock

// This is a GWD custom function

gwd.onchaindone = function(event) { gwd.actions.
timeline.play('title'); }

Google Confidential & Proprietary 6

Custom Fonts

● A bit of housekeeping..
○ Adwords? Use Google Fonts for custom fonts @font-face {
○ Masthead / Lightbox - more flexible for font-family: 'BakerSignet';
font-style: normal;
custom fonts
font-weight: 400;
○ Proprietary fonts ? (speak to us and we can src: local('BakerSignet'), local
help!) ('BakerSignet'), url(https://s0.2mdn.
net/ads/richmedia/studio/40810605/ufo
○ CJK fonts (not recommend now for Adwords)
nts.com_baker-signet.woff) format
● Make it smaller ('woff2');
● Have some effects.. &effect=
}

Google Confidential & Proprietary 7

Launch it
seamlessly!

Google Confidential & Proprietary 8

What to take into consideration for your launch process?
● Which publisher is the creative going to be ?
Flash HTML5 Plus
● What is the file size limit
● Do they allow any external calls / libraries?
● What kind of formats
● How many landing pages are allowed and how?

Google Confidential & Proprietary 9

What to take into consideration for your launch process?
Ad environment When creating your ad in Google Web Designer, you must specify the “AdWords” environment.

Flash
Supported
Tap Area HTML5 Plus
components iFrame
Swipeable Gallery
Carousel Gallery
360° Gallery
Gallery Navigation
Image Button
Spritesheet

Publishing for In Google Web Designer:

AdWords
1. Click the Publish button.
2. Select Publish locally.
3. Upload the resulting .ZIP file to AdWords.

Limitations
Expandable ads are not supported.
All images used in HTML5 ads must be local images, not referenced images, and should be part
of the assets that comprise the ZIP file.
Only Google web fonts are supported. Other web fonts are not supported.
For environment target actions, timer and multiple exits are not supported.
Local storage methods cannot be used in HTML5 ads. Google Confidential & Proprietary 10
Resources

Flash HTML5 Plus

http://www.richmediagallery.com/resources/techlab

Google Confidential & Proprietary 11

Thank you
@shunjie
CSS vs JavaScript

CSS JavaScript

● Simpler Transitions ● Advanced / Interactive

(Javascript could still control states) e.g stop, pause, slow-down or reverse

● Smaller Filesize (vs Javascript) ● Avoid setInterval

(chunky + affects performance)
● Uses GPU instead of the CPU
● Use requestAnimationFrame
(browser can optimize)

Google Confidential & Proprietary 13

 WebGL, Canvas, SVG
WebGL Canvas
● Firstly… ● Pixel based
CanIUse w/ Browsers?
● Modified w/ Script
● Powerful 2D and 3D
● Performance better with
● Rendered into <canvas> smaller surface / large number
of objects
● complex scenes, real time
(e.g 3d, animation)
SVG
● Shape based
● Modified w/ Script and CSS
● Performance better with
large surface / smaller
number of objects
● viewing / printing
(e.g image to zoom)
Google Confidential & Proprietary 14