Flyouts Starting with a Different Image

  • I've used the flyout images and they're great. However in places where the I want it to show more of the pano than the flyout image, I'd prefer a small thing like a red dot, or a logo (this also makes all the flyouts uniform).

    Is there any way to make it so that the flyout image is one thing and then when clicked on morphs or changes into the picture you're trying to show?

    thanks!

  • Well I've got an idea. There's and example where you can tween from one hotspot to another.

    https://krpano.com/examples/116/e…ver-change.html

    Well I took this example and exited the image one to look like a red dot. It work perfectly (although I would like to cram this whole thing into a style like the flyouts).


    <hotspot name="spot"
    url="flyouthotspot.png"
    distorted="true"
    ath="0"
    atv="0"
    scale="0.5"
    rx="0" ry="0" rz="0"
    zorder="2"
    onover="set(hotspot[spot_over].visible,true); tween(hotspot[spot_over].alpha,1,0.5,default);"
    onout="tween(hotspot[spot_over].alpha,0,0.5,default, set(hotspot[spot_over].visible,false));"
    onclick=""
    />

    <hotspot name="spot_over"
    url="image2.jpg"
    zorder="3"
    visible="false"
    enabled="false"
    alpha="0"
    onloaded="copyhotspotsettingsfrom(spot);"
    />

    <action name="copyhotspotsettingsfrom">
    copy(distorted, hotspot[%1].distorted);
    copy(ath, hotspot[%1].ath);
    copy(atv, hotspot[%1].atv);
    copy(scale, hotspot[%1].scale);
    copy(rx, hotspot[%1].rx);
    copy(ry, hotspot[%1].ry);
    copy(rz, hotspot[%1].rz);
    </action>

    Now the problem is the onclick "". how can I link the flyout style with these hotspots? The hotspot xml has 4 stages, so somewhere I'm going to have to plug in this tweening, but I'm not wise enough to know where. Here's the flyout code:

    <!-- use a <style> to share the same attriubtes for all hotspots -->
    <style name="flyoutimage"
    distorted="true"
    backup_rx="0"
    backup_ry="0"
    backup_rz="0"
    backup_scale="0"
    backup_zorder="0"
    flying="0.0"
    flystate="0"
    onclick="if(flystate == 0, flyout_by_name(get(name)), flyback_by_name(get(name)) );"
    />

    <!--
    flyout/flyback actions
    (for more stylish in/out animations play with different tweentypes and times)
    -->

    <action name="flyout_by_name">
    <!-- make all other hotspots flying back -->
    flyback_others();

    <!--
    for best control set 4 fly states:
    0 = normal
    1 = while flying out
    2 = out
    3 = while flying back
    -->

    <!-- save original position/rotation -->
    if(hotspot[%1].flystate == 0,
    copy(hotspot[%1].backup_rx, hotspot[%1].rx);
    copy(hotspot[%1].backup_ry, hotspot[%1].ry);
    copy(hotspot[%1].backup_rz, hotspot[%1].rz);
    copy(hotspot[%1].backup_scale, hotspot[%1].scale);
    copy(hotspot[%1].backup_zorder, hotspot[%1].zorder);
    );

    <!-- set new state -->
    set(hotspot[%1].flystate,1);
    set(hotspot[%1].zorder,99);

    <!-- tween the rotations values to 0 for a flat screen view -->
    tween(hotspot[%1].rx, 0);
    tween(hotspot[%1].ry, 0);
    tween(hotspot[%1].rz, 0);
    tween(hotspot[%1].scale, 1.5);

    <!--
    tween 'flying' to 1.0,
    this makes the hotspot independent from the panorama rotation and scaling
    -->
    tween(hotspot[%1].flying, 1.0, 0.5, default, set(hotspot[%1].flystate,2); );
    </action>


    <action name="flyback_by_name">
    if(hotspot[%1].flystate != 3,
    set(hotspot[%1].flystate,3);

    <!-- tween back to the stored backup values -->
    tween(hotspot[%1].rx, get(hotspot[%1].backup_rx) );
    tween(hotspot[%1].ry, get(hotspot[%1].backup_ry) );
    tween(hotspot[%1].rz, get(hotspot[%1].backup_rz) );
    tween(hotspot[%1].scale, get(hotspot[%1].backup_scale) );

    copy(hotspot[%1].zorder, hotspot[%1].backup_zorder);

    <!-- tween 'flying' also back to 0.0 -->
    tween(hotspot[%1].flying, 0.0, 0.5, default, set(hotspot[%1].flystate,0); );
    );
    </action>


    <action name="flyback_others">
    for(set(i,0), i LT hotspot.count, inc(i),
    if(hotspot[%i].flystate GT 0, flyback_by_name(get(hotspot[get(i)].name)); );
    );
    </action>

    Also, while the first image (the red dot) should be the same across all flyouts, the on onover image and the flyout image will be unique.

    I need some help!

Participate now!

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