Spotlight shape

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

Post Reply
Simon_Dismore
Posts: 205
Joined: Thu Jul 13, 2017 2:57 pm

Spotlight shape

Unread post by Simon_Dismore »

I really like the new spotlight feature, and I've worked out how to change the shape by right-clicking a selected spotlight and selecting 'Change Shape...' from the pop-up menu.

But currently the sizing is on only one dimension: that's fine for a circle but for other shapes it would be useful to be able to change the height and width independently. I can think of a few ways this might be achieved:
  • Least flexible: add more rectangles to the basic shapes list (1:1, 3:2, √2:1, 3:1 etc)
  • More intuitive: allow sizing from eight handles, as with normal shapes
  • More flexible: allow any (closed) shape to be toggled as a spotlight
  • Most flexible: allow any group of shapes to be toggled as a spotlight
Hightlighting using a group of shapes supports scenarios where one control on a screen (e.g. a button on a ribbon) affects another part of the screen (e.g. a shape selected in an editing area). When using a group, both objects can be highlighted, and the callout can be animated between them.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Spotlight shape

Unread post by Martin Wynne »

If 2 or more spotlights are added to a slide, each one greys over the other(s).

The same thing happens if the image has a highlight lens. It greys over the spotlight.

I suspect there is no easy answer to this, because my screen recorder has exactly the same limitation. But worth asking?...

cheers,

Martin.
Simon_Dismore
Posts: 205
Joined: Thu Jul 13, 2017 2:57 pm

Re: Spotlight shape

Unread post by Simon_Dismore »

Martin Wynne wrote:If 2 or more spotlights are added to a slide, each one greys over the other(s).
Hi Martin, yes I think that's inevitable if you have multiple spotlights because they are implemented using opacity.

Having hacked some published projects, I think the new spotlight method is:
  • Have the spotlight shape as a path, or series of paths, in a single SVG <path>
  • Just before the end of the d="..." in the <path>, append a closed sequence of lines to wrap the entire area of the slide
  • Render the entire <path> with fill-rule=evenodd so the containing wrapper is filled and spotlight shape is unfilled
If that's correct, and if shapes in HX are always implemented as paths, it should be possible to create a group* highlight in the same way. But authors would have to be cautioned to test the effect.

* on second thoughts... it wouldn't actually be a group; when published the grouped 'spotlight' shapes would have to be merged into a single d="..." in a single <path>.
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Spotlight shape

Unread post by Alexander Halser »

useful to be able to change the height and width independently
Hold down the CTRL key while sizing the spotlight. It works similar to the corners of a rounded rectangle.

Before you argue that's inconsistent with the normal sizing options, there's a reason for this. Most spotlights will be circular, that is the most common option. By locking the X and Y axis by default, we make sure that it stays a circle unless you hold down the CTRL key. Keeping spotlights circular is crucial for chained spotlights. Chained spotlights not just move, they also change their size, which is in fact a scaling animation. And the scaling scales the X and Y axis simultaneously.

So, unless we have morphing animations for spotlights, they better stay circles. Morphing, by the way, is not completely out of reach. But it's not on top of the wish list, either.
Alexander Halser
Senior Software Architect, EC Software GmbH
Simon_Dismore
Posts: 205
Joined: Thu Jul 13, 2017 2:57 pm

Re: Spotlight shape

Unread post by Simon_Dismore »

Alexander Halser wrote:unless we have morphing animations for spotlights, they better stay circles
Thanks for taking the time to explain that.

If I've understood you correctly, you're recommending that chained spotlight dimensions are always 1:1 whatever the shape, and that the chained shape (circle, heart, rectangle or whatever) should stay the same for each slide. That makes sense. That implies that my "least flexible" approach is the only one that's even half-way appropriate: add some more rectangles to the basic shapes list (e.g. 1:1, 2:1, 3:1) as well as the current 3:2?
basic-shapes-with-extra-rectangles.png
You do not have the required permissions to view the files attached to this post.
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Spotlight shape

Unread post by Alexander Halser »

you're recommending that chained spotlight dimensions are always 1:1 whatever the shape, and that the chained shape (circle, heart, rectangle or whatever) should stay the same for each slide.
For chained spotlights and those with the follow-cursor animation, yes. If you change the aspect ratio, make sure that it stays approximately the same on each slide. Small differences won't be noticeable but larger ones look odd.
Alexander Halser
Senior Software Architect, EC Software GmbH
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Spotlight shape

Unread post by Martin Wynne »

Martin Wynne wrote:If 2 or more spotlights are added to a slide, each one greys over the other(s). I suspect there is no easy answer to this, because my screen recorder has exactly the same limitation.
WRONG! I should have stopped to think. :)

Multiple spotlights are quite easy, provided each one can be contained in non-overlapping rectangular areas. i.e. not too close together.

Rounding effects in the browser mean that at some zoom levels and/or device screen sizes the rectangles become visible with a 1px gap between them. It might be better to have a slight overlap -- lots of trial and error to do.

Here for example is an Xplain with 2 spotlights in a slide:

http://85a.uk/hand_xplain/

This is getting interesting. :typing:

cheers,

Martin.
Post Reply