Ok, time for my second tutorial.

This time i will be teaching you one method of formating dynamic text to create an interesting effect that you may find usefull or may even just find aspects of usefull in your own work. This method of formating text will capitalize the text, remove all spaces, and then allternate the colors of each word so that the string is still readable to the user. ( something thats easy to make in flash yes, but much harder to do at runtime with dynamic text for example text loaded in from an xml playlist, text file, etc).

Here is the example which i will be creating in this tutorial.



Ok so lets get started, you need a flash file that has a dynamic text box with an instance name, in this case the text box will be named text_display.

Now from here we can do everything else by code. Add a new layer to the main timeline and give it a name of Actions. Click on frame one of this new layer open up your actions pannel, and type the following code:

text_format_1 = new TextFormat();

text_format_1.color = 0x00FF00;

text_format_2 = new TextFormat();

text_format_2.color = 0x0000FF;

To start with we will create the 2 text formats used in this tutorial. One will format the text that appears green and the other blue. First the format is created using the new TextFormat() function. From here we proceed to define certain elements that we wish to format. (elements that are not formated will remain as the text boxes values as they appear in the properties pannel.

In this case we are formating only one property of the text. Its colour:

text_format_1.color = 0x00FF00;

this code means that any text with this format applied to it will become the color 0x00FF00 (green). You can replace this value with any hexidecimal color value that you want applied to the text.

Now with the formats for our text defined lets get to work on the function that we will use to format the text.

function formatText(inputText) {

}



formatText("Pixel 2 life is awsome !");

This is just the very basic setup of our function. (the code will all be placed in the function because it    makes it more versatile and can be used on anything with greater ease.) It will also call the funtion parsing the following string "Pixel 2 life is awsome !" which we will be formating.

To format our text we will need to know a few things about it and begin to apply some basic formating to it. So inside this function place the following code.

z = 1;

x = 0; 

len = song.length;

textArray = inputText.split(" ");

textDisplay = "";

formatPoints = [0];

inputText = inputText.toUpperCase();

So what does this do? Well it starts by setting up a few variables that will be used during the formating process, these
xt = textDisplay;
[/code]

This loop goes through each element of our textArray (the array where each element is a word from the input string) It then takes x and adds the length of the current element to it. so x starts at 0 and in this tutorial are string is "Pixel 2 life is awsome !" so pixel is 5 characters long so x will now be 5. The code then  adds the current x value to the formatPoints array and adds the current ellement to the textDisplay String.

By the end of this we have a textDsiplay string of "PIXEL2LIFEISAWSOME!" and a formatPoints array of [0,5,6,10,12,18,19] and have displayed this text in the text box on stage.

Now are ready to move onto the next page and begin to format our text



Right so we have our textBox displaying the text that we inputed with a little bit of formating already applied to it. time to really mess with the texts apearance now.

Directly after the for loop type tyhis code into the function.

[code]
for (i=0; i<formatPoints.length; i++) {
     if (i == 0) {
          e = formatPoints[1];
          text_display.setTextFormat(0, e, text_format_1);
     } else if (i == formatPoints.length-1) {
          b = formatPoints[i];
          e = textDisplay.length;
          if (z == 1) {
               text_display.setTextFormat(b, e, text_format_2);
               z = 2;
          } else {
               text_display.setTextFormat(b, e, text_format_1);
               z = 1;
          }
     } else {
          b = formatPoints[i];
          end = i+1;
          e = formatPoints[end];
          if (z == 1) {
              text_display.setTextFormat(b, e, text_format_2);
              z = 2;
          } else {
               text_ display.setTextFormat(b, e, text_format_1);
               z = 1;
          }
     }
}
[/code]

now this is a huge bit of code but dont be scared i will be going through each chunk of it one at a time and explaining what its there to do.

So first of all it starts a loop. This loop will repeat for each element of the formatPoints array. If the current format point is 0 then it sets the end point to the next element of the array. With the start and end points known it then applies text_format_1 to that chunk of the text (text formats will be defined later on)

if its not the first element of the formatPoints then it checks to see it it is the  last element of the array:

} else if (i == formatPoints.length-1) {

If so then it checks what the current format is (using the z variable) and then carries out a similar process as before. the start variable is already known and the end variable is obviously the length of the total string so it uses these two values to apply the appropriate format to the last part of the text.

But what if it isnt the start or end of the string? what if were dealing with one of the many words in between the two? well lets see.

[code]
          b = formatPoints[i];
          end = i+1;
          e = formatPoints[end];
          if (z == 1) {
              text_display.setTextFormat(b, e, text_format_2);
              z = 2;
          } else {
               text_ display.setTextFormat(b, e, text_format_1);
               z = 1;
[/code]

Again the code follows a similar pattern, first defining the start and end points of where the format shall be applied. (using the current and enxt elements of the formatPoints array) with those two values known it checks the current format (z variable) and applies the format as appropriate. then it changes the z variable so that it reverts to the other text format.


So thats the  the code lets just recap briefly:

We setup the function, we setup and create the variables and arrays needed to format the text and then, we begin formating the text to uppercase and remove the spaces before displaying it within our text box. Then we loop through the formatPoints array and use a few if tests to apply the appropriate tet format to that section of text, allternating the format each time.

If you have followed the tutorial carefully you should now have a working function that you can apply to any text string you want.



Thats all well and good but what if i want dont want to remove all of the spaces in my text? what if i want to replace the spaces with a "-" character? like in the example shown below.



Well this is very possible. but be carefull. First you need to edit the first for loop in the code, the one that populates the formatPoints and removes the spaces.

[code]
    for (i=0; i<textArray.length; i++) {
        x += textArray[i].length+1;
        formatPoints.push(x);
        textDisplay = textDisplay+"-"+textArray[i];
    }
[/code]

this basicly just adds a - before adding the next word onto the string and adds another 1 to the x value before pushing it into the formatPoints array. on testing of this movie you will then notice that the - come out as the same format as the word which they preceed.

There are 2 methods for overcoming this. One (which i wont be going into detail over) would be to set up another test for z so that it checks for 3 formats and applies formating acoordingly.


The other method (which i WILL briefly go over in detail) is a bit better.

Once you hvae run the through the code and have reached the end of the function you can loop through each character of the text and check it. If the character is a "-" then you can apply the format to just that character. This would be done by the following code.

    for (i=1; i<text_display.text.length; i++) {

        letter = substring(text_display.text, i, 1);

        if (letter == "-") {

            text_display.setTextFormat(i-1, i, text_format_3);

        }

    }

this code applies a format 3 which i simply made a red text. now the reson it starts i as 1 and then starts formating at i-1 is because otherwise the loop picks up the wrong letter and formats weirdly.



Thanks for taking the time to read through this tutorial i hope you found it helpful. If you have any questions you can contact me by on Pixel2life or feel free to email me : [email protected]

If you have found anything in this tutorial that is incorect or that you know or a more effective/efficient way of doing then please do let me know so that i can correct mistakes and improve my own code for this and possibly further tutorials.