Beautiful Simple Thumbs "DOWNLOAD TEMPLATE"

Beginner

Tuesday, November 17th 2009, 1:14am

Edit: LOOK LOWER TO DOWNLOAD (Post 3)

Hi, Im posting here, in order for this hopefully to become some kind of a tutorial, (not only for me but for others).

I want to create a simple looking Thumbnail scroller Using the plug-in "Scrolling Thumbnails" which will be able to minimise and expand...
The whole point of this, is for it to be Simple and Spacious.
here are some screen-shots i whipped up in photoshop...

Minimised:

Open:

I just dont know where to start really, I've seen it done, but didnt find anyone explaining how. I can do lots of things but flash remains a mystery to me.
So if anyone knows of a way how to do this in flash, XML or somehow create a "skin" for a plugin, let me know or at point me in the right direction... I can provide "templates" once I know how to do this.

This post has been edited 5 times, last edit by "slyraccoon" (Nov 22nd 2009, 5:44pm)

Go to the top of the page

Shanti

Intermediate

Posts: 301

Location: Puerto Vallarta

Occupation: Web Developer

2

Tuesday, November 17th 2009, 6:46am

Slide menus

try that, there is a sample xml on how to do it :)

Shanti Gilbert
http://www.mundopano.com
http://www.puertovallartavirtualtour.com
http://www.pvbeat.com
http://www.vallartarestaurants.com

Go to the top of the page

slyraccoon

Beginner

Posts: 12

3

Wednesday, November 18th 2009, 12:08am

DOWNLOAD THE TEMPLATE

Rate the Template

A total of 24 Votes have been submitted.

21%

IT IS SO BAD-ASS!!!! (5)

50%

SWEET! (12)

21%

S'OKAY (5)

4%

MEH' I CAN DO BETTER (1)

4%

PTF! MY BLIND DOG CAN DO THAT (1)

DOWNLOAD V1.01 1.16mb
DOWNLOAD V1.00 688kb

Thanks for the link Shanti, as I promised I made a template...
For everyone: I don't claim this to be any good, I am just sharing with what I have... so HAVE FUN, change things up and post back here for to see what improvements we can make!!!!
I had a long XML day trying to figure this thing out, I feel like I just advanced to level 17 of XMLage, gained 200xp and a perk.

This post has been edited 3 times, last edit by "slyraccoon" (Nov 22nd 2009, 5:46pm)

Go to the top of the page

machart

Trainee

Posts: 135

Location: Ostfriesland

4

Wednesday, November 18th 2009, 1:04pm

hello!

thanks for it!

one thing i would do different: on hover the thumbs become too big and seem to overlap... i would prefer to change the alpha instead... *tongue*

Go to the top of the page

slyraccoon

Beginner

Posts: 12

5

Thursday, November 19th 2009, 3:27pm

Quoted

one thing i would do different: on hover the thumbs become too big and seem to overlap... i would prefer to change the alpha instead...

If you figure it out, let me know... All i know it is that it is the scrolling thumbs feature, and is most probably changed in the gallery1.xml

This post has been edited 5 times, last edit by "slyraccoon" (Nov 19th 2009, 11:27pm)

Go to the top of the page

machart

Trainee

Posts: 135

Location: Ostfriesland

6

Thursday, November 19th 2009, 7:32pm

un ick hebb docht du mokst dat...

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

7

Thursday, November 19th 2009, 7:39pm

is that german , dutch or fries? ;-)

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Go to the top of the page

slyraccoon

Beginner

Posts: 12

8

Thursday, November 19th 2009, 11:36pm

I had a quick look at the thumbs, so far i got this:
Make the thumbs at least 5px bleed/border all around the image, in this case it's 110 x 71 px so add 10px more to the image total, (that way the thumbs wont blur or distort).
To make them not overlap: in the gallery1.xml change <ThumbPadding>15</ThumbPadding> from 15 to 17 and up....
Sorry, no luck with the alpha yet...

Here is my version "Villa BuonCristiani"

This post has been edited 1 times, last edit by "slyraccoon" (Nov 20th 2009, 1:11am)

Go to the top of the page

olihar

Trainee

Posts: 140

Location: Iceland

Occupation: Interaction Designer

9

Friday, November 20th 2009, 4:01am

How about letting the whole bar be activated by hovering over and when you leave it will go down again, and maybe have some kind of lock button to lock it in up position if the user wants.

I think its a bit funny to hover to activate and click to close....

Go to the top of the page

slyraccoon

Beginner

Posts: 12

10

Friday, November 20th 2009, 2:54pm

Yeah olihar, I totally Agree with you, but i came to a bit of a coding problem when i was writing this...
The function was: "onMouseOut = minimise" But when you hover over the thumbnails, it also reads as: onMuseOut = Minimise. So when you hover over a thumb the bar starts to minimise, then maximise, creating a jerking motion, and well... its just un-usable then....
I played around with it, then came up with the current alternative. (in the readme i said its buggy... that's one of those bugs!) thanks for your suggestion,and if anyone out there knows how to make it work let me know.

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

11

Friday, November 20th 2009, 7:41pm

Hi,

First, great template... sure it will help some in using Shanti's Scrolling Thumbnails plugin... *thumbup*

Quoted from "olihar"

How about letting the whole bar be activated by hovering over and when you leave it will go down again

Here a modified code to allow this....
virtualtour.xml: (erased the action(hide_onstart); ... no more needed)

Source code

<krpano version="1.0.8" onstart="">

	<include url="%SWFPATH%/plugins.xml" />
	
	<!-- Right Click -->
	<contextmenu>
		<item caption="FULLSCREEN" />
		<item caption="Virtual Tour"/>
	</contextmenu>


<!-- LOADING SCREEN  -->	
<progress showwait="none" showload="bar(center,190,17,-18%,-6%,shaded,0x000000,0xd1d1d1,0xAAAAAA)"/>
<events onloadcomplete="set(plugin[previewimage].visible,false);" />



<!-- LINKS TO TOURS FOR THUMBS -->	  
	<action name="loadpano">
		loadpano(%SWFPATH%/%1, null, MERGE, BLEND(1));
	</action>


	<action name="tour1">
		action(loadpano, tour1.xml);
	</action>
	
<!-- Enable and disable how ever much you want...

	<action name="tour2">
		action(loadpano, tour2.xml);
	</action>

	.........

	<action name="tour29">
		action(loadpano, tour29.xml);
	</action>
	
	-->
	

<!-- PANO SETTINGS -->	 
	<image type="SPHERE">  <sphere url="images/EXAMPLE.jpg"/>  </image>


	<display details="16" movequality="HIGH" stillquality="HIGHSHARP" />

	<view hlookat   	="0"
      	vlookat   	="0"
      	fov       	="90"
      	fovmin    	="40"
      	fovmax    	="150"
      	fisheye   	="0.35"
      	fisheyefovlink="0.50"
      	/>
		  
	<hotspot name="hotspot example" 
	 	url="hotspot_ani.swf"
	 	ath="0" 
	 	atv="0"
	 	scale="1"
	 	zoom="true"
	 	blendmode="normal"
		 onhover="showtext(Hotspot Example);"
		 onclick="action(tour1);"
	/>
		  

<!-- CURSORS -->	
<events onxmlcomplete="action(onstart);"/>

<action name="onstart"> action(arrowcursor); </action>
	
<action name="arrowcursor">
	set(control.mousetype, moveto);
	set(cursors.url,  %SWFPATH%/arrow-cursors.png);
	set(cursors.type, 4way);
	set(cursors.move,  	112|0|28|28);
	set(cursors.drag,  	112|0|28|28);
	set(cursors.arrow_r,	0|0|28|28);
	set(cursors.arrow_d,   28|0|28|28);
	set(cursors.arrow_l,   56|0|28|28);
	set(cursors.arrow_u,   84|0|28|28);
</action>
	
		 
</krpano>

plugins.xml: (resuming: thumbnails and fullscreen plugins become parent of menu plugin )

Source code

 <!-- Menu Bar for Thumbs -->
	<plugin 
		name="menu"
		url="menu.png"
		keep="true"
		visible="true"
		enabled="true"
		handcursor="false"
		capture="false"
		zorder="1"
		alpha="1.00"
		blendmode="normal"
		smoothing="true"
		align="bottom"
		edge="centre"
		x="0" y="0"
		ox="0" oy="20"
		rotate="0"
		width="" height=""
		scale="1"
		scale9grid=""
		crop=""
		mask=""
		onloaded=""
		onover="action(menu_show);"
		onhover=""
		onout="action(menu_hide);"
		ondown=""
		onup=""
		onclick=""
	/>

<action name="menu_show">
	tween(plugin[menu].y,67,distance(700,3),linear);
</action>

<action name="menu_hide">
	tween(plugin[menu].y,0,distance(700,3),linear);
</action>

<!-- Scrolling Thumbs plugin -->
<plugin name="thumbnails" 
		url="as3Thumbsforkrpano.swf?TheXML=./gallery1.xml" 
		parent="menu"
		keep="true"
		capture="false" 
		align="bottom"
		zorder="2"
		/>
		 
 <!-- Full Screen Button -->		 
<plugin name="fullscreen"
		url="fullscreen.png" 
		parent="menu" 
		align="bottom"
		keep="true"
		x="340" y="15" zorder="2"
		onclick="switch(fullscreen);"
		/>
			
<!-- Loading plugin -->
<plugin name="previewimage" 
		 url="load.png" 
		 align="center" 
		 preload="true" 
		 />

SAlut.

Go to the top of the page

olihar

Trainee

Posts: 140

Location: Iceland

Occupation: Interaction Designer

12

Saturday, November 21st 2009, 12:27am

Great work guys, I might give it a try tomorrow.

Go to the top of the page

slyraccoon

Beginner

Posts: 12

13

Sunday, November 22nd 2009, 5:58pm

Thanks michel, I was trying to figure out how to parent items, now i see it.
I updated the file in Post 3 with your fix and added a few other minor tweaks mostly image updates... You wouldn't know how to add a 1 second delay on the mouse out function?

Go to the top of the page

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

14

Sunday, November 22nd 2009, 8:05pm

Hi slyraccoon,

Quoted

You wouldn't know how to add a 1 second delay on the mouse out function?

Yes

... This can be done using the delayedcall() action... More info here: http://krpano.com/docu/actions/#delayedcall
Only one problem in using this action... the delayedcall()can not be stopped while it is called...
But KLAUS gave a solution to solve this issue... checking a variable before executing the actions inside the delayedcall()... Look here for more info: There is a mode to remove/stop a Delayedcall?

So, using all the above, the plugins.xml code becomes:

Source code

<!-- Menu Bar for Thumbs -->
	<plugin 
		name="menu"
		url="menu.png"
		keep="true"
		visible="true"
		enabled="true"
		handcursor="false"
		capture="false"
		zorder="1"
		alpha="1.00"
		blendmode="normal"
		smoothing="true"
		align="bottom"
		edge="centre"
		x="0" y="0"
		ox="0" oy="20"
		rotate="0"
		width="" height=""
		scale="1"
		scale9grid=""
		crop=""
		mask=""
		onloaded=""
		onover="set(delayedcallkilled,true); action(menu_show);"
		onhover=""
		onout="set(delayedcallkilled,false); action(menu_hide);"
		ondown=""
		onup=""
		onclick=""
	/>

<action name="menu_show">
	tween(plugin[menu].y,67,distance(700,3),linear);
</action>

<action name="menu_hide">
	delayedcall(1,if(delayedcallkilled == false, tween(plugin[menu].y,0,distance(700,3),linear)));
</action>

<!-- Scrolling Thumbs plugin -->
<plugin name="thumbnails" 
		url="as3Thumbsforkrpano.swf?TheXML=./gallery1.xml" 
		parent="menu"
		keep="true"
		capture="false" 
		align="bottom"
		zorder="2"
		/>
		 
 <!-- Full Screen Button -->		 
<plugin name="fullscreen"
		url="fullscreen.png" 
		parent="menu" 
		align="bottom"
		keep="true"
		x="340" y="15" zorder="2"
		onclick="switch(fullscreen);"
		/>
			
<!-- Loading plugin -->
<plugin name="previewimage" 
		 url="load.png" 
		 align="center" 
		 preload="true" 
		 />

SAlut.

Go to the top of the page

groumch

Beginner

Posts: 3

15

Thursday, January 21st 2010, 3:00pm

Hi,
I do have an Inquiery about technical issue.
I m facing of The FONTS of some titles have a slight shadow effect.
How can i get rid of it?
It is a visual distracting effect.
Many Thks

Go to the top of the page

slyraccoon

Beginner

Posts: 12

16

Monday, January 25th 2010, 5:55pm

Quoted from "groumch"

The FONTS of some titles have a slight shadow effect.
How can i get rid of it?

Im not sure, but i remember that its in the documination of "Scrolling Thumbnail" plugin by Shanti.
also try the forum.
Best of Luck

Go to the top of the page

Tangent12

Trainee

Posts: 90

Location: Liverpool, UK

Occupation: Application Developer

17

Tuesday, January 26th 2010, 2:29am

Quoted

The FONTS of some titles have a slight shadow effect.

How can i get rid of it?

Hi, I spent ages looking at the actionscript for this shadow effect. I found that it was actually applied to the info_txt text field on the stage.
I am talking about editing the FLA file.

I hope this helps.

Thanks.

TD

Liverpool based panoramic photography, virtual tour and
web media organisation specialising in high quality web experiences.

Go to the top of the page

wilsan

Trainee

Posts: 66

Location: Nederland

Occupation: Logistics Specialist – Planning & Logistics

18

Tuesday, January 26th 2010, 11:44am

RE: DOWNLOAD THE TEMPLATE

Quoted from "slyraccoon"

DOWNLOAD V1.01 1.16mb
DOWNLOAD V1.00 688kb

Thanks for the link Shanti, as I promised I made a template...
For everyone: I don't claim this to be any good, I am just sharing with what I have... so HAVE FUN, change things up and post back here for to see what improvements we can make!!!!
I had a long XML day trying to figure this thing out, I feel like I just advanced to level 17 of XMLage, gained 200xp and a perk.

Thanks for the beautiful template. *thumbsup*

Thanks

Wilsan

andrewils

Go to the top of the page

Cyril57

Beginner

Posts: 2

Location: France

Occupation: Quality Manager

19

Monday, March 29th 2010, 10:22pm

Thank you for your contribution and support to all users like me who are beginner. ;-)

Thanks

My Web Site
My Latest Panorama

Go to the top of the page

djuna

Beginner

Posts: 12

20

Monday, May 24th 2010, 6:17pm

How to use with license?

This is great! *thumbsup*

Dummy question: How do I generate non-demo pages using this template? Yes, I've bought a license... However, dragging and dropping it into the same directory doesn't do the trick. Do I need to modify the template files for my own droplets??

Many thanks!

EDIT: Found the answer here: http://www.krpano.com/forum/wbb/index.ph…icense#post2285

Need to change name of krpano.license to virtualtour.license

This post has been edited 1 times, last edit by "djuna" (May 24th 2010, 6:33pm)

Go to the top of the page