New App in Development: New Workflow

Kristin Reiber Harris
KristinHarrisDesign.com

I am fixating on bird these days; little birds, big birds, silly birds and even realistic birds. My new app project is all about birds. Birds that will make three year olds giggle and hopefully a lot more.  I am combining some of my favorite old and new tools on this project as well as getting back to my roots as an animator.

 

Step One: Textures in Procreate

I start this process of creating a menagerie of birds by developing textures in Procreate on my iPad. I became familiar with Procreate teaching students how to use it working with Demibooks Composer Pro, a development tool for iOS apps. The beauty of Procreate is the artwork is created on the iPad which facilitates import to Composer Pro.



In helping students master this very accessible but robust drawing and painting app,I fell in love with it as a tool I could use in my own work. The extensive selection of brushes facilitates creating wonderful textures. I wanted to create a series of textures in a spectrum of colors to use on my birds. Here is a very pink sample that does not hide my fascination with circles and polka dots.

Step Two: Import Texture into Flash and Draw the Bird

I am delighted to be working with Flash again. In years past Flash was a trusted tool for animation, interactive projects and web design. I have not used Flash in my production work in a number of years but do appreciate the opportunity to use Flash to teach students animation. The attraction now is that Flash is a wonderful drawing tool. The brush tool has options that allow for a flowing, calligraphic line quality I can't get with other digital drawing tools. I can select the shape and size of the brush with smoothing available. These options certainly exist in other drawing software but I find Flash's tools give me the most intuitive workspace and best results. AND that calligraphic line can consist of the bitmap texture I imported.

Teensy tiny, but there's my bitmap pink texture on the bottom row of swatches.

 
File:Import to Library puts the bitmap image in the Library. This automatically places it in the swatches panel accessible by pencil, brush and bucket tools.  Here I am just playing with the Brush tool to experiment with shapes, sizes and pressure.

I make a gesture drawing on the bottom layer to get my bearings before I start drawing. (Yes, drawing students, I really do what I made you all do in drawing classes.) New layers will be for the drawing of the bird.

Selecting the Brush Tool I start drawing with my gesture as a guide. This is of course a really fun part of the process with lots of trial and error.The bird will be built in layers, the most common approach would be a layer for each leg, the tail and head feathers and maybe separate head and body. It all depends on the build of the bird.

Step Three: Puppet Tool in AfterEffects

I have been working in AE for over 20 years but barely scratching the surface of this magnanimous tool. I have used it primarily for character animation which is one small aspect of its functionality. The Puppet Tool is what I find most helpful now with these images created in Flash. I really got into the Puppet Tool when I started working with images of museum objects. I made an ancient Chinese duck stomp about the farm yard, etc.

If you have not worked with the Puppet Tool it's very cool. A deformation mesh of the size you choose is placed over your image in a given layer. You then add pins to secure portions of the image as well as serve as handles to move things around. Here I am playing with a fish swimming. There are actually only 350 triangles in the mesh, which is much less than I usually like to work with. You can see I have an issue with part of the image separating in the top left dorsal fins.

I know this is not a bird.

The tedious fun of trial and error, tests and more tests follow as the critter comes to life. My first tests are intended to bring smiles. I am pleased with how this process and new app is developing.

Step 4: Create a Png Sequence and Import into Demibooks Composer Studio

This is where it all comes together. I export a png sequence of my animation from AfterEffects and compress it into a zip file. I use iTunes to transfer the zip file into Composer Studio on my iPad. There I can place it on the appropriate page and start programming and testing. This process is working very well for me and I hope it can give you some ideas too.