Sei sulla pagina 1di 88

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

i 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:

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
inserita gioved 18 gennaio 2001 Visite: 36065

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. 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
inserita gioved 18 gennaio 2001 Visite: 32441

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.

Get URL
inserita gioved 18 gennaio 2001 Visite: 36342

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:indirizzo@posta.it" dove al posto di indirizzo@posta.it 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:webmaster@flash5.it"); }

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
inserita gioved 18 gennaio 2001

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

In questo esempio viene richiamato il file loadmovie1.swf e gli viene assegnato il livello 1. Il filmato principale ha valore di li 0. Tutti i filmati caricati, assumono colore di sfondo, frequenza di fotogrammi e dimensioni di questo livello. Quando si carica 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 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 si un brano musicale di sottofondo durante la navigazione. Ora, inserire i files musicali all'interno di un unico movie, comportere aumento delle dimensioni del file .swf esportato. La strada migliore invece un'altra: creare tanti filmati quante sono le basi m disposizione dell'utente. Dentro ognuno di questi filmati, inserire esclusivamente una base musicale. A questo punto, richiama con la base musicale dal filmato principale, questo viene caricato solo alla richiesta di "cambio musica", eliminando quindi il p 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 l'opzione "mute" per interrompere la riproduzione della musica), deve essere scaricato. Per farlo viene utilizzata l'action unloa E' necessario specificare il livello del filmato da scaricare (1 nel nostro primo caso) o il nome del Target nella quale era stato i

Specifica dei target


inserita gioved 18 gennaio 2001 Visite: 40977

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.

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 html Filmato1.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


inserita gioved 18 gennaio 2001 Visite: 35731

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
inserita gioved 18 gennaio 2001 Visite: 32091

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
inserita gioved 18 gennaio 2001 Visite: 31843

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
inserita gioved 18 gennaio 2001 Visite: 31187

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

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


inserita gioved 18 gennaio 2001 Visite: 27395

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 Moltiplicazion e 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


inserita gioved 18 gennaio 2001 Visite: 27301

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:

Scarica questo esempio In questo caso lo script cambia leggermente:


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

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.

Scarica questo esempio Ecco lo script per il bottone Invia:

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

Scarica questo esempio 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

nserita gioved 18 gennaio 2001

Visite: 25399

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:

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


inserita gioved 18 gennaio 2001 Visite: 24683

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. Scarica questo esempio _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
on (release) { setProperty ("", _focusrect, 1); }

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

Scarica questo esempio _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). _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); }

Scarica questo esempio _rotation Imposta il grado di rotazione della clip.

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

dove grado il nome della casella di testo. Scarica questo esempio _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
on (release) { setProperty ("logo", _visible, 1); }

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

dove trasp il nome della casella di testo. Scarica questo esempio _height e _width Per impostare le dimensioni della clip (in pixel).

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

Le propriet dei target: conoscerne il valore


inserita gioved 18 gennaio 2001 Visite: 21621

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:

Scarica questo esempio Le propriet _alpha valore % Percentuale di trasparenza della clip. _totalframes, _framesloaded, _currentframe valore Rispettivamente: 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"). _droptarget valore Indica 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. _focusrect 1|0 Indica se i rettangoli gialli, identificativi dello stato attivo dei bottoni, devono essere visibili oppure no. _width e _height valore Larghezza e altezza in pixel, della clip. _name valore Nome della clip. _quality LOW | MEDIUM | HIGH | BEST Indica il livello di rendering del filmato. _rotation valore Grado di rotazione della clip. _soundbuftime valore Stabilisce il numero di secondi di streaming dell'audio da accumulare nel buffer di memoria prima della riproduzione. Il valore predefinito 5 secondi.

_target valore Nome del target. _url valore Percorso del file .swf contenente la clip. _visible 1|0 Indica se la clip visibile o meno. Il valore 1 indica che la clip visibile, mentre il valore 0 indica che invisibile. _xscale e _yscale valore Percentuale di scalatura della clip specificata come Target. _x e _y valore Posizione sull'asse x e y della clip specificata come Target. _xmouse e _ymouse valore Posizione sull'asse x e y corrente del puntatore del mouse.

Duplicare i MovieClip
inserita gioved 18 gennaio 2001 Visite: 23097

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:

Scarica questo esempio 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.

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


inserita gioved 18 gennaio 2001 Visite: 22237

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: Fullscreen imposta il filmato a tutto schermo (true per attivarlo, false per disattivarlo). Allowscale Se true imposta il filmato nella modalit Mostra tutto. Se false imposta il filmato al 100% delle sue dimensioni senza scalature. Showmenu Se true attiva il men completo al clic del pulsante destro del mouse sul filmato. Se false disattiva la visualizzazione. Exec Esegue un'applicazione all'interno del proiettore (specificare in arguments l'applicazione da eseguire). Quit Chiude il proiettore.

Interazione Flash-JavaScript

nserita gioved 18 gennaio 2001

Visite: 21647

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 FlashJavaScript 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"> <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"> <!--

function ApriFin_DoFSCommand(command, args) { if ( command == "nuova-finestra" ) { window.open(args,'','scrollbars=yes,width=650,height=400'); } }

//--> </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 dobbiamo inserire un altro pezzo di codice:

<SCRIPT LANGUAGE="VBScript"> <!-// Per IE.

Sub ApriFin_FSCommand(ByVal command, ByVal args) call ApriFin_DoFSCommand(command, args)

end sub

//--> </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 Mac PowerPC Windows 3.1 Windows 95/98/NT/2000 No Si Si Si No Si No Si No Si No Si No Si No Si

Internet Explorer 3.0 e superiori Versione 3 Macintosh Versione 4.5 Macintosh Versione 5.0 Macintosh Versione 3 Windows 3.1 Versione 3 Windows 95/98/NT Versione 4 Windows 95/98/NT Versione 5 Windows 95/98/NT/2000 No No Si No

No

Si

No

No

Si

Si

Si

No

No

No

No

No

Si

Si

No

Si

Si

Si

Si

Si

Si

Si

Si

Si

Versione 6 Windows 95/98/NT/2000 Versione 5 Windows 95/98/NT/2000

Si

Si

Si

Si

Si

Si

Si

Si

Scrolling di testo
inserita gioved 18 gennaio 2001 Visite: 27671

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 per capire al meglio le funzioni .scroll e .maxscroll di Flash. Con queste funzioni posla 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 possibile 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 scorrimento Spiegher 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 \t \" \' \\ Detto ci, inserire nel keyframe della casella l'action:
testo = "bla bla bla";

Ritorno a capo Tabulazione Virgolette " Apostrofo ' Barra \

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
inserita gioved 18 gennaio 2001 Visite: 19536

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


inserita gioved 18 gennaio 2001 Visite: 18159

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:

Array Boolean Color Date Key Math MovieClip Mouse

Number Object Selection Audio String XML XMLSocket

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:

attachMovie duplicateMovieClip getBounds getBytesLoaded getBytesTotal getURL globalToLocal gotoAndPlay gotoAndStop hitTest loadMovie
movieClip: Play e Stop

loadVariables localToGlobal nextFrame play prevFrame removeMovieClip startDrag stop stopDrag swapDepths unloadMovie

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


inserita gioved 18 gennaio 2001 Visite: 20397

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:

Scarica questo esempio 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


inserita gioved 18 gennaio 2001 Visite: 18399

MovieClip: swapDepths Il metodo swapDepths() permette di cambiare il livello di sovrapposizione di una clip rispetto alle altre. La sintassi la seguente:
.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.

Scarica questo esempio 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
inserita gioved 18 gennaio 2001 Visite: 18209

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

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:

Scarica questo esempio 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
inserita gioved 18 gennaio 2001 Visite: 17701

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:

Scarica questo esempio

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:

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


inserita gioved 18 gennaio 2001 Visite: 17126

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


inserita gioved 18 gennaio 2001 Visite: 19487

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


inserita gioved 18 gennaio 2001 Visite: 14371

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


inserita gioved 18 gennaio 2001 Visite: 15583

Conoscere la data corrente Per 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 Date new Date(); dat = new Date(); //Restituzione delle informazioni gg = 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 italiana data_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 corrente Per 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 Date new Date(); dat = new Date(); //Restituzione delle informazioni hh = dat.getHours(); mn = dat.getMinutes(); ss = dat.getSeconds(); //Formatto l'ora ora_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 settimana Utilizziamo 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 giorno giorno = dat.getDay(); //Assegno il nome in base al numero del giorno if (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:

Scarica questo esempio Ora di Greenwich in base UTC Flash 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 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


inserita gioved 18 gennaio 2001 Visite: 16543

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 puntatore Mouse.hide(); //Rendo trascinabile il movieclip freccia.startDrag(true);

Ecco cosa succede:

Scarica questo esempio Per interrompere il trascinamento e visualizzare il puntatore standard, basta inserire:
//Interrompo il trascinamento freccia.stopDrag(); //Visualizzo il puntatore di sistema Mouse.show();

Premessa
inserita gioved 18 gennaio 2001 Visite: 16355

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

nserita gioved 18 gennaio 2001

Visite: 18670

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 oggetto Si 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 oggetto Stessa 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 variabile Volendo 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 virgola In Flash il punto e virgola, indica la fine di una istruzione. Se viene omesso, lo script viene comunque eseguito normalmente senza errori.

Parentesi graffe Le 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();
}

Commenti Come in JavaScript, possibile inserire commenti con la sintassi della doppia barra "//":
//Questo un commento

Le funzioni
inserita gioved 18 gennaio 2001 Visite: 17649

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:
Boolean escape eval false getProperty getTimer getVersion globalToLocal hitTest int isFinite isNaN keycode localToGlobal maxscroll newline Number parseFloat parseInt random scroll String targetPath true unescape

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:

Scarica questo 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:

Scarica questo esempio 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


inserita gioved 18 gennaio 2001 Visite: 16398

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:
//Imposto l'oggetto Utenti utenti.nome = "Giuseppe"; utenti.cognome = "Bianchi"; utenti.citta = "Milano"; //Visualizzo le informazioni in Output trace ("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
inserita gioved 18 gennaio 2001 Visite: 17304

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...while L'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...in
Nell'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: Paolo cognome: Rossi citta: Rimini


Il loop quindi, stato eseguito per ogni propriet dell'oggetto utenti. break e continue Le 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
inserita gioved 18 gennaio 2001 Visite: 16352

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'array utenti = new Array(); //Inserisco i nomi degli utenti utenti[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 allinizio della matrice e ne restituisce la nuova dimensione.

