I'm trying to change the state of a typical video "Play" button so when a learner clicks on it, the video will play and hide so the learner doesn't have to look at the button while the video is playing.
I'm able to get the video to play when clicked but can't get it to hide.
I tried adding another trigger to the button so that when the learner clicks on it, it will hide. No Luck. I also tried to add a State to the button, but couldn't get it to work.
I'm sure there is someone that knows how to do this.
Immediately I opened your file I knew what the problem was and, don't worry, it's a common mistake.
When you use an icon, such as your play button, as a clickable item, you have to take into account the fact that it is generally drawn on a transparent background. As a result, the icon will only register as clicked if you click on any drawn component (i.e. the actual black lines themselves). What also confuses the issue here is that you have your icon placed on top of a video, which will toggle between play and pause anytime it is clicked on anyway.
The solution is to add a 100% transparent rectangle (a rectangle with "no fill" will not do the job) with no outline, over the top of your icon and then use the rectangle as the clickable component that plays the video and also hides the button.
In the attached version of your file I have added the rectangle and have also placed another 100% transparent rectangle over the top of the video as this prevents the user inadvertently playing/pausing the video without clicking on the button. Note that this second rectangle sits directly on top of the video, but underneath the button, to enable the button to be clicked.
One thing I should have mentioned was that, as you have a circular icon, you can also put a 100% transparent circle over the top of it so that your click area is the same size as the icon. With the rectangle, you will have an additional bit of clickable space in the corners, which will be just outside the icon itself.
I will try to change that. So that way, the learner only views the Play icon itself, not the circle too?
Also, you may have noticed, the text and diagram in the video appears small. I tried to see if I can enlarge it without compromising the quality, but not much luck with this. Maybe it's the Whiteboard App I'm using? If this is the case, maybe you can suggest a "free" whiteboard app that is more compatible with Articulate? Thanks.
I'm afraid I don't have any experience with whiteboard apps and so can't recommend anything in particular.
With regard to the 100% transparent circle on top of your icon, if you make it a couple of pixels wider in diameter than the circle on your icon, the mouse cursor will change just as the user moves their mouse cursor over the edge of the icon. Having the circle 100% transparent and also with no outline means that it will be completely invisible to the user, but will create a clickable area exactly over the top of your icon.
7 Replies
Hi John,
I'm not sure what triggers you were using, but hopefully this example will help you sort the problem.
Any queries, just get back to me here.
Hi Ned,
From what I can tell, I have it set up the same way as yours.
Maybe you can find the issue? Thanks
Hi John,
Immediately I opened your file I knew what the problem was and, don't worry, it's a common mistake.
When you use an icon, such as your play button, as a clickable item, you have to take into account the fact that it is generally drawn on a transparent background. As a result, the icon will only register as clicked if you click on any drawn component (i.e. the actual black lines themselves). What also confuses the issue here is that you have your icon placed on top of a video, which will toggle between play and pause anytime it is clicked on anyway.
The solution is to add a 100% transparent rectangle (a rectangle with "no fill" will not do the job) with no outline, over the top of your icon and then use the rectangle as the clickable component that plays the video and also hides the button.
In the attached version of your file I have added the rectangle and have also placed another 100% transparent rectangle over the top of the video as this prevents the user inadvertently playing/pausing the video without clicking on the button. Note that this second rectangle sits directly on top of the video, but underneath the button, to enable the button to be clicked.
Any queries, just get back to me here.
Thanks again Ned!
I would've never thought of the Rectangle!
I will study it and let you know if I have questions.
Hi John,
One thing I should have mentioned was that, as you have a circular icon, you can also put a 100% transparent circle over the top of it so that your click area is the same size as the icon. With the rectangle, you will have an additional bit of clickable space in the corners, which will be just outside the icon itself.
I will try to change that. So that way, the learner only views the Play icon itself, not the circle too?
Also, you may have noticed, the text and diagram in the video appears small. I tried to see if I can enlarge it without compromising the quality, but not much luck with this. Maybe it's the Whiteboard App I'm using? If this is the case, maybe you can suggest a "free" whiteboard app that is more compatible with Articulate? Thanks.
Hi John,
I'm afraid I don't have any experience with whiteboard apps and so can't recommend anything in particular.
With regard to the 100% transparent circle on top of your icon, if you make it a couple of pixels wider in diameter than the circle on your icon, the mouse cursor will change just as the user moves their mouse cursor over the edge of the icon. Having the circle 100% transparent and also with no outline means that it will be completely invisible to the user, but will create a clickable area exactly over the top of your icon.