Comsigli per creare un intero sito in Flash - Ultimi Inserimenti

Introduzione
Prima di iniziare la costruzione di un sito web, è buona cosa stilare un progetto che ne comprenda gli scopi, il tipo di
utilizzo, di aggiornamento, di utenti a cui farà riferimento.
Tralasciando i particolari, trattati diffusamente nei corsi e nelle lezioni per webmaster di HTML.it, mi limiterò ad
analizzare alcuni punti focali, e di immediata comprensione.
Dimensioni e proporzioni
Per motivi che mettiamo da parte (assolutamente inventati), decidiamo che il sito debba avere delle proporzioni
particolari: la larghezza del filmato deve essere i 7/3 dell'altezza. Vogliamo quindi che il sito si espanda in orizzontale
più che in verticale.
Preciso che non esiste una dimensione "giusta", anche se di solito i filmati in flash vengono inseriti in una pagina html
in modo che non ci sia la necessità di usare le barre di scorrimento, per visualizzarli interamente, a scelta del designer
un filmato potrebbe essere anche 200x800. Le dimensioni e le proporzioni del progetto sono così discrezionali, che a
volte possono essere dettate esclusivamente dal gusto.
Inoltre, non vogliamo che il filmato venga visualizzato nella finestra principale del browser, bensì in una finestra
secondaria, aperta come popup tramite javascript. Questo ci permetterà di aggiungere alcuni attributi, come la costanza
delle proporzioni e dimensioni in caso di ridimensionamento, e un certo controllo sulla posizione rispetto alle altre
finestre.
Infine, dal momento che vogliamo che le dimensioni siano costanti (così da essere sicuri di cosa vedrà l'utente), per non
affaticare gli occhi di chi usa una risoluzione come 1600x1200, o "uscire dal monitor" di chi naviga a 640x480,
ridimensioneremo automaticamente il filmato a seconda dei casi.
Requisiti di sistema
Plugin
È dato di fatto che i browser più recenti vengano rilasciati con il plugin per il Flash5 già installato: altrettanto certo però
è che moltissime persone, per le ragioni più disparate, utilizzino ancora browser datati, con il plugin assente o capace di
supportare solo versioni inferiori alla 5.
Per questo motivo, bisogna prendere in considerazione la maggior parte, se non l'interezza, dei casi possibili, ed
eventualmente lasciare all'utente una certa discrezionalità sulle scelte da fare.
Offriremo quindi all'utente, approdato alla pagina iniziale del nostro sito, tre diverse opzioni:
1. la possibilità di scaricare il plugin aggiornato (tramite un collegamento alla pagina di download del sito della
Macromedia);
2. la possibilità di visualizzare il sito in versione html (qualora non potesse scaricare il plugin, come ad esempio
nelle aule computer delle scuole o dei campus universitari);

3. la possibilità di visualizzare la versione in Flash.
Qualora l'utente scelga di visualizzare la versione in flash, una pagina di controllo verificherà la presenza effettiva del
plugin. In caso sia presente, aprirà la pagina in flash, altrimenti offrirà nuovamente più scelte, compresa quella di
procedere comunque (il controllo sul plugin non è sicuro al 100%).
Processore
Per questo sito prediligeremo un funzionamento veloce e fluido alla presenza di grandi effetti grafici. Quindi eviteremo
il più possibile l'uso di gradienti, di animazioni frame a frame, di effetti alpha, di immagini e suoni.
Inoltre, per poter rendere i movimenti più scattanti, alzeremo il frame rate, dal valore di default di 12 frame al secondo,
a quello di 24 frame al secondo: questo potrebbe rendere il filmato meno gestibile per le CPU più lente, ma mescolando
con un po' di attenzione leggerezza e velocità, riusciremo ad ottenere un prodotto largamente compatibile.
Banda
Per quanto riguarda la velocità di scaricamento a disposizione dell'utente finale, ci sono tre metodi fondamentali volti a
rendere le attese le più brevi possibile. L'uso di suoni in streaming, l'uso delle librerie condivise, e l'ottimizzazione del
filmato.
In questo caso non utilizzeremo le prime due: il suono in streaming non si presta ai loop (ogni ripetizione costa in
termini di peso), e non ci consente di controllarne il volume, le librerie condivise invece sono ben lungi dall'essere
efficaci, sopratutto perché agli oggetti condivisi non possono essere applicati script, se non nella libreria stessa.
Quello che faremo allora sarà ottimizzare il filmato, con tutti i metodi che abbiamo a disposizione. Il che significa:
• riduzione dei gradienti a favore di colori solidi
• riduzione o eliminazione delle animazioni frame a frame, a favore dell'uso di script
• utilizzo diffuso di simboli presenti nella libreria del filmato, sotto forma di istanza
• utilizzo di pochi suoni e di poche immagini importate, e comunque di ridotta qualità
• utilizzo di poche Font, e dei caratteri dispositivo
• divisione del filmato in porzioni indipendenti
Per divisione del filmato, intendo dire questo: avremo un filmato principale, contenente il menu di navigazione, e vari
filmati esterni da caricare solo su richiesta dell'utente. In questo modo, l'attesa per vedere la schermata principale sarà
ridotta all'osso, e l'utente deciderà quanto e cosa aspettare.
Filmato introduttivo
Il nostro sito sarà sì dotato di un filmato introduttivo, però da visualizzare solo alla prima visita. Le volte successive,
l'intro dovrà essere saltata a piè pari, per non annoiare inutilmente l'utente. Questo lo otterremo direttamente da Flash,
senza l'utilizzo di metodi javascript o la scrittura di cookies.
Inoltre, tutti i preloader presenti in tutti i filmati saranno fatti in modo da non essere visibili ai caricamenti successivi al
primo.
Sezioni indipendenti

Come già accennato, il sito sarà diviso in sezioni indipendenti, per ridurre i tempi d'attesa: in queste sezioni spiegherò
diverse tecniche molto richieste. Naturalmente i metodi utilizzati non sono gli unici possibili, e a seconda dei casi ce ne
possono essere di migliori o più efficaci: l'importante è studiare il sistema che più si adatta alle nostre necessità.
Spiegherò quindi come creare diversi scrolling di testo, di cui uno con uno scroller oltre ai pulsanti, la creazione di
finestre trascinabili, due differenti slide di immagini, l'invio di messaggi tramite il client di posta (nessun linguaggio
esterno), l'interazione con il browser, il controllo del suono.
Accorgimenti vari
Oltre alle cose già accennate, ce ne sono altre che cito qui senza ordine di importanza.
Una delle cose che vogliamo, è controllo del suono di sottofondo. Non ci limiteremo a creare un pulsante per fermare e
uno per avviare il suono, ma anche un controllo per il volume, in due sistemi differenti.
L'interazione con il browser si basa fondamentalmente nel richiamo di funzioni javascript, di solito inserite nella pagina
html che incorpora il filmato. In questo caso, invece, richiameremo funzioni raccolte in un file .js, in modo da
mantenere il codice il più pulito possibile.
Daremo all'utente la possibilità di decidere sull'utilizzo di un cursore personalizzato, e di un piccolo effetto grafico di
contorno. Permetteremo inoltre la stampa in vettoriale di una pagina composta da scritte e immagini, non visibile sullo
stage.
Altro piccolo accorgimento molto apprezzato, è quello di ridurre al minimo l'utilizzo di pulsanti, sostituendoli con
movieclip. Questo per eliminare la tanto sgradita manina che si forma al passaggio su un pulsante: infatti la
comprensione della presenza di un'area cliccabile, può essere indotta semplicemente tramite effetti definibili di
"rollover". Naturalmente questo accorgimento diventa inutile nel caso dell'uso di puntatori personalizzati.
Disegno del filmato di base
Rettangolo e cornice
Prima di passare alla spiegazione della grafica di base, descriviamo la composizione di un oggetto che useremo più
volte all'interno dei nostri filmati: un semplice rettangolo con cornice.
Il rettangolo sarà formato chiaramente da un riempimento solido di forma rettangolare, mentre la cornice sarà composta
dal contorni del rettangolo stesso, con i lati di colore differente. Il disegno finale sarà questo:
Come salta immediatamente all'occhio, questa figura dà un naturale senso di profondità: quello che sembra di guardare,
è un piano con un'area leggermente depressa, illuminato da sinistra in alto. Naturalmente, uniformando il colore della
cornice, si può eliminare il senso di profondità, oppure, invertendone i colori, creare un senso di rilievo.