Come propriet invece abbiamo:

length Restituisce le dimensioni della matrice.

Gli Array: metodi


inserita gioved 18 gennaio 2001 Visite: 14767

Alcuni metodi (e l'unica propriet) dell'oggetto Array meritano un'analisi pi approfondita. Ecco quali... La propriet length Tramite 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

concat Per concatenare 2 o pi matrici, generandone una nuova:


//Creo gli array nomi = new Array("Paolo", "Giuseppe", "Marco"); cognomi = new Array("Rossi", "Bianchi", "Verdi"); //Concateno gli array utenti = nomi.concat(cognomi); //E' stata cos creata la matrice //["Paolo", "Giuseppe", "Marco", "Rossi", "Bianchi", "Verdi"]

join Per esportare un'array in stringa viene usato join che permette di scegliere il separatore da utilizzare tra gli elementi della matrice:
//Creo l'array nomi = 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. sort Per ordinare gli elementi di una matrice in modo crescente o decrescente:
// Creo l'array nomi = new Array("Paolo", "Giuseppe", "Marco"); //Ordino la matrice utenti = nomi.sort(); //La variabile utenti uguale a "Giuseppe,Marco,Paolo"

L'oggetto Color
inserita gioved 18 gennaio 2001 Visite: 14938

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:

Scarica questo esempio 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 setRGB Ritorniamo 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). getRGB Il metodo getRGB restituisce il valore RGB dell'ultimo setRGB effettuato (valore restituito in stringa non esadecimale). setTransform setTransform 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. getTransform Per concludere, il metodo getTransform restituisce le informazioni sull'ultima configurazione di colore effettuata tramite setTransform.

L'oggetto Sound
inserita gioved 18 gennaio 2001 Visite: 18108

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:

Associa il suono specificato nell'argomento; 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.
attachSound getPan

Scarica questo esempio Creazione dell'oggetto Per 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. start e stop Per avviare ed interrompere la riproduzione di un file sonoro.
//Creo l'oggetto loop = new Sound(suono); //Inizia la riproduzione loop.start(); //Si interrompe la riproduzione loop.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 getPan Per 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.
//Creo l'oggetto loop = new Sound(suono); //Imposto l'audio nella cassa sinistra loop.setPan(-100); //Imposto l'audio nella cassa destra loop.setPan(100); //Imposto l'audio in modo bilanciato loop.setPan(0); getPan invece, come avrete capito, restituisce il valore, compreso tra -100 e 100, dell'ultima chiamata di setPan.

setVolume e getVolume Il 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.
//Creo l'oggetto loop = new Sound(suono); //Silenzio loop.setVolume(0); //Troppo rumore ;-) loop.setVolume(100); //Volume adeguato loop.setVolume(50); getVolume restituisce il valore, compreso tra 0 e 100, dell'ultima chiamata di setVolume.

setTransform e getTransform Come 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 da riprodurre 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:

Stere o ll = 100 lr = 0 rr = 100 rl = 0

Mono ll = 100 lr = 100 rr = 0 rl = 0

In questo modo:
//Creo l'oggetto personalizzato suono = { ll:'50',lr:'50',rr:'50',rl:'50' } //Assegno la trasformazione al loop loop.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
inserita gioved 18 gennaio 2001 Visite: 14551

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:

Scarica questo esempio 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); } 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:

BACKSPA CE

INSER T

CAPSLOC K CONTROL DELETEKE Y DOWN END ENTER ESCAPE HOME

LEFT PGDN PGUP RIGHT SHIFT SPACE TAB UP

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. Tasto Codice A 65 B 66 C 67 D 68 E 69 F 70 G 71 H 72 I 73 J 74 K 75 L 76 M 77 N 78 O 79 P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87 X 88 Y 89 Z 90 Tasti sul tastierino numerico Tasto Codice Tasto 0 96 * 1 97 + 2 98 Invio 3 99 4 100 . 5 101 / 6 102 7 103 8 104 9 105 Tasti Funzione Codice 106 107 108 109 110 111 Tasto Codice 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57

Tasto F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Altri tasti

Codice 112 113 114 115 116 117 118 119 120 121 122 123 Codice 8 9 12 13 16 17 18 20 27 32 33 34 35 36 37 38 39 40 45 46 47 144 186 187 189 191 192

Tasto Backspace Tab Canc Invio Maiusc Ctrl Alt Bloc Maiusc Esc Barra spaziatrice Pag Su Pag Gi Fine Home Freccia sinistra Freccia su Freccia destra Freccia gi Ins Canc Guida Bloc Num ;: =+ -_ /? `~ L'oggetto Selection
inserita gioved 18 gennaio 2001

Visite: 14165

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 fuoco I 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 attivo trace (Selection.getFocus()); //Imposto il fuoco sul campo "nome" Selection.setFocus("_level0.nome");

Conoscere la posizione del cursore e della selezione Di 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 testo A 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


inserita gioved 18 gennaio 2001 Visite: 18877

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:

Scarica questo esempio 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... 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 1 i++; //Controllo se "i" supera il numero di movieclip duplicati if (i>9) { i = 1; //Imposto nuovamente a 1 per riprendere il ciclo } //duplico il movieclip duplicateMovieClip ("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 logo startDrag ("logo1", true); //Inizializzo la variabile i i = 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 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)

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 mouse onClipEvent (mouseMove) { // se questo movieclip "tocca" il puntatore del mouse // e la variabile "aperto" false if (this.hitTest(_root._xmouse, _root._ymouse, false) && !aperto) { // se il frame attuale del movieclip maggiore della met dei totali if (_currentframe>(_totalframes/2)) { // riproduci il movieclip a partire dal frame corrispondente al // numero dei frame totali meno il frame attuale gotoAndPlay (_totalframes-_currentframe); // altrimenti (e quindi il frame corrente minore della met) } else { // riproduci dal frame corrente play (); } // setta la variabile "aperto" come vera aperto = true; // altrimenti, se il movieclip non tocca il mouse e "aperto" vera // (e quindi con il mouse sto "uscendo" dal movieclip) } else if (!this.hitTest(_root._xmouse, _root._ymouse, false) && aperto) { // se il frame attuale minore della met dei totali if (_currentFrame<(_totalFrames/2)) { // riproduci il movieclip dal frame "totali" meno il frame attuale gotoAndPlay (_totalframes-_currentframe); // altrimenti } else { // riproduci dal frame attuale play (); } // setta la variabile "aperto" come falsa aperto = false; } }

Come spiegato nella costruzione, il movieclip contiene due animazioni speculari, dal giallo al bianco, dal bianco al giallo. Ad ogni frame della prima animazione, corrisponde un frame nell'altra, che rappresenta l'animazione al contrario a partire dallo stesso grado di giallo. Ad esempio, se mi posiziono con il mouse sul pulsante, inizia la trasformazione del colore: mi tolgo dal mouse,

ed esattamente dal bianco raggiunto torno al giallo. Questo perch rimando al frame corrispondente: se esco quando sono al frame 3, rimando al frame "totali" meno il frame corrente, cio al 19. Se esco al frame 10 (quasi bianco), rimando al frame totali (22) - il corrente (10), e quindi al 12. Cosa da distinguere, per, se sono prima della met, o dopo la met. Questo mi serve a stabilire se sono nella trasformazione di andata o di ritorno. Un caso passo passo: mi posiziono col mouse sul movieclip: il frame attuale il primo, quindi minore della met, e riproduco dal frame corrente. arrivo al frame 5, esco con il mouse dal movieclip: l'animazione salta a totali meno il frame corrente, quindi 22-5=17, e sembra che il pulsante torni giallo dalla stessa gradazione. arrivato al frame 20, torno sul movieclip: questa volta il frame corrente maggiore della met, quindi salto al frame 22-20 = 2 e cos via. L'aggiunta della variabile aperto, associata al movimento del mouse, mi permette di stabilire che se sono sopra il movieclip e ancora non ne sono uscito, non deve considerare lo script di ritorno. Questo perch altrimenti, movendo il mouse sopra il movieclip, avrei un continuo avanti e indietro, e cos anche fuori. Aggiungiamo adesso un'altro pezzo di codice.
onClipEvent (mouseMove) { if (!premuto) { if (this.hitTest(_root._xmouse, _root._ymouse, false) && !aperto) { if (_currentframe>(_totalframes/2)) { gotoAndPlay(_totalframes-_currentframe); } else { play (); } aperto = true; } else if (!this.hitTest(_root._xmouse, _root._ymouse, false) && aperto) { if (_currentFrame<(_totalFrames/2)) { gotoAndPlay(_totalframes-_currentframe); } else { play (); } aperto = false; } } } onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse, false)) { gotoAndStop (11); _root.comandi(_parent._name); premuto = true; } }

A questo punto sottoponiamo l'animazione di rollover e rollout alla verifica della variabile "premuto": se "premuto" falsa, allora c' l'animazione, altrimenti posso muovermi sul pulsante senza che succeda nulla. Quand' che la variabile "premuto" diventa vera, e rimuove l'animazione? Quando si clicca sul pulsante: onClipEvent(mouseDown) significa alla pressione del pulsante sinistro del mouse , e nell'if contenuto il controllo sulla posizione del puntatore (che deve essere sul movieclip). Allora l'animazione si ferma al frame 11 (pulsante completamente bianco), premuto diventa vera, e richiamiamo una funzione che si chiama "comandi", che sta nella root, e alla quale passiamo come parametro il nome di istanza del movieclip che contiene pulsanteDentro (_parent._name). Attualmente il nostro movieclip non annidato in nessun altro movieclip: e noi lo facciamo adesso.

Il menu
Selezioniamo il movieclip sullo stage, gli diamo come nome di istanza interno, e lo convertiamo in un movieclip che, molto originalmente, chiameremo pulsanteFuori. Attualmente abbiamo, sullo stage, il movieclip pulsanteFuori, al cui interno, nell'unico layer e frame, presente il movieclip pulsanteDentro. Trasciniamo sullo stage, dalla libreria, altre 5 istanze del movieclip pulsanteFuori, che allineeremo accanto alla prima. A ciascuna diamo un nome di istanza, composta da una singola parola, e che sar, tranne nel caso del pulsante che porta alla pagina principale, il nome dei filmati esterni che corrispondono alle varie sezioni. Quindi, in ordine da destra a sinistra, home, testo, slide, finestre, scroll, contatti. Adesso abbiamo sullo stage 6 istanze del movieclip pulsanteFuori, con 6 diversi nomi di istanza. Ricordiamo che le sei istanza contengono il movieclip pulsanteDentro, nome di istanza interno, a cui associato lo script: questo possibile perch lo script universale, e per diventare relativo ad azioni differenti, fa riferimento al

nome di istanza del movieclip che lo contiene. E questa l'unica cosa che cambia da un movieclip all'altro. Selezioniamo ora tutti e sei i movieclip, e convertiamoli ancora in un movieclip, che chiameremo menu, e che avr menu come nome di istanza. Editiamo il movieclip menu: in un layer ci sono i 6 movieclip pulsanteFuori. Aggiungiamo un layer, e scriviamoci, corrispondendo ai vari pulsanti, i nomi delle 6 differenti sezioni. Quello che otteniamo questo:

La funzione
inserita sabato 16 marzo 2002 Visite: 46638

Adesso non rimane che definire la funzione che permetter al menu di fare qualcosa. Come abbiamo gi detto, la pressione di uno dei pulsanti, richiamer una funzione che si chiama comandi, alla quale come variabile viene inviato il nome di istanza del movieclip PulsanteFuori che contiene il pulsante. In pratica, se premo sul movieclip "homepage", alla root arriver il comando: comandi("home"); L'aver usato una funzione, ci permette di non dover pi toccare i pulsanti, per cambiare le azioni corrispondenti: baster modificare la funzione per rispondere alle nostre esigenze. Selezioniamo il primo frame del filmato sulla timeline principale, e apriamo il pannello Azioni: scriviamo il seguente codice
function comandi (nome) { loadMovieNum (nome + ".swf", 1); }

Molto semplicemente la funzione riceve come parametro il nome di istanza del movieclip che contiene il pulsante, e assegna questo parametro alla variabile nome. Quindi carica un filmato esterno, sul livello 1, che si chiama come la variabile pi la stringa ".swf": in parole povere, se clicco il pulsante dentro il movieclip slide, la funzione carica sul livello 1 il filmato slide.swf. D'altronde, premendo pi volte lo stesso pulsante, caricheremmo altrettante volte lo stesso filmato: effetto decisamente sgradevole, e oltretutto non innocuo. Se infatti stiamo utilizzando il filmato esterno, e lo carichiamo di nuovo, perdiamo tutte le variabili e le impostazioni raggiunte a quel momento. Inseriamo quindi un semplice controllo sul nome della variabile. Se la stessa, allora non caricare di nuovo: o meglio, carica solo se diversa dall'ultima impostata. Inoltre, dobbiamo inserire un nome di partenza: quello della homepage, in modo che all'avvio del filmato, sia come se avessimo premuto il pulsante "homepage".
ultimo = "home"; function comandi (nome) { if (nome != ultimo) { loadMovieNum (nome + ".swf", 1); } ultimo = nome; }

In questo modo con la prima riga abbiamo impostato il valore della variabile ultimo, che conterr il nome dell'ultimo pulsante premuto. Al richiamo della variabile, avviene un confronto tra ultimo e nome: se sono diversi, viene caricato il filmato esterno corrispondente, e il valore di ultimo diventa quello di nome. Adesso per abbiamo un problema: premendo home, non abbiamo alcun filmato da caricare, dal momento che home corrisponde al filmato principale. Allora, una volta verificato che ultimo sia diverso da nome, se il pulsante premuto home, allora scarichiamo il livello 1, altrimenti carichiamo il filmato esterno corrispondente.
ultimo = "home"; function comandi (nome) { if (nome != ultimo) { if (nome == "home") { unloadMovieNum (1); } else { loadMovieNum (nome+".swf", 1); } ultimo = nome; } }

Fin qui ci siamo. Ora dobbiamo tornare al fatto che, una volta premuto un pulsante, questo si ferma al frame 11, in modo che sia completamente bianco, ed escludendo le animazioni di rollover e rollout. Quindi, quando premiamo un pulsante, quello premuto precedentemente, fisso sul bianco, deve tornare gradualmente al giallo. Inoltre, come per la variabile ultimo, gi impostata all'avvio del filmato, dobbiamo impostare il pulsante homepage come se fosse gi stato premuto. Per questo motivo, ricapitolo come raggiungere i pulsanti contenuti nel movieclip menu. Sullo stage abbiamo il movieclip menu con nome di istanza menu: questo contiene i sei movieclip pulsanteFuori, con i nomi di istanza riferiti alle sezioni. Dentro ognuno di questo movieclip, c' il movieclip pulsanteDentro, nome di istanza interno, all'interno del quale si svolge l'animazione di rollover. Ad ognuno dei movieclip pulsanteDentro, associato lo script per l'animazione, e anche il controllo sulla pressione del movieclip stesso. Come abbiamo gi visto, il movieclip fermo al frame 11, e bloccato dalla variabile premuto, che vera. Dobbiamo quindi, alla pressione di un nuovo pulsante, riprendere la riproduzione dell'animazione del pulsante premuto precedentemente, e far tornare falsa la variabile premuto. Se ad esempio l'ultimo pulsante premuto era home, e vogliamo ripristinarlo, il percorso che ci interessa sar:
menu.home.interno

per avviare la riproduzione useremo:


menu.home.interno.play();

per resettare la variabile:


menu.home.interno.premuto = false;

Inoltre useremo una particolare notazione: movieclip[variabile].comando Questo significa che, avendo una variabile che contiene il nome di un movieclip, possiamo utilizzarla per completare il percorso. Se il valore di ultimo "home", la scrittura
menu[ultimo].interno.premuto = false;

corrisponder a:
menu.home.interno.premuto = false; ultimo = "home"; menu[ultimo].interno.premuto = true; menu[ultimo].interno.gotoAndStop(11); function comandi (nome) { if (nome != ultimo) { if (nome == "home") { unloadMovieNum (1); } else { loadMovieNum (nome + ".swf", 1); } menu[ultimo].interno.premuto = false; menu[ultimo].interno.play(); ultimo = nome; } }

Nel dettaglio:
// settiamo come ultimo "home" ( come se avessimo // premuto "home" all'avvio) ultimo = "home"; // blocchiamo il rollover del pulsante "home" menu[ultimo].interno.premuto = true; // mandiamo il movieclip "home" al frame 11 menu[ultimo].interno.gotoAndStop(11); function comandi (nome) { if (nome != ultimo) { if (nome == "home") { unloadMovieNum (1); } else { loadMovieNum (nome + ".swf", 1); } // resettiamo la variabile "premuto" del pulsante // attivato precedentemente menu[ultimo].interno.premuto = false; // riavviamone la riproduzione menu[ultimo].interno.play(); ultimo = nome; } }

Lo scrolling

nserita sabato 16 marzo 2002

Visite: 47701

ntroduzione

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.

l loadVariables

Le variabili

nnanzitutto, 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

n 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:

oadVariablesNum("news.txt", 0);

n questo modo, come se avessimo scritto:

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

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

oadVariables("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... }

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

l movieclip

l 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:

l Font usato sar il _sans. In questo modo non avremo bisogno di incorporare alcun carattere, dal momento che il player ne conserva gi le nformazioni. 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 (); }

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

l comando per scorrere verso l'alto, se dato al livello della timeline principale del movieclip news, sar: oppure, in forma abbreviata: news.scroll--;

news.scroll = news.scroll - 1;

e quello per scorrere verso il basso sar: oppure, in forma abbreviata: news.scroll++;

news.scroll = news.scroll + 1;

Se associassimo questi comandi alla pressione di un comune pulsante, dovremo cliccare una volta per ogni riga che vogliamo scrollare: se nvece 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 a 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.

Nella figura di destra, ticcata la casella HTML: ed tutto ci che ci serve. I tag HTML I tag che si possono utilizzare non sono tantissimi, ma bastano e avanzano per i nostri scopi. A parte i tag <b> e <i> (che funzionano anche in relazione alle dimensioni dei caratteri usati), possiamo usare il <br> per mandare a capo, il <font> per i colori, le dimensioni, e le Font vere e proprie, l' <a> per i collegamenti cliccabili. Considerato che il nostro file di testo ha questo formato: news=................................... vediamo cosa possiamo scrivere al posto dei puntini. Se il nostro testo recita cos: "Il capitolo 7 di questo manuale, Dizionario di ActionScript, contiene una descrizione dettagliata per ogni elemento di ActionScript." e al posto dei puntini mettiamo:
Il <b>capitolo 7</b> di questo manuale, <i>Dizionario di ActionScript</i>, contiene una descrizione dettagliata per ogni elemento di ActionScript.

come output otteniamo nel campo di testo:


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

Se aggiungiamo anche un <br>, da:


Il <b>capitolo 7</b> di questo manuale, <i>Dizionario di ActionScript</i>,<br>contiene una descrizione dettagliata per ogni elemento di ActionScript.

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

Con il tag <font> impostiamo le caratteristiche dei caratteri, con le dimensioni in punti. Le parole "Dizionario di Actionscript", con le opportune modifiche, da:
<font color="#0000CC" size="11">Dizionario di Actionscript</font>

nel file di testo, in output diventano:


Dizionario di Actionscript

Con <a> invece colleghiamo le parole ad un link da aprire in una pagina esterna:
<a href="http://flash-mx.html.it" target="_blank">Flash-MX.it - Risorse italiane su Flash</a>

diventa Flash-MX.it - risorse italiane su flash Accorgimenti particolari

Mandando a capo con Invio, in un file di testo, nell'output otteniamo l'equivalente di un doppio <br>, cio a capo con riga vuota in mezzo. Questo per vale solo per alcuni browser, e su alcune piattaforme: per evitare quindi problemi di qualsiasi tipo, meglio scrivere il file di testo senza andare mai a capo con Invio, usando invece solo il <br>. Cambiando le dimensioni dei caratteri all'interno di uno stesso campo di testo, talvolta si hanno delle spiacevoli ripercussioni a livello delle righe. Se infatti tariamo le dimensioni del campo per contenere un numero intero di righe, e poi ingrandiamo una riga con il tag <font>, l'ultima potrebbe risultare tagliata a met. Non tutti i caratteri possono essere importati scrivendoli semplicemente nel campo di testo. Ad esempio, non posso scrivere:
testo=Flash & Actionscript;

dal momento che la e commerciale, "&", ha come significato la divisione delle variabili. Quindi il lettore percepisce come "testo" solo la prima parte, mentre non visualizza la seconda. Per evitare questo inconveniente, bisogna utilizzare la tecnica dell'URL ENCODING, che consiste nel sostituire alcuni caratteri con altri. Nell'esempio di questo sito, gli aggiornamenti sono quelli presi dalla homepage di Flash5.it alla data in cui ho scritto questa sezione. Nei collegamenti, poich Flash5.it costruito in ASP, sono presenti le e commerciali per identificare i file ASP. Per poter passare questi caratteri, ho dovuto sostituirli sempre con %26. Quindi, avrei scritto la frase sopra come:
testo=Flash %26 Actionscript;

Flashguru sui tag HTML.

Stampare
inserita gioved 21 marzo 2002 Visite: 30759

Premessa Flash non troppo flessibile per quanto riguarda la stampa. Ha alcuni vantaggi enormi, primo fra tutti il poter avere come oggetto forme vettoriali, e non solo raster, ma anche alcune limitazioni, come quella in relazione al colore di fondo. Non affronter il problema in modo completo (lo far in altra sede), ma mi limiter a spiegare la procedura per ottenere un particolare tipo di stampa, probabilmente l'unico davvero necessario. Procedura Finalit Innanzitutto bisogna stabilire cosa stampare: in questo caso abbiamo optato per una pagina con i loghi (in vettoriale), alcune righe con i termini del copyright in relazione all'uso dei contenuti del sito, e l'elenco degli autori e dello staff. Partiamo dal presupposto che Flash d come sfondo alle proprie stampe il colore di fondo del filmato. Per questo motivo, siamo praticamente costretti a usare il bianco. Infatti, se il colore di fondo diverso dal bianco, all'atto della stampa la pagina verr colorata con quello impostato: solo che se l'utente non setta volontariamente, quando si apre la finestra di dialogo con le opzioni della propria stampante, l'area di stampa massima ( e talvolta non basta neanche questo), attorno all'oggetto rimarr comunque una cornice bianca: potrebbe anche andare bene, in alcuni casi, ma generalmente un effetto abbastanza sgradevole. Altra cosa da considerare l'area di stampa, e le proporzioni del disegno rispetto ad essa. Per questo motivo useremo come base le dimensioni di un comune foglio A4. Infine non avremo la necessit di eliminare il comando stampa dal menu contestuale del pulsante destro del mouse, dal momento che rimuoveremo tutto il menu, e per stampare utilizzeremo un pulsante. L'oggetto Il Flash non stampa propriamente degli oggetti, bens dei frame. Un frame, per essere stampabile, deve essere identificato tramite l'etichetta (label), che deve avere un nome particolare: #p. Se nessun frame etichettato in questo modo, non verr stampato niente. Se pi frame hanno questa etichetta, verranno stampati tutti quelli

etichettati. Questa particolarit, nasconde evidentemente un problema di non poco conto. Se infatti voglio rendere stampabili pi frame, ma ad esempio poterli stampare separatamente (a scelta dell'utente), non li posso identificare in alcun modo. Per fortuna, il problema sorge solo con i frame appartenenti alla stessa timeline: se quindi posiziono i frame stampabili in timeline separate, potr ottere anche stampe dei singoli frame. Per ottenere una timeline separata, il modo pi semplice di creare un movieclip. Con il comando print, quindi, chieder di stampare la timeline del movieclip in questione, all'interno del quale ci sar un solo frame con l'etichetta #p. Questo significa anche che se voglio rendere stampabili pi documenti, e poterli stampare separatamente, dovr creare tanti movieclip quanti sono i documenti. L'area di stampa Per decidere quali saranno le dimensioni che avranno gli oggetti rispetto alla pagina sulla quale verranno stampati, ho bisogno di creare un altro frame. Questo frame dovr avere un'etichetta particolare, #b, e contenere un oggetto che mi rappresenter l'area di stampa. La proporzione tra il contenuto della stampa e la pagina stampata, sar determinata dalla proporzione tra il contenuto di questi due frame. Vediamo qualche esempio per capire meglio cosa significa. Nel frame etichettato come #p (il frame da stampare), ho un cerchio. Nel frame etichettato come #b, ho un rettangolo. Consideriamo che il cerchio rimanga di dimensioni costanti, in queste prove, e che a cambiare siano solo le dimensioni del rettangolo.

Il movieclip Apriamo il file flash5.fla, e visualizziamo la libreria. Clicchiamo sul pulsante + in basso a sinistra, e aggiungiamo un movieclip che chiameremo pagina. Aggiungiamo un altro layer, in modo da avere due layer di un frame ciascuno: nel frame in basso disegniamo un rettangolo di qualsiasi colore (non verr stampato, quindi pu essere pi utile che sia bianco) di dimensioni in pixel 210x290, esattamente come un foglio A4. Posizioniamo l'angolo superiore sinistro del rettangolo sul centro del movieclip, e blocchiamo il layer. Nel frame in alto disegniamo i contenuti che appariranno nella pagina stampata, basandoci, per le posizioni e le dimensioni, sul rettangolo presente nel layer sottostante. Quando abbiamo creato tutto il contenuto, nel layer in alto aggiungiamo un frame vuoto con F7. Sblocchiamo il layer inferiore, selezioniamo il rettangolo, tagliamolo e incolliamolo nel secondo frame del layer superiore, cancelliamo il layer inferiore. Adesso abbiamo un unico layer di due frame. Nel primo frame, abbiamo i contenuti, nel secondo, il rettangolo. Etichettiamo il primo frame con #p, e il secondo con #b. La posizione dei due frame ininfluente, basta che non siano sovrapposti, e cos la loro durata nella timeline. Nel fla d'esempio, infatti, ho posizionato i due frame un po' distanziati, e allungati nella timeline perch si potessero leggere le etichette: il risultato di stampa identico.

Torniamo alla timeline principale del filmato, e aggiungiamo un layer: in questo layer trasciniamo dalla libreria un'istanza del movieclip pagina. Questo movieclip sar scandalosamente enorme per il nostro filmato, ma le sue dimensioni e la sua posizione non avranno alcuna influenza sulla stampa. Per cui riduciamolo volentieri

anche a un decimo delle sue dimensioni originali, e nascondiamolo spostandolo al di fuori dello stage. Infine selezioniamolo ancora una volta, e diamogli pagina come nome di istanza. Il comando
print ("_root.pagina", "bmovie");

Cosa significa questo comando? Su print non c' niente da dire, essendo l'azione che genera la stampa; _root.pagina non altro che il percorso del movieclip all'interno del quale presente il frame da stampare. bmovie invece l'argomento che specifica che tipo di stampa vogliamo ottenere. Al posto di bmovie potevamo avere altre due opzioni, bframe e bmax. Nel primo caso, avrebbe considerato come area di stampa tutta l'area del frame stampabile, scalando gli oggetti per riempire la pagina in uscita, mentre nel secondo caso la somma dei riquadri di delimitazione degli oggetti presenti in tutti i frame etichettati come #p. Noi scriviamo invece bmovie, che considera come area di stampa il riquadro di delimitazione degli oggetti presenti nel frame etichettato come #b (il nostro rettangolo, appunto). Nel caso avessimo voluto stampare delle immagini raster, invece, avremmo potuto usare un altro comando:
printAsBitmap ("_root.pagina", "bmovie");

Le differenze tra i due comandi sono molto importanti: il primo stampa alla massima risoluzione possibile, mentre il secondo a quella del filmato. Inoltre printAsBitmap permette di mantenere nella stampa gli effetti alpha, mentre il semplice print non pu. Il pulsante Nel nostro caso, il pulsante sar nuovamente un movieclip. Con lo strumento testo, scriviamo sullo stage la frase che risulter cliccabile. Selezioniamola cliccando una volta con il mouse, poi convertiamola in movieclip premendo F8. Torniamo alla timeline principale, selezioniamo il movieclip con la scritta, apriamo il pannello azioni e scriviamo:
onClipEvent (load) { colore = new Color(this); } onClipEvent (mouseMove) { if (this.hitTest(_root._xmouse, _root._ymouse, false)) { if (!premuto) { sopra = true; colore.setRGB(0xFFCC33); } } else { sopra = false; if (!premuto) { colore.setRGB(0x000000); } } updateAfterEvent(); } onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse, false)) { premuto = true; colore.setRGB(0xFF9900); } updateAfterEvent(); } onClipEvent (mouseUp) { premuto = false; if (sopra) { colore.setRGB(0xFFCC33); print ("_root.pagina", "bmax"); } else { colore.setRGB(0x000000); } updateAfterEvent(); }

Senza ripetere per l'ennesima volta come simulare il rollover con un movieclip, notiamo semplicemente il comando print sottoposto al mouseUp, cio al rilascio del pulsante sinistro del mouse sopra la scritta: infatti solo quando si sul movieclip, la variabile premuto vera. Adesso per vogliamo aggiungere una semplice gif rappresentante una stampante vicino alla scritta, e vogliamo che sia anche cliccabile, come la scritta. Non possiamo inserirla nel movieclip, altrimenti cambierebbe colore al rollover. Allora torniamo alla timeline principale, e posizioniamoci nel frame con il pulsante per la stampa.

Andiamo al menu File/import, cerchiamo la nostra gif, e importiamola nel filmato: la selezioniamo, premiamo F8 e la convertiamo in movieclip. Torniamo per l'ultima volta alla timeline principale, selezioniamo la "stampante", e diamo stampante come nome di istanza. Riprendiamo in mano lo script della scritta. Aggiungiamo due pezzettini:
onClipEvent (load) { colore = new Color(this); } onClipEvent (mouseMove) { if(this.hitTest(_root._xmouse,_root._ymouse,false) || _parent.stampante.hitTest(_root._xmouse, _root._ymouse, true)) { if (!premuto) { sopra = true; colore.setRGB(0xFFCC33); } } else { sopra = false; if (!premuto) { colore.setRGB(0x000000); } } updateAfterEvent(); } onClipEvent (mouseDown) { if (this.hitTest(_root._xmouse, _root._ymouse, false) || _parent.stampante.hitTest(_root._xmouse, _root._ymouse, true)) { premuto = true; colore.setRGB(0xFF9900); } updateAfterEvent(); } onClipEvent (mouseUp) { premuto = false; if (sopra) { colore.setRGB(0xFFCC33); print ("_root.pagina", "bmax"); } else { colore.setRGB(0x000000); } updateAfterEvent(); }

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

Barra di scorrimento testo


inserita gioved 21 marzo 2002 Visite: 32081

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.