Paper, Scissors and rocks in Actionscript 3 part 1

At some point in your life you have probably played the Paper, Scissors and rocks game using hand gestures. In this tutorial you will learn how to recreate this game using Actionscript 3. I will be covering the basic logic of the game in part 1, and will be including more features in subsequent tutorials. There are three possible ways of winning this game: paper beats rock; scissor beats paper and rock beats scissors. You can also draw as well which is when you both signs are the same.   


Paper, Scissors and rocks in Actionscript 3 part 1


Step 1

Open a new AS3 file. Import images of paper, Scissors and rocks in the library by selecting File >Import > Import to library. You can alternatively use the Shape tools in Flash.


Step 2

Convert the images into movie clips (F8) and give them the following instance names: paper, scissors, and rock accordingly.


Step 3

Select the text tool with dynamic text and drag a text field on the stage. Give the text field the instance name: output_txt.



Step 4

Insert a new layer on the timeline called Actions then open up the Actions panel and enter the following code.

//This adds the mouse click event to the buttons
paper.addEventListener(MouseEvent.CLICK, chosen);
scissor.addEventListener(MouseEvent.CLICK, chosen);
rock.addEventListener(MouseEvent.CLICK, chosen);

//Array to hold the names of the paper, sissor and rock.
var choicesArray:Array = ["paper", "scissor", "rock"]; 

function chosen(e:Event):void{
    //This is holds the player choice.
    var playersChoice:String = String(e.target.name);
    
    //This gets a random value from the choicesArray and .
    var computerChoice:String = choicesArray[Math.floor(Math.random()*choicesArray.length)];     

    //player Wins
    if((playersChoice == "paper" && computerChoice == "rock") || 
       (playersChoice == "scissor" && computerChoice == "paper") ||                                                
       (playersChoice == "rock" && computerChoice == "scissor")){
        output_txt.text = "You win! \n The computer chose " + computerChoice;
    }
    //player draw
    else if(playersChoice == computerChoice){
        output_txt.text = "Its a draw \n The computer chose " + computerChoice;
    }
    //player lose
    else{
        output_txt.text = "You lose! \n The computer chose " + computerChoice;
    }
}

Step 5

Test your movie Ctrl + Enter.

Clock hands in Actionscript 3

In this tutorial you will learn how to create a moving clock hands effect in Actionscript 3. For this effect you will need an image of an analogue clock which you will need to remove the long and short hands from. You can use Photoshop or your favourite photo editor to remove the hands.


Clock hands in Actionscript 3

Step 1  

Open a new AS3 file. Import the image of the clock by selecting File > Import > Import to Library. Select the Pen tool or one of the shape tools and draw the long and short hands of the clock on the stage.


Step 2

Convert the clock hands into movie clips and give them the instances names: lh_mc, and sh_mc accordingly. Double click into enter inside the movie clips and change the registration points so that they are at the correct rotating positions.


Step 3

Add the following code into the Actions panel:

//Adds the enter frame event to the stage.
stage.addEventListener(Event.ENTER_FRAME, moveHands);

//This rotates the short hand by adding two to the rotational value, and rotates the
//long hand by adding eight to the rotational value.
function moveHands(e:Event):void{
    sh_mc.rotation += 2;
    lh_mc.rotation += 8;
}

Step 4

Test your movie Ctrl + Enter.

Gun shot text effect in Actionscript 3

In this post I have converted the gun shot text effect into Actionscript 3 code. The first three steps are exactly the same so I have not type them out in this post. Once you have completed these steps, gives each of the letters on the stage appropriate instance names. I have named my movie clips: letter1, letter2 etc.  Then open the Actions panel and enter the following code: 

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

//Array to hold the letter movie clips.
var letterArray = [];

//This adds the names of the movie clip into the array. I 
//have saved time by using a For loop and the getChildByName()
//method to add all the name of the movie clips into the array.
for(var i:uint = 1; i < numChildren+1; i++){
    letterArray.push(getChildByName("letter"+i));
}

//This sets all the movie clips with alpha at 0 and scaleX & Y at 1.5;
for(var j:uint = 0; j < letterArray.length; j++){
    letterArray[j].alpha = 0;
    letterArray[j].scaleX = 1.5;
    letterArray[j].scaleY = 1.5;
}

//Counter to hold the current position of the array.
var counter:int = 0;

//This function tweens each letter in turn by 
//setting the alpha at 1 and scaleX & Y at 1;
function startText():void{
    TweenMax.to(letterArray[counter], 1, {alpha:1,scaleX:1, scaleY:1, onComplete: nextText});                                                                
}

//This increments the counter so the next letter can be tweened.
function nextText():void{    
    if(counter == letterArray.length-1){
        return;
    }else{
        counter++;
        startText();
    }
}

startText();

Blur text effect in Actionscript 3

I create the blur text effect tutorial back in 2008 where I used the timeline and the filters panel. I will now recreate the same effect using Actionscript 3 code and the TweenMax plugin which can be download from greensocks.com


Step 1

Open a new AS3 file and select the Text tool with static text and type a message on the stage. Then convert your message into a movie clip (F8) and give the instance name: myText_mc.


Step 2

Add the following code in the Actions panel (F9).

//Imports the packages needed for the blur fiter
//and the TweenMax plugin.
import flash.filters.BlurFilter;
import com.greensock.*

//This creates a new instance of the blur filter
//with 100 for the blurX value, 5 for the blurY value 
//and 1 for the quality. And adds the filter to
//the text movie clip.
var bf:BlurFilter = new BlurFilter(100,5,1);
myText_mc.filters= [bf];


//This removes the blurX and blurY by tweening 
//both the values to 0. 
TweenMax.to(myText_mc, 1, {blurFilter:{blurX:0, blurY:0}});

You can also set a delay for the tween by using ‘delay’ property. For more information on the BlurFilters class take a look at the documentation here.