Sie sind nicht angemeldet.

1

Dienstag, 17. November 2009, 01:14

Beautiful Simple Thumbs "DOWNLOAD TEMPLATE"

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.

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »slyraccoon« (22. November 2009, 17:44)


Shanti

Fortgeschrittener

Beiträge: 301

Wohnort: Puerto Vallarta

Beruf: Web Developer

  • Nachricht senden

2

Dienstag, 17. November 2009, 06:46

Slide menus

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

3

Mittwoch, 18. November 2009, 00:08

DOWNLOAD THE TEMPLATE

Rate the Template

Insgesamt 24 Stimmen

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.

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »slyraccoon« (22. November 2009, 17:46)


4

Mittwoch, 18. November 2009, 13:04

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*
__close to the rainbow__
_D300S|Sunwayfoto|iMaci7|PM|APP|KRP_
www.panographie.net

5

Donnerstag, 19. November 2009, 15:27

Zitat

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

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »slyraccoon« (19. November 2009, 23:27)


6

Donnerstag, 19. November 2009, 19:32

un ick hebb docht du mokst dat...
__close to the rainbow__
_D300S|Sunwayfoto|iMaci7|PM|APP|KRP_
www.panographie.net

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

7

Donnerstag, 19. November 2009, 19:39

is that german , dutch or fries?;-)
*thumbsup*

8

Donnerstag, 19. November 2009, 23:36

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"

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »slyraccoon« (20. November 2009, 01:11)


olihar

Schüler

Beiträge: 140

Wohnort: Iceland

Beruf: Interaction Designer

  • Nachricht senden

9

Freitag, 20. November 2009, 04:01

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....

10

Freitag, 20. November 2009, 14:54

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.

11

Freitag, 20. November 2009, 19:41

Hi,

First, great template... sure it will help some in using Shanti's Scrolling Thumbnails plugin... *thumbup*
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)

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<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 )

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 <!-- 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.

olihar

Schüler

Beiträge: 140

Wohnort: Iceland

Beruf: Interaction Designer

  • Nachricht senden

12

Samstag, 21. November 2009, 00:27

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

13

Sonntag, 22. November 2009, 17:58

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?

14

Sonntag, 22. November 2009, 20:05

Hi slyraccoon,

Zitat

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:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- 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.

15

Donnerstag, 21. Januar 2010, 15:00

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

16

Montag, 25. Januar 2010, 17:55

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

Tangent12

Schüler

Beiträge: 90

Wohnort: Liverpool, UK

Beruf: Application Developer

  • Nachricht senden

17

Dienstag, 26. Januar 2010, 02:29

Zitat

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.

wilsan

Schüler

Beiträge: 66

Wohnort: Nederland

Beruf: Logistics Specialist – Planning & Logistics

  • Nachricht senden

18

Dienstag, 26. Januar 2010, 11:44

RE: DOWNLOAD THE TEMPLATE



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

Cyril57

Anfänger

Beiträge: 2

Wohnort: France

Beruf: Quality Manager

  • Nachricht senden

19

Montag, 29. März 2010, 22:22

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

Thanks *thumbsup*

20

Montag, 24. Mai 2010, 18:17

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »djuna« (24. Mai 2010, 18:33)


Ähnliche Themen