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.