Masking question


(Ralph) #1

I’m able to create a clipping mask using group, but I see this only works off of eclipses and rectangles. I tried importing a shape created from an image and it does not work. Is it possible to do the following:

Picture a rectangle on the stage, everything outside of the rectangle is masked so you would see only what is under the triangle, follow?

possible?

R


(Freelancer) #2

Hype does not support advanced clipping options. However you can do it with SVG ( vector) or PNG elements.
in both cases you don’t clip the image but you add another object over the picture/element.
The SVG will be a flat color

Here and example with SVG ( scroll the page)


Is there any SVG Mask resource?
#3

@ralphiedee2016

Below are some more links to add to what @michelangelo posted above - discussing SVG & CSS clipping. An SVG path can also be animated (see Dirk’s link below)… I have not worked with any of these in Hype.

Sara Soueidan’s site here & Dirk Schulze here.


And if You are willing to descend into the stygian depths of Kluge You can somewhat easily create a triangle and other basic shapes in Hype. (I think that is what You wanted it really was not clear in your post You were talking rectangles and suddenly a triangle is mentioned.)

Hype Project: Hype_Masking.hype.zip (93.9 KB)


Trying to figure out a Quick way to do masking?
(Freelancer) #4

oooooopps, @JimScott you’re right!

@ralphiedee2016 for a simple triangle 2 groups are fine. moreover with this trick you can place the triangle over an image and not only with a flat color.


(Bret Petersen) #5

@michelangelo

Hi Michelangelo. I’m really digging this Apple logo example you shared here. I’m trying to tear it apart and figure out how it works so I can use this making technique in other ways. I can’t seem to figure out how it actually works though. Is there some code somewhere that is applying this as a mask and I’m just not seeing it? Is there any step by step documentation on the structure of this file?

Thanks:)


#6

I can help out:

CloudApp

In the video you can see my mouse (without audio, since I’m in a somewhat Noisey place) manipulating the three objects that compose the shape. By grouping an object, setting the ‘content overflow’ setting to ‘hidden’, you can then make the boundaries of that group become the mask. If you then place that masked object within another group, you can use multiple group boundaries as a sort of nested mask. Hope that helps!

BTW to rotate the object when selected, I’m holding ⌘, and dragging the corners of the object around. But you can also use the metrics inspector Z index value.


(Freelancer) #7

there is no guide because the template is quite simple.
The mask is just an additional image ( or vector SVG) with a hole inside. The background color is the same of this element in order to fill the full page with flat color.


(Bret Petersen) #8

Ah I see now. Still a very clever way of making a cool animation that looks like it’s masked! Kudos:)