Bibliography and Citation

Bibliography
Electronics Sources

1. MorrisLessmore.com  (n.d.).The Fantastic Flying Books of Mr. Morris Lessmore.. [WWW] Available from: http://morrislessmore.com/[Accessed 21/03/2013]

Online Images

1. Flash,Flex and ActionScript tutorials – flashadvanced. (2009). Creating a small shooting game in AS3. [Image Online] Available at: http://flashadvanced.com/creating-small-shooting-game-as3/ [last accessed: 21 March 2013].
2. MorrisLessmore.com  (n.d.).The Fantastic Flying Books of Mr. Morris Lessmore.. [Image Online] Available from: http://morrislessmore.com/ [Accessed 21/03/2013]
3. Tap! The iPhone & iPad Magazine.  (2006-2010.).The Fantastic Flying Books of Mr. Morris Lessmore.. [Image Online] Available from: http://www.tapmag.co.uk/review/438052647/fantastic-flying-books-mr-morris-lessmore [Accessed 21/03/2013]

Citation

Code Script

1. Dave Harfield. (2009). Implement the basic Flash CS3 drag-and-drop technique. [WWW] Available at: http://www.webdesignermag.co.uk/tutorials/implement-the-basic-flash-cs3-drag-and-drop-technique/ [last accessed: 21 March 2013].
2. Emanuele Feronato. (2008). Creation of a matching game with Flash and AS3. [WWW] Available at: http://www.emanueleferonato.com/2008/05/02/creation-of-a-matching-game-with-flash-and-as3/[last accessed: 18 April 2013].
3. Flash,Flex and ActionScript tutorials – flashadvanced. (2009). Creating a small shooting game in AS3. [WWW] Available at: http://flashadvanced.com/creating-small-shooting-game-as3/ [last accessed: 21 March 2013].
4. Justin. (2011). Actionscript 3 code for quitting an Android App. [WWW] Available at: http://cartoonsmartblog.wordpress.com/2011/01/12/actionscript-3-code-for-quitting-an-android-app/[last accessed: 24 April 2013].

Story

1. Wikipedia- The Free Encyclopedia. (2013). The Mouse, the Bird, and the Sausage. [WWW] Available at: http://en.wikipedia.org/wiki/The_Mouse,_the_Bird,_and_the_Sausage [last accessed: 1 December 2012].

Background Music

1. Rappaport, J. (2005-2013). OlaOla.mp3 [WWW] Available at: http://thejasoneffect.net/maple-story-ost/ [last accessed: 23 April 2013].
2. Galbadia Hotel. (2005-2011). Shizuka na egao.mp3  [WWW] Available at: http://gh.ffshrine.org/soundtracks/3573 [last accessed: 23 April 2013].
3. OrisinalMusic. (2010). Among the Clouds – Orisinal (MP3 Download). [WWW] Available at: http://www.youtube.com/watch?v=qDTnUYjFH5E [last accessed: 23 April 2013].

Sound Effects

