Video: Turning Transparency (Alpha Channel) On

Hi All,

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.

Is this possible?

@DMC87

Hi Dave - Welcome to the Forum!

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.

Full thread here.

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.

1 Like

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?

@TYancy

I am deep in the weeds on a project right now. I will respond by Saturday.

Thanx.

video2Canvas

yes of course, it’s somehow complicated … :wink:

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 :slight_smile:
on request i can send the hypefile it’s about 8 mb because of the great video :slight_smile:
code and setup are not otimized, just playgrounds …

2 Likes

though nobody needs it … :wink: download

2 Likes

http://www.sciencelifeny.com/transparency/transparency.html#

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.

1 Like

thx @JimScott :slight_smile: