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/inde…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

    Code
    <include url="scroll.xml" />

    Here's the code...

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

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

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

  • Quote

    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.

    Quote

    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.

    Quote

    continuous / never ending

    haven't thought about this one... but maybe there's some way *wink*

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

  • 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

    Code
    origin="rightbottom" edge=""
    x="0" y="0"
    width="100" height="100"
  • 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

  • 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

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

    Code
    alpha="0.50" blendmode="normal"


    Add the following code after line 87:

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


    Add the following code after line 92:

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

    I hope this is what you are looking for... *unsure* *wink*

    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>

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!