1. SoundJay.com (2013). page-flip-9.mp3 [WWW] Available at: http://www.soundjay.com/page-flip-sounds-1.html [last accessed: 23 April 2013].
2. SoundJay.com (2013). boiling-water-2.mp3 [WWW] Available at: http://www.soundjay.com/kitchen-sounds-1.html  [last accessed: 23 April 2013].
3. AudioMicro,Inc. (2013). Fill bucket with water.wave [WWW] Available at: http://www.audiomicro.com/free-sound-effects/free-water-sound-effects/page-3 [last accessed: 23 April 2013].
4. SoundJay.com (2013). wood-cracking-2.mp3 [WWW] Available at: http://www.soundjay.com/nature-sounds-3.html [last accessed: 23 April 2013].
5. AudioMicro,Inc. (2013). Bird song.wave [WWW] Available at: http://www.audiomicro.com/free-sound-effects/free-animal-sound-effects/free-bird-sound-effects/page-3 [last accessed: 23 April 2013].
6. SoundJay.com (2013). button-11.mp3 [WWW] Available at: http://www.soundjay.com/button-sounds-2.html  [last accessed: 23 April 2013].
7. Sounddogs.com. (1997-2013). SingleChop.mp3 [WWW] Available at: http://www.sounddogs.com/results.asp?CategoryID=1032&SubcategoryID=33&Type=1 [last accessed: 23 April 2013].
8. Sounddogs.com. (1997-2013). Salt.mp3 [WWW] Available at: http://www.sounddogs.com/searchresults.asp?Keyword=Salt  [last accessed: 23 April 2013].
9. Sounddogs.com. (1997-2013). Swimming.mp3 [WWW] Available at: http://www.sounddogs.com/results.asp?Type=1&CategoryID=1049&SubcategoryID=73   [last accessed: 23 April 2013].
10. SoundJay.com (2013). matches-1.mp3 [WWW] Available at: http://www.soundjay.com/nature-sounds.html   [last accessed: 23 April 2013].
11. Sounddogs.com. (1997-2013). night_cricket.mp3 [WWW] Available at: http://www.sounddogs.com/results.asp?Type=1&CategoryID=1049&SubcategoryID=73   [last accessed: 23 April 2013].
12. AudioMicro,Inc. (2013). Comedy effect spring.wav [WWW] Available at: http://www.audiomicro.com/free-sound-effects/free-cartoons-and-comic-effects/page-3  [last accessed: 23 April 2013].
13. SoundJax.com (2008-2013). 11734^laugh.mp3 [WWW] Available at: http://soundjax.com/laughing-25.html [last accessed: 23 April 2013].
14. AudioMicro,Inc. (2013). Blow nose.wav [WWW] Available at: http://www.audiomicro.com/free-sound-effects/free-cartoons-and-comic-effects/page-3  [last accessed: 23 April 2013].
15. PacDV.com (2013). Hmmmm.wav  [WWW] Available at: http://www.pacdv.com/sounds/people_sounds.html [last accessed: 23 April 2013].
16. freeSFX. (n.d.) eating.mp3 [WWW] Available at: http://www.freesfx.co.uk/sfx/eating?p=2 [last accessed: 23 April 2013].
17. SoundJax.com (2008-2013). 94095^death.mp3 [WWW] Available at: http://soundjax.com/laughing-25.html [last accessed: 23 April 2013].
18. Sounddogs.com. (1997-2013). flap.mp3 [WWW] Available at: http://www.sounddogs.com/results.asp?Type=1&CategoryID=1009&SubcategoryID=40    [last accessed: 23 April 2013].
19. SoundJig. (n.d.) beep26.mp3 [WWW] Available at: http://www.soundjig.com/pages/soundfx/beeps.html [last accessed: 23 April 2013].
20. SoundJax.com (2008-2013). 1149^hmscream.mp3 [WWW] Available at: http://soundjax.com/scream-1.html [last accessed: 23 April 2013].
21. freeSFX. (n.d.) fire.mp3 [WWW] Available at: http://www.freesfx.co.uk/soundeffects/fires/ [last accessed: 23 April 2013].
22. freeSFX. (n.d.) bubble.mp3 [WWW] Available at: http://www.freesfx.co.uk/sfx/bubble  [last accessed: 23 April 2013].
23. SoundJay.com (2013). button-9.mp3 [WWW] Available at: http://www.soundjay.com/button-sounds-1.html [last accessed: 23 April 2013].

Credit

Narrator voice over by Yuki Lim Li Sher

New Problem

I found a problem which occurred at the exit part of the application. The application did not fully exit when I pressed the back button, and when I pressed back to the app, it displayed the previous page when I exit the application. Therefore, I found a script online and it worked well to solve the problem. I had tested this on my phone as well.

the source are from http://cartoonsmartblog.wordpress.com/2011/01/12/actionscript-3-code-for-quitting-an-android-app/

Script

if(Capabilities.cpuArchitecture==”ARM”){

NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, handleActivate, false, 0, true); NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, handleDeactivate, false, 0, true); NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_DOWN, handleKeys, false, 0, true);

}

function handleActivate(event:Event):void

{

NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;

}

function handleDeactivate(event:Event):void

