I have created a course that's circa 100 slides long that we've only just noticed an issue affecting all my custom next and previous buttons... help!
I am using a circle with an arrow icon, downloaded from the Articulate illustrations library for these buttons. When you hover over the button, it is clickable in the whole, but reverts to a mouse pointer and is not clickable when hovering over the arrow part. I have come to the realisation that the arrow part is transparent! What is my most efficient way to correct this please? With a course this size, plus multiple layers on many slides and each button timed to change state from hidden to normal at various times, I'm hoping for a savvy solution to this.
Please see the attached document for an example of the buttons.
If all your next and previous buttons are in the same place on each slide / layer, this should be a relatively easy fix.
What you need to do is to insert a filled circle with 100% transparency and no outline over the top of each button on your first slide / layer. You then allocate a trigger to each circle (or oval) to jump to the next / previous slide as appropriate. Finally you select both circles together, copy them and then, selecting each slide in turn, paste the circles on top of the existing buttons.
The action of pasting the circles will also copy the appropriate triggers to each slide and so your buttons will now work as required. If your buttons are always in the same place on each slide, the circles will always appear exactly on top of them when you paste them in.
The original triggers for the Next / Previous buttons will no longer activate and could be removed, but to save you extra work, then can be left in place.
Thank you for your response, this sounds like a good workaround. My only reservation is that savvy users may discover the transparent button is there already to skip forward, prior to the timed state change to make my existing button appear... or have I missed something in your approach?
You are indeed correct in your assumption that someone could possibly discover the invisible buttons, but I was just trying to save you a bit of extra work.
The way to get round this is to add two more triggers to each invisible button. The first is to change the state of the invisible buttons to hidden when the timeline starts (unfortunately these will have to be done manually for each slide as they are not directly linked to the shape in the triggers list). the second trigger for each invisible button is to change them to normal when their respective Next / Previous button becomes visible:
If you add this trigger on the first slide before you copy and paste the Invisible buttons to your other slides / layers, this trigger will be copied across, which will at least save some time.
The advantage of using this particular trigger is that if you want to change when your Next / Previous button appears, you don't then have to also change the trigger for the invisible button as that will always follow the Next / Previous button.
As you found out most icons are shapes and there is no transparent area and hence no click area.
Although you could do a lot of workarounds, at this stage I would replace all of the Next/previous buttons, you are going to lose functionality by overlaying them (no hovers for example).
As Ned suggests I would use a circle state and add the icon inside of the state, this way you can have a hover state as well.
May seem like a lot of work, I can attest though that work arounds like this can often take as long to sort out.
I just wanted to hop on to thank you both for your input.
I have opted to replace all the buttons with a new arrow (minus transparency) due to the fact that each one had a differently timed state changes. I really appreciate your time in offering workaround solutions though.
5 Replies
Hi Heidi,
If all your next and previous buttons are in the same place on each slide / layer, this should be a relatively easy fix.
What you need to do is to insert a filled circle with 100% transparency and no outline over the top of each button on your first slide / layer. You then allocate a trigger to each circle (or oval) to jump to the next / previous slide as appropriate. Finally you select both circles together, copy them and then, selecting each slide in turn, paste the circles on top of the existing buttons.
The action of pasting the circles will also copy the appropriate triggers to each slide and so your buttons will now work as required. If your buttons are always in the same place on each slide, the circles will always appear exactly on top of them when you paste them in.
The original triggers for the Next / Previous buttons will no longer activate and could be removed, but to save you extra work, then can be left in place.
Hope this helps.
Hi Ned,
Thank you for your response, this sounds like a good workaround. My only reservation is that savvy users may discover the transparent button is there already to skip forward, prior to the timed state change to make my existing button appear... or have I missed something in your approach?
Cheers,
Heidi
Hi Heidi,
You are indeed correct in your assumption that someone could possibly discover the invisible buttons, but I was just trying to save you a bit of extra work.
The way to get round this is to add two more triggers to each invisible button. The first is to change the state of the invisible buttons to hidden when the timeline starts (unfortunately these will have to be done manually for each slide as they are not directly linked to the shape in the triggers list). the second trigger for each invisible button is to change them to normal when their respective Next / Previous button becomes visible:
If you add this trigger on the first slide before you copy and paste the Invisible buttons to your other slides / layers, this trigger will be copied across, which will at least save some time.
The advantage of using this particular trigger is that if you want to change when your Next / Previous button appears, you don't then have to also change the trigger for the invisible button as that will always follow the Next / Previous button.
Any queries, give me a shout. :)
As you found out most icons are shapes and there is no transparent area and hence no click area.
Although you could do a lot of workarounds, at this stage I would replace all of the Next/previous buttons, you are going to lose functionality by overlaying them (no hovers for example).
As Ned suggests I would use a circle state and add the icon inside of the state, this way you can have a hover state as well.
May seem like a lot of work, I can attest though that work arounds like this can often take as long to sort out.
Hello Ned/Phil,
I just wanted to hop on to thank you both for your input.
I have opted to replace all the buttons with a new arrow (minus transparency) due to the fact that each one had a differently timed state changes. I really appreciate your time in offering workaround solutions though.
Many thanks,
Heidi
This discussion is closed. You can start a new discussion or contact Articulate Support.