containers and interaction

    I want to create some sort of lightbox effect. So I thought I create a container with a black bg, which holds a textfield or somesort. Now I want to hide the whole container when I click in the black area of the container. But it seems there's no interaciton possible with the container. I tried to enable it, capture, handcursor, but it won't work. Is this the architectecture of the container? I would hate to use an image to force interaction.

    Code
    <layer name="popup_container" type="container" width="100%" height="100%" scalechildren="false" align="center" alpha="0" autoalpha="true" keep="true" bgcolor="0x000000" bgalpha="0.5" zorder="100"
		open="tween(layer[popup_container].alpha, 1);" close="tween(layer[popup_container].alpha, 0);"	enabled="true" capture="true" handcursor="true" onclick="showlog(); trace('click'); layer[popup_container].close();" >
	<layer name="link_63" type="container" bgcolor="0xbb1c21" bgalpha="1"  align="lefttop" width="85" height="85" x="85" y="85" scalechildren="false" maskchildren="true" keep="true">
		<layer name="map_btn" url="%SWFPATH%/skin/images/sprite.png" crop="85|0|85|85" onovercrop="85|85|85|85" />
	</layer>
	</layer>

    Hi!
    Just yesterday, I learned a new type layer and playing with sample code from exemle (krpano player viewer 1.08.15) on the menu …\xml-usage\buttonsbar got to hide menubar with the standard action(tween, set, with onhower button and etc).


    Code
    …	<!-- use the textfield with border, background, rounded edges and shadow as container for the buttons -->	<layer name="buttons" keep="true" url="%SWFPATH%/plugins/textfield.swf" align="bottom" width="252" height="44" y="-18"		background="true" backgroundcolor="0x000000" backgroundalpha="0.667" alpha="0.5"		border="true" bordercolor="0xFFFFFF" roundedge="25"		shadow="0.5" shadowrange="10" shadowcolor="0xFFFFFF" ONHOVER="tween(layer[buttons].alpha, 1.0, 0.5); tween(layer[buttons].y,12, 0.3);" ONOUT="tween(layer[buttons].alpha, 0.5, 0.5); delayedcall(2, showtext('to the pano');tween(layer[buttons].y,-18, 0.5););"  	>		<layer name="left"  url="vtourskin.png" scale="0.5" align="lefttop" x="10"  y="6" crop="0|192|64|64"  ondown="buttonglow(get(name));set(hlookat_moveforce,-1);"  onup="buttonglow(null);set(hlookat_moveforce,0);" />		<layer name="right" url="vtourskin.png" scale="0.5" align="lefttop" x="50"  y="6" crop="64|192|64|64" ondown="buttonglow(get(name));set(hlookat_moveforce,+1);"  onup="buttonglow(null);set(hlookat_moveforce,0);" />		<layer name="up"    url="vtourskin.png" scale="0.5" align="lefttop" x="90"  y="6" crop="0|256|64|64"  ondown="buttonglow(get(name));set(vlookat_moveforce,-1);"  onup="buttonglow(null);set(vlookat_moveforce,0);" />		<layer name="down"  url="vtourskin.png" scale="0.5" align="lefttop" x="130" y="6" crop="64|256|64|64" ondown="buttonglow(get(name));set(vlookat_moveforce,+1);"  onup="buttonglow(null);set(vlookat_moveforce,0);" />		<layer name="in"    url="vtourskin.png" scale="0.5" align="lefttop" x="170" y="6" crop="0|320|64|64"  ondown="buttonglow(get(name));set(fov_moveforce,-1);"      onup="buttonglow(null);set(fov_moveforce,0);"     />		<layer name="out"   url="vtourskin.png" scale="0.5" align="lefttop" x="210" y="6" crop="64|320|64|64" ondown="buttonglow(get(name));set(fov_moveforce,+1);"      onup="buttonglow(null);set(fov_moveforce,0);"     />	</layer>…

    It's work!


    As I understand it easy enough to do embedded layer or plug-in:

    Code
    <layer name="main container">
	<layer name="embed 1"/>	<layer name="embed 2"/>	<layer name="embed 3"/>	</layer>


    Try new
    architectecture! *thumbup*

    Panoreal — to make and see this wonderful world! *whistling*

    Quote from Arsdezi

    I knew about this method, a textfield or a 2px image usually does the trick. But with the new update, I was curious if it would be possible with the layer type container.

    btw, in the past I had issues with textfields as a parent. I got uncontrollable results. Can't remember the exact problem, but after numerous tries, I went back to the 2px method. Something with reading out the width/height resulting in a 0 (even when loaded) or the textfield not being clickable. Again Im not sure, and perhaps it's already fixed.

    Alsoo, sachagriffin, I'd sugest using a 2px image. There was a issue/limitation in how often a image could be repeated/stretched or was it some rounding issue. Sometimes when I put an 1px image to 100% wide and heigh, it still didnt cover everything.

    Textfields set with autosize have heights that aren't set at a determined time. One method I use is before setting a textfield with text, I set the height to -1, set the text, and read out the height in a loop. When it's not -1, I have my height.
    Yes, I know about the 2px thing. The overlay I use is actually 16x16 for some forgotten reason.

    Quote from Zephyr

    Btw why call it bgcapture? Why not just use capture?

    capture is already in use for the element itself, using it for the background layer was not possible for several reasons.


    Quote from Zephyr

    Btw will this propogate to the children in the layer (iow, the children will alsoo get the background containers onclick)

    no, the bgcapture setting only affects the background layer, nothing else...

    best regards,
    Klaus

Participate now!

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

Register Yourself Login