How to mask KRPano viewer when embedded

Anfänger

Montag, 7. November 2011, 07:44

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

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

2

Freitag, 11. November 2011, 05:54

Hi,

http://krpano.com/examples/masks/

I think this is something that could help me, can somebody please tell me how this could be achieved?

Regards,

OnisH

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

3

Freitag, 11. November 2011, 10:37

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.

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

the image:

http://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.

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Freitag, 11. November 2011, 13:53

Hi,

when you were using krpano version 1.0.8.14 and added your mask shape correctly to the flashplayer stage,
then assigning the your mask shape to the image.layer.mask should be possible and working...

best regards,
Klaus

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

5

Freitag, 11. November 2011, 13:57

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

»onish« hat folgendes Bild angehängt:

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

6

Freitag, 11. November 2011, 13:59

Thanks a lot Klaus, I will give it one more try, see if I did it the right way and get back to you.

Appreciate your comments.

Thanks

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

7

Freitag, 11. November 2011, 16:27

you could create an area (with the area tag) and align the png as a plugin with parent = STAGE

http://krpano.com/docu/xml/#area

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

8

Samstag, 12. November 2011, 06:06

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

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

9

Samstag, 12. November 2011, 06:08

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

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

10

Sonntag, 13. November 2011, 22:14

You can set krpano properties through html (javascript).

	Quellcode
1 2 3 4 5 6 7	var krpano = function(){ return document.getElementById('krpanoSWFObject'); } function your_backgroundchange(){ krpano.set("plugin[backgroundholder].url", 'test.png'); }

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

11

Montag, 14. November 2011, 05:57

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

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

12

Montag, 14. November 2011, 09:27

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

Quellcode

<html>
<head>
<script>
var krpano = function(){
   return document.getElementById('krpanoSWFObject');
}

var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value!="nothing"){
  krpano.set("plugin[backgroundholder].url", chosenoption.value);
 }
}
</script>
</head>
<body>
<form id="aform">
<select id="mymenu" size="1">
<option value="bg1.jpg"  selected="selected">Background 1</option>
<option value="bg2.jpg">Background 1</option>
</select>
</form>
</body>
</html>

krpano code:

	Quellcode
1	<plugin name="backgroundholder" parent="STAGE" keep="true" url="bg1.jpg" />

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

13

Montag, 14. November 2011, 11:08

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

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

14

Montag, 14. November 2011, 11:10

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

Zum Seitenanfang

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

15

Montag, 14. November 2011, 11:52

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.

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

16

Montag, 14. November 2011, 12:00

Thanks Zephyr once again....

http://tours.tourfactory.com/tours/tour.asp?t=707734 I am aiming for something similar.

Also previously we have worked on similar projects, with a complete customizable tour delivery system, along with Flyer, Syndications, Social Networking, etc. Agents/Brokers can login and create a complete tour from scratch, by uploading photos and information.

Regards,

OnisH

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

17

Dienstag, 15. November 2011, 05:35

Hi Klaus,

I am eagerly waiting for your expert comment on this.

Thanks,

OnisH

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

18

Dienstag, 15. November 2011, 13:49

Hi,

instead of:

Zitat von »onish«

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):

Quellcode

var masking:Shape=new Shape();  // use a Shape instead Sprite (better)
masking.visible = false;
var g:Graphics=masking.graphics;

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

var imagelayer:* = krpano.get("image.layer");
imagelayer.parent.addChild(masking);
imagelayer.mask = masking;

best regards,
Klaus

Zum Seitenanfang

onish

Anfänger

Beiträge: 23

19

Dienstag, 15. November 2011, 14:16

Unfortunately it is not working for me, I am not sure what am I doing wrong here.

I am trying to create and assign the mask in krpano_ready event. Also, tried on a button's click event.

»onish« hat folgendes Bild angehängt: