SCOPO
Ingrandire e rimpicciolire un oggetto tramite la rotellina del mouse
STRUMENTI
Metodi Javascript | TCallLabel | mouseWheel | wheelDelta
Questa tecnica funziona solo con Internet Explorer 6 e superiori. Con gli altri browser fallisce silenziosamente.
METODO
Il filmato Flash
Creiamo un nuovo filmato in Flash. Nella timeline principale, posizioniamo il movieclip da ingrandire tramite la rotellina, e assegniamogli "logo" come nome di istanza.
Al frame 10, etichettato come "zoomIn", associamo il seguente script:
this.logo._xscale += Number(zoom);
this.logo._yscale = this.logo._xscale;
Al frame 20, etichettato come "zoomOut", lo script:
this.logo._xscale -= Number(zoom);
this.logo._yscale = this.logo._xscale;
if(this.logo._xscale < 10){
this.logo._xscale = this.logo._yscale = 10;
}
Dalla pagina html, eseguiremo lo script associato a questi due frame senza riprodurli. Lo script del primo aumenta il fattore di scala, verticale e orizzontale, del movieclip logo per un valore pari a quello della variabile zoom convertita in numero.
Lo script del secondo lo dominuisce, sempre del valore pari a zoom: ma se il fattore di scala del movieclip scende sotto il 10% delle dimensioni originali, viene riportato a 10 (in questo modo il movieclip non diventa troppo piccolo, e non subisce il flip verticale e orizzontale quando il fattore di scala scende sotto lo zero).
// aggiungi al fattore di scala orizzontale del movieclip "logo"
// il valore dato dalla variabile "zoom" convertito in numero
this.logo._xscale += Number(zoom);
// assegna al movieclip un fattore di scala verticale pari a
// quello di scala orizzontale
this.logo._yscale = this.logo._xscale;
// aggiungi al fattore di scala orizzontale del movieclip "logo"
// il valore dato dalla variabile "zoom" convertito in numero
this.logo._xscale -= Number(zoom);
// assegna al movieclip un fattore di scala verticale pari a
// quello di scala orizzontale
this.logo._yscale = this.logo._xscale;
// se il fattore di scala è inferiore a 10
if(this.logo._xscale < 10){
// riporta il fattore di scala orizzontale e verticale a 10
this.logo._xscale = this.logo._yscale = 10;
}
Il codice html
Nel codice di incorporamento del filmato, i tag per i metodi Javascript e il richiamo alla funzione setZoom quando viene scrollata la rotellina del mouse con il puntatore sopra il filmato stesso:
<OBJECT
classid="[...]" codebase="[...]"
WIDTH="400"
HEIGHT="300"
ID="mainMovie"
onMouseWheel="setZoom()">
<PARAM NAME=movie VALUE="wheelZoom.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<EMBED
src="wheelZoom.swf"
quality=high bgcolor=#CCCCCC
swLiveConnect="true"
name="mainMovie"
WIDTH="400"
HEIGHT="300"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="[...]">
</EMBED>
</OBJECT>
La funzione Javascript
<script language="JavaScript" type="text/JavaScript">
<!--
function setZoom(){
var IE = navigator.appName.indexOf("Microsoft") != -1;
var filmato = IE ? window.mainMovie : window.document.mainMovie;
filmato.SetVariable("_root.zoom", 100);
if (event.wheelDelta >= 0){
filmato.TCallLabel("_root", "zoomOut");
} else {
filmato.TCallLabel("_root", "zoomIn");
}
}
//-->
</script>
Il SetVariable ci permette di modificare dall'esterno il valore di zoom. In questo caso, quando viene invocata la funzione setZoom, il valore della variabile zoom nella timeline principale diventa pari a 100.
Quindi, a seconda del verso di rotazione della rotellina, viene richiamato lo script nel frame opportuno tramite il TCallLabel.
FILES
