Scaling a plugin automatically

    Ok, I am working (modifiying) on a plug-in but when i resize the browser window, everything scales EXCEPT this plugin... does anyone know why?

    I tried adding:

    stage.scaleMode = StageScaleMode.SHOW_ALL;

    to the AS3 and also removing it.

    this will make Krpano not work correctly (for some odd reason)

    the plugin scales when used alone, but once inside krpano it does not work, if I re size the window the plugion stays the same.

    btw, I also tried the scale in the xml, but it will scale it, just not autoscale it :P  
    any ideas?

    EDIT: Actually no plugins autoscale, is this not possible?

    Hi,

    the Flash stage scaleMode shouldn't be changed! - this could give very bad results

    to scale a plugin with the screensize use percent (%) values for the "width" or "height" attributes,
    width="100%" is the full screenwidth and height="100%" the full screenheight,
    for proportional scaling set one value to "PROP",

    e.g.

    Code
    <plugin .... width="10%" height="PROP" />

    if you want to notice this resizes in the plugin add a RESIZE EVENT in the as3 code,

    best regards,
    Klaus

    Hi,
    I have an intro image that is about 500px tall. I want it to be scale="1.0" however with a maximum size of 100% of stage/window.
    Because when viewing it in the facebook feed which makes the "window" pretty small, the intro image is bigger than the window.

    Is this possible? In a CSS world it would probably be max-size:100%; but I guess this isn't compatible with krpano's xml.

    Anyone?

    Quote from sachagriffin

    height="100%" width="prop"


    But doesn't that make the image's height 100% of the window even when in fullscreen?
    I want it to to be 500px tall (height) when it fits, but when the window is resized smaller than 500px I want it to start to resize to 100% height. Maybe I suck at explaining:P

    Quote from Alexey Tkachenko

    Hi!

    What if apply an event:

    Code
    <events name="scale_plugin" onresize="if(plugin[your_image].imageheight GT stageheight, set(plugin[your_image].height, 95%); set(plugin[your_image].width, prop);  );"
/>

    Works like a charm, Thanks Alexey!
    This easy function could be a feature request for a new max-height="100%" property.

    any ideas on how to GET the computed value of "prop" ?
    I use

    Code
    <layer name="T_MONUMENT" url="" align="topleft" edge="topleft" x="0%" width="50%" height="prop"  />
set(buttonH, get(layer[T_MONUMENT].height));
trace(buttonH);

    and get just "prop" when tracing the vaule of buttonH...

    (I want the actual computed prop value to use it in other actions)

    My idea is to calculate this value. You can use original image dimensions and current known width or height to calculate:
    In general proportions is kept, so: originalW : original H = ScaledW : ScaledH

    If scaledW is prop and can't be read than: ScaledW = originalW * ScaledH / originalH

    Tested code:

    Code
    set(scaledH,  get(plugin[your_plugin].height));   <!-- trace('scaledH:',get(scaledH));-->
set(originalH,get(plugin[your_plugin].imageheight)); <!-- trace('originalH:',originalH);-->   
set(originalW,get(plugin[your_plugin].imagewidth));  <!-- trace('originalW:',originalW); -->   
   
mul(calculatedH,originalW,scaledH); div(calculatedH,originalH);
trace('calculatedH:',get(calculatedH));

    this works just fine !

    i only had to transform my % values to pixel using stagewidth before using your approach. ( i like to design using percent values to keep the interface responsive...)

    Now i can place responsive buttons in both directions when designing my interface

    *smile*

    thanx Umalo

    This will be enough for landscape oriented images to add to your event list:
    <events name="scale_plugin" onresize="if(plugin[your_image].imageheight GT stageheight, set(plugin[your_image].height, 95%); set(plugin[your_image].width, prop); );"/>

    Hi,
    I have the same problem where my intro image is bigger than the scene area when viewing the pano on the facebook feed.

    This is my code for my intro image:

    Code
    <!--  INTRO IMAGE  -->
<plugin name="introimage" HasBeenPlayed="false" keep="true" url="skin/Click-N-Drag_icon.png" align="center" onclick="hideintroimage();" onloaded="autohideintroimage();" scale="1"/>
<action name="hideintroimage">
if(plugin[introimage].enabled,	set(plugin[introimage].enabled,false);tween(plugin[introimage].alpha, 0.0, 0.5, default, removeplugin(introimage)););
</action>
<action name="autohideintroimage">
if(plugin[introimage].HasBeenPlayed == false, set(plugin[introimage].alpha,0); tween(plugin[introimage].alpha,1.0,WAIT); delayedcall(5, hideintroimage()); set(plugin[introimage].HasBeenPlayed,true);	);
</action>
<!--  END INTRO IMAGE  -->

    And I tried to insert the following and some modifications to it, both before and after the above code, but without any success:

    Code
    <events name="scale_plugin" onresize="if(plugin[introimage].imageheight GT stageheight, set(plugin[introimage].height, 95%); set(plugin[introimage].width, prop);  );" />

    The attached image is what it looks like in the facebook feed, and the red circle is to illustrate how big the image is to see that it's bigger than the stage.

    Anyone got any idea how to solve it?
    Thanks guys! :)

    Try something like

    Code
    <events name="scale_plugin" onresize="if(plugin[introimage].imageheight GT stageheight, set(plugin[introimage].height, 95%); set(plugin[introimage].width, prop); , set(plugin[introimage].width, 95%); set(plugin[introimage].height, prop); );" />

Participate now!

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

Register Yourself Login