Don’t press button

I was contacted with a question about how to create “the delay button” part in the idiot test game (try Googling the game). In the idiot test game you answer a series of questions to determine if you’re an idiot. Here is my solution. 


Step 1

Open a new AS3 file and add the following layers on the timeline in this order: Actions, Win, Lose, and Button. The layers should look like the image below.


Step 2

On the Button layer, add an arcade button onto the stage by going to Window > Common library > Buttons. Locate the folder classic buttons and drag a red button onto the stage. Give the button the instance name: redbutton. Then select the Text tool with static text and type the message: ‘Do not press the button’. I have used Verdana font with 30pt size for my message. Select both the button and text and convert it to a movie clip with the instance name: holder.


Step 3

Lock and hide the Button layer on the timeline and select the Win layer. Select the Text tool with static text and add the following message: ‘Well done, you win nothing.’ Convert the text into a movie clip and give the instance name: win


Step 4 

Repeat the same step as above, but change the message to: ‘You lose’ and give the instance name: lose.


Step 5

Select the Actions layer then open the actions panel and add the following code:

//Time delay of two minutes
var delay:int = 120 * 1000;

//Hides the win and lose messages
win.visible = lose.visible = false;

//This creates a new instance of the timer class and starts the timer
var timer:Timer = new Timer(delay);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();

//This function displays the win message if you have waited the delay time
function timerHandler(e:TimerEvent):void{
    win.visible = true;
    lose.visible = false;
    holder.visible = false;
}

//Adds the mouse click event to the red button
holder.redbutton.addEventListener(MouseEvent.CLICK, clickHandler);

//This function displays the lose message and stop the timer.
function clickHandler(e:MouseEvent):void{
    timer.stop();
    win.visible = false;
    lose.visible = true;
    holder.visible = false;
}

Step 6

Test your movie Ctrl + Enter.

Spinning globe in Actionscript 3

In this tutorial you will learn how to create a 2D spinning globe effect in Actionscript 3. I have used a similar technique in the Endless scrolling background tutorial. Essentially you will use an enter frame event to move the map, and use a conditional statement to determine if the map has gone pass the globe edges. If the map goes over the globe edge then it will get placed on the other side of the other map. You will need an image of map for this tutorial.


Spinning globe in Actionscript 3

Step 1

Open a new AS3 file and select the Oval tool and draw an oval shape on the stage. You can use the Radial gradient from the Colour panel to give your oval a realistic globe colour. Then convert your shape into a movie clip (F8). Give the movie clip the name ‘Globe’ and select the top left registration point and click ok. Now give the globe the instance name ‘Globe’.


Step 2

Double click the globe to enter its timeline. Rename ‘Layer1’ to ‘Globe’ and insert a new layer called ‘Map’. Import an image of a map onto the stage File > Import > Import to Stage. Convert the map into a movie clip (F8) with the top left registration point selected and give it the instance name: m1. Now hold down the Alt key on the keyboard and create a copy of the map and place it next the map and give it the instance name: m2.


Step 3

Insert a new layer on the timeline called ‘Mask’ then select the oval shape on the globe layer and copy it (Ctrl + C). Select the Mask layer and paste in place (Ctrl + Shift + V). Right click on the Mask layer and select ‘Mask’. Your map should now be masked.


Step 4

Return back to the main timeline and insert a new layer on the timeline called ‘Actions’. Then open up the Actions panel and add the following code:

var speed:uint = 4;

addEventListener(Event.ENTER_FRAME, enterHandler);

function enterHandler (e:Event):void {
 globe.m1.x -= speed;
 globe.m2.x -= speed;

 if( globe.m1.x + globe.m1.width < 0){
  globe.m1.x = globe.m2.x + globe.m2.width;
 }
 
 if( globe.m2.x + globe.m2.width  < 0){
  globe.m2.x = globe.m1.x + globe.m1.width;
 }

}

The code above moves both of the maps -4 pixels every frame. If map 1 goes pass the globe's left edge then it gets placed after map2, and if map2 goes pass the globe's left edge then it get placed after map1.

Step 5

Export movie Ctrl + Enter.

Autosize text field width in AS3

I was contacted with a question about how to auto size a text field in Actionscript 3. When you trace out the text width and height you see that the default text field dimensions are 100 x 100 pixels.

var tf:TextField = new TextField();
tf.border = true;
tf.text= 'testing ';
addChild(tf);

trace(tf.width, tf.height); //100 100

In the AS3 TextField class there are two properties called textWidth and textHeight that return the width and height of the text in pixels (not the text field dimensions). You can use these properties to set the width and height of the text field.

var tf:TextField = new TextField();
tf.border = true;
tf.text= 'testing';
tf.height = tf.textHeight;
tf.width = tf.textWidth;
addChild(tf);

For some strange reason the text width and height gets cut short by 4 pixels, but you can easily add the 4 pixels back on.

var tf:TextField = new TextField();
tf.border = true;
tf.text= 'testing';
tf.height = tf.textHeight + 4;
tf.width = tf.textWidth + 4;
addChild(tf);

Another way to set the width and height is to use the autoSize property. This will automatically size and align the text field area.

var tf:TextField = new TextField();
tf.border = true;
tf.text= 'testing123';
tf.autoSize = TextFieldAutoSize.LEFT;
addChild(tf);

Colouring book effect in Actionscript 3

In this tutorial you will learn how to create a colouring book effect in Actionscript 3. There will be a black and white image where you can add colours to each of the white sections. For this tutorial you will need a black and white image.


Colouring book in Actionscript 3


Step 1

Open a new AS3 file then draw an oval shape on the stage using the Oval tool. My circle is 36x36 pixels with a 0x000000 fill. Convert the shape into a movie clip (F8) and give the name: ‘Colours’ and the select the Export for Actionscript and give the class name: ‘Colours’. Now delete the movie clip from the stage. The movie clip will be added dynamically so will not be needed on the stage.


Step 2

Import an image on the stage by pressing File > Import > Import to Stage. Right click on your image and select Break Apart. This will convert the bitmap image to a vector one. Select all the black outlines by holding the down the shift key and convert it into a movie clip (F8). Then cut the movie clip Ctrl + x and paste the movie clip onto a new layer on the timeline.

Convert all the other white parts of the drawing into movie clips (F8). Then select all the white movie clips and convert it into a movie clip (F8) and give it the instance name: holder. This creates a container to hold all the white movie clips


Step 3

On the timeline insert a new layer call Actions. Then open up the Actions panel and add the following code:

//Array to hold the colours
var colorArray:Array=new Array(0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF);

//A new instance of the colour transform class.
var colorTrans:ColorTransform=new ColorTransform;

var currentColor:int=0;

//This adds the ovals on the stage with the corresponding colour from the array
//and with the mouse click event.
for (var i:int = 0; i < colorArray.length; i++) {
     var c = new Colours();
     c.y=0+i*50;
     c.buttonMode=true;
     addChild(c);

     colorTrans.color=colorArray[i];
     c.transform.colorTransform=colorTrans;
     c.addEventListener(MouseEvent.CLICK, ovalsClick);
     c.arrayIndex=i;
}

//This sets the currentColour value from the dynamic property array index. 
function ovalsClick(e:MouseEvent):void {
     currentColor=e.currentTarget.arrayIndex;
}

//Adds the mouse click event to the holder.
holder.addEventListener(MouseEvent.CLICK, holderHandler);

//This function changes the colour of the movie clip inside 
//holder when it is clicked.
function holderHandler (e:MouseEvent):void {
   for (var i:int = 0; i < holder.numChildren; i++) {
       if (holder.getChildAt(i).hitTestPoint(mouseX,mouseY,true)) {
           colorTrans.color=colorArray[currentColor];
           holder.getChildAt(i).transform.colorTransform=colorTrans;
       }
   }
}

Step 4

Test your movie Ctrl + Enter. Try clicking on the colour ovals then on the white parts on the drawing. You can also add a custom cursor to the colour book if you wish.