Forums » Help » Masked background layers

Hi all, total impact noob here. just wondering if there was a way to mask background layers, like this: http://www.entheosweb.com/Flash/masking.asp

thanks

Nothing native to Impact but you should be able to do it directly with the canvas context. Search ' html5 canvas mask' on google and you should get some ideas.

Sure there is an Impact native way. Just need to think a little outside the box a bit and remember that a technique to achieve an effect in one language will likely be totally different to the same technique in another.

In this case, not so much as it happens.

Personally the way I'd do it would be to have two images, one that is the full background and one that is the mask - in that example it'd be a very wide image of white with the centre area transparent. Then I'd just draw the centre part of the mask image over the top of the part I wanted visible.

The only difference is that instead of using a layer with a vector object, we're preparing that up front as a raster image (which will likely be faster than anything else at this point)

Thanks for the replies.

Graphikos - I saw that it was possible in canvas but I don't know how to implement that in impact.

Arantor - I was hoping to find a better example because I realized this example could be accomplished with a big image that had a hole in it. However, the effect I am going for would stack concentric masks all with independent images moving beneath them. I think for that I would need actual masks.

The thing is, that's exactly what Flash would be doing.

There are probably more elaborate methods that involve the canvas context, getting the image data you need and drawing it - but I guarantee they're going to be slower in every respect than using multiple large images and drawing the parts you need.

I would also note that what you're talking about isn't the same thing as what you originally asked about, and that does make it more complicated, but I still don't see a better way of doing it.

Flash demos are getting tougher to come by these days - go figure.
Try this one: http://www.smartwebby.com/Flash/photo_masking_effects.asp

To further clarify - I am exploring a variation on mode7 perspective - like from F-zero.
So I need bands of shifting bg layers.

I don't see this as possible without a true mask. What do you think?

There's what's possible and what's practical. Using a true mask is possible but the performance is going to hurt on any canvas platform (assuming you have it read the pixels of one image to draw them on another)

The only way around it is ultimately to fudge it some other way. For your example there, I'd have the two images, the black and white, and the colour one. And then I'd draw the background one in, and just draw the parts of the colour image I want.

Canvas is not like Flash. The concepts do not work the same way, it is in essence a large bitmap that you might work on in Photoshop - except that you don't have the option of layers, once you paint on it, it's painted on (like a paint canvas). Masking in the conventional sense just doesn't work in that context.

I'm not sure how masking will really help you in the context of doing something like F-zero (had to look it up, not having owned a console back in the 1990s). Seems to me something like http://stackoverflow.com/questions/3836036/mode7-like-perspective-transform-in-canvas is more what you're interested in, ultimately.

Thanks for the reply and link.

I went ahead and mocked up what I was picturing:
http://tryptefan.com/golfBall.jpg

It's like the mode7 scaling from your link - but on a circle.
Sorry if it seems like a moving target, but until I mocked it up I was having a hard time explaining it.


From you post "... then I'd draw the background one in, and just draw the parts of the colour image I want."
Isn't that masking?
Would it be possible to draw the circular parts of the background layers in as I want them?


I sorta figured true masking would be a pretty rough performance hit.

Sorry if it seems like a moving target, but until I mocked it up I was having a hard time explaining it.

FWIW, pointing to examples and going 'like that' doesn't tell me what you're trying to achieve, and mocking it up explains things infinitely better than the examples thus far, so thanks :)

Isn't that masking?

No, not by a long way. The concept of masking means to use a layer of some description to prevent drawing the rest of the material by use of some other layer on top. In the example given of the grey background and coloured highlight, using a mask would mean to draw the entire coloured area through some kind of mask and then the grey area around it.

In my case I was simply thinking of drawing the background, and just the equivalent of copy/paste the parts I want, which doesn't involve any intermediate layers.

What you're after should be achievable by manipulating the canvas directly (see the Drop example for some code around this, in the pixify routine), and manipulating the compositing options, a la https://developer.mozilla.org/en/Canvas_tutorial/Compositing