Partendo da questa figura, e servendoci dell'Actionscript, o del pannello Effetti, possiamo modificarne a piacere
posizione, dimensioni, colore, trasparenza, comportamento. Quindi, nella sua interezza, o nelle parti che la compongono,
ci servirà a creare tutte le figure a quattro lati che dovremo usare.
Costruzione
Procediamo allora alla costruzione del filmato di base di e di questa figura. Apriamo il Flash con un nuovo documento,
e andiamo al menu Modifica/Filmato (Modify/Movie):
Nel pannello impostiamo quelle che saranno le dimensioni del filmato di base (e di tutti quelli esterni), cioè 700 pixel in
larghezza e 300 pixel in altezza. Il colore di fondo sarà il bianco, codice RGB #FFFFFF, e il Frame Rate 24 fps.
Apro qui una piccola parentesi: se il filmato principale ha un frame rate di 24 fps, i filmati esterni caricati sopra questo,
sia con il loadMovie che con il loadMovieNum, prenderanno lo stesso frame rate, qualunque sia quello originale, e
verranno riprodotti a 24 fps. La cosa migliore da fare, allora, quando si hanno filmati con frame rate differente, è di
affidare al principale quello più elevato, e di rallentare eventualmente le altre animazioni tramite Actionscript.
Fatte queste considerazioni, sembrerebbe che, una volta impostato il frame rate del filmato principale, non ci sia più la
necessità di impostare quello degli altri filmati, poiché tutti assumono la stessa velocità, in riproduzione. D'altronde è
preferibile impostare questo valore comunque, per poter, nella modalità Prova Filmato, vedere quello che sarà
effettivamente l'andamento delle animazioni.
Salviamo quindi il filmato con il nome flash5.fla
Apriamo nuovamente il filmato, e apriamo la libreria: premendo il pulsante + aggiungiamo un movieclip (clip filmato),
e chiamiamolo base.
Adesso disegniamo all'interno di questo movieclip il rettangolo di base. Dal momento che una linea ingrandita può
variare visibilmente come dimensioni, mentre, rimpicciolendola, non può diventare più sottile del tratto "hairline",
questa sarà l'impostazione da dargli: allo stesso modo è preferibile che il rettangolo sia di dimensioni elevate, da
rimpicciolire poi, e non il contrario.
Selezioniamo lo strumento rettangolo, tracciamo una figura delle stesse dimensioni del filmato principale (700x300)
con contorno nero e riempimento grigio (#cccccc), e centriamola nel movieclip. Tagliamo il contorno e incolliamolo su

un nuovo livello, superiore a quello del riempimento. Selezioniamo il lato inferiore e il lato destro, e coloriamoli di
bianco, così da ottenere la figura d'inizio lezione.
A questo punto convertiamo la cornice in movieclip: chiameremo il movieclip cornice, e cornice sarà anche il nome di
istanza.Selezioniamo la cornice, e apriamo il pannello Istanza (Istance Ctrl+I): nel campo Istance inseriamo il nome.
Stessa identica procedura per il riempimento. Lo convertiamo, tramite il pulsante F8, in un movieclip che chiameremo
rettangolo, e che avrà rettangolo come nome di istanza.
A questo punto abbiamo nella libreria il movieclip base: questo movieclip sarà composto da due livelli. In uno c'è la
cornice, con nome di istanza cornice, e nell'altro c'è il rettangolo, nome di istanza rettangolo.
Sullo stage
Trasciniamo dalla libreria un'istanza del movieclip "rettangolo" sull'area di lavoro, diamo come dimensioni 700x80,
tramite il pannello Info, e posizionandola in alto al centro dello stage.
Selezioniamo nuovamente lo strumento rettangolo, e disegniamo una figura di dimensioni 700x150 sotto il primo
rettangolo. Selezioniamo il pannello Fill, e cambiamo il riempimento dando un gradiente che va dal colore #333333 al
colore #686868. Questo è quello che otteniamo.

Linee
Disegniamo in un nuovo livello una linea di colore bianco, lunga quanto lo stage: come stile scegliamo i puntini, e poi
convertiamo in movieclip. Posizioniamo più istanze della linea a varie altezze, facendo attenzione a non esagerare, dal
momento che le linee "dotted" pesano moltissimo e affaticano non poco la cpu. Trattandosi di movieclip, possiamo
modificarne il colore tramite il pannello Effect, scegliendo Tinta dal menu a discesa.
A questo punto come elemento decorativo finale della base inseriamo il logo del Flash, di colore grigio, al centro dello
stage, in modo che crei senza ulteriore aggiunte un gradevole effetto sfumato sul gradiente precedentemente inserito.
Altri elementi grafici verranno inseriti più avanti, in un altro filmato. Quest'ultimo, che verrà caricato sopra tutti gli altri,
con i propri oggetti creerà ombra e coprirà gli elementi degli altri livelli, dando un naturale effetto di profondità.
Il menu principale
Premessa
Partiamo da un assunto. Il sito sarà composto da vari filmati esterni, come già detto. Uno verrà caricato all'avvio sopra il
principale, e altri cinque formeranno le varie sezioni, oltre a quella che si presenta all'utente quando accede al sito. Il
menu sarà quindi composto da 6 pulsanti, cinque per i filmati esterni, e uno per l'homepage.
Il pulsante
Costruiamo il menu partendo dal singolo pulsante. I colori attorno ai quali abbiamo deciso di imperniare la grafica del
sito, sono il giallo, il bianco, e varie sfumature di grigio. Abbiamo deciso di posizionare il menu nella parte bassa del
filmato, cioè sulla banda bianca sotto il gradiente centrale. E i nostri pulsanti saranno gialli.
Premendo il segno + in basso a sinistra della libreria, aggiungiamo un movieclip, che chiameremo pulsanteDentro.
Editiamo questo movieclip: nel livello più in basso posizioneremo, trascinandola dalla libreria, un'istanza del movieclip
rettangolo, quello che avevamo costruito per creare la figura di base. Riduciamo le dimensioni a un rettangolo di 65x10
di lato. Posizioniamo il rettangolo al centro del movieclip, apriamo il pannello Effetti, scegliamo Tinta dal menu, e a
destra inseriamo i valori del giallo (#FFCC33 oppure 255 204 51).

Aggiungiamo, con F6, un keyframe (fotogramma chiave) al frame numero 11, e un altro al numero 22. Selezioniamo il
rettangolo del frame 11, e tramite il pannello Effetti, tingiamo l'oggetto di bianco: quindi creiamo un motion tween
(interpolazione di movimento) dal frame 1 al frame 11, e dal 12 al 22.
Aggiungiamo ora un'altro layer, nel cui primo frame inseriamo un'istanza del movieclip cornice. Dal pannello Effetti
tingiamo la cornice di nero, in modo da eliminare i due lati bianchi, ed allunghiamo il layer, tramite F5, fino alla fine
del movieclip (frame 22). Infine, in un altro layer, inseriamo al frame 1 e al frame 11, due stop();
Il risultato finale è il movieclip pulsanteDentro, contenente tre livelli. Nel primo dal basso, il rettangolo, con il motion
tween, nel secondo la cornice, nel terzo le azioni.
Prima di vedere il codice da associare al movieclip, vediamo una parte che utilizzeremo molte volte, e che ci permette
di capire se siamo o no sul movieclip (e quindi di renderlo assimilabile ad un pulsante).
Se associamo ad un movieclip:
if(this.hitTest(_root._xmouse,_root._ymouse,false))
diciamo: se questo movieclip (this) entra in collisione con le coordinate del puntatore del mouse rispetto al
sistema di riferimento della timeline principale, allora.....
Supponendo che il movieclip stia fermo, e che sia il mouse a muoversi, stiamo dicendo: se il mouse tocca il movieclip,
allora...
Partendo da questo codice possiamo emulare su un movieclip tutti gli eventi dei pulsanti: con il vantaggio di non avere
la manina. Ultima considerazione: scrivere true o false alla fine di quel codice, rende le due cose molto differenti.
Citando dal manuale, "..specifica se valutare per l'intera forma dell'istanza specificata (true) oppure solo il riquadro di
limitazione (false). Se la figura è un quadrato, la cosa non fa differenza, dal momento che la forma e il riquadro di
limitazione coincidono, ma se la figura ad esempio è un cerchio, le cose cambiano...

Torniamo a pulsanteDentro. Trasciniamo un'istanza di questo movieclip sullo stage: gli associamo il seguente script:
onClipEvent (mouseMove) {
if (this.hitTest(_root._xmouse, _root._ymouse, false) && !aperto) {
if (_currentframe>(_totalframes/2)) {
gotoAndPlay (_totalframes-_currentframe);
} else {
play ();
}
aperto = true;
} else if (!this.hitTest(_root._xmouse, _root._ymouse, false) && aperto) {
if (_currentFrame(_totalframes/2)) {
// riproduci il movieclip a partire dal frame corrispondente al
// numero dei frame totali meno il frame attuale
gotoAndPlay (_totalframes-_currentframe);
// altrimenti (e quindi il frame corrente è minore della metà)
} else {
// riproduci dal frame corrente
play ();

}
// setta la variabile "aperto" come vera
aperto = true;
// altrimenti, se il movieclip non tocca il mouse e "aperto" è vera
// (e quindi con il mouse sto "uscendo" dal movieclip)
} else if (!this.hitTest(_root._xmouse, _root._ymouse, false) && aperto) {
// se il frame attuale è minore della metà dei totali
if (_currentFrame

onClipEvent (mouseMove) {
if (!premuto) {
if (this.hitTest(_root._xmouse, _root._ymouse, false) && !aperto) {
if (_currentframe>(_totalframes/2)) {
gotoAndPlay(_totalframes-_currentframe);
} else {
play ();
}
aperto = true;
} else if (!this.hitTest(_root._xmouse, _root._ymouse, false) && aperto) {
if (_currentFrame

Adesso abbiamo sullo stage 6 istanze del movieclip pulsanteFuori, con 6 diversi nomi di istanza. Ricordiamo che le sei
istanza contengono il movieclip pulsanteDentro, nome di istanza interno, a cui è associato lo script: questo è possibile
perché lo script è universale, e per diventare relativo ad azioni differenti, fa riferimento al nome di istanza del movieclip
che lo contiene. E questa è l'unica cosa che cambia da un movieclip all'altro.
Selezioniamo ora tutti e sei i movieclip, e convertiamoli ancora in un movieclip, che chiameremo menu, e che avrà
menu come nome di istanza. Editiamo il movieclip menu: in un layer ci sono i 6 movieclip pulsanteFuori.
Aggiungiamo un layer, e scriviamoci, corrispondendo ai vari pulsanti, i nomi delle 6 differenti sezioni. Quello che
otteniamo è questo:
La funzione
Adesso non rimane che definire la funzione che permetterà al menu di fare qualcosa. Come abbiamo già detto, la
pressione di uno dei pulsanti, richiamerà una funzione che si chiama comandi, alla quale come variabile viene inviato il
nome di istanza del movieclip PulsanteFuori che contiene il pulsante. In pratica, se premo sul movieclip "homepage",
alla root arriverà il comando:
comandi("home");
L'aver usato una funzione, ci permette di non dover più toccare i pulsanti, per cambiare le azioni corrispondenti: basterà
modificare la funzione per rispondere alle nostre esigenze.
Selezioniamo il primo frame del filmato sulla timeline principale, e apriamo il pannello Azioni: scriviamo il seguente
codice
function comandi (nome) {
loadMovieNum (nome + ".swf", 1);
}
Molto semplicemente la funzione riceve come parametro il nome di istanza del movieclip che contiene il pulsante, e
assegna questo parametro alla variabile nome. Quindi carica un filmato esterno, sul livello 1, che si chiama come la
variabile più la stringa ".swf": in parole povere, se clicco il pulsante dentro il movieclip slide, la funzione carica sul
livello 1 il filmato slide.swf.
D'altronde, premendo più volte lo stesso pulsante, caricheremmo altrettante volte lo stesso filmato: effetto decisamente
sgradevole, e oltretutto non innocuo. Se infatti stiamo utilizzando il filmato esterno, e lo carichiamo di nuovo, perdiamo
tutte le variabili e le impostazioni raggiunte a quel momento.
Inseriamo quindi un semplice controllo sul nome della variabile. Se è la stessa, allora non caricare di nuovo: o meglio,
carica solo se è diversa dall'ultima impostata. Inoltre, dobbiamo inserire un nome di partenza: quello della homepage, in
modo che all'avvio del filmato, sia come se avessimo premuto il pulsante "homepage".
ultimo = "home";
function comandi (nome) {
if (nome != ultimo) {
loadMovieNum (nome + ".swf", 1);
}
ultimo = nome;
}

In questo modo con la prima riga abbiamo impostato il valore della variabile ultimo, che conterrà il nome dell'ultimo
pulsante premuto. Al richiamo della variabile, avviene un confronto tra ultimo e nome: se sono diversi, viene caricato il
filmato esterno corrispondente, e il valore di ultimo diventa quello di nome.
Adesso però abbiamo un problema: premendo home, non abbiamo alcun filmato da caricare, dal momento che home
corrisponde al filmato principale. Allora, una volta verificato che ultimo sia diverso da nome, se il pulsante premuto è
home, allora scarichiamo il livello 1, altrimenti carichiamo il filmato esterno corrispondente.
ultimo = "home";
function comandi (nome) {
if (nome != ultimo) {
if (nome == "home") {
unloadMovieNum (1);
} else {
loadMovieNum (nome+".swf", 1);
}
ultimo = nome;
}
}
Fin qui ci siamo. Ora dobbiamo tornare al fatto che, una volta premuto un pulsante, questo si ferma al frame 11, in
modo che sia completamente bianco, ed escludendo le animazioni di rollover e rollout. Quindi, quando premiamo un
pulsante, quello premuto precedentemente, fisso sul bianco, deve tornare gradualmente al giallo. Inoltre, come per la
variabile ultimo, già impostata all'avvio del filmato, dobbiamo impostare il pulsante homepage come se fosse già stato
premuto.
Per questo motivo, ricapitolo come raggiungere i pulsanti contenuti nel movieclip menu. Sullo stage abbiamo il
movieclip menu con nome di istanza menu: questo contiene i sei movieclip pulsanteFuori, con i nomi di istanza riferiti
alle sezioni. Dentro ognuno di questo movieclip, c'è il movieclip pulsanteDentro, nome di istanza interno, all'interno
del quale si svolge l'animazione di rollover. Ad ognuno dei movieclip pulsanteDentro, è associato lo script per
l'animazione, e anche il controllo sulla pressione del movieclip stesso.
Come abbiamo già visto, il movieclip è fermo al frame 11, e bloccato dalla variabile premuto, che è vera. Dobbiamo
quindi, alla pressione di un nuovo pulsante, riprendere la riproduzione dell'animazione del pulsante premuto
precedentemente, e far tornare falsa la variabile premuto.
Se ad esempio l'ultimo pulsante premuto era home, e vogliamo ripristinarlo, il percorso che ci interessa sarà:
menu.home.interno
per avviare la riproduzione useremo:
menu.home.interno.play();
per resettare la variabile:
menu.home.interno.premuto = false;

Inoltre useremo una particolare notazione: movieclip[variabile].comando
Questo significa che, avendo una variabile che contiene il nome di un movieclip, possiamo utilizzarla per completare il
percorso. Se il valore di ultimo è "home", la scrittura
menu[ultimo].interno.premuto = false;
corrisponderà a:
menu.home.interno.premuto = false;
ultimo = "home";
menu[ultimo].interno.premuto = true;
menu[ultimo].interno.gotoAndStop(11);
function comandi (nome) {
if (nome != ultimo) {
if (nome == "home") {
unloadMovieNum (1);
} else {
loadMovieNum (nome + ".swf", 1);
}
menu[ultimo].interno.premuto = false;
menu[ultimo].interno.play();
ultimo = nome;
}
}
Nel dettaglio:
// settiamo come ultimo "home" (è come se avessimo
// premuto "home" all'avvio)
ultimo = "home";
// blocchiamo il rollover del pulsante "home"
menu[ultimo].interno.premuto = true;
// mandiamo il movieclip "home" al frame 11
menu[ultimo].interno.gotoAndStop(11);
function comandi (nome) {
if (nome != ultimo) {
if (nome == "home") {
unloadMovieNum (1);
} else {
loadMovieNum (nome + ".swf", 1);
}
// resettiamo la variabile "premuto" del pulsante
// attivato precedentemente
menu[ultimo].interno.premuto = false;
// riavviamone la riproduzione

menu[ultimo].interno.play();
ultimo = nome;
}
}
Lo scrolling
Introduzione
Siamo ancora all'interno del primo filmato, e quello che stiamo per creare è un primo metodo per lo scorrimento del
testo. Il nostro scopo di poter visualizzare, all'apertura del sito, un testo che rappresenti le novità e gli aggiornamenti in
relazione alle attività svolte, e la possibilità di scorrerlo tramite pulsanti.
Perché questo progetto sia efficace, vogliamo anche che sia facilmente aggiornabile: il che significa che quando avremo
la necessità di modificare il testo, non dovremo più toccare il filmato, ma limitarci a rendere disponibile un file da cui
prendere il testo aggiornato.
Il loadVariables
Le variabili
Innanzitutto, spieghiamo come funziona il sistema del caricamento del testo. Il Flash5, tramite il comando
loadVariables, ci permette di caricare, all'interno del filmato, le variabili contenute nel file oggetto dell'azione. Questo
file può essere di vario tipo, un .php, .asp, un .pl: nel nostro caso sarà un comunissimo file di testo con estensione .txt.
La cosa che comunque rimane invariata, nell'utilizzo di questi diversi file, il modo in cui devono essere presentate le
variabili:
&variabile1=valore1&variabile2=valore2&variabile3=valore3 &...
Come è evidente, le variabili vengono scritte una dopo l'altra secondo uno schema fisso. La "e" commerciale, il nome
della prima variabile, il segno uguale e il suo valore: e qui finisce la dichiarazione della prima variabile. Le altre
variabili vengono dopo secondo lo stesso schema: variabili divise dalla "&", e nomi e valori uniti dal "=".
Se vogliamo quindi che nel nostro filmato, una volta effettuato il caricamento, sia presente la variabile pippo il cui
contenuto è la stringa "flasher incallito", nel nostro file di testo scriveremo semplicemente:
&pippo=flasher incallito
Due appunti fondamentali. Le stringhe che rappresentano il contenuto delle variabili, possono, naturalmente, contenere
degli spazi, ma tra il nome della variabile, il segno "=" e il primo carattere della stringa, di spazi non ce ne devono
essere.
Secondo appunto, tutte le variabili caricate in questo modo, per il plugin del Flash, sono stringhe, anche se contengono
esclusivamente numeri. Quindi, se nel file di testo scriviamo:
&pippo=123456
in Flash otteremo il corrispondente di un:
pippo = "123456";

e non di un
pippo = 123456;
Se allora volessimo caricare in Flash la variabile numerica pippo, per poterla trattare, nell'ambiente di lavoro
scriveremmo:
pippo = Number(pippo);
Nel nostro caso, visto che non abbiamo bisogno di valutare variabili numeriche, il file di testo, che si chiamerà news.txt,
sarà scritto così:
&news=bla bla bla contenuto degli aggiornamenti bla bla bla....
La sintassi
Vediamo quali sintassi usare, e distinguiamo due comandi a seconda del target del caricamento.Se ad esempio vogliamo
che la nostra variabile testo abbia valore a livello della _root, la sintassi sarà:
loadVariablesNum("news.txt", 0);
In questo modo, è come se avessimo scritto:
_root.news = "bla bla bla contenuto degli aggiornamenti bla bla bla....";
Invece, se vogliamo che la variabile venga caricata all'interno di un movieclip, potremo associare al movieclip stesso :
loadVariables("news.txt", this);
dove this indica al player che il file di testo deve essere caricato nel movieclip che chiama il loadVariables. Se il
movieclip in questione ha come nome di istanza scorrimento, è come se avessimo scritto:
_root.scorrimento.news = "bla bla bla contenuto degli aggiornamenti bla bla bla....";
Questo è esattamente quello che faremo: caricheremo il file di testo e le variabili in esso contenute, all'interno di un
movieclip. Questo ci serve per poter effettuare un controllo molto particolare: quello dell'avvenuto caricamento delle
variabili.
Uno degli eventi propri dei movieclip, in Flash 5, è il data. Sottoponendo un comando a questo evento, verrà eseguito
solo quando le variabili saranno state caricate. Quindi al nostro movieclip assoceremo:
onClipEvent(load) {
loadVariables ("news.txt", this);
}
onClipEvent (data) {
...comando...
}
Il nostro scopo è, all'apertura del sito, di chiamare il caricamento delle variabili. Quando, e solo quando le variabili
saranno state caricate, visualizzeremo gli strumenti per lo scorrimento, testo e pulsanti.

Il movieclip
Il campo di testo
Apriamo il file flash5.fla, e visualizziamo la libreria.
Premiamo il pulsante con il simbolo + in basso a sinistra, e aggiungiamo un movieclip che chiameremo news.
Dentro questo movieclip creiamo tre layer di due frame ciascuno, dal basso verso l'alto con i nomi testo, titolo e
pulsanti
Nel layer "titolo", mettiamo in entrambi i frame (basta nel primo, e poi creare il secondo con F5), un campo di testo con
la scritta "ultime novità": poi, tramite il pannello Align, posizioniamo il campo di testo con il vertice superiore sinistro
al centro del movieclip.
Nel layer "testo", invece posizioniamo un movieclip composto da due frame: nel primo ci sarà la scritta "caricamento in
corso...", il secondo sarà vuoto. Questo ci darà una scritta lampeggiante nell'attesa del caricamento.
Passiamo al secondo frame del layer testo: selezioniamo lo strumento Text, dal pannello Text Options lo settiamo come

dinamico e multilinea, e disegniamo il campo di testo in cui visualizzeremo il contenuto del file esterno. Selezioniamo il
campo di testo, e ancora nel pannello Options ne settiamo tutte le proprietà:
Il Font usato sarà il _sans. In questo modo non avremo bisogno di incorporare alcun carattere, dal momento che il
player ne conserva già le informazioni. Le dimensioni saranno 10pt, e il colore bianco (per contrastare la banda di
colore scuro al centro del filmato). Come abbiamo già detto, il testo sarà dinamico e multilinea: ticchiamo anche la
casella HTML (ci permetterà di usare alcuni tag html nel testo) e Word Wrap (manderà automaticamente a capo il
testo alla fine della casella). Infine, come variabile associamo news: infatti questa è la variabile che abbiamo definito
nel file di testo.
Torniamo alla timeline principale, e dalla libreria trasciniamo un'istanza del movieclip news sullo stage. La
posizioniamo al centro verso destra, e gli associamo:
onClipEvent (load) {
stop ();
loadVariables ("news.txt", this);
}
onClipEvent (data) {
nextFrame ();
}
Il funzionamento è già molto chiaro: all'avvio del filmato, il movieclip news si fermerà al primo frame (caricamento) e
caricherà il file news.txt. Quando il file sarà stato caricato e le variabili saranno definite, il movieclip si sposterà al
secondo frame, dove è presente la casella di testo che conterrà gli aggiornamenti.
Ora andiamo al secondo frame del layer "pulsanti" (il primo resterà vuoto), e disegniamo in alto a destra i pulsanti per
lo scorrimento.
I pulsanti
Come previsto nel nostro progetto, vogliamo evitare il più possibile l'utilizzo di pulsanti veri e propri, sostituendoli con
movieclip: questo passaggio ci è utile anche per un altro motivo, evitare l'uso di un ulteriore movieclip per rendere lo
scorrimento continuo.

(Parto dal presupposto che chi legge conosca già le basi dello scrolling di testo in Flash5, e il significato delle proprietà
scroll e maxscroll.
Abbiamo un campo di testo dinamico che contiene un testo più lungo di quanto possa visualizzare. Per questo motivo
dobbiamo essere in grado di variare la proprietà scroll del campo di testo, che ci indica il numero della riga visualizzata
in alto. In questo caso la proprietà maxscroll non ci serve, perché lo scorrimento si ferma automaticamente all'inizio e
alla fine del testo.
Il comando per scorrere verso l'alto, se dato al livello della timeline principale del movieclip news, sarà:
news.scroll = news.scroll - 1; oppure, in forma abbreviata: news.scroll

secondo quanto sono i frame al secondo del frame rate.
Lo script del movieclip per scorrere verso il basso è perfettamente identico, tranne che per una riga: dove in uno c'è
_parent.news.scroll-- metteremo_parent.news.scroll++
Ultimo accorgimento, metteremo un cambio di colore del movieclip alla pressione sulla freccia.
onClipEvent (load) {
colore = new Color(this);
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
colore.setRGB( 0xFFFFFF );
premuto = true;
}
}
onClipEvent (mouseUp) {
colore.setRGB( 0xFFCC33 );
premuto = false;
}
onClipEvent (enterFrame) {
if (premuto) {
_parent.news.scroll--;
}
}
Al caricamento del movieclip creiamo una istanza dell'oggetto color legata al movieclip stesso. Quando clicchiamo sul
movieclip, il colore diventerà bianco, quando (ne settiamo il valore RGB su FFFFFF), e quando rilasciamo il tasto, il
colore diventerà il giallo precedentemente impostato. Lo stesso vale per entrambe le frecce.
Se adesso lanciamo il nostro filmato, questo è quello che possiamo vedere.
Funzione del menu
Prima di concludere, dobbiamo riprendere in mano la funzione del menu. Infatti, quando caricheremo i filmati esterni,
dovremo rendere invisibile lo scrolling, per farlo riapparire quando clicchiamo sul tasto "homepage". I cambiamenti da
fare sono minimi:
function comandi (nome) {
if (nome != ultimo) {
if (nome == "home") {
news._visible = 1;
unloadMovieNum (1);
} else {
loadMovieNum ("filmati/" + nome + ".swf", 1);
news._visible = 0;
}

menu[ultimo].interno.premuto = false;
menu[ultimo].interno.play();
clip._x = -50;
clip._alpha = 30;
clip.tempo = getTimer();
ultimo = nome;
}
}
Come impostare i tag
In Flash, è possibile utilizzare alcuni dei tag html all'interno di campi di testo dinamici opportunamente impostati.
Come abbiamo già visto, il campo di testo in cui visualizzare gli aggiornamenti del nostro sito, era così settato:
Nella figura di destra, è ticcata la casella HTML: ed è tutto ciò che ci serve.
I tag HTML
I tag che si possono utilizzare non sono tantissimi, ma bastano e avanzano per i nostri scopi. A parte i tag e
(che funzionano anche in relazione alle dimensioni dei caratteri usati), possiamo usare il per mandare a capo, il
per i colori, le dimensioni, e le Font vere e proprie, l' per i collegamenti cliccabili.
Considerato che il nostro file di testo ha questo formato:
news=...................................
vediamo cosa possiamo scrivere al posto dei puntini.
Se il nostro testo recita così:
"Il capitolo 7 di questo manuale, "Dizionario di ActionScript", contiene una descrizione dettagliata per ogni elemento di
ActionScript."
e al posto dei puntini mettiamo:

Il capitolo 7 di questo manuale, "Dizionario di ActionScript", contiene una descrizione
dettagliata per ogni elemento di ActionScript.
come output otteniamo nel campo di testo:
Il capitolo 7 di questo manuale, "Dizionario di ActionScript", contiene una descrizione dettagliata per ogni elemento di
ActionScript.
Se aggiungiamo anche un , da:
Il capitolo 7 di questo manuale, "Dizionario di ActionScript",contiene una descrizione
dettagliata per ogni elemento di ActionScript.
otteniamo:
Il capitolo 7 di questo manuale, "Dizionario di ActionScript",
contiene una descrizione dettagliata per ogni elemento di ActionScript.
Con il tag impostiamo le caratteristiche dei caratteri, con le dimensioni in punti. Le parole "Dizionario di
Actionscript", con le opportune modifiche, da:
Dizionario di Actionscript
nel file di testo, in output diventano:
Dizionario di Actionscript
Con invece colleghiamo le parole ad un link da aprire in una pagina esterna:
Flash-MX.it - Risorse italiane su Flash
diventa
Flash-MX.it - risorse italiane su flash
Accorgimenti particolari
• Mandando a capo con Invio, in un file di testo, nell'output otteniamo l'equivalente di un doppio , cioè a capo con
riga vuota in mezzo. Questo però vale solo per alcuni browser, e su alcune piattaforme: per evitare quindi problemi di
qualsiasi tipo, è meglio scrivere il file di testo senza andare mai a capo con Invio, usando invece solo il .
• Cambiando le dimensioni dei caratteri all'interno di uno stesso campo di testo, talvolta si hanno delle spiacevoli
ripercussioni a livello delle righe. Se infatti tariamo le dimensioni del campo per contenere un numero intero di righe, e
poi ingrandiamo una riga con il tag , l'ultima potrebbe risultare tagliata a metà.
• Non tutti i caratteri possono essere importati scrivendoli semplicemente nel campo di testo. Ad esempio, non posso
scrivere:
testo=Flash & Actionscript;
dal momento che la e commerciale, "&", ha come significato la divisione delle variabili. Quindi il lettore percepisce
come "testo" solo la prima parte, mentre non visualizza la seconda. Per evitare questo inconveniente, bisogna utilizzare
la tecnica dell'URL ENCODING, che consiste nel sostituire alcuni caratteri con altri.

Nell'esempio di questo sito, gli aggiornamenti sono quelli presi dalla homepage di Flash5.it alla data in cui ho scritto
questa sezione. Nei collegamenti, poichè Flash5.it è costruito in ASP, sono presenti le e commerciali per identificare i
file ASP. Per poter passare questi caratteri, ho dovuto sostituirli sempre con %26. Quindi, avrei scritto la frase sopra
come:
testo=Flash %26 Actionscript;
• Flashguru sui tag HTML.
Stampare
Premessa
Flash non è troppo flessibile per quanto riguarda la stampa. Ha alcuni vantaggi enormi, primo fra tutti il poter avere
come oggetto forme vettoriali, e non solo raster, ma anche alcune limitazioni, come quella in relazione al colore di
fondo.
Non affronterò il problema in modo completo (lo farò in altra sede), ma mi limiterò a spiegare la procedura per ottenere
un particolare tipo di stampa, probabilmente l'unico davvero necessario.
Procedura
Finalità
Innanzitutto bisogna stabilire cosa stampare: in questo caso abbiamo optato per una pagina con i loghi (in vettoriale),
alcune righe con i termini del copyright in relazione all'uso dei contenuti del sito, e l'elenco degli autori e dello staff.
Partiamo dal presupposto che Flash dà come sfondo alle proprie stampe il colore di fondo del filmato. Per questo
motivo, siamo praticamente costretti a usare il bianco. Infatti, se il colore di fondo è diverso dal bianco, all'atto della
stampa la pagina verrà colorata con quello impostato: solo che se l'utente non setta volontariamente, quando si apre la
finestra di dialogo con le opzioni della propria stampante, l'area di stampa massima ( e talvolta non basta neanche
questo), attorno all'oggetto rimarrà comunque una cornice bianca: potrebbe anche andare bene, in alcuni casi, ma
generalmente è un effetto abbastanza sgradevole.
Altra cosa da considerare è l'area di stampa, e le proporzioni del disegno rispetto ad essa. Per questo motivo useremo
come base le dimensioni di un comune foglio A4.
Infine non avremo la necessità di eliminare il comando stampa dal menu contestuale del pulsante destro del mouse, dal
momento che rimuoveremo tutto il menu, e per stampare utilizzeremo un pulsante.
L'oggetto
Il Flash non stampa propriamente degli oggetti, bensì dei frame. Un frame, per essere stampabile, deve essere
identificato tramite l'etichetta (label), che deve avere un nome particolare: #p. Se nessun frame è etichettato in questo
modo, non verrà stampato niente. Se più frame hanno questa etichetta, verranno stampati tutti quelli etichettati.
Questa particolarità, nasconde evidentemente un problema di non poco conto. Se infatti voglio rendere stampabili più
frame, ma ad esempio poterli stampare separatamente (a scelta dell'utente), non li posso identificare in alcun modo.
Per fortuna, il problema sorge solo con i frame appartenenti alla stessa timeline: se quindi posiziono i frame stampabili
in timeline separate, potrò ottere anche stampe dei singoli frame. Per ottenere una timeline separata, il modo più
semplice è di creare un movieclip. Con il comando print, quindi, chiederò di stampare la timeline del movieclip in

questione, all'interno del quale ci sarà un solo frame con l'etichetta #p. Questo significa anche che se voglio rendere
stampabili più documenti, e poterli stampare separatamente, dovrò creare tanti movieclip quanti sono i documenti.
L'area di stampa
Per decidere quali saranno le dimensioni che avranno gli oggetti rispetto alla pagina sulla quale verranno stampati, ho
bisogno di creare un altro frame. Questo frame dovrà avere un'etichetta particolare, #b, e contenere un oggetto che mi
rappresenterà l'area di stampa. La proporzione tra il contenuto della stampa e la pagina stampata, sarà determinata dalla
proporzione tra il contenuto di questi due frame.
Vediamo qualche esempio per capire meglio cosa significa. Nel frame etichettato come #p (il frame da stampare), ho un
cerchio. Nel frame etichettato come #b, ho un rettangolo. Consideriamo che il cerchio rimanga di dimensioni costanti,
in queste prove, e che a cambiare siano solo le dimensioni del rettangolo.
Il movieclip
Apriamo il file flash5.fla, e visualizziamo la libreria. Clicchiamo sul pulsante + in basso a sinistra, e aggiungiamo un
movieclip che chiameremo pagina. Aggiungiamo un altro layer, in modo da avere due layer di un frame ciascuno: nel
frame in basso disegniamo un rettangolo di qualsiasi colore (non verrà stampato, quindi può essere più utile che sia
bianco) di dimensioni in pixel 210x290, esattamente come un foglio A4. Posizioniamo l'angolo superiore sinistro del
rettangolo sul centro del movieclip, e blocchiamo il layer.
Nel frame in alto disegniamo i contenuti che appariranno nella pagina stampata, basandoci, per le posizioni e le
dimensioni, sul rettangolo presente nel layer sottostante. Quando abbiamo creato tutto il contenuto, nel layer in alto
aggiungiamo un frame vuoto con F7. Sblocchiamo il layer inferiore, selezioniamo il rettangolo, tagliamolo e
incolliamolo nel secondo frame del layer superiore, cancelliamo il layer inferiore.
Adesso abbiamo un unico layer di due frame. Nel primo frame, abbiamo i contenuti, nel secondo, il rettangolo.
Etichettiamo il primo frame con #p, e il secondo con #b. La posizione dei due frame è ininfluente, basta che non siano

sovrapposti, e così è la loro durata nella timeline. Nel fla d'esempio, infatti, ho posizionato i due frame un po' distanziati,
e allungati nella timeline perché si potessero leggere le etichette: il risultato di stampa è identico.
Torniamo alla timeline principale del filmato, e aggiungiamo un layer: in questo layer trasciniamo dalla libreria
un'istanza del movieclip pagina. Questo movieclip sarà scandalosamente enorme per il nostro filmato, ma le sue
dimensioni e la sua posizione non avranno alcuna influenza sulla stampa. Per cui riduciamolo volentieri anche a un
decimo delle sue dimensioni originali, e nascondiamolo spostandolo al di fuori dello stage. Infine selezioniamolo ancora
una volta, e diamogli pagina come nome di istanza.
Il comando
print ("_root.pagina", "bmovie");
Cosa significa questo comando? Su print non c'è niente da dire, essendo l'azione che genera la stampa; _root.pagina
non altro che il percorso del movieclip all'interno del quale è presente il frame da stampare. bmovie è invece
l'argomento che specifica che tipo di stampa vogliamo ottenere.
Al posto di bmovie potevamo avere altre due opzioni, bframe e bmax. Nel primo caso, avrebbe considerato come area
di stampa tutta l'area del frame stampabile, scalando gli oggetti per riempire la pagina in uscita, mentre nel secondo
caso la somma dei riquadri di delimitazione degli oggetti presenti in tutti i frame etichettati come #p.
Noi scriviamo invece bmovie, che considera come area di stampa il riquadro di delimitazione degli oggetti presenti nel
frame etichettato come #b (il nostro rettangolo, appunto).
Nel caso avessimo voluto stampare delle immagini raster, invece, avremmo potuto usare un altro comando:
printAsBitmap ("_root.pagina", "bmovie");
Le differenze tra i due comandi sono molto importanti: il primo stampa alla massima risoluzione possibile, mentre il
secondo a quella del filmato. Inoltre printAsBitmap permette di mantenere nella stampa gli effetti alpha, mentre il
semplice print non può.
Il pulsante
Nel nostro caso, il pulsante sarà nuovamente un movieclip. Con lo strumento testo, scriviamo sullo stage la frase che
risulterà cliccabile. Selezioniamola cliccando una volta con il mouse, poi convertiamola in movieclip premendo F8.
Torniamo alla timeline principale, selezioniamo il movieclip con la scritta, apriamo il pannello azioni e scriviamo:
onClipEvent (load) {
colore = new Color(this);
}
onClipEvent (mouseMove) {
if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
if (!premuto) {
sopra = true;
colore.setRGB(0xFFCC33);

}
} else {
sopra = false;
if (!premuto) {
colore.setRGB(0x000000);
}
}
updateAfterEvent();
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
premuto = true;
colore.setRGB(0xFF9900);
}
updateAfterEvent();
}
onClipEvent (mouseUp) {
premuto = false;
if (sopra) {
colore.setRGB(0xFFCC33);
print ("_root.pagina", "bmax");
} else {
colore.setRGB(0x000000);
}
updateAfterEvent();
}
Senza ripetere per l'ennesima volta come simulare il rollover con un movieclip, notiamo semplicemente il comando
print sottoposto al mouseUp, cioè al rilascio del pulsante sinistro del mouse sopra la scritta: infatti solo quando si è sul
movieclip, la variabile premuto è vera.
Adesso però vogliamo aggiungere una semplice gif rappresentante una stampante vicino alla scritta, e vogliamo che sia
anche cliccabile, come la scritta. Non possiamo inserirla nel movieclip, altrimenti cambierebbe colore al rollover. Allora
torniamo alla timeline principale, e posizioniamoci nel frame con il pulsante per la stampa. Andiamo al menu
File/import, cerchiamo la nostra gif, e importiamola nel filmato: la selezioniamo, premiamo F8 e la convertiamo in
movieclip. Torniamo per l'ultima volta alla timeline principale, selezioniamo la "stampante", e diamo stampante come
nome di istanza.
Riprendiamo in mano lo script della scritta. Aggiungiamo due pezzettini:
onClipEvent (load) {
colore = new Color(this);
}
onClipEvent (mouseMove) {
if(this.hitTest(_root._xmouse,_root._ymouse,false)
|| _parent.stampante.hitTest(_root._xmouse, _root._ymouse, true)) {

if (!premuto) {
sopra = true;
colore.setRGB(0xFFCC33);
}
} else {
sopra = false;
if (!premuto) {
colore.setRGB(0x000000);
}
}
updateAfterEvent();
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, false)
|| _parent.stampante.hitTest(_root._xmouse, _root._ymouse, true)) {
premuto = true;
colore.setRGB(0xFF9900);
}
updateAfterEvent();
}
onClipEvent (mouseUp) {
premuto = false;
if (sopra) {
colore.setRGB(0xFFCC33);
print ("_root.pagina", "bmax");
} else {
colore.setRGB(0x000000);
}
updateAfterEvent();
}
Adesso, la scritta cambia colore al rollover su entrambi gli oggetti, ed entrambi, al click del mouse, avviano la stampa.
Barra di scorrimento testo
Introduzione
Iniziamo adesso la costruzione della prima delle sezioni esterne del nostro sito. Questa sezione, come previsto dal menu
principale, sarà contenuta in un filmato dal nome testo.swf: per cui creiamo un nuovo documento flash, 700x300, frame
rate 24 fps. Andiamo al menu File/Open as Library (apri come libreria), e apriamo il file flash5.fla. Dalla libreria che

appare (con il fondo grigio), trasciniamo nella libreria del nostro nuovo fla il movieclip base. Salviamo con il nome
testo.fla.
Scorrimento
Quello che vogliamo creare, in questa sezione, è uno scorrimento del testo particolare: oltre ai semplici pulsanti per lo
scroll, avremo anche una barra di scorrimento a dimensioni fisse, e la possibilità di spostarci velocemente nel testo
cliccando sulla base della barra. Altra cosa importante, potremo cambiare il contenuto del campo di testo, attingendo da
due file txt esterni.
Movieclip scorrimento
Apriamo il file testo.fla, e visualizziamo la libreria. Clicchiamo il pulsante + in basso a sinistra del pannello, e
aggiungiamo un nuovo movieclip con il nome scorrimento. All'interno del movieclip scorrimento, creiamo sei layer
come in figura.
Nel primo frame del layer testo, inseriamo la scritta "caricamento dati...". La selezioniamo, e la convertiamo, tramite F8,
in un movieclip con il nome caricamento. All'interno del movieclip caricamento, inseriamo un secondo frame vuoto
(avremo una scritta lampeggiante durante l'attesa), poi torniamo al movieclip scorrimento.
Aggiungiamo un secondo frame a tutti i layer (nel primo frame, solo il layer testo avrà un contenuto).
Ombra
Aggiungiamo alla libreria un nuovo movieclip, e chiamiamolo ombra. All'interno di questo movieclip, con l'angolo
superiore sinistro al centro del movieclip stesso, disegniamo un rettangolo 130x5.
Selezioniamo il rettangolo, e andiamo al pannello Fill (Riempimento). Impostiamo il riempimento su Linear Gradient,
attribuiamo lo stesso colore ad entrambi gli indicatori (#333333), e spostiamo quello di sinistra in modo da essere quasi
al centro dello slider.

A questo punto andiamo al pannello Mixer, e abbassiamo l'indicatore dell'alpha fino allo 0 o poco più sopra.
A questo punto abbiamo inserito il gradiente desiderato, ma non con la direzione giusta. Clicchiamo sullo strumento
Paint Bucket, e poi su Transform Fill.
Clicchiamo sul rettangolo, e spostiamo ,tramite le apposite maniglie, il riempimento in modo da ottenere questo:
La barra
Aggiungiamo un altro movieclip, che chiameremo barraScroll. All'interno del movieclip, trasciniamo dalla libreria
un'istanza del movieclip rettangolo, tramite il pannello Info diamole come dimensioni 10 pixel in larghezza e 120 in
altezza, e posizioniamola con l'angolo superiore sinistro al centro del movieclip.
La freccia
Aggiungiamo un nuovo movieclip, nome freccia, al nel quale disegniamo un triangolino a pixel con un vertice verso
l'alto.
Il pulsante
Aggiungiamo ancora un movieclip alla libreria, nome pulsante. In questo movieclip, creiamo due layer di un frame
ciascuno, ai quali daremo come nomi, dal basso, base e freccia. Nel layer base, trasciniamo dalla libreria un'istanza del
movieclip base, al quale diamo come dimensioni 10 pixel in larghezza e altezza, e come nome di istanza, ancora base.
Nel layer sopra inseriamo invece un'istanza del movieclip freccia, alla quale diamo freccia come nome di istanza.

Al movieclip base associamo il seguente script (ci tornerà utile più tardi):
onClipEvent (load) {
coloreRettangolo = new Color(rettangolo);
coloreCornice = new Color(cornice);
}
Avremo così inizializzato due istanze dell'oggetto Color, relative ai contenuti del movieclip base, cioè rettangolo e
cornice.
Scroller
Aggiungiamo un ultimo movieclip, al quale diamo come nome scroller. Nell'unico frame, trasciniamo dalla libreria
un'istanza del movieclip pulsante, e la posizioniamo con il vertice superiore sinistro sul centro del movieclip. Come
nome di istanza diamo pulsante.
Unione
Adesso abbiamo tutti gli elementi che ci servono. Doppio click, nella libreria, sul movieclip scorrimento. Andiamo al
secondo frame del layer barra, e trasciniamo dalla libreria un'istanza del movieclip barraScroll. Diamole come nome di
istanza barra, e posizioniamo il vertice superiore sinistro sul centro del movieclip. Tramite il pannello Effect, diamo
come tinta il colore #999999.
Nel secondo frame del layer pulsanti, posizioniamo due istanze del movieclip pulsante, sopra la barra, una con il lato
inferiore coincidente con quello superiore della barra (e quindi a coordinate 0,-10), e uno con quello inferiore,
coincidente con il fondo della barra. Al movieclip di sopra diamo come nome di istanza su, a quello di sotto giu.
Infine, nel secondo frame del layer scroller, trasciniamo un'istanza del movieclip omonimo, e la posizioniamo alle
coordinate 0,0. L'interno del movieclip scorrimento dovrebbe apparire così:
Adesso nel secondo frame del layer "sfondo", trasciniamo un'istanza del movieclip base, diamo le dimensioni volute
per il campo di testo (nel nostro caso, 330x140), e posizioniamola a sinistra della barra, e all'altezza del pulsante su. Nel
layer ombra, posizioniamo due istanze del movieclip ombra, che coprano il lato superiore e sinistro del movieclip base,
con il gradiente verso destra e verso il basso. Infine, nel layer testo, disegniamo la casella vera e propria, le cui
impostazioni saranno:

Graficamente, l'interno del movieclip apparirà così:
I pulsanti
Andiamo alla timeline principale, e creiamo tre livelli. In quello più in basso, trasciniamo un'istanza del movieclip
scorrimento, alla quale associamo:
onClipEvent (load) {
fscommand ("allowscale", "false");
stop();
loadVariables ("flash.txt", this);
}
onClipEvent (data) {
nextFrame ();
}
codice di cui abbiamo già visto il significato, per il caricamento del file di testo esterno.
Nel secondo layer, che chiameremo "pulsanti", scriviamo, in due distinte caselle di testo statico, "Introduzione a Flash
5", e "Introduzione ad Actionscript". Selezioniamo le singole caselle di testo, prima una poi l'altra, e convertiamole in
due distinti movieclip. Al primo diamo come nome di istanza flash, al secondo actionscript (flash.txt e actionscript.txt
saranno i nomi dei due file di testo esterni).
Al primo associamo:
onClipEvent(load){
colore = new Color(this);
colore.setRGB( 0xFFCC33 );
}
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){

_parent.cambiatesto(_name);
}
}
al secondo:
onClipEvent(load){
colore = new Color(this);
colore.setRGB( 0xCCCCCC );
}
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
_parent.cambiatesto(_name);
}
}
I due codici sono perfettamente identici, tranne che per un particolare: il primo imposta il colore del movieclip come
arancione (attivo), il secondo come grigio (non attivo). Quello che fa lo script è, alla pressione del tasto sinistro del
mouse sul movieclip, richiamare una funzione sulla _root, passando come variabile il nome di istanza del movieclip che
l'ha chiamata.
Barra di scorrimento testo: azioni
Codici dello scorrimento
Prima di vedere come funzionerà questo scorrimento, vediamo la funzione che è richiamata dai due pulsanti nella _root.
testo = "flash";
function cambiatesto(nome){
if(nome != testo){
loadVariables(nome + ".txt", scorrimento);
scorrimento.gotoAndStop(1);
_root[nome].colore.setRGB( 0xFFCC33 );
_root[testo].colore.setRGB( 0xCCCCCC );
testo = nome;
}
}
I due pulsanti, quando richiamano la funzione, passano come parametro il proprio nome di istanza. La funzione riceve
questo parametro, e controlla che non sia già presente (evitando quindi di poter caricare più volte di seguito lo stesso
testo, effetto non gradevole). Se il pulsante non era già stato premuto, carica il file il cui nome è formato dal parametro
più la stringa ".txt" all'interno del movieclip scorrimento (che contiene la casella di testo), e cambia colore ai due
pulsanti, rendendo uno attivo e l'altro non attivo. In partenza, il pulsante premuto è "Introduzione a Flash5": infatti il
colore era arancione, e il file di testo caricato è flash.txt.
Vediamo passo passo un caso:
- viene premuto il tasto "Introduzione a Flash5", il cui nome di istanza è flash. Il pulsante richiama la funzione

cambiatesto, a cui passa il parametro "flash" nella variabile nome. La funzione vede che attualmente la variabile nome
è uguale a testo (impostato su flash all'avvio), e non fa niente.
- viene premuto il tasto "Introduzione a Actionscript": nome e testo sono diversi. Il movieclip scorrimento viene
mandato al frame 1, dove c'è il movieclip lampeggiante con la scritta "caricamento dati..", e viene caricato il file esterno
actionscript.txt (loadVariables(nome + ".txt", scorrimento);, se nome è uguale a "actionscript", vorrà dire:
loadVariables("actionscript" + ".txt", scorrimento);). Quando il file esterno sarà stato caricato, il movieclip scorrimento
passerà al frame 2.
A questo punto, vengono cambiati i colori dei pulsanti (servendosi del nome delle variabili tra parentesi quadre), e viene
impostato come "testo", il nome dell'ultimo parametro passato. In questo modo, adesso solo premendo "Introduzione a
Flash5", succederà qualcosa.
Codice dei pulsanti
Editiamo il movieclip scorrimento, facendo doppio click sul movieclip nella libreria. Andiamo al livello pulsanti,
secondo frame, e cominciamo con il pulsante su. A questo movieclip associamo:
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
premuto = true;
base.coloreRettangolo.setRGB( 0xBBBBBB );
}
}
onClipEvent (mouseUp) {
base.coloreRettangolo.setRGB( 0xCCCCCC );
premuto = false;
}
Ricordo che all'interno dei due pulsanti, al movieclip base, avevamo associato uno script, che inizializzava un'istanza
dell'oggetto Color. Questa ci serve per modificare i colori dei pulsanti, quando vengono premuti con il tasto sinistro del
mouse. Nel dettaglio:
// alla pressione del tasto sinistro del mouse
onClipEvent (mouseDown) {
// se il puntatore del mouse è sul movieclip
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
// setta la variabile "premuto" come vera
premuto = true;
// cambia il colore del pulsante
base.coloreRettangolo.setRGB( 0xBBBBBB );
}
}
// al rilascio del tasto sinistro del mouse
onClipEvent (mouseUp) {
// ripristina il colore del pulsante
base.coloreRettangolo.setRGB( 0xCCCCCC );

setta la variabile "premuto" come falsa
premuto = false;
}
Il codice del pulsante giu è perfettamente identico, solo con un pezzetto in più all'inizio:
onClipEvent (load) {
freccia._rotation = 180;
freccia._x = 8;
freccia._y = 7;
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
premuto = true;
base.coloreRettangolo.setRGB( 0xBBBBBB );
}
}
onClipEvent (mouseUp) {
base.coloreRettangolo.setRGB( 0xCCCCCC );
premuto = false;
}
Questo serve semplicemente a ruotare la freccia di 180 gradi (altrimenti punterebbe verso l'alto anche nel pulsante giu),
e a posizionarla più efficacemente. Fino ad adesso i pulsanti non fanno niente, se non rendere vera una variabile quando
premuti, e falsa quando non premuti.
Il codice dello scroller
Selezioniamo il movieclip scroller, e associamogli:
// ***** prima parte *****
onClipEvent(load){
pulsante.freccia._visible = 0;
hBarra = _parent.barra._height;
max = Math.round(hBarra-_height);
spazio = max/(_parent.testo.maxscroll);
function scorri(){
_parent.testo.scroll = (_y/spazio)+1;
updateAfterEvent();
}
}
// ***** seconda parte *****
onClipEvent (mouseMove) {
if (premuto) {
scorri();

}
updateAfterEvent();
}
// ***** terza parte *****
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
pulsante.base.coloreRettangolo.setRGB( 0xBBBBBB );
premuto = true;
this.startDrag(false, _x, 0, _x, max);
}
}
// ***** quarta parte *****
onClipEvent (mouseUp) {
pulsante.base.coloreRettangolo.setRGB( 0xCCCCCC );
premuto = false;
stopDrag();
}
// ***** quinta parte *****
onClipEvent (enterFrame) {
if(_parent.su.premuto){
_y -= spazio;
if(_y < 0){
_y = 0;
}
scorri();
}
if(_parent.giu.premuto){
_y += spazio;
if(_y > max){
_y = max;
}
scorri();
}
}
Il codice non è complicato come sembra, ma vediamolo lo stesso un passo alla volta.
Nella prima parte, si dice che al caricamento del movieclip, la freccia dentro il movieclip pulsante, dentro il movieclip
scroller, deve essere invisibile. Dopodiché si attribuiscono a delle variabili alcuni valori che rimarranno fissi nel corso
della riproduzione.
- hBarra è l'altezza del movieclip barra, presente nel livello superiore.
- max è la differenza tra l'altezza della barra, e l'altezza dello scroller
- spazio è il quoto della divisione tra max e il numero di righe totali del testo (calcolato al momento)
- la funzione scorri, quando chiamata, attribuisce allo scroll della casella di testo con nome testo, il valore del quoto
della divisione tra la posizione dello scroller sull'asse delle Y e spazio, il tutto aumentato di uno, con un forzato refresh

