Sie sind nicht angemeldet.

XML based scrolling thumbnails - code and link

Graydon

Profi

  • »Graydon« ist der Autor dieses Themas

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

1

Mittwoch, 25. Februar 2009, 06:46

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

Quellcode

 
1

<include url="scroll.xml" />


Here's the code...

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

Profi

  • »Graydon« ist der Autor dieses Themas

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

2

Mittwoch, 25. Februar 2009, 08:50

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

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

Beiträge: 13 499

  • Nachricht senden

3

Mittwoch, 25. Februar 2009, 11:16

great! especially the diagonal one!

Job.1

Profi

Beiträge: 647

  • Nachricht senden

4

Mittwoch, 25. Februar 2009, 11:54

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

Shanti

Fortgeschrittener

Beiträge: 301

Wohnort: Puerto Vallarta

Beruf: Web Developer

  • Nachricht senden

5

Mittwoch, 25. Februar 2009, 17:40

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

Schüler

Beiträge: 60

  • Nachricht senden

6

Mittwoch, 25. Februar 2009, 21:51

RE: XML based scrolling thumbnails - code and link

Zitat von »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

Profi

  • »Graydon« ist der Autor dieses Themas

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

7

Mittwoch, 25. Februar 2009, 23:32

Zitat

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.

Zitat

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.

Zitat

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

Profi

Beiträge: 1 336

Wohnort: Duluth MN

  • Nachricht senden

8

Freitag, 27. Februar 2009, 05:14

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

Graydon

Profi

  • »Graydon« ist der Autor dieses Themas

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

9

Samstag, 28. Februar 2009, 21:55

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« hat folgende Datei angehängt:
  • scroll.xml (5,68 kB - 125 mal heruntergeladen - zuletzt: Heute, 06:34)
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Shanti

Fortgeschrittener

Beiträge: 301

Wohnort: Puerto Vallarta

Beruf: Web Developer

  • Nachricht senden

10

Freitag, 6. März 2009, 02:24

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

Schüler

Beiträge: 95

  • Nachricht senden

11

Samstag, 4. Juli 2009, 09:06

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

Quellcode

 
1
2
3

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

Graydon

Profi

  • »Graydon« ist der Autor dieses Themas

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

12

Samstag, 4. Juli 2009, 11:06

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

Anfänger

Beiträge: 8

  • Nachricht senden

13

Mittwoch, 9. September 2009, 10:55

RE: XML based scrolling thumbnails - code and link

Zitat von »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

Quellcode

 
1

<include url="scroll.xml" />


Here's the code...

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

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

  • Nachricht senden

14

Mittwoch, 9. September 2009, 20:42

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 )

Quellcode

 
1

alpha="0.50" blendmode="normal"

Add the following code after line 87:

Quellcode

 
1

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

Add the following code after line 92:

Quellcode

 
1

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


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

Salut.

Graydon

Profi

  • »Graydon« ist der Autor dieses Themas

Beiträge: 614

Wohnort: Texas

Beruf: Industrial gas turbine services.

  • Nachricht senden

15

Freitag, 11. September 2009, 06:46

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

Anfänger

Beiträge: 8

  • Nachricht senden

16

Freitag, 11. September 2009, 08:40

Zitat von »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 )

Quellcode

 
1

alpha="0.50" blendmode="normal"

Add the following code after line 87:

Quellcode

 
1

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

Add the following code after line 92:

Quellcode

 
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>

Ähnliche Themen