Web Banners: Hype and Greensock

adwords

(Mike) #1

Just a Eureka moment but I’ve successfully integrated Greensock’s JS into Hype 3.5 and Google Adwords accepted my display ad files. I wanted to post because I couldn’t find much on the topic. Feel free to ask here with any questions, I’m here to help. Hoping to post more documentation in the near future.


Using gsap MorphSVG
(Daniel) #2

I’m interested!
Could you explain the best way to integrate Greensock’s JS as a kickstart for me?

Thanks!


(Mike) #3

Hey Daniel,

To get the lowest file size I could, while having enough sauce to create more dynamic animations, I imported CSSPlugin.min.js, EasePack.min.js, TimelineLite.min.js, and TweenLite.min.js into the Resources panel.

Then I added a Javascript function On Scene Load and pasted a simple Greensock JS tween to animate two circles.

I gave the circles different Classes.

Being a veteran of Flash/Actionscript web banners, I was used to only using TimelineLite with TweenLite to hit those 40kb swf files. So I got it working in Hype.

Export as HTML5 and remove the .plist and .htc files from your resources folder. (Google does not accept them within your final .zip)

Open up your exported .html file. You want to add this meta line to declare the size for Google. (Required in Adwords)

Finally, also remove the highlighted text from the end of the source javascript file. (Not sure why Hype adds this?)

Zip up your .html file and resource folder and you’re ready to upload to run a display ad!

I find using Greensock JS to code your banners cuts TONS of time off resizing your ads for a full campaign. It also is way LESS tedious than tweening in the timeline (yuck). Plus, the animations are a lot smoother and you can create more dynamic transitions. Cool stuff! Hope this helps - any questions/comments, please post!

-Mike


(Daniel) #4

Awesome stuff, Mike! Thanks for sharing.

Sadly a lot of media agencies are still living in the past, demanding html5 ads with 40kb or less which often spoils the fun in using Hype. I’m all for optimization in terms of quality <-> file size, tinify-ing images and so on, but that doesn’t cut it in many cases.

I’m sure I can put this into good use :slight_smile: Thanks again!


(Mike) #5

Thanks and no problem!

Google Adwords is now allowing up to 150kb .zip files for HTML5 ads and others are starting to follow that trend, which is great. The zip I created for the ad above is only 103kb.


(Andy Hullinger) #6

Nice post!
Hype + GSAP is great! http://dev.andyhullinger.com/using-tweenmax-in-hype/
Also, you can use TweenMax for FREE with Google/DoubleClick by linking to it on their approved CDN. (https://support.google.com/richmedia/answer/6307288) All the big AdTech players host GSAP on private CDN links … SIzmek & FlashTalking… so you don’t have to count it against your 200Kb