Tutorial on building a

Word Scramble quiz in Flash

Actionscript 3

flashbynight.com

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

* You can download the completed source files from here: http://www.flashbynight.com/tutes/scramble

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.

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.

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:

Give it a class name of button_chk and make sure it’s in the library but not on the stage, as before.

Step 4

Open up Game.as and let’s get to work on the code. We’ll set up the document class as follows:

package {

import flash.display.MovieClip;

import flash.text.TextField;

import flash.events.MouseEvent;

public class Game extends MovieClip {

public function Game() {trace("test");

}

}

}

Save it and compile the swf (CTRL + ENTER). The trace statement is just to test it is working. You can

delete it now.

Step 5

It’s time to declare some variables. We will use a lot of them and some of them are arrays. Here goes:

var words:Array = new Array; //a mini database to hold the words

var rand1:int;var rand2:int; //variables used for randomization

var i:int; //variable used for loop iterations

var ii:int;

var ques_num:int; //used to track the question number

var current_word:String; //used to hold the current word being tested

var user_ans:String; //used to hold the user's answer

var tileArray:Array = new Array; //array of tile objects

var targetArray:Array = new Array; //array of target areas

var scramble_Array:Array = new Array; //array used to scramble the word

var unscramble_Array:Array = new Array; //array to hold the unscrambled word

var temp:String; //temporary variable

var flag:Boolean; //flag variable

var checker:button_chk; //CHECK button

var f1:feedback1; //feedback boxes 1 - 3

var f2:feedback2;

var f3:feedback3;

var pauser:Boolean; //used to pause the game

Step 6

Let’s plan the workflow. We need the following functions:

1 get the word to be scrambled

2 set the tiles

3 scramble the word

4 add ‘listeners’

5 pick up tiles when clicked

6 drop tiles into place

7 check whether answer is correct

8 unpause the game if the player needs to try again

9 clear the board and go back to step 1 or end the game

So we can put the functions into place before adding the actual script. This will help us to plan the code

better:

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();

}

public function getword() {

}//getword

public function setTiles() {

}//setTiles

public function scramble_word() {

}//scramble_word

public function addListeners() {

}//addListeners

public function pickup() {

}//pick up

public function drop() {

}//drop

public function check_answer() {

}//check_answer

public function continue_on() {

}//continue_on

public function clear_board() {

}//clear_board

}

}

Step 7

Let’s keep it simple for the getword() function. We will test out our game with two words: ‘candid’ and

‘camera’, which we can store in an array as follows:

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

We’ll use the variable ques_num to track which word to use. Since we defined ques_num as an integer,

but haven’t set a value, it will have the default value of 0. We can then use it to select a word from the

array. This code will do the trick:

public function getword() {

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

current_word=words[ques_num];

setTiles(current_word.length);

ques_num++;

}//getword

Step 8

You could see from Step 7 that we passed a variable to the setTiles function, this variable representing

the length of the word. Let’s flesh out the setTiles function as follows:

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;

}//for i

scramble_word(a);

}//setTiles

Basically, here we set a loop equal to the number of letters. Each time we run through the loop, we add

a tile and assign it the temporary name ‘tempclip’. We set the position on the screen: 60px is the

spacing, with the first tile at x position 100 and all tiles at y position 200. You can adjust these values to

suit your own purposes. We sneak in a variable called ‘tag’ so that we can identify the clips easily later

on. We also note down the original x and y position of each clip, so that later we can snap it back into

place.

Finally, we add each tile to an array. Now, whenever we wish to refer to a tile, we can reference it using

the array. For example, if we wish to make the third tile invisible, we say tileArray[2].visible=false;

(Remember that arrays are zero-referenced).

Let’s add a couple more lines to also set the targets into place. These three lines should come before the

line }//for i :

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

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

targetArray[i]=tempclip2;

Following the loop, we call the scramble_word function and pass it the value a, which corresponds to

the length of the word.

Step 9

This is what I have so far:

We need to add letters to the tiles and also scramble them. We will use the scramble_word function for

this, as follows:

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];sc

ramble_Array[rand2]=temp;}

trace(scramble_Array);

}//scramble_word

Can you see what we’re doing here? First we slice the word into letters, using the ‘slice’ command. Now

we have an array that contains the separate letters. Next we run a loop fifteen times. In this loop, we

switch any two letters at random. By the end of the loop, the word is well-scrambled. After testing it,

delete the trace command and replace it with this line:

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

This line assigns the scrambled letters to the dynamic text fields on each tile. When I compile the movie,

I get this:

Of course, you get a different order of letters each time you try.

Finally, add this line:

addListeners(a);

We will use this to call a function to add listeners.

Step 10

We need to sort out the drag and drop functionality. First, let’s write a function to ‘listen’ to when a tile

is clicked on and released:

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);

}//fori

}

Again, we loop through the tiles and we use tileArray to add behaviors.

tileArray[i].mouseChildren = false;

This line ensures we click on the tiles and not the text inside the tiles.

The following two lines arrange to call a function ‘pickup’ when a tile is clicked on and ‘drop’ when it is

released.

Let’s flesh out these functions:

public function pickup(event:MouseEvent){

if(!pauser){

event.target.startDrag(true);

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

}//pauser

}//pick up

public function drop(event:MouseEvent) {

event.target.stopDrag();

}//drop

The pickup function is simple: we set it to start dragging the tile. The other line swaps the depth of the

tile (so it does not go behind the other tiles) by manipulating setChildIndex. We will only run the

function if pauser is not true – we can use this to pause the game.

So far, with the drop function, we simply stop dragging the tile. If you test the game now, the drag and

drop function works, but we can leave the tiles scattered about the board. We want the tile to snap into

one of the designated places, failing which, it should snap back to where it was dragged from. Let’s do

that now.

Step 11

Here is the full version of the drop function:

public function drop(event:MouseEvent) {

event.target.stopDrag();

flag=false;

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

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

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

}//for i

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

}//drop

The code here is pretty complex, but not too complex for us to understand, right? First we set our flag

variable to false. By the end of the function, it will be true if the tile has been dropped onto a target and

false if dropped into empty space. It will also be false if a tile is dropped onto another tile. If it is false,

we will snap the tile back into place.

The first for loop tests to see if the tile is touching a target zone using hitTestObject, which is the

standard hit test in AS3, used in game design. We refer to the tile being dropped as event.target (the

target of the MouseEvent).

The next for loop uses the same technique to check if the tile is touching another tile. If so, the flag

variable is set back to false.

The final line (if(!flag)), sets the tile back to its original position if the flag variable is false.

Test it out. Great, it works! The drag and drop functionality is done. Now we need to add a way to check

the answer.

Step 12

Let’s go all the way back to the constructor function and modify it to add our check button to the stage:

public function Game() {

getword();

checker=new button_chk;addChild(checker);

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

}

There we go, now we need to add functionality, meaning we need to add a listener for when the button

is clicked, and we can use that listener to call our check_answer() function, which we will write in a

moment. This line comes after the fourth line above:

checker.addEventListener(MouseEvent.CLICK, check_answer);

Now for the check_answer function:

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;}

}}//end of nested loop

if(user_ans==current_word){trace("correct");}else{trace("wrong");}

}//end of if statement

}//check_answer

The code in the function is wrapped in if(!pauser){} – so that the check functionality will not run when

the game is paused.

So we start by making sure the user answer (user_ans) is “”. We then have a nested loop (a loop within a

loop), which in turn checks every tile against every target area. Simply put, if the x and y coordinates

match, the tile matches the target area and we record the letter by adding it to the user_ans string.

At the end of the loop, if the user_ans matches the current word, we know it is correct, or else it is false.

For now we have just put traces there to test it. Now let’s set it to give feedback to the user:

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;}

}}//end of nested loop

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);

}

}//end of if statement

}//check_answer

So now instead of trace(“correct”), we display the pop up that says, ‘correct’, which we called

feedback1. We add a listener, so that when we click on the pop up, we can clear the board and move

onto the next word.

On the other hand, if the answer is wrong, we display feedback2. When this pop up is clicked, we will

call the function ‘continue_on’ to unpause the game so the player can try again.

For both of these possible situations, we set pauser=true, so that the tiles cannot be dragged.

Step 13

The final two functions will either unpause the game or clear the current tiles and go onto the next

word. Here is how we do it:

public function continue_on(e:MouseEvent) {

f2.removeEventListener(MouseEvent.CLICK, continue_on);

removeChild(f2);

pauser=false;

}//continue_on

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();}

}//clear_board

The continue_on function removes the feedback pop up and listener and unpauses.

The clear_board function removes the pop up and listener and unpauses the game. It then removes the

tiles and target areas, before checking if there are any words left. If so, the game restarts, using

getword();. If not, feedback is displayed to say the game is over.

Step 14

That’s it! It’s up and running and the swf file is less than 8k. I hope it works for you, and that you learned

something. Feel free to use the code as you wish, although I would really appreciate a mention to my

site flashbynight.com if you do use the code.

Have a look at flashbynight.com for some interesting little flash games, all made by yours truly.