{

NativeApplication.nativeApplication.exit();

}

function handleKeys(event:KeyboardEvent):void

{

if(event.keyCode == Keyboard.BACK) {

NativeApplication.nativeApplication.exit();

}

}

Sound Record and Editing

I am done with animating and coding for the game. It is time for sound recording and editing. There are a few resources that I managed to find for background music, and I also got to ask my friend to help with recording the narrator's voice over for every page of the ebook as written in my script. I also need to find the suitable sound effects for each of my animated part as well as for the game.

After this, I can proceed to the editing those sounds and/or music using Adobe Audition, such as to change the volume or editing the noise of recorded sound. I need to build the hierarchy of sound for background music, narrator's voice over and the sound effects so they will not clash with each other.

Game Development 2 - Pair Game

I found a new script for the matching card game, and it worked well on the frame after a little bit of tweaking the code. However, there is still an error when I tried clicking back to the previous page with the game on page 4 displayed, but cannot be disabled when going back to the previous page or the next page. Since the problem still occurs, therefore I keep going back to the old script to make the tile disappear when the same tiles are matched. I put the solution behind the game after the game is played. I put in a movieclip to show the arranged new duty roles for each characters. 

I still try my best to solve the problem although I had plan B for it.

Animation and Coding

I am currently working on the animation and game coding. I keep testing it on my phone when I am half done with it so that I can find any bugs or problems and fix them earlier. I found out that there is a minor error which is fortunately easy to solve. While doing this, I went to hunt for background music to suit my ebook and some sound effects to go together with the animation and games.

The first game went well, but the problems lie in the second game. This is because the second card game uses OOP and Actionscript file to call into my file. But it appeared in every frame, while it only needs to be on a certain frame. So I went online to look for the solution and hope that it will work out well. I tried very hard but to no avail, even trying different ways to solve the problem but nothing worked out. So I resorted to another script which is shown below:


Matching Card Game

Script


package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class color_match extends Sprite {
private var first_tile:colors;
private var second_tile:colors;
private var pause_timer:Timer;
var colordeck:Array = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
public function color_match() {
for (x=1; x<=4; x++) {
for (y=1; y<=4; y++) {
var random_card = Math.floor(Math.random()*colordeck.length);
var tile:colors = new colors();
tile.col = colordeck[random_card];
colordeck.splice(random_card,1);
tile.gotoAndStop(9);
tile.x = (x-1)*82;
tile.y = (y-1)*82;
tile.addEventListener(MouseEvent.CLICK,tile_clicked);
addChild(tile);
}
}
}
public function tile_clicked(event:MouseEvent) {
var clicked:colors = (event.currentTarget as colors);
if (first_tile == null) {
first_tile = clicked;
first_tile.gotoAndStop(clicked.col);
}
else if (second_tile == null && first_tile != clicked) {
second_tile = clicked;
second_tile.gotoAndStop(clicked.col);
if (first_tile.col == second_tile.col) {
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
pause_timer.start();
}
else {
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
pause_timer.start();
}
}
}
public function reset_tiles(event:TimerEvent) {
first_tile.gotoAndStop(9);
second_tile.gotoAndStop(9);
first_tile = null;
second_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
}
public function remove_tiles(event:TimerEvent) {
removeChild(first_tile);
removeChild(second_tile);
first_tile = null;
second_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
}
}
}

This source is found online :http://www.emanueleferonato.com/2008/05/02/creation-of-a-matching-game-with-flash-and-as3/


Although it is an Actionscript file, it is much easier to refined compared to the previous version I had.

Display Measurement

I found out that Galaxy Tab display have two different measurements: 1024px x 600px and 1280px x 800px. Therefore, to ensure my graphic remain same size and able to fix into different size, I try to publish it as an application and test it on my Samsung Galaxy S3 phone with displayed on 1280px x 720px and my friend's Samsung Galaxy W displayed on 480 x 800 pixels. It is a relieve to know that it just needs to be set into full Screen and it will work fine in any device.

Samsung Galaxy W

(480 x 800 pixels)

 Samsung Galaxy S3

(1280px x 720px)

Digital sketches

There are 12 final digital sketches. It took me a lot of time to match the colours other than sketching the outline. I have also added dialogues into the pages, and I am currently working on the animation before proceeding to coding the full game.

Characters Design

Mouse

The Mouse character being test into different colours. I find it very hard to match it with other colours. At first, Mouse with an outline looks very weird to me. I then tried changing to using only one type of colour with different gradients, and I think it looks much better. After that, I tried experimenting with different colours, even using two tones. I end up with the blue mouse as yellow blends in easily with the white background. 

Sausage

Sausage character was at first brown in colour but I felt it was too dull. I liked it when it is filled in pink and red colours to show the look and mood of an actual sausage. Yellow sausage looked like a banana while blue sausage looked like a jelly bean.

Bird

I like this Bird character the most. It looks very quite in this shape. I ended up using yellow colour on Bird because I want the three characters to be in primary colours, although it looks nice in blue and red as well.
Selected Characters
Three of characters have matched with each other to build a harmony colour mood. Blue for Mouse, yellow for Bird and Sausage is red. The colours quite represent the characters themselves.

Art Direction and Moodboard (Refined)

Using the same image references, I decided to change my colour schemes to produce a different mood for the entire story. The previous colour scheme is a bit too deep and therefore I decided to change it to brighter colours, mainly following primary colours. The art direction will remain the same which inspired me to create my own style. My image will contain seven type of colours either in characters or backgrounds.

Cover and End Sketches

I realised that I accidentally left out the cover and end pages for my mobile application. I included them as shown below.

Cover Page Sketch 1

Cover Page Sketch 2

End Page Sketch 1

I want to remain a very simple interface without too many elements although children actually love to see many things in one picture. I prefer to keep it clean and focus on the actual story instead.

Example of Outcome

Figure 2. MorrisLessmore.com  (n.d.).The Fantastic Flying Books of Mr. Morris Lessmore.. [Image Online] Available from: http://morrislessmore.com/ [Accessed 21/03/2013]

This is very good example suggested by my supervisor, Ms Alison. This application is available in the App Store and can be read in the iPad and iPhone. Users can read and interact with every scene to understand the story. It has an animated short film and some games to play around. It is what I want to achieve in my final project - to build cool and nice android book application. 

Figure 2. Tap! The iPhone & iPad Magazine.  (2006-2010.).The Fantastic Flying Books of Mr. Morris Lessmore.. [Image Online] Available from: http://www.tapmag.co.uk/review/438052647/fantastic-flying-books-mr-morris-lessmore [Accessed 21/03/2013]

This image is an example of the look and feel of the application. When your finger is tapped on the books, the books will fly like a bird.

Refined Sketches

Page 2 sketch has been added in a game.

Previous page 3 is game page but it has now become an interactive story page.

Previous page 7 is collecting game and it is changed to interactive animation page.


Page 8 has become cooking game which located on page 3 in previous page.

There are 10 refined sketches because the game in page 3 and 4 are too close together. I was advised by my supervisor to leave a gap between both the games. So I refined the game location according to the new game structure with same game which is decided below.

Sketches

There are 10 sketch pages, including three game design. This is how it would look and feel for the composition of drawing according to the story. These sketches are drawn according to the refined game structure, together with some of my own creativity.

Game Development 1 - Pair Game

ActionScript 3.0 Class

Main
package com {


import flash.display.MovieClip;
import flash.events.MouseEvent;

public class Main extends MovieClip {

public var cardManager:CardManager;

public function Main() {
trace("Main is ready!")

resetBTN.visible = false;
resetBTN.buttonMode = true;
resetBTN.addEventListener(MouseEvent.CLICK,resetClick)

cardManager = new CardManager(this);
cardManager.addMe();
cardManager.x = 225;
cardManager.y = 160;

}

private function resetClick(e:MouseEvent)
{
trace("RESET THE GAME")
resetBTN.visible = false;
cardManager.GAME_RESET();
}
}

}

CardManager

package com

