Text masking on video or image

video

(Vitaliy Gorban) #1

Is any way to make TEXT as a mask on video or image?
try to make mask on video with a text.
Thanks


#2

To do this, make the text as the cutout area of a transparent PNG. Select letter shapes on a white box in a photo editor like Pixelmator with the selection marquee, delete that area, and export the resulting image as a transparent PNG.

Next, place that PNG over your video in Hype as the top layer, and only the transparent portions will display.

(Note that this won’t work on iOS devices because video can’t have elements overlapping)


(Vitaliy Gorban) #3

Thanks for the quick response Daniel


(Greg) #4

I like Daniels method. You can also use CSS to get this effect…

#id {-webkit-text-fill-color: transparent; -webkit-text-stroke: 1px black; -webkit-background-clip: text; background-image: url(${resourcesFolderName}/your-picture-goes-here.jpg); } 

bg-pic-text.hype.zip (34.8 KB)


(Vitaliy Gorban) #5

Tnx for other method!


#6

Here’s a demo: http://tumult.com/support/examples/3379-loop/buck-motivation-loop.hype.zip

Because of the way we handle PSDs, you can actually drag and drop a PSD (with transparent text) right into Hype, and we’ll convert it to a transparent PNG.


(Vitaliy Gorban) #7

Yap! I got it Daniel, tnx for the demo! This is best way who can’t coding, (for example me).
But still think, in the next versions of HYPE, great to have tool mask for any object or text.


#8

Hi, cool method. Do you have a method that works in Firefox?


#9

To get this to work in Firefox, you would need to add the .ogv version of the ogg video into the resource group slot:

I recommend using Miro Video Encoder or Permute to do this.


(Dennis van Leeuwen) #10

I do too. :slight_smile:


(Dennis van Leeuwen) #11

Are we getting a better masking option soon in Hype? Instead of using invert image/svg options or the hide on overflow settings.

I would like to expand the usage of Hype on animating. See this sequence. It has a simple shape that can be selected to be used as a mask in After effects.

http://forums.tumult.com/uploads/db2156/original/2X/a/aaa27c3b76cbd71aaa96288f0ef8c9e483cba3a0.mp4

I managed to simulate the effect. Just the time to achieve this is double.

The effect simulated:


(Jonathan Deutsch) #12

Very cool effect

As for better masking/text masking, I’d love to do this. Sadly last time I tried there were many compatibility issues and bugs in various implementations of the technology required.

If you’re interested, Google Web Designer did a writeup of their finding and why they also aren’t going to implement it any time soon:

So hopefully the situation will improve down the road and we’ll be able to offer it as a feature.


(Dennis van Leeuwen) #13

I will live with it… for now. :slight_smile: