RollOver on SmartShapes

[hdwP]

Hello, I have one more problem with my current project:

Using Smart Shapes as buttons seems great and is technically working fine for me, however there are two issues:

- For some reason the color I picked for the text in my smart shape appears to be slightly different from the same text with the same color set on a regular button.

- I have defined the look of my RollOver state and it technically works, but only if I move my mouse over the button slowly, movements that are quicker and end on top of the button seem to not trigger the state change. On regular buttons it works fine.

In this case, I would be happy to just use regular buttons, except for one reason:

- Regular buttons seem to not allow me to change my line spacing and some of my buttons will have two lines of text. With the standard spacing the descenders and ascenders of my letters will slightly overlap.

[Lilybiri]

What is a 'regular' button? There are 6 button types:

1. Text button (takes over style of OS)
2. Image button
3. Transparent button

Those three are the old types, they cannot be used on master slides, as extra button on quiz/score slides, nor timed for the rest of the project. You need to choose one of them for the embedded quiz buttons.

New types are:

• Shape buttons
• SVG as button
• Bitmap as button

My absolute favourite since 7 years (when shapes appeared) are the Shape buttons. I use them all the time, except for embedded Quiz buttons where I choose the Transparent button. For responsive projects I will use SVGs as button. I never experienced the slow 'Rollover' you describe. Since I only use shape buttons and transparent buttons which have the same styling possibilities, didn't see a difference in color neither for the text.

How did you test? After publishing and uploading to a webserver?

[hdwP]

Thanks for the super quick reply again!

Here are two screenshots:  

Number one is a transparent button:

In comparison, this one is a shape button:

Both have the same exact color of green set as the color for the text and for the border: #00be82

To be fair for some reason in the preview of my reply it looks the same, but in the output it's not and also when comparing screenshots in photoshop I get this result:

Transparent button

Border: #00be82

Text: #00be82

Shape Button

Border: #00be82

Text: #6eba85

As for the RollOver:

This is the Transparent Button: https://streamable.com/pu5u30

This is the Shape Button: https://streamable.com/52cl4n

I tested by publishing and checking locally in Firefox. While typing this I also tried Chrome with different results!

The RollOver issue remains the same.

As for the color, in Chrome all items appear as #6eba85 instead of #00be82

[Lilybiri]

Do you always enter colors by the hexadecimal code?  I use to set up the Theme Color palette and choose colors from that palette.  Captivate is an eLearning tool, not a graphics desgn application like AI, PS or even ID with focus on print output. I understand that you want to have the same color, which would be the case when working with that palette. But that color will nevertheless been see ans different by the learners depending on the screen they uses and the browse and ...their eyes. Exact colors do not exist for viewing on screens, like is the case for print. Do you have a calibrated monitor? I cannot afford it, and wonder if your learners have such an expensive monitor.

I am just being realistic, cannot see a difference in the colors on my screen when looking at the screenshots, hope you understand my viewpoint (have been teaching Physics of light and colors in the past).

As for the slow rollover, wondering why.   Are you on version 11.5? If yes, do you see the same when using SVGs as button? Both are based on vectors, wonder if that is the reason. It never has really bothered me, but I am less perfectionist for that type of features (well known as perfectionist by my friends in most domains).

[hdwP]

As I said for some reason it does not show the difference in the uploaded screenshots but I can immediately see it in the output files and when looking at the screenshots locally.

When comparing the two colors, there is a rather large difference in the shade of green.

But either way, for this project it is important that the color value is correct. And to be fair I kind of expect to get #00be82 when typing in #00be82 and not #6eba85 instead, even if it's not a design-heavy program.

I do have one calibrated monitor and one that is not, but that only affects how I see the color not the screenshot, so the result wouldn't change. The learners won't need a calibrated monitor either, but the color still needs to appear the same as any other material from their company, including elements that are directly include in the training as JPGs and SVGs.

I am working with the color pallet and have picked the same color swatch for the respective elements.

I just double-checked if it really has the correct hex value attached to it everywhere, which it does.

I just checked and when using an SVG as a button and including text via Captivate, it does the same thing.

For my version, yes I am on 11.5 on a Mac which apparently already causes the issue with not being able to fully hide smart shapes with text on my stage and also when using software presentations by displaying y black box behind my cursor, which according to Adobe is not meant to be that way but also they don't have a solution for it 😕

[Lilybiri]

Remember that issue, looks indeed more of a Mac problem. 

Did you read my previous answer carefully?  Is this really 'very important' (not the other problem which you had, that was important) when you consider the goal of eLearning? Do all your learners have the same high-level screens? Will the big majority of them see the difference in color? Completely understand your viewpoint as designer, but developing engaging eLearning assets depends on totally different priorities than a slight difference in cclor. Will you have Windows using learners? 

[hdwP]

I do understand your point, but in this case the color is quite central to the topic and therefore it is very important to be the correct shade.

They will not have high-level screens, but again the color mismatch can not be visible between the training itself and assets pasted in it / seen next to it.

In any other training slight changes wouldn't be too problematic, but in this one it is.

And there seems no reason why the hex-value would change.

I've tried manually adding the hover effect through javascript, but didn't get that to work either because the regular button function seems to override this.

The viewers will likely be using Windows, some might use a Mac.