scrollarea: scrollsliders for images instead textfields

JPG_master

Hi friends,

Currently I am managing a lot off virtual tours e.g. for hotels and restaurants.
I managed to have kind of a picture gallery where you can flip between pictures and have a counter like 1 / 7 like everybody knows from newspaper webpages and their galleries.
I can create those dynamically basing on an item list. I have the same managed for text fields.
But now I am suffering from one idea:
I would like to have a hot spot popping up with scrolling area with scroll sliders window containing a very long e.g. JPEG image with a manual how to use the buttons.
( why it this way: the HTML formatting features especially including button graphics and stuff is very limited. So I thought off doing this little manual e.g. in a Word document to convert to PDF and export JPEG which results in just an example 300 pixels wide and 5000 pixels long so you can read it but you must scroll through it).

What have I done?
I was using one of Klaus famous examples with the scrolling text field and in the below given example I simply exchanged the URL element from textfield.swf to my image.

Funny is:
It does not move in any way if "overscroll" ( around later in the scrollarea.swf) is zero.
Putting this parameter to a value of one, you can track it but the "onscoll" event with the "hoverscroll" comparison is anymore fired as the basis of calculation for the new scrollslider position, but hoverscroll is "0".

The following is the origin of Klaus to be found in examples/xml-usage/scrollingtextfield:

<layer name="textfield" url="textfield.png" align="center" x="0" y="0" width="350" height="300" scale9grid="6|6|268|188">

<layer name="textmask" type="container" align="lefttop" x="5" y="5" width="-30" height="-10" maskchildren="true">
<layer name="textscroller" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" mwheel="true" direction="v" overscroll="0" align="lefttop" width="100%" height="100%" onscroll="if(hoverflow GT 0, div(yp,toverflow,hoverflow);Math.min(yp,1);Math.max(yp,0); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrollup].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight); mul(yp,th);add(yp,layer[scrollup].pixelheight); copy(layer[scrollslider].y,yp); );">
<layer name="text" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" x="0" y="0" width="100%" autoheight="true" background="false" border="false" onautosized="copy(layer[textscroller].height, height);"
padding="10 15"
html="data:testtext"
css="color:#000000; font-family:Arial; font-size:12px;"
/>
</layer>
</layer>

<layer name="scrollbar" type="container" bgcolor="0x000000" bgalpha="0.25" align="righttop" x="5" y="5" width="19" height="-10">
<layer name="scrollup" url="dirbutton.png" align="righttop" x="19" rotate="-90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,+1));" />
<layer name="scrolldown" url="dirbutton.png" align="rightbottom" x="19" rotate="+90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,-1));" />
<layer name="scrollslider" url="sliderbutton.png" align="righttop" x="0" y="19" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="if(layer[textscroller].hoverflow GT 0, copy(cy,y);copy(sy,mouse.stagey);dragging(); );" dragging="if(pressed, sub(dy,mouse.stagey,sy);add(ny,cy,dy);Math.max(ny,layer[scrollup].pixelheight); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight);Math.min(ny,th); copy(y,ny); sub(ny,layer[scrollup].pixelheight);sub(th,layer[scrollslider].pixelheight);div(ny,th); copy(fh,layer[textscroller].hoverflow); mul(fh,-1); mul(ny,fh); layer[textscroller].stopscrolling(); copy(layer[textscroller].y,ny); delayedcall(0,dragging()); );" />
</layer>

</layer>

I turn this into following ( and basing on this format I completely made this dynamic which is not relevant here):

<action name="maketxtlayers" >
if ( action_trace_list.item[ %0 ].trace , trace( ' Actionname : ', %0 , ' =: ', %1 ); );

addlayer( textfield );
set( layer[ textfield ].url, textfield.png );
set( layer[ textfield ].align, center );
set( layer[ textfield ].x, 0 );
set( layer[ textfield ].y, 0 );
set( layer[ textfield ].width, 350 );
set( layer[ textfield ].height, 300 );
set( layer[ textfield ].scale9grid, '6|6|268|188' );

addlayer( textmask );
set( layer[ textmask ].parent, textfield );
set( layer[ textmask ].type, container );
set( layer[ textmask ].align, lefttop );
set( layer[ textmask ].x, 5 );
set( layer[ textmask ].y, 5 );
set( layer[ textmask ].width, -30 );
set( layer[ textmask ].height, -10 );
set( layer[ textmask ].maskchildren, true );

addlayer( textscroller );
set( layer[ textscroller ].parent, textmask );
set( layer[ textscroller ].url, %SWFPATH%/plugins/scrollarea.swf );
set( layer[ textscroller ].alturl, %SWFPATH%/plugins/scrollarea.js );
set( layer[ textscroller ].mwheel, true );
set( layer[ textscroller ].direction, v );
set( layer[ textscroller ].overscroll, 1 ); 
set( layer[ textscroller ].align, lefttop );
set( layer[ textscroller ].width, 100% );
set( layer[ textscroller ].height, 100% );
set( layer[ textscroller ].onscroll, 'if(hoverflow GT 0, div(yp,toverflow,hoverflow);Math.min(yp,1);Math.max(yp,0); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrollup].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight); mul(yp,th);add(yp,layer[scrollup].pixelheight); copy(layer[scrollslider].y,yp); );' );

addlayer( text );
set( layer[ text ].parent, textscroller );

set( layer[ text ].url, '%BASEDIR%/super_long_narrow_text.jpg' );

set( layer[ text ].align, lefttop );
set( layer[ text ].x, 0 );
set( layer[ text ].y, 0 );
set( layer[ text ].width, 100% );
set( layer[ text ].autoheight, true );
set( layer[ text ].background, false );
set( layer[ text ].border, false );
set( layer[ text ].onautosized, 'copy(layer[textscroller].height, height);' );

addlayer( scrollbar );
set( layer[ scrollbar ].parent, textfield );
set( layer[ scrollbar ].type, container );
set( layer[ scrollbar ].bgcolor, 0x000000 );
set( layer[ scrollbar ].bgalpha, 0.25 );
set( layer[ scrollbar ].align, righttop );
set( layer[ scrollbar ].x, 5 );
set( layer[ scrollbar ].y, 5 );
set( layer[ scrollbar ].width, 19 );
set( layer[ scrollbar ].height, -10 );

addlayer( scrollup );
set( layer[ scrollup ].parent, scrollbar );
set( layer[ scrollup ].url, dirbutton.png );
set( layer[ scrollup ].align, righttop );
set( layer[ scrollup ].x, 19 );
set( layer[ scrollup ].rotate, -90 );
set( layer[ scrollup ].crop, 0|0|19|19 );
set( layer[ scrollup ].onovercrop, 0|19|19|19 );
set( layer[ scrollup ].ondowncrop, 0|38|19|19 );
set( layer[ scrollup ].ondown, 'asyncloop(pressed, layer[textscroller].scrollby(0,+1));' );

addlayer( scrolldown );
set( layer[ scrolldown ].parent, scrollbar );
set( layer[ scrolldown ].url, dirbutton.png );
set( layer[ scrolldown ].align, rightbottom );
set( layer[ scrolldown ].x, 19 );
set( layer[ scrolldown ].rotate, +90 );
set( layer[ scrolldown ].crop, 0|0|19|19 );
set( layer[ scrolldown ].onovercrop, 0|19|19|19 );
set( layer[ scrolldown ].ondowncrop, 0|38|19|19 );
set( layer[ scrolldown ].ondown, 'asyncloop(pressed, layer[textscroller].scrollby(0,-1));' );

