- Learn
- Guida Flash e JavaScript
- Zoom con la rotellina del mouse
Zoom con la rotellina del mouse
- di negatyve
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
Se vuoi aggiornamenti su Zoom con la rotellina del mouse inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Disegnare un angelo da una foto con Photoshop
In questo video vedremo come disegnare un angelo partendo da una qualsiasi fotografia con Photoshop. Questo effetto è particolarmente indicato […]