Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Il pannello di controllo

La grafica del pannello per la gestione del suono.
La grafica del pannello per la gestione del suono.
Link copiato negli appunti

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:

Layer del filmato

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.

Grafica di sfondo

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".

Menu contestuale

Nel pannello che si apre, scegliamo "Export this Symbol", nel campo in alto scriviamo "loop", e premiamo OK.

Pannello Linkage

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.


Ti consigliamo anche