I just started working with Hype today, I want to try and use it in a very specific way. That is to make each area of a scene clickable and depending on where you click a video overlays the original elements.
Think of it like a map and as you click on one part of the map arrows and notations are ‘drawn in’, except this is done via a pre-composed video that overlays.
That said, I can’t seem to make this happen, even though I know WebM formats allow for transparency.
What happens after the video overlay is displayed in terms of being able to click other elements? An element under a transparent PNG will not trigger directly (even in the transparent areas), so I assume WebM would exhibit the same behavior (have not experimented with WebM transparency myself). If this behavior does prove the same for WebM... how about instead You place the video under the various elements (i.e. the "map") You wish to trigger?
If You need to animate directly on the element clicked on, You could temporarily remove it from the Hype scene while the video plays. The element would also be rendered in the actual video itself I assume - and so would create a seamless effect.
Some caveats here which may not apply in your case because You were planning to use WebM which isn't natively supported by iOS anyway...
Jonathan Deutsch Team Tumult - Feb 2, 2016
Technically elements can overlay on top of video, but it should be avoided as there are a few major problems:
iOS likes to have no elements layered on top of video, and the iPhone specifically wants to play videos full screen
HTML doesn't provide enough mechanisms for highly accurate syncing of animations to video
It is probably better to do this either with video production software like Final Cut Pro, or via code running on a server that can generate this dynamically and spit out an MP4/video the client sees.
I am ankle deep in creating a similar effect for a project I'm working on - no map - but I am overlaying elements on top of a video so the video takes on an interactive quality. So far so good in all modern browsers on a Mac. I have not had any syncing problems because my elements are static. (I have casually experimented with animated elements - in case I might need that capability - without having syncing issues.)
Unlike your case, I need my project to work on an iPad. I will be giving that scenario my first go this weekend.
First time placing a video in Hype - outputting from After Effects (essentially a stop motion series of PNGs). Not having any luck retaining the alpha channel in the video. Also not sure if MP4 and OGGV support alpha.
Any suggestions?
setup:
seperate your video to a video with just the alphachannel and one without.
place both on the scene display: none or combine them in one (top,bottom)
use the canvas element to read the image datas, apply the canvas and draw the result …
i found this technique in the www, don’t know where actually … it’s been in my fundus
on request i can send the hypefile it’s about 8 mb because of the great video
code and setup are not otimized, just playgrounds …
I wrote about this technique back on April 14th, just now have had time to track my own correspondence! Also in the "April 14th" link was a bit about getting transparency to work in the WebM format (experimental).
@h_classen - I haven't compared your version with this one - but the idea is the same.