You are not logged in.

XML based scrolling thumbnails - code and link

Graydon

Professional

  • "Graydon" started this thread

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

1

Wednesday, February 25th 2009, 6:46am

XML based scrolling thumbnails - code and link

I know Shanti put together a plugin that does a great job for scrolling thumbs (http://www.krpano.com/forum/wbb/index.ph…ad&threadID=232)... but I wanted to see if you could do something with xml.

With the 1.0.8b6 release and the stoptween() then it becomes easier.

I wouldn't want to do this for a large number of thumbs / panos... but it could be feasible for a smaller number. Also, when someone smarter than me comes along and creates a nice script that can auto generate the code based upon your existing files... then it might not be too bad considering the ease of customization that the xml offers... at least for people like me (i.e. non-flash programmers).

So, anyways, enough rambling...

Here's a link to a quick online sample where I pretty much just placed the scrolling thumbs over existing template...
http://testsite.marlincreek.com/demo/xmlscroll/

Below is the full xml code for JUST the scrolling thumbs portion. What you could do to test this out is to copy and paste into an xml file "scroll.xml" and then in your main xml file put

Source code

 
1

<include url="scroll.xml" />


Here's the code...

Source code

 
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

<krpano version="1.0.8">

<!-- forward button located on the bottom right scrolls images to the left -->
	<plugin name="button_forward"
		url="forward.png"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="51"
		alpha="1" blendmode="normal"
		smoothing="true"
		origin="rightbottom" edge=""
		x="0" y="0"
		width="100" height="100"
		scale="1"
		onloaded=""
		onhover="showtext(click me to move faster);"
		onover="action(start_move_forward,5);"
		onout="action(stop_move_forward);"
		ondown="action(start_move_forward,1);"
		onup="action(start_move_forward,5);"
		onclick=""
	/>

<!-- backward button located on the bottom left scrolls images to the right -->
	<plugin name="button_backward"
		url="back.png"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="51"
		alpha="1" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge=""
		x="0" y="0"
		width="100" height="100"
		scale="1"
		onloaded=""
		onhover="showtext(click me to move faster);"
		onover="action(start_move_backward,5);"
		onout="action(stop_move_backward);"
		ondown="action(start_move_backward,1);"
		onup="action(start_move_backward,5);"
		onclick=""
	/>

<!-- forward or scroll left moves all of the thumbs -- the passed variable controls the speed smaller is faster -->
	<action name="start_move_forward">
		tween(plugin[thumb1].x,-420,distance(420,%1),linear);
		tween(plugin[thumb2].x,-420,distance(420,%1),linear);
		tween(plugin[thumb3].x,-420,distance(420,%1),linear);
		tween(plugin[thumb4].x,-420,distance(420,%1),linear);
		tween(plugin[thumb5].x,-420,distance(420,%1),linear);
	</action>

<!-- the tweens here create a brief slowdown effect and could be removed -->
	<action name="stop_move_forward">
		tween(plugin[thumb1].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb2].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb3].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb4].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb5].x,-420,distance(10,0.5),linear);
		wait(0.5);
		stoptween(plugin[thumb1].x,plugin[thumb2].x,plugin[thumb3].x,plugin[thumb4].x,plugin[thumb5].x);
	</action>

<!--  same as the forward action just the other direction -->
	<action name="start_move_backward">
		tween(plugin[thumb1].x,420,distance(420,%1),linear);
		tween(plugin[thumb2].x,420,distance(420,%1),linear);
		tween(plugin[thumb3].x,420,distance(420,%1),linear);
		tween(plugin[thumb4].x,420,distance(420,%1),linear);
		tween(plugin[thumb5].x,420,distance(420,%1),linear);
	</action>

<!-- same as the forward action just another direction -->
	<action name="stop_move_backward">
		tween(plugin[thumb1].x,420,distance(10,0.5),linear);
		tween(plugin[thumb2].x,420,distance(10,0.5),linear);
		tween(plugin[thumb3].x,420,distance(10,0.5),linear);
		tween(plugin[thumb4].x,420,distance(10,0.5),linear);
		tween(plugin[thumb5].x,420,distance(10,0.5),linear);
		wait(0.5);
		stoptween(plugin[thumb1].x,plugin[thumb2].x,plugin[thumb3].x,plugin[thumb4].x,plugin[thumb5].x);
	</action>

<!-- this action controls what effects are applied to a thumb when the mouse moves over it -- this ensures they all do the same thing -->
	<action name="thumb_onover">
		set(plugin[%1].oy,-5);
	</action>

<!-- here you would reset anything you changed on the onover action above -->
	<action name="thumb_onout">
		set(plugin[%1].oy,0);
	</action>

<!-- the remainder is just the thumbs themselves -- note that all origins are bottom and x and y are 0 and that the ox attribute is used -->

	<plugin name="thumb1"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="-420" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb1);"
		onhover=""
		onout="action(thumb_onout,thumb1);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb2"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="-210" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb2);"
		onhover=""
		onout="action(thumb_onout,thumb2);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb3"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="0" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb3);"
		onhover=""
		onout="action(thumb_onout,thumb3);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb4"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="210" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb4);"
		onhover=""
		onout="action(thumb_onout,thumb4);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb5"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="420" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb5);"
		onhover=""
		onout="action(thumb_onout,thumb5);"
		ondown=""
		onup=""
		onclick=""
	/>

</krpano>


and if you need some quick images to use... here's the three that are referenced in above.







There's some interesting possibilities opened up with the latest beta...
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Graydon

Professional

  • "Graydon" started this thread

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

2

Wednesday, February 25th 2009, 8:50am

in the corner diagonal

here's another quick example utilizing the new features from the b6 release.

It is not quite as optimized on the scroll distances... but it shows some more capability.

demo link - http://testsite.marlincreek.com/demo/xmlscroll2/

scroll.xml code...

Source code

 
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

<krpano version="1.0.8">

<!-- forward button located on the bottom right scrolls images to the left -->
	<plugin name="button_forward"
		url="forward.png"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="51"
		alpha="1" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="center"
		x="300" y="50"
		rotate="45"
		width="100" height="100"
		scale="1"
		onloaded=""
		onhover="showtext(click me to move faster);"
		onover="action(start_move_forward,5);"
		onout="action(stop_move_forward);"
		ondown="action(start_move_forward,1);"
		onup="action(start_move_forward,5);"
		onclick=""
	/>

<!-- backward button located on the top left scrolls images to the right -->
	<plugin name="button_backward"
		url="back.png"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="51"
		alpha="1" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="center"
		x="50" y="300"
		rotate="45"
		width="100" height="100"
		scale="1"
		onloaded=""
		onhover="showtext(click me to move faster);"
		onover="action(start_move_backward,5);"
		onout="action(stop_move_backward);"
		ondown="action(start_move_backward,1);"
		onup="action(start_move_backward,5);"
		onclick=""
	/>

<!-- forward or scroll left moves all of the thumbs -- the passed variable controls the speed smaller is faster -->
	<action name="start_move_forward">
		tween(plugin[thumb1].x,-420,distance(420,%1),linear);
		tween(plugin[thumb2].x,-420,distance(420,%1),linear);
		tween(plugin[thumb3].x,-420,distance(420,%1),linear);
		tween(plugin[thumb4].x,-420,distance(420,%1),linear);
		tween(plugin[thumb5].x,-420,distance(420,%1),linear);
		tween(plugin[thumb1].y,420,distance(420,%1),linear);
		tween(plugin[thumb2].y,420,distance(420,%1),linear);
		tween(plugin[thumb3].y,420,distance(420,%1),linear);
		tween(plugin[thumb4].y,420,distance(420,%1),linear);
		tween(plugin[thumb5].y,420,distance(420,%1),linear);
	</action>

<!-- this stops the movement - no fancy slowdown effects this time -->
	<action name="stop_move_forward">
		stoptween(plugin[thumb1].x,plugin[thumb2].x,plugin[thumb3].x,plugin[thumb4].x,plugin[thumb5].x,plugin[thumb1].y,plugin[thumb2].y,plugin[thumb3].y,plugin[thumb4].y,plugin[thumb5].y);
	</action>

<!--  same as the forward action just the other direction -->
	<action name="start_move_backward">
		tween(plugin[thumb1].x,420,distance(420,%1),linear);
		tween(plugin[thumb2].x,420,distance(420,%1),linear);
		tween(plugin[thumb3].x,420,distance(420,%1),linear);
		tween(plugin[thumb4].x,420,distance(420,%1),linear);
		tween(plugin[thumb5].x,420,distance(420,%1),linear);
		tween(plugin[thumb1].y,-420,distance(420,%1),linear);
		tween(plugin[thumb2].y,-420,distance(420,%1),linear);
		tween(plugin[thumb3].y,-420,distance(420,%1),linear);
		tween(plugin[thumb4].y,-420,distance(420,%1),linear);
		tween(plugin[thumb5].y,-420,distance(420,%1),linear);
	</action>

<!-- same as the forward action just another direction -->
	<action name="stop_move_backward">
		stoptween(plugin[thumb1].x,plugin[thumb2].x,plugin[thumb3].x,plugin[thumb4].x,plugin[thumb5].x,plugin[thumb1].y,plugin[thumb2].y,plugin[thumb3].y,plugin[thumb4].y,plugin[thumb5].y);
	</action>

<!-- this action controls what effects are applied to a thumb when the mouse moves over it -- this ensures they all do the same thing -->
	<action name="thumb_onover">
		set(plugin[%1].oy,-205);
	</action>

<!-- here you would reset anything you changed on the onover action above -->
	<action name="thumb_onout">
		set(plugin[%1].oy,-200);
	</action>

<!-- the remainder is just the thumbs themselves -- note that all origins are now leftbottom but edge is bottom -- oy is to line them up from the corner and ox is used to put them in the row -->

	<plugin name="thumb1"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="bottom"
		x="0" y="0"
		ox="-420" oy="-200"
		rotate="45"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb1);"
		onhover=""
		onout="action(thumb_onout,thumb1);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb2"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="bottom"
		x="0" y="0"
		ox="-210" oy="-200"
		rotate="45"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb2);"
		onhover=""
		onout="action(thumb_onout,thumb2);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb3"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="bottom"
		x="0" y="0"
		ox="0" oy="-200"
		rotate="45"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb3);"
		onhover=""
		onout="action(thumb_onout,thumb3);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb4"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="bottom"
		x="0" y="0"
		ox="210" oy="-200"
		rotate="45"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb4);"
		onhover=""
		onout="action(thumb_onout,thumb4);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb5"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge="bottom"
		x="0" y="0"
		ox="420" oy="-200"
		rotate="45"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb5);"
		onhover=""
		onout="action(thumb_onout,thumb5);"
		ondown=""
		onup=""
		onclick=""
	/>

</krpano>


With some tweaking of the "interface" controls and imaging you could probably get a nice looking film strip effect going on as well.
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

3

Wednesday, February 25th 2009, 11:16am

great! especially the diagonal one!

Job.1

Professional

Posts: 647

  • Send private message

4

Wednesday, February 25th 2009, 11:54am

yeap !! graydon great solution *thumbsup*
Plugin Shop Le Chaudron iPad Interface ACM

Shanti

Intermediate

Posts: 301

Location: Puerto Vallarta

Occupation: Web Developer

  • Send private message

5

Wednesday, February 25th 2009, 5:40pm

Wow this is very nice!!! :D
Shanti Gilbert
http://www.mundopano.com
http://www.puertovallartavirtualtour.com
http://www.pvbeat.com
http://www.vallartarestaurants.com

totaln00ber

Trainee

Posts: 60

  • Send private message

6

Wednesday, February 25th 2009, 9:51pm

RE: XML based scrolling thumbnails - code and link

Quoted from "Graydon"

http://testsite.marlincreek.com/demo/xmlscroll/

Hmmm, you can probably re-use this as a Still Photos Gallery with Carousel. Oh the possibilities of Krpano ! *w00t*

If you can make it auto-scroll the thumbnails AND have it continuous / never ending, then that would be awesome! *thumbup*

Graydon

Professional

  • "Graydon" started this thread

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

7

Wednesday, February 25th 2009, 11:32pm

Quoted

still Photos Gallery with Carousel
That would be a practical app... just set an onclick to show a larger image...

... and if you set up your content consistently then you could reuse the actions / code using the %CURRENTXML% to load pano specific images.

might be a bit limiting in some situations... but it is possible.

Quoted

auto-scroll the thumbnails
I thought about this... one one option was to overlay two+ transparent png plugins... but any clicks only get passed through to the pano and not to other plugins that are under via z-order.

