Successful video flyout

jl-krp

Intermediate

Posts: 154

Location: Bath

Occupation: Panographer - hobby and commercial

1

Sunday, May 15th 2011, 5:01pm

Ive looked though the examples but cannot find one that works
Has a succesful video flyout been made?
I can make video hotspots & flyouts but can't combine the two...

bw

JL

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

2

Wednesday, May 25th 2011, 7:40pm

Hi JL,

Here a mixed code of video-hotspot and flyout-hotspots examples:

Source code

<!--
	krpano 1.0.8
	- video-hotspot example
-->

<krpano version="1.0.8" onstart="showtext('[b][i]krpano[br]video hotspot example[/i][/b]', infostyle);">

	<!-- use the editor for moving,rotating,scaling hotspots -->
	<plugin name="editor"  url="%SWFPATH%/plugins/editor.swf"  />
	<plugin name="options" url="%SWFPATH%/plugins/options.swf" />
	

	<!-- text styles for startup text and onhover text -->
	<textstyle name="infostyle"
	       	origin="center" edge="center" textalign="center" yoffset="-170" background="false" border="false"
	       	fontsize="40" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
	       	showtime="4.0" fadetime="1.0" fadeintime="1.0"
	       	/>

	<textstyle name="videohoverstyle"
	       	background="false" border="false" textalign="center"
	       	fontsize="20" textcolor="0xFFFFFF" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
	       	fadetime="0.2" fadeintime="0.5"
	       	/>


	
	<!-- use only a grid preview pano to save download space ;-) -->
	<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />



	<!-- note - the url of the video must be always relative to the main krpano swf file -->
	<hotspot name="videospot" 
			 url="%SWFPATH%/plugins/videoplayer.swf" 
			 videourl="%SWFPATH%/examples/plugin-examples/video-hotspot/cats-short.flv"
			 distorted="true"
			 ath="0"
			 atv="0"
			 edge="center"
			 scale="1.0"
			 rx="0"
			 ry="0"
			 rz="0"
			 loop="true"
			 pausedonstart="true"
			 directionalsound="true"
			 range="110"
			 volume="0.7"
			 onhover="if(ispaused, showtext(click to play, videohoverstyle), showtext(click to pause, videohoverstyle));"
			 
			 
	     	flying="0.0"
	     	onclick="togglepause();
					  if(flying == 0.0, flyout()  );
	              	if(flying == 1.0, flyback() );"
			 />


	<!--
		flyout/flyback actions
		(for more stylish in/out moves play with different tweentypes and times)
	-->

	<action name="flyout">
		<!--
			save/backup the current rotation values!
			NOTE - it is important that the backup_* variables are predefined!
			this allows to save the variables at <hotspot> scope,
			if the variables where not predefined, they were saved at global scope
			and this would be a problem when more hotspots were used!
		-->
		copy(backup_rx,rx);
		copy(backup_ry,ry);
		copy(backup_rz,rz);
		copy(backup_scale,scale);

		<!-- tween the rotations values to 0 for a flat screen view -->
		tween(rx, 0);
		tween(ry, 0);
		tween(rz, 0);
		tween(scale, 1.5);

		<!--
			tween 'flying' to 1.0,
			this makes the hotspot independent from the panorama rotation and scaling
		-->
		tween(flying, 1.0);
	</action>

	<action name="flyback">
		<!-- tween back to the stored backup values -->
		tween(rx, get(backup_rx));
		tween(ry, get(backup_ry));
		tween(rz, get(backup_rz));
		tween(scale, get(backup_scale));

		<!-- tween 'flying' back to 0.0 -->
		tween(flying, 0.0);
	</action>


</krpano>

SAlut.

Go to the top of the page

jl-krp

Intermediate

Posts: 154

Location: Bath

Occupation: Panographer - hobby and commercial

3

Thursday, May 26th 2011, 9:11pm

v m t

Michel
Very many thanks!!
Will study and attempt to apply - if (when) I get it to work I'll inform the group
best wishes

JL

Go to the top of the page

jl-krp

Intermediate

Posts: 154

Location: Bath

Occupation: Panographer - hobby and commercial

4

Friday, June 3rd 2011, 11:11am

Nearly there!

Hi Michel
Your code almost works, but when the video hotspot is clicked on it zooms out and pauses. if clicked again it zooms back and resumes playing.
Here is my edited version of your code with pausedonstart set to false- nothing happens if set to true:

<hotspot name="video1"
url="plugins/videoplayer.swf"
videourl="f7.flv"
ath="-58"
atv="1.95"
scale="1"
rx="0" ry="30" rz="0"
distorted="true"
pausedonstart="false"
loop="true"
volume="0.7"
directionalsound="true"
range="120"
onhover="if(ispaused, showtext(click to play, videohoverstyle), showtext(click to pause, videohoverstyle));"

flying="0.0"
onclick="togglepause();
if(flying == 0.0, flyout() );
if(flying == 1.0, flyback() );"
/>

Thanks

JL

Go to the top of the page

VN2011

Professional

Posts: 1,336

Location: Duluth MN

5

Friday, June 3rd 2011, 4:15pm

JL-krp just remove the togglepause from the onclick. then it will only fly out and nto pause. you may have to create a pause button since there would be no way to then pause the video. maybe you dont want it paused.

onclick="togglepause();
if(flying == 0.0, flyout() );
if(flying == 1.0, flyback() );"

Go to the top of the page

jl-krp

Intermediate

Posts: 154

Location: Bath

Occupation: Panographer - hobby and commercial

6

Saturday, June 4th 2011, 9:40am

uncontrollable video