dello schermo.
Ragioniamo su questi valori. Io devo capire quale valore dare allo scroll di testo, cioè che numero di riga deve essere
quella che appare in cima al campo di testo, sulla base della posizione dello scroller. Più elevato è il valore della Y, più
elevato sarà quello dello scroll. E' evidente che il rapporto tra questi due valori non possa essere fisso, dal momento che
se ci sono più righe da far scorrere, più brevi perché più numerosi dovranno essere gli spostamenti da fare, per
aumentare lo scroll di una unità. Questo mi impone di trovare una formula generale, che valga per qualsiasi numero di
righe.
Consideriamo lo spazio che deve percorrere lo scroller dal punto di partenza fino alla fine della barra. Se lo spazio fosse
quanto la barra, lo scroller coprirebbe, a fine corsa, il pulsante giu. Invece, lo spazio da percorrere è pari all'altezza della
barra meno l'altezza dello scroller. In questo modo, lo scroller non coprirà mai il pulsante giu. Questo spazio è max:
max = Math.round(hBarra-_height);
Se lo scroller deve scorrere dieci righe, nello spazio di 10 quadretti, ad ogni spostamento di un quadretto corrisponderà
lo scroll di una riga. Ma se in dieci quadretti deve scorrere 20 righe, lo spostamento sarà di 0,5 quadretti. Se le righe
sono 40, lo spostamento sarà di 0.25 quadretti. Quindi, lo spazio è dato dall'ampiezza dello spostamento fratto il numero
di righe:
spazio = max/(_parent.testo.maxscroll);
In base a quanto visto, si deduce che il valore a cui corrisponderà testo.scroll sarà dato dalla posizione dello scroller
sull'asse delle Y fratto spazio, cioè lo spostamento. Però, considerato che il valore di scroll inizia da 1 (il campo di testo
inizia con una riga piena, la numero 1), bisogna aumentare questo valore di una unità.
Per questo motivo, quando richiameremo la funzione scorri(), questa controllerà la posizione dello scroller e farà i giusti
calcoli, scrollando il testo.
Consideriamo la terza parte (alla seconda torniamo poi). Alla pressione del tasto sinistro del mouse (mouseDown), se il
puntatore del mouse è sul movieclip scroller (if (this.hitTest(_root._xmouse,_root._ymouse,false))), allora cambia il
colore dello scroller, setta la variabile premuto come vera, e inizia a trascinare lo scroller.

