Smart Shape Button Shrinkage Problem (it's not just cold)

[Andy_K_nz]

Would be helpful if someone has a solution for me but I feel this is more of an issue with Captivate Smart Shapes in general.

I love using Smart Shapes as buttons especially now you can have different states for Normal, Over and Down. The problem is that smart shapes when used as buttons shrink, which in some respects is good as it provides the user some type of visual feedback of interactivity and I think that was the intention when Smart Shapes as buttons were introduced. But here is the problem, If you position your cursor just on the edge of Smart Shape Button and click, the shape shrinks and is no longer under the cursor. When you release your mouse button any action that was attached to that button will not fire

I would be happy for someone to point out to me a quick solution that I may be missing but I've not found any posts regarding this. This problem makes me review my principles of interface design when using Adobe Captivate and Smart Shapes as buttons to ensure that the user clicks well within the active area of the Smart Shape button. We are only talking about about 5 pixels I think but if you have effects such as glows or shadows on the button then visually you are giving the user more opportunity to encounter this problem.

Any whoooo, if any one can tell me, 'oh, you just need to click this option...' and hey presto no more shrinkage then GREAT and I apologise for this rambling post

AndyK

[RodWard]

The 'shrinkage' only happens in the Down state of the button.  Have you tried enlarging the button shape slightly for the Down state?  If you make it so that the button grows slightly on press instead of shrinking, then that should solve both issues. You'll still be giving the learner feedback, but their mouse will then still always be over the hit area.

[Andy_K_nz · Accepted solution]

Hi Rod,

Yeah that was one of my first thoughts, but I quickly discovered that although the new states are great, they are still very limited in this first new feature release and you can only affect the fill and stroke of a shape, which got me thinking and found a workaround.  It will only work if you do not have a stroke already applied to your shape and you are using a sold fill.

First, I added a 1 px stroke to the normal state of the smart shape and made it the same colour as my fill. Then, I enabled the down state and added a 4 px stroke of the same colour.  "Hey Presto" it worked and the smart shape does not appear to shrink at all.

You MUST have a stroke applied to the Normal state for this to work correctly or else no matter how big you make the down state stroke width, it will not increase in size correctly. Strangely it did increase but only fractionally and only to about 2 px regardless of how big you defined it in your down state.

So that kind of works but, unfortunately I've used a variate of different smart shape buttons using images, gradients and different stroke colours. Almost, but no cigar.

[RodWard]

OK.  Sorry about that.

This would appear to be one of those areas that Articulate Storyline does a lot better than Captivate.

Hopefully the dev team will pick up on that.

[Andy_K_nz]

No problem Rod, it was actually your suggestion that made me re-address the style states and find a partial solution, so thanks for that.

[Cozmicone]

If you're publishing as HTML5 you can stop the buttons from shrinking on their down state by adding the following to the index.html file just above the closing </head> tag.

<style type="text/css">

#project_main *{

    -webkit-transform: translate3d(0px, 0px, 0px) !important;

}

</style>

What it does it targets everything contained in the #project_main div which is everything except the table of contents and the playbar. The over state of a smart shape used as a button does have a very slight shrink to text, if you've got text in a smart shape, but I can't figure out what element in the CPM.js is responsible for the slight reduction in text so I can't create a style to specifically target it so it will stop happening.

[Proteus99]

I realize this is an old thread but it seems this issue persists.  I'm currently using CP 2017 Release (V10.0.1.283).  Even without a Down state in the State View, smart shape buttons STILL "shrink" when selected.  What happens is the shape is forcibly getting scaled with CSS using (transform: translate(x,y), scaleX(x), scaleY(y)).

This forced design is handled in CPM.js under a function called "cp.AutoShape.prototype.shrinkShapeButton".  This is the offending line of code within this function:

c="translate("+c.tx/cp("div_Slide").scaleFactor+"px, "+c.ty/cp("div_Slide").scaleFactor+"px) scalex("+c.sx+") scaley("+c.sy+")";

To prevent your smart shape buttons from "shrinking" when selected, comment out that line of code using a comment block.  This way, if you (or your customer) decide to put it back in, you can simply remove the comment block (non-destructive editing FTW).

NOTE: CPM.js is found in the /assets/js folder of your published course.  This JS file is minified, meaning it is intentionally difficult to read and understand.  However, opening this file with a basic text editor and using the search function, the above line of code should be easy to find within the mess.  Once found, comment out the line using a comment block.  What this looks like is below.  "/*" is added at the beginning of the line, and "*/" is added at the end (after the semicolon).  Code between this "block" is ignored.  This method is typically used to comment out multiple lines of code or to insert multi-line comments but works well to isolate this and only this line of code.  For further information on JS comments, see this link: https://www.w3schools.com/js/js_comments.asp.

/* c="translate("+c.tx/cp("div_Slide").scaleFactor+"px, "+c.ty/cp("div_Slide").scaleFactor+"px) scalex("+c.sx+") scaley("+c.sy+")"; */

[ctebaay]

Thank you Proteus99 for that solution. I found out that in CP 2019 it is slightly different. You need to find the following exact line in the same CPM.js file (in /assets/js of your exported project) to comment out with /* and */:

for(var c=a.GetBaseItemsInAllStates(this,!0),d=0;d<c.length;d++){var e=c[d];e&&e.shrinkShapeButton()}

So the function "a.Shape.prototype.shrinkShapeButtonInAllStates=function()" stays empty in its { and }, what removed the shrinking effect for me without any errors. I am not very familiar with js, so if anyone find a better line to comment out, then let me know.

I think this is a game changer, because now I don't need to work with transparent duplicates of the buttons anymore. Adobe should really bring an easy option for that.