Word Scramble Game in AS3

Making a Customizable Word Scramble Game in AS3

READ MORE:

http://www.flashbynight.com/tutes/scramble/
http://www.tripwiremagazine.com/2011/06/flash-game-tutorial.html

Source files: scramble.zip

Art and Graphics: art.fla

What you will learn:

• how to build a word scramble quiz using Flash AS3
• using randomization techniques
• using drag and drop techniques
• storing data in a simple array

Prerequisites:

• working copy of Flash version 8 or above
• working knowledge of how to use the Flash interface
• basic knowledge of AS3 – beginners will find it tough but useful

We want to make a word scramble quiz in Flash AS3 where we drag and drop the options into place. What’s more, we may want to reuse our code for further quizzes. How can we do all this? The answers are right here in this tutorial. Read on.

GAME ANSWER WORD =CANDID  
THIS GAME FUNCTION EVERY TIME  UPDATE WORD AND SHUFFLE WORDS

Step 1

People have a funny habit of making tiny little Flash movies. But we want our quiz to be big and exciting. Open up Flash and modify the stage size to 600 x 800. This way, we get a nice big stage, but it will still display on laptop screens. The frame rate needs to be set to 30 frames per second or else we will get a jerky motion when dragging the tiles.

Fine. Save the file under the name ‘scramble.fla’ and let’s move on.

Step 2

We’re going to store our code in a separate document, so we need to create a document class that we call Game.as. Click FILE>>NEW and create the document as follows:

Save Game.as in a folder called classes. Now, we need to make sure that Flash looks in this folder for our code. From scramble.fla, here is how we do this:

1 Click CTRL+SHIFT+F12

2 Click on the tab that says FLASH

3 Click SETTINGS next to where it says Actionscript 3.0

4 Click the plus sign

5 Enter ./classes

6 Next to Document class, type Game

You should now see this:

Step 3

Our documents and folders are in place. Now let’s do some artwork. We’ll need to design a tile that we can use to place the letters on. Here’s the one I designed, you can grab this image and all the following ones from: http://www.flashbynight.com/tutes/scramble/art.fla.

You can use your own image, but make sure it’s 45 x 45 px.
We’ll need to display a letter on the tile, so first convert it to a movie clip (right click then Convert to Symbol). Then double click on it and add a dynamic text box with the instance name letter. Test out the placement by adding the letter x. I used Century Gothic 36-point bold white font to get the following:

Don’t place the image on the stage, but make sure it is in the library as a movie clip. We need to give it a name so that we can place its children on the stage. Give it the class name ‘Tile’ with a capital T, by right-clicking on the symbol in the library and selecting Linkage, then completing the information as follows:

We need a target area to drop the tile onto. I’m using this:

It’s a 40 x 40 image and I’ve assigned it the class name Placeholder (capital P).

The next art that we need is some way to give feedback. We could have crosses or ticks, but I’ll opt for two boxes as follows:

Make sure they are converted to movie clips and have the class names feedback1 and feedback2

respectively.
We’ll use a similar image to inform the player that the activity is finished. Give this (or a similar image) the class name feedback3:

Finally, we’ll need a button to click for the user to check the answer. I’m using the following (shown in ‘up’ and ‘over’ states:

-----------------------------------------------------------------------------------------

OR USE THIS SIMPLE METHOD 

1- IMPORT ALL IMAGE TO LIBRARY SECTION

SET CLASSES FOR BUTTON AND MOVIE CLIPS

SUCH AS:

 CLASS NAME BUTTON& MOVIE CLIPS:

Name: butang_play  =  Class:  button_chk

Name: correct_box  =   Class:  feedback1

Name: wrong_box    =  Class:  feedback2

Name: finish_box    =   Class:  feedback3

Name: placeholder   =   Class:  Placeholder

Name: tile                =   Class:  Tile

NO CLASS NAME MOVIE CLIPS:

Name: placeholder_inside    =  Class:

Name: Symbol 13                 =  Class:  

2- CLICK PROPERTIES SECTION STET CLASS NAME  Game

-------------------------------------------------------------------------------------------

CLASS NAME BUTTON& MOVIE CLIPS:

Name: butang_play  =  Class:  button_chk

Name: correct_box  =   Class:  feedback1

Name: wrong_box    =  Class:  feedback2

Name: finish_box    =   Class:  feedback3

Name: placeholder   =   Class:  Placeholder

Name: tile                =   Class:  Tile

---------------------------------------------------------------------------------------------------------------

CLASS NAME BUTTON& MOVIE CLIPS PNG IMAGE SEQUENCE:

NOTE:TWO STATES ROLLOVER BUTTON=butang_play

-------------------------------------------------------------------------------------------------------------------

NO CLASS NAME MOVIE CLIPS:

---------------------------------------------------------------------------------------------------

NO CLASS NAME MOVIE CLIPS  PNG IMAGE SEQUENCE:

-----------------------------------------------------------------------------------------------------

 METHOD 1: CREATE  FOLDER AND SAVE YOUR Scramble.fla and Game.as

SAVE IN SAME FOLDER

OR

METHOD 2: CREATE  FOLDER AND  THEN CREATE INSIDE IN THIS FOLDER

SET FOLDER NAME Classes AND THEN PUT YOUR  Game.as IN Classes FLODER

BUT Scramble.fla FILE  PUT OUTSIDE NOT INSIDE IN THIS FOLDER

COPY AND PASTE BELOW CODE AND SAVE IN Game.as

------------------------------------------------------------------------------------------------------

package {

import flash.display.MovieClip;

import flash.text.TextField;

import flash.events.MouseEvent;

public class Game extends MovieClip {

var words:Array = new Array;

var rand1:int;var rand2:int;

var i:int;

var ii:int;

var ques_num:int;

var current_word:String;

var user_ans:String;

var tileArray:Array = new Array;

var targetArray:Array = new Array;

var scramble_Array:Array = new Array;

var unscramble_Array:Array = new Array;

var temp:String;

var flag:Boolean;

var checker:button_chk;

var f1:feedback1;

var f2:feedback2;

var f3:feedback3;

var pauser:Boolean;

public function Game() {

getword();

checker=new button_chk;addChild(checker);

checker.x=150;checker.y=400;

checker.addEventListener(MouseEvent.CLICK, check_answer);

}

public function getword() {

words=["candid","camera"];

current_word=words[ques_num];

setTiles(current_word.length);

ques_num++;

}

public function setTiles(a) {tileArray=[ ];

for(i=0;i<a;i++){

var tempclip:Tile =new Tile;addChild(tempclip);

tempclip.x=100+(i*60);tempclip.y=200;tempclip.tag=i;

tempclip.original_posx=tempclip.x;

tempclip.original_posy=tempclip.y;

tileArray[i]=tempclip;

var tempclip2:Placeholder =new Placeholder;addChild(tempclip2);

tempclip2.x=100+(i*60);tempclip2.y=280;

targetArray[i]=tempclip2;

}

scramble_word(a);

}

public function scramble_word(a) {

for(i=0;i<a;i++){scramble_Array[i]=current_word.slice(i,i+1)}

for(i=0;i<15;i++){

rand1=Math.ceil(Math.random()*(a))-1;

rand2=Math.ceil(Math.random()*(a))-1;

temp=scramble_Array[rand1];scramble_Array[rand1]=scramble_Array[rand2];scramble_Array[rand2]=temp;}

for(i=0;i<a;i++){tileArray[i].letter.text=scramble_Array[i];}

addListeners(a);

}

public function addListeners(a){

for(i=0;i<a;i++){

tileArray[i].mouseChildren = false;

tileArray[i].addEventListener(MouseEvent.MOUSE_DOWN, pickup);

tileArray[i].addEventListener(MouseEvent.MOUSE_UP, drop);

}}

public function pickup(event:MouseEvent){

if(!pauser){

event.target.startDrag(true);

this.setChildIndex(MovieClip(event.target),this.numChildren-1);

}}

public function drop(event:MouseEvent) {

event.target.stopDrag();

flag=false;trace(event.target);

for(i=0;i<targetArray.length;i++){

if(targetArray[i].hitTestObject(event.target)){event.target.x=targetArray[i].x;event.target.y=targetArray[i].y;flag=true;}

}

for(i=0;i<tileArray.length;i++){

if((tileArray[i].hitTestObject(event.target))&&(tileArray[i]!=event.target)){flag=false;}

}

if(!flag){event.target.x=event.target.original_posx;event.target.y=event.target.original_posy;}

}

public function check_answer(e:MouseEvent) {

if(!pauser){

user_ans="";

for(i=0;i<targetArray.length;i++){for(ii=0;ii<tileArray.length;ii++){

if((tileArray[ii].x==targetArray[i].x)&&(tileArray[ii].y==targetArray[i].y)){user_ans+=tileArray[ii].letter.text;}

}}

if(user_ans==current_word){f1=new feedback1;addChild(f1);f1.x=100;f1.y=100;pauser=true;

f1.addEventListener(MouseEvent.CLICK, clear_board);

}

else{f2=new feedback2;addChild(f2);f2.x=100;f2.y=100;pauser=true;

f2.addEventListener(MouseEvent.CLICK, continue_on);

}}}

public function continue_on(e:MouseEvent) {

f2.removeEventListener(MouseEvent.CLICK, continue_on);

removeChild(f2);

pauser=false;

}

public function clear_board(e:MouseEvent) {

f1.removeEventListener(MouseEvent.CLICK, continue_on);

removeChild(f1);

pauser=false;

for(i=0;i<tileArray.length;i++){removeChild(tileArray[i]);removeChild(targetArray[i]);}

if(ques_num==words.length){removeChild(checker);f3=new feedback3;addChild(f3);f3.x=100;f3.y=100;}else{getword();}

}}}

SHARE THIS Share on Facebook Plus on Google+