this.startDrag(false, _x, 0, _x, max);
Questa espressione significa che il trascinamento dello scroller, deve essere fatto nel punto in cui si è premuto (false), e
che i limiti del trascinamento sono: a sinistra, la posizione della _x della barra, così come a destra, il che significa che lo
scroller si muove solo in verticale. In alto, lo 0: infatti la barra ha il vertice superiore sinistro sul centro del movieclip
scorrimento. In basso, max.
Nella quarta parte: al rilascio del tasto sinistro del mouse, ripristina il colore dello scroller, setta la variabile premuto
come falsa, e smetti di trascinare.
Nella seconda parte, viene il punto più importante. Allo spostamento del mouse, se premuto è vera (e quindi abbiamo
cliccato sullo scroller e lo stiamo trascinando), chiama la funzione scorri(), e modifica lo scroll di conseguenza.
Adesso, nella quinta parte, entrano in gioco le variabili che venivano impostate nei pulsanti. La posizione dello scroller,
e quindi lo scroll di testo, devono essere modificati anche da lì. Utilizzando la stessa formula, se è vera la variabile
premuto in su, lo scroller viene spostato verso l'alto, se viene premuto il pulsante giu, ed è quindi vera premuto in giù,
lo scroller viene spostato verso il basso. Ad ogni spostamento nella riproduzione del frame, viene richiamata la funzione
scorri().
Ultimo accorgimento da prendere: spostando su e giù lo scroller, si potrebbe farlo andare oltre i pulsanti. Allora, se
stiamo premendo il pulsante su, e lo scroller supera verso l'alto lo zero (siamo in cima alla barra), lo scroller viene
portato sullo zero. Se stiamo scrollando verso il basso, e lo scroller supera in basso la barra, lo scroller viene riportato al
valore di max.
Il codice della barra
Andiamo al layer "barra" del movieclip scorrimento, e selezioniamo la barra stessa. A questa associamo:
onClipEvent(mouseDown){
hBarra = _height;
hScroller = _parent.scroller._height;
max = hBarra - hScroller;
if(this.hitTest(_root._xmouse,_root._ymouse,false) && !_parent.scroller.premuto){
if(_ymouse < max && _ymouse>hScroller){
_parent.scroller._y = _ymouse;
}else if(_ymouse >= max){
_parent.scroller._y = max;
}else if(_ymouse

assegna a hBarra il valore dell'altezza di barra
hBarra = _height;
// assegna a hScroller il valore dell'altezza di scroller
hScroller = _parent.scroller._height;
// assegna a max il valore dell'altezza della barra meno l'altezza dello scroller
max = hBarra - hScroller;
// se con il mouse siamo sulla barra, ma non sullo scroller
if(this.hitTest(_root._xmouse,_root._ymouse,false) && !_parent.scroller.premuto){
// se il punto dove tocco la barra è minore di max e maggiore di hScroller
if(_ymouse < max && _ymouse>hScroller){
// posiziona lo scroller all'altezza di quel punto
_parent.scroller._y = _ymouse;
// altrimenti, se il punto dove tocco è maggiore o uguale a max
}else if(_ymouse >= max){
// posiziona lo scroller su max
_parent.scroller._y = max;
// altrimenti, se il punto dove tocco è minore o uguale a hScroller
}else if(_ymouse

Disegno
Importazione delle immagini
Per creare questo slider, ho utilizzato delle immagini dei pannelli del Flash 5, catturate con l'HyperSnap DX: questo
programma permette di salvare come file immagine tutto ciò che viene visualizzato sul monitor, con varie scelte sulle
dimensioni dell'area catturata. Per questo scopo, si può anche ricorrere al comune pulsante Stamp da tastiera, per poi
incollare, dagli appunti, l'immagine in un editor apposito.
Dal momento che le dimensioni di un filmato in Flash devono essere le più ridotte possibili, fin dove lo permette le
qualità, è conveniente ottimizzarle prima dell'importazione. Quindi le convertiamo in gif, riducendo al minimo il
numero di colori necessari.
Apriamo il file slide.fla, e andiamo al menu File/Import. Troviamo la cartella contenente le immagini (nel nostro caso 6),
selezioniamole tutte e importiamole nella libreria.
Selezioniamo una a una le immagini, e convertiamole in movieclip: questo serve a evitare un probabile bug del Flash,
che, in presenza di molte immagini sullo stage, tende a nasconderle o a renderle sgranate.
Il pulsante
Apriamo, con doppio click nella libreria, il movieclip base. Nel layer inferiore, è presente il movieclip rettangolo. A
questo associamo:
onClipEvent (load) {
colore = new Color(this);
colore.setRGB(0x000000);
_alpha = 50;
}
onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
sopra = true;
if (_alpha>0) {
_alpha -= 5;
}
} else {

sopra = false;
if (_alpha

Creiamo nella libreria un nuovo movieclip che chiameremo out.All'interno di questo movieclip, posizioneremo,
indifferentemente su due layer o uno solo, due campi di testo dinamici. Al di là della scelta di colore e Font, le
impostazioni, e le variabili associate, dei due campi, saranno queste:
Il primo campo di testo, a cui è associata la variabile titolo, conterrà il nome del pannello cliccato, mentre il secondo
campo di testo, una breve descrizione.
Lo stage
Andiamo alla timeline principale del nostro filmato. Trasciniamo sullo stage un'istanza del movieclip out, alla quale
daremo out come nome di istanza. In un altro livello, trasciniamo una istanza del movieclip barra, alla quale daremo,
come nome di istanza, barra1. Infine, posizioniamo sullo stage un movieclip vuoto, al quale assoceremo lo script:
onClipEvent (load) {
centro = _root.barra1._x;
larghezza = _root.barra1._width;
destra = centro + larghezza;
sinistra = centro - larghezza;
_root.barra1.duplicateMovieClip("barra2", 2);
_root.barra2._x = destra;
}
onClipEvent (mouseMove) {
_x = _root._xmouse;
}
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;
mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;

arra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
La disposizione finale degli oggetti sullo stage sarà questa:
Il movieclip barra1 va posizionato al centro dello stage. E' da notare che la barra contenente le immagini, per questo
tipo di slider, deve essere più larga dell'area visibile nel filmato. In questo caso, quindi, è più larga dello stage, ma
laddove ci fosse una maschera, basterebbe che fosse più larga della maschera stessa.
La funzione
Nel primo frame del filmato, nella timeline principale, inseriamo questo script:
fscommand ("allowscale", "false");
titoli = new Array(contenuto1);
sottotitoli = new Array(contenuto2);
function comandi (num) {
out.titolo = "Pannello " + titoli[num];
out.sottotitolo = sottotitoli[num];
}
Per questioni di spazio non riporto ciò che è al posto di contenuto1 e contenuto2. In sintesi, ci sono in sequenza i titoli
associati ai movieclip in questo formato:
"0","titolo1","titolo2","titolo3","titolo4","titolo5","titolo6"
e i sottotitoli allo stesso modo. Quindi, all'avvio del filmato, creo una sequenza di titoli e di sottotitoli a coppie,
identificabili attraverso la loro posizione negli array.
Slide di immagini: azioni

L'actionscript
Pulsanti
Partiamo dall'interno delle barre. Abbiamo 6 movieclip contenenti le immagini, coperti da 6 movieclip base. Ogni
movieclip base ha un nome di istanza, clip001, clip002 eccetera. Dentro ogni movieclip, c'è lo stesso rettangolo a cui è
associato il primo script che abbiamo visto. Vediamo la prima parte:
onClipEvent (load) {
colore = new Color(this);
colore.setRGB(0x000000);
_alpha = 50;
}
Al caricamento del movieclip (e vale per tutti i movieclip), il colore verrà settato sul nero, e l'alpha al 50%. Quindi noi
vedremo le immagini attraverso un "velo" scuro.
Nel secondo pezzo:
onClipEvent (load) {
colore = new Color(this);
colore.setRGB(0x000000);
_alpha = 50;
}
onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
sopra = true;
if (_alpha>0) {
_alpha -= 5;
}
} else {
sopra = false;
if (_alpha

Inoltre, quando il mouse è sopra il movieclip, la variabile sopra è vera, altrimenti è falsa. Il sapere se siamo sopra il
movieclip, infatti, ci serve per l'ultimo pezzo del codice:
onClipEvent (mouseDown) {
if (sopra) {
_root.comandi(substring(_parent._name,7,1));
}
}
Se sopra è vera, quando clicchiamo con il pulsante sinistro del mouse, viene richiamata la funzione comandi che sta
nella root, alla quale viene passato un parametro particolare: una sottostringa, della lunghezza di un carattere, che
rappresenta la settima lettera del nome di istanza del movieclip che contiene il rettangolo.
Ora, ogni movieclip rettangolo è contenuto nel movieclip base, che ha rispettivamente nome di istanza, dentro barra,
clip001, clip002, clip003... Quando clicchiamo su un rettangolo, viene preso il nome di istanza, viene tolto "clip00" e
rimane la settima lettera, cioè un numero da 1 a 6. E' questo numero, che viene inviato come parametro alla funzione
della root. In pratica, se clicco sopra la seconda immagine, che sta sotto il movieclip clip002, alla funzione comandi
viene inviato il parametro 2.
Funzione
Cosa fa la funzione, quando riceve il parametro? (facciamo l'esempio con il 2). Prende l'array titoli e ne considera
l'elemento [2]. Questo elemento non sarebbe il secondo dell'array, ma il terzo, poiché la numerazione dell'array parte da
zero: per questo motivo, il primo elemento dell'array è uno "0", che serve a spostare in avanti tutti gli elementi.
Considerato allora questo elemento, lo scrive nella casella titolo nel movieclip out, poi prende l'elemento [2] dell'array
sottotitoli, e lo scrive nella casella sottotitoli. In questo modo, ogni volta che viene cliccato su un movieclip, vengono
scritte nelle caselle, le informazioni corrispondenti.
Lo slider
Adesso il codice più difficile da comprendere, quello che permette alle due barre di scorrere. Il codice sta tutto nel
movieclip vuoto presente sullo stage, al quale ho dato il nome di istanza cursore per renderlo identificabile nel
Debugger e nel Movie Explorer.
onClipEvent (load) {
centro = _root.barra1._x;
larghezza = _root.barra1._width;
destra = centro + larghezza;
sinistra = centro - larghezza;
_root.barra1.duplicateMovieClip("barra2", 2);
_root.barra2._x = destra;
}
onClipEvent (mouseMove) {
_x = _root._xmouse;
}
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;

mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;
barra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
Vediamolo un pezzo alla volta.
onClipEvent (load) {
centro = _root.barra1._x;
larghezza = _root.barra1._width;
destra = centro + larghezza;
sinistra = centro - larghezza;
_root.barra1.duplicateMovieClip("barra2", 2);
_root.barra2._x = destra;
}
Al caricamento del movieclip, vengono settate alcune variabili:
• Alla variabile centro viene assegnato il valore della posizione di barra1 sull'asse delle x (quindi il centro del filmato,
350).
• Alla variabile larghezza viene assegnato il valore della larghezza di barra1.
• Alla variabile destra viene assegnato il valore di centro più larghezza.
• Alla variabile sinistra quello di centro meno larghezza.
Quindi, barra1 viene duplicata con il nome di barra2, e barra2 viene posizionata subito a destra di barra1. Questo è
quello che otteniamo (molto rimpicciolito):
Abbiamo preso il filmato, e ne abbiamo stabilito il centro: poi abbiamo stabilito la posizione di due limiti immaginari, a
destra e sinistra, distanti dal centro quanto la barra. Abbiamo quindi duplicato la barra e messo la copia accanto alla
prima.

onClipEvent (mouseMove) {
_x = _root._xmouse;
}
Con queste righe stabiliamo che, al movimento del mouse, il cursore debba rimanere alla stessa altezza sull'asse delle X
(segue il mouse in tutti i suoi spostamenti).
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;
mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;
barra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
Ad ogni riproduzione del movieclip, vengono fatti questi calcoli.
mouseX = Math.round(_x-centro)*-1;
Viene stabilito, innanzitutto, il fattore di accelerazione mouseX, cioè a che velocità devono muoversi le barre
(l'ampiezza dello spostamento). Questo fattore è l'inverso della distanza del movieclip cursore (che segue il mouse) dal
centro del filmato: quindi, più vicino sono al centro del filmato con il mouse, più lente si muoveranno (_x - centro tende
a 0). E questo movimento, dal momento che moltiplico il fattore per -1, sarà inverso, come per una cloche d'aereo: con
il mouse a destra del filmato, le barre scorreranno verso sinistra.
mouseX = Math.round(mouseX/15);
Il valore di mouseX viene diviso per 15: con questa espressione, determiniamo effettivamente la velocità di movimento.
Più è basso il numero che mettiamo al posto di 15, più veloci saranno le barre.
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;

Stabilita l'entità degli spostamenti, spostiamo le barre sommando alla loro attuale posizione il valore di mouseX. Dal
momento che mouseX uguale per entrambe, le barre si muoveranno sempre rimanendo una accanto all'altra.
onClipEvent (enterFrame) {
mouseX = Math.round(_x-centro)*-1;
mouseX = Math.round(mouseX/15);
_root.barra1._x += mouseX;
_root.barra2._x += mouseX;
barra1X = _root.barra1._x;
barra2X = _root.barra2._x;
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
if (barra2X < sinistra) {
_root.barra2._x = barra1X + larghezza;
}
if (barra1X > destra) {
_root.barra1._x = barra2X - larghezza;
}
if (barra2X > destra) {
_root.barra2._x = barra1X - larghezza;
}
}
Assegniamo a barra1X e barra2X i valori delle rispettive posizioni delle due barre. Dovremo quindi considerare 4
possibilità, grazie alle quali lo scorrimento diventa continuo. Prendiamo due dei casi in considerazione, il cui
funzionamento vale anche per gli altri:
if (barra1X < sinistra) {
_root.barra1._x = barra2X + larghezza;
}
Le barra1 si sta spostando verso sinistra: quando il suo centro ha superato la posizione del limite sinistra, la sua nuova
posizione sarà a destra di barra2, per l'esattezza alla distanza della larghezza della barra dal suo centro. Con una barra
questo è quello che succede:
La cosa importante, è che questo vale anche per l'altra barra, che dovrà spostarsi a destra di barra1. Se guardiamo le
due barre assieme, vedremo che in ogni momento c'è una barra sullo stage: se quindi le barre sono uguali, avremo uno
scorrimento continuo.
Le finestre
Introduzione
Passiamo alla terza sezione esterna: in questa creeremo delle finestre trascinabili e minimizzabili, contenenti del testo.
Le finestre potranno essere portate in primo piano semplicemente cliccandoci sopra, come quelle di Windows, per

intenderci. Inoltre, nel nostro filmato, creeremo un'unica finestra: a decidere il numero e il contento, sarà un file di testo
esterno.
Come dalla funzione del menu, il filmato dovrà chiamarsi finestre.swf. Quindi creiamo un nuovo progetto Flash, con le
stesse caratteristiche dei precedenti, e anche in questo importiamo il movieclip base. Infine salviamo con il nome
finestre.fla
Le finestre
Disegno
Apriamo il file finestre.fla: clicchiamo sul pulsante + nella libreria, e aggiungiamo un movieclip che chiameremo
finestra. All'interno di questo movieclip, creiamo 7 layer di due frame ciascuno, con i nomi come quelli in figura.
Prima di tutto, in un layer qualsiasi, al primo frame mettiamo uno stop(). Nel layer "base", in basso, trasciniamo dalla
libreria un'istanza del movieclip base: come dimensioni assegniamo 200x130, lo posizioniamo con il lato superiore al
centro del movieclip, ruotato di 180 gradi, in modo che sembri in rilievo.
Nel secondo frame dello stesso layer, posizioniamo un'altra istanza del movieclip base, sempre nella stessa posizione
rispetto al movieclip, solo che questa volta le dimensioni saranno 200x22. Infatti, il secondo frame del movieclip
finestra, conterrà la grafica della finestra ridotta.
Andiamo al primo frame del layer "interno". Trasciniamo dalla libreria un'istanza del movieclip base, come dimensioni
assegniamo 195x105, per poi posizionarla alle coordinate -97.5,22. Associamo al movieclip:
onClipEvent(load){
colore = new Color(rettangolo);
colore.setRGB(0xEEEEEE);
}
in modo che appaia (ma solo il rettangolo all'interno, a cui si riferisce lo script), più scuro di quello di base. Il secondo
frame lo lasciamo vuoto.

Andiamo al primo frame del layer "rettangolo", nel quale trasciniamo dalla libreria un'istanza del movieclip rettangolo.
Lo stesso contenuto (con F5), lo passiamo anche al secondo frame, e assegniamo come nome di istanza rettangolo.
Allo stesso modo, nei due frame del layer cornice, inseriamo un'istanza del movieclip cornice, che tingeremo di nero
tramite il pannello Effetti. Se esportiamo adesso, questo è quello che vediamo.
Nell'unico frame del layer "testo", inseriamo una casella di testo della grandezza del rettangolo in "interno": le opzioni
saranno testo dinamico, multi-linea, html, variabile associata testo. Nel layer "titolo", inseriamo in entrambi i frame una
casella di testo delle dimensioni della barra alta, con queste opzioni: testo dinamico, linea singola, html, variabile
associata titolo.
Dal layer "rettangolo", copiamo il movieclip rettangolo, e incolliamolo nei due frame uniti del layer "pulsante".
Selezioniamo il rettangolo, e premiamo F8. Nella finestra di dialogo per convertire in simbolo, scegliamo button, e
come nome diamo pulsante.
Editiamo ora il pulsante, facendo doppio click su di esso: quello che vogliamo fare, è renderlo trasparente. La timeline
interna del pulsante sarà come nella prima figura: noi clicchiamo sul primo frame, e trasciniamo il contenuto nell'ultimo,
come nella seconda figura.
Â
Adesso il pulsante non ha più niente nel frame Up, e quindi non è visibile: tuttavia, ha il rettangolo nel frame Hit
(rettangolo a cui togliamo il nome di istanza), quindi è cliccabile. Usciamo dal pulsante e associamogli:
on (press) {
rettangolo.colore.setRGB( 0xFF9900 );
_root.swap(_name);
startDrag (this, false, _width/2, 0, 700-_width/2, 300-_height);
if (!premuto) {
if (getTimer()-click

stopDrag ();
}
Vediamo come funziona lo script: quando clicchiamo sul pulsante, questo richiama una funzione che sta nella root, e
che si chiama swap. A questa funzione, passa come parametro il nome di istanza del movieclip finestra in cui è
contenuto: questo servirà a far capire alla funzione, da quale finestra proviene la chiamata.
Inoltre, fintantoché il pulsante è cliccato, possiamo trascinare il movieclip, entro dei limiti che sono quelli del filmato:
non possiamo quindi far uscire una finestra dall'area visibile.
Un altro controllo, con il getTimer, viene effettuato per stabilire se l'ultimo click sia avvenuto meno di tre decimi di
secondi prima: se la risposta è negativa, la finestra non cambia aspetto, altrimenti, se aperta si chiude, e se chiusa si apre.
Questa è la simulazione di un doppio click, mentre l'apertura e la chiusura della finestra vengono effettuate mandando il
movieclip avanti o indietro di un frame.
Infine, finché il pulsante è premuto, è di colore arancione; quando viene rilasciato, diventa giallo.
// quando il mouse viene premuto
on (press) {
// setta colore in rettangolo come arancione
rettangolo.colore.setRGB( 0xFF9900 );
// chiama la funzione "swap" passando come parametro il nome del
// movieclip che contiene il pulsante
_root.swap(_name);
// trascina la finestra entro i limiti del filmato
startDrag (this, false, _width/2, 0, 700-_width/2, 300-_height);
// se la variabile "premuto" è falsa
if (!premuto) {
// il click precedente è sato meno di tre decimi di secondo fa
if (getTimer()-click

}
// al rilascio
on (release) {
// setta colore in rettangolo come giallo
rettangolo.colore.setRGB( 0xFFCC33 );
// smetti di trascinare il movieclip finestra
stopDrag ();
}
La funzione che viene richiamata, e che sta nel primo frame del filmato, al livello della timeline principale, è questa:<
function swap (nome) {
if (alto != nome) {
_root[nome].swapDepths(++num);
_root[alto].rettangolo.colore.setRGB( 0x999999 );
alto = nome;
}
}
La funzione riceve il nome del movieclip contenente il pulsante da cui arriva la chiamata: se questo nome è diverso da
quello contenuto nella variabile alto, (e quindi lo stesso pulsante non esegue questa azione due volte di seguito), allora
mette il movieclip finestra in cima alla lista dei livelli dei duplicati, mentre cambia in grigio il colore del rettangolo in
quello precedente.
Piccola digressione: i duplicati di un movieclip, vengono posizionati in livelli assimilabili ai level dei filmati. Ogni
duplicato deve stare in un livello diverso dagli altri: se un duplicato viene posizionato in un livello dove ne è già
presente un altro, quest'ultimo lascia il posto al nuovo arrivato. Inoltre, come nei level, il livello con il valore più elevato
copre quelli con il valore inferiore.
La sequenza di numeri che rappresentano i livelli in cui sono posizionati i movieclip, determina l'ordine di
"impilamento", e il livello determina la profondità del movieclip. Con lo swapDepths(), alla base della funzione, si
possono scambiare due movieclip di livello: se lo eseguo su un movieclip sul livello 3, e su uno sul livello 10, il primo
andrà al livello 10, e il secondo al livello 3. Non solo, è possibile anche assegnare ad un movieclip il livello su cui
posizionarsi, senza dover prendere il posto di un altro.
La variabile num, presente nella funzione, contiene proprio il numero dei livelli iniziali: se all'apertura del filmato ho
stabilito di avere 3 finestre, num sarà uguale a 3. Quando richiamo la funzione swap dal movieclip presente nel livello
1, il valore di num viene aumentato di una unità, e diventa 4: allora il movieclip da cui viene la chiamata, viene
posizionato nel livello 4, sopra tutti gli altri (il più alto stava nel 3). La volta dopo, il movieclip chiamante verrà
posizionato nel livello 5, poi in quello 6, e così via.
Questo sistema presenta dei vantaggi e degli svantaggi. E' il più semplice in assoluto, ed è efficace, non presentando il
bug proprio dello swap depth tra due movieclip (se ho tre movieclip, dal basso verso l'alto l'uno, il due, e il tre, e
scambio di profondità il primo con il terzo, il primo andrà in cima, ma il terzo andrà in fondo: in Windows non è così,
poiché la finestra cliccata va in cima, ma la sequenza di tutte quelle dietro resta inalterata).

Lo svantaggio, in via teorica, ci sarebbe con un gran numero di finestre, o con un gran movimento delle stesse.
Aumentando sempre di più il valore dell'impilamento massimo, si potrebbe giungere al limite del lettore. Magari dovrei
cliccare 16.000 volte le finestre, per arrivarci: improbabile ma possibile. D'altronde, per evitare questo problema, dovrei
utilizzare un sistema che ad ogni cambio di profondità, sposti tutte le finestre per compattarle nel minor numero di
livelli possibili, senza buchi, spostandole tutte verso il basso.
Per i nostri scopi, decisamente eccessivo.
Stage
Andiamo alla timeline principale: trasciniamo sullo stage, dalla libreria, un'istanza del movieclip finestra, e
assegniamogli, come nome di istanza, mc. In un qualsiasi punto dello stage, trasciniamo un qualsiasi movieclip dalla
libreria: lo rimpiccioliamo, e lo portiamo fuori dall'area visibile. A questo movieclip associamo:
onClipEvent (load) {
loadVariables ("finestre.txt", this);
_root.mc._visible = 0;
}
onClipEvent (data) {
num = _root.num = Number(num);
for (i = 1; i < num + 1; ++i) {
nuovo = "finestra"+i;
duplicateMovieClip ("_root.mc", nuovo, i);
with (_root[nuovo]) {
rettangolo.colore = new Color(rettangolo);
rettangolo.colore.setRGB(0x999999);
titolo = this["titolo"+i];
testo = this["testo"+i];
_x = _root.mc._x+(100*i);
_y = _root.mc._y+(20*i);
}
_root[nuovo].swapDepths(i);
}
_root["finestra"+num].rettangolo.colore.setRGB(0xFFCC33);
_root.alto = _root["finestra"+num]._name;
}
Questo codice, finalmente, è quello che carica il file di testo esterno e crea le finestre. Per posizionare le finestre
duplicate, ci sono mille modi: io ne ho scelto uno semplice per questioni di coerenza grafica, argomento che in altre
situazioni può non essere il più opportuno.
Il file di testo esterno che viene caricato, si chiama finestre.txt. Durante la costruzione del movieclip finestra, abbiamo
visto come al suo interno fossero presenti due campi di testo, titolo e testo. Queste saranno le variabili presenti, per
ogni finestra. Il numero totale è scritto all'inizio.
num=3&titolo1=SIMBOLI GRAFICI&testo1=Usare i simboli grafici....bla.....&titolo2=PULSANTI&testo2=Usare i
simboli di pulsanti....bla..... &titolo3=CLIP FILMATO&testo3=Un clip filmato è un ....bla.....

Questo è il contenuto di finestre.txt: la prima variabile rappresenta il numero di duplicati ( e anche il massimo livello di
impilamento iniziale), le altre sono in sequenza i valori di titolo e testo per ogni movieclip.
// al caricamento del movieclip (una volta sola)
onClipEvent (load) {
// carica in questo movieclip il file di testo
// esterno finestre.txt
loadVariables ("finestre.txt", this);
// nascondi il movieclip "mc"
_root.mc._visible = 0;
}
// Quando i dati sono stati tutti caricati
onClipEvent (data) {
// setta il valore di num come il numero corrispondente
// alla stringa Num (le variabili dal testo esterno sono sempre stringhe)
num = _root.num = Number(num);
// per tutti i valori di i che vanno da 1 a num
for (i = 1; i < num + 1; ++i) {
// assegna alla variabile "nuovo", il valore di "finestra"+1
nuovo = "finestra"+i;
// duplica il movieclip mc sullo stage, dopo averlo reso invisibile
duplicateMovieClip ("_root.mc", nuovo, i);
// del movieclip duplicato, settiamo i colori;
// inseriamo nelle due caselle di testo il corrispondente per ogni
// movieclip; ne settiamo la posizione a scalare partendo da quella di mc
with (_root[nuovo]) {
rettangolo.colore = new Color(rettangolo);
rettangolo.colore.setRGB(0x999999);
titolo = this["titolo"+i];
testo = this["testo"+i];
_x = _root.mc._x+(100*i);
_y = _root.mc._y+(20*i);
}
// scambiamo ogni volta l'ordine di impilamento, in modo che
// l'ultimo duplicato sia in cima
_root[nuovo].swapDepths(i);
}
// l'ultima finestra duplicata sta in cima, e ha il colore giallo
// inoltre, il nome del primo movieclip, è anche quello
// che la funzione considera come l'ultimo chiamato, all'avvio.
_root["finestra"+num].rettangolo.colore.setRGB(0xFFCC33);
_root.alto = _root["finestra"+num]._name;
}

Brevemente:
viene caricato il file di testo e duplicate le finestre
ogni finestra viene riempita con i valori corrispondenti
l'ultima finestra è quella attiva
Scroll di immagini
In questa nuova sezione tratteremo il secondo tipo di scroll di immagini. Rispetto al primo, questo non avviene da solo,
ma è soggetto alla pressione di due diversi pulsanti per l'avanzamento nell'una o nell'altra direzione.
Come previsto dalla funzione del menu, questo filmato dovrà chiamarsi scroll.swf. Per cui creiamo un nuovo
documento Flash, 700x300, 24fps di frame rate, e salviamo con il nome scroll.fla
Creazione
Importazione
Come nel primo caso, importiamo nel nostro documento una serie di immagini già ottimizzate in editor esterni. Il
numero di queste immagini è indifferente, l'importante è che siano più di una: inoltre, non ci sono limitazioni in
relazione alle dimensioni, dal momento che non è presente alcun DuplicateMovieClip.
Lo scopo di questo scroll sarà quello di collegare il visitatore, tramite la pressione di un tasto, ad alcune pagine web di
grande utilità. Per questo motivo, le immagini saranno le catture delle pagine principali di questi siti, in dimensioni
ridotte. Una volta importate, le immagini verranno inserite una ad una in movieclip, sempre per evitare eventuali errori
del plugin.
Il pulsante trasparente
Prima di procedere alla creazione del movieclip da far scorrere, creiamo un pulsante trasparente: sulla timeline
principale, disegniamo un rettangolo largo 30 pixel e alto 130. Lo selezioniamo, premiamo il tasto F8, e lo convertiamo
in pulsante con il nome pulsante. Editiamo il pulsante, cliccandolo due volte, e trasciniamo il contenuto dal frame "Up"
nel frame "Hit".
Torniamo alla timeline principale, e cancelliamo il pulsante (che rimarrà nella libreria).
I movieclip
Spiegherò la procedura di creazione di uno solo dei movieclip, dal momento che sono tutti uguali tranne pochi
particolari.
Cliccando sul pulsante + in basso a sinistra nella libreria, aggiungiamo un movieclip che chiameremo clip001.
All'interno di questo movieclip, in un layer con nome "immagine", trasciniamo dalla libreria la prima delle immagini
importate, e la posizioniamo con l'angolo superiore sinistro al centro del movieclip.
Aggiungiamo un altro layer, che chiameremo "scritta", sotto quello "immagine". In questo layer, alla distanza di 5 pixel

dalla destra dell'immagine, disegniamo un rettangolo colorato, con colore diverso per ogni movieclip. Sopra questo
rettangolo, posizioniamo, ruotata di 270 gradi, una scritta con il nome del sito.
Aggiungiamo un altro layer, nome "pulsante", nel quale trasciniamo dalla libreria un'istanza di pulsante. Posizioniamo
il pulsante sopra il rettangolo colorato, e gli associamo lo script:
on (release) {
_root.indirizzo();
}
Con questo script, alla pressione sul pulsante, non faremo altro che richiamare la funzione indirizzo presente a livello
della _root. Per distinguere poi un pulsante dall'altro, ci serviremo di altri parametri.
Tutti i movieclip avranno questa impostazione: le cose da cambiare sono le immagini, il colore del rettangolo, e la
scritta. I nomi dei movieclip non hanno importanza: per comodità, però, conviene chiamarli clip001, clip002, clip003,...,
clip007 (il numero delle immagini).
Il moveclip "scorrimento"
Aggiungiamo un movieclip nella libreria, e chiamiamolo scorrimento. All'interno di questo, posizioniamo i 7
movieclip contenenti le immagini. I movieclip andranno posizionati uno accanto all'altro, a distanza di 5 pixel, partendo
a sinistra con clip001: questo, il primo, avrà l'angolo superiore sinistro al centro del movieclip principale.
Pulsanti di scorrimento
Nella timeline principale, aggiungiamo un layer di nome "scritte", e scriviamo due campi di testo statici come in figura:
Selezioniamo le scritte una alla volta, e convertiamole in movieclip.
Lo stage
Andiamo alla timeline principale. Abbiamo già un layer contenente i pulsanti di scorrimento: nello stesso layer,
aggiungiamo due campi di testo dinamici, chiamati rispettivamente titolo e sottotitolo, entrambi a linea singola e con
opzione "html".
Aggiungiamo un layer maschera, sul quale disegniamo un rettangolo di misure 235x130: attraverso questa maschera,

vedremo scorrere le immagini. Nel layer sotto, che setteremo come mascherato, trasciniamo un'istanza del movieclip
scorrimento, alla quale diamo scorrimento come nome di istanza, e associamo:
onClipEvent (load) {
fine = _x;
frame = 3;
}
onClipEvent (enterFrame) {
inizio = _x;
spostamento = (fine-inizio)/frame;
_x += spostamento;
}
Questo script, si basa sulla trasposizione della formula fisica del moto uniformemente decelerato. Senza spiegare troppo
approfonditamente: abbiamo una posizione iniziale per il movieclip. Assegniamo una posizione finale, e dato un
numero di frame fissi, calcoliamo qual'è lo spostamento che deve effettuare il movieclip per ogni frame.
Se il punto iniziale è fisso, cioè non varia durante lo spostamento, l'effetto è questo:
Se invece il punto di inizio varia con lo spostamento, e coincide di volta in volta con la posizione attuale del movieclip,
l'effetto sarà molto diverso:
Esempio pratico: dobbiamo far fare al movieclip uno spostamento di 100 pixel in dieci frame. 100 diviso 10 è uguale a
10: ad ogni frame, aggiungiamo alla posizione del movieclip, 10 pixel, e otteniamo il primo effetto. Questo perchè
attraverso tutto il processo, la posizione iniziale rimane fissa.
Se invece, ad ogni frame, calcoliamo il tutto rispetto ad una nuova posizione iniziale, al primo spostamento il passo sarà
di dieci pixel, mentre al secondo sarà di 90/10, cioè 9: al terzo 80/10, cioè 8, e così via. In questo modo, man mano che
avanza il movieclip, gli spostamenti saranno sempre più brevi, dando l'effetto di decelerazione.
Abbiamo il nostro movieclip fermo in una posizione. Tramite i pulsanti di scorrimento, daremo al movieclip una nuova
posizione finale, che questo raggiungerà tramite la formula descritta:
// al caricamento del movieclip
onClipEvent (load) {
// setta come posizione iniziale quella attuale
fine = _x;
// setta la variabile "fine" come 3
frame = 3;
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// considera come inizio la posizione attuale del movieclip
inizio = _x;
// valuta come "spostamento" il valore di fine-inizio
// fratto frame (valore sempre minore)
spostamento = (fine-inizio)/frame;
// somma al valore della _x del movieclip, quello di spostamento

_x += spostamento;
}
Posizioniamo il movieclip in modo che il primo clip interno sia sotto la maschera: questo sarà il punto massimo in cui
potrà arrivare scorrendo verso destra. Viceversa, posizionando il movieclip con l'ultimo clip sotto la maschera, potremo
vedere il valore che dovrà assumere quando sarà spostato al massimo a sinistra.
Al pulsante per scorrere verso destra assegneremo:
onClipEvent (mouseDown) {
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
_parent.scorrimento.fine -= 240;
}
}
e a quello per scorrere verso sinistra:
onClipEvent (mouseDown) {
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
_parent.scorrimento.fine += 240;
}
}
L'unica differenza sta nel fatto che con un pulsante il valore della _x aumenta, con l'altro diminuisce (240 è la larghezza
di ciascuno dei movieclip interni: quindi lo spostamento perché un nuovo movieclip si possa trovare sotto la maschera
ed essere visibile).
Il problema, ora, è di fare in modo che scorrendo in un lato o nell'altro, non si arrivi al punto in cui sotto la maschera
non c'è più niente. Sapendo quindi che gli spostamenti da fare sono 7 (quanti i movieclip interni), settiamo nel primo
frame della timeline principale:
i = 1;
e aggiungiamo al codice dei due pulsanti:
onClipEvent (mouseDown) {
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
if (_parent.i < 7) {
_parent.scorrimento.fine += 240;
_parent.i++;
}
}
}
onClipEvent (mouseDown) {
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
if(_parent.i > 1) {
_parent.scorrimento.fine += 240;
_parent.i--;

}
}
}
Man mano, quindi, che scorriamo il movieclip, tramite i pulsanti variamo anche il valore di i, aumentandolo o
diminuendolo a seconda della direzione. Se il valore di i è compreso tra 1 e 7, lo spostamento avverrà.
Infine, al codice dei due pulsanti, assegniamo anche un'ultima riga:
onClipEvent (mouseDown) {
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
if(_parent.i > 1) {
_parent.scorrimento.fine += 240;
_parent.i--;
_parent.scritta();
}
}
}
con la quale, ogni volta che avviene uno spostamento, richiamiamo la funzione scritta presente nella _root.
Le due funzioni
Abbiamo visto i richiami a due funzioni distinte, indirizzo e scritta. Vediamo entrambe, a partire dall'ultima citata, e
richiamata dai pulsanti di scorrimento. Nel primo frame della timeline, scriviamo:
link = new Array(contenuto1);
sottotitoli = new Array(contenuto2);
function scritta () {
titolo = "" + link[i-1] + "";
sottotitolo = sottotitoli[i-1];
}
Per ragioni di spazio non posso scrivere ciò che è al posto di contenuto1 e contenuto2, ma spiego cos'è. Nel primo caso,
abbiamo una lista di indirizzi relativi ai siti di cui trattiamo, e le cui pagine principali sono raffigurate nelle immagini
importate. La forma in cui sono scritti, è questa:
"indirizzo1", "indirizzo2", "indirizzo3", .... eccetera.
Nell'altro array, invece, sono contenuti dei sottotitoli descrittivi dei siti, sempre nella stessa forma:
"sottotitolo1", "sottotitolo2", "sottotitolo3", .... eccetera.
Quando si clicca su un pulsante, viene richiamata la funzione. La funzione valuta il valore di i, compreso tra 1 e 7 (e che
quindi ci da la posizione del movieclip scorrimento, indicando quale clip interno è sotto la maschera), ed estrapola dai
due array i valori corrispondenti all'indirizzo e al sottotitolo del sito visualizzato. Quindi li scrive nei due campi di testo
dinamici creati in precedenza. In quello "sottotitoli", si limita a mettere l'elemento i-1 dell'array sottotitoli (la
numerazione dell'array parte con lo 0, e quindi gli elementi vanno dallo 0 al 6): nel campo titoli, invece, sfrutta
l'opzione html creando un testo cliccabile.
La stringa creata, sarà del tipo: indirizzo, solo che al posto di indirizzo andrà

il valore dell'elemento i-1 dell'array link.
La seconda funzione è questa:
function indirizzo () {
getURL (link[i-1], "_blank");
}
Molto semplicemente, quando si preme uno dei pulsanti dei clip interni, la funzione controllo il valore corrispondente a
i-1 dell'array link (un URL), e lo apre in una nuova finestra.
Form mail
Quello che faremo, in questa sezione, è costruire un modulo per l'invio di un'email dal sito: questo modulo non fa uso di
linguaggi esterni, ma invia i dati al client di posta dell'utente, client che poi invierà il messaggio.
Questa soluzione prevede una serie di svantaggi e di vantaggi, che elencherò alla fine: ma rientra in quello che era lo
scopo del sito, l'utlizzo (quasi) esclusivo del Flash.
Creiamo un nuovo documento Flash, 700x300, 24 fps: andiamo al menu File/Open As Library, e apriamo come libreria
il file flash5.fla. Da questo, trasciniamo nella libreria del nuovo filmato, il movieclip base. Allo stesso modo, apriamo
come libreria il filmato testo.fla, dal quale prendiamo il movieclip ombra. Salviamo quindi con il nome contatti.fla
Costruzione
Funzionalità
Il nostro semplice form sarà composto da 4 campi, tutti obbligatori: nome del visitatore, indirizzo email, città di
provenienza, corpo del messaggio. Inoltre, avremo due checkbox indipendenti, che serviranno a determinare due
opzioni diverse nella risposta. Il riempimento corretto dei campi, sarà verificato da un controllo sui singoli inserimenti.
Struttura
In Flash, tramite il pannello Text Options, si può assegnare ad un campo di testo, sfondo e contorni. Purtroppo questi
non possono essere modificati, nel senso che ne esiste un'unica versione: sfondo bianco e contorni neri.
Se quindi vogliamo dare sfondo e contorni differenti, dobbiamo inserire un campo di testo normale in un layer, e nel
layer sotto, disegnare un rettangolo con i colori voluti. A questo scopo, noi utilizzeremo il movieclip base.
Innanzitutto, apriamo il file contatti.fla, e creiamo i layer secondo lo schema della figura:
Andiamo al layer "sfondi", e posizioniamo sullo stage 4 istanze del movieclip base, con dimensioni e posizioni
differenti:

Andiamo ora al layer "ombre", e trasciniamo sullo stage due istanze del movieclip ombra per ogni sfondo,
posizionandole nei lati superiore e sinistro:
Nel layer "titoli" inseriamo, accanto a ciascuno sfondo, il titolo del campo del form, e quindi: "nome", "email", "città",
"testo".
Nel layer pulsanti, inseriamo due campi di testo statici, che selezioneremo uno alla volta, e convertiremo, tramite il tasto
F8, in movieclip:
Infine, sempre nello stesso layer, inseriremo accanto allo sfondo che conterrà il corpo del messaggio, due istanze dello
stesso movieclip, contenente una freccia.
Alle due frecce per lo scorrimento, assegniamo uno script già visto:
onClipEvent (load) {
colore = new Color(this);
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
colore.setRGB( 0xFFFFFF );
premuto = true;
}

}
onClipEvent (mouseUp) {
colore.setRGB( 0xFFCC33 );
premuto = false;
}
onClipEvent (enterFrame) {
if (premuto) {
_parent.testo.scroll--;
}
}
nel pulsante per scorrere verso l'alto, e
onClipEvent (load) {
colore = new Color(this);
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
colore.setRGB( 0xFFFFFF );
premuto = true;
}
}
onClipEvent (mouseUp) {
colore.setRGB( 0xFFCC33 );
premuto = false;
}
onClipEvent (enterFrame) {
if (premuto) {
_parent.testo.scroll++;
}
}
per scorrere verso il basso. Quella che viene modificata è la proprietà scroll del campo di testo di input testo, che
conterrà il corpo del messaggio inserito dal visitatore. I restanti comandi sono per cambiare il colore della freccia alla
pressione del tasto sinistro del mouse (naturalmente, la pressione in assenza di testo, o di testo con un numero di righe
inferiore a quelle visibili, non sortirà alcun effetto).
Campi di testo
Nel layer "caselle", inseriamo 4 campi di testi. Questi campi, dovranno essere sovrapposti agli sfondi del layer
sottostante, e avere le stesse rispettive dimensioni. Vediamo le caratteristiche di ogni campo:
Tutti e quattro i campi di testo hanno le stesse impostazioni in relazione ai caratteri. Come Font, scegliamo il _sans
(nessun peso aggiuntivo perchè carattere dispositivo), come dimensioni 10, e come colore il nero.

Per quanto riguarda l'allineamento, i quattro campi sono uguali: a sinistra.
Nel pannello "Opzioni del Testo", scegliamo Input Text dal menu. I primi tre campi (nome, email, città), saranno
impostati come linea singola, mentre il campo testo come Multilinea. Nel campo variabile, a seconda dei casi,
inseriremo le variabili già elencate. Nel campo Max Chars, il numero massimo di caratteri: per i primi tre, una trentina
al massimo. Per il testo, anche un migliaio.
Oltre a questi quattro campi, ne inseriamo un altro appena sotto i pulsanti per l'invio. Questa volta si tratterà di un
campo di testo dinamico, e non di input: la variabile associata sarà out.
I checkbox
Costruiamo adesso il movieclip che fungerà da checkbox, e che useremo due volte all'interno del form.
Clicchiamo sul + in basso a sinistra nel pannello libreria, e aggiungiamo un movieclip che chiameremo checkboxin.
All'interno di questo movieclip, creiamo tre layer: il primo in alto lo chiameremo "tick", il secondo "testo", il terzo
"casella". Nel layer "casella", trasciniamo dalla libreria un'istanza del movieclip base, che ridimensioniamo a 10 pixel
per 10, e che posizioniamo al centro dello stage. Nel layer "testo", inseriamo un campo di testo dinamico a singola linea:
il colore del carattere è indifferente, la variabile associata è _parent.scelta (cioè il nome di istanza del movieclip che
conterrà checkboxin).
Nel secondo frame del layer "tick" (il primo resterà vuoto), inseriamo un'istanza del movieclip tick, contenente il
simbolo di spunta in grigio, e centrata sul movieclip base nel layer "casella". Nel terzo frame, un'altra istanza del
movieclip tick, questa volta tinta, tramite il pannello effetti, di nero. Quello che otterremo sarà questo:

Secondo frame del movieclip checkboxin
Terzo frame del movieclip checkboxin
Andiamo alla timeline principale, e trasciniamo un'istanza del movieclip checkboxin sullo stage. Le assegniamo come
nome di istanza interno, e associamo questo script:
onClipEvent(load){
_root[_parent._name+"1"] = _parent.scelta+": no"
stop();
}
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
sopra = true;
}else{
sopra = false;
}
}
onClipEvent(mouseDown){
if(sopra){
premuto = true;
this.gotoAndStop(2);
}
}
onClipEvent(mouseUp){
if(premuto){
if(sopra){
if (!aperto) {
this.gotoAndStop (3);
_root[_parent._name+"1"] = scelta + ": si";
} else {
this.gotoAndStop (1);
_root[_parent._name+"1"] = scelta + ": no";
}
aperto = !aperto;
}else{
if (!aperto) {
this.gotoAndStop (1);
} else {
this.gotoAndStop (3);
}
}

}
premuto = false;
}
Selezioniamo il movieclip sullo stage, e premiamo F8: lo convertiamo in un altro movieclip, che chiameremo
checkboxout.
Traciniamo sullo stage, dalla libreria, un'altra istanza di questo nuovo movieclip: alla prima, come nome di istanza,
diamo messaggio, alla seconda, materiale.
Alla prima associamo:
onClipEvent (load) {
scelta = "Messaggio di conferma";
}
alla seconda:
onClipEvent (load) {
scelta = "Invio del materiale";
}
Vediamo di fare un po' d'ordine.
Nei due movieclip che fungono da checkbox, con quest'ultimo script, abbiamo settato la variabile scelta, diversa per
ognuno.
Con lo script associato al movieclip interno, invece, settiamo una variabile sulla timeline principale, che ci indica se la
scelta è per il si, o per il no (no di default). Vediamo i casi per uno dei due movieclip:
// al caricamento del movieclip
onClipEvent(load){
// sulla root setta la variabile uguale al nome del
// movieclip che contiene questo, più il numero 1, con
// il valore di scelta , più ": no".
// quindi se il movieclip si chiama "messaggio", e
// scelta è "messaggio di conferma", sulla root
// troveremo: messaggio1 = "Messaggio di conferma: no"
_root[_parent._name+"1"] = _parent.scelta+": no"
stop();
}
// script già visto per stabilire se si è sopra il
// movieclip con il puntatore del mouse
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
sopra = true;
}else{
sopra = false;
}

}
// alla pressione sul movieclip, questo va al frame 2
// di checkboxin, dove c'è il tick grigio
onClipEvent(mouseDown){
if(sopra){
premuto = true;
this.gotoAndStop(2);
}
}
// al rilascio del pulsante sinistro del mouse
onClipEvent(mouseUp){
if(premuto){
// se siamo ancora sul movieclip
if(sopra){
// se la casella era deticcata, la ticchiamo
// andando al frame 3, dove c'è il tick nero
if (!aperto) {
this.gotoAndStop (3);
// e settiamo: messaggio1="Messaggio di conferma: si"
_root[_parent._name+"1"] = scelta + ": si";
// altrimenti
} else {
// deticchiamo la casella andando al frame 1
this.gotoAndStop (1);
// e settiamo: messaggio1="Messaggio di conferma: no"
_root[_parent._name+"1"] = scelta + ": no";
}
aperto = !aperto;
// altrimenti (abbiamo rilasciato fuori dal moveiclip)
}else{
if (!aperto) {
// se il pulsante era aperto, vai al frame 1
this.gotoAndStop (1);
// altrimenti vai al frame 2
} else {
this.gotoAndStop (3);
}
}
}
premuto = false;
}
Gran parte di questo script potrebbe sembrare, per così dire, inutile. A parte il codice per settare la variabile sulla root
che ci dice se inviare o no il messaggio di conferma, tutto il resto serve a far assomigliare il checkbox a quello di

Windows. Infatti, in quello di Windows, il tick passa per un colore intermedio, prima di cambiare stato, e rimane di quel
colore per tutta la durata della pressione. Inoltre, rilasciando fuori dal checkbox, questo ritorna allo stato precedente.
Pulsante "ripristina"
Andiamo al layer dove è contenuto il movieclip con la scritta "ripristina". Questo, una volta premuto, dovrà resettare il
contenuto di tutti i campi di testo. Gli associamo:
onClipEvent (load) {
colore = new Color(this);
}
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)) {
colore.setRGB(0xFFCC33);
sopra = true;
}else{
colore.setRGB(0xFFFFFF);
sopra = false;
}
}
onClipEvent (mouseDown) {
if (sopra) {
_parent.out = "";
_parent.testo = "";
_parent.nome = "";
_parent.citta = "";
_parent.mail = "";
_parent.messaggio.interno.aperto = false;
_parent.materiale.interno.aperto = false;
_parent.messaggio.interno.gotoAndStop(1);
_parent.materiale.interno.gotoAndStop(1);
_parent.materiale1 = _parent.materiale.interno.scelta + ": no";
_parent.messaggio1 = _parent.messaggio.interno.scelta + ": no";
}
}
Quello che fa questo script, non è altro che svuotare i campi di testo presenti nella root. Per essere più precisi, con
_parent.testo = ""; inseriamo nella casella testo, una stringa che non contiene alcun carattere.
Inoltre, questo pulsante deve anche resettare i checkbox. Quindi setta in entrambi la variabile aperto come falsa (serve a
stabilire se siamo sul frame 1 o 3) , rimanda entrambi al frame 1 (dove non è presente il tick nella casella), e setta nella
root entrambe le variabili d'opzione sul no.
Pulsante "invia"
Associamo al movieclip con la scritta "invia":