{

import flash.display.MovieClip;

public class CardManager extends MovieClip

{

private var _baseMC;

private var _noTry:int = 0;// Number of tries

private var _cardArray:Array = new Array();

private var _compareNo:int = 0;// use to compare

private var _compareMcAry:Array = new Array();

private var _totalOfPairs:int = 4;

private var _currNumPairs:int = 0;

public function CardManager(baseMC)

{

this._baseMC = baseMC;

generateCards();

}

private function generateCards():void

{

var numOfCard:int = 8;

var posX:int = 0;

var posY:int = 0;

var arr:Array = new Array(2,2,3,3,4,4,5,5);

var arr2:Array = [];

while (arr.length > 0)

{

arr2.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]);

}

arr = arr2;

trace("Answer: " + arr);

for (var i:int =0; i<numOfCard; i++)

{

var card:PairCard = new PairCard(this);

card.addMe();

card.myNum = arr[i];

_cardArray.push(card);

// _cardArray[i] = card;

card.x = posX;

posX +=  card.width + 10;

card.y = posY;

if (i==3)

{

posX = 0;

posY +=  card.height + 10;

}

}

trace(_cardArray);

}

public function cardClicked( mc:MovieClip, cardNum:int )

{

_noTry++;

switch (_noTry)

{

case 1 :

_compareNo = cardNum;

_compareMcAry[0] = mc;

break;

case 2 :

_compareMcAry[1] = mc;

if ( _compareNo ==  cardNum )

{

_compareMcAry[0].correctPair = true;

_compareMcAry[1].correctPair = true;

resetAllCards();

_noTry = 0;

checkForWin();

}

break;

case 3 :

resetAllCards();

_noTry = 0;

break;

}

/*if(_noTry == 3)

{

resetAllCards();

_noTry = 0;

}*/

}

public function resetAllCards():void

{

for (var i:int = 0; i < _cardArray.length; i++)

{

if (_cardArray[i].correctPair == false)

{

_cardArray[i].gotoAndStop(1);

}

}

}

public function checkForWin():void

{

_currNumPairs++

if( _currNumPairs == _totalOfPairs )

{

trace("WIN - it's time to call out the button!")

this._baseMC.resetBTN.visible = true;

_currNumPairs = 0;

}

}

public function GAME_RESET():void

{

for (var i:int = 0; i < _cardArray.length; i++)

{

_cardArray[i].correctPair = false;

_cardArray[i].gotoAndStop(1);

// random the colour

}

}

public function addMe():void

{

this._baseMC.addChild(this);

}

public function removeMe():void

{

this._baseMC.removeChild(this);

}

}

}

PairCard

package com

{

import flash.display.MovieClip;

import flash.events.MouseEvent;

public class PairCard extends MovieClip

{

private var _baseMC;

public var myNum:int = 0;

public var correctPair:Boolean = false;

public function PairCard(baseMC)

{

this._baseMC = baseMC;

this.buttonMode = true;

}

private function initializeEvent():void

{

this.addEventListener(MouseEvent.CLICK,cardClick);

this.addEventListener(MouseEvent.MOUSE_OVER,cardOver);

this.addEventListener(MouseEvent.MOUSE_OUT,cardOut);

}

private function cardOver(e:MouseEvent)

{

this.alpha = 0.5;

}

private function cardOut(e:MouseEvent)

{

this.alpha = 1;

}

private function cardClick(e:MouseEvent)

{

if(this.currentFrame == 1)

{

this.gotoAndStop(myNum);

this._baseMC.cardClicked( this, myNum)

}

}

public function addMe():void

{

this._baseMC.addChild(this);

initializeEvent();

}

public function removeMe():void

{

this._baseMC.removeChild(this);

this.removeEventListener(MouseEvent.CLICK,cardClick);

this.removeEventListener(MouseEvent.MOUSE_OVER,cardOver);

this.removeEventListener(MouseEvent.MOUSE_OUT,cardOut);

}

}

}

This source is also from a previous project I worked on when I was still back in Malaysia. This is how it looks for a pairing-up game and it will be applied as a mini game for my final project in which the mouse, bird and sausage gets to rearrange their duties.