This is page 4 of the tutorial, so if you are visiting here from a search engine without having completed the previous page, click here.

Fadeout Function
Our fadeout function is responsible for fading out our news text. Let's take a look at how it is done!

this.onEnterFrame = function() {

if (newsMC.newsText._alpha>=0) {

newsMC.newsText._alpha -= 5;

} else {

display();

p++;

delete this.onEnterFrame;

}

};

I place everything in an onEnterFrame function because I want whatever I place to repeat smoothly for a period of time. The easiest way to do that, would be to use an onEnterFrame function that executes code with a speed proportional to your frame rate.

if (newsMC.newsText._alpha>=0) {

newsMC.newsText._alpha -= 5;

} else {

display();

p++;

delete this.onEnterFrame;

}

In the first part of the if statement, I check to see if the alpha of our text is greater than 0. Since we are interested in fading out our text, ultimately we would want our text to be invisible with an alpha of at least 0 at the end.

So, if our text is still visible with an alpha greater than zero, I decrease the alpha by 5:

newsMC.newsText._alpha -= 5;

Since this code is in an onEnterFrame, the text field will gradually decrease its alpha by 5 until the alpha of the text field becomes less than or equal to zero. When that happens, it's time to look at our else case!

display(p);

p++;

delete this.onEnterFrame;

First, I call our display function to display the next caption in the series. At this point, the previous news caption should have faded out completely, so it makes sense to display the next item now.

I increment the value of the counter variable p to inform Flash that I want to proceed to the next image when the display function is called again.

Finally, I delete the onEnterFrame statement. After displaying the new news item and incrementing the value of p, there is no need to waste CPU cycles by keeping our onEnterFrame to run through code that no longer needs to be run. The delete command allows you to delete the onEnterFrame function we declared earlier easily.

It's Over
You are now done with this tutorial and the explanation for it. The main idea I hope you get out of this tutorial is how to divide important responsibilities of your code to different functions. Breaking your code into various functions makes it easier to troubleshoot, or more importantly, to extend your animation without having to extensively modify the ticker's core functionality.

I have provided the source file for you to see my version of the exact same tutorial.

Download ZIP

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums New, Upcoming, and In-Progress Tutorials How to Help out kirupa.com Writing Tutorials

Cheers!
	Kirupa Chinnathambi kirupaBlog

 

---

page 4 of 4

---