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
38 / 44

Partenza contemporanea

I Video di HTML.it