This guest post was written by Trevor Young, the cofounder and animator at Tapocketa Studio, who previously led teams in the feature film effects industry on films like Harry Potter and the Goblet of Fire. Below, Trevor shares his experience working in Tumult Hype to create an interactive web project titled Welcome to Tallowmere:
Welcome to Tallowmere
Tapocketa Studio was recently commissioned by Faber Music to animate the artwork of musician Keaton Henson. This was for the release of The Tallowmere Annual, a collection of his artworks and writings set to music (readers can plug their headphones into the book to hear his specially composed accompaniment to the book’s images).
Tapocketa Studio used Tumult Hype Pro to create the single webpage that added movement to Keaton’s haunting artwork with animated clouds, swaying tree branches, falling leaves and interactivity that revealed hidden clues to the history of the fictional town of Tallowmere. A single social post from Keaton directed fans to this webpage and built intrigue and excitement in the lead up to the announcement of the book’s release.
From the outset Keaton Henson wanted a natural and organic feel to the animation in keeping with his dark and naturalistic imagery. Faber had noticed a scene of a very different style from an animated children’s book we had been working on in which tree branches swayed as autumnal leaves fell and knew it was something that they could see being applied to Keaton’s ink-wash image. The tree animation they had seen was a movie file that had been created in 3D software so it was quite another thing to translate this into a ‘live’ web animation.
Galdo’s Gift – The children’s book animation that caught Faber’s eye ©Tapocketa Studio 2018
The first stage was to create a test animation through Hype to see if we could create the swaying branch and leaf fall animation in a way that would convince Keaton and Faber that this would be the way to go. Keaton’s image contained an existing tree that we would need to replace with the animated version. We started by painting out the majority of the tree from in front of the sky where it was easiest to remove for this test version. We then created branch elements with the help of a difference matte between the original image and tree-less version.
We made sure that the file compression of these .png files was set to minimise file size whilst retaining image quality. Initially we tested using only two branches and repeated these elements with offset swaying animation.
To create convincing falling leaves we needed to devise a way of getting the effect of full 3D rotation. To do this we modelled a leaf in our 3D software and applied particle physics to get a realistic ‘falling in the wind’ motion. We then locked the 3D camera to one of the falling leaves and rendered out enough frames that we could use to loop the motion. We arranged the leaf frames in a row at regular pixel intervals in our graphics software to make a png ‘filmstrip’ (or sprite sheet) that we could use in Hype:
Once in Hype we could create a group that contained only this leaf ‘filmstrip’ and create a timeline that would just deal with the leaf spin.
Adding the leaf filmstrip to a group allows you to reveal only one leaf on the filmstrip at a time by adjusting the group’s content boundary area on-screen controls to contain just the first leaf in the sequence. You then set the ‘Content Overflow’ parameter to ‘hidden’ in Hype’s ‘Metric’ tab. You then keyframe the filmstrip to move to the next leaf in the sequence on each subsequent frame (setting the interpolation to ‘Instant’ so each frame jumps to displaying the next leaf). The result is one leaf spinning but not falling.
We animated the spinning leaf on an additional timeline, and repeated the process six times with different falling trajectories to produce the final animation of multiple leaves falling and spinning. The filmstrip technique proved invaluable to achieving a naturalistic look to the leaf animation.
The final animation contained only two branches and one leaf object but had allowed us to create something that became much more complex than the sum of it’s parts. An added bonus being that fewer objects make for speedier load times. All of which ended up being very important particularly as we needed to include sound files, including a seven minute music track (in multiple formats to cope with different browser spec), which would take up the lion’s share of the load time. With streaming the sound not an option and sound quality taking priority over file compression, we needed to make sure load times for all other files was kept to an absolute minimum.
At Tapocketa Studio we very much relied on Hype to remaining steadfast in the face of the increasing demands placed upon it. We ended up with sixty-six timelines spread over three responsive layouts and at no time did Hype complain or become glitchy. We were able to send the clients a folder that they could upload to their site which worked every time and we could turn around any updates required quickly.
Hype Reflect. This proved to be an absolutely essential app to show how our work would appear on a phone or tablet. With one click in Hype a preview is sent to Hype Reflect on your mobile device where it can undergo the vital extra checks needed to reassure you that it will work on that device. A nice partner tool to Hype that we used extensively. It’s always good when you wish someone had thought to create such a tool and you find to your relief that they have!
Trevor Young has over seventeen years experience in the feature film effects industry leading teams on such movies as Harry Potter and the Goblet of Fire. He is now co-founder with Eleanor Long of Tapocketa Studio, an indie animation house based in Hertford, UK.