Expanding Banners

(Brett) #1

Hi - I am transitioning over from Adobe Edge & would like to know if it is possible to build expanding banners in Hype?

For example a 300x50 banner, then on mouseover or touch for mobile devices the banner would expand to say 300x250.

Thanks Brett

(Ronald) #2

I would also be very much interested in knowing more about this. Previously I used some templates from the RichMediaGallery on DoubleClick for Adobe Edge, but don’t know about a similar approach in Hype.

Any help is much appreciated!


(Jonathan Deutsch) #3

You can do it pretty much the same way as in Edge Animate. I put together a sample you can download here:

DCRM_Expanding_728x90.hype.zip (57.2 KB)

There’s a few small differences in how the Hype ad was put together.

  • The Head HTML contains the Enabler initialization and also has code that runs on document load that sets up the callbacks to expand/collapse. I mainly did this for organization so it is easy to copy/paste into other ads; it could have been done with an On Scene Load handler or other ways. I left some methods that weren’t really needed by the Edge Ad commented out.
  • Hype has the notion of multiple timelines, so instead of doing everything on the Main Timeline with stop/resume points, I created two timelines: DCRM-Expand and DCRM-Collapse. This simplifies the animation flow a bit.
  • I setup helper functions for each button click which are named - you can see these in the Resources Library.

I’d probably do a few things differently to simplify the JavaScript, but the point of the exercise was to show the similarities.

You’ll find what is an identical ad also has a much lower footprint:

  • Adobe Edge Animate: 10 requests, 253 KB transferred
  • Tumult Hype: 7 requests, 117 KB transferred

Let me know if you have any questions!

Expandable Banners
Howto: Deploying Hype animations to DoubleClick Studio
Howto: Deploying Hype animations to DoubleClick Studio
(Ronald) #4

Hi Jonathan,

This is great. Thank you so much, I’m looking forward to dive into it during the holidays. Tweak things a bit too my desires and let you know if I have any questions. Best regards!


(Brett) #5

Thanks Jonathan - I’ll get stuck in, Cheers.

(Jonathan Lalonde) #6

Hi, great help with your explication !

But my ad still play automatically. I built it on a single scene. You mention below “On Scene Load handler”? How did I do that?

Thanks !



Hi Jonathan!

The “On Scene Load” is in the “Scene” panel…

(James Kane) #8

I need the ad to expand to the left, not to the right. No matter how I try to adjust the keyframes or code, this template ad automatically reverts and expands left-to-right. On a tight deadline and not sure how to reverse this. Any help would be appreciated! Thanks.

(Hans-Gerd Claßen) #9

the expanding itsself is done with hypetimelines. to animate a mask from left to right you have to animate the stuff within the maskcontainer from right to left using the same easing …

animLeftToRight.hype.zip (12.3 KB)

(James Kane) #10

h_classen, thank you! I kept trying to change the width of the ad container within the Hype timeline, over and over, but it wouldn’t take effect. It just immediately reverted back to the old position and expansion direction as soon as I tried to run it.

Looks like the piece I was missing was also changing the origin (left) in the timeline, at the same time as the width change. Still not sure why exactly this is needed, but I’m happy to be past this bottleneck. Thanks, again, h_classen!

(bkfbkfbkf) #11

Hi Jonathan Thank you for your help.

i wanna ask, how if i want really exot the ad? ( make banner disappear ) ?


You can completely remove the Hype document by running this as a function within Hype:

var element = document.getElementById(hypeDocument.documentId());
while (element.firstChild) {