Create a Funky Menu

We will create a nice menu with an advanced mouseOver handler for the buttons.

This tutorial is actually inspired by the pretty cool one I saw
here
But there the person used a special pre-scripted class called "TweenMax". I will try to do it with my own custom class. The animation is a little different because I haven't used the Tween Class at all.

To begin create a New Folder in your .fla root directory and name it "script". Inside it create a file with the name "menuButton.as". Copy and paste the follwing code in it. This will give you the custom class

package script{

import flash.display.Sprite;
import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.DisplayObject;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.geom.ColorTransform ;
import flash.utils.Timer;


public class menuButton extends Sprite
{
/*the parent movie clip*/
private var button:MovieClip = new MovieClip();

/*name of the button*/
private var buttonName:String;

/*X coordinate of the button*/
private var X:Number;

/*X coordinate of the button*/
private var Y:Number;

/*text field to display the name*/
private var buttonText_txt:TextField=new TextField();

/*timer to monitor the random movements*/
private var timer:Timer = new Timer(100);

/*the constructor takes 3 parameters,the button
name and the x and y coordinates */
public function menuButton(str:String, xc:Number, yc:Number)
{
buttonName=str;
X=xc;
Y=yc;
}

/*create the button*/
public function getButton()
{
/*assign x and y coordinates*/
button.x = X;
button.y = Y;

/*create the background of a 8x4 array of
small squares*/
for(var i=0;i<4;i++)
{
for(var j=0;j<8;j++)
{
var rect:Sprite = new Sprite();
rect.graphics.beginFill(0x896434);
rect.graphics.drawRect(j*9,i*9,8,8);
rect.graphics.endFill();
button.addChild(rect);
}
}

/*format in which to display the name*/
var format:TextFormat = new TextFormat();
format.font = "verdana";
format.color = 0xFFFFFF;
format.size = 18;

/*create the text field and display the
button name*/
buttonText_txt.selectable = false;
buttonText_txt.x=2;
buttonText_txt.y=5;
buttonText_txt.text = buttonName;
buttonText_txt.setTextFormat(format);
buttonText_txt.autoSize = TextFieldAutoSize.LEFT;
button.addChild(buttonText_txt);

/*attach the button to the stage*/
addChild(button);

/*create mouse listeners*/
button.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
button.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
}

private function mouseOverHandler(e:MouseEvent) {
/*start the timer to start the random
movement of the background squares*/
timer.start();
timer.addEventListener(TimerEvent.TIMER,moveRandom);

/*loop through each of the small squares
set it to a random color and an alpha of 0.6*/
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);
var color:ColorTransform = obj.transform.colorTransform;
var randx = -30+Math.random()*60;
var randy = -30+Math.random()*60;
obj.x=randx;
obj.y=randy;
color.color=0x00000;
/*multiplying by 2 gives brighter colors*/
color.redMultiplier = Math.random()*2;
color.blueMultiplier = Math.random()*2;
color.greenMultiplier = Math.random()*2;
obj.transform.colorTransform = color;
obj.alpha =0.6;
}
}

private function mouseOutHandler(e:MouseEvent) {
/*stop the timer and the random movements*/
timer.stop();

/*restore previous values of x and y coordinates
and the color*/
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);
var color:ColorTransform = obj.transform.colorTransform;
color.color=0x896434;
obj.transform.colorTransform = color;
obj.x = Math.floor((i%8)/9);
obj.y = Math.floor(Math.floor(i/8)/9);
alpha = 1;
}
}

/*move the background squares randomly*/
private function moveRandom(e:TimerEvent) {
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);

/*find random values for x and y coordinates*/
var randx = -1+Math.random()*2;
var randy = -1+Math.random()*2;

/*assign the random coordinates*/
obj.x-=randx;
obj.y-=randy;
}
}


}


}

Now open your .fla file and hit Ctrl+J to bring up the Document Properties window.Change the height to 150 and the background color to 0x00000.
That done, select the first frame and hit F9. Copy and paste the following script

/*import the custom class*/
import script.menuButton;

/*this array will contain the names of all the buttons you want in your menu*/
var labels:Array=["Home","Gallery","Login","Submit"];

/*display the buttons*/
for(var i=0;i<labels.length;i++)
{
var b:menuButton = new menuButton(labels[i],100*(i+1),60);
b.getButton();
addChild(b);
}

Hit Ctrl+Enter to test your movie!

Download the .fla file

Create a XML Driven, dynamic Word Jumble Puzzle

We will make a game where the player has to unjumble a given jumbled word. The words will be stored in an external XML file so that words can be easily changed and/or added.

First we create the XML file. open your favourite text editor and copy in the following.


