Xavier Martin

Addicted to flash for a long time now.

http://dev.webbymx.net

View all articles by Xavier Martin


V. AND FOR THE SCREENSAVER?
Ok for the screensaver there are some little things to add. But it will be quite easy after the loadBackground class.

a. What we need
Ok. What are our needs for the screensaver?
First we want it to reload every X seconds, but this thing has been already done in the loadBackground class (yehaaaaaaaaa).

When the background will be loaded?
If the user is not moving the mouse for X seconds then the screensaver will load itself.
So we need an event on the MouseMove: each time the user will move the mouse, we will reset the startTime (don't forget the currentTime - _nStartTime > _nDelay). Then if the difference is bigger than the delay we will load the screensaver.

What else?
Every screensaver get a button to get out, or a mouse event. For my case I prefer to put an event on a button. So if the user is clicking the button, then he's coming back to the website. So we need a button and we need to define the onRelease event for this button.

b. the loadScreensaver class
Ok this is the class: 

class froggies.loadScreensaver extends froggies.loadBackground {
        //inherit from the loadBackground class
        private var _mcContinue:MovieClip;
        function loadScreensaver (mcBackground, tfDispInfo, nDelay, sFolder, btn) {
                //inherit from the loadBackroung constructor
                super(mcBackground, tfDispInfo, nDelay, sFolder);
                _mcBackground._owner = this;
                _mcBackground.onMouseMove = function() {
                        this._owner.clearDelay();
                }
                //btn you click to stop the screensaver
                _mcContinue = btn;
                //hidding the button
                _mcContinue._visible = false;
                _mcContinue._owner = this;
                _mcContinue.onRelease = function () {
                        this._owner._mcBackground.onMouseMove = function() {
                                this._owner.clearDelay();
                        }
                        this._owner.clearDelay();
                }
                _oBackground.onLoadComplete = function (cible_mc) {
                        delete(this._owner._mcBackground.onMouseMove);
                        this._owner._mcContinue._visible = true;
                        cible_mc._visible = false;
                        cible_mc.gotoAndStop(1);
                        this._owner._tfDispInfo._visible = false;
                }
        }
        private function Init():Void {
                nextBackground();
        }
        public function clearDelay ():Void {
                if(_nSICheck != null) {
                        //clearing the interval
                        clearInterval(_nSICheck);
                        _nSICheck = null;
                        //removing the listener --> stop loading the contents if loading
                        _mclBackground.removeListener(_oBackground);
                        _mclBackground.unloadClip(_mcBackground.mc0);
                        _mclBackground.unloadClip(_mcBackground.mc1);
                        //hidding the button
                        _mcContinue._visible = false;
                        //hidding the textField
                        _tfDispInfo._visible = false;
                        //hiding the container
                        _mcBackground.mc0._visible = false;
                        _mcBackground.mc1._visible = false;
                        //calling the nextScreensaver
                        nextBackground();
                }
        }
}


c. How this class is working?
We are making a new class inherit from the loadBackground class:
class froggies.loadScreensaver extends froggies.loadBackground
So the new class loadScreensaver get all the methods (functions) and properties (var) of the loadBackground class.
For the loadScreensaver class we need a button (a MovieClip object), so just add a new property to the one existing already:
private var _mcContinue:MovieClip;

Now the constructor.
We are adding some extra stuff and changing others.
So first we need to inherit from the loadBackground constructor - super(mcBackground, tfDispInfo, nDelay, sFolder); - then we are defining our extra stuff.

The main container have a MouseMove event on it where we are calling the method clearDelay - this._owner.clearDelay(); - , so before we need to know which is the owner of the container object - _mcBackground._owner = this; -.

NOTE: When you are using instance of class inside other class (like we have done with button eg, this is called composition) you need to specify the owner of the instance to be able to access the methods and properties of the class holding it.

Still in the constructor, we are setting up our button with the parameter sent in the constructor. Then we are hiding this button, and adding a onRelease event, that clearing the delay (so the screensaver will not more be display), and defining the onMouseMove event of the container.
Why redefining it, because we are deleting this event when the screensaver is loaded. (we want to click on a button, not moving the mouse).
When the screensaver is unload, we need to clearDelay each time the user movethe mouse, so we need to redefine the MouseMove event. That's why. (yeah I know it's a bit confusing but I can't find other way to explain it :/ hé don't forget I'm a froggy)

And we are finally redefining the onLoadComplete event of the listener. We are just adding 2 lines compare to the one in the loadBackground class. We are deleting the MouseMove event of the container (yes it's here) - delete(this._owner._mcBackground.onMouseMove); - and we are making the button visible.

Now the methods (functions) of this class:
Init() is not the same. Here we are calling the function nextBackground() because we want the screensaver to load after X seconds and not as soon as the movie start.

clearDelay() is clearing the setinterval calling the function checktime, removing the listener (stop loading the content then) and unloading the sub containers, hiding the continue button, hiding the info textField and hiding the sub containers, then calling nexBackground() which is checking if the screensaver have to be displayed (after X seconds).


VI. HOW TO USE THOSE CLASSES 
a. loadBackground
This is VERY SIMPLE. Just create a new fla . Then add 2 layers.
The upper one is the layer called "infoBG" where you must put the dynamic textField, and call it infoBackground .
Then come the layer "BG", where you need to put an empty MovieClip and call it backgroundImage .
The last one is the layer "action", where you are writing this code: 

import froggies.loadBackground
//This will load the Background only once
aBackground = new loadBackground(_root.backgroundImage, _root.infoBackground, -1, "./background/");
//This will load the Background every 1 minute
//aBackground = new loadBackground(_root.backgroundImage, _root.infoBackground, 60000, "./background/");


 
b. loadScreensaver
This is VERY SIMPLE. Just create a new fla . Then add 2 layers.
The upper one is the layer called "infoSS" where you must put the dynamic textField, and call it infoScreensaver .
Then come the layer "SS", where you need to put an empty MovieClip and call it screensaverImage .
The last one is the layer "action", where you are writing this code: 

import froggies.loadScreensaver
//This will load the Screensaver every 1 minute
aScreensaver = new loadScreensaver(_root. screensaverImage, _root.infoScreensaver, 60000, "./background/");


When using both it's the same thing. Don't forget to put screensaver container and text and button in a upper level than your background (see the fla joined).


VII Conclusion
I hope that you get all. If you need help and/or have comments/feedbacks, email me.
I'll be please to answer you.