Buttons - What the heck is going on?

Jul 09, 2020

Okay... I've been working with Articulate products since Presenter... and I'm not sure what's going, but in my latest SL project, I am having a serious issue creating buttons using images.

I've tried just creating states from the base image; I've tried creating a button and replacing the button content with separate state images; I've tried creating a shape button the same size as the image and inserting the images into the button states, keeping the base shape with no color or outline.

Nothing is working right and it is extremely frustrating.

Here are the issues:

  1. State popping position; Why does the image change positions from the position I placed the image in? I can't remember this previously being an issue, but now, when I change the size of the hover image or use a larger hover image and move it so that it would be centered on the normal state image, when I preview the slide, the hover pops to position itself so the top left corner of the image is aligned to the top left corner of the location I created the button in.

Sometimes the pop doesn't occur until AFTER I click the button, i.e., when I hover over the button, it works perfectly, but when I click it, then the hover state has snapped to be aligned to the left top corner in the state space.

  1. My images are 350x350 pixels; I want to resize the button to 90x90. Why can't I? Where are the sizing handles? For that matter, I can't even mouse-click drag the button - it's like it won't even select. Even if I use pixel sizing (Size and Position) it doesn't resize the button.
  2. Thought I would be able to fix the size / drag issue by creating a button shape and leaving the button shape in the button (no line or color) and inserting and aligning my images to the shape. Nope; now, although the button shows the handles, moving it only moves the shape; the image stays put and doesn't resize.

What is going on? This isn't the first time I've done this by a long shot, but now it seems like it doesn't work at all.

The worst part is, the snapping seems to be completely arbitrary, i.e., when it decides to snap. In some conditions, it's immediate... as soon as I hover, the hover state is snapped to the top left corner of the state space. At other times, it doesn't change position until after I click.

This is such a simple thing... I can't understand how it's become so laborious and convoluted.

Buttons in SL need to be redesigned from the ground up. State stacking has always been a pain.. and honestly, it's not the way a button should work. State swapping is how it should work. If they did, I could create a down state that was smaller than the normal state without it showing the normal state at the same time.

Second, the button state space needs to have its own coordinate space so that when the user hits align center and middle, it aligns the selected object to the center and middle of the state space... not to the content space, or even more weirdly, to coordinate space based on its current location in the content space.

If necessary, the button edit states should have its own Arrange commands unique to just that space.

I just can't understand how something that was so simple has become such a major pain.

 Edited to add attachment and clarify text.

 

3 Replies
Phil Mayor

I don't see that states have changed much. The idiosyncrasies have been there since day 1.

I get handles to resize not sure why you are not getting them.

Changing the image rather than adding to the state, should then effect the normal state as you are changing the normal state, if I want buttons bigger then I will create a normal state with a larger transparent area then in illustrator enlarge the button and ensure it is entered. Other times I will make the image transparent which will affect the normal state stacking.

I agree about the coordinates being specific to the state. At least it is now easier to use images to create states if you name them correctly.

Rodney Schmidt

Thanks Phil.

I didn't notice that there was any actual change to states myself, but I have built the same type of button before and haven't had this specific issue.

In the example I attached, I just enlarged the original image. But in other attempts, I did actually create a larger version of the icon (scaled in Illustrator) and I still had the positional snapping problem.

Oddly enough, I just tried it again using three separate images for the three states, and it worked like a charm.

The original example I provided was still doing the odd positional snapping after clicking the button, though.

I've just never run into this issue before where a state image shifted from the position I put it in inside the edited state.

This discussion is closed. You can start a new discussion or contact Articulate Support.