Thanks VN
Unfortunately your suggestion results in an uncontrollable video as you predicted and an extra stop/start button wouldn't fit in the planned layout.
Perhaps a zoomable video hotspot with click control on is not possible after all.

Thanks also Michel!

JL

Go to the top of the page

jmugarra

Beginner

Posts: 10

7

Monday, August 15th 2011, 12:27pm

Hi there.
Just a thought... As I understand it, the problem is linking the flyin/flyout action and the togglepause action to the same control (click).
You could link one of them to a different user input.
Aldo Hoeben developed a plugin that adds double click events. I haven't tried it yet, but I'm sure it'll work perfectly, and it could solve your problem.
Cheers

OK, I edit:
After a breifly testing the doubleclick plugin, it seems to work only in the whole viewer, not being able to set that event for a hotspot. Sorry...

This post has been edited 1 times, last edit by "jmugarra" (Aug 15th 2011, 12:58pm)

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

8

Monday, August 15th 2011, 8:07pm

Hi jmugarra,

Welcome... ;-)

Quoted

Just a thought... As I understand it, the problem is linking the flyin/flyout action and the togglepause action to the same control (click).
You could link one of them to a different user input.

Seems to be just a correct thought... *smile*

Quoted

Aldo Hoeben developed a plugin that adds double click events. I haven't tried it yet, but I'm sure it'll work perfectly, and it could solve your problem.
Cheers

OK, I edit:
After a breifly testing the doubleclick plugin, it seems to work only in the whole viewer, not being able to set that event for a hotspot. Sorry...

I can't say, as I had not tried the Aldo's plugin Doubleclick Plugin , but it seems that you are correct in saying it apply to the viewer only (the pano itself).
But, following your approach of an double click events, it can be simulated using xml stuff... Have a look to Klaus example here a complete xml only solution (doubleclick + zoom to click center)
So, inspired on Klaus code, here an example that does the togglepause action onclick and the flyin/flyout action ondoubleclick:

Source code

<krpano version="1.0.8" onstart="showtext('[b][i]krpano[br]video hotspot example[/i][/b]', infostyle);">

	<!-- use the editor for moving,rotating,scaling hotspots -->
	<plugin name="editor"  url="%SWFPATH%/plugins/editor.swf"  />
	<plugin name="options" url="%SWFPATH%/plugins/options.swf" />
	

	<!-- text styles for startup text and onhover text -->
	<textstyle name="infostyle"
	   		origin="center" edge="center" textalign="center" yoffset="-170" background="false" border="false"
	   		fontsize="40" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
	   		showtime="4.0" fadetime="1.0" fadeintime="1.0"
	   		/>

	<textstyle name="videohoverstyle"
	   		background="false" border="false" textalign="center"
	   		fontsize="20" textcolor="0xFFFFFF" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
	   		fadetime="0.2" fadeintime="0.5"
	   		/>


	
	<!-- use only a grid preview pano to save download space ;-) -->
	<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />



	<!-- note - the url of the video must be always relative to the main krpano swf file -->
	<hotspot name="videospot" 
			 url="%SWFPATH%/plugins/videoplayer.swf" 
			 videourl="%SWFPATH%/examples/plugin-examples/video-hotspot/cats-short.flv"
			 distorted="true"
			 ath="0"
			 atv="0"
			 edge="center"
			 scale="1.0"
			 rx="0"
			 ry="0"
			 rz="0"
			 loop="true"
			 pausedonstart="true"
			 directionalsound="true"
			 range="110"
			 volume="0.7"
			 onhover="if(ispaused, showtext(click to play, videohoverstyle), showtext(click to pause, videohoverstyle));"
			 
			 
	 		flying="0.0"
	 		onclick="do_ondoubleclick( onclick_action() , ondoubleclick_action() )"
			onclick_action="togglepause();"
			ondoubleclick_action="if(flying == 0.0, flyout() ); if(flying == 1.0, flyback() );"
			 />

	<action name="do_ondoubleclick">
		if(clicks === null, set(clicks,0) );
		inc(clicks);
		if(clicks == 1 , delayedcall(0.2, is_ondoubleclick(%1,%2) ) );
	</action>
	
	<action name="is_ondoubleclick">
		if(clicks GE 2,
			%2
			,
			%1
			);
		set(clicks,0);
	</action>
	
	<!--
		flyout/flyback actions
		(for more stylish in/out moves play with different tweentypes and times)
	-->

	<action name="flyout">
		<!--
			save/backup the current rotation values!
			NOTE - it is important that the backup_* variables are predefined!
			this allows to save the variables at <hotspot> scope,
			if the variables where not predefined, they were saved at global scope
			and this would be a problem when more hotspots were used!
		-->
		copy(backup_rx,rx);
		copy(backup_ry,ry);
		copy(backup_rz,rz);
		copy(backup_scale,scale);

		<!-- tween the rotations values to 0 for a flat screen view -->
		tween(rx, 0);
		tween(ry, 0);
		tween(rz, 0);
		tween(scale, 1.5);

		<!--
			tween 'flying' to 1.0,
			this makes the hotspot independent from the panorama rotation and scaling
		-->
		tween(flying, 1.0);
	</action>

	<action name="flyback">
		<!-- tween back to the stored backup values -->
		tween(rx, get(backup_rx));
		tween(ry, get(backup_ry));
		tween(rz, get(backup_rz));
		tween(scale, get(backup_scale));

		<!-- tween 'flying' back to 0.0 -->
		tween(flying, 0.0);
	</action>


</krpano>

Look at lines 49 to 67...

Hope it helps...

SAlut.

Go to the top of the page