<?xml version="1.0"?>

<gamedata>

<word>raffle</word>

<word>elephant</word>

<word>diamond</word>

<word>centre</word>

<word>giraffe</word>

<word>papyrus</word>

<word>dominate</word>

<word>raccoon</word>

<word>lizard</word>

<word>monitor</word>

<word>country</word>

<word>forest</word>

<word>bottle</word>

<word>carton</word>

<word>transfer</word>

<word>calendar</word>

<word>cricket</word>

<word>football</word>

<word>spoken</word>

<word>terminate</word>

<word>trailer</word>

<word>acoustic</word>

<word>bubble</word>

<word>yellow</word>

<word>national</word>

<word>language</word>

<word>shampoo</word>

</gamedata>



Save it as words.xml and then open your new .fla file. Remeber the .swf and .xml files should be in the same directory.

Hit Ctrl+J and bring up the Document Properties window and set the hieght and width to 200 and the background color to #99CC99.


Now select the Text Tool and draw a Dynamic text field. Go to the Propertoes Window and make sure the "Show Border around Text" and "Selectable" are not selected.Go to the Propertes window and type in its instance name as "jumble_txt" Now draw an Input text field with the "Show Border around Text" selected.This time its instance name will be "input_txt".Your Stage should look like this.


With the Text tool selected, draw two Static text boxes as label for the above fields, like so

Now hit Ctrl+F8 to bring up the New Symbol Window, change the name to "checker" and click OK. Draw you own button. Mine looks like this




Similarly draw another button. Name it "next"

Now go to the main stage and drag the two buttons onto the stage.

The instance name of the "checker" button should be check_mc and the other should be "next_mc"

That done Create a new layer and name it Actions. Select the first frame and hit F9. Copy and paste the following code.


var xmlLoader:URLLoader= new URLLoader();

/*load the xml file*/
xmlLoader.load(new URLRequest("words.xml"));

/*on completion of loading invoke the "parseXML" function*/
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

var words:Array = new Array();

function parseXML(e:Event):void {
var i,j;
var menuLength;/*length of the word array*/

var XMLData:XML = new XML(xmlLoader.data);

menuLength = XMLData.word.length();

/*populate the globally defined array*/
for (i=0; i<len;i++)
words[i]=XMLData.word[i];

/*show the jumbled word*/
showWord();
}


var actualWord;/*the word being displayed in unjumbled form*/

var input;/*input typed in by the player*/

/*listen for mouse click*/
check_mc.addEventListener(MouseEvent.CLICK,checkAnswer);
next_mc.addEventListener(MouseEvent.CLICK,newWord);



/*show a jumbled word to solve*/
function showWord() {
/*choose a random index of the words array
and choose the word.Thus we choose a random
word everytime*/
var randChoice = int(Math.random()*words.length);
actualWord = words[randChoice];

/*display the jumbled word from the random array index*/
jumble_txt.text = jumbled(actualWord);
jumble_txt.autoSize = TextFieldAutoSize.LEFT;

/*show the button if hidden*/
check_mc.visible=true;
}



/*receive a string and return it after random jumbling*/
function jumbled(word:String):String {
var len=word.length;
var rand;
var c;
var wordArray:Array = new Array();
var jumbledWord:String = new String();

/*convert the string to an array to avail
better indexed access*/
for(var i=0;i<len;i++)
wordArray[i]=word.charAt(i)

/*randomise the array. The algorithm
sequentually picks a letter and swaps it
with a random letter coming after it */
for(i=0;i<len;i++)
{
rand = i+int (Math.random()*(len-i));
c=wordArray[i];
wordArray[i]=wordArray[rand];
wordArray[rand]=c;
}

/*reconvert array to string*/
for(i=0;i <len;i++)
jumbledWord+=wordArray[i];

/*return the jumbled string*/
return jumbledWord;
}

/*trim whitespaces from the given string*/
function trim(word:String):String {
/*remove from front*/
word = word.replace( /^\s*/g, "" );

/*remove from end*/
word = word.replace( /\s*$/g, "" );
return word
}


/*check the answer typed in by the player*/
function checkAnswer(e:Event) {
input=input_txt.text;

/*remove any whitespaces entered*/
input = trim(input);

/*remove anything typed in by the user*/
input_txt.text="";

/*hide the clicked button*/
check_mc.visible=false;

/*input is correct*/
if(input==actualWord)
jumble_txt.text = actualWord+" :-))";
else/*if input is wrong*/
jumble_txt.text = actualWord+" :-((";
}



/*show a new word*/
function newWord(e:MouseEvent) {
showWord();
}

Hit Ctrl+Enter to test your movie!