Quoted

continuous / never ending
haven't thought about this one... but maybe there's some way ;-)
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Virtual Northland

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

8

Friday, February 27th 2009, 5:14am

Graydon u rock. I can't wait tp implenent this code. Thanks for your time and sharing.

Graydon

Professional

  • "Graydon" started this thread

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

9

Saturday, February 28th 2009, 9:55pm

Not sure this rotational motion has an obvious use... but it might spark someone's creativity...

http://testsite.marlincreek.com/demo/xmlscroll3/

Just realized that I could upload xml files as attachements... might make it easier for you to test and play with *smile*

Note that I did modify the thumb(s) a bit so that I could keep track of which one was where... *blink*
Graydon has attached the following file:
  • scroll.xml (5.68 kB - 125 times downloaded - latest: Today, 6:34am)
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Shanti

Intermediate

Posts: 301

Location: Puerto Vallarta

Occupation: Web Developer

  • Send private message

10

Friday, March 6th 2009, 2:24am

Wow Graydon, those are really nice! :D

Thanks for sharing!
Shanti Gilbert
http://www.mundopano.com
http://www.puertovallartavirtualtour.com
http://www.pvbeat.com
http://www.vallartarestaurants.com

rinks

Trainee

Posts: 95

  • Send private message

11

Saturday, July 4th 2009, 9:06am

Hi Graydon,
I am new here & want to use your horizontal example but in a vertical format since I will have regular buttons at the bottom.
What parameters do I need to change to place it vertically?
MY guess is the following lines

Source code

 
1
2
3

origin="rightbottom" edge=""
x="0" y="0"
width="100" height="100"

Graydon

Professional

  • "Graydon" started this thread

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

12

Saturday, July 4th 2009, 11:06am

Hello Rinks,

Unfortunately, to change this to vertical requires changing quite a few items.

1. move the arrow buttons
2. move all of the thumbs so they stack vertically
3. change the tweens to where they move in the y direction
4. change the thumb_onover and thumb_onout actions to shift the ox instead of oy

It's not necessarily difficult, but it will require some tweaking in order to get it to function correctly.

If you start to walk through the xml and have some questions, let me know.

Graydon
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

rzayevt

Beginner

Posts: 8

  • Send private message

13

Wednesday, September 9th 2009, 10:55am

RE: XML based scrolling thumbnails - code and link

Quoted from "Graydon"

I know Shanti put together a plugin that does a great job for scrolling thumbs (http://www.krpano.com/forum/wbb/index.ph…ad&threadID=232)... but I wanted to see if you could do something with xml.

With the 1.0.8b6 release and the stoptween() then it becomes easier.

I wouldn't want to do this for a large number of thumbs / panos... but it could be feasible for a smaller number. Also, when someone smarter than me comes along and creates a nice script that can auto generate the code based upon your existing files... then it might not be too bad considering the ease of customization that the xml offers... at least for people like me (i.e. non-flash programmers).

So, anyways, enough rambling...

Here's a link to a quick online sample where I pretty much just placed the scrolling thumbs over existing template...
http://testsite.marlincreek.com/demo/xmlscroll/

Below is the full xml code for JUST the scrolling thumbs portion. What you could do to test this out is to copy and paste into an xml file "scroll.xml" and then in your main xml file put

Source code

 
1

<include url="scroll.xml" />


Here's the code...

Source code

 
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

<krpano version="1.0.8">

<!-- forward button located on the bottom right scrolls images to the left -->
	<plugin name="button_forward"
		url="forward.png"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="51"
		alpha="1" blendmode="normal"
		smoothing="true"
		origin="rightbottom" edge=""
		x="0" y="0"
		width="100" height="100"
		scale="1"
		onloaded=""
		onhover="showtext(click me to move faster);"
		onover="action(start_move_forward,5);"
		onout="action(stop_move_forward);"
		ondown="action(start_move_forward,1);"
		onup="action(start_move_forward,5);"
		onclick=""
	/>

<!-- backward button located on the bottom left scrolls images to the right -->
	<plugin name="button_backward"
		url="back.png"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="51"
		alpha="1" blendmode="normal"
		smoothing="true"
		origin="leftbottom" edge=""
		x="0" y="0"
		width="100" height="100"
		scale="1"
		onloaded=""
		onhover="showtext(click me to move faster);"
		onover="action(start_move_backward,5);"
		onout="action(stop_move_backward);"
		ondown="action(start_move_backward,1);"
		onup="action(start_move_backward,5);"
		onclick=""
	/>

<!-- forward or scroll left moves all of the thumbs -- the passed variable controls the speed smaller is faster -->
	<action name="start_move_forward">
		tween(plugin[thumb1].x,-420,distance(420,%1),linear);
		tween(plugin[thumb2].x,-420,distance(420,%1),linear);
		tween(plugin[thumb3].x,-420,distance(420,%1),linear);
		tween(plugin[thumb4].x,-420,distance(420,%1),linear);
		tween(plugin[thumb5].x,-420,distance(420,%1),linear);
	</action>

<!-- the tweens here create a brief slowdown effect and could be removed -->
	<action name="stop_move_forward">
		tween(plugin[thumb1].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb2].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb3].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb4].x,-420,distance(10,0.5),linear);
		tween(plugin[thumb5].x,-420,distance(10,0.5),linear);
		wait(0.5);
		stoptween(plugin[thumb1].x,plugin[thumb2].x,plugin[thumb3].x,plugin[thumb4].x,plugin[thumb5].x);
	</action>

