How to Create your own Children's BookTo create your own children's book
Make your own children's book
Name of the teacher: Get to know the fundamentals of children's book creation and illustrations skills. Combine words you've typed with drafting, coloring, photography, collateral and more. An $8 material charge is payable to the first grade tutor for hand-outs. Utilities list: Pupils take a sketch pad (approx. 10" x 14") and a color pencil kit to the first year.
There will be a suggestion form available at the time of enrolment and will be reviewed in the first year. If you would like more information, please call the teacher at (410) 956-1117 or firstname.lastname@example.org.
Make Your Own Book - Squirmy Wormy Children's Books & Best Mom Tips
I was able to part with my childhood book writer and graphic artist at my daughter's Career Day today. The book was about the element that goes into making a book and how to create a character on the basis of actual story. Every kid got a free color page!
And we were talking about how to create a personality on the basis of a true item you loved - like a cupcake, a car or a gad. With them I share some of my latest illustration for my Snailbook, with all the different little slugs and their variations. Next we were discussing how we felt and what it looked like when we are angry, upset, or lucky.
Finally, we talked about places where our characters could go and what they would do together. Get a free color page kit so your kid can create his own at home!
To create an interactive children's book for the iPad
Find out how to create an iPad kids book! With the iPad, designers can create nice kids interactivity book that can't be reproduced in any other media. You can find some samples in The Monsters at the End of This Book, Bobo Explores Light, and Wild Fables. However, Apple has now provided its own 2-D frameworks named Sprite Kit, which is perfectly suited for the creation of these forums.
Use the Sprite Kit to create an animated book in which you will be taught how to create animations, how to create animations, how to allow the readers to interactively manipulate the book and even how to create soundtrack! The prerequisite for this guide is that you are at least acquainted with the basic principles of Sprite Kit.
New to Sprite Kit, please read our Sprite Kit Intro. First, please donwload the start projec for this guide. To get a fast overview of its structure, simply unzip the file to a suitable place on your diskette. Artwork: This contains all artistic values.
Sceneries: As you may have already discovered, it contains all the categories that manage the different scenarios of the game. and cannot be used in your own applications. Both are great ressources for your projekt, but you have to make an allocation. You are only working with the "Scene*" group.
As with any good book, it's best to begin at the beginning. This next section takes you through the "Title" section of your book. Starters provide stable copies of the methodologies used in this scenes - it's up to you to insert the snippet. The first step is to initialise the scenes and create a wallpaper.
In the Scene00.m window, open the Scene00.m document and append the following codeblock to initWithSize: immediately after the comments that /* adds the installer here */: SkiSpriteNode *background =[SkiSpriteNode spriteNodeWithImageNamed:@"bg_title_page"]; backgrounds. The above source text generates an SkiSpriteNode instance and initialises it with the spriteNodeWithImageNamed: cl.
CGPointZero then resets the anchor point of the backgrounds to CGPointZero, the lower lefthand edge of the scenes. Next, the location of the wallpaper is set to CGPointZero, the lower lefthand part of the display. Eventually, it uses the addChild: classic methods to append the recreated nodes to the SKScene as a parent.
s will be in charge of most of the contents you will be adding to your Sprite Kit applications. Immediately after calling addChild:: [self setUpBookTitle]; [self setUpSoundButton]; The two method calls here are currently only shell calls; you will work them out in the next section.
Create and start your subproject; you should see the cover page as shown below: Like you saw in the above cipher, it is easy to easily include an SkpriteNode in your clip. Only a few rows of coding are needed to create a texturized spread to each one. After the wallpaper has been added, you must enter the book name.
I thought you could use an SKLabelNode for adding your song or even a utility view, but instead I chose a graphics. If you are still working in the Scene00.m document, you should append the following codeblock to setUpBookTitle: SkiSpriteNode *bookTitle =[SkiSpriteNode spriteNodeWithImageNamed:@"title_text"]; SkiSpriteNode. name = @"bookTitle"; SkiSpriteNode. name = CGPointMake(421,595); [self addChild:bookTitle]; In the above mentioned source you first create a SkiSpriteNode and then initialise it with spriteNodeWithImageNamed:.
Then name the point "bookTitle" to make it easier to refer to later and change the location of the point to something other than CGPointZero. Because the wallpaper occupies the whole display, you can place it in the lower lefthand part of the display. Create and start your subproject; you will see your wallpaper with the chart name above it, as shown below:
However, wouldn't it be great if you could just put a little extra activity on your front page? The Sprite Kit makes it simple to animate the items in your scenes.
Next, a new sequential operation is created using the sequence: the SKAction order of the order in which the specified set of operations is executed in the specified order. If you do this, the spring will move the spring downwards, then upwards and then downwards again before it comes to a halt.
Next, change the line to line setting the location attribute of notebookTitle as shown below: houseTitle. location = CGPointMake(425,900); This just changes the starting location of the cover picture so that it launches outside the display. Create and launch your subproject; the track now glides in and jumps off a little before it comes to a halt at the location specified in actionMoveDownFast.
Action is great, but soundtrack is an essential part of any kids' book. The Sprite Kit also makes it very simple! While there are several ways to enhance your book with your own musical and other tones, in this guide you will concentrate on just two ways, one for the addition of your backgrounds and the other for the addition of comments and soundeffects.
Import Adfoundation; Adds the following custom instances to Scene00. At the location specified by the comments /*, create your instances here */: AVAudioPlayer *_backgroundMusicPlayer; SkSpriteNode *_btnSound; BOOL _soundOff; Next, insert the following two rows of line just before the line that generates the backgrounds in initWithSize::
sounOff = [[NSUserDefaults standardUserDefaults] boolForKey:@"pref_sound"]; [self-playing background music:@"title_bgMusic. mp3"]; This command gets the BOOL value that indicates the user's preferences for turning the sounds on or off and allocates it to the _soundOff entity variables. Now, you have to insert the following codeblock to playBackgroundMusic:: numerOfLoops=-1; _backgroundMusicPlayer. volume= 1. 0;[_backgroundMusicPlayer prepareToPlay]; playBackgroundMusic: play the backgroundmusic with an audioPlayer-Objekt.
If it still works in Scene00. w, just insert the following source file to the setUpSoundButton:
Irrespective of its value, it then tests _soundOff and unloads the current fragment from the display and initialises a new fragment with the corresponding On/Off-scan.
Then, he determines the location of the Sprite, add it to the top level display and either stop or start the song according to the user's preferences. This is just one way to achieve this; the next section shows you another way to do this. At the moment, the application should be created and executed, and the backgroundmusic should be played.
This is because the controller does not have any custom sprites. You can use this technique to detect the place of contact and react accordingly.
Hint: Since each SKNode enhances the UIResponder, you can directly integrate touchtouch in your sprite. To keep the number of categories within the node clear, this step-by-step guide executes all contact incidents. But in a manufacturing application it would make more sense to create an SKSprite Node sub-class, such as SoundToggleButton, and let this sub-class treat its own touches.
See the if command above; you will see that you call showSoundButtonForTogglePosition: when the point of contact is on the soundbutton. In Scene00, insert the following source file into our program box: in Scene00. m:
Hint: The item saves a link to the graphic information in storage that a spread. Create and run, and now you should be able to press the Play buttons to turn the backgroundmusic on and off. Sync by n17t01 You need this to present the next sequence; this is page 1 of the book and is driven by the Scene01 group.
In Scene00. In Scene00. m, insert the following line to get line that generates ActionMoveFast as the following line to get line to get line to call runAction: on bookTitle:
Inserting the source to create the sprite and playback a soundtrack within an operation allows you to execute that source at a specific point in a series of operations. You may have already found out that there is usually more than one way to peel a cat's skins - or encode your children's book!
Substitute the line in sentenceBookTitle that runAction: on notebookTitle invokes with the following code: SkiNode *startButton =[self childNodeWithName:@"buttonStart"]; This will assign to the nodes the buttons previously added in the act showButton.
The above snippet inserts a new sequence and presents it with a new transitions when a click on the "Read Story" buttom. Construct and operate your projects. Press the "Read History" pushbutton and the next sequence appears on the monitor. You' re not going to see much here - your next job is to put some substance on the first page.
This section will include the first page of the book along with a physical simulator and tactile responsiveness algorithm. You have to arrange the scenery before you do that. Scene01 or Scene01D. Open Scene01.m and insert the following instructions at the beginning of the file: In the Scene01 deployment section, include the following custom variable. m: skpriteNode *_footer; skpriteNode *_btnLeft; skpriteNode *_btnRight; Note: From this point on, all your noise related codes will be contained in the startup for you.
To see how the sounds are realized in this product, take a look at the preceding section. As before, you must initialise the sequence before you can do anything with it. While there are several ways to achieve this, this guide follows the idea of building individual methodologies for each sequence instead of dealing with everything within a common one.
To Scene01.m, insert the following codeblock immediately after the comments reading /* Extra Set-up */: These are your main set-up modes - your task is to do them. So the good thing is that the implementations of getUpText setsUpFooter are the same for each of your project's scenarios, so you only have to type it once for each of them.
In Scene01, insert the following text to the following code: addUpText. m: SkSpriteNode *text =[SkSpriteNode spriteNodeWithImageNamed:@"pg01_text"]; text. item = CGPointMake(300, 530); [self addChild:text]; [self readText]; Here you create an SkySpriteNode, place it and insert it into the Scene01 area. There is an illustration for the text of the page in the above spring; you have a spring for the text of each page in your book.
It is also called the text-readText, which is the story for the book of the very gifted Amy Tominac.
There is an important distinction this time: you must also give your actions a readText name. Construct and run, and now you see and listen to the spoken text for page 1! The next step is to insert the navigational control for your application, all of which are at the bottom of the page.
In Scene01, append the following command to the following code: _footer =[SKSpriteNode spriteNodeWithImageNamed:@"footer"]; _footer. position= CGPointMake (self.size. width/2, 38 ); [self addChild:_footer]; _btnRight =[SKSpriteNodeNode spriteNodeNodeWithImageNamed:@"button_right"]; _btnRight. position= CGPointMake(self width/2++470, 38) ;[self addChild:_btnRight] ; _btnLeft =[SKSpriteNode spriteNode spriteNodeWithImageNamed:@"button_left"] ; _btnLeft. item = CGPointMake(self.size. only.
Lastly, he will add the Soundtoggle buttons, which should look pretty similar, as it is basically the same coding you used to configure the buttons in the last one. Create and execute, and you will now see the bottom line at the bottom of the image (although typing on it has no effect yet):
Well, now that the basics set up of scenes is finished, it's primordial roll. While still working in the Scene01.m document, include the following personal tag in the Scene01 implementation: SkiSpriteNode *_kid; This tag contains a link to your primary character's Sprite. Next, put the following two rows to Scene01 `s[ self setUpMainCharacter]; [self setUpHat]; These simple call other ways to keep your source cute.
In Scene01, insert the following line of text to the following code: _kid =[SKSpriteNode spriteNodeWithImageNamed:@"pg01_kid"]; _kid. anchorPoint = CGPointZero; _kid. item = CGPointMake(self.size. width/2-245, 45);[self addChild:_kid]; [self setUpMainCharacterAnimation]; This should be quite common by now; you create an SkySpriteNode, place its anchor point and location and insert it into the clip.
In Scene01, insert the following line of text to the following text. With the above example, the protagonist uses two pictures to do this. This first line generates an arrays to capture your pictures. Then, create the name of the picture, create an SkinTexture instance for each picture in the animated picture, and insert that instance into your arrays.
Now create the animated sequences using the animateWithTextures:timePerFrame: clase technique, which requires an arrays of texture. Eventually, you tell the _kid Springer to execute its operation. Create and start your story; click on the "Read History" tab and you will see the protagonist appear on the monitor and his eye blinking as the story is played in the background:
If you really want to make your book more attractive, you can do so by introducing some interaction. This section creates a cap for the protagonist that the user can pull over the display and place on the protagonist's skull. If you are still working in Scene01.m, include the following entity tag in the Scene01 implementation:
SkinSpriteNode *_has; Ad the following to setUpHat in Scene01. m: SkinLabelNode *label = [SKLabelNode labelNodeNodeWithFontNamed:@"Thonburi-Bold"]; text tag = @"Help Mikey put on his has! _has ard =[UIColor yellowColor] ; _has ard = CGPointMake(160, 180) ;[self addChild:label] ; _hat =[SKSpriteNode spriteNodeWithImageName:@"pg01_kid_hat"] ; _hat. has ard = CGPointMake(150, 290) ; _hat. has. physicalBody =[SKPhysicsBodyBody:_hat. size]; _hat.physicsBody. restitution=0. 5; [self addChild:_hat]; The first half of the above source produces an SKLabelNode item and inserts it into the scenery.
In Sprite Kit, it is a knot used to plot a given number. This second half of the barcode will add physic to the scenery. You' ve designed the SkySpriteNode and _has associated it with a SkyPhysicsBody, which allows you to add a number of different properties such as form, height, mass, gravitational force and frictional properties to your object.
Five, which means your physical device bounces off an object with half its starting power. Create and start your subproject; press the "Read History" tab and....huh? In Scene01.m, just after the line that addsChild calls: to include _footer to the scene: self. physicsBody= [ SKPhysicsBody bodyWithEdgeLoopFromRect:_footer. frame]; Create and start your current file again; this one has something to end up with - the physical entity you have created in the bottom line.
You will also see the amber text labels you create with SKLabelNode as shown below: TACHESBEGAN:withEvent: will end as one of the longest ways you will be writing; it already contains the editing you have written for Scene00 to switch the backgroundmusic, and you will be adding support for the keys of the next/previous page and for shifting the cap into the next codeblock.
Insert the following codeblock immediately after the if command from touchesBegan:withEvent: in Scene01. m:
After that, the touching is controlled by pausing the backgroundmusic and switching to the corresponding scenery. self runAction:readSequence withKey:@"readText"]; The above added codeblock uses this prefix to verify if the readText operation is running.
Like I said before, you will probably want to use something more rugged to tell the text in your application at the shop floor stage. I would like to give the readers the opportunity to return to the first sequence, no mater where they are in the book. Insert the following cipher directly below the previously added cipher that will lead you back to the first sequence when the book name is touched in the footer:
see presentScene:scene transition:sceneTransition]; The above test the contact point is slightly different from the other exams you have performed.
Since the book name is part of the footnote, the system only examines whether the point of contact is in the area in which the book name is appear. Usually it is not a good practice to distribute "magic numbers" like these over your application, but it does help to keep things easy in this guide.
Other of the above is the same as the one handling the previous page's touches. In the Scene01 implementations, include the following two instances of Scene01. m: BOOL _touchingHat; CGPoint _touchPoint; In the above source text, _touchingHat saves whether the end users are currently in contact with the cap, while _touchPoint saves the last point of contact.
Next, insert the following line directly above the line you just modified in Scene01.m:
You need to follow the contact as it travels across the display, so you must append the following line to touchesMoved:withEvent: in Scene01. m: _touchPoint = [[touches anyObject] locationInNode:self]; Here you refresh the last contact position saved in _touchPoint.
This is where you verify that the users take their hats off; if so, move the cursor from _hat to the actual point saved in _touchPoint. You use the clamp feature of Sktils to make sure the cap does not move off the display or under the bottom line. Create and start your subproject, click on the "Read History" tab and toy a little with the cap on the game.
They should be able to move the cap slightly with your fingers when the changes are made to the physical but it is a little harder to move it when you annotate the changes. Change touchesEnded:withEvent: to look like the following code:
As soon as the wearer lets go of the cap near enough to the child's child's skull, the guide will position the cap to the precise position specified by actualPoint. x and actualPoint.y. In addition, a tone is played with SKAction's playSoundFileNamed: Klassenmethode to tell the wearer that the cap is now securely on top of the child's major character's helmet - which is important!
Construct and lead your game, take the cap and put it on your character's head: For this purpose it is preset for you in Scene02.m. The source is strongly annotated for your enjoyment of read, and since it is very similar to Scene01, it is not discussed here in detail.
When you create a sounds operation, your application will load the audio into RAM so that the initialization of the sounds operation before it is needed will eliminate all possible breaks your user may have. Create and start your subproject; press "Read History" and use the arrow keys to move back and forth in the history (after the text has been read):
I hope you enjoy your brief pause to interact with the kitten, but don't think it's in your best interest to try writing the page two cipher! There' s a great deal to learn when you check the codes others have posted. To keep this tutorial focussed, Scene03.m also provides a great deal of source material you'll need, but there's a little more to it.
In Scene03, append the following source file to your Scene03 file: kspriteNode *cat =[SKSpriteNode spriteNodeWithImageNamed:@"pg03_kid_cat"]; ccat. anchorPoint = CGPointZero; cat. position = CGPointMake(self.size. width/2 - 25, 84);[self addChild:cat]; [self runAction:[SKAction repeatActionForever:[SKAction sequence:@,[SKAction waitForDuration: duration]]]]; As before, create a new node, place its anchor point and location and attach it to the world.
Now create a SK action scene that will run forever. Use the performanceSelector:onTarget: of SkiAction to execute any of these methods. In Scene03, insert the following source file to your Scene03 SpainSnowflake. m: cg float randomNumber = random float range(1, 4); cgf float duration= random float range(5, 21); nssstring *snowflakeImageName = [nsstring stringWithFormat:@"snowfall0%. 0f ",randomNumber] ; skpriteNode *snowflake =[SKSpriteNode spriteNodeWithImageNamed:snowflakeImageName] ; winterflake. nom = @"snowflake" ; winterflake. item = CGPointMake(RandomFloatRange(0, self.
height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Code eigentlichmachen height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Kodex height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Code Act height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser F height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Code R height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser G height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Codeize height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser more height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Codeize height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser more height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Code value height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser end height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Codeize height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser more height/2) duration:duration] ; ªactionRemove *actionRemove =[SKAction removeFromParent] ;[snowflake runAction :[séquence SKAction:@[actionMove, actionRemove]]]] ; Was macht dieser Code is. Produces an SKSprite Node from a coincidental snap. The program will create and execute a SCAction-sequences containing an operation to move the sprite down using the moveTo: classmethod of Skaaction.
Eventually, the removeFromPart classmethod of SKAction will remove the Sprite from the scenery. Hint: This would be the ideal place to apply some physical properties and a way to create a snowball effect when the operator is shaking the unit. Create and launch your subproject; you should see flakes appear on the display and move down as shown below:
Construct and run your own snowstorm and see it unfurl before your very own eyes! Once you've finished building the Snowocalypse, go on - that's enough to play in the winter! Eagleeyed people will have seen the flakes running right over your footing.
It looks good and works, but what do you call it? If you have already seen it, it will be described in detail below if you have not followed the instructions. The Sprite Kit uses a conventional renders loops - often described as gameloops - to handle the content of each framed before the render and presentation.
The Sprite Kit invokes update: for each of the frames; in this way you type the source to call the above generated conflict detecting methods. In Scene03. m: [self checkCollisions]; Create and start your projects; you should now see the flake sprite vanish as they get closer to the top of the footing, as shown below:
There are many things you can do to help your character. For example, a routines like this would be useful to realize when your character fires vessel at an hostile vessel in a spaceship adventurous match. Notice that the Scene04.m has been filled with a" to be continued" scenery. I' d like you to create page four with everything you have learnt in this intro.
Here is a model of what your site might look like: All you need is already contained in the product. For an exchange of experiences you can here dowload the entire example of our work. For more information about Sprite Kit, read our book titled Games by Tutorials.