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.

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.

Game Development 1 - Drag and Drop Game

ActionScript 3.0



{
import flash.events.MouseEvent;

var totalAmout:int = 0;

item1.desc = "Big Bang CD Album";
item1.price = 76;
item1.startX = -6.2;
item1.startY = 1.9;

item2.desc = "Bluetory CNBLUE CD Album";
item2.price = 68;
item2.startX = 86.8;
item2.startY = 61.8;

item3.desc = "City Hunter Pictures Book";
item3.price = 125;
item3.startX = 47.3;
item3.startY = 142.1;

item4.desc = "ThankU CNBLUE CD Album";
item4.price = 40;
item4.startX = -2.7;
item4.startY = 230.2;

item5.desc = "Ouran High School Host Club Poster";
item5.price = 35;
item5.startX = 86.8;
item5.startY = 279.7;

item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;
item4.buttonMode = true;
item5.buttonMode = true;

item1.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item1.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item2.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item2.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item3.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item3.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item4.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item4.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item5.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item5.addEventListener(MouseEvent.MOUSE_UP,onItemUp);

function onItemDown(event:MouseEvent):void
{
var item:MovieClip = MovieClip(event.target);
item.startDrag();
item.scaleX = item.scaleY = .95;
var topPosition:uint = this.numChildren - 1;
this.setChildIndex(item, topPosition);
total.itemName_txt.text = item.desc;
}

function onItemUp(event:MouseEvent):void
{
var item:MovieClip = MovieClip(event.target);
item.stopDrag();
if (bin.hitTestObject(item))
{
updatePurchasedPanel(item);
}
else
{
item.scaleX = item.scaleY = 1;
}
}

function updatePurchasedPanel(item:MovieClip):void {
totalAmout += item.price;
total.itemName_txt.text = "";
total.total_txt.text ="£" + String(totalAmout);
item.scaleX = item.scaleY = 1;
//item.x= item.startX;
//item.y = item.startY;
item.play();
}

This is another game used for this project. The above image is my workshop group homework. I found that the basic concept of drag and drop game structure can applied on my cooking game with some changes applied to suit the game's needs.

The original source from http://www.webdesignermag.co.uk/tutorials/implement-the-basic-flash-cs3-drag-and-drop-technique/

Game Development 1 - Collecting Game

ActionScript 3.0

This source is found online :http://flashadvanced.com/creating-small-shooting-game-as3/

/*

 ********************************

 * Shooting stars game

 * http://flashadvanced.com                              

 ********************************

*/

//importing tween classes

import fl.transitions.easing.*;

import fl.transitions.Tween;

//hiding the cursor 

Mouse.hide();

//creating a new Star instance

var star:Star = new Star();

//creating the timer

var timer:Timer = new Timer(1000);

//we create variables for random X and Y positions

var randomX:Number;

var randomY:Number;

//variable for the alpha tween effect

var tween:Tween;

//we check if a star instance is already added to the stage

var starAdded:Boolean = false;

//we count the points

var points:int = 0;

//adding event handler on mouse move

stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorMoveHandler);

//adding event handler to the timer

timer.addEventListener(TimerEvent.TIMER, timerHandler);

//starting the timer

timer.start();

function cursorMoveHandler(e:Event):void{

//sight position matches the mouse position

sight.x = mouseX;

sight.y = mouseY;

}

function timerHandler(e:TimerEvent):void{

//first we need to remove the star from the stage if already added

if(starAdded){

removeChild(star);

}

//positioning the star on a random position 

randomX = Math.random()*500;

randomY = Math.random()*300;

star.x = randomX;

star.y = randomY;

//adding the star to the stage

addChild(star);

//changing our boolean value to true

starAdded = true;

//adding a mouse click handler to the star

star.addEventListener(MouseEvent.CLICK, clickHandler);

//animating the star's appearance

tween = new Tween(star, "alpha", Strong.easeOut, 0, 1, 3, true);

}

function clickHandler(e:Event):void{

//when we click/shoot a star we increment the points

points ++;

//showing the result in the text field

points_txt.text = points.toString();

}

The above script was used for my previous work, and I found that can be used again on one of game for my final project.

Below is shooting star flash game that I found online.

Figure 1. Flash, Flex and ActionScript tutorials - flashadvanced (2009-2011). Creating a small shooting game in AS3. [Image Online] Available from: http://flashadvanced.com/creating-small-shooting-game-as3/ [Accessed 21/03/2013]

Project Outcome

Project Aims		Serves as a handy bedtime story for children and break the rule of reading fairy tale story from fully text-based storybooks to expand the imagination world with all creative ideas.
Project Outcome(s)	1	An offline content-rich story eBook based on an interactive fairy tale with 3 mini games, background music and story narrator in Android platform for smart phones and tablets especially Kindle Fire.
	2	10 pages of flash mobile application for story with a 1280px x 800px dimension which is scalable. The duration of eBook will be 5-7 minutes long.
	3	3 mini games are drag and drop matching cooking game, memory matching card game and vertical drop and collect game. The duration of one mini puzzle game will take 2 minutes.
	4	There have interactivity images in each pages of eBook with sound effect.
	5	The original story of “the Mouse , the Bird and the Sausage” from Grimms' Fairy Tales by The Brothers Grimm.

This is Project Outcome after presentation of Proposal Prospectus and what I am going to produce for my final project. Target audience has changed to five to six years old children and mini games had been reduced due to time management problem but I will try to work it out. 

54321 Poster

This is a 54321 poster which shows roughly what kind of project am I thinking about, my inspirations and things I am aware of. Do click on the picture link to view the larger image.

More idea plans coming up!