sastgroup.com

Effetto tooltip con flash

Posted on 30. Aug, 2007 by Administrator in flash, tutorials

In questo tutorial vedremo come realizzare l'effetto tooltip con flash. Il tooltip è un movieclip a forma di fumetto che si muove in modo dinamico quando si passa con il mouse sopra un altro movieclip.

Come prima cosa,creiamo un movieclip di nome "tooltip" in cui disegnamo un oggetto a forma di fumetto e inseriamo un testo dinamico chiamato "tiptext".

 

Fatto ciò passiamo allo stage e trasciniamo nello stage il movieclip appena creato e gli assegniamo come nome d'istanza "tooltip".

Nel primo stage mettiamo come codice actionscript:

tooltip._visible = false;
var tipInt;
processTip();
function processTip(){
            b1.onRollOver = function() {
                tipInt = setInterval(showTip,100,"This is item01");
            }           
            b1.onRollOut = function() {
                hideTip();
            }           
            b2.onRollOver = function() {
                tipInt = setInterval(showTip,100,"This is item02");
            }           
            b2.onRollOut = function() {
                hideTip();
            }          
}
var count = 0;
function showTip(tiptext){
    if (count == 3){
        clearInterval(tipInt);
        count = 0;
        tooltip.tiptext.text = tiptext;
        tooltip._x = _root._xmouse;
        tooltip._y = _root._ymouse;
        tooltip._visible = true;
        _root.onMouseMove = function(){
            tooltip._x = _root._xmouse;
            tooltip._y = _root._ymouse;
            updateAfterEvent();
        }
    }else{
        count++;
    }
}
function hideTip(){
    clearInterval(tipInt);
    tooltip._visible = false;
    delete _root.onMouseMove;
}

Il codice che a noi interessa è:

b1.onRollOver = function() {
        tipInt = setInterval(showTip,100,"Testo da mostrare");
}           
b1.onRollOut = function() {
         hideTip();
}

Dove "b1" è il nome del movieclip dove dobbiamo mostrare il tooltip

Scarica il sorgente qui 

Condividi su facebook