How to mask KRPano viewer when embedded

  • Hi,

    I am embedding krpano onto a different flash stage, and I would like to mask the viewer area into a non-rectangular interface. Is there any way to achieve this? I tried masking image.layer, but was not able to achieve the expected results. Basically, I want to mask krpano with an non-rectangular shape, for e.g. I would like to know how can I mask krpano with a circle?

    Regards,

    OnisH

  • Hi,

    I never masked krpano when its embedded in flash, but couldnt you mask the container where krpano resides?

    The "mask" you see in the example is a plugin. It's basicly an image with either some opacity, or black/white that gets filetered away in blend mode. Note: blend mode does not work on ipad. So png with alpha is the only option on an ipad.

    Code
    <plugin name="mask" devices="flash" url="darkmask.jpg" blendmode="multiply" align="lefttop" width="100%" height="100%" enabled="false" zorder="-1"/>

    the image:

    https://krpano.com/examples/masks/darkmask.jpg

    but if you have some custom interface (like my game) you can just add a png with opacity as a plugin, but the zorder to something low. And add all your custom buttons as plugins too with a higher level.

  • Thanks a lot Zephyr for your inputs and yes I got a path to masks.xml by viewing the page source of the mask example mentioned by me. Anyways, it turns out that it is not a true masking, meaning it uses blendMode and I would like to Mask my krpano.

    You asked "couldnt you mask the container where krpano resides?", the krpano is by default added to the stage and I cannot move it or add it to any other container, Sprite or MovieClip, hence I am not able to mask the container.

    If you have any other inputs for me I would greatly appreciate it. I am also waiting for Klaus to give his inputs. I hope I am able to achieve this.

    Basically I am creating a virtual tour interface where in there is a header area, middle section with krpano, and a footer area, now the middle section is a non-rectangular interface and header & footer are semi-transparent area, so that the background image gets exposed through it. Kindly see the attached image for a better idea.

    Thanks again for your support,

    OnisH

  • Hi Klaus,

    Unfortunately it didn't worked for me.

    Here is what I am doing. In krpano_ready event, I am creating a mask, adding it to Stage and tried to mask image.layer by using two different approaches. In both the cases, the mask gets vanished, as if it was applied, but the image(pano) remains unmasked.

    var masking:Sprite=new Sprite();
    var g:Graphics=masking.graphics;

    g.beginFill(0x000000);
    g.drawCircle(120,120,100);
    g.endFill();

    var display:Object=krpano.get("image.layer");
    stage.addChild(masking);

    1) First approach to apply mask:

    krpano.set("image.layer.mask", masking);

    2) Second approach to apply mask

    display.mask=masking

    Regards,

    OnisH

  • Hi Zephyr,

    I really appreciate your support on this issue. I think what you are suggesting will not work in my case, as I will be allowing users to set different backgrounds, which is part of an html.

    Basically, I need a pure masking mechanism.

    Regards,

    OnisH

  • Hi Zephyr,

    Thanks again for your support.

    I would be setting the "wmode" to "transparent" so that the background image which I set on an html page can be viewed through the flash stage.

    Hence, I would have to mask krpano with the shape that we have designed.

    Regards,

    OnisH

  • No you wouldnt need to do that. You set a picture of a plugin in krpano, not the background of an html element

    krpano code:

    Code
    <plugin name="backgroundholder" parent="STAGE" keep="true" url="bg1.jpg" />
  • Hi Zephyr,

    I do get it, what you are suggesting and yes that will work too, in a way. But the wallpaper that I have created, in this case, for all the top real estate brokers, they all are 1920x1200 in dimension, so that my interface can work on all the major monitor resolutions. I will have to go with a liquid stage or dynamic stage with your approach while the technique that I want to adopt will have a fixed dimension of flash stage, which will be centered on a html page, all I need is a way to mask krpano. Also, the screenshot I attached is a simple view of what I am trying to do, the interface will have lot of other information and elements along with it, like SlideShow, Video Player, etc, a complete tour delivery system.

    I hope I have not started irritating you Zephyr :), I do appreciate your help and time, thanks.

    Regards,

    OnisH

  • Hi Klaus,

    Do you have any inputs for me? I am using the latest version of KRPano.

    I have my fingers crossed, I hope you have something that resolves my situation.

    Thanks,

    OnisH

  • Ow no, you're not irritating me ;) I didnt know you wanted to put non krpano content in the interface. My way is still possible, but would require all the custom content to be made in flash (like gallery, videoplayer) Still possible, and you'd benefit of the tour working with all the features in fullscreen (while html content would dissapear in fullscreen). But it would require a bit more work and krpano knowledge.

    I've created dozens of real estate tours (ipad and flash, alsoo integrating with cms's) so if you need my help, let me know.

  • Hi,

    instead of:

    var display:Object=krpano.get("image.layer");
    stage.addChild(masking);

    krpano.set("image.layer.mask", masking);


    try this one (add the mask to the parent of the image.layer) - this should definitely work (when you use version 1.0.8.14):

    best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!