Forum Discussion
Help Me Give Them the Finger!
Hello.
I am trying to duplicate a function in SL that I had to generate in another program as a video file. I am animating a hand that comes into the screen and touches a button (shot it on a green screen).
I previously used Camtasia to overlay this, but I want to try to do this in Storyline. Here is a review link of a demo:
https://360.articulate.com/review/content/d317c370-941b-41cb-b10b-53329ff9853c/review
Any advice you could give would be great!
- Nathan_HilliardCommunity Member
Here is a simple demo using the web object placed on a layer. Just show the layer to play the hand clip. (Note, will not work as is on Safari; need to add HEVC version as well).
Hand clip from https://www.vecteezy.com/video/5658508-close-up-handragging-and-swiping-on-chroma-key-green-background-like-using-a-smartphone
Davinci Resolve to quickly remove green screen. Premiere Pro to export to webM. May be able to do it with Resolve as well (not sure, don't use it).
Index.html in web object is just pulled from another project, it contains more than is really necessary.
See it: https://360.articulate.com/review/content/c370f0fb-e9fc-4ca5-b518-e154d81ea5b3/review
Files attached.
Looks nice with the video
Since the chromakey doesn't work, I'd just use static image of the hand and a motion path.
- JerryBeaucaireCommunity Member
I'd take Tom's idea one step further. You can use images, but add at least one additional STATE to the image. Image enters along one motion path to point at the button.
When your button activates its "pushed" state and lights up, have the finger change to another STATE where the finger pushed down noticably, and starts to exit on a second motion path.
Yeah, I think adding a state to simulat a bit of movement would be nice. I was actually just in the process of testing an idea.
- Nathan_HilliardCommunity Member
Another option is to remove the background of your hand video and save as a webM with transparency (can do this with Adobe Premiere for example). Also convert to an HEVC clip for use with Safari if necessary (requires a Mac). Setup an index file in a web object to load them, with a transparent page background. You can Google how to setup a play/pause trigger in the index file with a little JavaScript as well. Overlay the web object on top of your slide elements. Trigger the object to play the clip as needed. (Or, just insert the web object in the timeline where it needs to start and let it autoplay.)
Here's a quick demo
https://360.articulate.com/review/content/8458fb27-436e-40a5-afdd-1bc3d06fadab/review
I recorded a tutorial for others who may want to do something like this.
https://360.articulate.com/review/content/a515e6c9-7d36-463f-9bba-da1c8f0046f0/review
- BrianCookCBCommunity Member
Nathan,
can the finger entrance be triggered to work from a cue point on the timeline?
- Nathan_HilliardCommunity Member
As it is set up here, yes. Just trigger on timeline reaching cue point instead of the button push. Note, the first load/play may have a little delay. The layer is set to close after the duration of the clip. If you find the video is getting cut off at the end, just extend the time the layer is visible.
- Nathan_HilliardCommunity Member
See my recent post on a fairly easy approach to inserting transparent videos.
See: simplified-approach-to-adding-transparent-videos-to-storyline
Alternatively, just search for the title in the link.