<!--  same as the forward action just the other direction -->
	<action name="start_move_backward">
		tween(plugin[thumb1].x,420,distance(420,%1),linear);
		tween(plugin[thumb2].x,420,distance(420,%1),linear);
		tween(plugin[thumb3].x,420,distance(420,%1),linear);
		tween(plugin[thumb4].x,420,distance(420,%1),linear);
		tween(plugin[thumb5].x,420,distance(420,%1),linear);
	</action>

<!-- same as the forward action just another direction -->
	<action name="stop_move_backward">
		tween(plugin[thumb1].x,420,distance(10,0.5),linear);
		tween(plugin[thumb2].x,420,distance(10,0.5),linear);
		tween(plugin[thumb3].x,420,distance(10,0.5),linear);
		tween(plugin[thumb4].x,420,distance(10,0.5),linear);
		tween(plugin[thumb5].x,420,distance(10,0.5),linear);
		wait(0.5);
		stoptween(plugin[thumb1].x,plugin[thumb2].x,plugin[thumb3].x,plugin[thumb4].x,plugin[thumb5].x);
	</action>

<!-- this action controls what effects are applied to a thumb when the mouse moves over it -- this ensures they all do the same thing -->
	<action name="thumb_onover">
		set(plugin[%1].oy,-5);
	</action>

<!-- here you would reset anything you changed on the onover action above -->
	<action name="thumb_onout">
		set(plugin[%1].oy,0);
	</action>

<!-- the remainder is just the thumbs themselves -- note that all origins are bottom and x and y are 0 and that the ox attribute is used -->

	<plugin name="thumb1"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="-420" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb1);"
		onhover=""
		onout="action(thumb_onout,thumb1);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb2"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="-210" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb2);"
		onhover=""
		onout="action(thumb_onout,thumb2);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb3"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="0" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb3);"
		onhover=""
		onout="action(thumb_onout,thumb3);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb4"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="210" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb4);"
		onhover=""
		onout="action(thumb_onout,thumb4);"
		ondown=""
		onup=""
		onclick=""
	/>

	<plugin name="thumb5"
		url="thumb.jpg"
		keep="true"
		visible="true" enabled="true" handcursor="true" capture="true" children="true"
		zorder="50"
		alpha="1.00" blendmode="normal"
		smoothing="true"
		origin="bottom" edge=""
		x="0" y="0"
		ox="420" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		onloaded=""
		onover="action(thumb_onover,thumb5);"
		onhover=""
		onout="action(thumb_onout,thumb5);"
		ondown=""
		onup=""
		onclick=""
	/>

</krpano>


and if you need some quick images to use... here's the three that are referenced in above.







There's some interesting possibilities opened up with the latest beta...
Great job Graydon, how you made thumbnails 100% visible? I can find only initialalpha but making it 1 i just got visible thumbnails on the first load. When I onhover they become transparent barely visible.
Thanks,
Toga

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

14

Wednesday, September 9th 2009, 8:42pm

Hi rzayevt,

