Come Costruire Un Sito in Flash

Guide / Costruire un sito in Flash passo per passo / Prefazione
Costruire un sito in Flash passo per passo

guide
a cura di Negatyve
Questa completa guida insegna a costruire un sito interamente in Flash utilizzando i metodi pi richiesti.
Prefazione
inserita sabato 16 marzo 2002
CREA il tuo sito e pubblicalo con noi Maledetta Cartuccia.it Blu Hosting: hosting professionale! Domini a 13 euro
Visite: 19692
Visualizza in anteprima il risultato di questa guida Lo scopo di questa guida non spiegare come si debba creare un sito web, ma come sia possibile costruirne uno che abbia determinate caratteristiche, la pi importante delle quali essere interamente in Flash. Il sito di cui tratteremo (costruito per questo scopo), pur essendo abbastanza elementare, contiene tutte le funzioni e le utilit pi comuni: nondimeno, non utilizza alcun altro linguaggio se non una base di javascript, necessaria per incorporarlo al meglio in una pagina web. In questi suoi limiti, il sito trova anche il suo punto di forza: la compatibilit. E non solo dal lato dell'utente che lo visualizza, ma anche da parte del realizzatore, che non dovr appoggiarsi a linguaggi lato server, e che non dovr studiare soluzioni particolari per adattarlo alle pi diverse piattaforme e browser. Questo sito non ha delle pretese dal punto di vista grafico, dal momento che i gusti sono assolutamente variabili, cos come le necessit derivanti dallo scopo che si prefigge. Quindi ho preferito non indugiare troppo n sull'aspetto (che si basa su uno stile molto di moda), n sui contenuti, quanto invece a spiegare alcune delle funzioni pi diffuse, e a rimandare ad articoli o tutorial per cose gi ampiamente trattate. Strumenti Per la costruzione di questo sito e di questa guida, mi sono servito delle seguenti risorse: Macromedia Flash Adobe Photoshop 6 HTML Tidy La musica di sottofondo: "on the fly", di rimela (Ridzert van der Zee) rimela's music (ringrazio molto rimela, conosciuto via mail dalle pagine di flashkit.com, per la sua gentilezza, e consiglio spassionatamente di fare un salto sul suo sito |thanks, mate|) Le font usate per i filmati sono, oltre a quelle dispositivo: la standard 07_55 (shareware font creata da Craig Kroeger, miniml.com) la hooge 05_55 (shareware font creata da Craig Kroeger, miniml.com) la 04b_08 (freeware font creata da Yiji Oshimoto, 04) Files che compongono il sito: File sorgenti (*.fla) Tutti gli altri files (*.htm e *.gif)
[ Sommario guida ]
[ Lezione successiva ]
Guide / Costruire un sito in Flash passo per passo / Introduzione

guide
a cura di Negatyve
Introduzione
Visite: 17008
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", come gia spiegato in questo articolo: 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.
[ Sommario guida ]
1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.
Guide / Costruire un sito in Flash passo per passo / Disegno del filmato di base

guide
a cura di Negatyve
Disegno del filmato di base

Visite: 18700
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.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Il menu principale

