homeinteractiveportfolioembersyccontact
carport19.comcarport19.com
carport19.com
Embersyc

Old Articles:

There aren't any yet.

Embersyc man of technology

Build a Pirate Name Generator

Introduction to Actionscript 3.0

Okay I'm sure you've seen this type of thing before online, its a really simple program to write and you can learn some of the basics of Actionscript 3.0 and Flash in just a few minutes by building this simple application that will bring traffic to your site. When you're done with this brief tutorial you'll be able to customize your own name generator to make any kind of names you want. Click the button below to test it out, if you don't like the name you get you can click it as many times as you'd like.

 

 

Software Required: Adobe Flash CS3

Level of Knowledge Needed: None

Difficulty: Easy

Time: 15-30 minutes

You will learn about:

  • Creating Buttons
  • Dynamic Text
  • Instances
  • Variables
  • Arrays
  • Functions
  • Event Listeners
  • Generating Random Numbers
  • Rounding Numbers

Begin by creating a new document, select Flash File (Actionscript 3.0) from the list.

properties inspector

Immediately after creating your document you can set your document size and frame rate(unimportant for this excersize) in the properties inspector. My document size is 200x100, but you can make yours whatever you need.

rectangle tool

Select the rectangle tool and draw a rectangle on the stage. You can make it whatever size and color you want your button to be. Now select the text tool(the T above the rectangle tool) draw a text box over your rectangle, you can type in a label for your button here.

Select your rectangle and text, right click it and select convert to symbol. Then select 'Button' on the pop-up menu and click ok. After the window closes double click your rectangle and you will go into symbol editing mode.

Button Frames

Each button state has its own frame on the timeline. Select the frame for the over state, right click, and select 'Insert Keyframe'. This will copy your rectangle to the over state of the button. Change the color of the rectangle on this frame.

Now click on 'Scene 1' just below the timeline to exit symbol editing mode and return to the main timeline. Select the text tool again and draw another textbox above your button. This is where our names will eventually be displayed.

Textfield Properties

Change the text type from static text to dynamic text as shown above, also select any stying you'd like your text to have. Although you want to leave this textbox empty you can add text to test your style choices then delete the text and the textfield will retain those properties.

Instance Names

Now just below where you selected Dynamic Text is a field called instance name, type pirateName_txt in here. You can call this whatever you want really, so long as you remember what you named it when we start writing our code.

Next select your button and give it an instance name as well, mine is called yarr_btn.

We are done setting up, now we are ready to begin coding. Deselect everything by clicking outside of the stage and then press F9 or select Window/Actions from the Menu. It is important to make sure nothing is selected or else you will not be able to add code.

Actions panel

This is where we will type all of the code for our project. The first thing we are going to do is make a couple arrays. An array is a special type of variable that stores multiple values. Our arrays will act as our database of names. Since an array is a variable to make one we have to first make a variable, to do this we type var then the name of the variable. Then we have to set the datatype to array and define the values of the array. This code looks like this:

var firstNames:Array = ["Skull", "Fire", "Steel", "Bullet"];
var lastNames:Array = ["Beard", "Sword", "Gun", "Daniels"];

I have more names in my array, and you can add as many as you'd like here. Just make sure each name is in quotes and seperated by commas.

After we set up our Arrays the next thing we need to do is add an event listener to our button, so that when we click the button the program will run the function that generates our name. Well add the event listener to our button (which we named yarr_btn) by adding the following code.

yarr_btn.addEventListener(MouseEvent.CLICK, getPirateName);

This statement tells flash to run the function getPirateName whenever the button yarr_btn is clicked on. The would be good, but we haven't written any function called getPirateName yet, so we'll do that now. We'll define the function with the following code:

function getPirateName(event:MouseEvent):void { }

This code defines our function name and tells it that it recieve an event which is a mouse event. The function returns no data, so we set the return type as void. This type of function is known as an event handler. We will add the rest of our code between the curly braces at the end of this function.

The first thing we need to do inside this function is generate some random numbers to grab a random index out of our array. To generate a random number we have to use the math class.

Math.random()

This statment will generate a random number between 0 and 1. To make this number useful to us we need to multiply and round this number. Since we are using this number to pick a value from an array we can multiply it be the length property of the array. To do we need to write our statement as:

Math.random() * firstNames.length

There are several ways to round this number, we can use Math.round to just round the number. Math.ceil will always round up, and Math.floor will always round down. Since the first index in an array is always zero we need to round down for this work properly. We also need to assign this statment to a variable so we can use it later. The full statement will look like:

var randomFirst:Number = Math.floor(Math.random() * firstNames.length);

This statement will get our first name from the firstNames array, so we need to write the same thing to get a name from our lastNames array.

var randomLast:Number = Math.floor(Math.random() * lastNames.length);

The final thing we need to do in this function is assign the random names to our text field. To assign text to a textfield we can use the following code:

pirateNames_txt.text =

To access an index in an array we can just type the name of the array with the number of the index in brackets at the end like this arrayName[0] will give the value in the first index of the array, but since we need a random index we need to plug in our randomly generated number instead, the full statement will look like this:

pirateName_txt.text = firstNames[randomFirst] + " " + lastNames[randomLast];

Thats everything! Press Control+Enter to test your movie and if you did everything right it should work now. If it doesn't you can check my full code below.

var firstNames:Array = ["Skull", "Fire", "Steel", "Bullet"];
var lastNames:Array = ["Beard", "Sword", "Gun", "Daniels"];
yarr_btn.addEventListener(MouseEvent.CLICK, getPirateName);

function getPirateName(event:MouseEvent):void {
var randomFirst:Number = Math.floor(Math.random() * firstNames.length);
var randomLast:Number = Math.floor(Math.random() * lastNames.length);
pirateName_txt.text = firstNames[randomFirst] + " " + lastNames[randomLast];
}

The only difference between this code and the actual code I used is I have more values in my arrays. You can add as many names as you'd like to these arrays and since we use the length property of the array in our statement you don't need to change any other code.

carport19.com