his is the second post from John Marc Green, illustrator and author of Steampunk Chess Puzzles. Look for Steampunk Chess Puzzles this fall in the App Store.
Starting to work with Demibooks® Composer was a challenge at first, but as I became more familiar with the software, and as it matured with new features, it became very simple and intuitive. I quickly learned how to think like a computer programmer, without having to learn any computer code.
Building my book became more about dealing with my own limitations rather than with the Composer app. My plan to use authentic Victorian-era chess problems as the basis for an interactive book seemed simple enough, but first, I had to figure out how Composer worked: there was no user documentation in the beta phase (Note: the Composer User Guide is now available. You can view the pdf file here).
I started out by experimenting with basic controls: navigation, the physics engine, and adding behaviors to an object. In Composer, the powerful properties of graphics objects (such as size, position, and opacity) are defined and altered with the Inspector panel. The Effects panel allows you to manipulate them with Behaviors.
Building, testing, and troubleshooting is a quick and relatively painless process in Composer. You add an object, create an effect, then preview the book to test your work. If it works as you intended, you move on to the next step; if not, you can quickly go back and make an adjustment, all right on the iPad. The only time you have to use the composer is to add a graphic or sound file to Composer through iTunes so you can include it in your book.
I decided to build pages resembling the actual printed chess puzzles in the Victorian-era books I had found. First, I placed the chess pieces on the board to match the original puzzle. Next, I needed a way to make the pieces move automatically into the positions that would reveal the solution. This was more challenging. I created number buttons in Photoshop to serve as triggers to move the chess pieces.
It’s a simple process to import the Photoshop .png files into Composer through iTunes. Once they’re in the iPad, you just click the “add” button and the image you select from the drop-down menu appears on the Composer page you’re working on. You can use pinch gestures to resize graphics, then drag or rotate the graphic to wherever you want on the page using normal iPad gestures. A handy feature is the “lock” switch in the Inspector menu, which prevents objects from moving by accident if you touch them after the initial placement on the page. This save a lot of frustration and makes page design very efficient.
Another issue I ran into was the page grid. I wanted a finer overlay grid to use for positioning my objects on the page than the 12×12 default grid overlay you normally see when you create a new Composer book. Eventually, the development team solved this by allowing the designer to alter the grid line spacing in the “Book” drop-down menu, allowing you to position large or very small objects visually and repeat that positioning on successive pages easily without having to type coordinates, speeding page construction immensely.
The “Inspector” menu panel also provides exact coordinates for objects on the page in pixels, i.e. X=350, Y=108. This meant I could set up the puzzle, then record the X/Y coordinates of the chess square I needed the piece to move. With this information, it becomes very simple to create a control button that will trigger the piece to jump across the board.
Composer uses very simple conditional logic to program behaviors. You can add an object, then in the effects menu, create a new behavior that is essentially a set of instructions with an “if-then” structure.
To make my chess piece jump from one space to another, I added the chess piece graphic, recorded the X/Y coordinates of the place I wanted to end up, then moved it to the place I wanted to it start: its position in the puzzle you see when you turn to that page. Then, I added a number button graphic, positioned it on he page, then “locked” it in place.
Finally, I created my Behavior: essentially, “If the user touches [the button], then change the position of [chess piece] to [X=350, Y=108] in .5 seconds.” I also added a second effect to the “then” part of the if-then instructions, “play the ‘Crank’ audio file instantly.” The overall effect is that when the user touches the appropriate number button, the piece jumps across the page to the correct space on the board, and you hear a “crank” sound, as if some unseen mechanism is moving the piece.
Remember, I don’t know any computer code. Everything I just described was accomplished simply by loading the graphics and audio files into Composer through iTunes, then adding graphics to pages and creating “if-then” behaviors using simple drop-down menus. The end result is that for me, interactive graphic app design has become completely transparent, allowing author-illustrator or graphic designers to create prototypes and end products in a matter of minutes or hours instead of weeks or months, without knowing any computer code at all. This is simply a revolution in App development.
What’s so exciting to me is that the initial functionality of Composer is just the beginning … the list of upcoming features will include support for adding video files to pages, advanced physics functions for graphic objects, and more. I can’t wait to see what others put together using Demibooks Composer!