using crop on imagebutton hover

[Kia]

I've tried to make an expandable button with crop but looks like this one going to be tricky. I've been changing values for half a day but can't achieve this effect. please help.

this is what I've got so far:

Code: Select all

transform btnstat:
    on hover:
        linear 1.0 size (200, 50) crop (0, 0, 200, 50)
    on idle:
        linear 1.0 size (20, 50) crop (0, 0, 20, 50)

label keys:
    screen key1:
        imagebutton:
            xalign 0.4
            yalign 0.74
            idle "ui/2.png"
            hover "ui/2.png"
            focus_mask True
            action Jump("jmp1")
            at btnstat
    show screen key1
return

I know with adding pos (0.47,0.74) and pos (0.4,0.74) I can achieve the effect I want but I'm looking for a more efficient way to do this since I'm positioning this on different spots of screen and I might even need to move it around (or drag)

[PyTom]

You'd have to use a CDD to make a drag-to-expand button like you want. A click-to-expand button would be easy:

Code: Select all

default expanded = False

hbox:
     textbutton "Expand" action SetScreenVariable("expanded", True)
     if expanded:
           textbutton "Clickable" action Return(True)

That might give you enough of a molly-guard for your purposes.

[Kia]

actually it's not drag to expand. it just a button that expands on hover. my only problem is I cant get it expand from one sides and it expands to the both side. is there anything like anchor that I can add to crop (0, 0, 20, 50) so it know from witch side it should crop? something similar for size can be useful when I want to keep the cropped image at center.

[Milkymalk]

Your problem is that you use xalign. It sets the anchor, which you want to be at x=0. Use xpos instead and you should be fine.

[PyTom]

I'd suggest using xpos and ypos to position it, rather than xaligh and yalign. The later two set xanchor and yanchor as well, which is what is causing your problem.

[Kia]

like always I made the most simple mistake possible. thank you ^_^

[Kia]

now for expanding in all for directions what do you suggest?
I've got something like this but the animations don't look as smooth.

Code: Select all

transform w4w:
    on hover:
        linear 0.5 size (100, 100) crop (0, 0, 100, 100) pos(-50,-50)

    on idle:
        linear 0.5 size (20, 20) crop (50, 50, 10, 10) pos(0,0)

label k4:
    screen k:
        hbox:
            xpos 0.3
            ypos 0.3
            imagebutton:
                idle "ui/3.png"
                hover "ui/3.png"
                focus_mask True
                action Jump("jmp1")
                at w4w
    show screen k
return

I'll start messing with values to see what I can get till then.