onClipEvent (load) {
colore = new Color(this);
}
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)) {
colore.setRGB(0xFFCC33);
sopra = true;
}else{
colore.setRGB(0xFFFFFF);
sopra = false;
}
}
onClipEvent (mouseDown) {
if (sopra) {
_parent.convalida();
}
}
Il contenuto importante dello script, è quello assoggettato al mouseDown. Se il puntatore del mouse è sopra il movieclip,
e viene premuto il tasto sinistro del mouse, allora viene richiamata la funzione convalida, definita a livello della _root.
La funzione di convalida
Il pulsante "invia", come abbiamo visto, richiama la funzione convalida definita nella _root. Lo script per la convalida
dei campi di input, è un po' laborioso, ma necessario per evitare che si presentino problemi all'apertura del client di
posta. Ho graficamente diviso lo script in sezioni, per poter meglio distinguere i vari passaggi: ogni volta che un
controllo viene superato, si passa al controllo successivo. Se invece è presente un errore, questo viene scritto nel campo
out.
Per ragioni di spazio, non ho incluso il contenuto degli array errori e caratteri. Nel primo sono elencati i possibili
messaggi di errore, nel secondo, tutti i caratteri considerati invalidi in un indirizzo email.
// prima parte
email = "indirizzo@host.it";
destinatario = "Staff del sito";
soggetto = "Email da sito";
spedisci = "mailto:" + destinatario + "";
function convalida () {
errori = new Array(contenuto1);
err = 0;
count = 0;
errore = false;
if (nome == "" || nome == undefined) {
errore = true;
err = 0;

}
// seconda parte
if (!errore) {
caratteri = new Array(contenuto2);
for (i=0; i=0) {
errore = true;
err = 1;
}
}
}
// terza parte
if (!errore) {
for (i=0; i

}
// quinta parte
if (!errore) {
if (citta == "" || citta == undefined) {
errore = true;
err = 2;
}
}
// sesta parte
if (!errore) {
if (testo == "" || testo == undefined) {
errore = true;
err = 3;
}
}
// settima parte
if (!errore) {
getURL (spedisci+"?subject="+soggetto+"&body="+"Nome: "+nome+" E-mail:
"+mail+" Città: "+citta+" "+messaggio1+" "+materiale1+" Testo: "+testo);
out = "";
} else {
out = errori[err];
k = err-1;
}
}
Prima parte
Nella prima parte, vengono definite la funzione e alcune variabili che serviranno nei vari controlli:
• email: l'indirizzo email a cui verrà inviato il messaggio
• destinatario: il nome che apparirà nel campo "destinatario" del client di posta
• soggetto: ciò che apparirà nel campo "soggetto" del client
• spedisci: una stringa formata da "mailto:" più il destinatario più l'email. In questo caso: "mailto:Staff del
sito"
• convalida: la funzione, che non necessita del passaggio di parametri
• errori: array contenente i possibili messaggi di errore
• err: variabile che indicherà eventualmente il numero identificativo dell'errore
• count: un contatore, all'inizio settato sullo 0 (ogni volta che viene chiamata la funzione, il contatore viene azzerato)
• errore: booleano per stabilire se c'è un errore oppure no
A questo punto, avviene il primo controllo:
if (nome == "" || nome == undefined) {
errore = true;

err = 0;
}
Se il campo di testo associato al nome, è vuoto oppure non definito, la variabile errore viene settata su vero, e il
messaggio di errore associato è lo 0 ("Scrivi il nome"). Quindi, bisogna comunque scrivere qualcosa nel campo "nome".
Seconda Parte
if (!errore) {
caratteri = new Array(contenuto2);
for (i=0; i=0) {
errore = true;
err = 1;
}
}
}
Superato il primo controllo (if(!errore) significa se la variabile errore è ancora falsa), viene definito un array di caratteri
che non possono essere contenuti in un indirizzo email. Quindi, per tutti i caratteri della lunghezza dell'array (for (i=0;
i

Quando il controllo è terminato, se count non uguale a 1 (c'è una chiocciola, ed è anche l'unica), allora vuol dire che ce
ne sono di più oppure che non ce n'è neanche una: in ogni caso, errore diventa vera, e il messaggio di errore è lo stesso
del precedente controllo.
Quarta parte
if (!errore) {
dividi = mail.split("@");
if (dividi[0].length

Quinta parte
if (!errore) {
if (citta == "" || citta == undefined) {
errore = true;
err = 2;
}
}
Se non ci sono errori, viene verificato che nel campo "citta" (la città di provenienza), sia stato scritto qualcosa. Quindi,
se "citta" è vuota o indefinita, c'è errore, e il messaggio in uscita sarà "Scrivi la tua città di provenienza".
Sesta parte
if (!errore) {
if (testo == "" || testo == undefined) {
errore = true;
err = 3;
}
Come nel precedente, solo che viene verificato se è stato scritto qualcosa nel campo "testo". Il messaggio di errore, nel
caso, è : "Scrivi il messaggio".
Settima parte
if (!errore) {
getURL (spedisci+"?subject="+soggetto+"&body="+"Nome: "+nome+" E-mail:
"+mail+" Città: "+citta+" "+messaggio1+" "+materiale1+" Testo: "+testo);
out = "";
} else {
out = errori[err];
k = err-1;
}
}
Terminati i controlli, se non c'è alcun errore, i dati vengono inviati al client di posta: l'argomento del getURL, è un
espressione somma di tutti i dati che vengono raccolti, e ordinati in una unica stringa. Per capire cosa significa,
valutiamo un semplice caso, supponendo di avere questa situazione:
nome = "Pippo"
mail = "pippo@topolinia.wd"
citta = "topolinia"
testo = "complimenti!"
e ticcato solo il primo dei checkbox. L'argomento del getURL sarà:
mailto:Staff del sito?subject=Email da sito&body=Nome: pippo Email: pippo@topolinia.wd Città:
topolinia Messaggio di conferma: sì Invio del materiale: no Testo: complimenti!

Se invece c'è un errore, viene visualizzato, nel campo di testo dinamico out, il messaggio corrispondente all'errore, sulla
base dell'array definito all'inizio.
Il TAB
Quando nel browser si ha un form in html, premendo il tasto TAB ci si sposta da un campo all'altro. La stessa cosa
succede in Flash, solo che ci sono due problemi: innanzitutto, il focus del documento deve essere sul filmato. Poi, il
player segue un proprio ordine, nello stabilire su quale campo focalizzare: ordine che non sempre rispetta il percorso
che vorremmo noi.
How is the tab order for form fields in the Flash player determined?
Il primo problema è già risolto in partenza, dal momento che per accedere al form dobbiamo ciccare su un pulsante nel
filmato: una volta cliccato sul filmato, questo ha il focus.
Per il secondo problema, invece, dobbiamo creare un percorso tra i campi, e fare in modo che il TAB segua questo
percorso: utilizzeremo quindi il metodo setFocus, che ci permette di spostare il cursore sul campo voluto.
Array
Andiamo alla timeline principale, e nel primo frame, assieme alla funzione convalida, scriviamo:
campi = new Array("nome","mail","citta","testo");
k = 0;
Selection.setFocus(campi[k]);
In questo modo abbiamo creato un array contenente le variabili associate ai campi di testo, nell'ordine in cui vogliamo
che vengano selezionati. Inoltre, abbiamo settato la variabile k uguale a 0, e focalizzato il campo a cui è associata la
variabile indicata nella posizione 0 dell'array campi.
Il pulsante nascosto
Nel layer "pulsanti", fuori dall'area visibile dello stage, creiamo un pulsante, il più leggero possibile e senza effetti:
infatti rimarrà nascosto, e servirà solo come appoggio per lo script. Gli associamo:
on (keyPress "") {
convalida();
}
on (keyPress "") {
if (Key.isDown(Key.TAB) && !Key.isDown(Key.SHIFT)) {
if (k == campi.length-1) {
k = 0;
} else {
k++;
}
}
if (Key.isDown(Key.TAB) && Key.isDown(Key.SHIFT)) {
if (k == 0) {
k = campi.length-1;

} else {
k--;
}
}
Selection.setFocus(campi[k]);
}
Le prime tre righe servono semplicemente a richiamare la funzione convalida quando viene premuto il tasto Invio. Le
altre invece servono per il controllo del TAB.
Innanzitutto stabiliamo se stiamo premendo il tasto TAB e basta, o anche lo SHIFT: questo ci serve per decidere in
quale direzione scorrere i campi.
Nel primo caso, valutiamo se k è uguale al valore della lunghezza dell'array campi meno 1 (e quindi se il focus è sul
campo "testo"), nel qual caso diamo a k il valore di 0. Se così non è, aumentiamo il valore di k di una unità.
Nel caso vengano premuti TAB e SHIFT assieme, se k è uguale a 0 (siamo sul primo campo), assegniamo a k il valore
della lunghezza dell'array campi meno 1, altrimenti ne diminuiamo il valore di una unità.
A questo punto, semplicemente settiamo il focus sul campo di testo corrispondente alla posizione k dell'array campi.
Vantaggi e svantaggi
I vantaggi di questo tipo di form mail sono presto detti:
• non c'è bisogno che lo spazio web supporti qualche linguaggio particolare
• è molto facile da configurare
Gli svantaggi:
• non si può mandare a capo nell'inserimento dei dati nel client, se non in locale
• scrivendo nel corpo del messaggio, gli a capo non vengono mantenuti
• se manca un client di posta (tutti i punti internet pubblici), il form non serve a nulla
Il pannello di controllo
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.
Il pannello di controllo
Tooltip
I tooltip sono quelle scritte che appaiono, nei nostri sistemi operativi, vicino al puntatore del mouse, quando ci
soffermiamo per qualche secondo su un pulsante, o un menu. Generalmente funzionano a tempo, e le scritte sono
piuttosto corte.
Noi invece vogliamo creare dei tooltip che offrano un aiuto nella comprensione delle utilità presenti nel filmato: quindi,
se necessario, anche un po' dilungandoci. Per questo motivo creeremo una modalità di aiuto nella quale, una volta
attivata, i suggerimenti appariranno immediatamente, e rimarranno visibili finche non saremo usciti dall'area sensibile.
Disegno
Aggiungiamo un movieclip, che chiameremo barraTooltip, alla nostra libreria, tramite il pulsante + in basso a sinistra
nel pannello. In questo movieclip, disegniamo un rettangolino di 60 pixel in larghezza e 10 in altezza, con l'angolo
inferiore-destro sul centro del movieclip.
Aggiungiamo alla libreria un'altro movieclip, che chiameremo tooltip. All'interno di questo movieclip, in un layer
chiamato "barra", posizioneremo un'istanza del movieclip barraTooltip, con l'angolo inferiore-destro nel punto di
registrazione: alla barra daremo come nome di istanza barra. In un layer sopra, chiamato "scritta", posizioneremo un
campo di testo dinamico, con associata la variabile testo.
Particolare importante nella scelta del carattere: la barra sottostante la casella, dovrà essere ridimensionata in base alla
lunghezza della stringa in essa contenuta. L'unico modo per determinare la lunghezza della stringa, è moltiplicare il
numero di caratteri che la compongono per una costante. La costante, naturalmente, è la larghezza di una singola lettera.
Com'è facilmente deducibile, la Font migliore per questo scopo è quella che ha tutte le lettere larghe uguali. Anche se
questa Font non esiste (ci sarà sempre la lettera " i " a essere più stretta delle altre), la migliore approssimazione, anche
considerando le ridotte dimensioni, l'ho trovata nella hooge 05_55. Le maiuscole di questa Font, infatti, sono tutte
larghe uguali. Inoltre, visto che questa è una pixel Font, possiamo incorporare tutti i caratteri, posizionando la casella
secondo le linee guide indicate nell'apposito articolo.
Codice del tooltip

Andiamo adesso alla timeline principale, nel layer "tooltip", e trasciniamo dalla libreria allo stage un'istanza del
movieclip tooltip, al quale daremo, come nome di istanza, tooltip. Gli associamo:
onClipEvent (load) {
barra._visible = 0;
testo = "";
function scrivi(tip){
testo = tip.toUpperCase();
if(tip != ""){
barra._visible = 1;
barra._width = (testo.length*4.7);
}else{
barra._visible = 0
}
}
}
onClipEvent (mouseMove) {
_x = _root._xmouse;
_y = _root._ymouse;
updateAfterEvent();
}
Lo script è molto semplice: al caricamento del movieclip, la visibilità della barra è settata su 0, e il contenuto del
campo di testo "testo" è una stringa vuota (quindi non si vede niente). Quando viene richiamata la funzione scrivi, alla
quale viene passato come parametro una stringa, se la stringa contiene qualcosa, nel campo di testo viene scritto il
contenuto in lettere maiuscole, e la lunghezza della barra, ora visibile, viene settata moltiplicando il numero di lettere
della stringa per 4.7 (la larghezza di ogni carattere con quella Font). Se la stringa è vuota, invece, la barra torna
invisibile.
Ultimo accorgimento, ad ogni movimento del mouse, il movieclip segue il puntatore.
// al caricamento del movieclip
onClipEvent (load) {
// rendi la barra invisibile
barra._visible = 0;
// svuota il campo di testo
testo = "";
// dichiara la funzione "scrivi" che riceve
// come parametro la stringa "tip"
function scrivi(tip){
// riempi il campo "testo" con la stringa
// tutta in maiuscolo
testo = tip.toUpperCase();
// se la stringa non è vuota
if(tip != ""){
// rendi la barra visibile

arra._visible = 1;
// dai alla barra, come larghezza, il numero
// delle lettere di "testo" per 4.7
barra._width = (testo.length*4.7);
// altrimenti (la stringa è vuota)
}else{
// rendi la barra invisibile
barra._visible = 0
}
}
}
// ad ogni movimento del mouse
onClipEvent (mouseMove) {
// dai al movieclip le coordinate del
// puntatore del mouse
_x = _root._xmouse;
_y = _root._ymouse;
// forza un refresh dopo ogni spostamento
updateAfterEvent();
}
Codice del pulsante
Nel layer "pulsanti" della timeline principale di suono.fla, avevamo lasciato un movieclip contenente la scritta "aiuto".
A questo movieclip associamo:
onClipEvent (load) {
_root.aiuto = false;
colore = new Color(this);
colore.setRGB( 0xCCCCCC);
}
onClipEvent (mouseDown) {
if (sopra) {
_root.aiuto = !_root.aiuto;
brilla = !brilla;
_alpha = 100;
}
}
onClipEvent (mouseMove) {
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
sopra = true;
colore.setRGB( 0x000000 )
} else {
if(!_root.aiuto){
colore.setRGB( 0xCCCCCC);

}
sopra = false;
}
}
onClipEvent(enterFrame){
if(brilla){
if(_alpha == 100){
_alpha = 50;
}else{
_alpha = 100;
}
}
}
Al caricamento del movieclip, che fungerà da pulsante, la variabile aiuto contenuta nella _root verrà settata come falsa.
Cliccando sul pulsante, la variabile cambierà stato, diventando alternativamente vera o falsa: questo perchè solo quando
la variabile sarà vera, si avrà la modalità di aiuto, e i tooltip saranno visibili. Il resto dello script serve a far lampeggiare
la scritta durante la modalità di aiuto.
// al caricamento del movieclip
onClipEvent (load) {
// setta "aiuto" sulla root come falsa
_root.aiuto = false;
// crea un'istanza dell'oggetto Color associata al
// movieclip, e tingila di grigio
colore = new Color(this);
colore.setRGB( 0xCCCCCC);
}
// cliccando col tasto sinistro del mouse
onClipEvent (mouseDown) {
// se il puntatore del mouse è sul movieclip
if (sopra) {
// cambia lo stato di "aiuto" e di "brilla" da vero a
// falso, alternativamente, e setta l'alpha = 100
_root.aiuto = !_root.aiuto;
brilla = !brilla;
_alpha = 100;
}
}
// al movimento del mouse
onClipEvent (mouseMove) {
// se il puntatore tocca il movieclip
if (this.hitTest(_root._xmouse,_root._ymouse,false)) {
// setta la variabile "sopra" come vera

sopra = true;
// colora il movieclip di nero
colore.setRGB( 0x000000 )
// altrimenti
} else {
// se aiuto sulla root è falsa
if(!_root.aiuto){
// colora il movieclip di grigio
colore.setRGB( 0xCCCCCC);
}
// setta "sopra" come falsa
sopra = false;
}
}
// ad ogni riproduzione del movieclip
onClipEvent(enterFrame){
// se "brilla" è vera
if(brilla){
// se l'alpha è uguale a 100
if(_alpha == 100){
// settala su 50
_alpha = 50;
// altrimenti settala su 100
}else{
_alpha = 100;
}
}
}
Questo è il risultato dello script:
Richiamo della funzione
Abbiamo visto come i tooltip possano apparire solo in modalità d'aiuto, e come funzioni il movieclip con la barra e il
testo. Ora dobbiamo solo associare ai punti "caldi", lo script che nelle giuste condizioni richiami la funzione contenuta
in tooltip. Un'unica premessa: dal momento che la variabile aiuto è definita nella _root di questo filmato, e che questo
filmato verrà caricato nel livello 10, i richiami da tutti gli altri filmati dovranno essere effettuati sotto il controllo di
_level10.aiuto
Consideriamo un movieclip qualsiasi, in un qualunque filmato e su qualunque livello. Per generare una scritta, dovrà
avere associato questo script:
onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse, _root._ymouse, false) && _level10.aiuto) {
_level10.tooltip.scrivi("messaggio che deve apparire nel tooltip");
tip = true;

} else {
if (tip) {
_level10.tooltip.scrivi("");
tip = false;
}
}
}
Molto semplicemente, se il puntatore del mouse tocca il movieclip, e la variabile aiuto sul livello 10 è vera, allora viene
richiamata la funzione scrivi definita in _level10.tooltip, e il parametro che viene passato (la stringa), è il messaggio
incluso tra parentesi. Allo stesso modo, viene settata come vera la variabile tip. Quando invece il puntatore non tocca il
movieclip, se la variabile tip è vera, viene richiamata la funzione con la stringa vuota, e tip diventa falsa.
La variabile tip ha un compito importantissimo: se infatti non ci fosse, ogni movieclip richiamerebbe continuamente la
funzione con la stringa vuota, e i tooltip non si vedrebbero mai.
Questo è l'effetto completo:
Il pannello di controllo
Introduzione
In questa parte vedremo la costruzione del pannello degli strumenti: inizieremo dal contorno grafico, per poi arrivare al
movieclip "cuore" del pannello stesso. Man mano che procederemo, ci riagganceremo ad alcuni movieclip già inseriti
sullo stage, spiegandone funzionamento e scopi.
Disegno
Apriamo suono.fla, e aggiungiamo alla libreria, tramite il pulsante +, un movieclip che chiameremo pannello.
All'interno di questo movieclip, creiamo e rinominiamo layer secondo lo schema in figura.
Nel layer "pulsante" inseriamo un'istanza del movieclip freccia, con l'angolo superiore-sinistro nel punto di
registrazione. A questo movieclip associamo:
onClipEvent (load) {
inizio = _parent._x;
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
if (!aperto) {
_parent.fine = 320;

} else {
_parent.fine = inizio;
}
aperto = !aperto;
}
}
Con questo script, quando clicchiamo sul movieclip, alla variabile _parent.fine viene assegnato una volta il valore 320,
l'altra il valore inizio, fermato al caricamento del movieclip: questo valore è la posizione del movieclip che contiene la
freccia, all'avvio.
// al caricamento del movieclip
onClipEvent (load) {
// assegna a "inizio" il valore della posizione iniziale
// sull'asse delle x, del movieclip che contiene la freccia
// (nel nostro caso si tratta del movieclip "pannello")
inizio = _parent._x;
}
// al click del mouse
onClipEvent (mouseDown) {
// se il puntatore è sul movieclip
if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
// se la variabile "aperto" è vera
if (!aperto) {
// setta "fine" uguale a 320
_parent.fine = 320;
// altrimenti
} else {
// assegna a "fine" il valore di "inizio"
_parent.fine = inizio;
}
// cambia "aperto" con il proprio opposto booleano
aperto = !aperto;
}
}
Torniamo alla timeline principale: trasciniamo nel layer "pannello", un'istanza del movieclip omonimo. A questo
movieclip associamo:
onClipEvent (load) {
fine = _x;
accellerazione = 1.8;
inerzia = 1.5;
}
onClipEvent (enterFrame) {

inizio = _x;
spostamento = (spostamento+(fine-inizio)/accellerazione)/inerzia;
_x += spostamento;
}
Ad ogni riproduzione di questo movieclip, la posizione sull'asse delle X viene settata in base alla formula assoggettata
all'enterFrame. In base a questa formula, attribuiamo all'oggetto una coordinata finale, che raggiungerà con l'andamento
del moto elastico smorzato. All'avvio, questa coordinata finale, cioè la variabile fine, è la posizione stessa del movieclip,
dimodoché questo è fermo. Quando poi dall'interno del movieclip, il pulsante freccia ne cambia il valore, il movieclip
pannello si sposta di conseguenza. Questo è quello che otteniamo:
Torniamo all'interno del movieclip pannello: nel layer"ombra", posizioniamo un'istanza del movieclip freccia
leggermente spostato in basso e a destra, e modificato nella tinta ed alpha tramite il pannello effetti.
Adesso il pannello apparirà così:
Nel terzo layer dal basso, quello chiamato "scritta", inseriamo un semplice campo di testo con la parola "strumenti". Nel
layer "titoli", inseriamo quattro campi di testo statici, convertiti uno ad uno in movieclip, e nel layer "freccette", quattro
istanze del movieclip freccia, rimpicciolite e ruotate.
Ai quattro movieclip contenenti i titoli, associamo questo script:
onClipEvent(load){
colore = new Color(this);
}
onClipEvent(mouseMove){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
if(!premuto){
sopra = true;
colore.setRGB( 0xFFFFFF );
}
}else{
sopra = false;
if(!premuto){
colore.setRGB( 0x000000 );
}
}
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 );
// azione sottoposta al release
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Lo script, identico per tutti e quattro, tranne nella riga che ora è commentata, serve a riprodurre approssimativamente il
comportamento di un pulsante: l'azione viene assoggettata al rilascio del tasto sinistro del mouse sopra il movieclip,
come nell'on(release). Il resto del codice, è per i colori.
Andiamo al layer "barra", e disegniamo sotto i titoli e le freccette, una semplice barra grigia contornata di nero: farà da
sfondo al movieclip che conterrà gli strumenti veri e propri.
Il pannello di controllo
Il movieclip strumenti
Apriamo il file suono.fla. Aggiungiamo alla libreria un nuovo movieclip, che chiameremo strumenti: questo movieclip
dovrà essere composto da quattro layer, che si chiameranno "scritte", "cornice", "pulsanti" e "asset", di quattro frame
ciascuno.
Data
Aggiungiamo alla libreria un movieclip che chiameremo dataOra. All'interno di questo movieclip, posizioniamo due
campi di testo dinamici, uno accanto all'altro: ad uno associamo la variabile dat, all'altro la variabile ora.
Andiamo al layer "asset" del movieclip strumenti, e trasciniamo nel primo frame, dalla libreria, un'istanza del
movieclip dataOra. A questo movieclip associamo:
onClipEvent (load) {
giorni = new Array(contenuto1);
mesi = new Array(contenuto2);
tempo = new Date();

}
onClipEvent (enterFrame) {
}
ore = tempo.getHours();
minuti = tempo.getMinutes();
secondi = tempo.getSeconds();
oggi = tempo.getDate();
giorno = tempo.getDay();
nomegiorno = giorni[giorno];
mese = tempo.getMonth();
nomemese = mesi[mese];
anno = tempo.getFullYear();
ore = (ore

minuti = tempo.getMinutes();
// estrai da tempo i secondi (numero da 0 a 59)
secondi = tempo.getSeconds();
// estrai da tempo il giorno del mese (numero da 1 a 31) da associare all'array
oggi = tempo.getDate();
// estrai da tempo il giorno della settimana (numero da 0 a 6, da associare
// all'elemento dell'array, che per questo inizia con la domenica)
giorno = tempo.getDay();
// associa a nomegiorno l'elemento "giorno" dell'array "giorni"
nomegiorno = giorni[giorno];
// estrai da tempo il mese (numero da 0 a 11)
mese = tempo.getMonth();
// associa a nomemese l'elemento "mese" dell'array "mesi"
nomemese = mesi[mese];
// estrai da tempo l'anno corrente
anno = tempo.getFullYear();
// se le ore sono inferiori a 10, "ore" è uguale a "0"+ore, altrimenti a "ore"
ore = (ore

Impostazioni
Andiamo al quarto frame del movieclip strumenti. Inseriamo al centro della barra, una gif importata e convertita in
movieclip: ai lati, due campi di testo statici, che convertiamo in movieclip. Ad entrambi associamo lo stesso script che
abbiamo già visto per i titoli, solo che al posto della riga commentata, metteremo i comandi corrispondenti.
In quello di sinistra, scriviamo (ho incluso solo il mouseUp):
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
getURL("javascript:paginaIniziale()");
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
e in quello di destra:
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
getURL("javascript:preferiti()");
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Come possiamo vedere, i comandi sono i richiami a due funzioni Javascript che analizzeremo più avanti, e che ci
permetteranno, per alcuni browser, di inserire il sito tra i preferiti, o di settarlo come pagina iniziale.
Puntatore
Aggiungiamo alla libreria un movieclip nuovo, che chiameremo si-no. Questo movieclip sarà composto da due frame:
in uno la scritta "si", nell'altro la scritta "no". Andiamo al terzo frame del movieclip strumenti. Inseriamo due campi di
testo statici, come da figura, e accanto ad essi un'istanza del movieclip si-no, della gif puntatore, e del movieclip base.
Alle due istanze del movieclip si-no, abbiamo assegnato come script lo stesso usato per i titoli e per le impostazioni.
Vediamo invece cosa abbiamo assegnato (riporto solo il mouseUp), nella riga commentata, a quello del puntatore:
nClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );

if (!puntatore) {
_root.puntatore._visible = true;
_root.puntatore.vai = true;
_root.puntatore._x = _root._xmouse;
_root.puntatore._y = _root._ymouse;
Mouse.hide();
gotoAndStop(2);
} else {
_root.puntatore._visible = false;
_root.puntatore.vai = false;
Mouse.show();
gotoAndStop(1);
}
puntatore = !puntatore;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Analizziamo prima questa parte: al rilascio del tasto del mouse, se la variabile puntatore è falsa, il movieclip va al
frame 2 (la scritta "no"), altrimenti va al frame 1 (la scritta "si"), e il valore di puntatore viene invertito.
Abbiamo visto che al puntatore modificato, è associato uno script che serve a seguire quello del mouse: inoltre, all'avvio
del filmato, questo puntatore è invisibile. Quindi:
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!puntatore) {
_root.puntatore._visible = true;
_root.puntatore.vai = true;
_root.puntatore._x = _root._xmouse;
_root.puntatore._y = _root._ymouse;
Mouse.hide();
gotoAndStop(2);
} else {
_root.puntatore._visible = false;
_root.puntatore.vai = false;
Mouse.show();
gotoAndStop(1);
}
puntatore = !puntatore;
}else{

colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Quando clicchiamo sul movieclip, se la variabile puntatore è falsa, rendiamo il puntatore visibile e lo posizioniamo
all'altezza di quello del mouse, settiamo la variabile vai come vera (e quindi il puntatore modificato segue quello del
mouse), e nascondiamo il puntatore originale.
Quando clicchiamo nuovamente sul movieclip, nascondiamo il puntatore modificato, rendiamo visibile quello originale,
settiamo vai come falsa (il puntatore non segue più il mouse). Il non seguire più il mouse, se non visibile, serve ad
alleggerire il carico della CPU. Questo è quello che otteniamo:
Il pannello di controllo
Quadratini
In una delle sezioni precedenti, abbiamo inserito 3 istanze del movieclip base nel layer "quadratini" di suono.fla,
chiamandole quad1, quad2, quad3. Associamo ai tre movieclip questo stesso script:
onClipEvent (load) {
coloreCornice = new Color(cornice);
coloreRettangolo = new Color(rettangolo);
coloreCornice.setRGB( 0x000000 );
coloreRettangolo.setRGB( 0x666666 );
meta = 660;
frame = 10;
}
onClipEvent(enterFrame){
if(!fermo){
if (Math.abs(meta-_x) < 5) {
meta = random(400) + 300;
}
}
_x += (meta - _x)/frame;
}
Nella prima parte, sottoposta al load, settiamo il colore del quadratino: questo formato dal movieclip base, che al suo
interno contiene il movieclip rettangolo e il movieclip cornice. Creiamo una istanza dell'oggetto Color associata a
ciascuno dei due, e tingiamo rispettivamente la prima di grigio, e la seconda di nero.
Quindi, settiamo la variabile meta uguale 660 (sarà il primo punto in cui andranno i quadratini), e la variabile frame
uguale a 10.
Abbiamo già visto la formula seguente (qui in versione ridotta): si tratta del moto uniformemente decelerato. La meta, o
punto finale, viene deciso in maniera random (all'interno di un determinato intervallo). Quando si verifica la condizione
dell'if, allora viene stabilita una nuova meta. La condizione è verificata quando la posizione dell'oggetto a meno di 5

pixel dal punto che era stato definito come meta nel richiamo precedente.
Inoltre, tutto il processo di spostamento è soggetto alla variabile fermo, che deve essere falsa:
// al caricamento del movieclip
onClipEvent (load) {
// crea un'istanza dell'oggetto Color associata a "cornice
coloreCornice = new Color(cornice);
// crea un'istanza dell'oggetto Color associata a "rettangolo"
coloreRettangolo = new Color(rettangolo);
// tingi l'istanza (di nome coloreCornice) di nero
coloreCornice.setRGB( 0x000000 );
// tingi l'istanza (di nome coloreRettangolo) di grigio scuro
coloreRettangolo.setRGB( 0x666666 );
// come prima meta setta 660
meta = 660;
// dai a "frame" il valore 10 (è il "tempo" di spostamento)
frame = 10;
}
// ad ogni riproduzione del movieclip
onClipEvent(enterFrame){
// se la variabile "fermo" è falsa
if(!fermo){
// se il valore assoluto della distanza tra meta e la posizione
// attuale del movieclip, è inferiore ai 5 pixel
if (Math.abs(meta-_x) < 5) {
// stabilisci una nuova meta, con una scelta random
// all'interno dell'intervallo 300-700
meta = random(400) + 300;
}
}
// aggiungi alla posizione del movieclip sull'asse delle X, il
// valore di "meta" meno l'attuale posizione, fratto "frame"
_x += (meta - _x)/frame;
}
Al movieclip si-no relativo ai quadratini, assegnamo come script (riporto solo il mouseUp), nella riga commentata:
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!quadrati) {
gotoAndStop (1);
for (i = 1; i < 4; i++) {
_root["quad" + i].fermo = true;

_root["quad" + i].meta = 650+(10*i);
}
} else {
gotoAndStop (2);
for (i = 1; i < 4; i++) {
_root["quad" + i].fermo = false;
}
}
quadrati = !quadrati;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Analizziamo prima questa parte: al rilascio del tasto del mouse, se la variabile quadrati è falsa, il movieclip va al frame
1 (la scritta "si"), altrimenti va al frame 2 (la scritta "no"), e il valore di quadrati viene invertito.
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!quadrati) {
gotoAndStop (1);
for (i = 1; i < 4; i++) {
_root["quad" + i].fermo = true;
_root["quad" + i].meta = 650+(10*i);
}
} else {
gotoAndStop (2);
for (i = 1; i < 4; i++) {
_root["quad" + i].fermo = false;
}
}
quadrati = !quadrati;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Cliccando sul movieclip, se quadrati è falsa, inneschiamo un ciclo con il for. Per la i che va da 1 a 3, prendiamo i
quadratini con nome di istanza "quad" più i (e quindi, appunto, quad1, quad2, quad3), e ne settiamo la variabile fermo
come vera. Se guardiamo lo script associato ai quadratini, vedremo che la scelta random della meta avviene se fermo è
falsa: quindi, una volta premuto il movieclip, i quadratini raggiungeranno l'ultima meta scelta, e lì si fermeranno. Ma

noi facciamo di più: impostiamo un'altra meta, vicino al limite del filmato. Sarà 650 più i per 10, e quindi 660, 670 e
690.
Al contrario, quando cliccheremo ancora sul movieclip, (e quadrati sarà vera), ripristineremo il valore di fermo su
false (e i quadratini ricominceranno ad avere mete random, e quindi a muoversi).
Il pannello di controllo
L'oggetto Sound
Prima di passare allo sviluppo del controllo del suono, faccio un excursus sull'argomento "oggetto Sound". Dal
momento che inseriremo un sistema abbastanza avanzato per la regolazione del volume, è meglio aver chiaro il
funzionamento dei metodi e delle proprietà fin dall'inizio. Per questi esempi, essendo preferibile un un suono costante, e
molto leggero, ho scelto un noiosissimo tono telefonico. Inoltre, per non appesantire troppo la pagina, ho deciso di
lasciare libera scelta su quali esempi caricare.
Spiegazione
Creiamo un nuovo documento flash, e importiamo un suono nella libreria. Clicchiamo con il tasto destro del mouse sul
suono (nella libreria), e dal menu contestuale scegliamo Linkage (Concatenamento).
Scegliamo adesso l'opzione Export this symbol, e nel campo Identifier (Identificatore), scriviamo loop. A questo
punto premiamo OK.
Andiamo al primo frame della timeline principale, e scriviamo:
suono = new Sound(_root);
suono.attachSound("loop");

Quello che abbiamo fatto, è stato creare un'istanza dell'oggetto Sound, associata alla _root, con il nome suono. Poi, a
questa istanza, abbiamo "attaccato" il suono linkato come loop nella libreria. Se il suono è impostato nel filmato
principale, si può omettere il _root tra le parentesi del new Sound: se invece viene impostato all'interno di un movieclip,
o su un livello diverso dal principale, tra parentesi bisogna indicare il target.
L'unica cosa che manca, ora, è il comando per riprodurre il suono:
suono.start(0,999);
dove 0 è l'offset (cioè dopo quanti secondi deve avvenire la riproduzione, rispetto all'inizio del suono), e 999 è il
numero di cicli (il suono viene ripetuto 999 volte di seguito). Per fermare il suono, il comando :
suono.stop();
Possiamo associare questi comandi ad un frame, ad un evento dei movieclip, o a un pulsante: noi scegliamo l'ultima
opzione (anche se in verità uso un movieclip che funge da pulsante, più avanti vedremo perché). Quello che otteniamo è
il filmato seguente: una cosa da provare, è quella di premere più volte il pulsante "play".
Come si nota, premendo più volte il pulsante "play", vengono riprodotte più istanze dello stesso suono, con uno
spiacevole accavallamento. E' preferibile allora porre un controllo, affinchè una volta inizializzata la riproduzione, non
ne possa essere avviata un'altra fino alla pressione del tasto "stop". Il comando per il "play", quindi, diventerà:
if(!riproduzione){
suono.start(0,999);
riproduzione = true;
}
e quello per lo stop:
if(riproduzione){
suono.stop();
riproduzione = false;
}
All'avvio del filmato, non essendo stata definita prima, la variabile riproduzione è falsa. Quando premiamo il pulsante
"play", il suono viene avviato e riproduzione diventa vera. Al quel punto, la condizione !riproduzione non è più
verificata, e le successive pressioni del pulsante non sortiranno alcun effetto. Per il tasto "stop", vale lo stesso
ragionamento, solo che il valore della variabile è invertito. Questo è quello che otteniamo:
Per regolare il volume del suono, si usa il metodo setVolume(valore), dove "valore" corrisponde ad un intero che va da
0 a 100. Per cui, se scriviamo
suono.setVolume(50);
il volume del nostro suono sarà ridotto alla metà. Per poter aumentare il volume di una unità, però, dobbiamo sapere a
quanto ammonta attualmente il valore: si usa quindi il metodo getVolume() per ricavare il valore attuale, e si somma 1
per aumentare. Il comando sarà di questo tipo:

