Help-Dizionario stile Reference su Testo

Descrizione-traduzione delle parole al passaggio (selezione) del mouse
Completamente Parametrizzabile (colori, testo)
Script leggero e performante (invisibile ma utile)
Possibilità di caricare il dizionario esternamente da db

Argomenti:
Drawing, Selezione, Formattazione Testo differenziata

Impieghi:
qualsiasi sito, gioco o applicazione dove si vuole fornire un valore aggiunto

Size swf: 1 kb

 

Un simpatico e breve tutorial che può ritornare utile in mille occasioni, a dimostrazione di come con Flash MX si possa creare applicazioni omnicompatibili (su tutti i browser e piattaforme), performanti, con poche righe di codice e di grande utilità.
Questo script potrà essere facilmente integrato a qualsiasi applicazione, modificato facilmente nonchè usato singolarmente su qualsiasi testo.
Dare un nome al tutorial è forse il compito più difficile (!), in quanto a seconda dell'utilizzo che si fa potrebbe essere un reference, un dizionario, un help o contenere le istruzioni per un gioco o la traduzione di parole su siti multilingue.
In pratica il funzionamento è questo: al passaggio del mouse (selezione) su porzioni di testo o parole, crea un piccolo riquadro dove possiamo andare a visualizzare la spiegazione della/e parole selezionate.
Poche righe di codice, e delle ottime perfomance (lo script interviene solo al rilascio del mouse, e viene eseguito solo in precise condizioni) permettono dunque di inserirlo ovunque, per dare un valore aggiuntivo (e nascosto) ai nostri testi.

Passiamo dunque alla realizzazione pratica:
Le parole da tradurre, nonchè i loro significati li introdurremo in due Array, naturalmente questi potranno anche essere inseriti su un file esterno o su un database per essere facilmente aggiornati o modificabili (in questo caso useremo il loadVars per il caricamento).

//Array delle parole da tradurre
parole=[ "Omnia", "vincit","amor", "et","nos","cedamus", "amorem", "Virgilio","Omnia", "munda", "mundis","S.Paolo","Omnia munda mundis"];
//Array dei significati
signy=["su tutto, sopra ogni cosa, dal latino rappresenta l'universale", "vince, supera qualsiasi ostacolo e difficoltà","amore: principio cosmico, la forza che armonizza tutte le cose", "congiunzione latina da cui deriva l'italico 'e'","noi, inteso come noi deboli esseri umani","cediamo, ci lasciamo andare, ci abbandoniamo", "all'amore...a tutto ciò che è amore", "Poeta e filosofo Latino, autore di indimenticabili cantici","tutto, ogni cosa, dal latino ","puro, immune da contaminazioni colpevoli o peccaminose","i puri, coloro che sono avvolti dalla purezza", "Apostolo Cristiano, nato il 10 d.C., convertito al Cristianesimo","Tutto è puro per i puri, coloro che vivono nella purezza."];

Adesso creiamo delle variabili che ci permetteranno di modificare facilmente lo script:

var lh=150; var hh=60; // dimensioni dell'help
var tmin=2; var tmax=20; // numero delle lettere selezionate per cui deve intervenire l'help
var Colbg=0x00CCFF; var Collin=0x003399; var slin=2; // colori dell'help e contorno
var Coltxt=0x000000; var fonttxt="Arial"; var sizetxt=9; // testo dell'help, colore e carattere

a questo punto scriviamo la funzione che crea l'help:

MovieClip.prototype.traduct=function(x,y,string){ // funzione che crea l'help
this.createEmptyMovieClip("topic",1);wash="";
with (this.topic)
{
beginFill(Colbg,100);lineStyle( slin, Collin, 100 );
moveTo( x, y-hh );lineTo( x+lh,y-hh);lineTo(x+lh, y-10);lineTo( x, y-10 );lineTo(x,y-hh);
endFill();
}
topic.createTextField("hp",3,x+3,y-hh,lh-6,hh-6);
tf=new TextFormat(fonttxt,sizetxt,Coltxt,0,0,0,"","","left",0,0,0,2);
help=('The topic "'+string+'" was not found in this dictionary.'); // messaggio per help non presente nel dizionario
for (c=0;c<parole.length;c++){
if(parole[c]==string){
wash=parole[c];help=unescape(wash+":"+"%0D"+signy[c]);// messaggio per help presente nel dizionario
tfbold=new TextFormat(fonttxt,sizetxt+2,Coltxt,1,0,1,"","","left",0,0,0,2);
break;
}
};
with(topic.hp){multiline=true;wordWrap=true;text=help;setTextFormat(tf);setTextFormat(0,wash.length,tfbold);};
};

in pratica con questa funzione creiamo col metodo drawing il rettangolo che conterrà l'help, nonchè il testo che dinamicamente verrà creato, sia nel caso che la selezione non comprenda una parola contenuta nel nostro piccolo dizionario, sia che questa sia compresa. In quest'ultimo caso il testo sarà formato dalla parola stessa e dalla sua traduzione, con doppia formattazione nello stile dei Reference.
Adesso creiamo l'oggetto che ci servirà per richiamare la funzione al rilascio del mouse:

dictyo = new Object();
dictyo.onMouseUp = function () {
test=txt.substring(Selection.getBeginIndex(),Selection.getEndIndex());//testo selezionato col mouse
if(testLimits(test)){traduct(xOver(_xmouse),yOver(_ymouse),test);}};// al rilascio del mouse richiamo dell'help
dictyo.onMouseDown=function(){topic.clear();topic.hp.removeTextField();};// cancellazione alla pressione del mouse
Mouse.addListener(dictyo);

e mettiamo un paio di controlli che servono a definire i limiti della selezione ed a posizionare l'help all'interno dello stage nel caso il mouse venga rilasciato al di fuori:

MovieClip.prototype.testLimits=function(test){if((test.length>=tmin)&&(test.length<tmax)){return true;}else{return false;};};
MovieClip.prototype.xOver=function(x){if(x>(Stage.width-x)){return (Stage.width-lh)}else if(x<0){return 0}else {return x}};
MovieClip.prototype.yOver=function(y){if(y>(Stage.height-y)){return (Stage.height-hh)}else if(y<hh){return hh}else {return y}};

Tutto qui !
Nel nostro esempio lo script viene eseguito solo se si andranno a selezionare almeno due caratteri nel campo testo e non più di 20, per evitare che intervenga appunto alla sola pressione del mouse o se si seleziona tutto il testo per copiarlo.
Alla pressione del mouse viene anche cancellato il precedente messaggio, ed al rilascio viene eseguito il controllo del testo selezionato e quindi richiamata la funzione dell'help.
E' possibile ed interessante anche il fatto di poter applicare l'help su più parole, come nel nostro caso sulla frase di S.Paolo.

Scarica il tutorial fla

 

Registrati gratuitamente per ricevere un inedito Actionscript FlashMX a settimana (dal 06/02/2003)