RSS link icon

.

String manipulation with actionscript 3


Okay this actionscript tutorial will be a bit different than the usuals, we will be talking about strings, and I will show you some ways to manipulate strings with actionscript, this is really cool and you will be needing it a lot if you really dig into actionscripting later on.

 

First I will explain what we will do, then we need to set up a few things on the stage before we get to the actionscript part of the tutorial.

 

But before we get any further I will show you the end result, it should look something like this.

 

 

Okay, what this is suppose to do, is when you type in a word in the textbox and hit the button, you get some output information, like the length of the word, the first letter, and many other stuff that we will be getting into later.

 

Now lets set up the visual part, so drag a text field on the stage, make it into an input text field as shown below and give it an instance name, I named mine "theText_txt"

 

actionscript string tutorial

 

Make a button and convert it into a movieclip and give it the instance name "do_btn".

 

Finally we need to make 11 dynamic text fields to show your output information. Give them all instance names like result_txt_1, result_txt_2 and so on.

 

Now we are ready to go to the actionscript panel and type in the code for the string manipulation function.

 

I have typed in the description between the code lines so you can follow along.

 

 

// First we add an eventlistener to the button movie clip to listen for a mouse click and calls the function showStringInfo

do_btn.addEventListener(MouseEvent.CLICK, showStringInfo);

 

// And here is the function, its handling a mouse event, and the void means its not returning any value.

function showStringInfo(Event:MouseEvent):void {

 

// Now we just convert the text fields content into a string which we call myString

var myString:String = theText_txt.text;

 

// Now these next lines will give the text boxes text property a value as shown below.

// This one will show the first character of our text string.

result_txt_1.text = "Showing first character = " + myString.charAt(0);

 

// This will output the first 4 characters in the string text. (remember we start at 0 and end with 4).

result_txt_2.text = "Showing substring at 0 to 4 char = " + myString.substring(0,4);

 

// This will show all the letters in the string starting from character number 4.

result_txt_3.text = "Showing substring from char 4 = " + myString.substring(4);

 

// This is kind of the same as substring, it will slice the string and show characters from 4 to 9.

result_txt_4.text = "slicing and showing char from 4 to 9 = " + myString.slice(4,9);

 

// This is actually a pretty neat function, by using the .search method you can search for a specific substring within a string, and it will output the position of the substring.

result_txt_5.text = "Find the character number where the word starts = " + myString.search("Word");

 

// Converts all the letters into lower case letters

result_txt_6.text = "Showing the string all lower case letters = " + myString.toLowerCase();

 

// Converts all the letters into upper case letters

result_txt_7.text = "Showing the string all upper case letters = " + myString.toUpperCase();

 

// This one you have to get use to, because its the most used method, to output the length of the string, eg. how many letters there is in the string.

result_txt_8.text = "showing the length of our word = " + myString.length;

 

// This will add the word "hey" at the start of the string text.

result_txt_9.text = "Adding hey at the start of our word = " + "hey" + myString;

 

// Adding hey at the end of the string text.

result_txt_10.text = "Adding hey at the end of our word = " + myString + "hey";

 

// this might seem a bit more confusing, first we tell the string to replace a specific part of the string, we could type in the substring or as I did, myString.substring(0,3), meaning it will replace the first 3 letters of the string with "hey".

result_txt_11.text = "Replacing the first 3 letters in the word with the letters hey = " + myString.replace(myString.substring(0,3), "hey");

}

 

 

I hope you learned something about string manipulation from this tutorial, if you are having trouble making the code work you can download the source code here.

 

 


Admin Bob says: 2008-10-13

Hi andol, well actionscript and flex is kind of the same, flex is usually coded with actionscript, so if you know any actionscript, I guess flex will be easier to code.

andol says: 2008-10-10

anything tutorials for flexQ
make money with photoshop - book