suono.setVolume(suono.getVolume()+1);
D'altronde si può fare di meglio: sapendo che quando avviamo un suono, questo ha un volume di 100 (di default),
possiamo anche settare una variabile che interpreti e regoli per noi il volume. Nella timeline principale scriviamo:
i = 100;
e per abbassare il volume:
i--;
suono.setVolume(i)
Naturalmente, il valore di "i" potrebbe anche scendere sotto lo zero, mentre il volume si fermerebbe comunque lì.
Quindi poniamo delle condizioni sul valore della "i", per mantenerla tra 0 e 100. Per alzare il volume:
if(i < 100){
i++;
suono.setVolume(i);
}
e per abbassarlo:
&gt;if(i > 0){
i--;
suono.setVolume(i);
}
Il vantaggio di tutto ciò, sta nel fatto che abbiamo una variabile, la "i", che ci indica il volume, e che possiamo utilizzare
per altri scopi. Ad esempio, se sullo stage posizioniamo un campo di testo dinamico a cui associamo la variabile
volume, quando modifichiamo il volume, possiamo modificare anche il contenuto del campo di testo basandoci sulla i,
ottenendo un indicatore in cifre. Se poi settiamo anche la larghezza di una barra su quel valore, come con:
if(i > 0){
i--;
volume = vol._xscale = i;
suono.setVolume(i);
}
otteniamo:
Possiamo fare ancora di più, e sfruttare gli eventi dei movieclip (ora vedremo perchè usare questi piuttosto che i
pulsanti). Impostiamo una variabile come vera alla pressione del tasto sinistro del mouse su un movieclip, e su falsa
quando rilasciamo il tasto. Contemporaneamente, sullo stesso movieclip, sottoponiamo ad un enterFrame la modifica
del volume finchè la variabile è vera:
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse,_root._ymouse,true)){

modifica = true;
}
}
onClipEvent(mouseUp){
modifica = false;
}
onClipEvent(enterFrame){
if(modifica){
if(_root.i > 0){
_root.i--;
_root.volume = _root.vol._xscale = _root.i;
_root.suono.setVolume(_root.i);
}
}
}
Spiegato riga per riga:
// alla pressione del tasto sinistro del mouse
onClipEvent(mouseDown){
// se il puntatore del mouse è sopra questo movieclip
if(this.hitTest(_root._xmouse,_root._ymouse,true)){
// setta la variabile "modifica" come vera
modifica = true;
}
}
// al rilascio del tasto sinistro del mouse
onClipEvent(mouseUp){
// setta la variabile "modifica" come falsa
modifica = false;
}
// ad ogni riproduzione del movieclip
onClipEvent(enterFrame){
// se la variabile "modifica" è vera
if(modifica){
// se "i" è maggiore di 0
if(i > 0){
// diminuisci il valore di "i" di una unità
i--;
// scrivi nel campo di testo "volume", il valore
// dell'_xscale della barra "vol", che è uguale a "i"
volume = vol._xscale = i;
// setta il volume su "i"
suono.setVolume(i);

}
}
}
Il risultato:
Il pannello di controllo
_xmouse
Un'ultima digressione prima di entrare nel vivo. La proprietà _xmouse di un movieclip, ci dice qual'è la posizione del
puntatore del mouse nel suo sistema di coordinate. Se poi il movieclip è una barra, è facile capire come questa proprietà
ci possa tornare utile con la regolazione del volume.
Facciamo subito una prova: creiamo un nuovo progetto Flash, e aggiungiamo un movieclip alla libreria con il nome
barra. Dentro questo movieclip, disegniamo un rettangolo alto 10 pixel e largo 100, con l'angolo superiore sinistro sul
punto di registrazione del movieclip stesso. Trasciniamo sullo stage un'istanza di questo movieclip, alla quale diamo mc
come nome.
Disegniamo ora sullo stage un campo di testo dinamico, a cui associamo la variabile "testo". Inseriamo il campo in un
movieclip, al quale associamo il seguente script:
onClipEvent (mouseMove) {
testo = _parent.mc._xmouse;
}
Ad ogni movimento del mouse, inseriamo nel campo di testo il valore dell'_xmouse rispetto alla barra.
Adesso inseriamo un'altra istanza del movieclip barra sopra quella precedente, e le associamo:
onClipEvent (load) {
_visible = 0;
}
onClipEvent (mouseMove) {
_parent.mc._xscale = _xmouse;
}
La nuova barra, all'avvio, è invisibile, e sul proprio _xmouse viene scalata la barra mc. Nella casella di testo, quello che
leggiamo è mc._xscale:
Adesso non solo sottoponiamo la scalatura al trascinamento con il mouse, invece che solamente al movimento, ma
poniamo anche dei limiti per non strabordare nell'una o nell'altra direzione. Associamo alla barra superiore:
onClipEvent(load){
function setta(){
k = Math.round(_xmouse);
if(k < 0){
k = 0;
}else if(k > 100){

k = 100;
}
_parent.mc._xscale = k;
updateAfterEvent();
}
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
premuto = true;
setta();
}else{
premuto = false;
}
}
onClipEvent(mouseMove){
if(premuto){
setta();
}
}
onClipEvent(mouseUp){
premuto = false;
}
Quando clicchiamo sulla barra, che viene resa invisibile al caricamento, la variabile premuto diventa vera: al rilascio
del pulsante del mouse, torna falsa. Se il mouse si muove quando premuto è vera, o si clicca sulla barra, viene
richiamata la funzione setta definita all'inizio. La funzione setta calcola l'_xmouse sulla barra invisibile, e ne attribuisce
il valore arrotondato alla variabile k. Se k supera il 100, viene riportata a 100, se supera in basso lo 0, viene riportata a 0:
in ogni caso, il movieclip con la barra visibile, mc, viene scalato sul valore di k.
// al caricamento del movieclip
onClipEvent(load){
// definisci la funzione "setta"
function setta(){
// al richiamo della funzione, attribuisci a "k" il
// valore arrotondato dell'_xmouse su questo movieclip
k = Math.round(_xmouse);
// se "k" diventa minore di 0
if (k < 0){
// poni "k" uguale a 0
k = 0;
// altrimenti, se "k" diventa maggiore di 100
}else if (k > 100){
// poni "k" uguale a 100
k = 100;

}
// scala il movieclip "mc" sul valore di "k"
_parent.mc._xscale = k;
// forza un refresh dello schermo
updateAfterEvent();
}
}
// alla pressione del tasto sinistro del mouse
onClipEvent (mouseDown) {
// se il puntatore è su questo movieclip
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
// setta la variabile "premuto" come vera
premuto = true;
// richiama la funzione "setta"
setta();
// altrimenti
}else{
// (non siamo sulla barra) rendi "premuto" come falsa
premuto = false;
}
}
// allo spostamento del mouse
onClipEvent(mouseMove){
// se la variabile "premuto" è vera
if(premuto){
// richiama la funzione "setta"
setta();
}
}
// al rilascio del tasto sinistro del mouse
onClipEvent(mouseUp){
// setta la variabile "premuto" come falsa
premuto = false;
}
Ed ecco il risultato:
Scaliamo una barra da 0 a 100, e questo valore è racchiuso in "k". E se regoliamo il volume su k?
Volume
Apriamo il filmato suono.fla. Aggiungiamo alla libreria un nuovo movieclip, che chiameremo barraVolume, e che
conterrà un rettangolo giallo senza contorno di 100 pixel per 10: inoltre, l'angolo superiore sinistro del rettangolo dovrà
essere al centro del movieclip. Andiamo al secondo frame del movieclip strumenti: nel layer "asset" inseriamo

un'istanza della barra, tinta di grigio tramite il pannello Effetti.
Nel layer "pulsanti", inseriamo 4 campi di testo statici, che convertiremo in movieclip: nel layer "cornice" inseriamo
un'altra istanza del movieclip barraVolume, questa volta con il colore originario e con nome di istanza barra, e sopra
di essa, un'istanza del movieclip cornice, delle stesse dimenzioni della barra. Nel layer "scritte", infine, posizioniamo un
campo di testo dinamico, a cui associamo la variabile volume. Nel primo frame del movieclip, inseriamo un i=100;
Il risultato dovrà essere questo:
A tutti e quattro i pulsanti associamo lo stesso script dei titoli. Nella riga commentata, inseriamo rispettivamente
(riporto solo le parti modificate):
al pulsante PLAY
al pulsante STOP
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (_root.riproduzione) {
_root.suono.stop();
_root.riproduzione = false;
}
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!_root.riproduzione) {
_root.suono.start(0,999);
_root.riproduzione = true;
}
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
al pulsante MIN (al quale diamo min come nome di istanza)
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
vai = true;
_parent.max.vai = false;
}else{

colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
onClipEvent(enterFrame){
if(vai){
start = _parent.i;
fade = (0-start)/30;
_parent.i = Math.floor(_parent.i + fade);
_root.suono.setVolume(_parent.i);
_parent.barra._width = _parent.volume = _parent.i;
}
}
al pulsante MAX (al quale diamo max come nome di istanza)
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
vai = true;
_parent.min.vai = false;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
onClipEvent(enterFrame){
if(vai){
start = _parent.i;
fade = (100-start)/30;
_parent.i = Math.ceil(_parent.i + fade);
_root.suono.setVolume(_parent.i);
_parent.barra._width = _parent.volume = _parent.i
}
}
Abbiamo impostato, nella timeline principale del filmato, questo script. Il suono parte in automatico, all'avvio del
filmato, e la variabile riproduzione è vera: gli script del tasto PLAY e STOP non hanno bisogno di spiegazione (li
abbiamo visti tali e quali nella sezione precedente).
Gli script interessanti sono quelli dei pulsati MAX e MAX. Come possiamo vedere, una volta premuto uno dei due
movieclip, rendiamo vera la variabile vai: a quel punto vengono eseguite le azioni sottoposte all'enterFrame (if(vai),
cioè se vai è vera).
Altra cosa da vedere, è che allo stesso tempo viene settata come falsa la variabile vai dell'altro movieclip: il che
significa che i due blocchi di enterFrame, non vengono mai eseguiti contemporaneamente.

Quello che succede, con questi script, non è nient'altro che l'applicazione della formula del moto uniformemente
decelerato, applicato a qualcosa che non si muove. Infatti, quello che facciamo, e decrementare decelarando il valore
della variabile "i", settata nel movieclip strumenti come 100, e che ci rappresenta il volume del suono. La "posizione"
finale, sarà sempre lo 0 per il pulsante MIN, e 100 per il pulsante MAX. La "posizione" iniziale sarà il valore attuale di
"i".
L'unica fondamentale differenza, assolutamente degna di nota, è che alla "posizione" attuale della "i", noi sommiamo,
invece che la somma tra la "posizione" e lo "spostamento" (fade), l'arrotondamento per difetto della somma tra la
"posizione" e lo "spostamento", nel caso del MIN, e l'arrotondamento per eccesso, nel caso del MAX. Se non
facessimo così, il valore non arriverebbe mai rispettivamente allo 0 e al 100. Spiego riga per riga uno solo dei due
codici (sono praticamente identici):
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
// setta la variabile "vai" come vera
vai = true;
// setta la variabile "vai" in "max" come falsa
_parent.max.vai = false;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
// ad ogni riproduzione del movieclip
onClipEvent(enterFrame){
// se la variabile "vai" è vera
if(vai){
// dai a "start" il valore attuale della "i"
start = _parent.i;
// dai a "fade" il valore di -"start" fratto 30
fade = (0-start)/30;
// assegna a "i" il valore dell'arrotondamento per
// difetto della somma tra "i" e "fade"
_parent.i = Math.floor(_parent.i + fade);
// setta il volume del suono uguale a "i"
_root.suono.setVolume(_parent.i);
// dai alla larghezza della barra il valore di "i"
// e scrivi "i" nel campo di testo "volume"
_parent.barra._width = _parent.volume = _parent.i;
}
}
La barra

Alla barra tinta di grigio, associamo lo stesso script che abbiamo visto all'inizio di questa sezione (riporto solo le parti
salienti):
onClipEvent(load){
_parent.barra._width = _parent.i;
function setta(){
k = Math.round(_xmouse);
if(k < 0){
k = 0;
}else if(k > 100){
k = 100;
}
_root.suono.setVolume(k);
_parent.barra._width = _parent.volume = _parent.i = k;
updateAfterEvent();
}
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse,true)) {
_parent.max.vai = _parent.min.vai = false;
premuto = true;
setta();
}else{
premuto = false;
}
}
onClipEvent(mouseMove){
if(premuto){
setta();
}
}
Unica differenza, è che al click sulla barra viene settata come falsa la variabile vai in entrambi i movieclip MIN e MAX,
in modo da interrompere gli eventuali cicli sottoposti all'enterFrame. Questo è il risultato.
Concludiamo: andiamo al movieclip pannello, e nel layer "strumenti" trasciniamo dalla libreria un'istanza del movieclip
strumenti che abbiamo appena completato. Diamo al movieclip, come nome di istanza, il nome strumenti.
Selezionando ora i titoli uno ad uno, sostituiamo alle righe commentate il comando:
_parent.strumenti.gotoAndStop(X);
dove X rappresenta di volta in volta il frame a cui rimandare.
Quindi, in ordine, il pulsante data conterrà:
_parent.strumenti.gotoAndStop(1);
il pulsante suono:
_parent.strumenti.gotoAndStop(2);
eccetera.

L'intro
Il problema dell'intro
A mio parere, i filmati introduttivi sono la cosa peggiore portata dal Flash. Intendiamoci, solo i filmati introduttivi, non
i filmati in generale.
Non sempre abbiamo tempo e voglia di guardare una intro da 500k, quando quello che cerchiamo è il contenuto (anche
se presentato in una veste grafica accattivante). Se poi consideriamo che mettiamo mani nel registro per eliminare gli
splash screen, che ci fanno perdere secondi preziosi, e che daremmo fuoco a chi ci fa scaricare allegati inutili e catene di
Sant'Antonio, il ragionamento non appare incoerente.
Credo sinceramente che le intro abbiano fatto il loro tempo: non nego la bellezza di un filmato di presentazione, che
spesso dimostra grande tecnica e gusto artistico, ma lo vedo meglio come "una scelta" all'interno di un sito, che come
passaggio obbligato. Soprattutto tre sono le cose che mi infastidiscono:
• l'assenza del meraviglioso tasto skip, che permetta di saltare tout-court l'animazione
• l'essere costretto a passare per l'intro ogni volta che accedo nuovamente al sito
• uno stile ormai abusato: musica tecno, immagini veloci, frasi ridicole come
"stiamo arrivando!"
"siete pronti?"
"dimenticate tutto quello che sapete sul web"
"state per entrare in una nuova dimensione"
"lo spazio... il tempo"
"internet... la rete si evolve"
e altre amenità di questo tipo.
Naturalmente, si tratta della mia personalissima opinione.
D'altronde, lo scopo di questa sezione della guida, non è spiegare come fare un filmato introduttivo, ma come utilizzarlo
nel modo tradizionale. Il problema pratico è: avere l'intro, e poterla evitare.
I metodi sono:
• inserire un filmato di presentazione, ma solo a scelta dall'interno del sito, non prima
• porre al navigatore la scelta di accedere al sito con o senza il filmato introduttivo
• passare obbligatoriamente per l'intro la prima volta, ma non in quelle successive, anche se non è stata visualizzata
Il primo metodo non ha bisogno di tecniche particolari, si tratta semplicemente di rendere accessibile un filmato da un
menu interno. Il secondo, prevede o l'accesso diretto al sito, o il passaggio per l'intro che, una volta terminata, richiama
la pagina principale.
Il terzo caso, invece, è quello che interessa a noi. Supponiamo di essere obbligati a inserire l'intro, ma a non voler
tediare troppo i visitatori le volte successive: dobbiamo quindi trovare un sistema per lasciare traccia dell'avvenuto
accesso alla pagina. Con i linguaggi esistenti, siano essi asp, cgi, o php, possiamo scrivere dei cookies che, rimanendo
nella cache del browser, potranno essere letti successivamente, per passarci le informazioni di cui abbiamo bisogno.
Quello che ci siamo proposti nella progettazione del sito, però, era il non usare altri linguaggi oltre all'Actionscript, fin
dove possibile. Per questo motivo, tutto dovrà essere fatto da dentro Flash.
Unica cosa veramente importante, e da applicare in ogni caso, è la separazione del filmato introduttivo da quello
principale: non devono mai essere contenuti nello stesso file.
Il filmato

Creiamo un nuovo progetto in Flash, 700x300, 24 fps, composto da due scene (ricordo che le scene sono
esclusivamente per comodità di chi progetta, dal momento che all'esportazione non esistono più).
Nella seconda scena, si svolge l'animazione introduttiva, che in questo caso la creazione dell'omino di HTML.it tramite
l'effetto laser, già spiegato in un articolo precedente. Nel primo frame della timeline, in un layer qualsiasi, inseriamo il
suono di sottofondo, impostato come evento, e con loop massimi.
In un altro layer, posizioniamo il pulsante skip.
Il tasto skip
Il tasto skip non fa altro che richiamare il filmato principale, e deve essere presente fin dall'inizio dell'intro, preloader
compreso. Vediamo quali sono le azioni da associare al pulsante:
loadMovieNum ("flash5.swf", 0);
Al click sul pulsante, o sul movieclip, viene caricato nel livello 0 il filmato flash5.swf, che semplicemente prende il
posto dell'intro. Nel nostro caso, il pulsante skip è un movieclip, al quale associamo:
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
loadMovieNum ("flash5.swf", 0);
}
}// alla pressione del pulsante sinistro del mouse
onClipEvent(mouseDown){
// se il puntatore è sul moveiclip
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
// carica il filmato "flash5.swf" sul livello 0
loadMovieNum ("flash5.swf", 0);
}
}
Il preloader
La parte più importante dell'intro è il preloader: infatti, grazie a quello, riusciamo ad evitarne l'ennesima riproduzione ai
successivi accessi.
Vediamo la sequenza di eventi che si succederanno dal lancio del sito:
- avvio del preloader del filmato introduttivo
- avviato il preloader (che in partenza è invisibile), viene verificato se il filmato è già completamente carico (e quindi se
è stato già visualizzato, dal momento che, per essere subito carico, deve risiedere nella cache del browser)

- se il filmato non è carico, il preloader diventa visibile e mostra i dati sul processo di caricamento. Terminato il
caricamento, viene avviato il filmato introduttivo vero e proprio, alla cui fine è presente un pulsante per entrare nella
pagina principale del sito.
- se invece il filmato risulta carico, viene eseguito un comando uguale a quello del tasto skip, e immediatamente
richiamato il filmato principale
Questo sistema è molto semplice, ma presenta un difetto: per funzionare, l'intro deve essere stata completamente
caricata. Il che significa che se il visitatore, che accede per la prima volta al sito, "skippa" subito l'intro, al successivo
accesso ne vedrà nuovamente il caricamento. Tutto ciò si può evitare, se il primo controllo, a preloader invisibile, si
basa su una percentuale di bytes caricati inferiore a quella totale.
Aggiungiamo alla libreria un movieclip che chiameremo preloader: nel primo layer in alto, inseriamo una copia del
tasto skip che abbiamo utilizzato nella scena principale. Nel secondo layer, una semplice scritta "Caricamento intro".
Nel terzo layer, posizioniamo un'istanza del movieclip cornice importato da flash5.fla, di dimensioni 200x8.
Nel layer sotto, un movieclip contenente un rettangolo delle stesse dimensioni della cornice: il movieclip, chiamato
barraPreloader, avrà come nome di istanza barra, e un _xscale, settato tramite il pannello Transform, dello 0%.
Nell'ultimo layer in basso, posizioniamo un'istanza del movieclip freccia3d, con nome di istanza freccia, alla quale
associamo:
// al caricamento del movieclip
onClipEvent (load) {
// settane l'alpha sullo 0
_alpha = 0;
}
// ad ogni riproduzione del movieclip
onClipEvent(enterFrame){
// se la variabile "vai" è vera
if(vai){
// se l'alpha è minore di 30
if(_alpha

loadMovieNum ("flash5.swf", 0);
}else{
carica = true;
}
}
onClipEvent (enterFrame) {
if (carica) {
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
if (car == tot) {
_root.gotoAndPlay(4);
} else {
_visible = 1;
barra._xscale = Math.round((car/tot)*100);
}
}
}
Vediamolo spiegato riga per riga:
// al caricamento del movieclip
onClipEvent (load) {
// rendi questo movieclip invisibile
_visible = 0;
// ferma la riproduzione della timeline principale
_root.stop();
// se i bytes caricati sono uguali a quelli totali
// (il filmato è nella cache, quindi già visto)
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
// carica il filmato flash5.swf sul livello 0
loadMovieNum ("flash5.swf", 0);
// altrimenti
}else{
// setta la variabile "carica" come vera
carica = true;
}
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// se la variabile "carica" è vera
if (carica) {
// assegna a "car" il numero di bytes caricati
car = _root.getBytesLoaded();
// assegna a "tot" il numero di bytes totali

tot = _root.getBytesTotal();
// se "car" è uguale a "tot"
if (car == tot) {
// riprendi la riproduzione della timeline principale
// dal frame numero 4 (il primo della seconda scena)
_root.gotoAndPlay(4);
// altrimenti (ancora non caricato completamente)
} else {
// rendi il movieclip visibile
_visible = 1;
// scala il movieclip "barra" sull'arrotondamento
// del valore di 100 per il quoto tra "car" e "tot"
barra._xscale = Math.round((car/tot)*100);
}
}
}
Il preloader
Preloader
Oltre al preloader per l'intro, che abbiamo appena visto, nella costruzione del sito useremo altri due tipi di preloader:
uno per tutti i filmati esterni tranne suono.swf, l'altro solo per il filmato principale, flash5.swf
Primo preloader: filmati esterni
I nostri filmati esterni vengono tutti caricati sul livello 1, uno alla volta: infatti, al caricamento di un nuovo filmato,
questo prende il posto di quello che occupava il livello precedentemente. Inoltre, dal momento che parliamo di
caricamento su livelli, e non in movieclip, possiamo utilizzare il tipo di preloader più comune, basato sul controllo dei
bytes caricati e totali della _root. (riferimento al filmato in cui è presente lo script, in qualunque livello sia). Quando
caricheremo uno dei filmati esterni, vedremo il preloader come se fosse nel filmato principale, in trasparenza sopra gli
altri oggetti. Vediamone la costruzione, da effettuare in tutti i filmati tranne flash5.fla e suono.fla
Innanzitutto, dobbiamo inserire il preloader un frame prima di quello principale (i filmati sono tutti composti da un solo
frame): il metodo più semplice, per non dover spostare il frame su ogni livello, è quello di aggiungere una scena che
preceda quella principale. Apriamo quindi il nostro filmato, e andiamo al menu Modify/Scene (Elabora/Scene):
nell'apposito pannello, premiamo il pulsante con il simbolo + in basso a destra. Nel nostro filmato verrà aggiunta una
scena dopo quella già esistente.

Cliccando sul nome della scena, la rinominiamo in preloader, e la trasciniamo sopra la prima.
Ciò è necessario perché, nella gerarchie delle scene, quella più sopra viene riprodotta prima di quelle sotto.
Aggiungiamo alla libreria un nuovo movieclip, che chiameremo barraPreloader. All'interno del movieclip,
disegniamo un rettangolo bianco largo 60 pixel e alto 6, con l'angolo superiore sinistro sul punto di registrazione.
Premiamo nuovamente il pulsante + nella libreria, e inseriamo un altro movieclip, che chiameremo preloader: conterrà
tre layer di un frame ciascuno, chiamati rispettivamente, dall'alto verso il basso, "cornice", "barra" e "testo".
Nel layer "barra", trasciniamo dalla libreria un'istanza del movieclip barraPreloader, alla quale daremo, come nome di
istanza, barra. Selezioniamo la barra, e apriamo il pannello Transform: nel campo Width, inseriamo il valore più basso
possibile (lo 0, che verrà trasformato in 0.8), riducendo la barra ad essere praticamente invisibile.
Nel layer "cornice" trasciniamo dalla libreria un'istanza del movieclip cornice, che posizioneremo, con le stesse
dimensioni (60x6), proprio sopra la barra.
Infine, nel layer "testo", inseriremo sopra la barra la scritta statica "caricamento in corso...", e accanto alla barra, un
campo di testo dinamico con associata la variabile percentuale. Visivamente, il risultato sarà questo:
Torniamo alla timeline principale, nell'unico frame della scena "preloader". Dalla libreria, trasciniamo sullo stage
un'istanza del movieclip preloader, alla quale associamo:
onClipEvent (load) {
_visible = 0;
_root.stop();
}
onClipEvent (enterFrame) {
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
_root.nextFrame();
}
_visible = 1;
perc = barra._xscale = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100);
percentuale = perc + "%";
}

All'avvio del filmato, il preloader è invisibile. Viene controllato se i bytes caricati del filmato intero sono uguali a quelli
totali: se vero, il filmato passa al frame successivo, dove c'è l'animazione principale, altrimenti il preloader diventa
visibile e mostra i dati di caricamento. Questo sistema serve ad evitare che, ai successivi caricamenti dello stesso
filmato, si veda il preloader anche solo per un secondo. Spiegato riga per riga:
// al caricamento del movieclip
onClipEvent (load) {
// settane la visibilità su 0
_visible = 0;
// ferma la riproduzione della timeline principale
_root.stop();
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// se i bytes caricati del filmato, sono uguali a quelli totali
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
// riprendi la riproduzione della timeline principale, fermandola sul frame seguente
_root.nextFrame();
}
// rendi il movieclip visibile
_visible = 1;
// assegna a "perc" lo stesso valore usato per scalare la barra, cioè l'arrotondamento
// del quoto tra bytes caricati e totali moltiplicato per 100
perc = barra._xscale = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100);
// scrivi nel campo di testo "percentuale", il valore di "perc" più il simbolo "%"
percentuale = perc + "%";
}
Il preloader è perfettamente identico in tutti i filmati.
Secondo preloader: filmato principale
Il preloader del filmato principale, oltre a non essere visibile nei caricamenti successivi, come quello dei filmati esterni,
ha anche un'altra caratteristica: deve precaricare il filmato suono.swf. Quest'ultimo infatti, dal momento che contiene un
suono linkato, non può avere un preloader come gli altri filmati. Flash, nel caso di oggetti linkati, pone questi in un
frame virtuale 0, prima di tutti gli altri: per questo motivo, è necessario che sia completo il caricamento degli oggetti
linkati prima che sia possibile vedere il preloader. Se poi l'oggetto linkato è da 100k (tipicamente un suono di
sottofondo), e il filmato stesso è da 10k, il preloader diventa assolutamente inutile.
Cominciamo con il preparare il filmato suono.swf per il preloader: apriamo suono.fla, e aggiungiamo una nuova scena
prima di quella già esistente. Nell'unico frame, mettiamo uno stop, e salviamo.
Apriamo flash5.fla e, come negli altri filmati, aggiungiamo una scena prima di quella già esistente: in questa scena,
creiamo tre layer, "preloader", "frecce", "sfondo", dall'alto verso il basso. Nel layer "sfondo", disegniamo un rettangolo
grande quanto l'intero filmato, e riempito con un gradiente che richiami quello della fascia centrale della scena seguente.
Nel layer "frecce", trasciniamo dalla libreria tre istanze del movieclip clip, posizioniate appena al di fuori della sinistra

