How to use a black hotspot as background for several "flyin out" pictures ?

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

1

Thursday, February 9th 2012, 11:29pm

Hi,

I wanted a black "screen" set to alpha="0.6" as background for my pictures displayed via a "showpic" hotspot.
ex Click on the polygonal hotspot.

It works great so now i'd like to add it in an other pano with 3 pictures. It works only for two of them.
ex Click on the blue camera hotspots.

Here the code :

Source code

	<hotspot name="pic_Chambre"
	         keep="false"
	         visible="true" enabled="true" usecontentsize="false" handcursor="true" capture="true" children="true"
	         fillcolor     ="0xffffff" fillalpha     ="0.00" borderwidth     ="1.0" bordercolor     ="0xffffff" borderalpha     ="0.5"
	         fillcolorhover="0xffffff" fillalphahover="" borderwidthhover="" bordercolorhover="0xffffff" borderalphahover=""
..................................
       onclick="showpic();"
	         devices="desktop"
	         editor=""
	         pic="Chambre"
		>
		<point ath=" 93.8776" atv=" -3.1168" />
...........................
	</hotspot>	

	<hotspot name="noir"
			 url="images/noir.png"
			 visible="false"
			 edge="center"
			 ath="0" atv="0"
			 alpha="0.0"
			 keep="true"
			 scale="100"
			 zorder="1"
		   	 devices="desktop|tablet"
			/>		

	      <action name="showpic">
		<!-- creates a new hotspot and fly it out -->
		if(hotspot[get(pic)] === null,
			txtadd(picfilename,'%CURRENTXML%/images/pic_',get(pic),'.jpg');
	.............................
		set(hotspot[noir].visible, true);
		tween(hotspot[noir].alpha, 0.7, 0.6);
	</action>	

	<action name="flyout">
		set(hotspot[%1].enabled,false);
		tween(hotspot[%1].alpha,  0.0, 0.5, default, set(hotspot[%1].visible,false); );

.....................................
		tween(hotspot[noir].alpha, 0.0, 1);
		delayedcall(1, set(hotspot[noir].visible, false));
	</action>

I can't figure it out!

Any suggestions?

Thanks everybody. *smile*

Steph.

Steph

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

2

Wednesday, February 22nd 2012, 3:34pm

Any help?! *cry*

Steph

Go to the top of the page

Tuur

Sage

Posts: 3,203

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

3

Wednesday, February 22nd 2012, 4:46pm

mmm...

i don't see it, but i see a lot of .......... in your code..
Get them out first.

Cheers,
Tuur *thumbsup*

http://www.virtualtuur.com
Skype:studiotuur

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

4

Wednesday, February 29th 2012, 1:06am

Hi Tuur,

You're right.

Thing is i solved the problem with the last tour by get back one of the three picture. Howver i still have the same kind of problem with this one. I put a black hotspot in each scene but it looks like it works as it want. Sometimes it appears some times no!

Here the code :

Source code

	<!-- video player -->

     <plugin name="diapo_ho1"
        	url="videoplayer.swf"
			keep="true"
        	alturl="videoplayer.js"
        	videourl="patisserie2.f4v"
        	visible="false"
        	scale="1.0"
			alpha="0.0"
        	posterurl=""
        	align="center" x="0" y="0"
        	pausedonstart="true"
        	loop="false"
        	volume="1.0"
        	buffertime="4"
        	updateeveryframe="true"
        	onvideoready=""
        	onvideopaused=""
        	onvideocomplete="stop(); hide_diapo_ho1();"
        	onunsupported=""
        	devices="desktop"
        	zorder="28"
			onhover="if(ispaused, showtext(click to play, STYLE1), showtext(click to pause, STYLE1));"
			onclick="togglepause()"
        	/>       
  

       <!-- Hotspot video -->

	<hotspot name="invisible1"
			 url="hotspots/barre.png"
			 visible="true"
			 keep="false"
			 ath="0"
			 atv="0"
			 scale="100"
			 alpha="0.0"
			 onover="set(hotspot[invisible1].visible, false);set(freezeview, true); 
					 set(plugin[diapo_ho1].visible, true);
					 tween(plugin[diapo_ho1].alpha, 1.0, 1.0);
					  delayedcall(1, plugin[diapo_ho1].resume() );
					 noir_croix();"                        <!-- black mask action -->
			 devices="desktop|tablet"
			 />
	
 
      <!-- black mask hotspot  -->

	<hotspot name="noir"
			 url="images/noir.png"
			 visible="false"
			 edge="center"
			 ath="0" atv="0"
			 alpha="0.0"
			 keep="false"
			 scale="100"
			 selectable="false"
			 zorder="1"
		   	 devices="desktop|tablet"
			/>
 
                        <!-- black mask action -->

	<action name="noir_croix">
	
		tween(plugin[txt_presentation_deux].alpha,0, 0.7,,,set(plugin[%1].visible,false));
		set(hotspot[noir].visible, true); 
		tween(hotspot[noir].alpha, 0.7, 1); 
		set(plugin[croix].visible, true);
		tween(plugin[croix].alpha, 1.0, 1); 
		
	</action>

       <!-- flyout action with black mask visible false -->

	<action name="flyout">
		set(hotspot[%1].enabled,false);
		tween(hotspot[%1].alpha,  0.0, 0.5, default, set(hotspot[%1].visible,false); );
		tween(hotspot[%1].flying, 0.0);
		tween(hotspot[%1].scale,  get(hotspot[%1].oldscale));
		tween(hotspot[%1].rx,  get(hotspot[%1].oldrx));
		tween(hotspot[%1].ry,  get(hotspot[%1].oldry));
		tween(hotspot[%1].rz,  get(hotspot[%1].oldrz));s
		set(plugin[bton_mute].visible,false); 
		set(plugin[bton_son].visible,true);
		set(hotspot[pic_glaces].visible, true);
		tween(hotspot[noir].alpha, 0.0, 1);
		delayedcall(1, set(hotspot[noir].visible, false) );
		stopsound(glaces);
	</action>

I can't find the reason why it's not working properly.

Thanks for any help! *smile*

Steph.

Steph

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

5

Tuesday, March 6th 2012, 3:09pm

Any help?

thks.
Steph.

Steph

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

6

Wednesday, March 21st 2012, 2:49pm

Hi,

I've tried many ways to use a black hotspot as background when displaying a picture or a video in my tour (they are quite a lot inside).
Check here if you want to see (some scenes it works, some not?!):
Tour
Problem still the same, it doesn't work for each picture in this tour?!

My last try was to write this black hotspot in each scene :

Source code

	<hotspot name="noir"
			 url="images/noir.png"
			 visible="false"
			 ath="0" atv="0"
			 alpha="0.0"
			 keep="false"
			 scale="100"
			 selectable="false"
			 zorder="1"
			 preload="true"
		   	 devices="desktop"
			/>

Then called from the showpic action :

Source code

	<action name="showpic">
		<!-- creates a new hotspot and fly it out -->
		tween(plugin[txt_presentation_deux].alpha,0, 0.5,,,set(plugin[%1].visible,false));
		set(hotspot[noir].visible, true);
		tween(hotspot[noir].alpha, 0.7, 1);
		if(hotspot[get(pic)] === null,
			txtadd(picfilename,'%CURRENTXML%/images/pic_',get(pic),'.jpg');
			addhotspot(get(pic));
			getcenter(hsath,hsatv);
			copy(hotspot[get(pic)].ath, hsath);
			copy(hotspot[get(pic)].atv, hsatv);
			set(hotspot[get(pic)].visible,false);
			set(hotspot[get(pic)].distorted,true);
			set(hotspot[get(pic)].zorder,2);
			set(hotspot[get(pic)].scale,0.1);
			set(hotspot[get(pic)].alpha,0.0);
			<!--set(hotspot[get(pic)].effect,glow(0xFFFFFF,1.0,30,10000);dropshadow(10,45,0x000000,10,0.3););-->
			set(hotspot[get(pic)].onloaded, flyin(get(name)) );
			set(hotspot[get(pic)].onclick, flyout(get(name)) );
			copy(hotspot[get(pic)].url,picfilename); 
			tween(plugin[txt_presentation_deux].alpha,0, 0.5,,,set(plugin[%1].visible,false));
		,
			flyin(get(pic));
		);
		
	</action>

And hide it with the flyout action:

Source code

	<action name="flyout">
		set(hotspot[%1].enabled,false);
		tween(hotspot[%1].alpha,  0.0, 0.5, default, set(hotspot[%1].visible,false); );
		tween(hotspot[%1].flying, 0.0);
		tween(hotspot[%1].scale,  get(hotspot[%1].oldscale));
		tween(hotspot[%1].rx,  get(hotspot[%1].oldrx));
		tween(hotspot[%1].ry,  get(hotspot[%1].oldry));
		tween(hotspot[%1].rz,  get(hotspot[%1].oldrz));
		set(plugin[bton_mute].visible,false); 
		set(plugin[bton_son].visible,true);
		set(hotspot[pic_glaces].visible, true);
		set(hotspot[noir].visible, false);
		set(hotspot[noir].alpha, 0.0);
		stopsound(glaces);
	</action>

Does anybody would be ok to give me a hand on that?
Anymore idea to test.

Thanks. *smile*

Steph

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

7

Monday, April 2nd 2012, 9:16am

Any suggestion?! *cry*

Thanks.
Steph.

Steph

Go to the top of the page

sachagriffin

Master

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

8

Monday, April 2nd 2012, 3:54pm

Oh, I think you mean plugin, not hotspot. I never ran into an issue using "plugin".

Plugins are elements with position relative to your screen borders. Hotspots are elements relative to the panorama.

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

9

Monday, April 2nd 2012, 4:58pm

Hi Sachagriffin,

Thanks for details. However i mean hotspot. If it's plugin, the picture displayed through "flyin" action will be behind the black mask, this is not what i want. Did you have time to check my example link upon?

Thanks again.
Steph.

Steph

Go to the top of the page

nils

Beginner

Posts: 26

Location: Beijing

Occupation: photography, multimedia, fine-art printing

10

Monday, April 2nd 2012, 5:25pm

don't use the black hotspot ...

I tried to solve the same problem a while ago ... if you just want a black background it would be easier to do something like :

	Source code
1	tween(image.layer.alpha, 0.5);

You can control the background color so if you wanted a red background, I guess that would work too. Flyout hotspots give a nice effect, but then it's a pain to control their position relative to the screen or other elements ... If anybody knows a good way to control that, I would love to get pointed in the right direction.

Go to the top of the page

esys

Intermediate

Posts: 267

Location: Balazé France

Occupation: photographer

11

Monday, April 2nd 2012, 5:38pm

Hi nils,

Thanks for your suggestion. Could you be a bit more clear. Your tween var would be used in the flyin action with my black mask hotspot? Or do i have to set the background color of the player and then change the pano alpha like you wrote upon? If so where do you set the background, i never did this?

Thanks

About the position relative to the screen you could may be set a x and y position to your flyin picture in addition to : getcenter(hsath,hsatv); in the showpic action.
About others elements, if they're plugins, may be set the same align setting instead of getcenter and then add a x and y setting to your flyin picture.
With my knowledge that's all i could propose you. Hope this help a little bit.

Steph.

Steph

Go to the top of the page

nils

Beginner

Posts: 26

Location: Beijing

Occupation: photography, multimedia, fine-art printing

12

Monday, April 2nd 2012, 7:11pm

Here's the link about the backgroundcolor : http://krpano.com/docu/xml/#krpano.bgcolor

The idea make the pano transparent so that you can see the color from the background (see above) and use that in your flyout action, then on the flyback action, you just tween back the alpha to 1 ... this way, the pano gets darker, and you don't need to worry about the black hotspot which is kind of a dirty trick I think.
But I'm afraid things are a little more complicated than I remembered, and I have been too optimistic *unsure*

... Seems the image.layer property is not usable in XML scripting, but only in AS3 : http://krpano.com/docu/xml/#image.layer
To use it, you would have to create a simple plugin with a function that you could use to tween the image.layer.alpha property. It works fine (I have used it in AS3 myself, but I didn't think it couldn't be used in XML *wacko*

). Actually since "flyout" is only possible in flash it won't mess up with iPad/iPhone version of the tour ... but it requires creating a plugin for that purpose *pinch*

, and i don't know if you've done this before ...

I'm not able to check you virtual tour from where I live at the moment, so I can only guess from what I know of what you're trying to do ... here is what I would try with XML :
- have a small black 10x10px png
- use it as a hotspot ... but note the flying and distorted attributes ... I could not see that in your code. Then when you make the background visible, make sure it is at least the size of the screen.

Source code

<hotspot name="flyout_bg" url="black.png" keep="true" devices="flash" distorted="true" flying="1" zorder="0" visible="false" alpha="0" align="center" edge="center"/>

<action name="show_flyout_bg">
set(hotspot[flyout_bg].width, stagewidth);
set(hotspot[flyout_bg].height, stageheight);
set(hotspot[flyout_bg].visible, true);
tween(hotspot[flyout_bg].alpha, 0.7);
</action>

<action name="hide_flyout_bg">
set(hotspot[flyout_bg].visible, false);
set(hotspot[flyout_bg].alpha, 0);
</action>

You could use these functions in your flyout and flyback functions ... actually it would be more efficient to just add this behavior directly in your default flyout/flyback actions if you use it all the time ...
Not sure how that will work ... I used this before but recently I just worked with AS3 and I'm just getting back to XML these days.

Thanks for the information about the getcenter(h,v) function. I didn't know about it. I'm really not sure that's what I need for my purpose, but I'll play with it ... I'm sure I'll be using it somehow.

Hope this helps ...

Go to the top of the page

sachagriffin

Master

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

13

Monday, April 2nd 2012, 7:14pm

I see hotspots can't be over plugins.
I almost have the mystery solved.

Quoted from "esys"

Hi Sachagriffin,

Thanks for details. However i mean hotspot. If it's plugin, the picture displayed through "flyin" action will be behind the black mask, this is not what i want. Did you have time to check my example link upon?

Thanks again.
Steph.