Can you suggest a way to give images a sort of “3d effect” when they are used as buttons? It wouldn’t have to be too fancy- just some indicator to the operator that he actually clicked the image.
I’ve played around with the %bounds/stretch a little bit (adding 1% when clicked) while adding a little tint, and that isn’t too bad. But I thought maybe someone had a better idea.
I like to use Raised/Lowered bevel borders. This makes the image look very button-like. Check out the example on the attached window - it uses a combination of simple actions for mousePressed and mouseReleased, plus the Styles feature to achieve the effect you’re after.
pressed_image.fwin (4.32 KB)
I imported the window, but get this error:
Drat! Thats because I made the window in FPMI 3.1.3. It is currently being released as we speak - upgrade in a bit and then it’ll work.
Thanks Carl. I upgraded, and saw what you are doing. It looks pretty cool.
I’ve also attached a window with a couple of images that show a “clicked” effect using other properties in the case where I don’t really want to use a border (such as when a larger component might have a variety of smaller components that an operator can click on). Based on how complex the image is, this method is a little sluggish. Is it because of the screen re-draw rate? I’ve tried it two ways: Writing directly to the properties, and using the style customizer, but didn’t see a difference. It’s no big deal, and will just keep my clickable images simpler if there are no way I can speed it up.
ImagePress.fwin (5.35 KB)
Nice effect! It works well on my PC, but I could see re-rendering the image after rescaling and tinting to be “slow” since the user expects instant gratification. I bet it would be fast if you were to save the image and swap the path. Maybe Carl can provide some input on what’s going on with the Java2d rendering.
As I understand, styles are equivalent to changing the properties directly. It’s a more elegant, flexible, and templatable approach.
I tried it again with two images, and it works like a charm. I used two instances of the same image, set the position indentical for both, and set the bounds and tint differently on one image. I then just toggle the visible property, and effect is immediate. I tested it with more complex images, and it worked fine.
On to other things!
ImagePress.fwin (5.67 KB)
Good idea! It makes sense that your approach is faster because the rendering occurs when the window opens instead of right when you need it on the click event.
You could set up your own single grouped object on your palette to behave that way.
Create a container with a string image_path and boolean state dynamic properties. It should contain two image components with paths, visibility, bounds, etc bound to expressions based on your description.