Letter guessing game in AS3

This tutorial is a modification of the Number guessing game, but this time it uses letters from the Alphabet instead of numbers. This game accepts both uppercase and lowercase characters, so if the randomly generated letter is ‘p’ and you guess with an uppercase p it will still recognise that the correct letter has been guessed. Note that you need to have completed the Number guessing game tutorial before attempting this one.


Letter guessing game in AS3

Step 1

Open up the Number guessing game tutorial. Then open up the Actions panel and make the following changes below. Note that I have not included all the code from the previous tutorial.

//Declares variables.
var lettersArray:Array = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

function init():void {
//Display a begining message in the message_txt dynamic text field.
beginMessage="Choose any letter in the Alphabet.";
message_txt.text=beginMessage;

//Restrict the characters in the message_txt text field, so only the 
//upper and lower case letter can be accepted.
input_txt.restrict="A-Z a-z";


//This stores a random letter from the letterArray to the variable randomLettter.
randomLetter = lettersArray[Math.floor(Math.random() * lettersArray.length)];
}

function yourGuess(event:MouseEvent):void {
//This stores data from the input text field to the variable my_guess.
my_guess=input_txt.text;

//If the correct guessed letter is either upper or lower case then go win message. 
if(my_guess == randomLetter.toUpperCase() || my_guess == randomLetter.toLowerCase()){
message_txt.text = "Well done, the letter is " + my_guess + ".";  
winGame();
}else{
message_txt.text = "Your guess, " +  my_guess + " is incorrect.";
guessMessage();
}
}


function guessMessage():void{
//Only decrement the numOfGuesses if the textfield contains characters. 
if(numOfGuesses != 0 && input_txt.length == 1){
numOfGuesses--;
guess_txt.text = numOfGuesses + numOfGuessesMessage;
trace(numOfGuesses);
}

if(numOfGuesses == 0){
message_txt.text = "The number was " + randomLetter + ".";  
guess_txt.text = "Unlucky, you never found the number.";
winGame();
} 
}

Step 2

Test your movie Ctrl + Enter.



You can download the source files here.

Load external swf using SWF loader

I wrote a tutorial about how to load external swf’s using the native Loader class about a year ago. Within this time a new AS3 loading system by greensock.com, the person who created TweenLite, has been released. Its called LoaderMax and it simplifies and enhances the process of loading external assets. Apparently, it’s more stable and reliable for loading external asset than the Adobe loading classes. In this post I will show you how to load an external swf’s using the SWF Loader class from LoaderMax.

To simply load an external swf, you can use the following code below:

//Import the packages needed.
import com.greensock.*;
import com.greensock.loading.*;

//Create an instance of the SWFLoader class. The container property is where
//the loaded swf will be added. The ‘this’ value means it will get added to the stage.
//If you want to add the external swf to a movie clip you can change this value.
var loader:SWFLoader = new SWFLoader("example.swf", {container:this});

//Load Swf
loader.load();

However, SWF Loader has 27 additional properties that you can use. Below is an example some of them. There are also more powerful properties such as: scaleMode, hAlign, vAlign, crop and centre registration point. Checkout the SWF Loader documentation for all the properties.

import com.greensock.*;
import com.greensock.loading.*;

var loader:SWFLoader = new SWFLoader("example.swf", {container:this, x:100, y:100, alpha:0.5, scaleX:0.5, scaleX:0.5, rotation:50});

loader.load();

The event handlers in SWF loader are added in the same way. The example below fades in the external swf after it has been loaded.

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;

var loader:SWFLoader = new SWFLoader("example.swf", {container:this, alpha:0, onComplete:completeHandler});

//Load Swf
loader.load();

function completeHandler(e:LoaderEvent):void{
    TweenLite.to(e.target.content, 1, {alpha:1});
}

You can access the root of the external swf using the ‘rawContent’ property. This gives you access to the functions and the main timeline of the external swf. The example below calls a function called testing() from the external swf.

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;

var loader:SWFLoader = new SWFLoader("example.swf", {container:this, alpha:0, onComplete:completeHandler});

//adds the loader content to the display list
//before raw content is loaded.
addChild(loader.content);  

//Load Swf
loader.load();

function completeHandler(e:LoaderEvent):void{
    TweenLite.to(e.target.content, 1, {alpha:1});

     var mcTemp:MovieClip = loader.rawContent; 

     mcTemp.testing();
}

If you want to access an external swf function using the native AS3 loading classes, take a look at this tutorial.

Drawing lines in Actionscript 3 – part 4

This is part 4 of the drawing application where you will create a canvas for your line drawings. The canvas is a separate area to hold the drawings instead of directly on the stage. There are two ways of adding the canvas, you can use Actionscript 3 code or you can convert a primitive shape into a movie clip. I will start off with the latter.


Drawing application part 4

Step 1

On the timeline insert a new layer into the highest position. Select the Rectangle tool and drag a rectangle shape onto the stage. You can use any colour you wish then convert the shape into a movie clip (F8).And give your shape the instance name: canvas


Step2

Open up the Actions panel (F9) and make the following changes. Note that I have not included all the code from the previous tutorial.

canvas.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);

function MouseDown(event:MouseEvent):void {
    canvas.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseUp(event:MouseEvent):void {
    canvas.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

Step 3

Test your movie Ctrl + Enter.



The alternative way of adding a canvas to the drawing application is to create a rectangle shape using the drawing API. The code will look like below.

var canvas:Sprite = new Sprite();
canvas.graphics.beginFill(0x333333);
canvas.graphics.drawRect(4,3,390.95,246)
canvas.graphics.endFill();
addChild(canvas);

Paper, Scissors and rocks in Actionscript 3 part 2

You should now have the basic structure of the Paper, Scissors and Rocks game from part 1. I will be adding three counters to the game in part 2. These will count the number of wins, draws and losses.


Paper, Scissors and rocks in Actionscript 3 part 2

Step 1

Open up part 1 of the tutorial. Then select the text tool and with dynamic text and drag three text fields on the stage.  Beside the text fields add the following text: Wins, draws and losses. Give your dynamic text the instance names: wins_txt, draws_txt and losses_txt.

Step 2 

Update the following code in the Actions panel.I have not included all the code from the previous tutorial.

var winCount:uint = 0;
var loseCount:uint = 0;
var drawCount:uint = 0;

//player Wins
if((playersChoice == "paper" && computer == "rock") || 
    (playersChoice == "scissors" && computer == "paper") ||            
    (playersChoice == "rock" && computer == "scissors")){
    output_txt.text = "You win! \n The computer chose " + computer;
    winCount++;
    win_txt.text = String(winCount);
}

//player draw
else if(playersChoice == computer){
    output_txt.text = "Its a draw \n The computer chose " + computer;
    drawCount++;
    draw_txt.text = String(drawCount);
}
//player lose
else{
    output_txt.text = "You lose! \n The computer chose " + computer;
    loseCount++;
    lose_txt.text = String(loseCount);
}


 

Step 3

Test your movie Ctrl + Enter.



You can download the source files here.