For anyone looking to get into design or programming, I always tell them one thing: Whenever you can, do both. It’s not often you get to enjoy the best of both worlds, but in this unique day and age, we have the tools to create amazing interactive experiences from digital nothingness. As the chief techie guy at Gabuduck, I get to watch magic happen simply by typing at a keypad or moving a mouse around the screen. Several clicks and thousands of keystrokes later, an app is christened and sent on its way to be enjoyed by the world!
Like many who harbor a natural curiosity to know what makes things tick, I marvel at movies like Jurassic Park while being equally sated by the behind-the-scenes footage of wireframe dinosaurs moving forwards and backwards on a small monitor.
Both are just as amazing to me, and when it comes to mobile apps that combine a waterfall of images, sounds and interactivity, I can’t help but get geek chills seeing it all come together. I want to share just a snippet of what goes into the making of a Gabuduck app.
Many of our apps employ visually engaging animations. We take characters from a story and add motion so that the interaction with the page comes alive. Obviously, there are varying degrees of animations. From the campy South Park style of animation to Pixar, the user can experience an entire range of motion graphics.
For Gabuduck, our pipelines are under slightly tighter budgets than Pixar and Disney, so we tend to find more cost effective ways to animate our stories.
It begins with an artist. In the case of “Go, Go, Greta,” a wonderful Las Vegas illustrator by the name of Joseph Watson created an entire set of characters and scenery.
It’s that easy you say? Not quite. Let’s say you wanted to animate a simple character. You have your friend draw something amazing on a sheet of paper and hand it to you. What do you do to animate it? Sure, I guess you could move it around the table with your hand and video tape it, but it doesn’t quite capture that magical quality with your hand bobbing in and out of frame. Just like that scenario, we can’t take a “flattened” (a term used to describe flattening several layers of an image down to a single layer) image and magically make it come to life. How would you move the hands and legs? How about the mouth or the head? How would you make your character blink? All these items have to be taken into consideration BEFORE you’re able to start development.
You see, we have to tell the computer which parts to move and how. But if everything is connected together, you’re pretty much stuck. As we examine each scene, we identify the types of actions our characters should perform. The artist has already created a masterpiece, but rather than give us the flattened file, he goes back to his digital work and “breaks apart” his scene. WHAT?? You build it all up just to tear it down? Kind of. You see, what we’re interested in here is separating all the moving or animated parts in the scene.
Let’s start simple:
We have a stick man standing in front of a wooded scene. We know that we want Mr. Stickman to jump up and down. The background? It’s fine right where it is. So step 1 is to give our developers the background all by itself. Since this is behind the stick man, our developers will place this image on the lowest layer. In animation, imagine looking down through layers of glass. On each layer, you can draw a different scene or character. Many digital applications are set up in just this manner. On your iPad, the lowest layer is often the part of the image that’s the furthest back. In our case, the wooded forest!
Now the magic. We want Mr. Stickman to jump up and down. But if we just take his entire being and move him up and down on the screen…well, it’s just not that magical. Whimsical, sure, but after about a minute, you won’t be feeling the love. The answer? Break him apart. As painful as it sounds, we’re really just separating all the different moving parts of Mr. Stickman so that we can create movement. For example, we will take Mr. Stickman’s thighs as one part, his lower legs as another and his feet as a third. Now, we can move each part of his leg separately in the animation to make it look like he’s bending his legs and then jumping. All of a sudden, our digital character is moving without strings!
In the app world, there’s often special tools that you use in conjunction with development to ease the pain of having to do all that animation by hand. When you animate every movement, you’re doing a frame-by-frame animation. But we want to animate our little guys with code. This reduces the size of our file and improves performance. In our case, we use a helper application called Cocos 2D. Think of it as an application within our application. It gives us an easy set of commands that enables us to group objects together and then make them do different things together or separately. It handles the rest for us! We simply tell the application to take our object, move it here or there, rotate it this way or that way, and walla…our character is animated!
On many occasions, however, the animations may involve more than just breaking things apart and making them move. In some cases, a character may turn around, change body positions, or manipulate objects. Then we have to animate a character frame-by-frame. Afterward, we put each of the frames into a sprite map (a collection of the images contained in a single file) so that we can read the images easier/faster and save on memory usage.
When frame-by-frame animations are needed, we call up our artist, Joseph, and he goes back to his illustration program (Photoshop, Illustrator, or whatever your choice may be) and draws the different frames by hand, providing us custom frames of animation that let our character turn around.
The speed and smoothness of the animation is dependent on something we call FPS or frames per second. If we make an animation at 2 FPS, it will look pretty choppy. Basically, we are only seeing 2 frames of animation every second. Like watching grass grow…but choppy.
To give you a frame of reference, standard TV frame rates are 24, 25, and 30 FPS. The new Hobbit film was filmed at an astonishing 48 FPS (I personally don’t like this speed because it makes films look like HD sports shows.) There’s even 60 FPS! For animation on mobile devices, we can get away with 15 fps. I’m a sucker for low frame rates because of the “graininess” that comes with the 24 fps of film. Call me sentimental, but nothing beats a good black and white flick.
Finally, when all the pieces are put together, we have an animation that we can put into our app. Marry that with sound, touch triggers, and an awesome story, and you’ve got yourself a Gabuduck app!
I love my job. No, really, I love my job. I work with sounds and sound creators all day long and sound is a passion for me. Great sound is, in large part, a series of happy accidents. Put this together with that and WHOA! What just happened? If you ask me, happy accidents make the world a better place. And this is a short blog tale about a series of happy accidents that led to the soundtrack of Gabuduck’s newest product, Go, Go, Greta.
A little background: Go Go Greta is a beautiful and inspirational children’s book by Dana Satterwhite and Joseph Watson. As their Facebook page says, it’s “…all about kids. Inspiring them. Learning from them. Motivating them.” Gabuduck has taken this fantastic book and created an interactive world where children can read and play in Greta’s world. And a huge part of that for us is music; really great, intelligent kids music.
Through a series of happy accidents, Gabuduck was introduced to the band The Happy Racers. At Gabuduck we love smart, fun, intelligent kids music; the kind of music that mom and dad are just as happy to sing along to as their kids are. No songs about fluffy bunnies for us. The Happy Racers create fun, happy, smart kids music, so we asked them to create a song for Greta and we were thrilled when they agreed. And that leads us to the next happy accident; I’ll let Nathan Meckel, the bandleader, explain:
“My approach to writing, recording and producing music pretty much mirrors my everyday life, I make it up as I go. As one of my friends says, ‘go straight ‘till something gets in your way, then turn.’ The more I make music the more I’ve come to enjoy the process of finding your way…figuring out the lyric, the melody and ultimately creating the instrumentation. Rarely though do perfect marriages ever fall into place so easily as they did when I got the call to write the theme song for the Go Go Greta app. About a month before I joined the project and long before I ever knew the book Go Go Greta even existed, I was writing a song called, ‘I Can Do Anything.’ Some things are just meant to be. When I was asked to do it, I thought ‘cool, this will be fun to ‘target’ write for this project.’ I was sent some images of the book for inspiration that included the text of the book.
I was kind of stunned when I saw Go Go Greta for the first time…a perfect fit without even trying. Beautiful. This wasn’t target writing at all anymore, it was just simply finishing a song that was already started.”
And there you have it. A series of happy accidents, serendipity…whatever you like to call it, some things just fall together like peas and carrots. You prepare, you put yourself out there. And the pieces fall together because, as Greta says, you can do anything. You can do it all.
For the upcoming app Jenny Jenkins, Gabuduck needed to create additional instrumentation to complement the amazing version recorded by Lisa Loeb and her engineer Dan Petty and stay true to the roots of this Appalachian folk song from 1823. So, we hopped in our time machine and set the controls for…ok, if we had a time machine we certainly wouldn’t blog about it! Instead, we did the next best thing and hired stringed instrument extraordinaire Jeff “Jabo” Bihlman of the Emmy award winning Bihlman Brothers to create tracks that fit into the funky, folky vibe of Jenny Jenkins.
Since yours truly tends to collect more instruments than he actually learns to play, Jabo was able to access not only his own guitar and bass collection but also a mountain dulcimer, banjo, squeezebox and various percussion instruments including jaw harp and jug. While not every instrument made the final cut it was, according to Jabo, a fun challenge to create parts on so many different instruments. Jabo played and recorded all instruments in his home studio with the exception of harmonica and jug which were recorded at The Dog and Pony Show here in Las Vegas with me, John McClain, on harmonica and Jabo on jug.
Next step was to record the Gabuduck kids for a part in the song. Of course the best way to do this was to get them all together in one place and throw a party complete with swimming pool, fill their bellies with hot dogs and brownies and then crowd them all into the Bihlman’s living room where we had microphones set up to record. The kids were real troopers and we ended up with exactly what we needed. Once the pieces were recorded Jabo locked himself away in his studio and began the process of editing and mixing over 35 separate parts into the loop and stem components needed for our Jenny Jenkins app. We think he knocked it out of the park and the track has a richness that is reminiscent of an old time jam session. The app is going to be a super fun, interactive jam for kids where they can explore color and music, sing along and record their own versions of this classic tune. Until next time, this is GabuduckMusic. Peace.
Working with child actors or how to learn patience in 5 second bursts.
For the Gabuduck app Miko and Cola we had inexperienced child actors playing 3 of the 4 major voiceover roles in the book. And this book is big by iPad ebook standards, 64 pages of fun and frolic! So how do you wrangle child actors, keep their interest while recording over 120 lines of copy and ensure you get a great performance? Patience, fun and preparation!
The characters Miko and Cola were played by Ava and Karmen, two precocious 8 year old girls with big personalities. We decided to cut their roles together to let them read against one another. It took three sessions with the girls to get their lines dialed in: session one was a piece of cake with the girls just nervous enough to quell their natural tendency to be, well, 8 year olds. Through sessions two and three, in spite of a heavy duty raid on the studio’s cookie jar, the girls really hung in there even while getting a little crazy. They both took direction like pros and there were no situations we couldn’t handle. If the lines got a bit tough they helped each other out, stayed on mic most of the time and gave line repeats until we had what was needed. They were real pros.
The character Sherman the Mouse was played by 4 year old Declan and he was a trooper. (Full disclosure: he’s my son!) Dad would feed him the line the way it needed to be read and Declan would repeat back until he nailed it. There were moments where he no longer wanted to read and the trick here is to take the break and do some playing. Sherman’s lines were cut over three or four days in my home studio with frequent stops to play Hot Wheels or Wii Star Wars but when it was all done and the edits were finished we had a great read by the little man.
Cutting child actors is a big change for the VO director. You need to get out of your chair, get in the room with the kids and help them through their lines. Mic stands and headphones can be intimidating to adults, just think what it’s like when you aren’t even 10 years old yet. We used jokes, cookies, frequent breaks for play and lots of patience and laughter. We ended up with great reads from three wonderful kids and a fantastic story that I’m sure your kids will enjoy as much as mine does.
Hi! I’m Nicole and on behalf of everyone here at Gabuduck, welcome!! We are so very excited about our new super interactive, happy, musical space here on the web! Be sure to peek and poke around everywhere as a new little adventure lies behind each and every click.
At Gabuduck, it’s important that you know above anything else that our mission is to re-create the worlds of play and learning through a trusted brand across mobile technologies. Key word, trusted. As parents we know there are a lot of companies slinging products at you from left and right. How do you know they are a brand that is looking out for your children and meeting the needs of you, the parent, too? We want to make sure that Gabuduck is a brand that you always feel your kiddos are interacting with, learning and growing from!
Here on the blog there will always be a bit of daily fun! We will have not only post about the magical happenings and creations that are going on within Gabuduck but have everything from guest bloggers, share kiddo friendly healthy recipes, crafts to talking about topics that tech savvy parents deal with each and every day.
Thank you so much for stopping by! We hope you love our new space and will come back again to see what other new adventures are taking place!
If you want to be the first to know about all the Gabuduck happenings, get sneak peeks of new products and behind the scenes action you can sign up for our newsletter or follow us all the fun ways below!