guide
a cura di Negatyve
Il menu principale
Visite: 18795
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)) { gotoAndPlay (_totalframes-_currentframe); } else { play (); } aperto = false; } }
Se adesso esportiamo il filmato, possiamo vedere come funziona il "pulsante" ( appunto un movieclip, e in questo modo non abbiamo la manina). Passandoci sopra con il mouse, il pulsante tende a diventare bianco, fino a fermarsi sul quel colore. Uscendo dal pulsante, il colore torna gradualmente giallo. Vediamo perch:
// al movimento del mouse onClipEvent (mouseMove) { // se questo movieclip "tocca" il puntatore del mouse // e la variabile "aperto" false if (this.hitTest(_root._xmouse, _root._ymouse, false) && !aperto) { // se il frame attuale del movieclip maggiore della met dei totali 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<(_totalFrames/2)) { // riproduci il movieclip dal frame "totali" meno il frame attuale gotoAndPlay (_totalframes-_currentframe); // altrimenti } else { // riproduci dal frame attuale play (); } // setta la variabile "aperto" come falsa aperto = false; } }
Come spiegato nella costruzione, il movieclip contiene due animazioni speculari, dal giallo al bianco, dal bianco al giallo. Ad ogni frame della prima animazione, corrisponde un frame nell'altra, che rappresenta l'animazione al contrario a partire dallo stesso grado di giallo. Ad esempio, se mi posiziono con il mouse sul pulsante, inizia la trasformazione del colore: mi tolgo dal mouse, ed esattamente dal bianco raggiunto torno al giallo. Questo perch rimando al frame corrispondente: se esco quando sono al frame 3, rimando al frame "totali" meno il frame corrente, cio al 19. Se esco al frame 10 (quasi bianco), rimando al frame totali (22) il corrente (10), e quindi al 12. Cosa da distinguere, per, se sono prima della met, o dopo la met. Questo mi serve a stabilire se sono nella trasformazione di andata o di ritorno. Un caso passo passo: mi posiziono col mouse sul movieclip: il frame attuale il primo, quindi minore della met, e riproduco dal frame corrente. arrivo al frame 5, esco con il mouse dal movieclip: l'animazione salta a totali meno il frame corrente, quindi 22-5=17, e sembra che il pulsante torni giallo dalla stessa gradazione. arrivato al frame 20, torno sul movieclip: questa volta il frame corrente maggiore della met, quindi salto al frame 22-20 = 2 e cos via. L'aggiunta della variabile aperto, associata al movimento del mouse, mi permette di stabilire
che se sono sopra il movieclip e ancora non ne sono uscito, non deve considerare lo script di ritorno. Questo perch altrimenti, movendo il mouse sopra il movieclip, avrei un continuo avanti e indietro, e cos anche fuori. Aggiungiamo adesso un'altro pezzo di codice.
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<(_totalFrames/2)) { gotoAndPlay(_totalframes-_currentframe); } else { play (); } aperto = false; } } } onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse, false)) { gotoAndStop (11); _root.comandi(_parent._name); premuto = true; } }
A questo punto sottoponiamo l'animazione di rollover e rollout alla verifica della variabile "premuto": se "premuto" falsa, allora c' l'animazione, altrimenti posso muovermi sul pulsante senza che succeda nulla. Quand' che la variabile "premuto" diventa vera, e rimuove l'animazione? Quando si clicca sul pulsante: onClipEvent(mouseDown) significa alla pressione del pulsante sinistro del mouse, e nell'if contenuto il controllo sulla posizione del puntatore (che deve essere sul movieclip). Allora l'animazione si ferma al frame 11 (pulsante completamente bianco), premuto diventa vera, e richiamiamo una funzione che si chiama "comandi", che sta nella root, e alla quale passiamo come parametro il nome di istanza del movieclip che contiene pulsanteDentro (_parent._name). Attualmente il nostro movieclip non annidato in nessun altro movieclip: e noi lo facciamo adesso.
Il menu
Selezioniamo il movieclip sullo stage, gli diamo come nome di istanza interno, e lo convertiamo in un movieclip che, molto originalmente, chiameremo pulsanteFuori. Attualmente abbiamo, sullo stage, il movieclip pulsanteFuori, al cui interno, nell'unico layer e frame, presente il movieclip pulsanteDentro. Trasciniamo sullo stage, dalla libreria, altre 5 istanze del movieclip pulsanteFuori, che allineeremo accanto alla prima. A ciascuna diamo un nome di istanza, composta da una singola parola, e che sar, tranne nel caso del pulsante che porta alla pagina principale, il nome dei filmati esterni che corrispondono alle varie sezioni. Quindi, in ordine da destra a sinistra, home, testo, slide, finestre, scroll, contatti. 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:
Guide / Costruire un sito in Flash passo per passo / La funzione

guide
a cura di Negatyve
La funzione
Visite: 15052
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; } }
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Lo scrolling

guide
a cura di Negatyve
Lo scrolling
Visite: 15382
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, gi spiegate in questo tutorial) 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--;
e quello per scorrere verso il basso sar:

news.scroll = news.scroll + 1;
oppure, in forma abbreviata: news.scroll++;
Se associassimo questi comandi alla pressione di un comune pulsante, dovremo cliccare una volta per ogni riga che vogliamo scrollare: se invece li sottoponiamo a un enterFrame, avremo uno scroll continuo.
Siamo nel secondo frame del layer "pulsanti", all'interno del movieclip news. Disegniamo sullo stage una freccia gialla, convertiamola in movieclip con il nome freccia, e posizioniamone un'altra istanza accanto alla prima, ruotata di 180 gradi.
Selezioniamo la freccia che punta verso l'alto. Associamo:

onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse,_root._ymouse,false)) { premuto = true; } } onClipEvent (mouseUp) { premuto = false; } onClipEvent (enterFrame) { if (premuto) { _parent.news.scroll--; } }
La prima parte dello script gi stata spiegata: serve a stabilire se con il mouse ho cliccato sul movieclip in questione. Quando clicco, setto la variabile premuto come vera, e quando rilascio il tasto, la setto come falsa. Quando la variabile premuto vera, il movieclip, ogni volta che viene riprodotto (enterFrame), scorre il testo di _parent.news (_parent serve a scendere di un livello, da dentro il movieclip freccia al movieclip news in cui giace il campo di testo) di una riga verso l'alto. Quindi, fintantoch tengo premuto il tasto del mouse sulla freccia, il campo di testo scorre di tante righe al 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; } }
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Come impostare i tag

guide
a cura di Negatyve
Come impostare i tag

inserita gioved 21 marzo 2002
Visite: 10999
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 <b> e <i> (che funzionano anche in relazione alle dimensioni dei caratteri usati), possiamo usare il <br> per mandare a capo, il <font> per i colori, le dimensioni, e le Font vere e proprie, l' <a> 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 <b>capitolo 7</b> di questo manuale, <i>Dizionario di ActionScript</i>, 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 <br>, da:

Il <b>capitolo 7</b> di questo manuale, <i>Dizionario di ActionScript</i>,<br>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 <font> impostiamo le caratteristiche dei caratteri, con le dimensioni in punti. Le parole "Dizionario di Actionscript", con le opportune modifiche, da:
<font color="#0000CC" size="11">Dizionario di Actionscript</font>
nel file di testo, in output diventano:

Dizionario di Actionscript
Con <a> invece colleghiamo le parole ad un link da aprire in una pagina esterna:
<a href="http://flash-mx.html.it" target="_blank">Flash-MX.it - Risorse italiane su Flash</a>
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 <br>, 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 <br>. 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 <font>, 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.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Stampare

guide
a cura di Negatyve
Stampare
Visite: 9825
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. [ Sommario guida ] [ Lezione successiva ]
Guide / Costruire un sito in Flash passo per passo / Barra di scorrimento testo

guide
a cura di Negatyve
Barra di scorrimento testo

Visite: 10151
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.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Barra di scorrimento testo: azioni

guide
a cura di Negatyve
Barra di scorrimento testo: azioni

Visite: 9539
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 <= hScroller){ _parent.scroller._y = 0; } } _parent.scroller.scorri(); }
Cliccando sulla barra, lo scroller raggiunge il puntatore del mouse, aumentando o diminuendo lo scroll del testo di conseguenza.
// alla pressione del tasto sinistro del mouse onClipEvent(mouseDown){ // 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 <= hScroller){ // posiziona lo scroller sullo zero _parent.scroller._y = 0; } } // chiama la funzione scorri() contenuta nel movieclip "scroller" _parent.scroller.scorri(); }
Gli ultimi due controlli servono a stabilire che lo scroller non possa sovrapporsi ai pulsanti, qualora il punto in cui viene cliccata la barra sia troppo vicino ai pulsanti stessi.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Slide di immagini

guide
a cura di Negatyve
Slide di immagini
inserita luned 25 marzo 2002
Visite: 10190
In questa sezione tratteremo il primo dei nostri due slider di immagini. Questo tipo di slider molto apprezzato, prima di tutto per la bellezza: ma non sempre una buona scelta, a causa di un particolare non indifferente. Infatti questo slider non si ferma mai, e all'interno di alcune scelte stilistiche pu risultare fastidioso. Come abbiamo gi visto, questa seconda sezione sar contenuta in un filmato che si chiamer slide.swf. Per cui creiamo un nuovo documento Flash, 700x300, 24 fps: andiamo al menu File/Open As Library, e apriamo come libreria il filmato flash5.fla. Da questa, trasciniamo nella libreria del nuovo filmato il movieclip base. Salviamo con il nome slide.fla 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<50) { _alpha += 5; } } } onClipEvent (mouseDown) { if (sopra) { _root.comandi(substring(_parent._name,7,1)); } }
Per ora lasciamo stare il codice, che riprenderemo in mano pi avanti. Andiamo al layer superiore, dove presente il movieclip cornice: a questo associamo
onClipEvent (load) { colore = new Color(this); colore.setRGB( 0x000000 ); }
Questo codice serve semplicemente a rendere nera la cornice (un altro modo oltre al pannello Effetti).
La barra Clicchiamo sul pulsante + in basso a sinistra nel pannello libreria, e aggiungiamo un movieclip che chiameremo barra. All'interno di questo movieclip, creiamo due layer, uno in basso con il nome "clip", e uno in alto con il nome "pulsanti", di un frame ciascuno. Nel layer "clip", posizioniamo i sei movieclip contenenti le sei immagini, uno accanto all'altro: quindi, raggruppandoli, li centriamo nel movieclip, per poi separarli nuovamente. La situazione finale sar questa:
Nel layer pulsanti, invece, trasciniamo 6 istanze del movieclip base: ridimensioniamo ogni istanza perch sia grande quanto le immagini del layer sotto, posizionandole in modo che ognuna copra un movieclip. Adesso selezioniamo una a una le istanze del movieclip base, da sinistra verso destra, e diamo a ciascuna come nome di istanza, "clip" + un numero progressivo a tre cifre. Quindi clip001, clip002, clip003 eccetera. I campi di testo
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; 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; } }
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. [ Sommario guida ] [ Lezione successiva ]
Guide / Costruire un sito in Flash passo per passo / Slide di immagini: azioni

guide
a cura di Negatyve
Slide di immagini: azioni

Visite: 9011
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<50) { _alpha += 5; } } }
stabiliamo che ad ogni riproduzione del movieclip, se con il mouse siamo sopra il movieclip stesso ( hitTest ), se l'alpha maggiore di zero, deve diminuire di 5 unit, altrimenti, se non siamo sul movieclip e l'alpha minore di 50, deve aumentare di 5 unit ( la sintassi _alpha += 5 corrisponde a _alpha = _alpha+ 5 ). In questo modo, al passaggio del mouse sul movieclip, questo si schiarisce fino a diventare trasparente, per poi tornare scuro quando il mouse se ne allontana.
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.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Le finestre

guide
a cura di Negatyve
Le finestre
Visite: 8810
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<300) { if (!chiuso) { nextFrame(); } else { prevFrame (); } chiuso = !chiuso; } else { click = getTimer(); } } } on (release) { rettangolo.colore.setRGB( 0xFFCC33 ); 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<300) { // se la variabile "chiuso" false if (!chiuso) { // vai al frame seguente nextFrame(); // altrimenti } else { // vai al frame precedente prevFrame (); } // setta il valore della variabile "chiuso" come il suo opposto chiuso = !chiuso; // altrimenti (pi di tre decimi di secondo) } else { // resetta la variabile per il calcolo del doppio click click = getTimer(); } } } // 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 [ Sommario guida ] [ Lezione successiva ]
Guide / Costruire un sito in Flash passo per passo / Scroll di immagini

guide
a cura di Negatyve
Scroll di immagini
Visite: 8286
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 = "<a href='" + link[i-1] + "' target='_blank'>" + link[i-1] + "</a>"; 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: <a href="indirizzo" target="_blank">indirizzo</a>, 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. [ Sommario guida ] [ Lezione successiva ]
Guide / Costruire un sito in Flash passo per passo / Form mail

guide
a cura di Negatyve
Form mail
Visite: 8493
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. [ Sommario guida ] [ Lezione successiva ]
Guide / Costruire un sito in Flash passo per passo / La funzione di convalida

guide
a cura di Negatyve
La funzione di convalida
Visite: 7386
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 + "<" + email + ">"; 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<caratteri.length; i++) { if (mail.indexOf(caratteri[i])>=0) { errore = true; err = 1; } } } // terza parte if (!errore) { for (i=0; i<mail.length; i++) { if (mail.charAt(i) == "@") { count++; } } if (count != 1) { errore = true; err = 1; } } // quarta parte if (!errore) { dividi = mail.split("@"); if (dividi[0].length<1) { errore = true; err = 1; } if (dividi[1].indexOf(".")<0) { errore = true; err = 1; } else { dominio = dividi[1].split("."); if (dominio[0].length<2) { errore = true;
err = 1; } if (dominio[1].length<2) { errore = true; err = 1; } } } // 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<indirizzo@host.it>" 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<caratteri.length; i++) { if (mail.indexOf(caratteri[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<caratteri.length; i++)) viene controllato se uno di questi caratteri stato scritto nel campo email.
mail.indexOf("flash"); controlla se nella stringa "mail", contenuta la parola "flash". Se la parola c', viene restituito l'indice in cui inizia, altrimenti, se non c', viene restituito -1 Noi controlliamo se nella stringa "mail" presente uno dei caratteri: se di questi caratteri viene restituito un indice diverso da -1, vuol dire che il carattere c'. Allora la variabile errore viene settata su vero, e il messaggio di errore (err) su 1 ("email vuota o non corretta")
Terza parte
if (!errore) { for (i=0; i<mail.length; i++) { if (mail.charAt(i) == "@") { count++; } } if (count != 1) { errore = true; err = 1; } }
Se stato superato il precedente controllo, (non ci sono caratteri non validi), viene verificata la presenza di una sola chiocciola @. Partendo dallo 0, e arrivando alla lunghezza della stringa "mail", viene verificato se il carattere corrispondente uguale a @: quando questa uguaglianza verificata, il valore di count viene aumentato di una unit. 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<1) { errore = true; err = 1; } if (dividi[1].indexOf(".")<0) { errore = true; err = 1; } else { dominio = dividi[1].split("."); if (dominio[0].length<2) { errore = true; err = 1; } if (dominio[1].length<2) { errore = true; err = 1; } } }
Il controllo pi lungo: se non ci sono errori (nessun carattere invalido, presenza di una sola chiocciola), a dividi vengono assegnati i valori della divisione in due della stringa "mail" nel carattere "@". Ad esempio, se "mail" uguale a "indirizzo@provider", con dividi = mail.split("@"); otterremo: dividi[0] = "indirizzo" dividi[1] = "provider" Una volta diviso il contenuto di "mail", se la lunghezza della prima parte (dividi[0]) inferiore a 1 (non c' niente prima della chiocciola), abbiamo un errore, e il messaggio 1. Quindi, viene verificato se nella seconda parte, presente un punto. Se non presente, c' errore. Se c' il punto, la stringa viene divisa in due nel punto. Ricominciando da capo, quindi: se il contenuto di "mail" "indirizzo@provider.it", allora dividi[0] = "indirizzo"
dividi[1] = "provider.it" Viene preso dividi[1], e diviso sul punto, ottenendo: dominio[0] = "provider" dominio[1] = "it" Se la prima parte ha una lunghezza inferiore a due caratteri, c' errore, e cos per la seconda parte.
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<indirizzo@host.it>?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 "<Enter>") { convalida(); } on (keyPress "<Tab>") { 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
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Il pannello di controllo

guide
a cura di Negatyve
Il pannello di controllo
inserita marted 2 aprile 2002
Visite: 7179
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. [ Sommario guida ] [ Lezione successiva ]

guide
a cura di Negatyve
Visite: 6876
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 barra._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:
[ Sommario guida ]

guide
a cura di Negatyve
Visite: 6783
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.
[ Sommario guida ]

guide
a cura di Negatyve
inserita gioved 4 aprile 2002
Visite: 6377
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<10) ? "0"+ore : ore; minuti = (minuti<10) ? "0"+minuti : minuti; secondi = (secondi<10) ? "0"+secondi : secondi; ora = ore+":"+minuti+":"+secondi; dat = nomegiorno+", "+oggi+" "+nomemese+" "+anno; delete tempo; tempo = new Date(); }
Per ragioni di spazio non includo il contenuto degli array giorni e mesi. Si tratta dell'elenco, in lettere maiuscole, dei giorni della settimana da domenica a sabato, e dei mesi da gennaio a dicembre, in questo formato: "DOMENICA","LUNEDI","MARTEDI",......,"SABATO" "GENNAIO","FEBBRAIO","MARZO",......"DICEMBRE" Con new Date, creiamo un'istanza di nome tempo dell'oggetto Date. Questo l'output normale:
Tramite i comandi seguenti, estraiamo dall'oggetto tempo, tutti i dati relativi alla data e all'ora, e li trasformiamo in questo output:
// al caricamento del movieclip onClipEvent (load) { // crea i due array giorni = new Array(contenuto1); mesi = new Array(contenuto2); // crea un'istanza dell'oggetto Date di nome tempo tempo = new Date(); } // ad ogni riproduzione del movieclip onClipEvent (enterFrame) { // estrai da tempo le ore (numero da 0 a 23), e associale alla variabile "ore" ore = tempo.getHours(); // estrai da tempo i minuti (numero da 0 a 59) 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<10) ? "0"+ore : ore; // come per le ore minuti = (minuti<10) ? "0"+minuti : minuti; // come per le ore secondi = (secondi<10) ? "0"+secondi : secondi; // associa a "ora" la stringa composta dai seguenti valori ora = ore+":"+minuti+":"+secondi; // associa a dat la stringa composta dai seguenti valori dat = nomegiorno+", "+oggi+" "+nomemese+" "+anno; // cancella la variabile "tempO" delete tempo; // crea una nuova istanza dell'oggetto Date associata a "tempo" tempo = new Date(); }
Questo script presenta due difetti, e derivano entrambi dal fatto che stiamo parlando di un "orologio" costruito esclusivamente in Flash. Il primo che i dati per estrarre l'ora, vengono presi dal sistema del visitatore: il che significa che se questi ha impostato un'ora sbagliata nel proprio pc, sar sbagliata anche quella nel filmato. Il secondo deriva dal fatto che l'orologio di sistema non prevede l'ora legale o solare, e che quindi, al relativo cambio, l'ora si trover ad essere sbagliata di una unit. All'avvento dell'ora legale, si dovr cambiare una riga dello script, da
ora = ore+":"+minuti+":"+secondi;
a
ora = (ore+1)+":"+minuti+":"+secondi;
Purtroppo non possiamo impostare a priori il cambio della stringa, dal momento che, come noto, il giorno del cambio di orario variabile a seconda di casi. 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:
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(); }
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:
[ Sommario guida ]

