Text masking on video or image

Elements Audio & Video
1

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

motiv.jpg1000×562 63.9 KB

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)

2 Likes
3

Thanks for the quick response Daniel

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)

3 Likes
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.

4 Likes
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.

1 Like
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.

1 Like
10

I do too. :slight_smile:

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:

3 Likes
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.

2 Likes
13

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

1 Like
14

You're the doc, Doc. XD THANKS A LOT!

15

This is super useful!

Any thoughts on how we might make this class-based so it can be applied to more than one element?

Thx!

16

So no takers yet :slight_smile: Can anyone link to a thread where a parallel solution can be found? Again, the question is, how to change the code from being Unique Element ID-based to Class-based so that it can be applied to more than one element?

Thanks!

17

there's no code just css and replacing the # with . changes it to affect classes ...