I decided to experiment with the idea of using live footage as my framing for the dynamic visualisation of my app, with the purpose of showing it working in its in intended environment. To achieve this I used a combination of mocha and After Effects. First I filmed my hands holding and manipulating my iPhone with a completely green screen, to make it possible to key-out later. That clip was then trimmed to a few seconds and imported into mocha for After Effects so that I could motion track it. Once in mocha, I used the Create x-Spline tool to circle the iPhone and define it as the area to be tracked. The program was then left to track forwards and then backwards through the clip to define the areas it will work with. The Planar Surface tool was then used to set up the 'flat' surface that the image will then be paired with it, with minor corrections being made using keyframing to keep it on track. Below is what I ended up with at this point:
Once all the tracking was completed the corner point data was copied from mocha and pasted into the timeline of the Bishops Finger layer as keyframes. After slight adjusting using the anchor point tool the image is the aligned and skewed to match the iPhone screen. The Keylight tool was then used to remove the green from the iPhone screen and let the Bishops Finger image show from below my finger. Here is the clip before the process:
And after:
Evaluation: Overall the test achieved what I set out to do but the visuals were a bit lacking. I think the tracking looks a little skew but I didn't want to invest hours on something that wouldn't be used, when it comes to the final outcome I think I will be able to correct the tracking so that it looks much more realistic. It also isn't too obvious on the resolution of the YouTube video but when played back in After Effects the extreme sharpness of the graphic on the screen didn't match the slight, natural blur of the video. This will be corrected using a simulated lens blur as well as a bit of colour correction to make it tie-in visually with its surroundings and ambient light.