guide
a cura di Negatyve
Visite: 6412
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).

guide
a cura di Negatyve
inserita luned 8 aprile 2002
Visite: 6121
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:
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:
[ Sommario guida ]

guide
a cura di Negatyve
Visite: 5983
_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
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 STOP
onClipEvent(mouseUp){ premuto = false; if(sopra){ colore.setRGB( 0xFFFFFF ); if (_root.riproduzione) { _root.suono.stop(); _root.riproduzione = false; } }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.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / L'intro

guide
a cura di Negatyve
L'intro
Visite: 6700
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<30){ // aumenta il valore dell'alpha di una unit _alpha += 1; } } }
In questo modo, all'avvio del preloader, la freccia sar invisibile, e quando ne verr settata la variabile vai come vera, inizier un fade-in fino ad essere visibile al 30%. Andiamo alla prima scena. Allunghiamo il layer, con il pulsante F5, fino ad occupare tre frame, nei quali inseriamo un rettangolo con gradiente. Aggiungiamo un layer, di cui lasciamo vuoti i primi due frame: nel terzo, trasciniamo dalla libreria allo stage, un'istanza del movieclip preloader (tutto ci serve a far funzionare il trucco anche con Netscape, evidentemente pi lento nel leggere la cache rispetto all'Explorer). A questo movieclip, associamo:
onClipEvent (load) { _visible = 0; _root.stop(); if (_root.getBytesLoaded() == _root.getBytesTotal()) { 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); } } }
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Il preloader

