Tuesday, 10 November 2009

Magic 8 ball tutorial in AS3

In this tutorial you will learn how create a magic 8 ball game in Actionscript 3.0. A magic 8 ball is a classic toy used for telling the future by answering your questions. You would normally ask a question to the 8 ball, shake it and turn it over to reveal the predicted answer. The standard magic 8 ball has twenty predicted answers: ten positives, five negatives and five maybes. I will be reducing the number of answers to ten in this tutorial.

I will be creating this tutorial in two parts. The first part will deal with creating the initially magic 8 ball game, and the second part will deal with adding the special effects such as the movements and sounds.

You will need the tweenLite plug-in for this tutorial which can be downloaded from: blog.greensock.com/tweenlite/.

Magic 8 ball tutorial in AS3 – part 1

Step 1

Open a new Flash AS3 file and then replicate the timeline shown below. I have created three layers on the timeline. The first layer is called ‘actions’ and is used for holding the Actionscript code. The second layer is called ‘labels’ and has two keys frames with different names. To add these names you select the appropriate key frames and change the name in the properties panel. The final layer is called ‘Magic 8 ball’ and is used display the magic 8 ball.

Step 2

On the timeline, select the ‘Magic 8 ball’ layer then the first frame.
Create the following magic 8 ball as shown below using the Oval tool. The magic 8 ball is simply two oval shapes inside each other with a letter in the centre.

Step 3

Convert your magic 8 ball into a movie clip (F8). Then give the movie clip the instance name: “magic8Front_mc”.

Step 4

Select the text tool with input text and drag an input text field below the magic 8 ball. Make sure you select the ‘check border around text’ button, and change the behaviour to “Single line”. Then select the input text box and give the instance name: “question_txt”. You may also wish to embed the uppercase, lowercase and punctuation characters into the input text field

Step 5

On the timeline, select the ‘Magic 8 ball’ layer then the tenth frame.
Create the reverse of the magic 8 ball as shown below using the Oval tools. I have added a linear gradient to the outer oval shape, and have used a solid black colour for liner oval shape with a #CCCCCC stroke.

Step 6

Convert the reverse of the magic 8 ball into a movie clip (F8), and then give the instance name: “magic8Back_mc”

Step 7

Double click on the reverse magic 8 ball to enter its timeline. Then insert a new layer and create the following triangle shape inside the inner oval. I have given the triangle a radial gradient and a #2739A9 coloured stroke.

Step 8

Convert the triangle shape into a movie clip (F8), and select the centre registration point and then give the following instance name: “output_mc”.

Step 9

Double click on the triangle to enter its timeline. Then insert a new layer and select the text tool with dynamic text, and drag a dynamic text field on top of the triangle shape like below. I have given the dynamic text field a white colour and ‘align centre’ for the format.

Select the dynamic text field and give the following instance name: “answer_txt”. Then select the embed characters button and embed the uppercase font glyphs.

Step 10

Return to the main timeline. On the Actions layer select the first frame and then open up the Actionscript panel and enter the following code.

//Imports the tweenlite packages.
import gs.*;
import gs.easing.*;

//Stops the timeline playhead.

//Adds the click event listener to magic 8 ball.
magic8Front_mc.addEventListener(MouseEvent.CLICK, showNext);

function showNext(event:MouseEvent):void {
//A prompt is displayed if no question is entered.
if (question_txt.text==""|| question_txt.text=="Enter Question") {
question_txt.text="Enter Question";
} else {

function showAnswers() {
//Create a new array with all the responses.
var responseArr:Array = new Array();
responseArr[1]="MOST LIKELY";
responseArr[2]="IT IS CERTAIN";
responseArr[3]="OUTLOOK GOOD";
responseArr[6]="REPY IS NO";
responseArr[7]="ASK AGAIN";
responseArr[8]="TRY AGAIN";
responseArr[9]="BETTER NOT";

//Chooses a random number in the array.
var r:int=Math.floor(Math.random()*responseArr.length);

//Display the random response in the text field.

//Set the answer triangle initially invisible.
magic8Back_mc.output_mc.alpha = 0;

//Displays a slight random position of the triangle shape.

//This creates the appearing effect with tweenlite.
TweenLite.to(magic8Back_mc.output_mc, 3, {autoAlpha:1});


There has been a new version of TweenLite released since the writing of this tutorial. The updated import statement should look like below.
import com.greensock.TweenLite;
import com.greensock.easing.*;

Step 11

Test the magic 8 ball Ctrl + Enter. Now type your question in the input field and click on the magic 8 ball, a response will appear.

You should have a magic 8 ball in Actionscript 3.0. The source files can be downloaded here. Remember to subscribe to stay tuned to part 2 where I will be adding movement and sound effects to the magic 8 ball.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP