Note: I was App Architect for this project and these are insights from inside the code. If you want to know more catch up with me on twitter @sketchytech
The menu screens were created out of the need for a way into the app, and the idea for the parallax came from wanting the sense of depth that it supplied.
When you use the menu screens what you see is the top layer moving at the speed of the finger drag and each one beneath moving progressively slower. This continues to the bottom layer which is moving slowest of all.
In order to achieve this, each scroll view is narrower than the one above it. And the coder (Joseph) came up with the concept of transition spaces, areas that would be blank in each layer. This solved the issue of how to design and place content, and was a highly efficient tool for the designer (Alexis).
.png)
.png)
The content area for each page is the size of the screen area but each layer has transition spaces that are increasingly narrow as you move down the layers. The files were created in Photoshop by Alexis, the designer, and were then saved as transparent PNGs.
This was the first time any of us had created something like this and we didn't realise in the first instance the strain on the memory it would create, and the loading time going in and out of the menu screens. At the point where this was discovered we cropped the figures and relied on the code more heavily to perform the layout. This along with other techniques, in particular lazy loading, helped us halve the memory use.
This was the first time any of us had created something like this and we didn't realise in the first instance the strain on the memory it would create, and the loading time going in and out of the menu screens. At the point where this was discovered we cropped the figures and relied on the code more heavily to perform the layout. This along with other techniques, in particular lazy loading, helped us halve the memory use.
Even with these savings we soon learned that the iPad 1 couldn't keep up with the demands being placed on it. So we created a flattened, non-parallax version for this device. Something that we would also end up doing for The Story of the Story content. We did this in both instances to provide the best experience tailored to the capabilities of the device. And in this way everyone gets to enjoy the book no matter which iPad they own, it is just with an iPad 2 or third or fourth generation iPad you get that little bit extra thanks to the increased memory.
The app is live on the App Store, you can download The Waking Prince here.
Introduction | Part 1 | Part 2 | Part 3 | Part 4
The app is live on the App Store, you can download The Waking Prince here.
Introduction | Part 1 | Part 2 | Part 3 | Part 4
Comments
Post a Comment