Curso Completo Action Script Flash

Questo corso è particolarmente indicato a chi, per la prima volta, si trova ad affrontare il linguaggio di programmazione interno di Flash o i linguaggi di programmazione in generale.

Usare il pannello delle ActionScript

inserita giovedì 18 gennaio 2001 Visite: 56178

Parte fondamentale del linguaggio di programmazione interno di Flash, è il pannello Actions che permette di scrivere il codice degli script. E' tramite questo strumento che è possibile assegnare azioni agli oggetti:

Per aprire il pannello, è possibile cliccare direttamente sull'iconcina in basso a destra, oppure cliccando con il pulsante destro del mouse sull'oggetto scelto per assegnare l'azione e, dal menù a cascata, selezionare la voce Actions.L'inserimento delle actions (o azioni) è possibile tramite il pulsante + in alto a sinistra del pannello, oppure cliccando direttamente sulla categoria di action desiderata (la lista a sinistra). Lì vi sono riportate tutte le categorie possibili associate alle istruzioni del codice (per istruzioni intendo tutti i comandi possibili da utilizzare nelle azioni).

In basso a destra del pannello, notiamo le due immagini . Per adesso limitiamoci a sapere che la seconda icona, permette di restringere/allargare (a discapito delle proprietà delle istruzioni) l'area di lavoro del pannello (la prima icona verrà spiegata in seguito).

Cliccando sull'icona di menu del pannello (sotto la "x" di chiusura, a fianco del "?"), è possibile impostare il pannello in modo personalizzato:

http://flash-mx.html.it/guide/print_lezione.asp?idguida=3&id=24

Per default la finestra delle proprietà dovrebbe essere impostata in questo modo.Le prime due voci danno la possibilità di selezionare la modalità di scrittura Normale o Esperta. Vi sconsiglio caldamente la seconda per adesso... perché tramite questa, il codice, anziché selezionato da menu ed inserito, deve essere digitato manualmente.Le 5 righe successive permetto salti a righe specifiche (Goto Line), ricerche all'interno del codice (Find, Find Again), sostituzione di stringhe (Replace) e verifica del codice scritto (Check Syntax - usato per chi scrive manualmente).Vi sono poi le selezioni per l'importazione/esportazione del codice e la stampa (Import From File, Export As File e Print).Infine, 3 opzioni di supporto niente male: Colored Syntax che permette di assegnare un diverso colore al codice a seconda della categoria a cui appartiene; Show Deprecated Syntax che evidenzia le istruzioni obsolete (istruzioni che fanno parte di Flash4 ma sono ancora supportate in Flash5 per permettere il passaggio da un file versione 4 alla versione 5) e che quindi, è suggerito non usare (cosa che non faremo); Font Size imposta la grandezza del carattere con cui è scritto il codice.

Le Actions...

Bene, ora sappiamo come scrivere il codice in Flash ma... quando dobbiamo farlo? Beh, quando vogliamo inserire un bottone per l'invio di un messaggio di posta elettronica, oppure quando semplicemente dobbiamo arrestare il filmato per evitare che la riproduzione riprenda dall'inizio una volta terminata e in tante, tante altre occasioni.

Si può affermare che ogni qualvolta bisogna scrivere del codice, si sta assegnando un'azione. Assegnando a chi o cosa? Beh, è possibile associare azioni alle clip (bottone, movieclip o graphic) oppure direttamente ai keyframe della timeline.Per fare un esempio veloce: se assegniamo l'action stop al, per esempio, 50° keyframe del nostro filmato, diciamo a Flash che a tale frame, il filmato deve interrompersi (deve quindi eseguire l'azione stop). Per effettuare questa semplice operazione, basta agire in questo modo:

cliccare sul 50° frame; se non è già aperto il pannello delle actions, cliccare sull'iconcina in basso a destra per aprirlo;

cliccare sul + (io vi consiglio questa strada.. altrimenti potrete trovare l'action Stop nella categoria Basic Actions);

selezionare la voce Basic Actions e poi Stop.

Fatto!Tutto qui, nient'altro. Agendo in questo modo, il filmato fermerà la propria riproduzione al 50° frame.

Sintassi

All'interno del codice, ogni istruzione è separata dalle altre tramite un punto e virgola (;) che ne delimita la fine:

gotoAndPlay (1);

Alcune istruzioni, come quelle per gli eventi del mouse, delimitano i propri limiti tramite le parentesi graffe ( { e } ), all'interno delle quali, vi sono le istruzioni inerenti all'istruzione "madre":

on (release) { gotoAndPlay (1);}

in questo caso, l'action gotoAndPlay è contenuta all'interno dell'evento on (release) (che gestisce il rilascio del pulsante del mouse), quindi tutto quello contenuto all'interno delle parentesi graffe è da riferire a questo evento.Non vi preoccupate se non riuscite a capire al meglio il significato dell'evento Release... vi saranno lezioni dedicate interamente a questo ed altri eventi. Per adesso, l'importante è capire la sintassi del linguaggio.Facciamo un altro esempio:

on (release) { gotoAndPlay (1);}stop ();

(per la cronaca, il codice appena scritto non esiste, è solo descrittivo)in questo caso la funzione gotoAndPlay (1); viene gestita all'interno dell'evento Release, mentre stop (); è indipendente dall'evento. Quindi, l'action stop (); viene sempre eseguita a differenza di gotoAndPlay (1); che viene eseguita esclusivamente al rilascio del pulsante del mouse (evento on). Ci siamo? Bene, continuiamo.

Per facilitare la lettura degli script, Flash assegna diversi colori al codice scritto. Le actions, vengono identificate con il colore blu, il testo, i valori e i delimitatori (punto e virgola, parentesi ecc..) con il colore nero. I commenti con il rosa e le proprietà con il verde.

Play e Stop


Quale actions migliori per iniziare il corso se non play e stop?Utilizzando queste azioni è possibile, rispettivamente, riprodurre e interrompere un filmato Flash.

Stop

Vi sarà capitato sicuramente la prima volta, di non saper come interrompere la riproduzione del filmato una volta giunto all'ultimo frame, no? Beh, vi sono due modi per agire, uno è quello classico spuntando la voce Loop nel Publish Settings di Flash; mentre l'altro è tramite azioni, e cioè utilizzando stop.Per fare questo, non basta altro che selezionare l'ultimo keyframe del filmato ed assegnargli l'action stop:

In questo esempio, il filmato Flash interromperà la propria riproduzione al frame numero 90.

http://flash-mx.html.it/guide/zip/as-base/playstop.zip


Play

L'action play, come è ovvio, riproduce il filmato. Può essere usata, nel momento in cui, dopo l'arresto del filmato, si deve riprendere la riproduzione per via di un evento causato dall'utente (il clic del mouse su un bottone, per es.). In questo caso, basta associare all'evento scelto, l'action play per riprendere la riproduzione:

(la clip "avanti" è un bottone)Abbiamo quindi creato un filmato che si riproduce fino al 90° frame, dopodiché si ferma in attesa dell'input dell'utente (il clic sul bottone), per poi riprendere l'animazione.

Go To


Durante la creazione dei filmati, spesso capiterà la necessità di indirizzarli a frame specifici. Un esempio è il bottone "skip", utilizzato solitamente per "saltare" l'introduzione Flash e entrare direttamente nell'homepage del sito. Nel caso in cui l'introduzione e il resto del sito siano nello stesso filmato (divisi in scene, per es.), è necessario utilizzare l'action goto, che rimanda ad un frame (o scena) specifico del filmato.Si possono impostare diversi parametri per l'azione, eccone la spiegazione:

in Scene è possibile selezionare il nome della scena in cui rimandare la riproduzione ("<current scene>" rimanda alla stessa scena);

in Type è necessario inserire la tipologia del rimando:

Frame Number specifica che il rimando deve puntare al frame numero x (dove x è indicato nella casella Frame);

Frame Label invece, punta al frame con etichetta x;

Expression punta al frame risultante dall'espressione indicata nella casella Frame (il numero di frame viene calcolato in base ad una condizione);

Next Frame punta al frame successivo alla testina di lettura frame;

Previous Frame invece, punta al frame precedente.

come già detto, in Frame è necessario inserire il numero/nome del frame;

Go to and Play, che può essere spuntato o meno, specifica se dopo il rimando, Flash deve interrompere la riproduzione del filmato o meno.

http://flash-mx.html.it/guide/zip/as-base/goto.zip

Get URL


I link a pagine esterne, vengono gestiti tramite getURL("") per mezzo del quale è possibile aprire pagine Web esterne o linkare ad un indirizzo email per spedire una posta.

Nella casella URL va inserito l'indirizzo della pagina Web da aprire. Si possono usare link assoluti o relativi (un es. di link assoluto è "http://www.flash5.it", mentre un esempio di link relativo è "nuovapagina.html").Per puntare ad un indirizzo di posta elettronica, basta inserire questa dicitura: "mailto:[email protected]" dove al posto di [email protected] va inserito l'indirizzo email desiderato, facendo attenzione a scrivere prima di esso la stringa "mailto:". Associando questa azione all'evento Release di un bottone, è possibile ricreare un tipico pulsante "email" o "contattaci":

Ed ecco il codice:

on (release) { getURL ("mailto:[email protected]");}

All'interno della casella Window è possibile selezionare una delle quattro opzioni disponibili oppure, se la nuova pagina deve aprirsi in un determinato frame html (intendo quindi la suddivisione in più parti di una pagina Web, nulla a che fare con i frame di Flash), digitare il nome del frame in cui deve aprirsi la pagina.

_blank permette di aprire la pagina in una nuova finestra del browser _self nello stesso frame html _parent nel frameset superiore _top all'interno della stessa finestra del browser

La casella Variables infine, permette di inviare variabili con il metodo scelto alla pagina indicata (questa opzione verrà spiegata in seguito).

Load Movie


Il lettore di Flash, normalmente, permette di visualizzare un solo filmato, ma utilizzando l'action loadMovieNum è possibile visualizzare più filmati esterni.

mailto:[email protected]

mailto:[email protected]

http://flash-mx.html.it/guide/zip/as-base/geturl.zip


http://flash-mx.html.it/guide/zip/as-base/loadmovie.zip


In questo esempio viene richiamato il file loadmovie1.swf e gli viene assegnato il livello 1. Il filmato principale ha valore di livello uguale a 0. Tutti i filmati caricati, assumono colore di sfondo, frequenza di fotogrammi e dimensioni di questo livello. Quando si carica un filmato esterno, associare un numero di livello sopra lo 0, in modo da evitare la sostituzione con il filmato di base a livello 0.Specificando invece di un livello, un Target, e quindi una clip specifica, il filmato viene caricato all'interno di essa assumendo le dimensioni di quest'ultima.

Caricare un filmato esterno può essere utile in diversi casi. Si pensi, ad esempio, di dare l'opportunità all'utente che visita il sito, di scegliere un brano musicale di sottofondo durante la navigazione. Ora, inserire i files musicali all'interno di un unico movie, comporterebbe un aumento delle dimensioni del file .swf esportato. La strada migliore è invece un'altra: creare tanti filmati quante sono le basi musicali a disposizione dell'utente. Dentro ognuno di questi filmati, inserire esclusivamente una base musicale. A questo punto, richiamando il filmato con la base musicale dal filmato principale, questo viene caricato solo alla richiesta di "cambio musica", eliminando quindi il problema delle dimensioni del file .swf.

unloadMovieNum

Una volta che il filmato caricato non è più necessario (nel caso dei brani musicali, quando l'utente scegli un altro brano oppure sceglie l'opzione "mute" per interrompere la riproduzione della musica), deve essere scaricato. Per farlo viene utilizzata l'action unloadMovieNum ();. E' necessario specificare il livello del filmato da scaricare (1 nel nostro primo caso) o il nome del Target nella quale era stato inserito.

Specifica dei target


Prima di proseguire il corso con le altre lezioni, è bene capire cosa sono i Target e come fare per richiamarli.

Target, tradotto letteralmente, significa obiettivo, quindi un (s)oggetto a cui verrà assegnata una determinata funzione.Ma quali sono i nostri obiettivi in Flash? Imparare ad usarlo? Si, certo, ma intendevo qualcosa di più inerente alla programmazione Flash. ;-)Possono essere specificati come Target soltanto i movieclip oppure i filmati esterni caricati tramite Load Movie (nonché il filmato principale).Il Target è necessario in alcune azioni che studieremo più avanti. Per esempio ridimensionare la lunghezza di un movieclip, oppure controllare la testina di lettura frame di un filmato esterno, o addirittura trascinare con il mouse un movieclip.

http://flash-mx.html.it/guide/view_lezione.asp?idguida=3&id=29


E' durante la scrittura delle azioni che dovremo specificare il nome del Target da controllare. Ma quale nome bisogna usare? Semplice, il nome che daremo all'istanza del movieclip dopo averlo inserito nello stage (per i filmati esterni spiegherò più avanti la procedura). Ecco come procedere:

1) selezionare il movieclip desiderato e trascinarlo nell'area di lavoro tenendo premuto il pulsante del mouse fino a trovare la posizione adatta alla clip:

2) rilasciare il pulsante del mouse, il movieclip appare nell'area di lavoro:

3) selezionare la finestra Istance e digitare un nome per l'istanza:

Quando si specifica un nome per l'istanza, sceglierlo possibilmente il più corto possibile e inerente (ovviamente) con il movieclip. In questo caso, ho chiamato l'istanza di logo Flash5.it, semplicemente logo.

Sarà questo nominativo che ci permetterà di controllare il movieclip nelle nostre azioni. Quindi, il nome dell'istanza, è particolarmente importante.

Bene, se siete arrivati fin qui tranquillamente... preparatevi al peggio.

Quando inserite un movieclip nel filmato, bisogna fare molta attenzione a dove viene collocato. Si, perché Flash ha una struttura degli oggetti simile a quella delle directory di un sistema operativo.Mi spiego...Come abbiamo appena fatto, l'istanza logo del movieclip logo Flash5.it è stata inserita nello stage principale del nostro filmato. Se avessimo inserito il movieclip dentro un'altro movieclip di nome pippo allora l'istanza logo si troverebbe nella clip pippo e non nello stage principale.

