Introduzione
A questo punto, abbiamo terminato la costruzione della pagina principale del sito e delle sezioni esterne. Quello che manca è un ultimo
filmato, da caricare con il loadMovieNum: conterrà il suono di sottofondo, e alcuni pannelli per controllare le opzioni del sito.
Da questo filmato, infatti, potremo settare il sito come pagina principale del browser, o aggiungerlo ai preferiti; potremo cambiare il
cursore del mouse, e modificare parte della grafica; potremo leggere l'ora e la data, e controllare i settaggi principali del suono; utilizzare i tooltip, e chiudere il sito stesso.
Apriamo un nuovo documento Flash, 700x300, 24 fps di frame rate: importiamo dal file flash5.fla il movieclip base, e salviamo con il nome suono.fla
La grafica
Apriamo il documento suono.fla, e creiamo i layer secondo questo schema:
Nel layer "loghi", in alto, inseriamo la scritta Flash5.it e il logo del sito, presenti in libreria (non spiego la costruzione): nel
layer "geometrie" inseriamo la grafica di sfondo, e nel layer "ombra", lo stesso movieclip, modificato in alpha e tinta
tramite il pannello Effect.
Nel layer pulsanti, inseriamo due scritte: "chiudi" e "aiuto", che convertiremo singolarmente in movieclip. Al pulsante
chiudi, associamo:
onClipEvent(load){
colore = new Color(this);
colore.setRGB(0xCCCCCC);
}
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
if(!premuto){
sopra = true;
colore.setRGB( 0x000000 );
}
}else{
sopra = false;
if(!premuto){
colore.setRGB( 0xCCCCCC );
}
}
updateAfterEvent();
}
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
premuto = true;
colore.setRGB( 0xFFCC00 );
}
updateAfterEvent();
}
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
getURL("javascript:window.parent.close()");
}else{
colore.setRGB( 0xCCCCCC );
}
updateAfterEvent();
}
Tutta la prima parte dello script serve a determinare il cambio di colore della scritta in base alla posizione del mouse: sottoposto al
mouseUp, invece, quando avviene sul movieclip (corrispondente dell'on(release) dei pulsanti), abbiamo l'azione che chiuderà la pagina
contenente il filmato.
// al caricamento del movieclip, crea un'istanza
// dell'oggetto Color, associata al movieclip stesso
// e assegna come colore il grigio
onClipEvent(load){
colore = new Color(this);
colore.setRGB(0xCCCCCC);
}
// al movimento del mouse, se il puntatore tocca il
// movieclip
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
// se non stiamo cliccando, setta il colore sul nero
// e la variabile sopra come vera
if(!premuto){
sopra = true;
colore.setRGB( 0x000000 );
}
// altrimenti, se il puntatore non è sul movieclip
// se non abbiamo premuto, ripristina il colore
}else{
sopra = false;
if(!premuto){
colore.setRGB( 0xCCCCCC );
}
}
// aggiorna dopo ogni spostamento del mouse
updateAfterEvent();
}
// al click sul movieclip, setta il colore come
// arancione, e la variabile "premuto" come vera
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
premuto = true;
colore.setRGB( 0xFFCC00 );
}
updateAfterEvent();
}
// al rilascio del tasto sinistro del mouse
onClipEvent(mouseUp){
premuto = false;
// se siamo sul movieclip
if(sopra){
// settiamo il colore sul bianco
colore.setRGB( 0xFFFFFF );
// richiamiamo il javascript che chiude la finestra
getURL("javascript:window.parent.close()");
}else{
colore.setRGB( 0xCCCCCC );
}
updateAfterEvent();
}
Nel layer "quadratini", inseriremo invece tre istanze del movieclip base, di dimensioni 5x5, in alto al centro dello stage, e le
chiameremo rispettivamente quad1, quad2, quad3.
Andiamo al menu File/Import, e importiamo una gif preparata in precedenza, che rappresenta il puntatore del mouse modificato, con il colore
di fondo trasparente. Posizioniamo la gif nel layer "puntatore", e tramite il pulsante F8, la convertiamo nel movieclip
puntatore. Diamo puntatore come nome di istanza, e associamo questo script:
// al caricamento del movieclip
onClipEvent(load){
// rendi il movieclip invisibile
_visible = false;
}
// ad ogni movimento del mouse
onClipEvent (mouseMove) {
// se la variabile "vai" è vera
if(vai){
// assegna al movieclip le coordinate
// del puntatore del mouse
_x = _root._xmouse;
_y = _root._ymouse;
}
// forza un refresh del filmato
updateAfterEvent();
}
Molto semplicemente, questo script determina il trascinamento del puntatore modificato, quando la variabile "vai" è vera: più avanti
vedremo quando lo sarà.
Importiamo nella libreria il suono "In the fly". Pulsante destro sul suono nella libreria, e scegliamo "Linkage".
Nel pannello che si apre, scegliamo "Export this Symbol", nel campo in alto scriviamo "loop", e premiamo OK.
Andiamo ora al primo frame della timeline principale, nel layer "azioni", e scriviamo:
fscommand ("allowscale", "false");
stop();
suono = new Sound(_root);
suono.attachSound("loop");
suono.start(0,999);
riproduzione = true;
In questo modo, stiamo utilizzando l'oggetto Sound per definire un'istanza di suono contenente il nostro loop.
// non scalare il filmato
fscommand ("allowscale", "false");
// ferma la riproduzione su questo frame
stop();
// crea una istanza dell'oggetto Sound, nome di
// istanza "suono", associata alla _root
suono = new Sound(_root);
// a questa istanza attacca il suono linkato come "loop"
suono.attachSound("loop");
// inizia la riproduzione di "suono", per 999 volte
suono.start(0,999);
// setta la variabile riproduzione come vera
riproduzione = true;
Questo è quello che otteniamo.