I am not sure to understand about what you are looking for... *confused*
It seems to be something around changing the alpha value for the thumbnails...
If so, let say you want the thumbnails with an alpha to 0.5 as default value and alpha to 1 when action onover thumbnails...

Change the alpha value from 1 to 0.5 for each thumbnails plugins ( code line 102, 124, 146, 168 and 190 )

Source code

 
1

alpha="0.50" blendmode="normal"

Add the following code after line 87:

Source code

 
1

set(plugin[%1].alpha,1);

Add the following code after line 92:

Source code

 
1

set(plugin[%1].alpha,0.5);


I hope this is what you are looking for... *unsure* ;-)

Salut.

Graydon

Professional

  • "Graydon" started this thread

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

15

Friday, September 11th 2009, 6:46am

yes - michel got it right. (thank you michel)

If you can post some sample code or a link to your pano... I (or some other friendly user) will try to take a look at it and let you know more specifically.
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

rzayevt

Beginner

Posts: 8

  • Send private message

16

Friday, September 11th 2009, 8:40am

Quoted from "michel"

Hi rzayevt,

I am not sure to understand about what you are looking for... *confused*
It seems to be something around changing the alpha value for the thumbnails...
If so, let say you want the thumbnails with an alpha to 0.5 as default value and alpha to 1 when action onover thumbnails...

Change the alpha value from 1 to 0.5 for each thumbnails plugins ( code line 102, 124, 146, 168 and 190 )

Source code

 
1

alpha="0.50" blendmode="normal"

Add the following code after line 87:

Source code

 
1

set(plugin[%1].alpha,1);

Add the following code after line 92:

Source code

 
1

set(plugin[%1].alpha,0.5);


I hope this is what you are looking for... *unsure* ;-)

Salut.
Thanks for your advice Michel, I appreciate that but probably I was wrong addressing my question here. I'm using scrolling thumbnails plugin by Shanti. What I want is that my thumbnails become zero transparent - 100% visible. Can you help please? Here are my codes:
This is for main xml:

<krpano version="1.0.8-beta 8" logkey="true">

<autorotate enabled="true"
waittime="3.0"
accel="1.5"
speed="10"
horizon="20"
tofov="150"
/>

<textstyle name="infostyle"
origin="center" edge="center" textalign="center" 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"
/>

<textstyle name="hoverstyle"
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"
/>


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

<action name="thumb00action">loadpano(test0.xml,null,merge,BLEND(1));</action>
<action name="thumb01action">loadpano(test1.xml,null,merge,BLEND(1));</action>
<action name="thumb02action">loadpano(test2.xml,null,merge,BLEND(1));</action>
<action name="thumb03action">loadpano(test3.xml,null,merge,BLEND(1));</action>
<action name="thumb04action">loadpano(test4.xml,null,merge,BLEND(1));</action>
<action name="thumb05action">loadpano(test5.xml,null,merge,BLEND(1));</action>
<action name="thumb06action">loadpano(test6.xml,null,merge,BLEND(1));</action>
<action name="thumb07action">loadpano(test7.xml,null,merge,BLEND(1));</action>
<action name="thumb08action">loadpano(test8.xml,null,merge,BLEND(1));</action>
<action name="thumb09action">loadpano(test9.xml,null,merge,BLEND(1));</action>
<action name="onstart">
showtext(Valentis Studio[br]Drag your mouse to navigate, infostyle);
</action>




<hotspot name="spot0" url="arrow.gif" ath="165" atv="0" scale="0.6" zoom="true"
alpha="1"
onover="tween(alpha,1);tween(scale,1);"
onout="tween(alpha,1);tween(scale,0.6);"
onclick="looktohotspot(spot0); loadscene(scene1, null, MERGE, BLEND(1));"
/>


<hotspot name="spot1" url="arrow.gif" ath="165" atv="0" scale="0.6" zoom="true"
alpha="1"
onover="tween(alpha,1);tween(scale,1);"
onout="tween(alpha,1);tween(scale,0.6);"
onclick="looktohotspot(spot1); loadscene(scene1, null, MERGE, BLEND(1));"
/>




<include url="test2.xml"/>
<progress showload="no" showwait="loopings(0xFFFFFF)"/>
<textstyle name="DEFAULT" font="Arial" fontsize="16" textcolor="0xFFFFFF" border="false" background="false" effect="glow(0x000000,0.7,4,2);dropshadow(4,45,0x000000,4,1);"/>

<events onenterfullscreen="set(plugin[openfs].visible,false); set(plugin[closefs].visible,true);" onexitfullscreen="set(plugin[openfs].visible,true); set(plugin[closefs].visible,false);"/>

<plugin name="controlpanel"
url="controlmenuV3-LPnotext.swf"
align="bottom"
/>

<action name="reset">
tween(view.fovmax, 90.0, 0.25);
tween(view.fov, 90.0, 0.50);
tween(view.fisheye, 0.0, 0.50, easeoutquad, set(display.flash10,on); );
tween(view.vlookat, 0.0, 0.50);
</action>

<action name="littleplanet">
set(display.flash10,off);
set(view.fovmax, 140);
set(view.stereographic,true);
tween(view.fov, 140.0, 0.5);
tween(view.fisheye, 1.0, 0.4);
tween(view.vlookat, 90.0, 0.50);
</action>


<plugin name="thumbnails"
url="as3Thumbsforkrpano.swf?TheXML=gallery1.xml"
keep="true" preload="false"
visible="true" enabled="true" handcursor="true" capture="true" children="true"
zorder="0"
alpha="1.00" blendmode="normal"
smoothing="true"
align="centertop" edge=""
x="" y="" ox="-20" oy="0"
width="600" height="200"
crop="" ondowncrop="" onovercrop=""
scale="1" scale9grid="" scalechildren="false"
rotate="0"
parent=""
mask=""
onloaded=""
onover=""
onhover=""
onout=""
ondown=""
onup=""
onclick=""
/>
</krpano>
And this is for thimbs gallery:
<?xml version="1.0" encoding="utf-8"?>

<images>
<thumboptions>
<thumbW>100</thumbW>
<thumbH>70</thumbH>
<ThumbOffset>20</ThumbOffset>
<InitialAlpha>1</InitialAlpha>
<ThumbPadding>20</ThumbPadding>
<ScrollSpeed>20</ScrollSpeed>
<ShownThumbs>9</ShownThumbs>
<font_type>Geneva</font_type>
<font_size>25</font_size>
<font_alpha>1</font_alpha>
<font_color>1xffffff</font_color>
<thumbMul>-4</thumbMul>
<thumbDebug>0</thumbDebug>
</thumboptions>
<pic>
<thumb>thumbs/test0.jpg</thumb>
<panoToLoadXml>thumb00action</panoToLoadXml>
<about>Bazar Meydani</about>

</pic>

<pic>
<thumb>thumbs/test1.jpg</thumb>
<panoToLoadXml>thumb01action</panoToLoadXml>
<about>Fountain</about>
</pic>

<pic>
<thumb>thumbs/test2.jpg</thumb>
<panoToLoadXml>thumb02action</panoToLoadXml>
<about>Maiden Tower</about>
</pic>

<pic>
<thumb>thumbs/test3.jpg</thumb>
<panoToLoadXml>thumb03action</panoToLoadXml>
<about>Azerbaijan Cinema Hall</about>
</pic>

<pic>
<thumb>thumbs/test4.jpg</thumb>
<panoToLoadXml>thumb04action</panoToLoadXml>
<about>Nizami</about>
</pic>

<pic>
<thumb>thumbs/test5.jpg</thumb>
<panoToLoadXml>thumb05action</panoToLoadXml>
<about>State Philarmony</about>
</pic>

<pic>
<thumb>thumbs/test6.jpg</thumb>
<panoToLoadXml>thumb06action</panoToLoadXml>
<about>Sabir</about>
</pic>

<pic>
<thumb>thumbs/test7.jpg</thumb>
<panoToLoadXml>thumb07action</panoToLoadXml>
<about>Park on Aziz Aliyev Street</about>
</pic>

<pic>
<thumb>thumbs/test8.jpg</thumb>
<panoToLoadXml>thumb08action</panoToLoadXml>
<about>Icheri Sheher station</about>
</pic>

<pic>
<thumb>thumbs/test9.jpg</thumb>
<panoToLoadXml>thumb09action</panoToLoadXml>
<about>Philarmony Interior</about>
</pic>

</images>

Similar threads