(in questo caso l'istanza logo è nello stage principale del movie)Per capire meglio la questione, ecco uno schema che mostra la struttura delle clip:

Filmato principale (livello 0) Clip logo Clip htmlFilmato1.swf (livello 1) Clip pippo

In questo caso, nel filmato principale si trova la clip logo che a sua volta contiene la clip html. Mentre nel filmato secondario "Filmato1" si trova la clip pippo.Sto spiegando tutto questo per il fatto che, quando viene specificato un Target, bisogna digitare, oltre al nome, anche il percorso di esso. Il percorso deve essere indicato inserendo un punto . tra ogni clip:

Richiamando la clip logo, dovremo inserire come Target: _root.logo (_root indica la radice principale, ovvero il livello base 0 dello stage principale, avrei potuto scrivere anche _level0.logo, sarebbe stata la stessa identica cosa).

Per richiamare la clip html dovremo scrivere: _root.logo.html perché è situata all'interno della clip logo dello stage principale.

Infine per richiamare la clip pippo dovremo scrivere: _level1.pippo.

Quando si richiamano clip da filmati esterni è necessario inserire la voce _leveln dove al posto di n va inserito il numero di livello del filmato contenente la clip (attenzione ad inserire anche il carattere underscore _ ).

Riassumendo... si può specificare come Target:

lo stage principale (_level0) un oggetto movieclip (_level0.logo) un filmato esterno (_leveln)

cosicché è possibile controllarne proprietà, eventi e azioni.

Se non siete sicuri di aver capito bene questa lezione, vi sconsiglio di proseguire. Per cui, provate di nuovo a leggerla più attentamente, è molto importante per affrontare con maggiore facilità tutto quello che manca, in riguardo alla programmazione Flash.

Gli eventi dei bottoni


Ognuno dei 3 tipi di clip (graphic, movieclip e bottone) si distingue dall'altra per alcune proprietà esclusive. Tra queste vi sono gli eventi dei bottoni.

Quando si vuole inserire un immagine o un disegno cliccabile, è necessario creare una nuova clip bottone. Infatti, solo questa clip ha la possibilità di gestire gli eventi del mouse che un normale utente, visitatore del sito, effettua. Il click del mouse per esempio è un evento, oppure il "tenere premuto" è un altro evento ecc... Ad ognuno di questi eventi può essere associata un'azione particolare.

Attenzione!E' sbagliato inserire azioni direttamente nei frame Up, Over e Down del bottone! Questi vengono utilizzati esclusivamente per la parte "grafica" del filmato, quindi solo per associare specifiche clip animate o meno agli eventi del bottone.

Gli eventi possibili per un bottone sono:

Press: gestisce il click del mouse ma senza rilascio (praticamente appena l'utente clicca con il mouse ma non rilascia il pulsante);

Release: gestisce il rilascio del pulsante del mouse;

Release Outside: gestisce il rilascio del mouse fuori dalla clip bottone (praticamente quando l'utente clicca con il mouse sulla clip, si sposta al di fuori di essa e poi rilascia il pulsante);

Roll Over: gestisce entrata sul bottone (quando l'utente si muove con il puntatore del mouse sul bottone);

Roll Out: gestisce l'uscita dal bottone (quando l'utente si muove all'esterno del bottone);

Drag Over: gestisce il trascinamento all'interno del bottone (quando l'utente, dopo aver cliccato e tenuto premuto, si sposta fuori dal bottone per poi ritornarci sopra);

Drag Out: gestisce il trascinamento all'esterno del bottone (quando l'utente, dopo aver cliccato e tenuto premuto, si sposta fuori dal bottone);

Key Press: gestisce la digitazione dei tasti indicati nella casella di testo.

Dopo aver trascinato un bottone nello stage del filmato, clicchiamo sull'icona per aprire il pannello delle ActionScript per il bottone. Come abbiamo già visto nelle lezioni precedenti, selezionando per esempio l'azione stop automaticamente viene aggiunto del codice:

on (release) { stop ();}

Come potete vedere, l'azione stop è stata incorporata all'interno dell'evento on (release) . Questo perché Release è considerato l'evento standard per i bottoni ma si può tranquillamente sostituire con uno degli altri eventi.Tutto quello scritto all'interno delle parentesi graffe che delimitano l'evento, viene eseguito al verificarsi di esso.


In questo caso quindi, se l'utente rilascia il pulsante del mouse dopo aver cliccato il bottone, viene "stoppato" il filmato. Ovviamente è possibile inserire più di un'azione nell'evento.La stessa azione poi, può essere effettuata anche su più eventi:

on (release, rollOver, keyPress "<End>") { stop ();}

In questo caso, il filmato interrompe la riproduzione se l'utente rilascia il pulsante (Release) oppure passa sopra il bottone con il puntatore (RollOver) oppure preme il tasto "fine" della tastiera (KeyPress).Per inserire un evento da tastiera, selezionare la voce Key Press e digitare il tasto interessato. Automaticamente, Flash inserisci la dicitura esatta per rintracciare l'evento.

In questo esempio sono riportati tutti i possibili eventi del mouse:

Aree sensibili


Nel corso delle lezioni, capiterà spesso di utilizzare alcuni simboli particolari come le aree sensibili.Un'area sensibile non è altro che una clip bottone contenente oggetti esclusivamente all'interno del frame HIT. In questo modo il bottone risulta invisibile ma cliccabile.

Essendo un bottone è possibile utilizzarne tutti gli eventi possibili. In questo modo è possibile rendere gli altri oggetti, sensibili agli eventi del mouse. Come? Semplice, basta inserire la clip area sensibile all'interno delle altre clip. Vi ricordo che, essendo invisibile perché non vi è alcun oggetto nel frame Up, non si vede ma è possibile utilizzarne gli eventi.Quindi, dopo aver inserito l'area nel movieclip pippo è possibile gestire anche l'evento Release per pippo (in realtà l'evento è dato dal bottone area sensibile). Così facendo colmiamo gli eventi possibili per i movieclip aggiungendo anche quelli possibili per le clip bottone.

Più avanti ci saranno lezioni dedicate ad utilizzi sempre più particolari dell'area sensibile, per adesso limitiamoci a capire come è stato strutturato questo filmato:

Il logo che ruota è un movieclip denominato logo, all'interno di esso vi è la clip graphic logo Flash5.it e, a sua volta, all'interno di essa la clip area_sensibile. In questo filmato, l'area sensibile ha il disegno del logo nel frame Over (di colore rosso) permettendo il cambio di colore all'evento onMouseOver.

Le variabili


Per chi è alle prime armi con la programmazione in generale, è necessario imparare alcune nozioni basilari. Un esempio ne sono le variabili.

Si può definire una variabile come un contenitore, al cui interno troviamo un valore:

I valori possono essere:

numerici (4, 55, 82, 204, 5930 ecc..) stringhe ("html", "ciao", "pluto", "essere o non essere" ecc..) risultato di espressioni (4+3, 345-15, in questi casi la variabile assume il risultato dell'espressione).

I valori stringa vengono identificati dai limitatori " " mentre i valori numerici e le espressioni non necessitano di limitatori.

Oltre alle variabili, esistono le costanti. Si differenziano, come dice il nome, dal fatto che le variabili possono assumere valori diversi a seconda delle situazioni che si pongono, le costanti invece, contengono sempre lo stesso valore.

Utilizzando il linguaggio di programmazione Flash, si incontrerà spesso la necessità di inserire variabili, per esempio quando si creerà un modulo per la raccolta dati. Tutti i campi presenti nel modulo sono variabili.

Le variabili: settaggio


Prima di continuare, è necessario imparare alcune basi della programmazione, altrimenti rischieremmo di andare incontri a spiacevoli incomprensioni. Il mio consiglio è quindi, di leggere attentamente le pagine che seguono. Tutto questo amplierà notevolmente il vostro bagaglio culturale... ve l'assicuro! ;-)

Variabili: consigli


http://flash-mx.html.it/guide/zip/as-inter/setvariable.zip


Abbiamo capito cosa sono le variabili, ora dovete sapere che ogni variabile ha un suo nome che la identifica. Possiamo associare un nome qualsiasi (tranne parole riservate al linguaggio) non c'è problema, il mio consiglio comunque, è quello di associare un nome il più vicino possibile alla funzione che la variabile svolge.Per esempio, volendo assegnare il nome ad una variabile che identifica la posizione sull'asse x di una clip, è possibile scegliere x o xpos. In questo modo sarà meglio leggibile quando si creeranno script complessi con molte variabili.

I valori possibili

Come già detto, una variabile è un contenitore di valori. Ma che tipo di valori è possibile inserire in una variabile? Ovviamente quando si parla di valori numerici si intende un numero, mentre per valori stringa si intende una parola, giusto? Per niente. Posso parlare di valori stringa anche quando si tratta di numeri; ecco alcuni esempi:

23, 1730, "sito", "sito2", "222"

I val. numerici sono colorati di rosso mentre quelli stringa di blu.

Flash però fa distinzione tra i due valori, solo al momento del loro utilizzo e a seconda dei casi. Infatti, durante un'operazione tra variabili (mettiamo una somma di variabili), basta che uno dei due valori sia una stringa, che il tutto viene convertito in questo valore.

Esempio

x = 7

Qui x è uguale a 7, giusto?Bene.. aggiungiamo questo valore:

x + "Flash"

Il risultato?Beh, dovreste già esserci arrivati... il risultato è:

x = "7Flash"

perché uno dei due operandi è una stringa (e Flash trasforma il tutto in stringa).

Settare (impostare) un valore ad una variabile

Per impostare un valore ad una variabile, è necessario usare l'azione setVariable.La sintassi per l'azione è la seguente:

Nella casella Variable è necessario inserire il nome della variabile da settare, mentre in Value il valore da assegnare. In questo caso è spuntata la casella Expression perché il valore da assegnare alla variabile, è il risultato di una espressione (una somma).

on (release) { totale = Number(num1)+Number(num2);}

In Flash è possibile associare una casella di testo ad una variabile, per poi utilizzare il valore inserito dall'utente negli script:

La casella VALORE1 è associata alla variabile num1, VALORE2 invece a num2 e TOTALE a totale.In questo esempio utilizzo per la prima volta in questo corso la funzione Number che trasforma il valore della variabile specificata tra parentesi in un valore numerico. Bisogna adottare questa strada, in quanto Flash associa alla casella di testo un valore stringa e ciò comporterebbe il concatenamento dei valori immessi (per es. inserendo 35+7, come risultato si avrebbe 357).

Operatori numerici e stringa


L'operatore di addizione visto nella lezione precedente, è uno dei tanti operatori che Flash mette a disposizione. Questi operatori vengono poi divisi per categorie. Cominciamo con la prima: numerici.

Operatori numerici

+ Addizione

- Sottrazione

*Moltiplicazione

/ Divisione

% Rimanenza

++ Incremento

-- Decremento

Lasciando da parte sottrazione, moltiplicazione e divisione, concentriamoci sugli ultimi 3 opeatori.


% (rimanenza)Tramite questo operatore è possibile conoscere la rimanenza di una divisione tra due operandi.L'operazione:

14 % 6

dà come risultato 2 (il 6, nel 14, ci sta 2 volte con il resto di 2).

++ (incremento)Questo operatore permette di incrementare di 1 la variabile se usato singolarmente. Se invece viene usato con un altro operando il risultato è la somma dell'operando incrementata di 1.Ponendo il caso che x sia uguale a 7, l'operazione:

x++

incrementa di 1 x e da come risultato x=8.A questo punto, l'operazione:

x++5

dà come risultato x=6.

La sintassi usata però non è possibile ricrearla in Flash se non scrivendo manualmente le azioni oppure utilizzando l'azione Evaluate:

indicando come Expression il codice x++.

- - (decremento)Operatore identico come sintassi a ++ ma con la solo differenza che la variabile viene decrementata di 1 (viene sottratto 1).

Operatori stringa

L'unico operatore stringa è +, denominato concatenamento (somma di parole... sta male, non trovate? ;-) ). Tramite questo, è possibile concatenare 2 stringhe per averne una unica come risultato:

"Flash5.it" + " Risorse per Flash"

In questo caso, il risultato è: "Flash5.it Risorse per Flash".Come già detto (non smetterò mai di ripeterlo) se vi è solo una variabile stringa, Flash automaticamente converte l'altra in stringa ed esegue il concatenamento.

Condizione If e gli operatori logici


Breve parentesi

Prima di continuare apro un breve parentesi sugli operatori di eguaglianza ed assegnazione.

L'operatore di assegnazione è il classico = (uguale). Tramite questo, è possibile assegnare un valore ad una variabile (come già visto).L'operatore di eguaglianza invece, è il ==, con cui è possibile verificare l'uguaglianza tra due variabili (se i loro valori sono identici o meno).

Detto questo, continuiamo con le lezioni...


Condizione If

L'istruzione if è detta condizione perché permette di controllare una condizione e di effettuare diverse azioni a seconda che la condizione si sia avverata o meno.Ecco un esempio pratico:

Scarica questo esempio

Provate prima a fare una verifica con i due valori già presenti, poi provate ad immettere due valori differenti.Come potete vedere, ho utilizzato l'operatore di eguaglianza e non di assegnazione, nel momento della verifica. Attenti a non sbagliarvi!! E' molto importante capire la differenza tra i due operatori.Ecco lo script per il bottone Verifica:

on (release) { if (n1==n2) { risp = "vera"; } else { risp = "falsa"; }}

Tradotto in italiano:(salto la parte on (release))

se n1 è eguale a n2 allora assegna a risp la stringa "vera" altrimenti assegna a risp la stringa "falsa".L'azione risp = "vera"; è compresa tra le parentesi quadre che identificano l'avverarsi della condizione, mentre risp = "falsa"; è compresa all'interno dell'istruzione else che identifica il non avverarsi della condizione (altrimenti).Immagino non ci sia bisogno di dire che n1, n2 e risp sono le tre caselle di testo.

Ecco un altro esempio:


In questo caso lo script cambia leggermente:

on (release) { if (Number(n1) > Number(n2)) { risp = "più alto"; } else { risp = "più basso"; }}

http://flash-mx.html.it/guide/zip/as-inter/if1.zip


Per stabilire se il primo numero è maggiore del secondo, ho utilizzato l'operatore > (maggiore).se n1 è maggiore di n2 allora assegna a risp la stringa "più alto" altrimenti assegna a risp la stringa "più basso".Questo esempio però non controlla l'eguaglianza tra le due variabili.Ho dovuto utilizzare la funzione Number() perché l'operatore > può essere utilizzato anche come confronto tra due stringhe (in base all'ordine alfabetico).

Operatori di confronto

L'operatore > fa parte di questa categoria:

Operatori di confronto

> Maggiore di

< Minore di

>=Maggiore o uguale a

<= Minore o uguale a

Tramite questi operatori è possibile confrontare due variabili e stabilire quali delle due è maggiore/minore (o uguale) all'altra.

Operatori logici

Gli operatori logici vengono utilizzati con l'istruzione if .Essi sono:

Operatori logici

&& AND

|| OR

! NOT

(piccola precisazione: il tasto per digitare le due "barre" dell'operatore OR è quello prima del tasto 1 nella tastiera, sulla destra)A cosa servono questi operatori? Ve lo spiego subito con un esempio...

|| (or)All'interno del nostro filmato vi è un modulo per l'invio di dati, non vi sembra "elegante" inserire un controllo sui campi? Cioè, dopo che l'utente ha cliccato sul bottone "invia", il filmato fa una verifica e, se tutti i campi sono stati compilati, il modulo viene inviato altrimenti viene visualizzato un messaggio che indica di compilare completamente il modulo.


Ecco lo script per il bottone Invia:

http://flash-mx.html.it/guide/zip/as-inter/if.zip

on (release) { if (String(nome) == "" || String(email) == "") { gotoAndStop ("errore"); } else { gotoAndStop ("inviato"); }}

Ed ecco la traduzione:se nome è uguale a "" (niente.. valore nullo, quindi non è stato digitato niente) oppure (|| OR) email è uguale a "" allora visualizza l'errore altrimenti invia il modulo.Tramite || la condizione if si avvera se nome oppure email sono nulli... quindi si avvera se almeno uno dei due operandi risulta vero.In questo esempio ho dovuto necessariamente utilizzare la funzione String() che permette di trasformare in stringa un valore numerico (purtroppo è necessario, altrimenti Flash non interpreta le "" come un "non inserimento").

&& (and)L'operatore && invece, implica che tutt'e due gli operandi siano veri altrimenti, non viene soddisfatta la condizione.Se nel caso precedente avessi inserito l'operatore && al posto di || il risultato sarebbe stato che il gotoAndStop ("errore"); sarebbe stato eseguito solo se il campo nome e il campo email fossero vuoti.

! (not)Il ! logico invece, viene utilizzato in coppia con gli altri operatori.Per esempio, utilizzando != in una condizione if , Flash la interpreta come un "non uguale" e cioè disuguale (da disuguaglianza).


Ecco l'azione per il bottone Invia:

on (release) { if (String(nome) != "flash") { gotoAndStop ("errore"); } else { gotoAndStop ("inviato"); }}

se nome non è uguale a "flash" allora visualizza l'errore altrimenti invia il modulo.

Le proprietà dei target: settaggio


Ogni movieclip possiede alcune proprietà, come la posizione, la dimensione e la rotazione che assumono valori precisi dopo la creazione. Questi valori però possono essere modificati durante l'esecuzione del filmato, tramite le actions.

Per mezzo dell'azione setProperty è possibile impostare una proprietà del movieclip indicato come Target. Nell'esempio qui sotto, è possibile impostare la posizione del movieclip logo:


http://flash-mx.html.it/guide/zip/as-inter/setproperty.zip


Come si sarà notato, la clip logo si posiziona nel punto x,y indicato nei valori inseriti. Lo spostamento è reso possibile impostando, tramite setProperty, le proprietà X Position e Y Position del Target logo.

La sintassi per questa action è la seguente:

setProperty ("nomeTarget", proprietà, "valore");

dove nomeTarget è il nome dell'istanza del movieclip su cui settare la proprietà proprietà con valore valore. Ecco l'azione per il bottone imposta dell'esempio sopra:

on (release) { setProperty ("logo", _x, x); setProperty ("logo", _y, y);}

Una volta cliccato su imposta il movieclip logo assume posizione x uguale al valore immesso nella casella Posizione asse x, e posizione y uguale al valore immesso nella casella Posizione asse y.

Le proprietà dei target: lista completa


Le proprietà possibili per un movieclip sono limitate. Infatti è possibile sceglierle esclusivamente da un menù a discesa proposto da Flash:

Nella lezione precedente ho proposto un esempio con le proprietà_x (X Position) e _y (Y Position).In questa lezione spiegherò il significato delle altre proprietà (senza però intervenire nuovamente sulla sintassi).

_alpha

Imposta la trasparenza della clip (in percentuale).


Bottone Applica

on (release) { setProperty ("logo", _alpha, trasp);}

dove trasp è il nome della casella di testo.


_focusrect

Se viene assegnato valore 1 a questa proprietà, durante la visualizzazione del movie, cliccando il tasto TAB della tastiera, verrà visualizzato un rettangolo giallo come contorno alle clip bottone inserite. Assegnare valore 0 per evitare tutto ciò. Anche questa proprietà può essere assegnata esclusivamente a tutto il filmato e non a singole clip.

Bottone Attiva Bottone Disattiva

on (release) { setProperty ("", _focusrect, 1);}

on (release) { setProperty ("", _focusrect, 0);}


_highquality

Imposta l'antialiasing per il filmato.Assegnando valore 2 (ottima), l'antialiasing è sempre attivo. Con 1 (alta qualità) viene attivato solo se il filmato non contiene animazioni e 0 invece, lo disattiva.Proprietà globale, non è possibile assegnarla ad una singola clip (solo all'intero filmato).

http://flash-mx.html.it/guide/zip/as-inter/alpha.zip

http://flash-mx.html.it/guide/zip/as-inter/focus.zip

_name

E' possibile settare un nuovo nome per la clip. La clip assumerà nuovo nome e i riferimenti ad essa con il vecchio nome, non avranno effetto.

_quality

Imposta il rendering per il filmato.I valori possibili sono (riporto fedelmente parte dell' "ActionScript Reference" Macromedia):

LOW Bassa qualità di rendering. I grafici non sono sottoposti ad antialiasing e le bitmap non vengono smussate.

MEDIUM Media qualità di rendering. I grafici sono sottoposti ad antialiasing con una griglia di 2x2, ma le bitmap non vengono smussate. Questo valore è adatto a filmati che non contengono testo.

HIGH Alta qualità di rendering. I grafici sono sottoposti ad antialiasing con una griglia di 4x4 e le bitmap vengono smussate se il filmato è statico. Questa è l'impostazione predefinita per la qualità di rendering usata da Flash.

BEST Ottima qualità di rendering. I grafici sono sottoposti ad antialiasing con una griglia di 4x4 e le bitmap vengono sempre smussate.

_xscale e _yscale

Per impostare la scalatura della clip (in percentuale).

Bottone Applica

on (release) { setProperty ("logo", _xscale, x); setProperty ("logo", _yscale, y);}


_rotation

Imposta il grado di rotazione della clip.

http://flash-mx.html.it/guide/zip/as-inter/scale.zip

Bottone Applica

on (release) { setProperty ("logo", _rotation, grado);}

dove grado è il nome della casella di testo.


_soundbuftime

Stabilisce il numero di secondi di streaming dell'audio da accumulare nel buffer prima della riproduzione. Il valore predefinito è 5 secondi.

_visible

Imposta la visibilità della clip. Settando un valore uguale a 1 la clip viene resa visibile (se non lo è già); con valore uguale a 0 invece, la clip viene resa invisibile.

Bottone Visibile Bottone Invisibile

on (release) { setProperty ("logo", _visible, 1);}

on (release) { setProperty ("logo", _visible, 1);}

dove trasp è il nome della casella di testo.


_height e _width

Per impostare le dimensioni della clip (in pixel).

http://flash-mx.html.it/guide/zip/as-inter/rotation.zip

http://flash-mx.html.it/guide/zip/as-inter/visibility.zip

Bottone Applica

on (release) { setProperty ("logo", _width, x); setProperty ("logo", _height, y);}

Le proprietà dei target: conoscerne il valore


A differenza di setProperty , questa funzione permette di conoscere il valore di una proprietà del Target specificato (invece che settarla).

La sintassi è la seguente:

getProperty ( target, property )

Questa funzione però, supporta alcune proprietà in più, rispetto a setProperty. La lista completa si trova nella categoria Properties del pannello delle ActionScript:

_alpha_currentframe, _totalframes e framesloaded_droptarget_focusrect_height e _width_name_quality_rotation_soundbuftime_target_url_visible_xscale e _yscale_x e _y_xmouse e _ymouse

Le proprietà hanno la particolarità di avere come primo carattere l'underscore "_".

Attenzione!Molte di queste proprietà possono essere usate anche singolarmente. Non è necessario che vengano inserite all'interno della funzione getProperty. Infatti, settando una variabile con valore _xmouse essa restituirà la posizione corrente sull'asse x del puntatore del mouse. Tutte le altre proprietà settate in questo modo, faranno riferimento al livello 0 del filmato (_url per esempio restituirà il percorso del filmato .swf).

Ecco alcune di queste proprietà in azione:



Le proprietà

_alphavalore %Percentuale di trasparenza della clip.

_totalframes, _framesloaded, _currentframevaloreRispettivamente: frames totali, frame caricato e frame corrente. In questo caso fanno riferimento ai frames di cui è composto il movieclip logo (in quanto è stato assegnato come Target) e non al filmato principale (per fare riferimento al filmato principale, inserire come Target "_level0").

_droptargetvaloreIndica il nome della clip su cui è stata sovrapposta la clip in movimento. Questa proprietà è stata sostituita dal metodo .hitTest per i movieclip (che spiegherò più avanti). E' ancora presente su Flash5 per una questione di compatibilità con Flash4.

_focusrect1 | 0Indica se i rettangoli gialli, identificativi dello stato attivo dei bottoni, devono essere visibili oppure no.

_width e _heightvaloreLarghezza e altezza in pixel, della clip.

_namevaloreNome della clip.

_qualityLOW | MEDIUM | HIGH | BESTIndica il livello di rendering del filmato.

_rotationvalore °Grado di rotazione della clip.

_soundbuftimevaloreStabilisce il numero di secondi di streaming dell'audio da accumulare nel buffer di memoria prima della riproduzione. Il valore predefinito è 5 secondi.

http://flash-mx.html.it/guide/zip/as-inter/getproperty.zip

_targetvaloreNome del target.

_urlvalorePercorso del file .swf contenente la clip.

_visible1 | 0Indica se la clip è visibile o meno. Il valore 1 indica che la clip è visibile, mentre il valore 0 indica che è invisibile.

_xscale e _yscale valorePercentuale di scalatura della clip specificata come Target.

_x e _y valorePosizione sull'asse x e y della clip specificata come Target.

_xmouse e _ymousevalorePosizione sull'asse x e y corrente del puntatore del mouse.

Duplicare i MovieClip


Spesso può capitare di creare effetti dinamici che necessitano dell'inserimento di più istanze di una clip; questo renderebbe il filmato troppo complicato da gestire. Per evitare ciò è stata introdotta in Flash, l'azione duplicateMovieclip che, ogni qualvolta viene utilizzata, crea un duplicato della clip specificata come Target. Ecco un esempio molto semplice:


Al rilascio del bottone Duplica viene eseguita l'azione duplicateMovieClip che genera un duplicato della clip logo ad ogni rilascio del pulsante del mouse.

La sintassi per l'azione è:

duplicateMovieClip(nomeTarget. newName, depth);

In nomeTarget bisogna specificare il nome del movieclip da duplicare, in newName il nuovo nome da assegnare e in depth il livello di sovrapposizione del duplicato.Il nuovo duplicato del movieclip inizia la riproduzione dal frame numero 1 indifferentemente dal movieclip originale. Quindi, le animazioni sono distinte e indipendenti. In più, l'eliminazione del movieclip originale provoca automaticamente, l'eliminazione di tutti i movieclip duplicati.E fin qui tutto semplice. I problemi nascono quando si deve utilizzare questa azione più di una volta. Siccome per ogni duplicato è necessario specificare un nuovo nome, come fare per evitare di scrivere tot volte la stessa azione (mettiamo che il movieclip debba essere duplicato 20 volte, è lunga scrivere l'azione per 20 volte... non trovate?)?Bisogna utilizzare un piccolo stratagemma che si avvicina moltissimo ad un oggetto usato nella programmazione in generale: l'array. L'array viene spiegato nella sezione professionale di questo corso. In questa lezione, mi limiterò a mostrarvi una simulazione di array.Senza scendere in spiegazioni lunghe, vi faccio subito un esempio.


http://flash-mx.html.it/guide/zip/as-inter/duplicate.zip

Poniamo il caso che la duplicazione di un movieclip sia resa possibile da un bottone proprio come nel filmato che ho creato io. In quel caso, il numero dei duplicati sarebbe variabile, perché dipenderebbe dall'utente che preme il pulsante. L'unico modo è quello di creare i nomi dei nuovi duplicati dinamicamente ad ogni clic sul bottone. Per fare questo, ci serviamo di una variabile, che chiameremo semplicemente x.Nel primo frame, poniamo x=1 ed assegniamo l'azione stop.Come azione del bottone inseriamo:

on (release) { x++; duplicateMovieClip("logo", "logo"+x, x);}

Al clic sul bottone la variabile x viene incrementata di 1, poi il movieclip logo viene duplicato. Il nome del movieclip viene creato dinamicamente in questo modo:

"logo"+x

Questo permette di avere un nome differente ad ogni clic sul bottone.Infatti, la prima volta che viene cliccato il bottone, x diventa 2, e il nome del nuovo duplicato diventa logo2. La seconda volta, x diventa 3, e il nome del duplicato logo3 e così via...In questo modo, il movieclip verrà duplicato tante volte quante "cliccate" effettua l'utente sul bottone Duplica senza avere limitazioni nel numero e senza scrivere tante azioni. Con lo stesso metodo viene valorizzato anche il parametro depth, infatti viene reso uguale a x (che ad ogni clic ha un valore diverso).

Una volta che i duplicati non servono più, è possibile eliminarli tramite l'azione removeMovieClip. In questa azione è necessario specificare il nome del duplicato da eliminare.

Ecco cosa intendo quando parlo di "generare valori dinamicamente". E' possibile quindi gestire, con poche righe di codice, situazioni molto complesse che impegnerebbero molto tempo nella scrittura del codice.

Comandi per il proiettore Flash


L'azione FSCommand permette di inviare messaggi al programma host che ospita il filmato Flash. Il programma host può essere il proiettore Flash oppure il browser web.In questa lezione, verrà analizzata l'azione associata al proiettore Flash, mentre nella successiva, verrà analizzata l'interazione di Flash con il linguaggio JavaScript.

FSCommand e il proiettore Flash

Il proiettore Flash non è nient'altro che il programma (player) che permette di visualizzare i filmati Flash. Per aprirlo basta "doppio-cliccare" su un qualsiasi file .swf. Il filmato Flash scelto verrà aperto dal Flash Player e verrà riprodotto.Il proiettore viene solitamente usato quando si creano presentazioni multimediali "non Web", cioè presentazioni Flash che verranno visualizzate su computer locali tramite supporto fisico (come un CD per esempio).L'istruzione FSCommand per il proiettore di Flash, come sintassi risulta molto semplice:


Infatti, basta selezionare una voce dal menù Commands for standalone player per fare in modo che il comando venga eseguito.

Queste le possibili proprietà:

Fullscreenimposta il filmato a tutto schermo (true per attivarlo, false per disattivarlo).

AllowscaleSe true imposta il filmato nella modalità Mostra tutto. Se false imposta il filmato al 100% delle sue dimensioni senza scalature.

ShowmenuSe true attiva il menù completo al clic del pulsante destro del mouse sul filmato. Se false disattiva la visualizzazione.

ExecEsegue un'applicazione all'interno del proiettore (specificare in arguments l'applicazione da eseguire).

QuitChiude il proiettore.

Interazione Flash-JavaScript


Come già detto, l'azione FS Command permette di inviare messaggi al programma host che ospita il filmato Flash. Inviando informazioni al browser web è necessario creare degli script capaci di "catturare" questi messaggi ed interpretarli.

In questa lezione farò un semplice esempio su come riuscire ad aprire una nuova finestra del browser da un bottone Flash. Non spiegherò però il funzionamento del JavaScript in quanto non è attinente a questo corso. Se volete però saperne di più sull'interazione Flash-JavaScript vi consiglio di consultare le lezioni dedicate.

1a Fase - Configurazione dei tag <OBJECT> e <EMBED>

Per prima cosa bisogna preparare il codice HTML della pagina web che ospita il filmato Flash. Bisogna apportare qualche piccola modica nei tag <OBJECT> e <EMBED> che assegnano i parametri al filmato Flash.

Prima di tutto dobbiamo rendere il filmato "catturabile" dagli script. Per fare questo assegniamo un nome al filmato Flash; con questo nome poi, gli script potranno identificare le informazioni che invieremo al browser.Aggiungiamo ai due tag <OBJECT> e <EMBED> le voci ID e NAME:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=5,0,0,0" WIDTH="100" HEIGHT="100" ID="ApriFin"><PARAM NAME="MOVIE" VALUE="prova.swf"><PARAM NAME="PLAY" VALUE="TRUE"><PARAM NAME="LOOP" VALUE="FALSE"><PARAM NAME="QUALITY" VALUE="HIGH">

http://flash-mx.html.it/guide/lista_lezioni.asp?idguida=2

<PARAM NAME="SCALE" VALUE="showall">

<EMBED NAME="ApriFin" swLiveConnect="true"SRC="prova.swf" SCALE="showall" PLAY="true" LOOP="false" QUALITY="high" WIDTH="100" HEIGHT="100" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED></OBJECT>

(il codice mostrato è solo di esempio per comprendere al meglio il posizionamento dei parametri ID e NAME)In questo esempio sono stati assegnati ai parametri ID e NAME, il valore ApriFin. E' con questo valore che gli script saranno in grado di intercettare le informazioni ed interpretarle.Il parametro swLiveConnect viene inserito esclusivamente nel tag <EMBED> e permette di caricare Java alla visualizzazione della pagina. In questo modo il browser non deve rallentare l'esecuzione degli script caricando Java al momento dell'apertura finestra.

2a Fase - Assegnazione dell'action nel bottone

A questo punto, inseriamo nel filmato Flash, la clip bottone che permetterà, al clic, di aprire una nuova finestra del browser.Assegniamo questa action:

on (release) { fscommand ("nuova-finestra", "http://www.flash5.it");}

dove nuova-finestra è il nome che abbiamo assegnato al comando (possiamo assegnare qualsiasi nome, basta che il valore negli script sia lo stesso), e http://www.flash5.it è l'argomento (la nuova pagina web da aprire).

3a Fase - Creazione degli script

Possiamo quindi procedere alla creazione degli script che permetteranno di aprire una nuova finestra del browser.

Ecco il codice JavaScript che permette di eseguire questa operazione:

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

La funzione Java DoFSCommand richiama il filmato Flash ApriFin e recupera le variabili command e args (che nel nostro caso hanno valore "nuova-finestra" e "http://www.flash5.it").

Attenzione!Se avete intenzione di modificare i valori dei parametri ID e NAME abbiate cura di sostituire con lo stesso valore, il nome della funzione DoFSCommand.Facciamo un esempio: se al posto di ApriFin avessimo scelto di assegnare il nome Pippo, la funzione JavaScript sarebbe questa: Pippo_DoFSCommand(..).

Come si può notare dalla funzione, essa può accettare più scelte inviate da Flash ed eseguire operazioni diverse. Infatti, in questo esempio, viene eseguita l'operazione di apertura finestra se il command è uguale a nuova-finestra. Quindi possiamo inserire più scelte nella stessa funzione ed assegnare ad ognuna di esse un'operazione.

Arrivati a questo punto, con Netscape possiamo già vedere i risultati della lezione, mentre con Explorer

http://www.flash5.it/

dobbiamo inserire un altro pezzo di codice:

<SCRIPT LANGUAGE="VBScript"></SCRIPT>

essendo il VBScript il linguaggio di default.Questa breve funzione richiama il JavaScript creato precedentemente e gli invia le variabili ricevute dal filmato Flash.

Questi due script vanno inseriti all'interno dei tag <HEAD> e </HEAD>.

Approfondimento

Purtroppo il comando FS Command non è compatibile con tutte le versioni dei browser, così come richiamare JavaScript direttamente dall'azione Get Url. Ecco una tabella che riassume la compatibilità o meno dei diversi browser:

Script per il rilevamento plug-in

Load Movie "JavaScript:" nel GetURL

FSCommand, comunicazione tra Flash e

JavaScript

Netscape 3.0 e superiori

Mac 68k No No No No

Mac PowerPC Si Si Si Si

Windows 3.1 Si No No No

Windows 95/98/NT/2000

Si Si Si Si

Internet Explorer 3.0 e superiori

Versione 3Macintosh

No No Si No

Versione 4.5Macintosh

No Si No No

Versione 5.0Macintosh

Si Si Si No

Versione 3Windows 3.1

No No No No

Versione 3 Si Si No Si

Windows 95/98/NT

Versione 4Windows 95/98/NT

Si Si Si Si

Versione 5Windows

95/98/NT/2000

Si Si Si Si

Versione 6Windows

95/98/NT/2000

Si Si Si Si

Versione 5Windows

95/98/NT/2000

Si Si Si Si

Scrolling di testo


Chi crea siti web in HTML non si sarà mai posto il problema dello scorrimento del testo in quanto questa parte viene lasciata in gestione al browser. Invece in Flash bisogna "arrangiarsi" e trovare un modo opportuno per risolvere questo inconveniente.

Flash propone un modo molto funzionale nella tecnica, un po' meno nell'estetica.

Vi sono due funzioni Flash che permettono la gestione dello scorrimento del testo, queste funzioni sono .scroll e .maxscroll. Associate ad una casella di testo permettono di gestirne la visualizzazione in righe:

testo.scroll Restituisce il numero della riga superiore visibile nella casella di testo. Questo valore può essere modificato dinamicamente.

testo.maxscroll Restituisce il limite massimo che risulta nello scroll di testo. Questo valore è costante e non può essere modificato.

Per capire meglio le due proprietà facciamo un semplice esempio.Se la tabella qui sotto fosse una casella di testo chiamata testo:

Questo è un esempio percapire al meglio le funzioni.scroll e .maxscroll di Flash.Con queste funzioni è pos-

la proprietà testo.scroll restituirebbe valore 1 (in quanto è visualizzata in alto la prima riga del testo) mentre la proprietà testo.maxscroll restituirebbe valore 5 (il numero della riga che rappresenta il limite del campo di testo). Se aumentassimo di 1 il valore di testo .scroll (quindi risulterebbe 2) avremmo:

capire al meglio le funzioni.scroll e .maxscroll di Flash.Con queste funzioni è pos-sibile impostare lo... ecc...

quindi la seconda riga diventa il limite superiore e .maxscroll assume sempre valore uguale a 5.Avendo questi due valori risulta semplice gestirne lo scorrimento. Impostando a +1 la proprietà .scroll del campo di testo, automaticamente scorrerà verso il basso, mentre a -1 per scorrimenti verso l'alto.


Creare una casella di testo con scorrimentoSpiegherò passo per passo come creare una casella di testo scrollabile tramite le proprietà .scroll e .maxscroll.Innanzitutto inserire in un nuovo livello del filmato, una casella di testo ed assegnargli un nome... mettiamo testo per semplicità. Impostare già le dimensioni che deve avere utilizzando il cursore per la dimensione del testo:

Impostiamo le proprietà per la nuova casella di testo appena creata:

Necessario è Multiline altrimenti la casella di testo ha dimensione di una sola riga. Attiviamo anche la voce Selectable perché potrebbe risultare utile da parte dell'utente, selezionare il testo per copiarlo.Come già detto, questo metodo per lo scrolling, è molto funzionale ma perde in estetica. Questo perché la casella di testo testo deve assumere il valore (e cioè il testo... scusate il gioco di parole) tramite azioni. In questo modo purtroppo la formattazione del testo deve essere effettuata tramite action. E' necessario agire così, perché se il testo viene inserito al momento della creazione della casella, essa assume altezza a seconda della larghezza del campo e non può essere modificata (quindi non potremmo scegliere la dimensione voluta). Infatti l'altezza della casella si adatta in base alla larghezza impostata (solo se c'è del testo all'interno).

Per la formattazione del testo, ecco come fare:

Codice da digitare

Significato

\r Ritorno a capo

\t Tabulazione

\" Virgolette "

\' Apostrofo '

\\ Barra \

Detto ciò, inserire nel keyframe della casella l'action:

testo = "bla bla bla";

dove, ovviamente, al posto di "bla bla bla" andrà inserito il testo scelto.A questo punto, inseriamo in un nuovo livello le due clip bottone che rappresentano il "su" e il "giù" per il testo.Per scrollare in basso e in alto purtroppo non basta aumentare o diminuire di 1 (1 riga) la proprietà .scroll, bisogna anche inserire dei controlli che permettano di "fermare" lo scrolling una volta arrivati all'ultima riga, per lo scrolling verso il basso, e alla prima riga, per lo scrolling verso l'alto. Per quanto riguarda la prima riga, non c'è problema, il valore della prima riga sarà sempre uguale a 1, mentre il valore dell'ultima riga possiamo

ricavarlo da .maxscroll.Ecco lo script per il bottone "su":

on (release, keyPress "") { scr = testo.scroll; if (scr>1) { testo.scroll = scr-1; } scroll = testo.scroll; maxscroll = testo.maxscroll;}

Quindi, quando l'utente rilascia il bottone, la variabile scr assume il valore della prima riga visualizzata in quel momento, poi viene eseguito il controllo: se scr è maggiore di 1 (non è quindi la prima riga) allora viene diminuito di 1 il valore di testo.scroll in modo che la casella scrolli di una riga verso l'alto, altrimenti se scr è uguale a 1 (siamo alla prima riga), quindi non è maggiore di 1, non succede niente.

Ecco lo script per il bottone "giù":

on (release, keyPress "") { scr = testo.scroll; if (scr<TESTO.maxscroll) { testo.scroll = scr+1; } scroll = testo.scroll; maxscroll = testo.maxscroll;}

Al rilascio del bottone, scr assume il valore della prima riga visualizzata in quel momento, poi viene fatto il controllo: se scr è minore di testo.maxscroll (quindi non siamo all'ultima riga) allora aumenta di uno lo scroll, altrimenti se scr è uguale a testo.maxscroll non succede niente.

Ecco come risulta l'esempio appena creato:

Per capire al meglio la procedura, ho inserito anche i valori di testo.scroll e testo.maxscroll.

Stampare da Flash


Vi siete mai posti il problema di stampare una "pagina" di Flash?Beh, non so se lo sapete, ma esistono due azioni proprio per questa funzione.Le due azioni sono: print e printAsBitmap.Queste istruzioni, si differenziano tra loro solo per il fatto che la prima, stampa in qualità normale (non tenendo conto di eventuali sfumature e trasparenze), mentre la seconda stampa a qualità massima in formato bitmap.

La sintassi per le azioni è:

print (target, ["bmovie", "bmax", "bframe"])

(applicabile in modo identico a printAsBitmap)dove target indica il nome dell'istanza della clip da stampare. Se questo valore viene omesso, Flash stampa tutti

i fotogrammi stampabili. Per stampare determinati fotogrammi, inserire l'etichetta #P nei fotogrammi desiderati. In questo modo, la stampa verrà fatta solo su di essi.Gli altri argomenti ["bmovie", "bmax", "bframe"] (tra i 3 è possibile sceglierne uno alla volta), delimitano l'area di stampa in base ai fotogrammi stampabili.

bmovie Indica il riquadro di delimitazione di un fotogramma specifico del filmato come area di stampa per tutti i fotogrammi stampabili nel filmato. Associare un'etichetta #b (nell'ambiente di creazione) per indicare il fotogramma il cui riquadro di delimitazione deve essere usato come area di stampa.

bmax Indica come area di stampa un riquadro di delimitazione composito formato da tutti i fotogrammi stampabili. Specificare l'argomento bmax quando i fotogrammi stampabili nel filmato sono di dimensioni diverse.

bframe Indica che il riquadro di delimitazione di ogni fotogramma stampabile deve essere usato come area di stampa per quel fotogramma. Ciò modifica l'area di stampa per ogni fotogramma e agisce sulla scala degli oggetti per adattarli all'area di stampa. L'uso di bframe consente, nel caso di oggetti di diverse dimensioni in ogni fotogramma, di riempire la pagina stampata con l'oggetto.

(tratto da "Guida di riferimento di ActionScript", Macromedia)

L'oggetto MovieClip

Primi metodi


Gli oggetti

Flash dispone di oggetti predefiniti da poter utilizzare nei nostri filmati. Alla maggior parte di essi, può essere assegnato un metodo che, se richiamato, permette di conoscere il valore (o eseguire un'azione) dell'oggetto stesso.

In Flash appartengono alla classe degli oggetti:

ArrayBooleanColorDateKeyMathMovieClipMouse

NumberObjectSelectionAudioStringXMLXMLSocket

La maggior parte di questi oggetti verrà descritta all'interno del corso.Nelle prossime lezioni, verrà analizzato l'oggetto movieClip.

L'oggetto movieClip

Come sapete, un movieclip è un filmato interno indipendente dal filmato principale, giusto? Ma, vi siete mai chiesti se è possibile controllare un movieclip allo stesso modo del filmato principale? Per es. avere la possibilità di assegnare le azioni play e stop solo ad esso?Non è difficile, basta indicare il Target (in questo caso, il movieclip) ed applicare il metodo desiderato.Ecco la lista dei metodi applicabili all'oggetto movieClip:

attachMovieduplicateMovieClipgetBoundsgetBytesLoadedgetBytesTotalgetURL

loadVariableslocalToGlobalnextFrameplayprevFrameremoveMovieClipstartDrag


globalToLocalgotoAndPlaygotoAndStophitTestloadMovie

stopstopDragswapDepthsunloadMovie

movieClip: Play e Stop

Partiamo subito con i due metodi più semplici. Abbiamo già visto nelle prime lezioni, come fare a riprodurre/arrestare il filmato principale. Ora invece cercheremo di riprodurre/arrestare un movieclip.

Poniamo il caso di avere un movieclip con l'animazione del logo Flash5.it che ruota da sinistra a destra dello stage. Vogliamo che, tramite 2 bottoni, il logo interrompa la sua riproduzione oppure la riprenda. Per prima cosa creiamo i due bottoni e il movieclip con l'animazione. Inserire i due bottoni in un unico livello dello stage e in uno nuovo il movieclip. Assegnare quindi, il nome all'istanza del movieclip (mettiamo logo per es.).

Selezionare il primo dei due bottoni (mettiamo "play" per es.) ed aprire il pannello delle actions se non è già aperto. A questo punto cliccare sul +, selezionare la voce Objects e poi movieClip. Dal menù proposto scegliere la voce "Play". Oltre all'actions scelta apparirà anche l'evento on(release) automaticamente (come già detto, ai bottoni possono essere associate actions solo su eventi). Sotto nelle proprietà dell'actions dovrebbe apparire questa immagine:

La voce ".play()" è evidenziata in rosso perché contiene un errore. Quale? Beh, abbiamo specificato l'actions per il movieclip ma non il movieclip alla quale applicarla! Quindi, clicchiamo con il mouse sulla casella Expression ed inseriamo il nome del Target alla quale assegnare l'azione. Siccome il movieclip risiede nello stage principale, basterà inserire il nome del Target senza specificare altro (quindi possiamo anche omettere la voce _level0 o _root):

E' possibile indicare il Target scrivendo manualmente il percorso oppure utilizzando la finestra Target Path

aperta tramite l'iconcina in basso a destra del pannello actions:

All'interno di essa, vengono elencati tutti i movieclip inseriti all'interno del filmato. L'opzione Notation è stata inserita solo per compatibilità con Flash4 e vi consiglio di mantenerla sulla voce Dots . Con Mode invece, si indica un percorso relativo o assoluto per il Target. Anche qui, il mio consiglio è quello di inserire sempre percorsi Absolute per meglio adeguarsi al codice scritto. E comunque, è sconsigliato l'uso di questa finestra (molto meglio scrivere manualmente).

La sintassi per questo script quindi è

nomeTarget.play()

ed ovviamente, .play() è uno dei tanti metodi associabili ad un movieclip. In questo caso:

logo.play()

Flash associa l'azione play al movieclip logo e non al filmato principale.Stessa cosa dovremo fare con il bottone "stop". Questa volta però, bisognerà inserire il metodo .stop() specificando sempre lo stesso Target.Ecco le azioni per i due bottoni:

Bottone Stop

on (release) { logo.stop();}

Bottone Play

on (release) { logo.play();}

Ed ecco il risultato finale:

Metodi: goto, getURL e loadMovie


movieClip: gotoAndPlay e gotoAndStop

Come già detto, play e stop non sono gli unici metodi associabili ai movieclip. Vi sono molte altre azioni/funzioni che spiegherò in queste lezioni. Come prima cosa, analizziamo i metodi .gotoAndPlay e .gotoAndStop.


Come per lo stage principale, queste due azioni permettono d'indirizzare il movieclip ad un frame specifico di esso (e non del filmato principale).

In questo esempio, ad ogni bottone è stata assegnata l'azione:

on (release) { logo.gotoAndStop(n);}

dove n indica il numero del frame in cui indirizzare il movieclip logo:


Per questi 2 metodi non è possibile impostare ulteriori proprietà (come il nome della scena per es.). Stessa cosa per i metodi:

nextFrame e previousFrame

che spostano di un frame in avanti e indietro, la testina di lettura.

movieClip: getURL

Questa azione è identica al getURL visto nelle precedenti lezioni (vai alla lezione).

movieClip: loadMovie e unloadMovie

L'azione .loadMovie ha la stessa funzione dell'azione loadMovie studiata nelle prime lezioni. Utilizzando .loadMovie il filmato esterno viene richiamato all'interno del movieclip indicato come target assumendone le dimensioni (stessa cosa si ha con loadMovie specificando non un livello ma un Target).Per scaricare poi il filmato è necessario utilizzare l'azione .unloadMovie.

Ecco la sintassi per i due metodi:

target.loadMovie( url, metodo )

target.unloadMovie()

url specifica il percorso del filmato da caricare ("swf/filmato.swf" per es.), mentre metodo specifica quale metodo utilizzare per inviare le informazioni al nuovo filmato (GET o POST). Quest'ultimo parametro può essere omesso, non è obbligatorio.

Per il metodo .unloadMovie() non ci sono parametri da settare, basta semplicemente specificare il movieclip "target".

Metodi: swapDepths e loadMovie


MovieClip: swapDepths

Il metodo swapDepths() permette di cambiare il livello di sovrapposizione di una clip rispetto alle altre.La sintassi è la seguente:


http://flash-mx.html.it/guide/zip/as-inter/movieclip1.zip


.swapDepths(profondità);

.swapDepths(target);

Con la prima azione, è possibile impostare direttamente il numero del livello di profondità, mentre con la seconda la clip specificata assume profondità della clip specificata come target.


MovieClip: loadMovie e unloadMovie

L'azione .loadMovie ha la stessa funzione dell'azione loadMovie studiata nelle prime lezioni. Utilizzando .loadMovie il filmato esterno viene richiamato all'interno del movieclip indicato prima del punto (stessa cosa si ha con loadMovie specificando non un livello ma un Target) assumendone le dimensioni e le proprietà.Per scaricare poi il filmato è necessario utilizzare l'azione .unloadMovie.

Renderlo trascinabile


Durante la creazione di siti in Flash, può risultare utile l'opzione "trascinamento movieclip" che permette di rendere sensibile al movimento del mouse il movieclip specificato. Un esempio può essere il mousetrailer, l'effetto visto in molti siti, in cui l'utente è intrattenuto da un'animazione condizionata dal movimento del puntatore (delle stelle che seguono il movimento del mouse per esempio).

Tutto questo è reso possibile dal metodo .startDrag.Ecco la sintassi:

.startDrag( lockCenter, left, top, right, bottom )

ovviamente, prima del punto, è necessario inserire il nome del movieclip da rendere trascinabile.

LockCenter: è necessario inserire true o false. Indica se il movieclip trascinato deve essere centrato rispetto al puntatore del mouse.

Left, Top, Right e Bottom: indicano se il movieclip trascinato deve limitare il trascinamento all'interno di un rettangolo delle dimensioni indicate in questi quattro valori (sinistra, alto, destra e basso).

Per meglio capire il parametro lockCenter ecco due esempi di trascinamento, uno con lockCenter true mentre l'altro false:

lockCenter true lockCenter false

http://flash-mx.html.it/guide/zip/as-inter/swap.zip


logo.startDrag( true ) logo.startDrag( false )

Come potete vedere, i parametri left, top, right e bottom possono tranquillamente essere cancellati se non utilizzati. Il nome del movieclip, come sempre, è logo e l'azione .startDrag è stata inserita nel primo keyframe del movie.

Ecco invece un esempio di trascinamento delimitato:


In questo caso, il rettangolo è disegnato (i valori left, top, right e bottom sono solo indicativi, non generano un rettangolo visibile). Per capire i valori da inserire all'interno dei 4 parametri (per fare in modo che il trascinamento combaci perfettamente), è necessario, tramite la finestra Info, leggere i valori x e y di posizionamento del rettangolo. Nel mio caso il rettangolo disegnato ha come valori: 20, 30, 153 e 178 (rispettivamente come i 4 valori). Siccome il movieclip logo misura di lunghezza (diametro) 49,6 (che arrotonderemo a 50), dovremo aggiungere circa 25 (il raggio) ai valori left e top, e sottrarre 25 ai valori right e bottom. Questo per evitare che il movieclip trascinato, esca per metà dal rettangolo disegnato (infatti, siccome è centrato rispetto al puntatore, avremo circa 25 punti in più di distacco).

Verificarne la collisione


Con il metodo .hitTest è possibile aggiungere un tocco di interattività in più nel nostro filmato. Tramite questa istruzione, è possibile sapere se un movieclip è sovrapposto ad un altro.Di per sé sarebbe inutile, ma in certi casi può essere veramente necessario... come in questo:

http://flash-mx.html.it/guide/zip/as-inter/mc_drag.zip



La sintassi per l'istruzione è:

nomeTarget.hitTest(x, y, shapeFlag);

nomeTarget.hitTest(target);

I due esempi si differenziano tra loro, per il fatto che la prima permette di conoscere se il movieclip indicato come Target è in collisione con un punto preciso dello stage (indicato con x e y), mentre la seconda, permette di conoscere se il movieclip target è in collisione con il movieclip nomeTarget . Al posto del parametro shapeFlag è necessario inserire true | false. Con true viene rilevata la collisione considerando solo l'area dello stage che il movieclip occupa, mentre con false viene considerato l'oggetto movieclip nel suo insieme (come se fosse un quadrato).

Provate a spostare l'omino all'interno del cerchio... :-)Una volta rilasciato il movieclip uomo, dopo averlo trascinato, c'è un controllo (utilizzando .hitTest ) con cui è possibile scegliere se "inserire" all'interno del cerchio il movieclip oppure no...Ecco come fare...

Per prima cosa creiamo il movieclip uomo e disegniamo l'omino del logo Flash5.it. Lo stesso "omino" lo utilizzeremo per creare un'area sensibile.

Spostare il bottone area_sensibile fino a farlo combaciare perfettamente con il disegno dell'omino:

http://flash-mx.html.it/guide/zip/as-inter/mc_hittest.zip

L'area sensibile è necessaria per riuscire a rendere trascinabile la clip uomo. Infatti, il trascinamento deve attivarsi quando l'utente clicca con il mouse sulla clip uomo e disattivarsi quando rilascia il pulsante.Per rendere trascinabile la clip uomo inseriamo come action dell'area sensibile:

on (press) { _root.uomo.startDrag( true );}

on (release) { _root.uomo.stopDrag();}

In questo modo, la clip uomo è trascinabile dopo aver premuto il pulsante del mouse fino al suo rilascio.Creiamo anche il movieclip cerchio, disegniamo nel primo frame il cerchio ed assegniamo un nome all'istanza dopo averlo trascinato nello stage. Sempre nello stesso frame, inseriamo l'azione stop(). Dal secondo frame in poi, possiamo creare un'animazione, che verrà eseguita nel momento in cui l'utente trascina correttamente l'omino all'interno del cerchio. Nel mio esempio però non vi è alcuna animazione, solo un passaggio "statico" dal cerchio vuoto al cerchio "pieno" (ed ho inserito anche il bottone Sgancia). Praticamente, quando l'utente rilascia l'omino all'interno del cerchio, faremo in modo che Flash vada a leggere dal 2° frame in poi del movieclip cerchio.Visto che siamo qui... gestiamo anche le azioni del bottone Sgancia... Quando l'utente clicca su questo bottone, il movieclip uomo deve riapparire all'esterno del cerchio (perché viene reso invisibile una volta che è stato trascinato all'interno; vedremo poi come...). Ecco come:

on (release) { setProperty ("_root.uomo", _visible, "1"); setProperty ("_root.uomo", _x, "205"); setProperty ("_root.uomo", _y, "65"); prevFrame ();}

Prima viene reso di nuovo visibile, poi viene spostato in un punto preciso del filmato, ed infine viene rimandato il movieclip cerchio al primo frame (visto che ce ne sono solo 2, ho inserito direttamente prevFrame).

A questo punto, nelle azioni del bottone area sensibile, nell'evento on(release), aggiungiamo il controllo sul trascinamento:

if (_root.uomo.hitTest( _root.cerchio )) { setProperty ("_root.uomo", _visible, "0"); _root.cerchio.gotoAndStop(2);}

Per avere come risultato finale:

on (press) { _root.uomo.startDrag( true );}

on (release) { if (_root.uomo.hitTest( _root.cerchio )) { setProperty ("_root.uomo", _visible, "0"); _root.cerchio.gotoAndStop(2); }

_root.uomo.stopDrag( );}

Quindi, quando l'utente rilascia il pulsante, viene controllato, tramite .hitTest , se il movieclip cerchio è stato sovrapposto al movieclip uomo. In caso affermativo, il movieclip uomo viene reso invisibile e il movieclip cerchio viene re-indirizzato al frame numero 2 (e verrà visualizzato il bottone Sgancia).

Gli eventi gestiti


In Flash4 solo i bottoni avevano l'esclusiva degli eventi. Ora, in Flash5, anche i movieclip possono essere associati ad alcuni eventi:

La prima cosa da notare è il menù a scelta unica che, differentemente dai bottoni, implica la scrittura delle azioni per ogni evento (mentre nei bottoni è possibile raggruppare più azioni in un unico evento).

Load: si ha quando il movieclip è stato caricato;In questo caso, l'evento si svolge una sola volta (al caricamento del movieClip)

EnterFrame: quando inizia la lettura dei frame del movieclip;L'evento si svolge continuamente, a ripetizione.

Unload: quando il movieclip viene scaricato (non è più visibile nel filmato);L'evento si svolge un attimo prima che il movieClip venga scaricato.

Mouse down: quando l'utente ha cliccato con il mouse;L'evento si attiva in qualsiasi punto dello stage.

Mouse up: quando l'utente rilascia il pulsante del mouse.L'evento si attiva in qualsiasi punto dello stage.

Mouse move: quando l'utente muove il puntatore (e il movieclip è visualizzato in quel momento);Anche in questo caso, l'evento si attiva in qualsiasi punto dello stage.

Key down: quando si registra una pressione dei tasti da parte dell'utente;

Key up: il rilascio dei tasti da parte dell'utente;

Data: quando vi è un caricamento di variabili o filmati esterni (tramite loadVariables o loadMovie).Al termine del caricamento, si attiva l'evento.

Tramite questi eventi è possibile quindi gestire il press ed il release che, precedentemente, era necessario gestire tramite un area sensibile (bottone invisibile). Da tenere conto però, che questi eventi si attivano senza modificare l'icona del puntatore del mouse (rimane la tipica freccina); per questo motivo quindi, potrebbe risultare difficile da parte dell'utente capire cosa dover fare...

Caricare variabili da un file esterno


Il metodo .loadVariables permette di caricare variabili esterne all'interno del movieclip indicato prima del punto. E' necessario specificare l'url dal quale le variabili vengono lette (è possibile usare una qualsiasi pagina "dinamica", tipo Asp o Php, oppure un file di testo).Per poter leggere i valori delle variabili esterne all'interno del file Flash, è necessario seguire questa sintassi:



nomevariabile1=valore&nomevariabile2=valore& ... ecc...

Quindi, prima di tutto va inserito il nome della variabile (nomevariabile1) seguito dal segno di eguaglianza (=) e, se ce ne sono altre, inserire il simbolo "e commerciale" (&) seguito a sua volta dal nome della seconda variabile e così via...

La sintassi per questa azione è:

.loadVariables( url, method )

dove url specifica la pagina generata dinamicamente, oppure il file di testo, da cui prelevare le variabili e method specifica il metodo usato per l'invio (post o get).

Facciamo un esempio:all'interno del nostro sito in Flash, vi è un'area "aggiornamenti", dove sono descritti tutti i più recenti aggiornamenti fatti al sito. Bene, ponendo il caso che vengano visualizzati solo gli ultimi 5 aggiornamenti, e che questi debbano essere gestiti da un'utente completamente estraneo a Flash, il modo migliore è quello di inserire in un campo di testo i valori necessari per aggiornare automaticamente il sito. In questo modo quindi, metteremo la persona che gestisce la cosa, nelle condizioni di poterla fare al meglio e senza troppe diffocoltà. Vi spiego come...

Creiamo innanzitutto il nostro file di testo che chiameremo per semplicità news.txt e lo inseriremo nella stessa directory (cartella) dove risiede il file .swf del filmato Flash. All'interno di questo file, inseriamo questo codice:

titolo1=Aggiornata area suond loops&link1=http://www.flash5.it/sound&titolo2=Nuove lezioni sulle ActionScript&link2=http://www.flash5.it/tutorial/actionscript&titolo3=Cerca i movies che ti interessano&link3=http://www.flash5.it&titolo4=L'elenco completo dei movies&link4=http://www.flash5.it/movies&titolo5=Flash5.it - Il portale per i Flasher italiani&link5=http://www.flash5.it

Per una maggiore leggibilità è possibile andare a capo prima della & (dovrebbe essere scritto il tutto su un'unica riga di testo).titolon (dove n indica i vari numeri delle variabili) indica il titolo dell'aggiornamento, mentre linkn ne indica l'indirizzo alla quale è collegato.

A questo punto, all'interno del filmato Flash, inseriamo un movieclip con all'interno tanti campi di testo quanti sono gli aggiornamenti da visualizzare (5 se non erro), assegnandogli il nome titolon:

Nominiamo il movieclip news ed inseriamolo dove desideriamo (io lo inserirò nello stage principale). A questo punto è necessario inserire l'action .loadVariables per caricare le variabili dal file esterno al movieclip news:

Siccome il file news.txt risiede nella stessa directory del file .swf, basta inserire il nome del file tra virgolette per poterlo rintracciare. Se invece il file fosse stato in una sottodirectory, avremmo dovuto inserire anche il nome di essa seguito dalla barra: "aggiornamenti/news.txt" oppure direttamente il link assoluto "http://www.flash5.it/aggiornamenti/news.txt".A questo punto, le variabili sono caricate nel movieclip ed è possibile leggerne il valore. Ci rimane da renderle "cliccabili".Per fare ciò, useremo un'area sensibile (5 istanze di essa) che posizioneremo all'interno del movieclip sotto ogni casella di testo titolon. Il mio consiglio è quello di inserire un keyframe sul frame Over dell'area sensibile e disegnare una banda colorata. In questo modo l'utente, quando passa sopra ad ogni voce, verrà visualizzata di sfondo la barra colorata, dando un effetto migliore al tutto.Per ogni istanza dell'area sensibile inserita, assegniamo queste azioni:

on (release) { getURL (linkn, "_blank");}

Così facendo, l'utente quando cliccherà sulla voce scelta, verrà re-indirizzato alla pagina specificata in linkn (letta dal file di testo).

Ecco il risultato delle nostre fatiche:

L'oggetto Date

Inizializzazione e metodi


Tramite l'oggetto Date è possibile conoscere la data/ora di sistema (dipendente dal computer dell'utente) oppure standard (ora di Greenwich) in diversi formati.Per poter utilizzare l'oggetto è necessario inizializzarlo tramite:


new Date();

Assegnando questa azione ad una variabile, creeremo una variabile oggetto da utilizzare con i vari metodi che l'oggetto Date mette a disposizione.

data_corrente = new Date();

I metodi che l'oggetto Date propone, sono moltissimi; qui sotto vi è un elenco completo, ma nelle lezioni successive, analizzeremo in modo più approfondito i metodi di maggiore importanza.

Oggetto Date: i metodi

getDate Restituisce il giorno del mese dell'oggetto Date specificato in base all'ora locale.

getDay Restituisce il numero di giorno della settimana dell'oggetto Date specificato in base all'ora locale.

getFullYear Restituisce l'anno in formato a quattro cifre dell'oggetto Date specificato in base all'ora locale.

getHours Restituisce l'ora dell'oggetto Date specificato in base all'ora locale.

getMilliseconds Restituisce i millesimi di secondo dell'oggetto Date specificato in base all'ora locale.

getMinutes Restituisce i minuti dell'oggetto Date specificato in base all'ora locale.

getMonth Restituisce il mese dell'oggetto Date specificato in base all'ora locale.

getSeconds Restituisce i secondi dell'oggetto Date specificato in base all'ora locale.

getTime Restituisce il numero di millesimi di secondo dalla mezzanotte dell'1 gennaio 1970,tempo universale coordinato UTC,per l'oggetto Date specificato.

getTimezoneOffset Restituisce la differenza, in minuti, tra l ’ora locale del computer e il tempo universale coordinato UTC.

getUTCDate Restituisce il giorno del mese (data)dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getUTCDay Restituisce il giorno della settimana dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getUTCFullYear Restituisce l'anno in formato a quattro cifre dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getUTCHours Restituisce l'ora dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getUTCMilliseconds Restituisce i millesimi di secondo dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getUTCMinutes Restituisce i minuti dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getUTCMonth Restituisce il mese dell'oggetto Date specificato in base al tempo universale coordinato UTC..getUTCSeconds Restituisce i secondi dell'oggetto Date specificato in base al tempo universale coordinato UTC.

getYear Restituisce l'anno dell'oggetto Date specificato in base al tempo locale.

setDate Imposta il giorno del mese dell'oggetto Date specificato in base al tempo locale.

setFullYear Imposta l'anno nel formato a quattro cifre per un oggetto Date in base all'ora locale.

setHours Imposta le ore per un oggetto Date in base all'ora locale.

setMilliseconds Imposta i millesimi di secondo per un oggetto Date in base all'ora locale.

setMinutes Imposta i minuti per un oggetto Date in base all'ora locale.

setMonth Imposta il mese per un oggetto Date in base all'ora locale.

setSeconds Imposta i secondi per un oggetto Date in base all'ora locale.

setTime Imposta la data,in millesimi di secondo,per l'oggetto Date specificato.

setUTCDate Imposta la data dell'oggetto Date specificato in base al tempo universale coordinato UTC.

setUTCFullYear Imposta l'anno nel formato a quattro cifre dell'oggetto Date specificato in base al tempo universale coordinato UTC.

setUTCHours Imposta l'ora dell'oggetto Date specificato in base al tempo universale coordinato UTC.

setUTCMilliseconds Imposta i millesimi di secondo dell'oggetto Date specificato in base al tempo universale coordinato UTC.

setUTCMinutes Imposta i minuti dell'oggetto Date specificato in base al tempo universale coordinato UTC.

setUTCMonth Imposta il mese rappresentato dall'oggetto Date specificato in base al tempo universale coordinato UTC.

setUTCSeconds Imposta i secondi dell'oggetto Date specificato in base al tempo universale coordinato UTC.

setYear Imposta l'anno dell'oggetto Date specificato in base all'ora locale.

toString Restituisce un valore stringa che rappresenta la data e l'ora memorizzate nell'oggetto Date specificato.

Date.UTC Restituisce il numero di millesimi di secondo tra la mezzanotte dell'1 gennaio 1970,tempo universale coordinato UTC,e l'ora specificata.

Conoscere la data e l'ora correnti


Conoscere la data correntePer conoscere la data corrente vengono usati i metodi getDate(), getMonth() e getFullYear() che restituiscono rispettivamente il giorno (numero del mese), il mese e l'anno.

//Inizializzazione dell'oggetto Datenew Date();dat = new Date();

//Restituzione delle informazionigg = dat.getDate();mm = (dat.getMonth() + 1);aa = dat.getFullYear();

Per default Flash restituisce il valore di getMonth() partendo da 0 anziché 1, quindi il mese di gennaio viene considerato come 0, febbraio 1, marzo 2 ecc...Ecco il perché quindi dell'espressione (dat.getMonth() + 1).Ora basta impostare la data in un formato a noi conosciuto (gg/mm/aa) concatenando le 3 variabili in questo modo:

//Imposto la data alla formattazione italianadata_corr = gg + "/" + mm + "/" + aa


Il risultato è che la variabile data_corr ha al suo interno una data del genere: 23/07/2001. Lo stesso risultato si avrebbe con:

data_corr = dat.getDate() + "/" + dat.getMonth() + "/" + dat.getFullYear()

Conoscere l'ora correntePer conoscere l'ora corrente, il procedimento è lo stesso, ma vengono utilizzati i metodi getHours(), getMinutes() e getSeconds() (e getMilliseconds() se vogliamo essere pignoli) per restituire l'ora, i minuti ed i secondi. Il procedimento da adottare è lo stesso usato per la data:

//Inizializzazione dell'oggetto Datenew Date();dat = new Date();

//Restituzione delle informazionihh = dat.getHours();mn = dat.getMinutes();ss = dat.getSeconds();

//Formatto l'oraora_corr = hh + "." + mn + "." + ss

A questo punto, abbiamo due variabili (data_corr e ora_corr) contenenti la data e l'ora correnti. L'unico dato che ci manca è il giorno della settimana.

Conoscere il giorno della settimanaUtilizziamo il metodo getDay(), che restituisce il numero del giorno della settimana, e creiamo un piccolo script visualizzare il nome anziché il numero:

//Assegno il numero di giornogiorno = dat.getDay();

//Assegno il nome in base al numero del giornoif (giorno == 1) { sett = "lunedì";} else if (giorno == 2) { sett = "martedì";} else if (giorno == 3) { sett = "mercoledì";} else if (giorno == 4) { sett = "giovedì";} else if (giorno == 5) { sett = "venerdì";} else if (giorno == 6) { sett = "sabato";} else if (giorno == 0) { sett = "domenica";}

Ecco i nostri risultati:


Ora di Greenwich in base UTCFlash mette a disposizione anche alcuni metodi che restituiscono data e ora in base all'ora del meridiano Greenwich (Tempo Universale Coordinato). In questo modo, la data/ora viene restituita in base a questo fuso orario (in Italia c'è 1 ora di fuso). I metodi da utilizzare per la data sono: getUTCDate(), getUTCMonth() e

http://flash-mx.html.it/guide/zip/as-inter/date.zip

getUTCFullYear(). Mentre per l'ora: getUTCHours(), getUTCMinutes() e getUTCSeconds(). La sintassi da utilizzare è la stessa vista nel corso di questa lezione.

Attenzione!Utilizzando l'oggetto Date, è possibile conoscere la data e l'ora correnti, ma partendo sempre dalle impostazioni che l'utente ha sul proprio computer. Purtroppo l'oggetto Date è dipendente dalla data di sistema dell'utente. Se un utente che visita il sito ha settato una data sbagliata sul proprio pc, Flash preleva questo valore per poterla utilizzare nelle azioni. Alcuni script quindi, possono non essere corretti. Il modo migliore per ovviare a questo inconveniente è quello di interagire con uno script CGI, ASP o PHP in modo da rendere indipendente la data/ora (che vengono inviate direttamente dal server).

L'oggetto Mouse

Due semplici metodi


L'oggetto Mouse dispone di 2 semplici metodi: hide() e show().Tramite questi metodi, è possibile nascondere o visualizzare il puntatore del mouse. In questo modo quindi, è possibile sostituire la classica freccina del mouse con un puntatore personalizzato. Da ricordare comunque che la sostituzione avviene esclusivamente all'interno del filmato Flash, non appena l'utente si sposta con il mouse fuori dall'area del filmato, il puntatore torna ad avere l'icona di sistema.

Come già detto, i due metodi hide() e show() nascondono e visualizzano il puntatore del mouse, ma per sostituirlo bisogna adottare un piccolo "trucco".Dopo aver nascosto il puntatore, rendiamo trascinabile un movieclip con disegnata l'icona di una freccina:

//Nascondo il puntatoreMouse.hide();

//Rendo trascinabile il movieclipfreccia.startDrag(true);

Ecco cosa succede:


Per interrompere il trascinamento e visualizzare il puntatore standard, basta inserire:

//Interrompo il trascinamentofreccia.stopDrag();

//Visualizzo il puntatore di sistemaMouse.show();


http://flash-mx.html.it/guide/zip/as-inter/mouse.zip

Premessa


Questo corso nasce con l'intenzione di insegnare tutte le caratteristiche delle ActionScript non viste fino ad ora. E' quindi da considerarsi un corso (quasi) indipendente visto che verranno descritti alcuni concetti basilari già spiegati in precedenza (ma analizzati diversamente). La differenza sostanziale sta nel fatto che non verrà più utilizzata la modalità normale del pannello ActionScript, quindi, già da ora, cliccate su Expert Mode:

per poter così digitare il codice manualmente.Le lezioni che seguiranno sono da considerarsi ad un livello professionale, per cui consiglio la lettura a chi ha già avuto esperienze nel campo della programmazione in generale (non solo riferita a Flash) e ne sconsiglio la lettura se prima non sono stati affrontati positivamente i precedenti corsi per principianti e intermedio.Nel corso delle lezioni poi, non mi soffermerò più del dovuto su alcuni concetti basilari della programmazione.

Buona lettura...

Scrivere script


Il linguaggio di Flash5 nell'insieme, non si allontana molto dagli altri linguaggi di programmazione. Possiede parole riservate, oggetti e metodi, funzioni, loop, condizioni, operatori stringa e numerici ecc... La sintassi usata è molto simile a quella dei JavaScript e quindi gli utenti già a conoscenza di questo linguaggio saranno molto avvantaggiati rispetto ad altri. Posso subito dirvi che le parole riservate sono case sensitive e che quindi la parola "new" è ben diversa da "New". Ma non vi preoccupate troppo, Flash viene in aiuto colorando di blu queste parole (non deselezionate però l'opzione Colored Sintax).

Saper scrivere le ActionScript necessita una buona conoscenza della sintassi. Parte fondamentale è rappresentata dal punto (.). Infatti il punto viene utilizzato per:

indicare le proprietà di un oggetto; indicare i metodi di un oggetto; identificare il percorso di un Target o di una variabile.

Facciamo degli esempi...

Indicare le proprietà di un oggettoSi vuol conoscere la proprietà _x del movieclip logo. Evitiamo di scrivere:

xlogo = getProperty("logo", _x);

perché la sintassi migliore è:

xlogo = logo._x;

All'interno della variabile xlogo si trova il valore della proprietà _x del movieclip logo. Questa sintassi è applicabile a tutte le proprietà elencate nel pannello delle ActionScript.

Indicare i metodi di un oggettoStessa procedura per i metodi applicabili agli oggetti.Ponendo il caso di voler rendere trascinabile il movieclip logo, la sintassi migliore non è:



startDrag("logo", true);

ma:

logo.startDrag(true);

Identificare il percorso di un Target o di una variabileVolendo far riferimento alla variabile pippo all'interno del movieclip logo, la sintassi corretta è:

_root.logo.pippo;

Chi in precedenza ha utilizzato Flash4, avrà notato la completa mancanza della barra "/" e dei due punti ":" per indicare la variabile. In Flash5 questa sintassi è stata considerata obsoleta ed è possibile usarla solo per compatibilità dei file in versione 4. Ne è quindi sconsigliato l'uso.In questo esempio ho utilizzato _root per creare un path assoluto (_root quindi indica il livello 0 del filmato), ma vi è un altro alias denominato _parent che permette di creare un path relativo.Poniamo che l'istanza tasto si trovi all'interno dell'istanza tastiera: in questo caso, per stoppare tastiera da tasto basta semplicemente scrivere:

_parent.stop();

Punto e virgolaIn Flash il punto e virgola, indica la fine di una istruzione. Se viene omesso, lo script viene comunque eseguito normalmente senza errori.

Parentesi graffeLe parentesi graffe in Flash, delimitano l'area di esecuzione di una istruzione.Nell'esempio seguente, tutto quello che si trova all'interno delle parentesi graffe viene eseguito al verificarsi della condizione:

if (x > 10) { _root.play();}

CommentiCome in JavaScript, è possibile inserire commenti con la sintassi della doppia barra "//":

//Questo è un commento

Le funzioni


Come già molti di voi sapranno, con il termine funzione si indica un blocco di codice (script) utilizzabile in qualsiasi punto ed in qualsiasi momento del, in Flash, filmato. Ad una funzione vengono passati dei valori, detti argomenti, che vengono operati e, in alcuni casi, restituiti nel punto del richiamo.Potremmo costruire una funzione per il controllo di username e password dell'utente. Alla funzione di controllo vengono inviati i due dati, e di ritorno avremo una risposta affermativa se i dati sono giusti, negativa se sono errati.

Flash ha al suo interno alcune funzioni predefinite. Esse sono:

BooleanescapeevalfalsegetPropertygetTimergetVersionglobalToLocalhitTestint

localToGlobalmaxscrollnewlineNumberparseFloatparseIntrandomscrollStringtargetPath


isFiniteisNaNkeycode

trueunescape

Alcune di queste sono già state viste in precedenza, altre verranno analizzate nel corso di queste lezioni.

Per richiamare una funzione viene usata questa sintassi:

nomefunzione();

E' possibile anche richiamare funzioni tramite percorso Target, come in questo caso:

_root.pippo.nomefunzione();

Una cosa molto importante è sapere che una funzione può essere richiamata solo se la testina di lettura frame ha letto il frame su cui risiede la funzione (perché non inserirle il più possibile nel primo frame? Creeremo script di facile lettura).

Facciamo un semplicissimo esempio:


In questo caso, l'azione del bottone "imposta" richiama la funzione Imposta() che esegue queste azioni:

function Imposta(x) { with (_root.logo) { _x = x; _y = x; _alpha = x; }

}

(tramite l'azione function viene creata la funzione) Alla funzione viene passato l'argomento x e tramite questo valore, vengono impostate la posizione x,y e il valore alpha del movieclip logo.

Come potete notare, ho utilizzato l'azione with mai vista fino ad ora.Questa azione, permette di impostare più proprietà riferite ad un soggetto indicato come argomento dell'azione. In questo caso, indicando _root.logo come soggetto, tutto quello compreso all'interno delle parentesi graffe, viene eseguito sulla clip _root.logo. E' facile quindi constatare la velocità di costruzione dell'azione e la più semplice lettura di essa.

Per ritornare un valore dopo l'esecuzione di una funzione è necessario usare l'azione return specificando la variabile o l'espressione da inviare. Ecco un altro semplice esempio:

http://flash-mx.html.it/guide/zip/as-esper/function.zip


Qui è stata usata la funzione areaRettangolo(base, altezza) così composta:

function areaRettangolo(base, altezza) { area = (base * altezza); return area;}

Come potete vedere, la variabile area viene restituita dopo il calcolo (base*altezza). Il richiamo della funzione è questo:

area = areaRettangolo(base, altezza);

Agendo in questa maniera, il risultato della funzione viene inserito all'interno della variabile area (associata al campo di testo).Tengo a precisare che tutte le variabili utilizzate all'interno della funzione (come negli esempi precedenti) sono variabili locali e quindi hanno validità solo internamente alla funzione. Una volta terminata perdono valore (se non "trasmesse" dentro altre variabili come ho fatto nel secondo esempio). Per modificare variabili globali è necessario specificare il percorso Target di esse.In più, quando una funzione necessita di un tot di argomenti, se questo tot non viene rispettato (la funzione necessita di 2 argomenti, e ne viene passato solo 1 al momento del richiamo), Flash assegna ai valori non inviati il valore undefined provocando sicuramente errori in fase di esecuzione. Fate quindi molta attenzione, inserendo un controllo (se è l'utente che deve digitare i dati da inviare alla funzione) al momento del richiamo della funzione. Se invece, gli argomenti inviati alla funzione sono in numero maggiore, allora Flash utilizza solo quelli necessari (se la funzione necessita di 2 argomenti, e ne vengono passati 3, allora Flash utilizza solo i primi 2).

Gli oggetti personalizzati


Oltre agli oggetti che Flash mette a disposizione (alcuni già visti, altri seguiranno), è possibile creare oggetti personalizzati definendone le proprietà e i metodi. Creare un oggetto permette di semplificare la lettura degli script (e l'organizzazione dei dati).Come già saprete, un oggetto è un tipo di dati contenente più proprietà (o metodi) da definire in fase di creazione.Per creare un oggetto è possibile utilizzare l'istruzione new:

new Date();

oppure per gli oggetti personalizzati:

oggetto = { propr1:'val1', propr2:'val2', ... proprn:'valn' }

Un esempio di oggetto personalizzato può essere:

utenti = { nome:'Paolo', cognome:'Rossi', citta:'Rimini' };

In questo caso è possibile impostare le proprietà di utenti tramite la sintassi del punto:

http://flash-mx.html.it/guide/zip/as-esper/function1.zip


//Imposto l'oggetto Utentiutenti.nome = "Giuseppe";utenti.cognome = "Bianchi";utenti.citta = "Milano";

//Visualizzo le informazioni in Outputtrace ("Nome: " + utenti.nome);trace ("Cognome: " + utenti.cognome);trace ("Città: " + utenti.citta);

E' importante capire l'importanza degli oggetti personalizzati e soprattutto usarli in maniera corretta (e spesso). Possono risultare molto utili se usati con intelligenza, e per questo motivo cercherò di usarli il più possibile nelle lezioni successive.

I loop


Chi ha usato Flash4 si ricorderà sicuramente il problema dei loop. Non esistevano istruzioni dedicate, e così bisognava arrangiarsi giocando con i frame per la ripetizione.In Flash5 però questo problema è superato. Abbiamo a disposizione una serie di istruzioni per il loop molto vasta.

while e do...whileL'azione while necessita di un'espressione e, se questa è vera, esegue lo script compreso tra le parentesi graffe:

i = 0;while (i < 10) { i++; logo.duplicateMovieClip("logo" + i, i);}

In questo caso, l'azione viene eseguita per 10 volte.Tramite l'azione do...while invece, il controllo viene eseguito alla fine dello script:

i = 0;do { i++; logo.duplicateMovieClip("logo" + i, i);} while (i < 10)

Anche in questo caso lo script viene eseguito per 10 volte. Ma allora dov'è sta la differenza tra le due istruzioni? La differenza sostanziale sta nel fatto che, nel secondo esempio lo script viene eseguito almeno una volta, mentre nel primo no, in quanto la condizione viene verificata all'inizio del loop.

for e for...inNell'istruzione for la variabile di loop (i generalmente) viene integrata negli argomenti dell'istruzione. La sintassi per l'istruzione è:

for (inizializzazione; condizione; passaggio) { ...}

Dove in inizializzazione viene inserita la variabile contatore con il suo valore iniziale; in condizione la condizione per cui il loop deve essere eseguito; infine in passaggio l'operazione da eseguire ad ogni loop.In pratica, gli esempi precedenti vengono tradotti in:

for (i = 0; i < 10; i++) { logo.duplicateMovieClip("logo" + i, i);}

L'istruzione for..in permette un ciclo tra gli elementi secondari di un oggetto (o movieclip). Ecco un esempio:

//Inizializzo l'oggetto "utenti"utenti = { nome:'Paolo', cognome:'Rossi', citta:'Rimini' };

//Loop per le sue proprietàfor (propertyName in utenti) { trace (propertyName + ": " + utenti[propertyName];}

Questo script genera nella finestra di Output questo testo:

nome: Paolocognome: Rossicitta: Rimini

Il loop quindi, è stato eseguito per ogni proprietà dell'oggetto utenti.

break e continueLe istruzioni viste finora mettono a disposizione altre due azioni (break e continue) che permettono di gestire l'uscita o il "salto" del loop. Mi spiego..Utilizzando l'azione break all'interno di un loop, questa genera l'uscita dal loop stesso. In questo esempio:

while (i < 10) { i++; //Verifico se la password è corretta if (eval("password" + i) == "flash") { break; }

}

la password viene verificata per 10 volte. Se all'interno del loop, una delle variabili passwordn è uguale a "flash", viene eseguito break che termina il loop.

Con l'azione continue invece, il risultato cambia a seconda del loop usato:

while = il loop viene interrotto e rimandato alla condizione (in alto); do...while = il loop viene interrotto e rimandato alla condizione (in basso);

for = il loop viene interrotto e rimandato alla condizione iniziale;

for..in = il loop viene interrotto e rimandato all'inizio del ciclo per elaborare il successivo valore.

Gli Array


L'oggetto Array permette di creare matrici e di gestirle. Molti di voi sapranno già cosa intendo per matrice. Una matrice è un oggetto identificato da un indice (che rappresenta la posizione all'interno di essa). All'interno di una matrice possono essere inseriti più valori, perché ognuno di essi ha un indice univoco che lo identifica.Per creare l'oggetto Array è necessario inizializzarlo:

nomearray = new Array();

L'indice di un array inizia sempre per 0, quindi il primo elemento viene identificato con 0, il secondo con 1 e così via... Per accedere agli elementi si usano le parentesi quadre indicando la posizione all'interno:

//Creo l'arrayutenti = new Array();

//Inserisco i nomi degli utentiutenti[0] = "Paolo";utenti[1] = "Giuseppe";utenti[2] = "Marco";...

utenti[n] = "...";

La creazione può essere gestita anche in questo modo:

utenti = new Array("Paolo", "Giuseppe", "Marco");

avendo lo stesso effetto del precedente.

I metodi e le proprietàEssendo un oggetto, l'array dispone di alcuni metodi che vi elenco:

concat Concatena gli argomenti e li restituisce come nuova matrice. join Restituisce una stringa che contiene tutti gli elementi della matrice. pop Rimuove l ’ultimo elemento della matrice e ne restituisce il valore corrispondente. push Aggiunge uno o più elementi in fondo alla matrice e ne restituisce la nuova dimensione. reverse Inverte la direzione di una matrice. shift Rimuove il primo elemento da una matrice e ne restituisce il valore corrispondente. slice Estrae una sezione da una matrice e la restituisce come nuova matrice. sort Ordina una matrice in posizione. splice Aggiunge e/o rimuove gli elementi di una matrice. toString Restituisce un valore stringa che rappresenta gli elementi dell'oggetto Array. unshift Aggiunge uno o più elementi all’inizio della matrice e ne restituisce la nuova dimensione.

Come proprietà invece abbiamo:

length Restituisce le dimensioni della matrice.

Gli Array: metodi


Alcuni metodi (e l'unica proprietà) dell'oggetto Array meritano un'analisi più approfondita.Ecco quali...

La proprietà lengthTramite questa proprietà è possibile conoscere il numero di elementi presenti nella matrice:

nomi = new Array("Paolo", "Giuseppe", "Marco");dimens = nomi.length;//La variabile dimens è uguale a 3

concatPer concatenare 2 o più matrici, generandone una nuova:

//Creo gli arraynomi = new Array("Paolo", "Giuseppe", "Marco");cognomi = new Array("Rossi", "Bianchi", "Verdi");

//Concateno gli arrayutenti = nomi.concat(cognomi);

//E' stata così creata la matrice//["Paolo", "Giuseppe", "Marco", "Rossi", "Bianchi", "Verdi"]

joinPer esportare un'array in stringa viene usato join che permette di scegliere il separatore da utilizzare tra gli elementi della matrice:

//Creo l'arraynomi = new Array("Paolo", "Giuseppe", "Marco");

utenti = nomi.join(", ");


//La variabile utenti è uguale a "Paolo, Giuseppe, Marco"

Se il separatore viene omesso, per default Flash inserisce la virgola tra un elemento e l'altro.

sortPer ordinare gli elementi di una matrice in modo crescente o decrescente:

// Creo l'arraynomi = new Array("Paolo", "Giuseppe", "Marco");

//Ordino la matriceutenti = nomi.sort();

//La variabile utenti è uguale a "Giuseppe,Marco,Paolo"

L'oggetto Color


Per mezzo dell'oggetto Color è possibile impostare un colore RGB ad un Target del nostro filmato. Un esempio di uso comune, è la possibilità di scegliere il colore di sfondo del filmato:


Sullo sfondo del filmato qui sopra, vi è un movieclip con disegnato un rettangolo (bianco all'inizio). Non appena l'utente sceglie il tipo di colore da assegnare, il movieclip viene ricolorato con il colore scelto. Vediamo come...

L'oggetto Color dispone di 4 metodi:

getRGB Ritorna il valore numerico del colore RGB. getTransform Ritorna le informazioni sulla trasformazione del colore. setRGB Imposta il colore RGB. setTransform Imposta la trasformazione dei colori.

Inizializzazione e setRGBRitorniamo all'esempio precedente.Prima di tutto, l'oggetto Color deve essere inizializzato, poi è possibile impostare il colore RGB usando la sintassi 0xRRGGBB. Ecco come appare lo script del bottone "rosso":

on (release) { colore = new Color(sfondo); colore.setRGB(0xFF6500);}

Durante la creazione dell'oggetto, è necessario specificare il Target

new Color(Target)

a cui l'oggetto fa riferimento (in questo caso al movieclip sfondo). Poi, viene utilizzato il metodo setRGB per impostare il colore desiderato (FF6500).

getRGBIl metodo getRGB restituisce il valore RGB dell'ultimo setRGB effettuato (valore restituito in stringa non esadecimale).


http://flash-mx.html.it/guide/zip/as-esper/color.zip

setTransformsetTransform invece, permette di configurare le diverse impostazioni di un colore. La sintassi da usare è 0xRRGGBBAA (dove AA sta per alpha). Quindi, per ogni colore è possibile impostare la percentuale di rosso, verde, blu e di trasparenza. E' necessario creare un oggetto personalizzato per poter utilizzare questo metodo, eccone un esempio:

imposta ={ra:'100',rb:'220',ga:'55',gb:'100',ba:'25',bb:'75',aa:'50',ab:'50'}

(abbiate pietà, sono andato a capo dopo l'uguale per motivi di spazio...)Le proprietà dell'oggetto personalizzato devono nominarsi necessariamente in questo modo. Ecco cosa significano:

ra è la percentuale del rosso (da -100 a 100); rb è l'offset del rosso (da -255 a 255); ga è la percentuale del verde (da -100 a 100); gb è l'offset del verde (da -255 a 255); ba è la percentuale del blu (da -100 a 100); bb è l'offset del blu (da -255 a 255); aa è la percentuale di alpha (da -100 a 100); ab è l'offset di alpha (da –255 a 255).

Per impostare il colore con la configurazione personalizzata, basta digitare:

colore.setTransform(imposta);

ed il colore assumerà le nuove impostazioni.

getTransformPer concludere, il metodo getTransform restituisce le informazioni sull'ultima configurazione di colore effettuata tramite setTransform.

L'oggetto Sound


In Flash4 il controllo dell'audio per mezzo delle ActionScript era abbastanza lacunoso. Con la nuova versione però, questa lacuna è stata colmata. Tramite l'oggetto Sound infatti, è possibile gestire diversi aspetti di un file sonoro.

I metodi per l'oggetto sono:

attachSound Associa il suono specificato nell'argomento; getPan Restituisce il valore della chiamata setPan precedente; getTransform Restituisce il valore della chiamata setTransform precedente; getVolume Restituisce il valore della chiamata setVolume precedente; setPan Imposta il bilanciamento destra/sinistra dell'audio; setTransform Imposta la trasformazione dell'audio; setVolume Imposta il livello del volume dell'audio; start Avvia la riproduzione di un suono dall'inizio o, se indicato, a partire dal punto impostato

nell'argomento; stop Arresta il suono specificato o tutti i suoni in corso di riproduzione.



Creazione dell'oggettoPer poter utilizzare i vari metodi a disposizione, l'oggetto Sound deve essere creato assegnando il file sonoro desiderato. Per fare questo, vi sono due modi: il primo è quello di inserire il file sonoro all'interno di un movieclip e specificare quest'ultimo come argomento dell'azione:

loop = new Sound(nomeMovieClip);

oppure è possibile utilizzando il metodo attachSound:

loop = new Sound();loop.attachSound("nomelinkage");

In qualsiasi caso, la variabile oggetto loop è pronta per essere associata ai metodi sopra descritti.

nomelinkage deriva dalle Proprietà di concatenamento delle librerie. I vari elementi della nostra libreria possono essere utilizzati anche da filmati esterni a quello principale. Per poter disporre di questa opzione per i file sonori è necessario:1) selezionare il file sonoro desiderato, cliccare con il pulsante destro del mouse e selezionare la voce Linkage:

2) dalla finestra Proprietà di concatenamento (Symbol Linkage Properties) selezionare la voce Export this symbol ed immettere un nome nel campo Identifier:

In questo modo, il file sonoro viene considerato come condiviso e può essere utilizzato da filmati esterni.

Al posto di nomelinkage quindi, è necessario digitare il nome inserito nella casella Identifier.

http://flash-mx.html.it/guide/zip/as-esper/sound.zip

start e stopPer avviare ed interrompere la riproduzione di un file sonoro.

//Creo l'oggettoloop = new Sound(suono);

//Inizia la riproduzioneloop.start();//Si interrompe la riproduzioneloop.stop();

Il metodo start ha la particolarità di poter impostare la possibilità di riprodurre il file in un punto specifico e di impostarne il numero di loop.

loop.start(15, 100);

Il file sonoro verrà riprodotto dal 15° secondo in poi, per un ciclo di 100 volte.

setPan e getPanPer mezzo di questi due metodi è possibile impostare o conoscere il bilanciamento dell'audio. Il valore assegnato deve essere compreso tra -100 e 100, dove -100 corrisponde al canale sinistro, mentre 100 a quello destro.


//Imposto l'audio nella cassa sinistraloop.setPan(-100);//Imposto l'audio nella cassa destraloop.setPan(100);//Imposto l'audio in modo bilanciatoloop.setPan(0);

getPan invece, come avrete capito, restituisce il valore, compreso tra -100 e 100, dell'ultima chiamata di setPan.

setVolume e getVolumeIl volume invece, necessita di un valore compreso tra 0 e 100, dove 0 corrisponde al silenzio totale, mentre a 100 il volume di default del sistema.


//Silenzioloop.setVolume(0);//Troppo rumore ;-)loop.setVolume(100);//Volume adeguatoloop.setVolume(50);

getVolume restituisce il valore, compreso tra 0 e 100, dell'ultima chiamata di setVolume.

setTransform e getTransformCome per l'oggetto Color, anche per Sound è possibile impostare una configurazione personalizzata della riproduzione di un file sonoro.Ecco cosa è possibile gestire:

ll Percentuale che indica il quantitativo di input sinistro dariprodurre nell'altoparlante sinistro (da -100 a 100);

lr Percentuale che indica il quantitativo di input destro da riprodurre nell'altoparlante sinistro (da -100 a 100);

rr Percentuale che indica il quantitativo di input destro da riprodurre nell'altoparlante destro (da -100 a 100);

rl Percentuale che indica il quantitativo di input sinistro da riprodurre nell'altoparlante destro (da -100 a 100).

Ecco come appaiono le riproduzioni stereo/mono conoscendo i parametri precedenti:

Stereoll = 100lr = 0rr = 100rl = 0

Monoll = 100lr = 100rr = 0rl = 0

In questo modo:

//Creo l'oggetto personalizzatosuono = { ll:'50',lr:'50',rr:'50',rl:'50' }

//Assegno la trasformazione al looploop.setTransform(suono);

la riproduzione dell'audio avviene in modalità mono anche se il file sonoro è stereo.

getTransform invece, restituisce il valore dei parametri dell'ultima chiamata di setTransform

L'oggetto Key


L'oggetto Key dà la possibilità di controllare gli eventi di tastiera. Dispone di metodi e proprietà, e non necessita di inizializzazione.I metodi disponibili sono:

getAscii Restituisce il valore ASCII dell'ultimo tasto premuto; getCode Restituisce il codice di tasto virtuale dell'ultimo tasto premuto; isDown Restituisce true se viene premuto il tasto specificato nell'argomento; isToggled Restituisce true se Bloc Num o Bloc Maiusc sono attivati.

Tramite questo oggetto quindi, è possibile impostare azioni quando l'utente digita alcuni particolari caratteri. Proprio come in questo caso:


dove per ogni tasto è stata assegnata un'azione di setProperty per impostare la nuova posizione del logo, dando l'impressione di movimento:

onClipEvent (enterFrame){ if (Key.isDown(Key.LEFT)){ this._x = (_x-5); }


http://flash-mx.html.it/guide/zip/as-esper/key.zip

if (Key.isDown(Key.RIGHT)){ this._x = (_x+5); } if (Key.isDown(Key.UP)){ this._y = (_y-5); } if (Key.isDown(Key.DOWN)){ this._y = (_y+5); }}

Il metodo isDown necessita di un argomento che identifica il codice del tasto. In questo caso, come argomento sono state inserite le proprietà LEFT, RIGHT, UP e DOWN che, rispettivamente, indicano la freccia Sinistra, Destra, Su e Giu. Ecco un elenco delle proprietà assegnate a Key:

BACKSPACECAPSLOCKCONTROLDELETEKEYDOWNENDENTERESCAPEHOME

INSERTLEFTPGDNPGUPRIGHTSHIFTSPACETABUP

Per un elenco completo invece, dei codici di tastiera, cliccate qui.

Codici di tastiera per l'oggetto Key

Lettere dalla A alla Z e numeri standard da 0 a 9.

TastoABCDEFGHIJKLMNOPQRSTUVWXYZ

Codice6566676869707172737475767778798081828384858687888990

Tasto0123456789

Codice48495051525354555657

http://flash-mx.html.it/guide/zip/as-esper/key_codici.html

Tasti sul tastierino numerico

Tasto0123456789

Codice96979899

100101102103104105

Tasto*+Invio-./

Codice106107108109110111

Tasti Funzione

TastoF1F2F3F4F5F6F7F8F9F10F11F12

Codice112113114115116117118119120121122123

Altri tasti

TastoBackspace

TabCancInvio

MaiuscCtrlAlt

Bloc MaiuscEsc

Barra spaziatricePag SuPag Giù

FineHome

Freccia sinistraFreccia su

Freccia destraFreccia giù

InsCancGuida

Bloc Num;:

=+-_/?`~

Codice8912131617182027323334353637383940454647

144186187189191192

L'oggetto Selection



Questo oggetto permette di controllare i campi di testo Input Text inseriti nel filmato. Possiede metodi che ne gestiscono il fuoco e la selezione interna del testo. Questo oggetto non necessita di inizializzazione, dato che è possibile gestire un solo campo di testo alla volta per cui non permette di creare variabili oggetto tramite:

new Selection()

E' necessario usare come variabile-oggetto, l'oggetto stesso:

Selection.getFocus();

Settare e conoscere il fuocoI metodi per gestire queste due operazioni sono rispettivamente, getFocus e setFocus. Associando il metodo getFocus ad una variabile (o utilizzando l'azione trace) è possibile conoscere il nome del campo di testo con il fuoco attivo in quel momento (se non è selezionato nessun campo, il metodo restituisce null).Con setFocus invece, è possibile impostare il fuoco sul campo di testo indicato nell'argomento del metodo (tra virgolette).

//Restituisce il campo di testo con fuoco attivotrace (Selection.getFocus());

//Imposto il fuoco sul campo "nome"Selection.setFocus("_level0.nome");

Conoscere la posizione del cursore e della selezioneDi un campo di testo, è possibile conoscere anche la posizione del cursore lampeggiante (posizione che varia da 0 a n, restituita dal metodo getCaretIndex) e l'inizio e la fine di una selezione (metodi getBeginIndex e .getEndIndex). Facciamo un esempio...L'utente digita il proprio nome in un campo di testo nome. Ogni volta che viene digitato un carattere, il valore di getCaretIndex aumenta di uno (spostandosi il cursore lampeggiante di un carattere). Quindi, digitando "Carlo" si avrà:

dopo la "C", 1 dopo la "a", 2 dopo la "r", 3 dopo la "l", 4 dopo la "o", 5

A questo punto, se l'utente seleziona una parte del testo "Carlo", i valori dei metodi getBeginIndex e .getEndIndex cambieranno in base alla selezione. Ponendo il caso che l'utente selezioni "arl", i valori di getBeginIndex e .getEndIndex restituiranno rispettivamente, 1 e 4, cioè l'inizio della selezione (tenete conto che i valori partono da 0 anziché 1!) e la sua fine.I 3 metodi visti finora, restituiscono il valore -1 nel caso in cui non vi sia nessun campo di testo selezionato.

Impostare la selezione in un campo di testoA questo punto è utile sapere che in un campo di testo è possibile anche selezionare un blocco di testo (oltre che, come già visto, conoscerne il valore).Per fare ciò, si utilizza il metodo:

Selection.setSelection(inizio, fine);

dove inizio indica l'inizio della selezione da attivare, mentre fine ne indica la sua fine.

Creare un mouse trailer


Un mouse trailer è quell'animazione tramite il quale, un simbolo movieclip segue l'andamento del puntatore del mouse. Questo movimento può essere creato in svariatissimi modi. In questa lezione, impareremo a crearne uno semplice, in modo da capirne la tecnica.Ecco l'animazione finale che andremo a creare:


Per prima cosa, creiamo il disegno da trascinare ed inseriamolo in un movieclip (io ho disegnato una stella che ruota su se stessa).Bene... per la parte grafica... tutto qui, non c'è altro.Passiamo ora alla parte che riguarda la programmazione...


http://flash-mx.html.it/guide/zip/as-esper/mouse_trailers.zip

Questo mouse trailer è stato costruito tramite l'azione duplicateMovieClip. L'azione, usata in un loop, duplica in continuazione il movieclip originale della stella. Ho impostato il loop a 9, per avere 9 duplicazioni. Dopo aver eseguito i primi 9 duplicati, il loop viene inizializzato nuovamente per altri 9 loop. In questo modo, i vari duplicati vengono sostituiti dai nuovi scomparendo e apparendo nella nuova posizione in cui si trova il puntatore del mouse.Ecco in pratica cosa succede ogni volta che vengono eseguiti i successivi 9 loop.

Per eseguire questa procedura, lo script da creare è davvero piccolo:

//Incremento di 1i++;

//Controllo se "i" supera il numero di movieclip duplicatiif (i>9) { i = 1; //Imposto nuovamente a 1 per riprendere il ciclo}

//duplico il movieclipduplicateMovieClip ("logo1", "logo" + i, i);

Come potete vedere, ogni volta che questo script viene eseguito, i aumenta di 1 il suo valore, viene controllato poi che non superi 9 (in quel caso viene re-impostata a 1) ed infine viene duplicato il movieclip logo1 assegnando il nome dinamico "logo" + i (e depth uguale a i).Ecco qua, tutto il mouse trailer si riconduce a questo piccolissimo script.Adesso mancano solo alcune piccole cose...Lo script appena visto va inserito nel 2° keyframe del filmato. Nel 1° inseriremo:

//Rendo trascinabile il logostartDrag ("logo1", true);

//Inizializzo la variabile ii = 0;

per rendere trascinabile il movieclip logo1 ed inizializzare la variabile i. Aggiungiamo poi un 3° keyframe ed inseriamo un gotoAndPlay(2); in modo da ripetere continuamente lo script inserito al keyframe 2.

A questo punto non bisogna fare altro che testare il filmato. :-)

Prefazione

inserita sabato 16 marzo 2002 Visite: 61149

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

http://www.w3.org/People/Raggett/tidy/

http://www.adobe.com/products/photoshop/main.html

http://www.macromedia.com/software/flash/

http://flash-mx.html.it/guide/zip/negatyve_sito/sito/index.htm

http://flash-mx.html.it/guide/zip/negatyve_sito/sorgenti.zip


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)

Introduzione


Prima di iniziare la costruzione di un sito web, è buona cosa stilare un progetto che ne comprenda gli scopi, il tipo di utilizzo, di aggiornamento, di utenti a cui farà riferimento.Tralasciando i particolari, trattati diffusamente nei corsi e nelle lezioni per webmaster di HTML.it, mi limiterò ad analizzare alcuni punti focali, e di immediata comprensione.

Dimensioni e proporzioni

Per motivi che mettiamo da parte (assolutamente inventati), decidiamo che il sito debba avere delle proporzioni particolari: la larghezza del filmato deve essere i 7/3 dell'altezza. Vogliamo quindi che il sito si espanda in orizzontale più che in verticale.

Preciso che non esiste una dimensione "giusta", 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,

http://flash-mx.html.it/articoli/view_articolo.asp?idarticolo=19

http://flash-mx.html.it/guide/zip/negatyve_sito/files.zip

http://flash-mx.html.it/guide/zip/negatyve_sito/sorgenti.zip

http://www.dsg4.com/04/index.shtml

http://www.miniml.com/

http://www.miniml.com/

http://www.flashkit.com/

http://go.to/rimela


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.

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

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 mouseonClipEvent (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 totaliif (_currentframe>(_totalframes/2)) {// riproduci il movieclip a partire dal frame corrispondente al// numero dei frame totali meno il frame attualegotoAndPlay (_totalframes-_currentframe);// altrimenti (e quindi il frame corrente è minore della metà)} else {// riproduci dal frame correnteplay ();}// setta la variabile "aperto" come veraaperto = 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 totaliif (_currentFrame<(_totalFrames/2)) {// riproduci il movieclip dal frame "totali" meno il frame attualegotoAndPlay (_totalframes-_currentframe);// altrimenti} else {// riproduci dal frame attualeplay ();}// setta la variabile "aperto" come falsaaperto = 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:

La funzione


Adesso non rimane che definire la funzione che permetterà al menu di fare qualcosa. Come abbiamo già detto, la pressione di uno dei pulsanti, richiamerà una funzione che si chiama comandi, alla quale come variabile viene inviato il nome di istanza del movieclip PulsanteFuori che contiene il pulsante. In pratica, se premo sul movieclip "homepage", alla root arriverà il comando:

comandi("home");

L'aver usato una funzione, ci permette di non dover più toccare i pulsanti, per cambiare le azioni corrispondenti: basterà modificare la funzione per rispondere alle nostre esigenze.

Selezioniamo il primo frame del filmato sulla timeline principale, e apriamo il pannello Azioni: scriviamo il seguente codice

function comandi (nome) {loadMovieNum (nome + ".swf", 1);}

Molto semplicemente la funzione riceve come parametro il nome di istanza del movieclip che contiene il pulsante, e assegna questo parametro alla variabile nome. Quindi carica un filmato esterno, sul livello 1, che si chiama come la variabile più la stringa ".swf": in parole povere, se clicco il pulsante dentro il movieclip slide, la funzione carica sul livello 1 il filmato slide.swf.D'altronde, premendo più volte lo stesso pulsante, caricheremmo altrettante volte lo stesso filmato: effetto decisamente sgradevole, e oltretutto non innocuo. Se infatti stiamo utilizzando il filmato esterno, e lo carichiamo di nuovo, perdiamo tutte le variabili e le impostazioni raggiunte a quel momento.


Inseriamo quindi un semplice controllo sul nome della variabile. Se è la stessa, allora non caricare di nuovo: o meglio, carica solo se è diversa dall'ultima impostata. Inoltre, dobbiamo inserire un nome di partenza: quello della homepage, in modo che all'avvio del filmato, sia come se avessimo premuto il pulsante "homepage".

ultimo = "home";function comandi (nome) {if (nome != ultimo) {loadMovieNum (nome + ".swf", 1);}ultimo = nome;}

In questo modo con la prima riga abbiamo impostato il valore della variabile ultimo, che conterrà il nome dell'ultimo pulsante premuto. Al richiamo della variabile, avviene un confronto tra ultimo e nome: se sono diversi, viene caricato il filmato esterno corrispondente, e il valore di ultimo diventa quello di nome.

Adesso però abbiamo un problema: premendo home, non abbiamo alcun filmato da caricare, dal momento che home corrisponde al filmato principale. Allora, una volta verificato che ultimo sia diverso da nome, se il pulsante premuto è home, allora scarichiamo il livello 1, altrimenti carichiamo il filmato esterno corrispondente.

ultimo = "home";function comandi (nome) {if (nome != ultimo) {if (nome == "home") {unloadMovieNum (1);} else {loadMovieNum (nome+".swf", 1);}ultimo = nome;}}

Fin qui ci siamo. Ora dobbiamo tornare al fatto che, una volta premuto un pulsante, questo si ferma al frame 11, in modo che sia completamente bianco, ed escludendo le animazioni di rollover e rollout. Quindi, quando premiamo un pulsante, quello premuto precedentemente, fisso sul bianco, deve tornare gradualmente al giallo. Inoltre, come per la variabile ultimo, già impostata all'avvio del filmato, dobbiamo impostare il pulsante homepage come se fosse già stato premuto.

Per questo motivo, ricapitolo come raggiungere i pulsanti contenuti nel movieclip menu. Sullo stage abbiamo il movieclip menu con nome di istanza menu: questo contiene i sei movieclip pulsanteFuori, con i nomi di istanza riferiti alle sezioni. Dentro ognuno di questo movieclip, c'è il movieclip pulsanteDentro, nome di istanza interno, all'interno del quale si svolge l'animazione di rollover. Ad ognuno dei movieclip pulsanteDentro, è associato lo script per l'animazione, e anche il controllo sulla pressione del movieclip stesso.

Come abbiamo già visto, il movieclip è fermo al frame 11, e bloccato dalla variabile premuto, che è vera. Dobbiamo quindi, alla pressione di un nuovo pulsante, riprendere la riproduzione dell'animazione del pulsante premuto precedentemente, e far tornare falsa la variabile premuto.

Se ad esempio l'ultimo pulsante premuto era home, e vogliamo ripristinarlo, il percorso che ci interessa sarà:

menu.home.interno

per avviare la riproduzione useremo:

menu.home.interno.play();

per resettare la variabile:

menu.home.interno.premuto = false;

Inoltre useremo una particolare notazione: movieclip[variabile].comandoQuesto 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 11menu[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 precedentementemenu[ultimo].interno.premuto = false;// riavviamone la riproduzionemenu[ultimo].interno.play();ultimo = nome;}}

Lo scrolling


Introduzione

Siamo ancora all'interno del primo filmato, e quello che stiamo per creare è un primo metodo per lo scorrimento del testo. Il nostro scopo è di poter visualizzare, all'apertura del sito, un testo che rappresenti le novità e gli aggiornamenti in relazione alle attività svolte, e la possibilità di scorrerlo tramite pulsanti.

Perché questo progetto sia efficace, vogliamo anche che sia facilmente aggiornabile: il che significa che quando avremo la necessità di modificare il testo, non dovremo più toccare il filmato, ma limitarci a rendere disponibile un file da cui prendere il testo aggiornato.

Il loadVariables

Le variabili

Innanzitutto, spieghiamo come funziona il sistema del caricamento del testo. Il Flash5, tramite il comando loadVariables, ci permette di caricare, all'interno del filmato, le variabili contenute nel file oggetto dell'azione. Questo file può essere di vario tipo, un .php, .asp, un .pl: nel nostro caso sarà un comunissimo file di testo con estensione .txt.

La cosa che comunque rimane invariata, nell'utilizzo di questi diversi file, è il modo in cui devono essere presentate le variabili:

&variabile1=valore1&variabile2=valore2&variabile3=valore3 &...

Come è evidente, le variabili vengono scritte una dopo l'altra secondo uno schema fisso. La "e" commerciale, il nome della prima variabile, il segno uguale e il suo valore: e qui finisce la dichiarazione della prima variabile. Le altre variabili vengono dopo secondo lo stesso schema: variabili divise dalla "&", e nomi e valori uniti dal "=".

Se vogliamo quindi che nel nostro filmato, una volta effettuato il caricamento, sia presente la variabile pippo il cui contenuto è la stringa "flasher incallito", nel nostro file di testo scriveremo semplicemente:


&pippo=flasher incallito

Due appunti fondamentali. Le stringhe che rappresentano il contenuto delle variabili, possono, naturalmente, contenere degli spazi, ma tra il nome della variabile, il segno "=" e il primo carattere della stringa, di spazi non ce ne devono essere.Secondo appunto, tutte le variabili caricate in questo modo, per il plugin del Flash, sono stringhe, anche se contengono esclusivamente numeri. Quindi, se nel file di testo scriviamo:

&pippo=123456

in Flash otteremo il corrispondente di un:

pippo = "123456";

e non di un

pippo = 123456;

Se allora volessimo caricare in Flash la variabile numerica pippo, per poterla trattare, nell'ambiente di lavoro scriveremmo:

pippo = Number(pippo);

Nel nostro caso, visto che non abbiamo bisogno di valutare variabili numeriche, il file di testo, che si chiamerà news.txt, sarà scritto così:

&news=bla bla bla contenuto degli aggiornamenti bla bla bla....

La sintassi

Vediamo quali sintassi usare, e distinguiamo due comandi a seconda del target del caricamento.Se ad esempio vogliamo che la nostra variabile testo abbia valore a livello della _root, la sintassi sarà:

loadVariablesNum("news.txt", 0);

In questo modo, è come se avessimo scritto:

_root.news = "bla bla bla contenuto degli aggiornamenti bla bla bla....";

Invece, se vogliamo che la variabile venga caricata all'interno di un movieclip, potremo associare al movieclip stesso :

loadVariables("news.txt", this);

dove this indica al player che il file di testo deve essere caricato nel movieclip che chiama il loadVariables. Se il movieclip in questione ha come nome di istanza scorrimento, è come se avessimo scritto:

_root.scorrimento.news = "bla bla bla contenuto degli aggiornamenti bla bla bla....";

Questo è esattamente quello che faremo: caricheremo il file di testo e le variabili in esso contenute, all'interno di un movieclip. Questo ci serve per poter effettuare un controllo molto particolare: quello dell'avvenuto caricamento delle variabili.Uno degli eventi propri dei movieclip, in Flash 5, è il data. Sottoponendo un comando a questo evento, verrà eseguito solo quando le variabili saranno state caricate. Quindi al nostro movieclip assoceremo:

onClipEvent (load) {loadVariables ("news.txt", this);}onClipEvent (data) {...comando...}

Il nostro scopo è, all'apertura del sito, di chiamare il caricamento delle variabili. Quando, e solo quando le variabili saranno state caricate, visualizzeremo gli strumenti per lo scorrimento, testo e pulsanti.

Il movieclip

Il campo di testo

Apriamo il file flash5.fla, e visualizziamo la libreria.

Premiamo il pulsante con il simbolo + in basso a sinistra, e aggiungiamo un movieclip che chiameremo news.

Dentro questo movieclip creiamo tre layer di due frame ciascuno, dal basso verso l'alto con i nomi testo, titolo e pulsanti

Nel layer "titolo", mettiamo in entrambi i frame (basta nel primo, e poi creare il secondo con F5), un campo di testo con la scritta "ultime novità": poi, tramite il pannello Align, posizioniamo il campo di testo con il vertice superiore sinistro al centro del movieclip.

Nel layer "testo", invece posizioniamo un movieclip composto da due frame: nel primo ci sarà la scritta "caricamento in corso...", il secondo sarà vuoto. Questo ci darà una scritta lampeggiante nell'attesa del caricamento.Passiamo al secondo frame del layer testo: selezioniamo lo strumento Text, dal pannello Text Options lo settiamo come dinamico e multilinea, e disegniamo il campo di testo in cui visualizzeremo il contenuto del file esterno. Selezioniamo il campo di testo, e ancora nel pannello Options ne settiamo tutte le proprietà:

Il Font usato sarà il _sans. In questo modo non avremo bisogno di incorporare alcun carattere, dal momento che il player ne conserva già le informazioni. Le dimensioni saranno 10pt, e il colore bianco (per contrastare la banda di colore scuro al centro del filmato). Come abbiamo già detto, il testo sarà dinamico e multilinea: ticchiamo anche la casella HTML (ci permetterà di usare alcuni tag html nel testo) e Word Wrap (manderà automaticamente a capo il testo alla fine della casella). Infine, come variabile associamo news: infatti questa è la variabile che abbiamo definito nel file di testo.

Torniamo alla timeline principale, e dalla libreria trasciniamo un'istanza del movieclip news sullo stage. La posizioniamo al centro verso destra, e gli associamo:

onClipEvent (load) {stop ();loadVariables ("news.txt", this);}onClipEvent (data) {nextFrame ();}

Il funzionamento è già molto chiaro: all'avvio del filmato, il movieclip news si fermerà al primo frame (caricamento) e caricherà il file news.txt. Quando il file sarà stato caricato e le variabili saranno definite, il movieclip si sposterà al secondo frame, dove è presente la casella di testo che conterrà gli aggiornamenti.

Ora andiamo al secondo frame del layer "pulsanti" (il primo resterà vuoto), e disegniamo in alto a destra i pulsanti per lo scorrimento.

I pulsanti

Come previsto nel nostro progetto, vogliamo evitare il più possibile l'utilizzo di pulsanti veri e propri, sostituendoli con movieclip: questo passaggio ci è utile anche per un altro motivo, evitare l'uso di un ulteriore movieclip per rendere lo scorrimento continuo.

(Parto dal presupposto che chi legge conosca già le basi dello scrolling di testo in Flash5, e il significato delle proprietà scroll e maxscroll, 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;}}

Come impostare i tag

inserita giovedì 21 marzo 2002 Visite: 34373

In Flash, è possibile utilizzare alcuni dei tag html all'interno di campi di testo dinamici opportunamente impostati. Come abbiamo già visto, il campo di testo in cui visualizzare gli aggiornamenti del nostro sito, era così settato:

Nella figura di destra, è ticcata la casella HTML: ed è tutto ciò che ci serve.

I tag HTML

I tag che si possono utilizzare non sono tantissimi, ma bastano e avanzano per i nostri scopi. A parte i tag e (che funzionano anche in relazione alle dimensioni dei caratteri usati), possiamo usare il per mandare a capo, il per i colori, le dimensioni, e le Font vere e proprie, l' <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 capitolo 7 di questo manuale, “Dizionario di ActionScript”, contiene una descrizione dettagliata per ogni elemento di ActionScript.

come output otteniamo nel campo di testo:

Il capitolo 7 di questo manuale, “Dizionario di ActionScript”, contiene una descrizione dettagliata per ogni elemento di ActionScript.

Se aggiungiamo anche un , da:

Il capitolo 7 di questo manuale, “Dizionario di ActionScript”, contiene una descrizione dettagliata per ogni elemento di ActionScript.

otteniamo:

Il capitolo 7 di questo manuale, “Dizionario di ActionScript”,contiene una descrizione dettagliata per ogni elemento di ActionScript.

Con il tag impostiamo le caratteristiche dei caratteri, con le dimensioni in punti. Le parole "Dizionario di Actionscript", con le opportune modifiche, da:

Dizionario di Actionscript

nel file di testo, in output diventano:

Dizionario di Actionscript

Con <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 , cioè a capo con riga vuota in mezzo. Questo però vale solo per alcuni browser, e su alcune piattaforme: per evitare quindi problemi di qualsiasi tipo, è meglio scrivere il file di testo senza andare mai a capo con Invio, usando invece solo il .

• Cambiando le dimensioni dei caratteri all'interno di uno stesso campo di testo, talvolta si hanno delle spiacevoli ripercussioni a livello delle righe. Se infatti tariamo le dimensioni del campo per contenere un numero intero di righe, e poi ingrandiamo una riga con il tag , l'ultima potrebbe risultare tagliata a metà.

• Non tutti i caratteri possono essere importati scrivendoli semplicemente nel campo di testo. Ad esempio, non posso scrivere:

testo=Flash & Actionscript;

dal momento che la e commerciale, "&", ha come significato la divisione delle variabili. Quindi il lettore percepisce come "testo" solo la prima parte, mentre non visualizza la seconda. Per evitare questo inconveniente, bisogna utilizzare la tecnica dell'URL ENCODING, che consiste nel sostituire alcuni caratteri con altri.

Nell'esempio di questo sito, gli aggiornamenti sono quelli presi dalla homepage di Flash5.it alla data in cui ho scritto questa sezione. Nei collegamenti, poichè Flash5.it è costruito in ASP, sono presenti le e commerciali per identificare i file ASP. Per poter passare questi caratteri, ho dovuto sostituirli sempre con %26. Quindi, avrei scritto la frase sopra come:

testo=Flash %26 Actionscript;

• Flashguru sui tag HTML.

Stampare


Premessa

Flash non è troppo flessibile per quanto riguarda la stampa. Ha alcuni vantaggi enormi, primo fra tutti il poter avere come oggetto forme vettoriali, e non solo raster, ma anche alcune limitazioni, come quella in relazione al

http://www.actionscripts.org/showMovie.php?id=13

http://www.flashguru.co.uk/

http://www.macromedia.com/support/flash/ts/documents/url_encoding.htm

http://flash-mx.html.it/

colore di fondo.

Non affronterò il problema in modo completo (lo farò in altra sede), ma mi limiterò a spiegare la procedura per ottenere un particolare tipo di stampa, probabilmente l'unico davvero necessario.

Procedura

Finalità

Innanzitutto bisogna stabilire cosa stampare: in questo caso abbiamo optato per una pagina con i loghi (in vettoriale), alcune righe con i termini del copyright in relazione all'uso dei contenuti del sito, e l'elenco degli autori e dello staff.

Partiamo dal presupposto che Flash dà come sfondo alle proprie stampe il colore di fondo del filmato. Per questo motivo, siamo praticamente costretti a usare il bianco. Infatti, se il colore di fondo è diverso dal bianco, all'atto della stampa la pagina verrà colorata con quello impostato: solo che se l'utente non setta volontariamente, quando si apre la finestra di dialogo con le opzioni della propria stampante, l'area di stampa massima ( e talvolta non basta neanche questo), attorno all'oggetto rimarrà comunque una cornice bianca: potrebbe anche andare bene, in alcuni casi, ma generalmente è un effetto abbastanza sgradevole.

Altra cosa da considerare è l'area di stampa, e le proporzioni del disegno rispetto ad essa. Per questo motivo useremo come base le dimensioni di un comune foglio A4.

Infine non avremo la necessità di eliminare il comando stampa dal menu contestuale del pulsante destro del mouse, dal momento che rimuoveremo tutto il menu, e per stampare utilizzeremo un pulsante.

L'oggetto

Il Flash non stampa propriamente degli oggetti, bensì dei frame. Un frame, per essere stampabile, deve essere identificato tramite l'etichetta (label), che deve avere un nome particolare: #p. Se nessun frame è etichettato in questo modo, non verrà stampato niente. Se più frame hanno questa etichetta, verranno stampati tutti quelli etichettati.

Questa particolarità, nasconde evidentemente un problema di non poco conto. Se infatti voglio rendere stampabili più frame, ma ad esempio poterli stampare separatamente (a scelta dell'utente), non li posso identificare in alcun modo.

Per fortuna, il problema sorge solo con i frame appartenenti alla stessa timeline: se quindi posiziono i frame stampabili in timeline separate, potrò ottere anche stampe dei singoli frame. Per ottenere una timeline separata, il modo più semplice è di creare un movieclip. Con il comando print, quindi, chiederò di stampare la timeline del movieclip in questione, all'interno del quale ci sarà un solo frame con l'etichetta #p. Questo significa anche che se voglio rendere stampabili più documenti, e poterli stampare separatamente, dovrò creare tanti movieclip quanti sono i documenti.

L'area di stampa

Per decidere quali saranno le dimensioni che avranno gli oggetti rispetto alla pagina sulla quale verranno stampati, ho bisogno di creare un altro frame. Questo frame dovrà avere un'etichetta particolare, #b, e contenere un oggetto che mi rappresenterà l'area di stampa. La proporzione tra il contenuto della stampa e la pagina stampata, sarà determinata dalla proporzione tra il contenuto di questi due frame.

Vediamo qualche esempio per capire meglio cosa significa. Nel frame etichettato come #p (il frame da stampare), ho un cerchio. Nel frame etichettato come #b, ho un rettangolo. Consideriamo che il cerchio rimanga di dimensioni costanti, in queste prove, e che a cambiare siano solo le dimensioni del rettangolo.

Il movieclip

Apriamo il file flash5.fla, e visualizziamo la libreria. Clicchiamo sul pulsante + in basso a sinistra, e aggiungiamo un movieclip che chiameremo pagina. Aggiungiamo un altro layer, in modo da avere due layer di un frame ciascuno: nel frame in basso disegniamo un rettangolo di qualsiasi colore (non verrà stampato, quindi può essere più utile che sia bianco) di dimensioni in pixel 210x290, esattamente come un foglio A4. Posizioniamo l'angolo superiore sinistro del rettangolo sul centro del movieclip, e blocchiamo il layer.

Nel frame in alto disegniamo i contenuti che appariranno nella pagina stampata, basandoci, per le posizioni e le dimensioni, sul rettangolo presente nel layer sottostante. Quando abbiamo creato tutto il contenuto, nel layer in alto aggiungiamo un frame vuoto con F7. Sblocchiamo il layer inferiore, selezioniamo il rettangolo, tagliamolo e incolliamolo nel secondo frame del layer superiore, cancelliamo il layer inferiore.

Adesso abbiamo un unico layer di due frame. Nel primo frame, abbiamo i contenuti, nel secondo, il rettangolo. Etichettiamo il primo frame con #p, e il secondo con #b. La posizione dei due frame è ininfluente, basta che non siano sovrapposti, e così è la loro durata nella timeline. Nel fla d'esempio, infatti, ho posizionato i due frame un po' distanziati, e allungati nella timeline perché si potessero leggere le etichette: il risultato di stampa è identico.

Torniamo alla timeline principale del filmato, e aggiungiamo un layer: in questo layer trasciniamo dalla libreria un'istanza del movieclip pagina. Questo movieclip sarà scandalosamente enorme per il nostro filmato, ma le sue dimensioni e la sua posizione non avranno alcuna influenza sulla stampa. Per cui riduciamolo volentieri anche a un decimo delle sue dimensioni originali, e nascondiamolo spostandolo al di fuori dello stage. Infine selezioniamolo ancora una volta, e diamogli pagina come nome di istanza.

Il comando

print ("_root.pagina", "bmovie");

Cosa significa questo comando? Su print non c'è niente da dire, essendo l'azione che genera la stampa; _root.pagina non è altro che il percorso del movieclip all'interno del quale è presente il frame da stampare. bmovie è invece l'argomento che specifica che tipo di stampa vogliamo ottenere.Al posto di bmovie potevamo avere altre due opzioni, bframe e bmax. Nel primo caso, avrebbe considerato come area di stampa tutta l'area del frame stampabile, scalando gli oggetti per riempire la pagina in uscita, mentre nel secondo caso la somma dei riquadri di delimitazione degli oggetti presenti in tutti i frame etichettati come #p.

Noi scriviamo invece bmovie, che considera come area di stampa il riquadro di delimitazione degli oggetti presenti nel frame etichettato come #b (il nostro rettangolo, appunto).

Nel caso avessimo voluto stampare delle immagini raster, invece, avremmo potuto usare un altro comando:

printAsBitmap ("_root.pagina", "bmovie");

Le differenze tra i due comandi sono molto importanti: il primo stampa alla massima risoluzione possibile, mentre il secondo a quella del filmato. Inoltre printAsBitmap permette di mantenere nella stampa gli effetti alpha, mentre il semplice print non può.

Il pulsante

Nel nostro caso, il pulsante sarà nuovamente un movieclip. Con lo strumento testo, scriviamo sullo stage la frase che risulterà cliccabile. Selezioniamola cliccando una volta con il mouse, poi convertiamola in movieclip premendo F8. Torniamo alla timeline principale, selezioniamo il movieclip con la scritta, apriamo il pannello azioni e scriviamo:

onClipEvent (load) {colore = new Color(this);}onClipEvent (mouseMove) {if (this.hitTest(_root._xmouse, _root._ymouse, false)) {if (!premuto) {sopra = true;colore.setRGB(0xFFCC33);}} else {sopra = false;if (!premuto) {colore.setRGB(0x000000);}}updateAfterEvent();}onClipEvent (mouseDown) {if (this.hitTest(_root._xmouse, _root._ymouse, false)) {premuto = true;colore.setRGB(0xFF9900);}updateAfterEvent();}onClipEvent (mouseUp) {premuto = false;if (sopra) {colore.setRGB(0xFFCC33);print ("_root.pagina", "bmax");} else {colore.setRGB(0x000000);}updateAfterEvent();}

Senza ripetere per l'ennesima volta come simulare il rollover con un movieclip, notiamo semplicemente il comando print sottoposto al mouseUp, cioè al rilascio del pulsante sinistro del mouse sopra la scritta: infatti solo quando si è sul movieclip, la variabile premuto è vera.

Adesso però vogliamo aggiungere una semplice gif rappresentante una stampante vicino alla scritta, e vogliamo che sia anche cliccabile, come la scritta. Non possiamo inserirla nel movieclip, altrimenti cambierebbe colore al rollover. Allora torniamo alla timeline principale, e posizioniamoci nel frame con il pulsante per la stampa. Andiamo al menu File/import, cerchiamo la nostra gif, e importiamola nel filmato: la selezioniamo, premiamo F8 e la convertiamo in movieclip. Torniamo per l'ultima volta alla timeline principale, selezioniamo la "stampante", e diamo stampante come nome di istanza.

Riprendiamo in mano lo script della scritta. Aggiungiamo due pezzettini:

onClipEvent (load) {colore = new Color(this);}onClipEvent (mouseMove) {if(this.hitTest(_root._xmouse,_root._ymouse,false)|| _parent.stampante.hitTest(_root._xmouse, _root._ymouse, true)) {if (!premuto) {sopra = true;colore.setRGB(0xFFCC33);}} else {sopra = false;if (!premuto) {colore.setRGB(0x000000);}}updateAfterEvent();}onClipEvent (mouseDown) {if (this.hitTest(_root._xmouse, _root._ymouse, false)|| _parent.stampante.hitTest(_root._xmouse, _root._ymouse, true)) {premuto = true;colore.setRGB(0xFF9900);}updateAfterEvent();

}onClipEvent (mouseUp) {premuto = false;if (sopra) {colore.setRGB(0xFFCC33);print ("_root.pagina", "bmax");} else {colore.setRGB(0x000000);}updateAfterEvent();}

Adesso, la scritta cambia colore al rollover su entrambi gli oggetti, ed entrambi, al click del mouse, avviano la stampa.

Barra di scorrimento testo


Introduzione

Iniziamo adesso la costruzione della prima delle sezioni esterne del nostro sito. Questa sezione, come previsto dal menu principale, sarà contenuta in un filmato dal nome testo.swf: per cui creiamo un nuovo documento flash, 700x300, frame rate 24 fps. Andiamo al menu File/Open as Library (apri come libreria), e apriamo il file flash5.fla. Dalla libreria che appare (con il fondo grigio), trasciniamo nella libreria del nostro nuovo fla il movieclip base. Salviamo con il nome testo.fla.

Scorrimento

Quello che vogliamo creare, in questa sezione, è uno scorrimento del testo particolare: oltre ai semplici pulsanti per lo scroll, avremo anche una barra di scorrimento a dimensioni fisse, e la possibilità di spostarci velocemente nel testo cliccando sulla base della barra. Altra cosa importante, potremo cambiare il contenuto del campo di testo, attingendo da due file txt esterni.

Movieclip scorrimento

Apriamo il file testo.fla, e visualizziamo la libreria. Clicchiamo il pulsante + in basso a sinistra del pannello, e aggiungiamo un nuovo movieclip con il nome scorrimento. All'interno del movieclip scorrimento, creiamo sei layer come in figura.

Nel primo frame del layer testo, inseriamo la scritta "caricamento dati...". La selezioniamo, e la convertiamo, tramite F8, in un movieclip con il nome caricamento. All'interno del movieclip caricamento, inseriamo un secondo frame vuoto (avremo una scritta lampeggiante durante l'attesa), poi torniamo al movieclip scorrimento.Aggiungiamo un secondo frame a tutti i layer (nel primo frame, solo il layer testo avrà un contenuto).

Ombra

Aggiungiamo alla libreria un nuovo movieclip, e chiamiamolo ombra. All'interno di questo movieclip, con l'angolo superiore sinistro al centro del movieclip stesso, disegniamo un rettangolo 130x5.


Selezioniamo il rettangolo, e andiamo al pannello Fill (Riempimento). Impostiamo il riempimento su Linear Gradient, attribuiamo lo stesso colore ad entrambi gli indicatori (#333333), e spostiamo quello di sinistra in modo da essere quasi al centro dello slider.

A questo punto andiamo al pannello Mixer, e abbassiamo l'indicatore dell'alpha fino allo 0 o poco più sopra.

A questo punto abbiamo inserito il gradiente desiderato, ma non con la direzione giusta. Clicchiamo sullo strumento Paint Bucket, e poi su Transform Fill.

Clicchiamo sul rettangolo, e spostiamo ,tramite le apposite maniglie, il riempimento in modo da ottenere questo:

La barra

Aggiungiamo un altro movieclip, che chiameremo barraScroll. All'interno del movieclip, trasciniamo dalla libreria un'istanza del movieclip rettangolo, tramite il pannello Info diamole come dimensioni 10 pixel in larghezza e 120 in altezza, e posizioniamola con l'angolo superiore sinistro al centro del movieclip.

La freccia

Aggiungiamo un nuovo movieclip, nome freccia, al nel quale disegniamo un triangolino a pixel con un vertice verso l'alto.

Il pulsante

Aggiungiamo ancora un movieclip alla libreria, nome pulsante. In questo movieclip, creiamo due layer di un frame ciascuno, ai quali daremo come nomi, dal basso, base e freccia. Nel layer base, trasciniamo dalla libreria un'istanza del movieclip base, al quale diamo come dimensioni 10 pixel in larghezza e altezza, e come nome di istanza, ancora base. Nel layer sopra inseriamo invece un'istanza del movieclip freccia, alla quale diamo freccia come nome di istanza.

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

onClipEvent (load) {coloreRettangolo = new Color(rettangolo);coloreCornice = new Color(cornice);}

Avremo così inizializzato due istanze dell'oggetto Color, relative ai contenuti del movieclip base, cioè rettangolo e cornice.

Scroller

Aggiungiamo un ultimo movieclip, al quale diamo come nome scroller. Nell'unico frame, trasciniamo dalla libreria un'istanza del movieclip pulsante, e la posizioniamo con il vertice superiore sinistro sul centro del movieclip. Come nome di istanza diamo pulsante.

Unione

Adesso abbiamo tutti gli elementi che ci servono. Doppio click, nella libreria, sul movieclip scorrimento. Andiamo al secondo frame del layer barra, e trasciniamo dalla libreria un'istanza del movieclip barraScroll. Diamole come nome di istanza barra, e posizioniamo il vertice superiore sinistro sul centro del movieclip. Tramite il pannello Effect, diamo come tinta il colore #999999.

Nel secondo frame del layer pulsanti, posizioniamo due istanze del movieclip pulsante, sopra la barra, una con il lato inferiore coincidente con quello superiore della barra (e quindi a coordinate 0,-10), e uno con quello inferiore, coincidente con il fondo della barra. Al movieclip di sopra diamo come nome di istanza su, a quello di sotto giu.

Infine, nel secondo frame del layer scroller, trasciniamo un'istanza del movieclip omonimo, e la posizioniamo alle coordinate 0,0. L'interno del movieclip scorrimento dovrebbe apparire così:

Adesso nel secondo frame del layer "sfondo", trasciniamo un'istanza del movieclip base, diamo le dimensioni volute per il campo di testo (nel nostro caso, 330x140), e posizioniamola a sinistra della barra, e all'altezza del pulsante su. Nel layer ombra, posizioniamo due istanze del movieclip ombra, che coprano il lato superiore e sinistro del movieclip base, con il gradiente verso destra e verso il basso. Infine, nel layer testo, disegniamo la casella vera e propria, le cui impostazioni saranno:

Graficamente, l'interno del movieclip apparirà così:

I pulsanti

Andiamo alla timeline principale, e creiamo tre livelli. In quello più in basso, trasciniamo un'istanza del movieclip scorrimento, alla quale associamo:

onClipEvent (load) {fscommand ("allowscale", "false");stop();loadVariables ("flash.txt", this);}onClipEvent (data) {nextFrame ();}

codice di cui abbiamo già visto il significato, per il caricamento del file di testo esterno.

Nel secondo layer, che chiameremo "pulsanti", scriviamo, in due distinte caselle di testo statico, "Introduzione a Flash 5", e "Introduzione ad Actionscript". Selezioniamo le singole caselle di testo, prima una poi l'altra, e convertiamole in due distinti movieclip. Al primo diamo come nome di istanza flash, al secondo actionscript (flash.txt e actionscript.txt saranno i nomi dei due file di testo esterni).Al primo associamo:

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

al secondo:

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

}

I due codici sono perfettamente identici, tranne che per un particolare: il primo imposta il colore del movieclip come arancione (attivo), il secondo come grigio (non attivo). Quello che fa lo script è, alla pressione del tasto sinistro del mouse sul movieclip, richiamare una funzione sulla _root, passando come variabile il nome di istanza del movieclip che l'ha chiamata.

Curso Completo Action Script Flash

Documents

Transcript of Curso Completo Action Script Flash