Aligning states
Aug 03, 2012
I've got a custom icon (imported png) that I'm using as a button. I want to have a hover state that is slightly larger than the normal state.
So I go in to edit states mode, add a hover state, and make the artwork slightly larger. The problem is that it gets larger down and to the right and I want to have this look like it is enlarging from the center.
I noticed the little cross-hairs/plus sign at the upper left of the icon and figure that is the "center point."
First question: Is there a way to align things centered on that point? Or do I just have to eyeball it?
So I aligned both states to look fairly centered on that little cross-hairs. Rolling over the icon states made it look like it was working. So I click the done editing states button.
But every time the Normal state would return the png icon to having the cross-hairs in the upper left. So now it jumps wildly. I tried centering first, then making the state. Center-state, save, center-other-state. And several other approaches.
Second question: Does the first normal state have to have the cross-hairs in the upper left?
Third question: Am I going about this all wrong? Is there some simple way to have it look like something is enlarging from the middle?
12 Replies
Some good questions.
First, if you're working with custom image-based buttons, I'd recommend you make all images the same size, even if you want the hover (or other state) to appear larger. Create one canvas size but make the normal state a little smaller than the full canvas size. Then, make your hover or other states larger to fill up the canvas. That's the best way to achieve a size change in states.
First question:
Edit your button state > right click the object > Size and position. You can modify the Horizontal and Vertical position.
Second question:
Normal state does not have to be at the crosshairs (0,0) but it's a good idea to keep that registration point. No harm moving things around, though.
Third question:
No, I think you're doing okay. You can resize your image for various states, but I find it's easiest to create all states at the same size and modify size and position of individual elements that way.
Thanks. I'm still not used to the Microsoft office style layout controls. So I'm having trouble finding things.
I don't understand your first statement. what is the canvas size? I imported one png, set its size to 60px, created a hover state using the same graphic, and set its size to 80px. Is that what you are trying to tell me?
My version of SL seems to be requiring that the Normal state have the artwork at 0,0 from the cross-hairs.
I go into Edit states, I center the normal on the cross hairs, I center the hover on the cross hairs, it looks good, I click Done editing states. But since I move the centers my button isn't in the right place anymore, so I need to move it over a bit.
If I click and drag the normal state jumps back to 0,0 and the artwork is missaligned between normal and hover.
If I nudge using the arrow keys, same thing.
If I move using the Size and position dialog, same thing.
Seems like when I'm done editing the button should move all of the states together. Right?
Pretty sure this is a bug. When you move a button/something with states they should all move together, right? I've submitted a ticket.
I have seen this recently and I agree it is a bug.
I would agree with David that if you make your button images the same size, when you create your states, duplicate the normal and then right click change picture will ensure your images are in the correct place. Doesnt really help you now but its something to look at for future buttons
I'm not understanding the suggestion about duplicating the state. I think when you say "..the same size..." you mean something different that I would understand? Do you mean make different icons for each of the different desired sizes? Use the regular hover one to create the states and then change the hover state to the differently sized source graphic file?
That might work for graphics, but this is also a problem for stage drawn buttons, etc. I just happened to come to it from imported graphics turned into a button. Everything seems to grow from the upper left, so if I want it to look like it enlarges from the middle I will have to move the hover state.
I'm also precise enough that I don't want to just eyball it. Nor do I want to have to (for example do)
24px - 26 px = -2 px
-2px/2 = -1px
Shift it one pixel to the left.
Not so difficult for this square, but more arithmetic than I want to do often.
And of course the real answer (until/when/if) it gets fixed is to not want hover states that use scaling.
If you use photoshop or fireworks or illustrator to make your images. Make sure they are all exactly the same dimensions and the buttons are in exactly the same place.
IN you image states you have two options a new state or duplicate a state, I always duplicate the normal state then right click the image, choose change picture and insert my next image. This way the position and size are all automatic.
If you want it to grow and know how much you have increased the image by it is easy to just position it
e.g image is 4px larger on hieght and width then set it at -1,-1
If I was building this in flash I would have to manually position my buttons,
I don't know if this helps, but when you're editing the button's (larger) state, you can Ctrl+Shift+Click & drag a corner of the button image, and it'll expand outward from (or shrink inward to) its center point. I did this recently on a button set, and it worked fine.
Cheers,
Carlos
Genius. Thanks. That fixes the problem for me. Of course it would still be good if all the states in a button moved together....
My situation is a bit different in that I created hover states of my custom buttons in a different color. The idea is that when you hover over the custom button, the state changes to hover and a green button should display. Each button, when clicked displays a layer specific to that button. This works fine. The issue happens when I preview. The hover states (green button) are behind the normal state button and can't be seen. How can I fix this?
Hello,
This is an old thread but in case anyone sees this I'm wondering if it's possible to create a state that does NOT move when a different state does. I have a text box that opens at the bottom of the screen, then a state where it turns into a circle when clicked, so it can be dragged to a target on an outline. When the dragged circle hits the target I want it to become a third state (a different shape text box), but it currently appears too high on the screen because the middle state (circle) has been moved up. I've use relative x and y positions, but every time I change them for the third state they seem to also change for the first state, which is weird.
Any solutions other than making my "third state" a copy of the object on a new layer?
Also, because that new layer is part of a freeform question (for the drag/drop) backgrounds are semi opaque. How can I change that?
Thanks,
Sarah
Also, one super annoying thing - persistent non-voluntary formatting. When you copy something from a state it often doesn't appear or function normally any more, and when I copied my text boxes from the freeform layer to a normal slide because of the flipping opaque background, they all still have an opaque background I can't fix so I have to build them all over again. Grrr.
Hey there Sarah, you came to the right place for help! Would you mind sharing a sample slide with us so we can get a clear picture of what's going on?
You can attach that slide to a new reply right here!
This discussion is closed. You can start a new discussion or contact Articulate Support.