how to....:?

stalwart

hi all,

I want to achieve something similar to this in the below example - specifically, when clicking on a hotspot, a still image (ie photograph) appears in screen centre, and clicking it, then closes. Not too bothered about the screen tint behind, but would be nice.........

http://www.360imagery.co.uk/VT/paignton_zoo/

How easy is it? I have only one image a client wants to insert into an existing KRPano aerial.

thanks

Stu

Phil

Hi Stu,

I think I've done what your looking to do. Click the last scene in this tour to see the pop up image.

http://www.360photopro.com/media/lbj/

Here's the code.

HTML

<!-- moon walk image -->
	<data name="moon-walk_html">
		<html> 
			<img src="images/moon-walk.jpg" width="1000" height="632"/>
		</html>
	</data>


	<action name="show_moon-walk_html">
		set(plugin[moon_menu8].enabled,false);
		set(plugin[moon-walk_html].alpha,0);
		set(plugin[moon-walk_html].textblur,15);
		set(plugin[moon-walk_html].blur,15);
		set(plugin[moon-walk_html].visible,true);
		set(plugin[moon-walk_html].enabled,true);
		tween(plugin[moon-walk_html].alpha,1,0.3);
		tween(plugin[moon-walk_html].textblur,0,0.3);
		tween(plugin[moon-walk_html].blur,0,0.3);
	</action>


	<action name="hide_moon-walk_html">
		set(plugin[moon-walk_html].enabled,false);
		set(plugin[moon_menu8].enabled,true);
		tween(plugin[moon-walk_html].alpha,0,0.3,null,set(plugin[moon-walk_html].visible,false));
		tween(plugin[moon-walk_html].textblur,20,0.3);
		tween(plugin[moon-walk_html].blur,20,0.3);
	</action>


	<plugin name="moon-walk_html"
 	    	url="%SWFPATH%/plugins/textfield.swf"
	    	keep="true"
 	    	visible="false" enabled="false" handcursor="true" capture="true" children="false"
 	    	zorder="0"
 	    	alpha="0.00" blendmode="normal"
 	    	smoothing="true"
 	    	origin="center" edge=""
 	    	x="0" y="0"
 	    	width="1000" height="632"
	    	scale="1"
	    	onloaded=""
	    	onover=""
	    	onhover="showtext(Click to Close);"
	    	onout=""
	    	ondown=""
	    	onup=""
	    	onclick="action(hide_moon-walk_html);"
	    	autosize="center"
	    	background="true"
	    	backgroundcolor="0x000000"
	    	blur="20"
	    	bordercolor="0"
	    	borderwidth="0"
	    	css="p{color:#FFFFFF; font-family:Arial; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
	    	glow="0"
	    	glowcolor="16777215"
	    	html="data:moon-walk_html"
	    	roundedge="0"
	    	selectable="true"
	    	shadow="1"
	    	textblur="20"
	    	textglow="0"
	    	textglowcolor="16777215"
	    	textshadow="0"
	    	/>

Alles anzeigen

I can help you though email or Skype if you have any trouble getting it to work.

Phil

VN2011

create a plugin for the photo itself.

create a hotspot for the camera icon

this will fade the photo in and scale it from 0 to full dead center in the screen. clicking the photo will close it. this does not provide the text that says click photo to close though.

stalwart

Zitat von Phil

Hi Stu,

I think I've done what your looking to do. Click the last scene in this tour to see the pop up image.

http://www.360photopro.com/media/lbj/

Here's the code.

HTML

<!-- moon walk image -->
<data name="moon-walk_html">
<html> 
<img src="images/moon-walk.jpg" width="1000" height="632"/>
</html>
</data>


<action name="show_moon-walk_html">
set(plugin[moon_menu8].enabled,false);
set(plugin[moon-walk_html].alpha,0);
set(plugin[moon-walk_html].textblur,15);
set(plugin[moon-walk_html].blur,15);
set(plugin[moon-walk_html].visible,true);
set(plugin[moon-walk_html].enabled,true);
tween(plugin[moon-walk_html].alpha,1,0.3);
tween(plugin[moon-walk_html].textblur,0,0.3);
tween(plugin[moon-walk_html].blur,0,0.3);
</action>


<action name="hide_moon-walk_html">
set(plugin[moon-walk_html].enabled,false);
set(plugin[moon_menu8].enabled,true);
tween(plugin[moon-walk_html].alpha,0,0.3,null,set(plugin[moon-walk_html].visible,false));
tween(plugin[moon-walk_html].textblur,20,0.3);
tween(plugin[moon-walk_html].blur,20,0.3);
</action>