dello stage, con altezza, colore, e trasparenza diversa. Alle tre frecce diamo, come nome di istanza, freccia1, freccia2,
freccia3, e associamo a ciascuna il seguente script:
onClipEvent (load) {
fine = 1000;
frame = 40:
}
onClipEvent (enterFrame) {
if(vai){
inizio = _x;
_x += (fine-_x)/frame;
if(_x > 980){
_x = -20;
}
}
}
Nuovamente si tratta del moto decelerato: le frecce si sposteranno, se la variabile "vai" è vera, attraversando tutto lo
stage: quando però la loro posizione sull'asse delle X supererà il valore di 980 (quello finale è 1000), torneranno al
punto di partenza, ricominciando lo spostamento. L'unico valore da cambiare da freccia a freccia, è quello della
variabile frame, che determina la velocità di spostamento.
// al caricamento del movieclip
onClipEvent (load) {
// attribuisci alla variabile "fine" il valore 1000
fine = 1000;
// attribuisci alla variabile "frame" il valore 40
frame = 40;
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// se la variabile "vai" è vera
if(vai){
// attribuisci alla variabile "inizio" il valore
// dell'attuale posizione del movieclip sull'asse delle X
inizio = _x;
// moto decelerato
_x += (fine-_x)/frame;
// se la posizione del movieclip è superiore a 980
if(_x > 980){
// riporta il movieclip alla posizione -20 sull'asse delle X
_x = -20;
}
}
}

Aggiungiamo alla libreria un movieclip che chiameremo barraPreloader, contenente un rettangolo 200x8 con l'angolo
superiore sinistro sul punto di registrazione. Aggiungiamo infine alla libreria, un ultimo movieclip che chiameremo
preloader, al cui interno creiamo tre layer.
Nel primo layer, che chiameremo "scritte", inseriamo due campo di testo statici, "caricamento grafica" e "caricamento
audio". Nel layer sotto, "cornici", trasciniamo dalla libreria due istanze del movieclip cornice, che ridimensioneremo a
200x8. Nel layer "barre", inseriamo due istanze del movieclip barraPreloader: le posizioniamo sotto le due cornici, le
scaliamo a 0 in larghezza, e le chiamiamo barra1 e barra2.
Nel layer "preloader" della prima scena del filmato, trasciniamo dalla libreria un'istanza del movieclip preloader, alla
quale associamo:
onClipEvent (load) {
_visible = 0;
loadMovieNum ("suono.swf", 10);
_root.stop();
}
onClipEvent (enterFrame) {
car0 = _root.getBytesLoaded();
tot0 = _root.getBytesTotal();
car10 = _level10.getBytesLoaded();
tot10 = _level10.getBytesTotal();
if (_level10._url != null) {
if (car0 == tot0 && car10 == tot10) {
_level10.nextFrame();
_root.nextFrame();
} else {
_parent.freccia1.vai = _parent.freccia2.vai = _parent.freccia3.vai = true;
_visible = 1;
barra1._xscale = Math.round((car0/tot0)*100);
barra2._xscale = Math.round((car10/tot10)*100);
}
}
}
Il preloader, all'avvio del filmato, è invisibile: viene caricato il filmato suono.swf sul livello 10, e fermata la
riproduzione della timeline principale. Ad ogni riproduzione del movieclip, vengono stabiliti i dati di caricamento di
entrambi i filmati: quando sono carichi, ne viene avviata la riproduzione. Nel frattempo, vengono visualizzati i dati di
caricamento, dopo che il preloader è stato reso visibile.
// al caricamento del movieclip
onClipEvent (load) {
// rendi invisibile il movieclip

_visible = 0;
// carica il filmato "suono.swf" sul livello 10
loadMovieNum ("suono.swf", 10);
// interrompi la riproduzione della timeline principale
_root.stop();
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// assegna a "car0" il numero di bytes caricati del filmato principale
car0 = _root.getBytesLoaded();
// assegna a "tot0" il numero di bytes totali del filmato principale
tot0 = _root.getBytesTotal();
// assegna a "car10" il numero di bytes caricati del filmato suono.swf
car10 = _level10.getBytesLoaded();
// assegna a "tot10" il numero di bytes totali del filmato suono.swf
tot10 = _level10.getBytesTotal();
// se l'url del livello 10 non è nulla (quindi è iniziato il caricamento)
if (_level10._url != null) {
// se "car0" è uguale a "tot0" e "car10" è uguale a "tot10"
if (car0 == tot0 && car10 == tot10) {
// riprendi la riproduzione del livello 10 fermandola sul frame seguente
_level10.nextFrame();
// riprendi la riproduzione del filmato fermandola sul frame seguente
_root.nextFrame();
// altrimenti
} else {
// setta la variabile "vai" come vera sulle tre frecce
_parent.freccia1.vai = _parent.freccia2.vai = _parent.freccia3.vai = true;
// rendi il movieclip visibile
_visible = 1;
// scala la barra1 sul valore di "car0" fratto "tot0" moltiplicato per 100
barra1._xscale = Math.round((car0/tot0)*100);
// scala la barra2 sul valore di "car10" fratto "tot10" moltiplicato per 100
barra2._xscale = Math.round((car10/tot10)*100);
}
}
}
Index.htm
Premessa
Prima di continuare, un appunto sui percorsi dei file. Costruendo un sito, la cosa migliore da fare è usare dei link relativi,
fin dove è possibile: in questo modo, il funzionamento sarà sempre lo stesso indipendentemente dalla posizione in cui lo
si metta, sia esso sulla propria macchina, o sul proprio spazio web.

Per questione di ordine, ho inserito tutti i filmati in un'unica cartella, nominata "filmati", e i file txt in una nominata
"testi". La pagina html che contiene il filmato principale è esterna alle due cartelle, e nel codice di incorporamento,
quindi, non farà riferimento a
flash5.swf
bensì a
filmati/flash5.swf
Una volta caricato il filmato, quest'ultimo, per recuperare gli altri filmati e i testi, dovrà fare riferimento alla nuova
posizione assunta, cioè dentro una pagina html fuori dalle due cartelle. Il che significa che se anche i filmati sono nella
stessa posizione, i comandi vi faranno riferimento non con
loadMovieNum("filmato.swf, 1);
ma con
loadMovieNum("filmati/filmato.swf", 1);
e ai testi con
loadVariables("testi/actionscript.txt", 1);
E' necessario quindi, rispetto agli script che abbiamo visto fino ad adesso, cambiare i percorsi dei file per rispettare
questo schema.
Costruzione
Introduzione
Terminata la parte in Flash, dobbiamo adesso occuparci necessariamente dell'html: dobbiamo infatti creare le basi per
poter rendere il sito accessibile.
Con il comando Pubblica (Shift+F12), vengono generati una pagina html contenente il filmato e il filmato stesso: questi
due file sarebbero già sufficienti per la pubblicazione, ma offrono un tipo di visualizzazione troppo standardizzata.
Riprendiamo quindi i propositi di inizio guida, e cerchiamo di rispettarli tutti.
Scelta in entrata
Innanzitutto al navigatore, una volta arrivato alla pagina principale del sito, lasciamo la possibilità di scegliere cosa fare:
se accedere alla versione creata con Flash, o a quella creata in HTML, o se invece scaricare il plugin. La pagina
index.htm, quindi, conterrà dei collegamenti legati ad immagini esplicative, premendo le quali si opererà la scelta.
Cliccando sullo scaricamento del plugin, apriremo una popup il cui contenuto sarà la pagina di download dello stesso,
presso il sito della Macromedia. Cliccando su "versione HTML", la pagina di Flash5.it verrà caricata all'interno della
finestra.
Cliccando su "versione FLASH", all'interno della finestra caricheremo la pagina detect.htm, che contiene il Flash
Dispatcher della Macromedia per il controllo del plugin. Se il controllo risulterà positivo, verrà caricata una pagina html
base che lancia in popup la finestra con il filmato: alla base di questa pagina html, ci sarà la possibilità di rilanciare la
popup, e di tornare alla pagina principale.
Qualora invece il controllo risultasse negativo, caricheremo la pagina noflash.htm, contenente un messaggio per il
navigatore. Questi avrà di nuovo tre possibilità: aprire in popup la pagina di download della Macromedia, tornare alla
pagina principale del sito (index.htm), oppure lanciare comunque la pagina contenente intro.swf, nel caso il controllo
fosse stato impreciso.
index.htm

Partiamo dalla pagina index.htm. Questa sarà composta da una tabella centrata con dimensioni al 100%, contenente, una
sotto l'altra, le immagini per le scelte.
Inoltre, aggiungeremo sotto queste altre due immagini per inserire la pagina tra i Preferiti, o impostarla come Pagina
Principale del browser (solo per IE). Queste immagini, richiameranno delle funzioni in javascript che sono contenute in
un file *.js esterno: il riferimento al file *.js, è da inserire all'inizio della pagina, all'interno dei tag . La pagina
completa sarà:
Flash5.it

L'apertura della pagina sul sito della Macromedia, per lo scaricamento del plugin, si effettua con un semplice richiamo
della pagina in un target _blank, cioè in una nuova finestra. Il richiamo alla pagina in html (http://flash5.html.it/), e alla
pagina in flash avviene invece tramite il richiamo della pagina in un target _self, all'interno cioè della stessa finestra.
Noi vedremo quest'ultimo caso.
Detect
Se il navigatore, nella pagina index.htm, sceglie di visualizzare la versione Flash del sito, verrà indirizzato alla pagina
detect.htm. Questa pagina, effettuerà un controllo sul plugin, e reinderizzerà il navigatore a seconda del risultato (può
darsi che l'utente creda di avere il plugin, ma non ce l'abbia: per questo effettuiamo il controllo).
La pagina detect.htm è costruita sulla base del Macromedia Flash Dispatcher: si tratta di un kit composto da un file
Jscript, da uno script Vb e un filmato swf, che con una serie di procedure e controlli, verificano nel browser la presenza
o meno del plugin. Nell'eventualità esso sia presente, stabilisce il numero di versione, permettendo di scegliere cosa fare
nei vari casi.
Innanzitutto, scarichiamo dal sito della Macromedia i file del Flash Deployment kit. Estraiamo il contenuto del file *.zip
in una cartella temporanea, ed entriamo nella cartella flash_deploy_kit\Flash_Deployment_Kit\Flash_Deployment_kit e
da questa cartella preleviamo solo i file che ci servono:
• detectFlash.swf
• Dispatcher.js
• Dispatcher.vbs
• enter.htm (che rinominiamo in detect.htm)
e li mettiamo nella cartella che contiene index.htm e le sottocartelle con i filmati, i testi e le immagini per le pagine html.

L'unico file da modificare è detect.htm, per adattarlo alle nostre esigenze. Il contenuto si presenta così (ho tradotto i
commenti):
detect plugin
// Cambia i parametri in questa funzione per indirizzare l'utente
// alla pagina appropriata
MM_FlashDispatch(
);
"flash/index.html", // pagina in caso il plugin sia presente e nella giusta versione
"5.0", // versione richiesta
false, // richiesta dell'ultima versione (vero o falso)
"upgradeFlash.html", // pagina per l'upgrade del plugin
!MM_FlashUserDemurred(), // installazione (vero o falso)
"installFlash.html", // pagina per l'installazione
"noflash/index.html", // pagina con contenuto alternativo
false // inserimento del PluginsPage in caso sia necessario usare detectFlash.swf
La cambiamo così:
detect plugin
MM_FlashDispatch(
"flash.htm", // contentURL
"5.0", // contentVersion
false, // requireLatestRevision
"noflash.htm", // upgradeURL
MM_FlashUserDemurred(), // install

"noflash.htm", // installURL
);
"noflash.htm", // altURL
false // overridePluginsPage
La URL da raggiungere, in caso sia presente il plugin nella versione richiesta, è la pagina flash.htm. La versione
richiesta del plugin è la 5.0, e non ne è richiesta l'ultima versione.
In caso il plugin non sia presente nella versione adatta, o non sia presente del tutto, non ne viene richiesta l'installazione
(bisogna togliere il simbolo "!" prima di MM_FlashUserDemurred()), e il navigatore viene reindirizzato alla pagina
noflash.htm.
Se lasciassimo la richiesta di installazione del plugin, in caso l'utente non lo avesse, verrebbe reindirizzato comunque a
flash.htm, e inizierebbe lo scaricamento automatico: questa è una cosa che vogliamo evitare, dal momento che la
maggior parte degli utenti, all'apertura non espressamente richiesta di una finestrella che chiede di scaricare qualcosa,
preme "Annulla". Quello che faremo noi, invece, è rimandare ad una pagina che consiglia di andare a quella di
download della Macromedia: lasciando quindi all'utente il pieno controllo della situazione.
Non ci resta ora che cambiare l'aspetto della pagina di detect, cambiandone il colore di sfondo, e inserendo una tabella
centrata con l'immagine "controllo plugin in corso".
detect plugin
MM_FlashDispatch(
&quot;flash.htm&quot;, // contentURL
&quot;5.0&quot;, // contentVersion
false, // requireLatestRevision
&quot;noflash.htm&quot;, // upgradeURL
MM_FlashUserDemurred(), // install

&quot;noflash.htm&quot;, // installURL
);
&quot;noflash.htm&quot;, // altURL
false // overridePluginsPage
Scelte
flash.htm
Abbiamo visto come, in caso il plugin sia presente nella versione corretta e adatta al contenuto, l'utente venga
reindirizzato alla pagina flash.htm
Costruiamo ora questa pagina.
Costruzione
Creiamo un nuovo documento html con un qualsiasi editor testuale. All'interno della pagina, inseriamo una tabella
centrata contenente un'immagine cliccabile, che l'utente si troverà davanti qualora chiuda la popup lanciata in
automatico all'accesso alla pagina: il link servirà a lanciare di nuovo la popup, mentre un'altra immagine cliccabile
conduce l'utente a index.html
::flash5.it::
Analizziamo la struttura della pagina. Innanzitutto, si chiama ::flash5.it::, nome che apparirà nell'icona sulla barra degli
strumenti, ed esiste un riferimento al file JScript esterno flash5.js. Il colore della pagina nero, i bordi sono azzerati e non
c'è barra di scorrimento: all'avvio, vengono richiamate le funzioni javascript riempi() e lancia(). Nel corpo della pagina,

c'è la tabella centrata contenente le due immagini cliccabili: la prima richiama la funzione lancia(), la seconda manda
indietro il browser di due passi nella cronologia, tornando quindi a index.htm
noflash.htm
Qualora non sia presente il plugin, il navigatore verrà reindirizzato alla pagina noflash.htm: in questa pagina, come in
quella appena vista, abbiamo una tabella centrata contenente delle immagini cliccabili, più un messaggio per l'utente.
Il messaggio avverte l'utente che, dal controllo, risulta sprovvisto del plugin. Quindi si offrono tre scelte: tornare alla
pagina index.htm, aprire una popup per raggiungere la pagina di download della Macromedia, lanciare lo stesso la
versione in Flash (nel caso in cui l'utente sia certo di avere la versione corretta del plugin, e che quindi il controllo non
sia stato efficiente).
::flash5.it::
Analizziamo la struttura della pagina. Innanzitutto, si chiama ::flash5.it:: come la precedente, e ha un riferimento allo
stesso file JScript esterno. Il colore della pagina è nero, i bordi sono azzerati e non c'è barra di scorrimento: inoltre,
all'avvio, viene richiamata la funzione riempi(). Nel corpo della pagina, c'è la tabella centrata contenente le tre
immagini cliccabili: la prima richiama la funzione lancia(), la seconda manda indietro il browser di due passi nella
cronologia, tornando quindi a index.htm. La terza apre in popup la pagina di download della Macromedia.

flash5.htm
Eccoci finalmente alla pagina fondamentale del sito, quella lanciata come popup quando si accede a flash.htm. La
pagina è un frameset composto da due frame: uno al 100%, occupato dalla pagina main.htm che incorpora intro.swf, e
uno allo 0% occupato dalla pagina vuota.htm (vuota di nome e di fatto).
Il sistema del frameset è necessario per eliminare i bordi che si presentano attorno al filmato: con la stringa
marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"
inserita nel body di main.htm (la pagina che incorpora il filmato), eliminiamo i bordi per Microsoft Internet Explorer.
Invece, in Netscape Navigator, i bordi inferiore e destro continuano ad essere visibili. Con il frameset, questi
scompaiono.
flash5.htm
::flash5.it::
Il tuo browser non supporta i frame e questa pagina ne fa uso.
vuota.htm
::flash5.it::
main.htm
::flash5.it::

var dim = screen.width;
if(dim >= "1280"){
larghezza = 1050;
altezza = 450;
}else{
larghezza = 700;
altezza = 300;
}
document.write (' '
+' '
+' '
+' '
+' '
+' '
+'');
Javascript
Vediamo il significato del javascript contenuto nella pagina main.htm.
var dim = screen.width;
if(dim >= "1280"){
larghezza = 1050;
altezza = 450;
}else{
larghezza = 700;
altezza = 300;
}
document.write (' '
+' '
+' '
+' '
+' '

+' '
+'');
Quando viene richiamata la pagina, lo script recupera la larghezza dello schermo (più precisamente, il numero di pixel
che ne compongono orizzontalmente l'area visibile). Se questa misura, associata alla variabile dim, risulta essere
maggiore o uguale a 1280, vengono definite le variabili larghezza e altezza, con i valori rispettivamente di 1050 e 450
(rapporto 7 a 3).
Se la larghezza dello schermo è invece minore di 1280 (else), le variabili larghezza e altezza avranno come valore 700
e 300 (a 1600x1200, un filmato 700x300 è troppo piccolo).
Una volta definite le due variabili, viene scritto (tramite il document.write), il codice di incorporamento del filmato: le
due variabili vengono riportate all'interno di esso, e inserite nei posti corrispondenti agli attributi width ed height. Di
conseguenza, all'interno della popup, troveremo un filmato a dimensioni fisse (non scalabile): dimensioni che, però,
saranno state stabilite al momento, relative al caso particolare.
jscript esterno
Come abbiamo visto, all'interno del codice di alcune delle pagine considerate finora, era presente il riferimento ad un
file *.js esterno, flash5.js:
Grazie a questo riferimento, è possibile richiamare funzioni javascript non presenti nella pagina html vera e propria:
caso che abbiamo visto più volte, come nell'apertura della popup, o dell'aggiunta ai preferiti.
Riporto il contenuto del file:
/****************************************
* Flash5.it http://flash5.html.it/
* Guida per la costruzione di un sito in Macromedia Flash5
*
* negatyve@libero.it
****************************************/
function riempi() {
if (window.screen) {
var w = screen.availWidth;
var h = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(w, h);
}
}
function lancia() {
var w = screen.width;
var h = screen.height;

if(w >= "1280"){
larghezza = 1050;
altezza = 450;
}else{
larghezza = 700;
altezza = 300;
}
var x = Math.round(w / 2) - Math.round(larghezza / 2);
var y = Math.round(h / 2) - Math.round(altezza / 2);
finestra = window.open ('flash5.htm', null, 'left=' + x + ',screenX=' + x + ',top='
+ y + 'screenY=' + y +',width=' + larghezza + ',height=' + altezza );
}
function preferiti(){
var url="http://flash5.html.it/"
var titolo="Flash5.it - Risorse italiane su Flash"
if (document.all) {
window.external.AddFavorite(url,titolo);
}
}
function paginaIniziale() {
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://flash5.html.it/');
}
La funzione riempi, determina le dimensioni dell'area utile dello schermo (barre degli strumenti escluse): quindi sposta
la pagina al punto 0,0 (angolo superiore sinistro dello schermo), e la ridimensiona fino a riempire l'area visibile.
La funzione lancia, fa più o meno lo stesso lavoro della funzione di main.htm: viene calcolata la larghezza dello
schermo, e in base a questa, stabilite le dimensioni che dovrà avere la popup, centrata nello schermo e senza alcuna
barra degli strumenti. Dal momento che i valori sono gli stessi dello script visto prima, se la risoluzione è inferiore a
1280, avremo una popup 700x300 contenente un filmato 700x300, se è superiore, una popup 1050x450 che incorpora
un filmato 1050x450.
La funzione preferiti, aggiunge il sito alla lista dei Preferiti o Bookmark, con le informazioni (indirizzo e nome)
definite nella variabili url e titolo.
Infine la funzione paginaIniziale, setta la la pagina corrente come quella Iniziale del browser: questo script, è valido
solo per i browser internet Explorer 4 e superiori.
/****************************************
* Flash5.it http://flash5.html.it/
* Guida per la costruzione di un sito in Macromedia Flash5
*
* negatyve@libero.it
****************************************/
function riempi() {
if (window.screen) {

assegna a w il valore corrispondente alla larghezza disponibile dello schermo in px
var w = screen.availWidth;
// assegna a h il valore corrispondente all'altezza disponibile dello schermo in px
var h = screen.availHeight;
// sposta la finestra nel punto di coordinate 0,0
window.moveTo(0, 0);
// ridimensiona la finestra fino a riempire l'area visibile, determinata da w e h
window.resizeTo(w, h);
}
}
function lancia() {
// assegna a "w" il valore corrispondente alla larghezza disponibile dello schermo in px
var w = screen.width;
// assegna a "h" il valore corrispondente all'altezza disponibile dello schermo in px
var h = screen.height;
// se "w" è maggiore o uguale a 1280
if(w >= "1280"){
// assegna a "larghezza" il valore 1050
larghezza = 1050;
// assegna a "altezza" il valore 450
altezza = 450;
// altrimenti
}else{
// assegna a "larghezza" il valore 700
larghezza = 700;
// assegna a "altezza" il valore 450
altezza = 300;
}
// assegna a "x" il valore ricavato dalla differenza tra l'arrotondamento di "w" fratto 2
// e la metà di "larghezza"
var x = Math.round(w / 2) - Math.round(larghezza / 2);
// assegna a "y" il valore ricavato dalla differenza tra l'arrotondamento di "h" fratto 2
// e la metà di "altezza"
var y = Math.round(h / 2) - Math.round(altezza / 2);
// apri la finestra con le caratteristiche indicate, centrata e senza barre
finestra = window.open ('flash5.htm', null, 'left=' + x + ',screenX=' + x + ',top='
+ y + 'screenY=' + y +',width=' + larghezza + ',height=' + altezza );
}
function preferiti(){
var url="http://flash5.html.it/"
var titolo="Flash5.it - Risorse italiane su Flash"
if (document.all) {
window.external.AddFavorite(url,titolo);

}
}
function paginaIniziale() {
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://flash5.html.it/');
}
Pubblicazione
Test
Terminata la costruzione di tutte le pagine e di tutti i filmati del sito, bisogna iniziare una fase accurata di test in locale.
Bisogna provare tutti i collegamenti e tutti i tipi di file, verificando la loro presenza nei punti in cui ci si aspetta che
siano. Bisogna verificare, ad esempio, la correttezza dei nomi e delle estensioni, dal momento che in rete una maiuscola
o una minuscola cambiano in modo determinante il nome di un file. Bisogna premere tutti i pulsanti, muovere tutti gli
oggetti, e verificare il comportamento dei filmati anche in casi anomali, come cercando di accedere più volte allo stesso
file.
Fatto questo, si può spostare il sito sul proprio spazio web, ricominciando da capo tutti i test, e aggiungendone altri: ad
esempio, verificare il funzionamento dei preloader dei filmati esterni (cosa che non si può fare in locale), o il passaggio
di variabili (che nei processi http funziona solo in rete).
Altre verifiche importanti, sono quelle in relazione all'uso di browser diversi dal proprio: testare il funzionamento dei
javascript, ad esempio, su Explorer come su Netscape o su Opera, su pc come su Mac.
Upload
Vediamo la procedura di upload tramite un comune client FTP, il ws_ftp pro.
All'avvio del programma, si apre in automatico il pannello per la connessione: all'interno del pannello, inseriamo solo la
prima volta i dati necessari, fornitici dal provider dello spazio web:
Si preme sul pulsate "Connect", e inizia la procedura per la connessione. Una volta entrati nello spazio web, visibile
nello spazio di destra, accediamo alla cartella in cui devono essere messi i file, per essere visibile dall'esterno (dipende
dai casi, talvolta direttamente nella cartella iniziale). Esploriamo nella parte sinistra dell'interfaccia il nostro disco alla
ricerca della cartella in cui giacciono i file e, una volta trovati, non bisogna fare altro che trascinarli dall'altra parte.

Unico appunto importante: è preferibile costruire manualmente le cartelle, tramite il pulsante MkDir, e riempirle una ad
una.
Struttura
Sul nostro spazio web, il sito dovrà avere questa struttura:
• cartella filmati: tutti i filmati swf
• cartella testi: tutti i file txt
• cartella immagini: tutti i file immagini usati nelle pagine html
Nella cartella principale, tutti i restanti file:
Da notare la presenza dell'icona favicon.ico che, se posizionata nella root dello spazio web, viene automaticamente
aggiunta accanto al nome nell'elenco dei Preferiti.