Forum Discussion
Shapes change alignment in preview mode
In Storyline, I have two circles of different sizes that are aligned to the same center point. In edit mode, they appear correctly centered on top of each other. However, in preview mode, the circles are no longer aligned.
It's also interesting that the selection bounding boxes (edge squares) do not appear in the correct position relative to the circle in edit mode - but this is the location where the circle is displayed in preview mode.
HELP! :)
BarbaraEdwar395: Weird—especially since the inner circle isn't centered in its bounding box.
As the staff would say, be sure you're working with the Storyline file on your local hard drive. (Because: working over a network can corrupt a file.)
You might also want to quit and then relaunch Storyline. (Because: gremlins.)
Then, try this: Delete those objects, and create new ones. (It's amazing how many "quirks" go away on a do-over.)
Potential workarounds so you only need one object:
- Line up the circles in editing mode, and then use Merge Shapes to combine them.
- Insert the smaller circle directly into the Normal state of the bigger circle.
- Create the concentric-circle effect by filling the big circle with a "gradient" fill that shifts from green to white at the desired intervals.
10 Replies
Have any of their states been changed? Anytime I see something off-center, it's because I gave the image multiple states. Are you able to share a .story file?
Great Question.
No states. Literally create shape - circle.
I'd chalk it up to the dimensions then. I had some luck getting good results in preview mode by manually adjusting the width and height of the images. Sometimes the issue for me is odd-numbered widths and heights previewing as one pixel off, but I have good reason to believe that the X, Y, width, and height values can also contain fractional values. As in, even though the width might show as 19px, it may actually be 18.62px or something, and that seems to complicate previews.
I've attached two images showing my edits to the left-most composite circle. In the slide-edit mode below, the inner circle of the furthest left composite seems to me to be one pixel too high while all of the others look fine:
But then in the Preview image below, the left-most one is the only one that looks centered while the second-from-left seems to have settled in the upper-right corner, the second-from-right in the bottom-left corner, and the right-most one in the bottom-right corner.
It's annoying to adjust images by pixels in the Drawing Tools menu, but it seems to be the best way. The usual clue to me that I've accidentally introduced fractional values is if I change a value with the Drawing Tools arrows and it either skips a value (from 19 to 21) or doesn't seem to change at all, suggesting to me that Storyline is either rounding the decimal up two steps or down zero steps respectively.
The same rounding errors can present in the X and Y.
Missed the attachment - here's a .story file of the single slide.
BarbaraEdwar395: Weird—especially since the inner circle isn't centered in its bounding box.
As the staff would say, be sure you're working with the Storyline file on your local hard drive. (Because: working over a network can corrupt a file.)
You might also want to quit and then relaunch Storyline. (Because: gremlins.)
Then, try this: Delete those objects, and create new ones. (It's amazing how many "quirks" go away on a do-over.)
Potential workarounds so you only need one object:
- Line up the circles in editing mode, and then use Merge Shapes to combine them.
- Insert the smaller circle directly into the Normal state of the bigger circle.
- Create the concentric-circle effect by filling the big circle with a "gradient" fill that shifts from green to white at the desired intervals.
Well... Look at that... I've been using Storyline for years and this is the first time I've noticed "merge states". Thanks for this!
Don't feel bad. For a loooong time, Storyline didn't have Merge Shapes. It was added in the last couple years or so. If you don't use that part of the Format ribbon, it's easy to overlook.
Solution: I inserted a smaller circle directly into the normal state of the larger circle.
Thanks!
You're welcome! Pay it forward when you can. 😊
BTW, inserting objects directly into the state of another object can be a great way to avoid the issues that sometimes occur when using a Group in an interaction. It's also a good way to ensure that an icon and the space around it are clickable.
Here's my post about it: TIP: Making icons easier to program and easier to click | E-Learning Heroes
I see this all the time, sometimes it can be the stroke allignment which in storyline is centre so half inside and half outside the shame so a 20 pixel circle with 1 pixel stroke is 20.5 pixels. Or it just the rendering which moves it off center I don't have a fix, AndrewBlemings- has some good advice as does JudyNollet the other fix is to create as an imagen that will work fine.
