Flash hover caurina saturation

Question

I have a flash project that loads an image and applies a grey saturation over it. There is a button beneath the image that when highlighted or the mouse hovers over it removes the saturation and restores the original color to the image. This works fine in demo mode and in the stand-alone flash player, but when I try to use it online (HTML) page the hover of feature no longer restores the color to the image. My code is below, I hope someone smarter than me know's what the problem is.

Thanks.

    function parsXML()
{
    mainGalleryNode = gallery_xml.childNodes[0].childNodes;
    path = mainGalleryNode[_root.gallerySel - 1].attributes.path;
    lenGall = mainGalleryNode[_root.gallerySel - 1].childNodes.length;
    lenCat = mainGalleryNode.length;
    for (var _loc2 = 0; _loc2 < lenGall; ++_loc2)
    {
        arrayImage[_loc2] = path + mainGalleryNode[_root.gallerySel - 1].childNodes[_loc2].attributes.pic;
        arrayThumb[_loc2] = path + mainGalleryNode[_root.gallerySel - 1].childNodes[_loc2].attributes.thumbnail;
        arrayTitle[_loc2] = mainGalleryNode[_root.gallerySel - 1].childNodes[_loc2].attributes.name;
        arrayDescription[_loc2] = mainGalleryNode[_root.gallerySel - 1].childNodes[_loc2].attributes.description;
    } // end of for
} // End of the function


function arrayThumbs()
{
    for (var _loc3 = 1; _loc3 <= lenGall; ++_loc3)
    {
        _thumbs._thumbs.attachMovie("thumb", "thumb" + _loc3, _loc3);
        var _loc2 = _thumbs._thumbs["thumb" + _loc3];
        _loc2.index = _loc3;
        _loc2._y = Math.floor(_loc2._height + 1) * (_loc3 - 1);
        _loc2._mc._txt.text = _loc2.index;
        _loc2.onRollOver = function ()
        {
            this.gotoAndPlay("over");
        };
        _loc2.onRollOut = _loc2.onReleaseOutside = function ()
        {
            this.gotoAndPlay("out");
        };
        _loc2.onRelease = function ()
        {
            caurina.transitions.Tweener.addTween(_mc1._mc, {_saturation: 1, time: 5.000000E-001});
            mcLoader.loadClip(arrayImage[this.index - 1], _mc1._mc);
            currentIndex = this.index - 1;
            getDes();
        };
    } // end of for
    counter = 1;
} // End of the function


function menuCat()
{
    for (var _loc4 = 1; _loc4 <= lenCat; ++_loc4)
    {
        _category.attachMovie("btnCat", "btnCat" + _loc4, _loc4);
        var _loc3 = _category["btnCat" + _loc4];
        var _loc6 = _category["btnCat" + (_loc4 - 1)];
        _loc3.index = _loc4;
        arrayNameGall[_loc4 - 1] = mainGalleryNode[_loc4 - 1].attributes.name;
        _loc3._mc._txt.autoSize = true;
        _category["btnCat" + _loc4]._mc._txt.text = arrayNameGall[_loc4 - 1];
        _loc3._red._width = _loc3._mc._txt.textWidth + 10;
        _loc3._red._x = _loc3._mc._txt.textWidth / 2;
        _loc3._mask._width = _loc3._mc._txt.textWidth + 10;
        _loc3._mask._x = _loc3._mc._txt.textWidth / 2;
        for (var _loc5 = 1; _loc5 <= 3; ++_loc5)
        {
            _loc3["_arr" + _loc5]._x = _loc3._mc._txt.textWidth / 2 - 5;
        } // end of for
        _loc3._mask_red._txt.text = arrayNameGall[_loc4 - 1];
        _loc3._x = Math.floor(_loc6._x + _loc6._mc._txt.textWidth + intervalCat);
        if (_loc4 < lenCat)
        {
            _category._breakers.attachMovie("breaker", "breaker" + _loc4, _loc4);
            var _loc7 = _category._breakers["breaker" + _loc4];
            _loc7._x = _loc3._x + _loc3._mc._txt.textWidth + intervalBr;
        } // end if
        _category._x = 881 - _category._width;
        _loc3.onRollOver = function ()
        {
            if (this.index != _root.gallerySel)
            {
                btnCatOver(this._red, this._arr1);
            } // end if
        };
        _loc3.onRollOut = _loc3.onReleaseOutside = function ()
        {
            if (this.index != _root.gallerySel)
            {
                btnCatOut(this._red, this._arr1);
            } // end if
        };
        _loc3.onRelease = function ()
        {
            if (this.index != _root.gallerySel)
            {
                btnCatOut(_category["btnCat" + _root.gallerySel]._red, _category["btnCat" + _root.gallerySel]._arr1);
                clearThumbs();
                caurina.transitions.Tweener.addTween(_thumbs._thumbs, {_y: 0, time: 1, transition: "easeOutCubic"});
                yPos = 0;
                _root.gallerySel = this.index;
                parsXML();
                arrayThumbs();
                getDes();
                mcLoader.loadClip(arrayImage[0], _mc1._mc);
            } // end if
        };
    } // end of for
    btnCatOver(_category.btnCat1._red, _category.btnCat1._arr1);
} // End of the function

function btnCatOver(clip1, clip2)
{
    caurina.transitions.Tweener.addTween(clip1, {_y: 17, time: 3, transition: "easeOutCubic"});
    caurina.transitions.Tweener.addTween(clip2, {_y: -6, time: 5.000000E-001, transition: "easeOutCubic"});
    var _loc1 = new Sound();
    _loc1.attachSound("bt_snd");
    _loc1.start();
} // End of the function
function btnCatOut(clip1, clip2)
{
    caurina.transitions.Tweener.addTween(clip1, {_y: -27, time: 3, transition: "easeOutCubic"});
    caurina.transitions.Tweener.addTween(clip2, {_y: -24, time: 5.000000E-001, transition: "easeOutCubic"});
} // End of the function
function clearThumbs()
{
    for (var _loc1 = 1; _loc1 <= lenGall; ++_loc1)
    {
        _thumbs._thumbs["thumb" + _loc1].removeMovieClip();
    } // end of for
} // End of the function
function getDes()
{
    var _loc2 = new Object();
    _loc2.onMouseMove = function ()
    {
        if (_mask_des.hitTest(_root._xmouse, _root._ymouse))
        {
            caurina.transitions.Tweener.addTween(_descr, {_y: 407, time: 5.000000E-001, transition: "easeOutCubic"});
        }
        else
        {
            caurina.transitions.Tweener.addTween(_descr, {_y: 467, time: 5.000000E-001, transition: "easeOutCubic"});
        } // end else if
    };
    Mouse.addListener(_loc2);
    _descr._txt.text = arrayTitle[currentIndex];
} // End of the function
_thumbs._thumbs.setMask(_thumbs._mask);
_root.gallerySel = 1;
var lenGall;
var lenCat;
var mainGalleryNode;
var path;
var arrayImage = new Array();
var arrayThumb = new Array();
var arrayTitle = new Array();
var arrayDescription = new Array();
var arrayNameGall = new Array();
var currentIndex = 0;
var descStr;
var titleStr;
var sel = false;
var counter;
var intervalCat = 54;
var intervalBr = intervalCat / 2;
var yPos = 0;
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function (ok)
{
    if (ok)
    {
        parsXML();
        arrayThumbs();
        menuCat();
        getDes(); //Shows the Colour view bar
        _mc2._mc.unloadMovie();
        mcLoader.loadClip(arrayImage[0], _mc1._mc);

    } // end if
};
gallery_xml.load("cgal.xml");
btnTop.onRollOver = btnBottom.onRollOver = function ()
{
    this.gotoAndPlay("over");
};
btnTop.onRollOut = btnBottom.onRollOut = function ()
{
    this.gotoAndPlay("out");
};
btnBottom.onRelease = function ()
{
    if (_thumbs._thumbs._height > _thumbs._mask._height)
    {
        if (Math.abs(_thumbs._thumbs._y) < _thumbs._thumbs._height - _thumbs._mask._height && caurina.transitions.Tweener.isTweening(_thumbs._thumbs) != true)
        {
            yPos = yPos - (_thumbs._thumbs.thumb1._height + 1);
            caurina.transitions.Tweener.addTween(_thumbs._thumbs, {_y: yPos, time: 5.000000E-001, transition: "easeOutCubic"});
        } // end if
    } // end if
};
btnTop.onRelease = function ()
{
    if (_thumbs._thumbs._height > _thumbs._mask._height)
    {
        if (Math.abs(_thumbs._thumbs._y) > 0 && caurina.transitions.Tweener.isTweening(_thumbs._thumbs) != true)
        {
            yPos = yPos + (_thumbs._thumbs.thumb1._height + 1);
            caurina.transitions.Tweener.addTween(_thumbs._thumbs, {_y: yPos, time: 5.000000E-001, transition: "easeOutCubic"});
        } // end if
    } // end if
};
caurina.transitions.properties.ColorShortcuts.init();
_descr._btn_color.onRollOver = function ()
{
    caurina.transitions.Tweener.addTween(_mc2._mc, {_saturation: 1, time: 2});
};
_descr._btn_color.onRollOut = function ()
{
    caurina.transitions.Tweener.addTween(_mc2._mc, {_saturation: 0, time: 2});
};
var mcLoader = new MovieClipLoader();
var loadListener = new Object();
loadListener.onLoadStart = function (mcTarget)
{
    _root.loadImBig = true;
    _root._content.pages.page1.page1.attachMovie("mcPercents", "mcPercents", this.getNextHighestDepth());
    _root._content.pages.page1.page1.mcPercents._x = _mask_des._width / 2 - 10;
    _root._content.pages.page1.page1.mcPercents._y = _mask_des._height / 2 - 25;

};
loadListener.onLoadProgress = function (mcTarget, bytesLoaded, bytesTotal)
{
    var _loc2 = Math.ceil(bytesLoaded / bytesTotal * 100);
    _root._content.pages.page1.page1.mcPercents.txtPercents.text = _loc2 + "%";
};
loadListener.onLoadComplete = function (mcTarget)
{
    _root._content.pages.page1.page1.mcPercents.mcLoading.removeMovieClip();
    _root._content.pages.page1.page1.mcPercents.removeMovieClip();
};
loadListener.onLoadInit = function (mcTarget) //Controls the different tabs at the bottom
{
    caurina.transitions.Tweener.addTween(_mc2._mc, {_saturation: 0, time: 5.000000E-001});
    mask_mc.gotoAndPlay(2);
    _white.gotoAndPlay(2);
};
mcLoader.addListener(loadListener);

Answer 1

Edit:

After taking a look at snapplex's project files, it appears the issue may be a difference in behaviour between Flash versions when a mask is completely empty.

The grey saturation has a mask which animates and finishes on a blank frame. This hides the masked object in the test environment (targeting Flash Player 8), but shows the whole object in browser (with the latest player version).

A quick workaround is to add a shape to the mask which is off stage, which leaves the masked object invisible in both player versions.

(My original answer suggested Flash didn't receive rollover events without focus, but this was incorrect.)