Actionscript 2: The Fader class

Introduction

The Fader class is part of the flashscript animation package, which you can download here. In this tutorial you learn how to create your own functional module, which you can use again and again without writing a new script. That is the power of AS2 classes. The particular script we are creating here are methods dealing with slides such as fading and creating a mask on the spot without any hardcopy in your fla file. You do not even have to know the name of some of the movieclips. But let's start now and have a look at the swf.

Setting up the fla file

For this particular tutorial file you need only two items: a button and a rectangle movieclip of any size, which we name mask and which stays in the library. Since we need to attach it later to another movieclip, click on the icon in the library and then select linkage from the menu. Click on export for actionscript. Now create five buttons as in our example and one frame for actionscript. Name the buttons but1, but2 and so on. Next we will put a script in the actions frame.

The Actionscript in the Fla File

In the actionscript frame put this script:

import as_scripts.*;
_root.but1.onPress = function() {
    fader.createMC(200, 75);
    fader.fadeoutin("images/pic_1.jpg");
};
_root.but2.onPress = function() {
     fader.fadeoutin("images/pic_2.jpg");
};
_root.but3.onPress = function() {
    fader.maskMC(250, 100, 100, 100);
};
_root.but4.onPress = function() {
    fader.fadeoutin("images/pic_3.jpg");
};
_root.but5.onPress = function() {
    fader.deleteMC();
};

The first line is a wildcard expression and will import all scripts from a folder as_ascripts. I like this shortcut because then I do not have to care any more about the path of any of the scripts in the folder. Then we give functions to the buttons by referring to the fader class. All our functions as you will see are static functions and that is why we have to refer to these functions over the class name. What exactly these functions are you will see in the next section. But as you can see here some of the functions have arguments, either the path and name of a slide or numbers, which as you will see are the x and y coordinates to place objects.

Class Fader

The class fader has several methods as you have seen, which may come handy to us. One method is fading a slide in and out and for this we need to create a movieclip, which we do in a separate function. Another method is to mask the slide and a third method is to delete everything. As you could see we call the methods when we need them and that is what you have to do for your own slideshow but that is all you need to do: calling. Now we get into the first part of the script.

class as_scripts.fader {

    public function fader() {
    }

In this part we just define our class path, which is the folder as_scripts and the class name fader. The next line is the constructor for our class, which we leave empty. The constructor will initiate any instance of the class we create.

Creating the Fading Events

All our functions are static. The following error message is given if by mistake we call a function static:

Error! Instance variables cannot be accessed in static functions.

What we have done wrong in such case is we have referred to an instance variable outside of the function, for example a variable we have defined right at the beginning of the class and which we now refer to. If we have to do that then our function is not static any more. In actionscript the Math functions are for example static. Static functions form a unit for themselves. Anyways, coming back to the script in our first function we create a movieclip and position it using x and y coordinates. If we load a swf instead of jpg we want to make sure that the root of the swf is its own root and not the parents' root. So we add _lockroot here, which is a very handy property introduced with Flash 7.

The second function is the fading function with mainPic as argument, which will be the path to our picture or movie to be loaded. Now here comes the point why we have created two movieclips. We created those, whereby the second one resides within the first one. The reason for this is that now we can have two independent events associated with each of the movieclips, which we can manipulate separately. If we had only one movieclip and we create the same event in the two onEnterFrame functions we could not continue after deleting the function once. The rest of the fader function are just typical alpha tweens and I do not go into further details. One more explanation is, however, necessary. We have to create a variable fade, to lead the compiler into one direction not to repeat the same events over and over again, which is done by changing the value of fade once a task is completed. Now go to the next page for more.

    public static function createMC(nu_x:Number,nu_y:Number) {
        _root.createEmptyMovieClip("m_movie",1111);
        _root.m_movie.createEmptyMovieClip("m_movieHolder",1);
        _root.m_movie.m_movieHolder._lockroot = true;
        _root.m_movie._x = nu_x;
    }
	
    public static function fadeoutin(mainPic:String) {
        var n_fade:Number = 0;
        _root.m_movie.m_movieHolder.onEnterFrame = function() {
            if (n_fade == 0) {
                if (_root.m_movie.m_movieHolder._alpha>0) {
                    _root.m_movie.m_movieHolder._alpha -= 10;
                } else {
                    _root.m_movie.m_movieHolder._alpha = 0;
                    delete _root.m_movie.m_movieHolder.onEnterFrame;
                    _root.m_movie.m_movieHolder.loadMovie(mainPic);
                    n_fade = 100;
                }
	           
            }
        };
        _root.m_movie.onEnterFrame = function() {
            if (n_fade == 100) {
                if (_root.m_movie.m_movieHolder._alpha<100) {
                    _root.m_movie.m_movieHolder._alpha += 10;
                } else {
                    _root.m_movie.m_movieHolder._alpha = 100;
                    delete _root.m_movie.onEnterFrame;
                    n_fade = 0;
                }
            }
        };
    }

Masking and the End

The next two functions also come very handy when we create slideshows or similar type movies. In the first function a mask will be created. Now you understand why we need a mask ready in the library of the fla. The rest of the script is just creating and positioning a movieclip, to which we can attach the mask. Then we create the mask over our movieclip m_movie using the setMask method.

The last function gives us the opportunity to delete everything we have created and that is all. Now it is up to you to implement these functions into your movie and you are never going to ask a question in the Flashkit forum how to fadein or out a picture??? Well, may be. If you are not too tired, visit my web site at for more tutorials.