<plugin name="moon-walk_html"
     url="%SWFPATH%/plugins/textfield.swf"
    keep="true"
     visible="false" enabled="false" handcursor="true" capture="true" children="false"
     zorder="0"
     alpha="0.00" blendmode="normal"
     smoothing="true"
     origin="center" edge=""
     x="0" y="0"
     width="1000" height="632"
    scale="1"
    onloaded=""
    onover=""
    onhover="showtext(Click to Close);"
    onout=""
    ondown=""
    onup=""
    onclick="action(hide_moon-walk_html);"
    autosize="center"
    background="true"
    backgroundcolor="0x000000"
    blur="20"
    bordercolor="0"
    borderwidth="0"
    css="p{color:#FFFFFF; font-family:Arial; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
    glow="0"
    glowcolor="16777215"
    html="data:moon-walk_html"
    roundedge="0"
    selectable="true"
    shadow="1"
    textblur="20"
    textglow="0"
    textglowcolor="16777215"
    textshadow="0"
    />

Alles anzeigen

I can help you though email or Skype if you have any trouble getting it to work.

Phil

Alles anzeigen

hi Phil, et al,

I've got this far with Phil's code:

http://www.360imagery.co.uk/VT/aerial/nott…igh_school/v.2/

2 questions:

1. The border is missing on the right-hand edge of the photo when it pops up - as though the box is the wrong dimensions (image itself is 940x445 pixels) - how do I amend this? This is the original:

2. How do I convert the camera button, as per Phil's code example, into a floating hotspot within the panorama itself?

Here's the Hotspot code:

<data name="valley_road_html">
<html>
<img src="images/valley_road.jpg" width="940" height="455"/>
</html>
</data>

<action name="show_valley_road_html">
set(plugin[valley_road_hotspot].enabled,false);
set(plugin[valley_road_html].alpha,0);
set(plugin[valley_road_html].textblur,15);
set(plugin[valley_road_html].blur,15);
set(plugin[valley_road_html].visible,true);
set(plugin[valley_road_html].enabled,true);
tween(plugin[valley_road_html].alpha,1,0.3);
tween(plugin[valley_road_html].textblur,0,0.3);
tween(plugin[valley_road_html].blur,0,0.3);
</action>

<action name="hide_valley_road_html">
set(plugin[valley_road_html].enabled,false);
set(plugin[valley_road_hotspot].enabled,true);
tween(plugin[valley_road_html].alpha,0,0.3,null,set(plugin[valley_road_html].visible,false));
tween(plugin[valley_road_html].textblur,20,0.3);
tween(plugin[valley_road_html].blur,20,0.3);
</action>

<plugin name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align="rightbottom"
zorder="1"
x="+50" y="80"
ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="action(show_valley_road_html);"
/>

thanks

Stu

VN2011

why use a textfield to hold a photo? there is no need for that. use the code i provided earlier in this thread and your photo will not be cut off. To may things to pay attention to using a textfield and alot of extra unneeded coding.

to make the camera inside the pano change it from a plugin to a hotspot. set a value for ath="0" and atv="0" add distorted="true" if you want the camera to bendwith the view. give me 5 min ill provide some code.

use this for the center photo.

use this for your camera icon. adjust ath and atv to get it where you want it.

thats it that is all you need. it should work

if you want to make it work for other photos you can use this. the action will set the url and the width and height so you can use anysize photo and multiple camera icons to pop them. use the same plugin for the center image that does not change.

set(plugin[centerphoto].url, %1);
set(plugin[centerphoto].width, %2);
set(plugin[centerphoto].height, %3);
tween(plugin[centerphoto].alpha,1,1);
tween(plugin[centerphoto].scale, 1,1);

</action>

you dont need a close action because when you click the photo it scales down and can't be seen.

stalwart

Zitat von VN2009

why use a textfield to hold a photo? there is no need for that. use the code i provided earlier in this thread and your photo will not be cut off. To may things to pay attention to using a textfield and alot of extra unneeded coding.
to make the camera inside the pano change it from a plugin to a hotspot. set a value for ath="0" and atv="0" add distorted="true" if you want the camera to bendwith the view. give me 5 min ill provide some code.
use this for the center photo.
<plugin name="centerphoto"
url="images/moon-walk.jpg" width="1000" height="632"
align="center"
edge="center"
alpha="0"
scale="0"
onclick="tween(plugin[centerphoto].alpha,0,1); tween(plugin[centerphoto].scale, 0,1);">
/>
use this for your camera icon. adjust ath and atv to get it where you want it.
<hotspot name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align=""
zorder="1"
atv="0" ath="0" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="tween(plugin[centerphoto].alpha,1,1); tween(plugin[centerphoto].scale, 1,1);">
/>
thats it that is all you need. it should work

Alles anzeigen

struggling with this version - can't get it to work. Here's the XML file:
http://www.360imagery.co.uk/temp/defaultskin.xml
any help would be great - am hoping to get this across to the Client tomorrow (Tuesday)...
thanks
Stu

VN2011

your xml has errors and can't be read from a brouser. or paste your full xml here. i tested the code it works.

Sudarchikov Andrey

Look at this tour http://webpokaz.ru/724003113/html/ click scene three, you can see camera hotspot on the window. Click on camera icon and image apear with frame border.
If you would like this, i can show the xml...

Regards!

stalwart

Zitat von VN2009

your xml has errors and can't be read from a brouser. or paste your full xml here. i tested the code it works.

here's the code - where are the errors??:

Code

<!-- START hotspot image pop up -->
<plugin name="valley_road"
url="images/valley_road.jpg" width="940" height="445"
align="center"
edge="center"
alpha="0"
scale="0"
onclick="tween(plugin[valley_road].alpha,0,1); tween(plugin[valley_road].scale, 0,1);>"
/>
<!-- END hotspot image pop up -->


<!-- START hotspot image pop up BUTTON -->
<plugin name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align=""
zorder="1"
atv="0" ath="0" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="tween(plugin[valley_road].alpha,1,1); tween(plugin[valley_road].scale, 1,1);>"
/>
<!-- END hotspot image pop up BUTTON -->

Alles anzeigen

thanks

Stu

VN2011

click that same link you posted to your xml earlier. you will see the error. something to do with whitespace.

that code should work. does it? if you want the camera icon to be inside the pano change this line from
<plugin name="valley_road_button" - to
<hotspot name="valley_road_button"
once that is done you can position the hotspot via the ath and atv values. ath and atv had no effect on plugins only hotspots. you would use X and Y coordinates for plugins. otherwise that code should pop your image already just as a plugin not a hotspot.

michel

Hi,

Zitat von VN2009

your xml has errors and can't be read from a brouser.

Zitat von stalwart

here's the code - where are the errors??:

As VN2009 says, your xml http://www.360imagery.co.uk/temp/defaultskin.xml has an error.... to be able to see it, just open it directly on your browser (as Klaus explains here)...
The error is in line 131 colone 59:

Code

onhover="showtext(Senior School Dining Hall & Sixth Form Centre,STYLE3);"

It is the & character that's makes the error !!! Change it by & (as Klaus explains here)

Also, your xml is not complete (the end part is missing):

Code

<!-- Senior School Dining Hall & Sixth Form Centre -->
	<hotspot name="hs0"
	     	keep="false"
	     	visible="true" enabled="true" handcursor="true" capture="true" children="true"
 	     	zorder="0"
	     	fillcolor 	="0xbedbeb" fillalpha 	="0.30" borderwidth 	="2.0" bordercolor 	="0xbedbeb" borderalpha 	="1.00"
	     	fillcolorhover="0x000000" fillalphahover="0.00" borderwidthhover="0.0" bordercolorhover="0x000000" borderalphahover="0.00"
	     	fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
	     	onover=""
	     	onhover="showtext(Senior School Dining Hall & Sixth Form Centre,STYLE3);"
	     	onout=""
	     	ondown=""
	     	onup=""
	     	onclick="looktohotspot(hs0,auto,smooth(150,25,100));"
	     	details="8"
	     	flying="0"
	     	inverserotation="false"
	     	usecontentsize="false"
		>
		<point ath="230.9364" atv=" 34.2627" />
		<point ath="245.723" atv=" 35.8063" />
		<point ath="242.7941" atv=" 48.0713" />
		<point ath="227.9651" atv=" 45.9270" />
		<point ath="227.9503" atv=" 45.2489" />
		<point ath="227.085" atv=" 45.0455" />
		<point ath= ........ ?????????????

Alles anzeigen

Hope this help....

SAlut.

stalwart

Zitat von VN2009

click that same link you posted to your xml earlier. you will see the error. something to do with whitespace.
that code should work. does it? if you want the camera icon to be inside the pano change this line from
<plugin name="valley_road_button" - to
<hotspot name="valley_road_button"
once that is done you can position the hotspot via the ath and atv values. ath and atv had no effect on plugins only hotspots. you would use X and Y coordinates for plugins. otherwise that code should pop your image already just as a plugin not a hotspot.

Thanks everyone - think I finally got it sorted:

http://www.360imagery.co.uk/VT/aerial/nott…high_school/v.2

cheers!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Stu

how to....:?

Jetzt mitmachen!

Benutzer online in diesem Thema