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!