Creating an app for iPad, application development of an interactive picture book

  • 9,433 views
Uploaded on

In this lesson you will learn all about making the iPad app from the picture book Timo and the Magical Picture Book. What is an app? What is a digital book? How do you make animated cartoons? How can …

In this lesson you will learn all about making the iPad app from the picture book Timo and the Magical Picture Book. What is an app? What is a digital book? How do you make animated cartoons? How can you create your own animations?

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,433
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
174
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Timo and the Magical Picture Book – About creating an appIn this lesson you will learn all about making the app from the picture book Timo and the MagicalPicture Book. This picture book was written by Rian Visser and illustrated by Klaas Verplancke.Goal: To learn how a digital picture book is createdAge: Recommended for ages 10 and up Content What is an app? 2 What is a digital book? 3 The author and illustrator 4 Paper and digital editions 5 What is an iPad? 6 Animated cartoons 7 Interactive pages 10 Audio 11 Programming 13 Design 14 Trailer 15 Publishing information 16 Creating your own animations 17 E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 1
  • 2. Timo and the Magical Picture Book – About creating an appWhat is an app?App is is short forapplication.An app has to be installed onan electronic device (such as acomputer, smartphone, iPodTouch or iPad) and adds to allthe things you can do with thatdevice.An app can be a game, book orprogram.Timo and the Magical Picture Bookis a book app. It is abook made into a digital file, inother words a digital book. Watch the trailer for Timo and the Magical Picture Book on YouTube. E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 2
  • 3. Timo and the Magical Picture Book – About creating an appWhat is a digital book?Did you watch the trailer for Timo and the Magical Picture Book? What did you notice? Whichdifferences are there between a paper book and a digital book? What is the same?Paper book Digital book• It has a cover (front, spine, back) • You need an electronic device to read it with paper pages inside • It has text and drawings• It has text and drawings • Sometimes you can swipe things on the screen• You flip from one page to the next • Sometimes it has animations• You read it yourself • Sometimes it has sounds • Sometimes you can make things happen yourself E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 3
  • 4. Timo and the Magical Picture Book – About creating an appThe author and illustrator Rian Visser came up with Klaas Verplancke made the the Timo story. She has illustrations with the story. He already written a lot of books first made sketches and then the for children aged 2 to 14. real illustrations. © Photo Jan DartheRian Visser Klaas Verplancke E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 4
  • 5. Timo and the Magical Picture Book – About creating an appPaper and digital editionsThe paper editionThe printed book was on sale in Dutch bookstores only. About3000 copies had been made. This is called an edition. Sometimes abook may get a second edition, but Timo and the Magical PictureBook is no longer available in print. The original bookA digital book from the App StoreDigital books can be bought from digital bookstores,like the App Store. They can never run out of copies,so a digital book will always be available.A digital book can easily be changed, too; to add newgames, for example. Then you can download a new versionof the book from the store. This is called an update.To read the digital book you need an electronic device,such as an iPad. Some children’s books apps on the iPad E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 5
  • 6. Timo and the Magical Picture Book – About creating an appWhat is an iPad?An iPad is a like a computer and screen put together into one gadget.. This is also called a tablet.What can you do with it? The story• View movies Timo gets a picture book from his uncle Nick. Nick• Play sound, music writes: Do not shake the book, that mixes everything• Play a game up. Timo shakes the book anyway.• Surf on Internet• Touch the screen to make things on it move In a paper book, the• Swipe the screen to turn pages drawings are fixed,• Move the iPad about to make things but on the iPad they happen; the iPad kind of ‘senses’ it can move. when you rotate or tilt it When you shake the• Blow into the microphone to make iPad, plates really things happen come falling down• Read a book and mother starts• Type a note, story or email pouring milk on• Look at electronic maps and see the plants. where you are (GPS) Digibordles Timo and te Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Pag 6
  • 7. Timo and the Magical Picture Book – About creating an appAnimated cartoonsIn paper books drawings are fixed, but in animated cartoons they move. An animation artist edited thedrawings from the paper book to bring them to life. This scene shows Timo running to the mailbox. Images from the animationDrawing from the paper book Step 1: We needed a background without Timo or the packet. Everything in the foreground was erased so the background could be recaptured. Stefan de Groot is an animation artist. He created the moving cartoons for Timo and the Magical Picture Book.Stefan de Groot E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 7
  • 8. Timo and the Magical Picture Book – About creating an appStep 2: Next, Timo’s image had to be cut from the background.The computer program Photoshop was used for this.The picture below shows it when it was partly completed. Step 3: Then Timo’s image was split into parts. E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 8
  • 9. Timo and the Magical Picture Book – About creating an appStep 4: The animations were created using the program Anime Studio Pro.The various parts of Timo’s image were fixed to a sort of outline frame. The picture belowshows this outline in red lines. The animator could now make Timo move and film that. That is how the animation came to be. Watch it on YouTube. E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 9
  • 10. Timo and the Magical Picture Book – About creating an appInteractive pagesApart from the cartoons, there are pages in Timo and the Magical Picture Book whereyou can make things happen by yourself. By blowing into the iPad’s microphone youcan make Timo’s belly grow as big as a balloon. Just like for the other animations,drawings had to be cut and split apart, and background images recaptured. E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 10
  • 11. Timo and the Magical Picture Book – About creating an appAudioReading out loudYou can choose whether you want to read Timo and the Magical Picture Book yourself orlisten to it. The book is in English and Dutch. The Dutch narrator is Siebe Meijer.He is a presenter, filmmaker and voice actor. The Dutch text was translated into Englishby Jo Hughes. The English narrator is John Chapman.Microphone Siebe Meijer E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 11
  • 12. Timo and the Magical Picture Book – About creating an appSound EffectsThere are lot of sounds in the book. Most of them the animator made himself. Some soundeffects were bought from professional sound effects companies. When Timo rattles the packet, you will hear the sound of little things smashing. The clattering sound was made by rattling a chess piece inside a small cardboard box. His baby brother drops his The animator made the cow’s dummy, then burps. mooing sound. We won’t tell you who burped in real life. When mother pours milk onto the plants, the actual sound you hear is that of a glass of water being emptied into a bucket. E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 12
  • 13. Timo and the Magical Picture Book – About creating an appProgrammingOnce the animations and sound effects had been completed, programmer Jeffrey Snijdercould start putting everything together. He did this by writing codes in a computerlanguage called Objective C. This is called scripting. It makes it possible, for instance,to click on the right hand side of each page to continue to the next. Jeffrey also scriptedthe games, like the one where you can create drawings with the knitting yarn. When you click on Timo’s head, he starts shaking it and the knitting yarn around himJeffrey Snijder disapears. E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 13
  • 14. Timo and the Magical Picture Book – About creating an appDesignAn ordinary book has a cover which you The designer chooses the type and sizeit can recognize. of letters (typography) for the app and decidesThe app has an icon. what pages and buttons should look like andIn the App Store of Apple such an icon is always which colours to use. On the page shownsquare with rounded. Here you see the icon of the below you can choose which language to usefree app TimoLite. by clicking on one of the red boxes.Icon Digital Book Icon Digital Book E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 14
  • 15. Timo and the Magical Picture Book – About creating an appTrailerWhen the app was finished, a short video – called a trailer – was made to showwhat using the app would look like. The girl you see in the video is programmerJeffrey Snijder’s daughter. Of course she already knew the app very well, but she stillenjoyed using it again and again. The trailer on YouTube.The trailer was filmed and edited by filmmaker Siebe Meijer and animator Stefan deGroot. Editing means they put together the best bits of video and then added somenice music to it.Trailer Editing the trailer E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 15
  • 16. Timo and the Magical Picture Book – About creating an appPublishing informationTimo and the Magical Picture Book was published by Books2download, a company run byRian Visser and Bert Vegelien. Animator Stefan de Groot and programmer Jeffrey Snijder set upa company together called Appsmakers.On both companies’ websites you can learn more about the app.www.books2download.nl www.appsmakers.nl E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 16
  • 17. Timo and the Magical Picture Book – About creating an appCreating your own animationsA few websites.Animationish Pivot Stickfigure Scratch Digicel Flipboek Xtranormalwww.toonboom.com/ Animator scratch.mit.edu www.digicelinc.com www.xtranormal.comproducts/animationish www.snapfiles.com/ getstickfigure.html Flipbook Take an empty notebook and make a drawing on every page. Movie on YouTube E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 17