addlayer( scrollslider );
set( layer[ scrollslider ].parent, scrollbar );
set( layer[ scrollslider ].url, sliderbutton.png );
set( layer[ scrollslider ].align, righttop );
set( layer[ scrollslider ].x, 0 );
set( layer[ scrollslider ].y, 19 );
set( layer[ scrollslider ].crop, 0|0|19|19 );
set( layer[ scrollslider ].onovercrop, 0|19|19|19 );
set( layer[ scrollslider ].ondowncrop, 0|38|19|19 );
set( layer[ scrollslider ].ondown, 'if(layer[textscroller].hoverflow GT 0, copy(cy,y);copy(sy,mouse.stagey);dragging(); );' );
set( layer[ scrollslider ].dragging, 'if(pressed, sub(dy,mouse.stagey,sy);add(ny,cy,dy);Math.max(ny,layer[scrollup].pixelheight); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight);Math.min(ny,th); copy(y,ny); sub(ny,layer[scrollup].pixelheight);sub(th,layer[scrollslider].pixelheight);div(ny,th); copy(fh,layer[textscroller].hoverflow); mul(fh,-1); mul(ny,fh); layer[textscroller].stopscrolling(); copy(layer[textscroller].y,ny); delayedcall(0,dragging()); );' );

</action>

HAS ANYBODY ANY IDEA WHY INSTEAD OFF THE TEXTFILED THE JPG DOES NOT MOVE?
My analysis reduced everything to the "layer[ textscroller ].onscroll, 'if(hoverflow " comparison togehter woth overscrol value (see above).
Taking e.g toverscroll, you get effects but no more simple scaling basis for the scrollslider.

thx

klaus.krpano

Hi,

I haven't checked your full code yet, but an image doesn't have an onautosized event.

Try changing this:

Code

set( layer[ text ].onautosized, 'copy(layer[textscroller].height, height);' );

to this:

Code

set( layer[ text ].onloaded, 'copy(layer[textscroller].height, height);' );

The scrollarea needs to get (to know) the size of the image to be able to work correctly.

Best regards,
Klaus

JPG_master

Zitat von klaus.krpano
.....
Try changing this:
Code
set( layer[ text ].onautosized, 'copy(layer[textscroller].height, height);' );
to this:
Code
set( layer[ text ].onloaded, 'copy(layer[textscroller].height, height);' );
The scrollarea needs to get (to know) the size of the image to be able to work correctly.
.....

Klaus, thx, that was the solution.
"overscroll" went back to ZERO.

I am really happy I could find you attention with that issue.

Just to let you and other interested peopl know, how i do the dynamics:

This defines the windows:
<PIXwin_list>
<item name="PIXwin_00" PIXwin="PIXwin_00" title="PIXwin_00 Bedienungsanleitung" id="00" br360_pano="p_A00" />
<item name="PIXwin_01" .../>
...
</PIXwin_list>

<!-- each window has an entry as such
<PIX_window name="PIXwin_00" caption="PIXwin_00 Test des PIXScrollings[br](c) Helge Bertling" >
<item name="PIX_00" url="ºSEDIR%/super_long_narrow_text.jpg" />
</PIX_window>
<PIX_window name="PIXwin_01" caption=" .. bla bla .." >
<item name="PIX_01" url=" ... " />
</PIX_window>

This action sets up the different layers:
<action name="makePIXlayers">
if ( action_trace_list.item[ %0 ].trace , trace( %0 ,' PIXwin_list.item.count: ', PIXwin_list.item.count ); );

if ( PIXwin_list,
if ( PIXwin_list.item.count,
for(
set(k,0), k LT PIXwin_list.item.count, inc(k),

makePIXlayer( get(PIXwin_list.item[get(k)].name), get(PIXwin_list.item[get(k)].title) ) ;
);
);
);
</action>

This is within MakePIXlayer:
.....
txtadd( PIXwin_scroller, %1, '_scroller' );

removelayer( get( PIXwin_scroller ) );
addlayer( get( PIXwin_scroller ) );
set( layer[ get( PIXwin_scroller ) ].parent, get( PIXwin_mask ) );

...

and so on (see first entry .. this was the structure to be turned into the dynamic creation.

Thanks again for support

scrollarea: scrollsliders for images instead textfields

Jetzt mitmachen!

Benutzer online in diesem Thema