guide
a cura di Negatyve
Il preloader
Visite: 7530
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); } } }
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Index.htm

guide
a cura di Negatyve
Index.htm
Visite: 6445
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.
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="top"> <div align="center"> <a href="detect.htm" target="_self";> <img src="immagini/flash.gif" width="150" height="75" border="0"></a> <br> <a href="http://flash5.html.it/" target="_self";> <img src="immagini/html.gif" width="150" height="75" border="0"></a> <br> <a href="http://www.macromedia.com/shockwave/download/" target="_blank";> <img src="immagini/plugin.gif" width="150" height="75" border="0"></a> </div> </td> </tr> </table>
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 <head>. La pagina completa sar:
<html> <head> <title>Flash5.it</title> <script language="javascript" type="text/javascript" src="flash5.js"></script> </head> <body bgcolor="#000000" text="#000000" scroll=no> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="top"> <div align="center"> <a href="detect.htm" target="_self"> <img src="immagini/flash.gif" width="150" height="75" border="0"></a> <br> <a href="http://flash5.html.it/" target="_self"> <img src="immagini/html.gif" width="150" height="75" border="0"></a> <br> <a href="http://www.macromedia.com/shockwave/download/?P1_Prod_Version=ShockwaveFlash" target="_blank"> <img src="immagini/plugin.gif" width="150" height="75" border="0"></a> <br> <a href="javascript:paginaIniziale()"> <img src="immagini/iniziale.gif" border="0"></a> <br> <a href="javascript:preferiti()"> <img src="immagini/preferiti.gif" border="0"></a> </div> </td> </tr> </table> </body> </html>
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.
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Detect

