Home Games News Extras Contact






Tutorial: Scrolling Scripts

Difficulty: Novice (Part 2: Intermediate)

This tutorial is written using Action Script 2. All code will be placed in the main stage actions panel.

In this tutorial I will be going over how to create scrolling text (like you see in many rpgs), as well as how to add tags for special events mid-script.

Setting up the variables

To begin we need to set up several variables:

  1. scriptArray: An array to store several string values representing each line.
  2. scrollSpeed: The speed (in characters/frame) that the text will scroll.
  3. lineNumber: The index of the current line to be displayed.
  4. scrollClip: A movie clip to hold the enterFrame scroll function.
  5. scriptField: The text field which will actually display the function.

var scriptArray:Array = new Array("Hello, welcome to this tutorial.",
"We will be going over creating scrolling text.",
"First we define the script we will be using.");
var scrollSpeed:Number = 1;
var lineNumber:Number = 0;
var scrollClip:MovieClip = this.createEmptyMovieClip("scrollClip",0);
var scriptField:TextField = this.createTextField("scriptText",1,20,200,510,180);

Now that we have the main variables we will be using, we can get into actually programming this thing. We will begin by defining a function which we will call displayScript. This function will allow us to easily display any line from any array.

function displayScript(script:Array,line:Number):Void {
    scrollClip.line = script[line];
    scrollClip.char = 0;
    scriptField.text = "";
    scrollClip.onEnterFrame = function() {
    //We will insert the function here later.
    }
}

We store the current line in the scrollClip to easily be accessed. We also define a variable char which will be the index of the current character being displayed. Finally we erase the current contents of scriptField

scrollClip.onEnterFrame = function() {
    if(this.char < this.line.length) {
        scriptField.text += this.line.charAt(this.char);
        this.char++;
    }
}

Here we are using the function charAt, which will return the character in the string at the index of char. Every frame we add that character to the current string in scriptField, and increase char.

If we add in a for loop, we can control how fast the text displays with the scrollSpeed variable.

scrollClip.onEnterFrame = function() {
    for(i = 0; i < scrollSpeed; i++) {
        if(this.char < this.line.length) {
            scriptField.text += this.line.charAt(this.char);
            this.char++;
        }
    }
}

What we need now is a way to advance the script. We are going to create a Mouse Listener object.

var advanceScriptListener:Object = new Object();
advanceScriptListener.onMouseDown = function() {
    if(scrollClip.char >= scrollClip.line.length){
        lineNumber++;
        displayScript(scriptArray,lineNumber);
    }
}
Mouse.addListener(advanceScriptListener);

Now, if the user clicks after the text has been fully displayed, the next line will be displayed. Now we just need to add the initial display function and we will have simple scrolling text. Our complete code will be as follows:

var scriptArray:Array = new Array("Hello, welcome to this tutorial.",
"We will be going over creating scrolling text.",
"First we define the script we will be using."); var scrollSpeed:Number = 1; var lineNumber:Number = 0; var scrollClip:MovieClip = this.createEmptyMovieClip("scrollClip",0); var scriptField:TextField = this.createTextField("scriptText",1,20,200,510,180); displayScript(scriptArray,lineNumber); function displayScript(script:Array,line:Number):Void { scrollClip.line = script[line]; scrollClip.char = 0; scriptField.text = ""; scrollClip.onEnterFrame = function() { for(i = 0; i < scrollSpeed; i++) { if(this.char < this.line.length) { scriptField.text += this.line.charAt(this.char); this.char++; } } } } var advanceScriptListener:Object = new Object(); advanceScriptListener.onMouseDown = function() { if(scrollClip.char >= scrollClip.line.length){ lineNumber++; displayScript(scriptArray,lineNumber); } } Mouse.addListener(advanceScriptListener);

Event tags

One thing that we can do which I think is pretty cool is adding tags which can be used inside of the script to trigger special events like pauses, sounds, font changes, and much more. This can save a lot of programming time.

Here I will just demonstrate a simple pause.

First we will add two more variables to our scrollScript inside of our displayScript function

scrollClip.waiting = false;
scrollClip.waitTime = 0;

We will also need to modify the enterFrame function to pause scrolling while waiting is true, and decrease waitTime until it is 0, then unpause scrolling.

scrollClip.onEnterFrame = function() {
    if(this.waiting){
        if(this.waitTime--<=0){
            this.waiting = false;
        }
    }else{
        for(i = 0; i < scrollSpeed; i++) {
            if(this.char < this.line.length) {
                scriptField.text += this.line.charAt(this.char);
                this.char++;
            }
        }
    }
}

Now comes the real work. We will take a page from html and use < and > to enclose tags. The tags will contain a letter which represents a command and a parameter. (You can use words and multiple parameters, but we won't in this case). "p" will represent the pause command and will be followed by a number which represents the number of frames the scrolling will pause. Ex. <p120>

We will modify the enterFrame function again to have the program check for a tag:

for(i = 0; i < scrollSpeed; i++) {
    if(this.char < this.line.length) {
        if(this.line.charAt(this.char) == "<"){
            this.char++;
            switch(this.line.charAt(this.char)){
                case "p":
                    this.char++;
                    tmp = "";
                    while(this.line.charAt(this.char) !== ">"){
                        tmp += this.line.charAt(this.char);
                        this.char++;
                    }
                    this.waitTime = tmp;
                    delete tmp;
                    this.waiting = true;
                    this.char++;
                    i = scrollSpeed;
                break;
            }
        }else{
            scriptField.text += this.line.charAt(this.char);
            this.char++;
        }
    }
}

So what we have done here is, before adding the next character, we check if it is the start of a tag (<), if it is, we "read" the tag. We identify which function we are using, and then we continue until we find the end of the tag (">"), storing what we find as tmp, a temporary string to store the parameter as we read it. When we find the end of the tag, we store the corresponding variable, and complete any other necessary functions. We also escape the current loop by setting i equal to scrollSpeed.

After adding a few pause tags in our script to test it out, here is our final code:

var scriptArray:Array = new Array("Hello, welcome to this tutorial.",
"We will be going over. <p6>. <p6>. <p6> creating scrolling text.",
"First we define the script we will be using."); var scrollSpeed:Number = 1; var lineNumber:Number = 0; var scrollClip:MovieClip = this.createEmptyMovieClip("scrollClip",0); var scriptField:TextField = this.createTextField("scriptText",1,20,200,510,180); displayScript(scriptArray,lineNumber); function displayScript(script:Array,line:Number):Void { scrollClip.line = script[line]; scrollClip.char = 0; scriptField.text = ""; scrollClip.onEnterFrame = function() { if(this.waiting){ if(this.waitTime--<=0){ this.waiting = false; } }else{ for(i = 0; i < scrollSpeed; i++) { if(this.char < this.line.length) { if(this.line.charAt(this.char) == "<") { this.char++; switch(this.line.charAt(this.char)) { case "p": this.char++; tmp = ""; while(this.line.charAt(this.char) !== ">") { tmp += this.line.charAt(this.char); this.char++; } this.waitTime = tmp; delete tmp; this.waiting = true; this.char++; i = scrollSpeed; break; } }else{ scriptField.text += this.line.charAt(this.char); this.char++; } } } } } } var advanceScriptListener:Object = new Object(); advanceScriptListener.onMouseDown = function() { if(scrollClip.char >= scrollClip.line.length){ lineNumber++; displayScript(scriptArray,lineNumber); } } Mouse.addListener(advanceScriptListener);

I encourage you to experiment and create your own tags. You can do a great many things with them!


© 2013 aRobeGames