Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 37 di 44
  • livello principiante
Indice lezioni

Zoom con la rotellina del mouse

Modificare il grado di ingrandimento di un movieclip tramite la rotellina del mouse
Modificare il grado di ingrandimento di un movieclip tramite la rotellina del mouse
Link copiato negli appunti

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

visualizza l'esempio | scarica l'esempio

Ti consigliamo anche