guide
a cura di Negatyve
Detect
Visite: 6347
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 Da questa cartella preleviamo solo i file che ci servono, cio: 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):
<html> <head> <title>detect plugin</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="Dispatcher.js"></script> <script language="VBScript" src="Dispatcher.vbs"></script> </head> <body bgcolor="#FFFFFF"> <script language="JavaScript"> // 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 ); </script> </body> </html>
La cambiamo cos:
<html> <head> <title>detect plugin</title> <META http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="Dispatcher.js"></script> <script language="VBScript" src="Dispatcher.vbs"></script> </head> <body bgcolor="#FFFFFF"> <script language="JavaScript"> MM_FlashDispatch( "flash.htm", // contentURL "5.0", // contentVersion false, // requireLatestRevision "noflash.htm", // upgradeURL MM_FlashUserDemurred(), // install "noflash.htm", // installURL "noflash.htm", // altURL false // overridePluginsPage ); </script> </body> </html>
L'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".
<html> <head> <title>detect plugin</title> <META http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="Dispatcher.js"></script> <script language="VBScript" src="Dispatcher.vbs"></script> </head> <body bgcolor="#000000" text="#000000" scroll=no> <table width="100%" height="100%" border="0"> <tr valign="middle" align="center"> <td> <img src="immagini/check.gif"> </td> </tr> </table> <script language="JavaScript"> MM_FlashDispatch( "flash.htm", // contentURL "5.0", // contentVersion false, // requireLatestRevision "noflash.htm", // upgradeURL MM_FlashUserDemurred(), // install "noflash.htm", // installURL "noflash.htm", // altURL false // overridePluginsPage ); </script> </body> </html>
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Scelte

guide
a cura di Negatyve
Scelte
Visite: 5327
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
<html> <head> <title>::flash5.it::</title> <script language="javascript" type="text/javascript" src="flash5.js"></script> </head> <body bgcolor="#000000" onLoad="riempi();lancia()" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" scroll=no> <table width="100%" height="100%" border="0"> <tr align="center" valign="middle"> <td> <a href="javascript:lancia()"> <img src="immagini/lancia.gif" width="200" height="100" border="0"></a><br> <a href="javascript:history.go(-2)"> <img src="immagini/torna.gif" border="0"></a> </td> </tr> </table> </body> </html>
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).
<html> <head> <title>::flash5.it::</title> <script language="javascript" type="text/javascript" src="flash5.js"></script> </head> <body bgcolor="#000000" scroll=no onload="riempi()"> <table width="100%" height="100%" border="0"> <tr align="center" valign="middle"> <td> <img src="immagini/noflash.gif" width="200" height="100" border="0"><br><br> <img src="immagini/problemi.gif" border="0"> <br><br> <a href="javascript:lancia()"> <img src="immagini/pop.gif" border="0"></a> <br><br> <a href="javascript:history.go(-2)"> <img src="immagini/indietro.gif" border="0"></a> <br> <a href="http://www.macromedia.com/shockwave/download/?P1_Prod_Version=ShockwaveFlash" target="_blank"> <img src="immagini/scarica.gif" border="0"></a> </td> </tr> </table> </body> </html>
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
<html> <head> <title>::flash5.it::</title> </head> <frameset rows="100%,*" framespacing="0" frameborder="no" border="0"> <frame SRC="main.htm" NAME="corpo" frameborder="0" border="no" marginwidth="0" marginheight="0" scrolling="no"> <frame SRC="vuota.htm" NAME="vuoto" frameborder="0" border="no" marginwidth="0" marginheight="0" scrolling="no"> </frameset> <noframes> Il tuo browser non supporta i frame e questa pagina ne fa uso. </noframes> </html>
vuota.htm
<html> <head> <title>::flash5.it::</title> </head> <body bgcolor="#000000" scroll=no> </body> </html>
main.htm
<html> <head> <title>::flash5.it::</title> </head> <body bgcolor="#000000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" scroll=no onload="self.focus()"> <script language="JavaScript"> var dim = screen.width; if(dim >= "1280"){ larghezza = 1050; altezza = 450; }else{ larghezza = 700; altezza = 300; } document.write ('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ' +'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" ' +'WIDTH=' + larghezza + ' HEIGHT=' + altezza + '> ' +'<PARAM NAME=movie VALUE="filmati/intro.swf"> ' +'<PARAM NAME=quality VALUE=high> ' +'<PARAM NAME=bgcolor VALUE=#FFFFFF> ' +'<PARAM NAME=menu VALUE=false> ' +'<EMBED src="filmati/intro.swf" quality=high menu=false bgcolor=#FFFFFF WIDTH=' + larghezza + ' HEIGHT=' + altezza +' TYPE="application/x-shockwave-flash" ' +'PLUGINSPAGE="http://www.macromedia.com/shockwave/download"> ' +'</EMBED></OBJECT>'); </script> </body> </html>
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Javascript

guide
a cura di Negatyve
Javascript
Visite: 5569
Vediamo il significato del javascript contenuto nella pagina main.htm.

<script language="JavaScript"> var dim = screen.width; if(dim >= "1280"){ larghezza = 1050; altezza = 450; }else{ larghezza = 700; altezza = 300; } document.write ('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ' +'codebase="http://download.macro....................................sh.cab#version=5,0,0,0" ' +'WIDTH=' + larghezza + ' HEIGHT=' + altezza + '> ' +'<PARAM NAME=movie VALUE="filmati/intro.swf"> ' +'<PARAM NAME=quality VALUE=high> ' +'<PARAM NAME=bgcolor VALUE=#FFFFFF> ' +'<PARAM NAME=menu VALUE=false> ' +'<EMBED src="filmati/intro.swf" quality=high menu=false bgcolor=#FFFFFF WIDTH=' + larghezza + ' HEIGHT=' + altezza +' TYPE="application/x-shockwave-flash" ' +'PLUGINSPAGE="http://www.macromedia.com/shockwave/download"> ' +'</EMBED></OBJECT>'); </script>
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:
<script language="javascript" type="text/javascript" src="flash5.js"></script>
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/'); }
[ Sommario guida ]
Guide / Costruire un sito in Flash passo per passo / Pubblicazione

guide
a cura di Negatyve
Pubblicazione
Visite: 5942
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.
[ Sommario guida ]

Come Costruire Un Sito in Flash

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Come Costruire Un Sito in Flash

Caricato da

Copyright:

Formati disponibili

Guide / Costruire un sito in Flash passo per passo / Prefazione

Costruire un sito in Flash passo per passo

Guide / Costruire un sito in Flash passo per passo / Introduzione

Costruire un sito in Flash passo per passo

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Costruire un sito in Flash passo per passo

Disegno del filmato di base

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Guide / Costruire un sito in Flash passo per passo / Il menu principale

Costruire un sito in Flash passo per passo

Guide / Costruire un sito in Flash passo per passo / La funzione

Costruire un sito in Flash passo per passo

per avviare la riproduzione useremo:

per resettare la variabile:

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Guide / Costruire un sito in Flash passo per passo / Lo scrolling

Costruire un sito in Flash passo per passo

nell'ambiente di lavoro scriveremmo:

In questo modo, come se avessimo scritto:

Il movieclip Il campo di testo Apriamo il file flash5.fla, e visualizziamo la libreria.

oppure, in forma abbreviata: news.scroll--;

e quello per scorrere verso il basso sar:

oppure, in forma abbreviata: news.scroll++;

Selezioniamo la freccia che punta verso l'alto. Associamo:

quando clicchiamo sul tasto "homepage". I cambiamenti da fare sono minimi:

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Costruire un sito in Flash passo per passo

Come impostare i tag

come output otteniamo nel campo di testo:

Se aggiungiamo anche un <br>, da:

nel file di testo, in output diventano:

Flashguru sui tag HTML.

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Guide / Costruire un sito in Flash passo per passo / Stampare

Costruire un sito in Flash passo per passo

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Costruire un sito in Flash passo per passo

Barra di scorrimento testo

Al movieclip base associamo il seguente script (ci torner utile pi tardi):

Graficamente, l'interno del movieclip apparir cos:

onClipEvent(load){ colore = new Color(this); colore.setRGB( 0xCCCCCC ); } onClipEvent(mouseDown){ if(this.hitTest(_root._xmouse,_root._ymouse,false)){ _parent.cambiatesto(_name); } }

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Costruire un sito in Flash passo per passo

Barra di scorrimento testo: azioni

inserita gioved 21 marzo 2002

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Guide / Costruire un sito in Flash passo per passo / Slide di immagini

Costruire un sito in Flash passo per passo

La disposizione finale degli oggetti sullo stage sar questa:

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Costruire un sito in Flash passo per passo

Slide di immagini: azioni

Nel secondo pezzo:

Vediamolo un pezzo alla volta.

Ad ogni riproduzione del movieclip, vengono fatti questi calcoli.

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Guide / Costruire un sito in Flash passo per passo / Le finestre

Costruire un sito in Flash passo per passo

timeline principale, questa:

_root["finestra"+num].rettangolo.colore.setRGB(0xFFCC33); _root.alto = _root["finestra"+num]._name; }

1997-2002 - Grafica, layout e guide sono di esclusiva propriet di HTML.it S.r.l.

Guide / Costruire un sito in Flash passo per passo / Scroll di immagini

Costruire un sito in Flash passo per passo

e a quello per scorrere verso sinistra: