The remaining pieces of code are responsible for displaying and cycling through all of our text. I have divided each major responsibility into functions. There is a first_item() function that sets up the initial variables, a timer() function that keeps track of the time before proceeding to the next image, a display() function that displays the news text, and finally a fadeout() function that fades the text out before displaying the next news item.

Let's start from the top:

First_Item Function

function first_item() {

delay = 3000;

p = 0;

display(p);

p++;

}

This is the first function that is called, and if you recall, it is called by our loadXML function itself. I initialize two variables: delay and p. Delay stores the time your news item is displayed in milliseconds. The variable p is a counter that keeps track of which news item is being displayed. Since this is our first image, p is set to 0.

Within this function, I make a call to the display function with the value of p. Immediately after making that call, I increment the value of p by one (p++), because essentially, we have already loaded the first image by calling our display function, so it's time to dance over to the next image.

Timer Function

myInterval = setInterval(ticker, delay);

In this line, I initialize a new variable that stores our setInterval function. The setInterval function, in our case, takes in only two arguments: a function name (ticker) and the time (delay) at which to call that function. The way setInterval works is that it calls the ticker function after a delay of delay seconds.

function ticker() {

clearInterval(myInterval);

if (p == total) {

p = 0;

}

fadeout();

}

This is the ticker function that is called by our setInterval. I immediately, make a call to clearInterval function and delete our initial setInterval call represented by the variable myInterval. The reason I do this is because I don't want the timer to automatically make a call to ticker() every x seconds as defined by delay.

I am content with simply calling the ticker() function once after the delay, and if I need to call the ticker() function again, I'll explicitly make another call to the timer() function. In most cases you would not do that, for the advantage of setInterval is that it makes a call to the function you specify indefinitely every few seconds. I am interested in having the delay before calling the ticker function for the first time only.

if (p == total) {

p = 0;

}

fadeout();

If our counter variable, p, reaches the value of total, the total number of data stored in our XML file, that means that we have reached the end of our XML file. There is nowhere to go but back to the front. I do that by setting the value of p back to zero.

Finally, I make a call to the fadeout() function to, literally, fade out what is currently displayed in our text field. You should note that the fadeout() function is called each time the ticker() function is called. It isn't a part of the if statement at all.

Display Function

function display(pos) {

I define a function called display, and it takes in one argument in the guise of a position variable called pos. The value of pos will always be the value of p that is passed into it by the calling function.

over = new TextFormat();

over.underline = true;

//

out = new TextFormat();

out.underline = false;

In order to make stylistic changes such as underlining our text during rollOver, you will need to use the TextFormat() class. I initialize both the over and out variables the properties of the TextFormat class in order to just that.

over = new TextFormat();

over.underline = true;

//

out = new TextFormat();

out.underline = false;

Because both the over and out variables have inherited the properties of the TextFormat() class, I can simply combine those variables with the underline property to specify which style I am interested in. In the case for our over scenario, I would like there to be an underline - hence the use of true. When the user rolls out from the text field, we no longer want an underline. So, the opposite is true for our out case, and the underline is set to false.

newsMC.newsText._alpha = 100;

newsMC.newsText.text = caption[pos];

In the first line, I set the transparency of our text field, newsText to be fully opaque. The fading in of text is done by varying the alpha property of the newsText text field, so in other words, in order to make sure that the text is fully visible initially, I remove all transparency by setting alpha to 100.

In the second line I access the text that has already been loaded into caption array. Since pos is equivalent to the value of p - the counter, it acts as the index position for retrieving the appropriate text from our caption array: caption[pos].
 

Note

In order to be able to adjust the alpha of text in a Dynamic or Input text field, you need to make sure to embed the fonts for that text field. If you recall, we already did that in our previous page. If you fail to embed your fonts, your text will simply ignore any alpha property changes. Even if you set the alpha for your text field to a really low number, your text field will still be fully visible. Moral of this action-packed story? Embed your fonts if you are planning on adjusting the alpha!

 

newsMC.onRelease = function() {

getURL(url[pos], "_self");

};

In this line and subsequent lines, I define the various mouse events that cause your news ticker to be more than something that looks pretty. First, let's tackle the onRelease case that loads a URL when you click on the news caption.

I apply the action to our movie clip newsMC, and I use the getURL function with the url and window target as the two arguments. The URL data is stored in our url array, and I access it using a number representing the index position of our data in our array That number is represented by, again, the variable pos.

newsMC.onRollOver = function() {

this.newsText.setTextFormat(over);

};

newsMC.onRollOut = function() {

this.newsText.setTextFormat(out);

};

timer();

These lines of code are fairly straightforward. I simply apply the over text formatting as defined earlier when someone hovers over the link. Likewise, I apply the out text formatting when someone hovers out of the link. If you recall, over and out determine whether the text is underlined or not.

The last thing this function does is call the timer() function to restart the setInterval that I cleared earlier.