How to mask a text in front of an image

Animation
1

Hi, I am very new to Hype. I watched the “01 intro to animation”. In this tutorial they explain how to “Masking and Cropping” text with Groups.
But is there a way to mask for example a word that has an image on the background?
I attach a file for example.

Thanks for all the help in advance :slight_smile: how to mask.zip (1.8 MB)

2

You can use groups to mask elements: how to mask.hype.zip (1.8 MB)

You can select the text, click ‘Group’ at the top, change the ‘content overflow’ setting in the metrics inspector to ‘hidden’, and then record the adjustment of that group’s bounds.

3

Hi Daniel, thanks for your reply but I’m not sure I understand.
I saw your file, but the result I am looking for is this: I want to reveal the text as in hypes tutorial but I don’t want the white box to appear. In flash I think you could do this by selecting the box an converting it to mask. How I can do this on hype.

Sorry as I said I’m very new to all this.

4

Sorry if that was not clear: Here’s how that looks in Hype

5

Did you mean something like this ?

how to mask 3.hype.zip (1.8 MB)

6

Yes thanks a lot Mark.

7

Thanks Daniel.
I did that in a test but when I cklick to preview it in firefox the text didn’t appeard.

8

Another thing for the long list…masking with vectors, including outlined type.

1 Like
9

I’m trying to do the same thing but I’m trying to make the mask an odd shape, like a triangle or rhombus, any ideas on how to do this? I’m playing with the files above but can’t seem to work it out.

10

Ok I just figured out a workaround: I can rotate the frame, but I’ll import the graphic that I need already rotated to the same angle. I’m basically trying to create like a diagonal wipe mask effect on an object over the top of background images.

I’ll have a play, however I’d like to request triangle / polygon shapes and the ability to mask easily on any angle that isn’t a straight horizontal or vertical line.

Thanks!

1 Like
11

Thanks for the request!

12

I’m trying to do this right now and apply the mask, then flip the group / mask on an angle at 42 degrees (so the masking direction comes in at an angle), but then the mask edges start shifting around - any clues how to keep the mask frame stationary? Thanks!

13
14

angleMask.hype.zip (10.6 KB)
hype is really tricky with this …i guess it’s due to html defaults

so try to keep the element you want to animate in its own (NO ANGLE!) default-coordinatesystem within a group

2 Likes
15

Wow thanks so much h_classen! I’ve taken your file and had a play with it, I wouldn’t have thought to put the group within a group.
Originally I had some parts of the text appearing under shapes and blocks but I wasn’t able to complete the mirrored animation going in the opposite direction without it overlapping. Then I started setting things up on angles but it was very very fiddly!
This is really really helpful, much appreciated! Legend, thank you!