(eBook - Ita - Informatica)_Corso Completo Action Script Flash_(83_pag.)

5/10/2018 (eBook - Ita - Informatica)_Corso Completo Action Script Flash_(83_pag.) - slidepdf.com

http://slidepdf.com/reader/full/ebook-ita-informaticacorso-completo-action-script-flash83pag 1/83

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

Usare il pannello delle ActionScript inserita giovedì 18 gennaio 2001 Visite: 56178

Parte fondamentale del linguaggio di programmazione interno di Flash, è il pannello Actions che permette di scrivere il codicedegli 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 pulsantedestro 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 cliccandodirettamente sulla categoria di action desiderata (la lista a sinistra). Lì vi sono riportate tutte le categorie possibili associate alleistruzioni 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 modopersonalizzato:



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 laseconda per adesso... perché tramite questa, il codice, anziché selezionato da menu ed inserito, deve essere digitatomanualmente.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 secondadella categoria a cui appartiene; Show Deprecated Syntax che evidenzia le istruzioni obsolete (istruzioni che fanno parte diFlash4 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 Acti ons...

Bene, ora sappiamo come scrivere il codice in Flash ma... quando dobbiamo farlo? Beh, quando vogliamo inserire un bottoneper l'invio di un messaggio di posta elettronica, oppure quando semplicemente dobbiamo arrestare il filmato per evitare che lariproduzione 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 chea 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'internodelle 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 delmouse), 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 (); è indipendentedall'evento. Quindi, l'action stop (); viene sempre eseguita a differenza di gotoAndPlay (1); che viene eseguitaesclusivamente 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 coloreblu, il testo, i valori e i delimitatori (punto e virgola, parentesi ecc..) con il colore nero. I commenti con il rosa e le proprietà conil 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 giuntoall'ultimo frame, no? Beh, vi sono due modi per agire, uno è quello classico spuntando la voce Loop nel Publish Settings diFlash; 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 sulbottone), 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 cuil'introduzione e il resto del sito siano nello stesso filmato (divisi in scene, per es.), è necessario utilizzare l'action goto, cherimanda 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 allastessa 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 olinkare ad un indirizzo email per spedire una posta.



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

Ed ecco il codice:

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

}

• All'interno della casella Window è possibile selezionare una delle quattro opzioni disponibili oppure, se la nuovapagina deve aprirsi in un determinato frame html (intendo quindi la suddivisione in più parti di una pagina Web, nullaa 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 opzioneverrà 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 visualizzare più film

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

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

unloadMovieNum

Una volta che il filmato caricato non è più necessario (nel caso dei brani musicali, quando l'utente scegli un altro brano oppure sceglie l'opzioninterrompere la riproduzione della musica), deve essere scaricato. Per farlo viene utilizzata l'action unloadMovieNum ();. E' necessario specific



filmato da scaricare (1 nel nostro primo caso) o il nome del Target nella quale era stato inserito.

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 allaprogrammazione Flash. ;-)Possono essere specificati come Target soltanto i movieclip oppure i filmati esterni caricati tramite Load Movie (nonché ilfilmato 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ù avantila procedura). Ecco come procedere:

1) selezionare il movieclip desiderato e trascinarlo nell'area di lavoro tenendo premuto il pulsante del mouse fino a trovare laposizione 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 F ash5.it , semplicemente logo.l

t

t

Sarà questo nominativo che ci permetterà di controllare il movieclip nelle nostre azion i. Quindi, il nomedell' 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 unastruttura 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 s age principale del nostrofilmato. Se avessimo inserito il movieclip dentro un'altro movieclip di nome pippo allora l'istanza logo si troverebbe nella clippippo e non nello s age principale .



(in questo caso l'istanza logo è nello stage principale del movie)

Per capire meglio la questione, ecco uno schema che mostra la struttura delle clip:

Filmato principale (livello 0)Clip logo

Clip htmlFilmato1.swf (livello 1)

Clip pippo

In questo caso, nel filmato principale si trova la clip logo che a sua volta contiene la clip html. Mentre nel filmato secondario"Filmato1" si trova la clip pippo.Sto spiegando tutto questo per il fatto che, quando viene specificato un Target , bisogna digitare, oltre al nome, anche ilpercorso 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 illivello 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 dilivello del filmato contenente la clip (attenzione ad inserire anche il carattere underscore _ ).

Riassumendo... si può specificare come Ta ge : r t

• 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 programmazioneFlash.

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 sonogli eventi dei bottoni .

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

Attenzione!

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

Gli eventi possibili per un bot one sono:t

• 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 Outs de: 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);i

t

• 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 bot one (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 vieneaggiunto 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 bot oni 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 casoquindi, se l'utente rilascia il pulsante del mouse dopo aver cliccato il bottone, viene "stoppato" il filmato. Ovviamente è possibileinserire più di un'azione nell'evento.La stessa azione poi, può essere effettuata anche su più eventi:

t

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 ilpuntatore (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, Flashinserisci 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'a ea sensibile non è altro che una clip bottone contenente oggetti esclusivamente all'interno del frame HIT . In questo modoil bottone risulta invisibile ma cliccabile.

r

Essendo un bottone è possibile utilizzarne tutti gli eventi possibili. In questo modo è possibile rendere gli altri oggetti, sensibiliagli eventi del mouse. Come? Semplice, basta inserire la clip area sensibile all'interno delle altre clip. Vi ricordo che, essendoinvisibile 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 perle clip bottone .

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

r

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 colorerosso) 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 sonole variabil i .

Si può definire una variab i e come un contenitore, al cui interno troviamo un valore:l

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'esp essione ).r

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

Oltre alle variabil i , esistono le costanti . Si differenziano, come dice il nome, dal fatto che le variabil i possono assumerevalori 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 variabil i , per esempio quando sicreerà un modulo per la raccolta dati. Tutti i campi presenti nel modulo sono variabil i .

Le variabili: settaggio inserita giovedì 18 gennaio 2001 Visite: 31187

Prima di continuare, è necessario imparare alcune basi della programmazione, altrimenti rischieremmo di andare incontri aspiacevoli 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 associareun nome qualsiasi (tranne parole riservate al linguaggio) non c'è problema, il mio consiglio comunque, è quello di associare unnome 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 possibil i

Come già detto, una variabile è un contenitore di valori. Ma che tipo di valori è possibile inserire in una variabile? Ovviamentequando 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'operazionetra 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 questocaso è spuntata la casella Expression perché il valore da assegnare alla variabile, è il risultato di una espressione (unasomma).

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 variabilespecificata tra parentesi in un valore numerico . Bisogna adottare questa strada, in quanto Flash associa alla casella di testo unvalore stringa e ciò comporterebbe il concatenamento dei valori immessi (per es. inserendo 35+7, come risultato si avrebbe357).

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

* Moltiplicazione

/ Divisione

% Rimanenza

++ Incremento

-- Decremento

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

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

14 % 6

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

++ (incremento) Questo operatore permette di incrementare di 1 la variabile se usato singolarmente. Se invece viene usato con un altrooperando 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'azioneEvaluate:

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 instringa 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 (comegià visto).L'operatore di eguaglianza invece, è il == , con cui è possibile verificare l'uguaglianza tra due variabili (se i loro valori sonoidentici 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 lacondizione 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 anon sbagliarvi!! E' molto importante capire la differenza tra i due operatori .Ecco lo script per il bottone Verifica:

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

} else {risp = "falsa";

}}

Tradotto in italiano:

(salto la parte on (release))

se n1 è eguale a n2 allora assegna a risp la stringa "vera" altrimenti assegna a risp la stringa "falsa".L'azione risp = "vera"; è compresa tra le parentesi quadre che identificano l'avverarsi della condizione, mentre risp =

"falsa"; è compresa all'interno dell'istruzione else che identifica il non avverarsi della condizione (altrimenti).Immagino non ci sia bisogno di dire che n1, n2 e risp sono le tre caselle di testo.

Ecco un altro esempio:


In questo caso lo script cambia leggermente:

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

} else {risp = "più basso";

}}

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

| | ( o r) 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 vieneinviato altrimenti viene visualizzato un messaggio che indica di compilare completamente il modulo.


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 condizioneif

si avvera se nome oppure email sono nulli... quindi si avvera se almeno uno dei due operandirisulta vero.In questo esempio ho dovuto necessariamente utilizzare la funzione String() che permette di trasformare in stringa un valorenumerico (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 (dadisuguaglianza).


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 .

e proprietà dei target: settaggio serita giovedì 18 gennaio 2001 Visite: 2539

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

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

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

a sintassi per questa action è la seguente:

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

ove nomeTarget è il nome dell'istanza del movieclip su cui settare la proprietà proprietà con valore valore . Ecco l'azione per il bot one imposta t ell'esempio sopra:

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

}

na volta cliccato su imposta il movieclip logo assume posizione x uguale al valore immesso nella casella Posizione asse x , e posizione y uguale al valoremesso 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 propostoda Flash:



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

_alpha

Imposta la trasparenza della clip (in percentuale).

Bottone Applica

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

}

dove trasp è il nome della casella di testo.


_focusrect

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

t

Bottone Attiva Bottone Disattiva

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

}

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

}




_highquality

Imposta l'antialiasing per il filmato. Assegnando valore 2 (ottima), l'antialiasing è sempre attivo. Con 1 (alta qualità) viene attivato solo se il filmato non contieneanimazioni 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, nonavranno effetto.

_quality

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

• LOW Bassa qualità di rendering. I grafici non sono sottoposti ad antialiasing e le bitmap non vengono smussate.• MEDIUM Media qualità di rendering. I grafici sono sottoposti ad antialiasing con una griglia di 2x2, ma le bitmap non

vengono smussate. Questo valore è adatto a filmati che non contengono testo.• HIGH Alta qualità di rendering. I grafici sono sottoposti ad antialiasing con una griglia di 4x4 e le bitmap vengono

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

sempre smussate.

_xscale e _yscale

Per impostare la scalatura della clip (in percentuale).

Bottone Applica

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

}


_rotation

Imposta il grado di rotazione della clip.



Bottone Applica

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

}

dove grado è il nome della casella di testo.


_soundbuftime

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

_visible

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

Bottone Visibile Bottone Invi s b il e i

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

}

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

}

dove trasp è il nome della casella di testo.


_height e _w idth

Per impostare le dimensioni della clip (in pixel).



Bottone Applica

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

}

Le proprietà dei t arget: 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 (inveceche 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 categoriaProperties 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 dellafunzione getProperty. Infatti, settando una variabile con valore _xmouse essa restituirà la posizione corrente sull'asse x delpuntatore del mouse. Tutte le altre proprietà settate in questo modo, faranno riferimento al livello 0 del filmato (_url peresempio restituirà il percorso del filmato .swf).

Ecco alcune di queste proprietà in azione:




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 ilmovieclip logo (in quanto è stato assegnato come Target ) e non al filmato principale (per fare riferimento al filmato principale,inserire come Ta get "_level0").r

_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 valorepredefinito è 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 ilfilmato troppo complicato da gestire. Per evitare ciò è stata introdotta in Flash, l'azione duplicateMovieclip che, ogniqualvolta viene utilizzata, crea un duplicato della clip specificata come Target . Ecco un esempio molto semplice:


Al rilascio del bottone Duplica viene eseguita l'azione duplicateMovieClip che genera un duplicato della clip logo ad ognirilascio 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 illivello di sovrapposizione del duplicato.Il nuovo duplicato del movieclip inizia la riproduzione dal frame numero 1 indifferentemente dal movieclip originale. Quindi, leanimazioni sono distinte e indipendenti. In più, l'eliminazione del movieclip originale provoca automaticamente, l'eliminazione ditutti 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 unasimulazione 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 unavariabile, che chiameremo semplicemente x .Nel primo frame, poniamo x=1 ed assegniamo l'azione stop.Come azione del bot one inseriamo:t

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 vienecreato 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 bot one , x diventa 2, e il nome del nuovo duplicato diventa logo2. La seconda volta, xdiventa 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 averelimitazioni nel numero e senza scrivere tante azioni. Con lo stesso metodo viene valorizzato anche il parametro depth, infattiviene reso uguale a x (che ad ogni clic ha un valore diverso).

t

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 ilproiettore Flash oppure il browser web.In questa lezione, verrà analizzata l'azione associata al proiettore Flash, mentre nella successiva, verrà analizzata l'interazione diFlash 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 cheverranno 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 vengaeseguito.

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.

nterazione Flash-JavaScript serita giovedì 18 gennaio 2001 Visite: 2164

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

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

lezioni dedicate.

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

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

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

OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

odebase="http://active.macromedia.com/flash2/cabs/swflash.cab#

ersion=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"

RC="prova.swf" SCALE="showall" PLAY="true" LOOP="false" QUALITY="high" WIDTH="100" HEIGHT="100" TYPE="application/x-shockwave-flash"

LUGINSPAGE="http://www.macromedia.com/shockwave/download/

ndex.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>

/OBJECT>

il codice mostrato è solo di esempio per comprendere al meglio il posizionamento dei parametri ID e NAME)n 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 leformazioni ed interpretarle.

l parametro swLiveConnect viene inserito esclusivamente nel tag <EMBED> e permette di caricare Java alla visualizzazione della pagina. In questo modo ilrowser non deve rallentare l'esecuzione degli script caricando Java al momento dell'apertura finestra.

a Fase - Assegnazione dell 'action nel bottone

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

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

}

ove nuova-finestra è il nome che abbiamo assegnato al comando (possiamo assegnare qualsiasi nome, basta che il valore negli script sia lo stesso), e

ttp://www.f lash5.it è l'argomento (la nuova pagina web da aprire).

a Fase - Creazione degli script

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

cco il codice JavaScript che permette di eseguire questa operazione:

SCRIPT LANGUAGE="JavaScript">

!--

unction ApriFin_DoFSCommand(command, args)

f ( command == "nuova-finestra" )

indow.open(args,'','scrollbars=yes,width=650,height=400');

/-->

/SCRIPT>

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

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

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

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

ub ApriFin_FSCommand(ByVal command, ByVal args)

all ApriFin_DoFSCommand(command, args)

nd sub

/-->

/SCRIPT>

ssendo il VBScript il linguaggio di default.

uesta breve funzione richiama il JavaScript creato precedentemente e gli invia le variabili ricevute dal filmato Flash.

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

pprofondimento

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

Script per ilri levamento plug-in

Load Movie "JavaScript:" n el GetURL FSCommand, comunicazionetra Flash e JavaScript

Netscape 3.0 e superiori

Mac 68k No No No No

Mac PowerPC Si Si Si Si

Window s 3.1 Si No No No

Windows95/98/NT/2000

Si Si Si Si

Internet Explorer 3.0 e superiori

Versione 3Macintosh

No No Si No

Versione 4.5Macintosh No Si No No

Versione 5.0Macintosh

Si Si Si No

Versione 3 Window s 3.1

No No No No

Versione 3Windows 95/98/ NT

Si Si No Si

Versione 4Windows 95/98/ NT

Si Si Si Si

Versione 5Windows

95/98/NT/2000

Si Si Si Si

Versione 6Windows

95/98/NT/2000

Si Si Si Si

Versione 5Windows

95/98/NT/2000

Si Si Si Si

Scrolling di testo 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 ingestione 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ò esseremodificato dinamicamente.

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

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

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

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

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

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

Creare una casella di testo con 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 persemplicità. 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 è Multil ine 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 testodeve assumere il valore (e cioè il testo... scusate il gioco di parole) tramite azioni. In questo modo purtroppo la formattazionedel testo deve essere effettuata tramite action. E' necessario agire così, perché se il testo viene inserito al momento dellacreazione della casella, essa assume altezza a seconda della larghezza del campo e non può essere modificata (quindi nonpotremmo scegliere la dimensione voluta). Infatti l'altezza della casella si adatta in base alla larghezza impostata (solo se c'è deltesto all'interno).

Per la formattazione del testo, ecco come fare:

Codice da digitare Significato

\r Ritorno a capo

\t Tabulazione

\" Virgolette "

\' Apostrofo '

\\ Barra \

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

testo = "bla bla bla";

dove, ovviamente, al posto di "bla bla bla" andrà inserito il testo scelto. A questo punto, inseriamo in un nuovo livello le due clip bot one 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 ancheinserire dei controlli che permettano di "fermare" lo scrolling una volta arrivati all'ultima riga, per lo scrolling verso il basso, ealla 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":

t

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, poiviene eseguito il controllo: se scr è maggiore di 1 (non è quindi la prima riga) allora viene diminuito di 1 il valore ditesto.scroll in modo che la casella scrolli di una riga verso l'alto, altrimenti se scr è uguale a 1 (siamo alla prima riga), quindinon è 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 atesto.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 dieventuali 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 fotogrammistampabili. Per stampare determinati fotogrammi, inserire l'etichetta #P nei fotogrammi desiderati. In questo modo, la stampaverrà fatta solo su di essi.Gli altri argomenti ["bmovie", "bmax", "bframe"] (tra i 3 è possibile sceglierne uno alla volta), delimitano l'area di stampa inbase ai fotogrammi stampabili.

bmovie Indica il riquadro di delimitazione di un fotogramma specifico del filmato come a ea di stampa per tutti i fotogrammi stampabili nel filma o. Associare un'etichetta #b (nell'ambiente di c eazione) per indicare il fotogramma il cui riquadro di

delimitazione deve essere usato come area di s ampa.

bmax Indica come area di stampa un riquadro di delimitazione composito formato da tutti i fo ogrammi stampabili. Specifica e l'argomento bmax quando i fotogrammi stampabili nel filma o 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'a ea di stampa per ogni fotog amma e agisce sulla scala degli oggetti per adattarli all'a ea 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)

r t r

t

t r t .

r r r

L'oggetto MovieClip

Primi m etodi 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 unmetodo che, se richiamato, permette di conoscere il valore (o eseguire un'azione) dell'oggetto stesso.

In Flash appartengono alla classe degli oggetti:

ArrayBooleanColorDateKeyMathMovieClip

Mouse

NumberObjectSelectionAudioStringXMLXMLSocket

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

L'oggetto movieClip

Come sapete, un movieclip è un filmato interno indipendente dal filmato principale, giusto? Ma, vi siete mai chiesti se è possibilecontrollare 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:

attachMovieduplicateMovieClipgetBounds

getBytesLoadedgetBytesTotalgetURLglobalToLocalgotoAndPlaygotoAndStophitTestloadMovie

loadVariableslocalToGlobalnextFrame

playprevFrameremoveMovieClipstartDragstopstopDragswapDepthsunloadMovie

movieClip: Play e Stop

Partiamo subito con i due metodi più semplici. Abbiamo già visto nelle prime lezioni, come fare a riprodurre/arrestare il filmato

principale. Ora invece cercheremo di riprodurre/arrestare un movieclip .

Poniamo il caso di avere un movieclip con l'animazione del logo Flash5.it che ruota da sinistra a destra dello stage . Vogliamoche, tramite 2 bottoni, il logo interrompa la sua riproduzione oppure la riprenda. Per prima cosa creiamo i due bottoni e ilmovieclip con l'animazione. Inserire i due bottoni in un unico livello dello stage e in uno nuovo il movieclip . Assegnare quindi, ilnome 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 questopunto cliccare sul +, selezionare la voce Objects e poi movieClip. Dal menù proposto scegliere la voce "Play". Oltre all'actionsscelta apparirà anche l'evento on(release) automaticamente (come già detto, ai bottoni possono essere associate actions solosu 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 manon 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 senzaspecificare 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 percompatibilità con Flash4 e vi consiglio di mantenerla sulla voce Dots . Con Mode invece, si indica un percorso relativo oassoluto per il Target . Anche qui, il mio consiglio è quello di inserire sempre percorsi Absolute per meglio adeguarsi al codicescritto. 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 semprelo stesso Target .Ecco le azioni per i due bottoni:

Bottone Stop Bottone Play



on (release) {logo.stop();

}

on (release) {logo.play();

}

Ed ecco il risultato finale:

Metodi: goto, getURL e loadM ovie


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

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

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

}

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


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

nextFrame e previousFrame

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

movieClip: getURL

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

movieClip: loadMovie e unloadMovie

L'azione .loadMovie ha la stessa funzione dell'azione loadMovie studiata nelle prime lezioni. Utilizzando .loadMovie il filmatoesterno viene richiamato all'interno del movieclip indicato come target assumendone le dimensioni (stessa cosa si ha conloadMovie 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 perinviare 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 "targe " .t

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 clipspecificata assume profondità della clip specificata come target.


MovieClip: loadMovie e unloadMovie

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

Renderlo trascinabileinserita 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 almovimento 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 peresempio).

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 alpuntatore del mouse.

• Left, Top, Right e Bottom: indicano se il movieclip trascinato deve limitare il trascinamento all'interno di unrettangolo 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, r ght e bottom possono tranquillamente essere cancellati se non utilizzati. Il nomedel movieclip , come sempre, è logo e l'azione .startDrag è stata inserita nel primo keyframe del movie.

i

Ecco invece un esempio di trascinamento delimitato:


In questo caso, il rettangolo è disegnato (i valori left, top, right e bottom sono solo indicativi, non generano un rettangolovisibile). 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 rettangolodisegnato 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 to p , e sottrarre 25 ai valoriright 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 collision e




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:


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 è incollisione 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 . Contrue viene rilevata la collisione considerando solo l'area dello stage che il movieclip occupa, mentre con false viene consideratol'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 è possibilescegliere 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 creareun'a ea sensibile .r

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



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

r

r

r

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 averlotrascinato nello stage. Sempre nello stesso frame, inseriamo l'azione stop(). Dal secondo frame in poi, possiamo creareun'animazione, che verrà eseguita nel momento in cui l'utente trascina correttamente l'omino all'interno del cerchio. Nel mioesempio però non vi è alcuna animazione, solo un passaggio "statico" dal cerchio vuoto al cerchio "pieno" (ed ho inserito ancheil bottone Sgancia). Praticamente, quando l'utente rilascia l'omino all'interno del cerchio, faremo in modo che Flash vada aleggere 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 a ea 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 almovieclip uomo. In caso affermativo, il movieclip uomo viene reso invisibile e il movieclip cerchio viene re-indirizzato al framenumero 2 (e verrà visualizzato il bottone Sgancia).

Gli eventi gestiti


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

La prima cosa da notare è il menù a scelta unica che, differentemente dai bottoni , implica la scrittura delle azioni per ognievento (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 unarea sensibile (bottone invisibile). Da tenere conto però, che questi eventi si attivano senza modificare l'icona del puntatore delmouse (rimane la tipica freccina); per questo motivo quindi, potrebbe risultare difficile da parte dell'utente capire cosa doverfare...

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' necessariospecificare l'url dal quale le variabili vengono lette (è possibile usare una qualsiasi pagina "dinamica", tipo Asp o Php, oppure unfile 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 nesono 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 ur l specifica la pagina generata dinamicamente, oppure il file di testo, da cui prelevare le variabili e method specifica ilmetodo 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'utentecompletamente estraneo a Flash, il modo migliore è quello di inserire in un campo di testo i valori necessari per aggiornareautomaticamente il sito. In questo modo quindi, metteremo la persona che gestisce la cosa, nelle condizioni di poterla fare almeglio 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 l ink n ne indica l'indirizzo allaquale è collegato.

A questo punto, all'interno del filmato Flash, inseriamo un movieclip con all'interno tanti campi di testo quanti sono gliaggiornamenti 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 poterlorintracciare. Se invece il file fosse stato in una sottodirectory, avremmo dovuto inserire anche il nome di essa seguito dallabarra: "aggiornamenti/news.txt " oppure direttamente il link assoluto"http:/ / ww w.f lash5.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 testotitolon . Il mio consiglio è quello di inserire un keyframe sul frame Over dell'area sensibile e disegnare una banda colorata. Inquesto modo l'utente, quando passa sopra ad ogni voce, verrà visualizzata di sfondo la barra colorata, dando un effetto miglioreal 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 l ink n (letta dal file ditesto).

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 (oradi 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 Datemette 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.

getMill iseconds 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 coordinatoUTC,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 universalecoordinato UTC.

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

getUTCMill iseconds Restituisce i millesimi di secondo dell'oggetto Date specificato in base al tempo universale coordinatoUTC.

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

setMill iseconds 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 coordinatoUTC.

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 coordinatoUTC,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 restituisconorispettivamente 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 come0, febbraio 1, marzo 2 ecc...Ecco il perché quindi dell'espressione (dat.getMonth() + 1).

Ora basta impostare la data in un formato a noi conosciuto (gg/mm/aa) concatenando le 3 variabili in questo modo:

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

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

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

Conoscere l'ora corrente Per conoscere l'ora corrente, il procedimento è lo stesso, ma vengono utilizzati i metodi getHours(), getMinutes() egetSeconds() (e getMilliseconds() se vogliamo essere pignoli) per restituire l'ora, i minuti ed i secondi. Il procedimento daadottare è 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'oraora_corr = hh + "." + mn + "." + ss

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

Conoscere il giorno della settimana Utilizziamo il metodo getDay(), che restituisce il numero del giorno della settimana, e creiamo un piccolo script visualizzare ilnome 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:


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 (TempoUniversale 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 hasul proprio computer. Purtroppo l'oggetto Date è dipendente dalla data di sistema dell'utente. Se un utente che visita il sito hasettato 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, ASPo 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, è possibilesostituire la classica freccina del mouse con un puntatore personalizzato. Da ricordare comunque che la sostituzione avvieneesclusivamente all'interno del filmato Flash, non appena l'utente si sposta con il mouse fuori dall'area del filmato, il puntatoretorna 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 bisognaadottare un piccolo "trucco".Dopo aver nascosto il puntatore, rendiamo trascinabile un movieclip con disegnata l'icona di una freccina:

//Nascondo il puntatoreMouse.hide();

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



Ecco cosa succede:


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

//Interrompo il trascinamentofreccia.stopDrag();

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

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 daconsiderarsi un corso (quasi) indipendente visto che verranno descritti alcuni concetti basilari già spiegati in precedenza (maanalizzati 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 pro essionale , per cui consiglio la lettura a chi ha già avutoesperienze nel campo della programmazione in generale (non solo riferita a Flash) e ne sconsiglio la lettura se prima non sonostati 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.

f

Buona lettura...

crivere script serita giovedì 18 gennaio 2001 Visite: 1867

l linguaggio di Flash5 nell'insieme, non si allontana molto dagli altri linguaggi di programmazione. Possiede parole riservate, oggetti e metodi, funzioni, loop,ondizioni, operatori stringa e numerici ecc... La sintassi usata è molto simile a quella dei JavaScript e quindi gli utenti già a conoscenza di questo linguaggio

aranno molto avvantaggiati rispetto ad altri. Posso subito dirvi che le parole riservate sono case sensitive e che quindi la parola "new" è ben diversa daNew". Ma non vi preoccupate troppo, Flash viene in aiuto colorando di blu queste parole (non deselezionate però l'opzione Colored Sintax ).

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



er:

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

acciamo degli esempi...

ndicare le proprietà di un oggetto i vuol conoscere la proprietà _x del movieclip logo. Evitiamo di scrivere:

xlogo = getProperty("logo", _x);

erché la sintassi migliore è:

xlogo = logo._x;

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

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

startDrag("logo", true);

a:

logo.startDrag(true);

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

_root.logo.pippo;

hi in precedenza ha utilizzato Flash4, avrà notato la completa mancanza della barra "/" e dei due punti ":" per indicare la variabile. In Flash5 questa sintassi ètata considerata obsoleta ed è possibile usarla solo per compatibilità dei file in versione 4. Ne è quindi sconsigliato l'uso.n 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 cheermette di creare un path relativo.oniamo che l'istanza tasto si trovi all'interno dell'istanza tastiera: in questo caso, per stoppare tastiera da tasto basta semplicemente scrivere:

_parent.stop();

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

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

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

}

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

//Questo è n commentou

Le funzioni inserita giovedì 18 gennaio 2001 Visite: 17649



Come già molti di voi sapranno, con il termine unzione si indica un blocco di codice (script) utilizzabile in qualsiasi punto ed inqualsiasi momento del, in Flash, filmato. Ad una funzione vengono passati dei valori, detti argomenti , che vengono operati e, inalcuni 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 idue dati, e di ritorno avremo una risposta affermativa se i dati sono giusti, negativa se sono errati.

f

f

r

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

BooleanescapeevalfalsegetPropertygetTimergetVersionglobalToLocalhitTestintisFiniteisNaNkeycode

localToGlobalmaxscrollnewlineNumberparseFloatparseIntrandomscrollStringtargetPathtrueunescape

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 Ta get , 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 framesu cui risiede la funzione (perché non inserirle il più possibile nel primo frame? Creeremo script di facile lettura).

Facciamo un semplicissimo esempio:


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

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

} }

(tramite l'azione function viene creata la funzione) Alla funzione viene passato l'argomento x e tramite questo valore, vengono impostate la posizione x,y e il valore alpha delmovieclip 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:


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 equindi hanno validità solo internamente alla funzione . Una volta terminata perdono valore (se non "trasmesse" dentro altrevariabili 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 2argomenti, 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 chedeve digitare i dati da inviare alla funzione ) al momento del richiamo della funzione . Se invece, gli argomenti inviati allafunzione sono in numero maggiore, allora Flash utilizza solo quelli necessari (se la funzione necessita di 2 argomenti, e nevengono 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 personalizzatidefinendone le proprietà e i metodi. Creare un oggetto permette di semplificare la lettura degli script (e l'organizzazione deidati).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). Possonorisultare 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ì bisognavaarrangiarsi 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 differenzasostanziale sta nel fatto che, nel secondo esempio lo script viene eseguito almeno una volta, mentre nel primo no, in quanto lacondizione 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 illoop deve essere eseguito; infine in passaggio l'operazione da eseguire ad ogni loop.In pratica, gli esempi precedenti vengono tradotti in:

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

}

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

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

//Loop per le sue proprietà

for (propertyName in utenti) {trace (propertyName + ": " + utenti[propertyName];

}

Questo script genera nella finestra di Output questo testo:

nome: Paolocognome: 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", vieneeseguito 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 è unoggetto identificato da un indice (che rappresenta la posizione all'interno di essa). All'interno di una matrice possono essereinseriti 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... Peraccedere 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 all’inizio 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 arrayutenti = 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 dellamatrice:

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


Sullo sfondo del filmato qui sopra, vi è un movieclip con disegnato un rettangolo (bianco all'inizio). Non appena l'utente sceglieil 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 coloredesiderato (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 tramitesetTransform.

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ò, questalacuna è stata colmata. Tramite l'oggetto Sound infatti, è possibile gestire diversi aspetti di un file sonoro.

I metodi per l'oggetto sono:

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

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


Creazione dell 'oggetto Per poter utilizzare i vari metodi a disposizione, l'oggetto Sound deve essere creato assegnando il file sonoro desiderato. Perfare questo, vi sono due modi: il primo è quello di inserire il file sonoro all'interno di un movieclip e specificare quest'ultimocome 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 essereutilizzati 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 riproduzioneloop.start();//Si interrompe la riproduzioneloop.stop();

Il metodo start ha la particolarità di poter impostare la possibilità di riprodurre il file in un punto specifico e di impostarne ilnumero 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.


//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 didefault del sistema.


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

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

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

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

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

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

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

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

In questo modo:

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

//Assegno la trasformazione al 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 diinizializzazione.

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 inquesto caso:


dove per ogni tasto è stata assegnata un'azione di setProperty per impostare la nuova posizione del logo, dando l'impressionedi 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 stateinserite le proprietà LEFT, RIGHT, UP e DOWN che, rispettivamente, indicano la freccia Sinistra, Destra, Su e Giu. Ecco un elencodelle proprietà assegnate a Key:

BACKSPACECAPSLOCK CONTROLDELETEKEY DOWNEND

ENTER ESCAPEHOME

INSERTLEFTPGDNPGUPRIGHTSHIFT

SPACETABUP



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.

TastoABCDEFGHIJK

LMNOPQRSTUVWX

YZ

Codice6566676869707172737475

76777879808182838485868788

8990

Tasto0123456789

Codice48495051525354555657

Tasti sul tastierino numerico

Tasto0123456

789

Codice96979899100101102

103104105

Tasto*+Invio-. /

Codice106107108109110111

Tasti Funzione

TastoF1F2F3F4F5F6F7

F8F9F10

Codice112113114115116117118

119120121



F11F12 122

123 Altri tasti

TastoBackspace

TabCancInvio

MaiuscCtrlAlt

Bloc MaiuscEsc

Barraspaziatrice

Pag SuPag Giù

Fine

HomeFreccia sinistra

Freccia suFreccia destra

Freccia giùIns

CancGuida

Bloc Num;:

=+-_ /?

`~

Codice

891213161718202732333435

3637383940454647

144186187189191

192 L'oggettoSelection


Questo oggetto permette di controllare i campi di testo Input Text inseriti nel filmato. Possiede metodi che ne gestiscono ilfuoco e la selezione interna del testo. Questo oggetto non necessita di inizializzazione, dato che è possibile gestire un solocampo 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 conoscer e il fuoco I metodi per gestire queste due operazioni sono rispettivamente, getFocus e setFocus. Associando il metodo getFocus ad unavariabile (o utilizzando l'azione trace) è possibile conoscere il nome del campo di testo con il fuoco attivo in quel momento (senon è selezionato nessun campo, il metodo restituisce null ). Con setFocus invece, è possibile impostare il fuoco sul campo di testo indicato nell'argomento del metodo (tra virgolette).

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

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

Conoscere la posizione del cursore e della selezione Di un campo di testo, è possibile conoscere anche la posizione del cursore lampeggiante (posizione che varia da 0 a n , restituitadal 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 digetCaretIndex 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 cam po 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. Questomovimento può essere creato in svariatissimi modi. In questa lezione, impareremo a crearne uno semplice, in modo da capirnela tecnica.Ecco l'animazione finale che andremo a creare:




Per prima cosa, creiamo il disegno da trascinare ed inseriamolo in un movieclip (io ho disegnato una stella che ruota su sestessa).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 continuazioneil movieclip originale della stella. Ho impostato il loop a 9, per avere 9 duplicazioni. Dopo aver eseguito i primi 9 duplicati, il loopviene inizializzato nuovamente per altri 9 loop. In questo modo, i vari duplicati vengono sostituiti dai nuovi scomparendo eapparendo 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 nonsuperi 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 alkeyframe 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 abbiadeterminate caratteristiche, la più importante delle quali è essere interamente in Flash. Il sito di cui tratteremo (costruito perquesto scopo), pur essendo abbastanza elementare, contiene tutte le funzioni e le utilità più comuni: nondimeno, non utilizzaalcun 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, maanche da parte del realizzatore, che non dovrà appoggiarsi a linguaggi lato server, e che non dovrà studiare soluzioni particolariper 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 lenecessità derivanti dallo scopo che si prefigge. Quindi ho preferito non indugiare troppo nè sull'aspetto (che si basa su uno stilemolto di moda), nè sui contenuti, quanto invece a spiegare alcune delle funzioni più diffuse, e a rimandare ad articoli o tutorialper 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 difare un salto sul suo sito |thanks, mate |)

Le font usate per i filmati sono, oltre a quelle dispositivo:

• la standard 07_55 (shareware font creata da Craig Kroeger, miniml.com)• la hooge 05_55 (shareware font creata da Craig Kroeger, miniml.com)• la 04b_08 (freeware font creata da Yiji Oshimoto, 04)

Files che compongono il sito:

File sorgenti (*.fla)Tutti gli altri files (*.htm e *.gif)

Introduzione inserita sabato 16 marzo 2002

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

Dimensioni e proporzioni

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



Preciso che non esiste una dimensione "giusta", come gia spiegato in questo articolo: anche se di solito i filmati in flash vengono inseriti in unamodo che non ci sia la necessità di usare le barre di scorrimento, per visualizzarli interamente, a scelta del designer un filmato potrebbe esserLe dimensioni e le proporzioni del progetto sono così discrezionali, che a volte possono essere dettate esclusivamente dal gusto.

Inoltre, non vogliamo che il filmato venga visualizzato nella finestra principale del browser, bensì in una finestra secondaria, aperta come popu javascript. Questo ci permetterà di aggiungere alcuni attributi, come la costanza delle proporzioni e dimensioni in caso di ridimensionamento,controllo sulla posizione rispetto alle altre finestre.

Infine, dal momento che vogliamo che le dimensioni siano costanti (così da essere sicuri di cosa vedrà l'utente), per non affaticare gli occhi dirisoluzione come 1600x1200, o "uscire dal monitor" di chi naviga a 640x480, ridimensioneremo automaticamente il filmato a seconda dei casi.

Requisiti di sistema

Plugin

É dato di fatto che i browser più recenti vengano rilasciati con il plugin per il Flash5 già installato: altrettanto certo però è che moltissime persragioni più disparate, utilizzino ancora browser datati, con il plugin assente o capace di supportare solo versioni inferiori alla 5.Per questo motivo, bisogna prendere in considerazione la maggior parte, se non l'interezza, dei casi possibili, ed eventualmente lasciare all'utediscrezionalità sulle scelte da fare.

Offriremo quindi all'utente, approdato alla pagina iniziale del nostro sito, tre diverse opzioni:

1 • la possibilità di scaricare il plugin aggiornato (tramite un collegamento alla pagina di download del sito della Macromedia);

2 • la possibilità di visualizzare il sito in versione html (qualora non potesse scaricare il plugin, come ad esempio nelle aule computer delle scuuniversitari);

3 • la possibilità di visualizzare la versione in Flash.

Qualora l'utente scelga di visualizzare la versione in flash, una pagina di controllo verificherà la presenza effettiva del plugin. In caso sia presepagina in flash, altrimenti offrirà nuovamente più scelte, compresa quella di procedere comunque (il controllo sul plugin non è sicuro al 100%)

Processore

Per questo sito prediligeremo un funzionamento veloce e fluido alla presenza di grandi effetti grafici. Quindi eviteremo il più possibile l'uso di ganimazioni frame a frame, di effetti alpha, di immagini e suoni.Inoltre, per poter rendere i movimenti più scattanti, alzeremo il frame rate, dal valore di default di 12 frame al secondo, a quello di 24 frame aquesto potrebbe rendere il filmato meno gestibile per le CPU più lente, ma mescolando con un po' di attenzione leggerezza e velocità, riuscireun prodotto largamente compatibile.

Banda

Per quanto riguarda la velocità di scaricamento a disposizione dell'utente finale, ci sono tre metodi fondamentali volti a rendere le attese le piùL'uso di suoni in streaming, l'uso delle librerie condivise, e l'ottimizzazione del filmato.

In questo caso non utilizzeremo le prime due: il suono in streaming non si presta ai loop (ogni ripetizione costa in termini di peso), e non ci cocontrollarne il volume, le librerie condivise invece sono ben lungi dall'essere efficaci, sopratutto perché agli oggetti condivisi non possono esserse non nella libreria stessa.

Quello che faremo allora sarà ottimizzare il filmato, con tutti i metodi che abbiamo a disposizione. Il che significa:

• riduzione dei gradienti a favore di colori solidi

• riduzione o eliminazione delle animazioni frame a frame, a favore dell'uso di script• utilizzo diffuso di simboli presenti nella libreria del filmato, sotto forma di istanza• utilizzo di pochi suoni e di poche immagini importate, e comunque di ridotta qualità• utilizzo di poche Font, e dei caratteri dispositivo



• divisione del filmato in porzioni indipendenti

Per divisione del filmato, intendo dire questo: avremo un filmato principale, contenente il menu di navigazione, e vari filmati esterni da caricardell'utente. In questo modo, l'attesa per vedere la schermata principale sarà ridotta all'osso, e l'utente deciderà quanto e cosa aspettare.

Filmato introduttivo

Il nostro sito sarà sì dotato di un filmato introduttivo, però da visualizzare solo alla prima visita. Le volte successive, l'intro dovrà essere saltatanon annoiare inutilmente l'utente. Questo lo otterremo direttamente da Flash, senza l'utilizzo di metodi javascript o la scrittura di cookies.

Inoltre, tutti i preloader presenti in tutti i filmati saranno fatti in modo da non essere visibili ai caricamenti successivi al primo.

Sezioni indipendenti

Come già accennato, il sito sarà diviso in sezioni indipendenti, per ridurre i tempi d'attesa: in queste sezioni spiegherò diverse tecniche molto rNaturalmente i metodi utilizzati non sono gli unici possibili, e a seconda dei casi ce ne possono essere di migliori o più efficaci: l'importante è sche più si adatta alle nostre necessità.

Spiegherò quindi come creare diversi scrolling di testo, di cui uno con uno scroller oltre ai pulsanti, la creazione di finestre trascinabili, due diff immagini, l'invio di messaggi tramite il client di posta (nessun linguaggio esterno), l'interazione con il browser, il controllo del suono.

Accorgimenti vari

Oltre alle cose già accennate, ce ne sono altre che cito qui senza ordine di importanza.

Una delle cose che vogliamo, è controllo del suono di sottofondo. Non ci limiteremo a creare un pulsante per fermare e uno per avviare il suoncontrollo per il volume, in due sistemi differenti.

L'interazione con il browser si basa fondamentalmente nel richiamo di funzioni javascript, di solito inserite nella pagina html che incorpora il filcaso, invece, richiameremo funzioni raccolte in un file .js, in modo da mantenere il codice il più pulito possibile.

Daremo all'utente la possibilità di decidere sull'utilizzo di un cursore personalizzato, e di un piccolo effetto grafico di contorno. Permetteremo iin vettoriale di una pagina composta da scritte e immagini, non visibile sullo stage.

Altro piccolo accorgimento molto apprezzato, è quello di ridurre al minimo l'utilizzo di pulsanti, sostituendoli con movieclip. Questo per eliminarsgradita manina che si forma al passaggio su un pulsante: infatti la comprensione della presenza di un'area cliccabile, può essere indotta semptramite effetti definibili di "rollover". Naturalmente questo accorgimento diventa nutile nel caso dell'uso di puntatori personalizzati.i

Rettangolo e cornice

Prima di passare alla spiegazione della grafica di base, descriviamo la composizione di un oggetto che useremo più volteall'interno dei nostri filmati: un semplice rettangolo con cornice.

Il rettangolo sarà formato chiaramente da un riempimento solido di forma rettangolare, mentre la cornice sarà composta dalcontorni del rettangolo stesso, con i lati di colore differente. Il disegno finale sarà questo:

Come salta immediatamente all'occhio, questa figura dà un naturale senso di profondità: quello che sembra di guardare, è unpiano 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à acreare 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, eandiamo 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 inlarghezza 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 illoadMovie che con il loadMovieNum, prenderanno lo stesso frame rate, qualunque sia quello originale, e verranno riprodotti a24 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 impostarequesto valore comunque, per poter, nella modalità Prova Filmato, vedere quello che sarà effettivamente l'andamento delleanimazioni.

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), echiamiamolo base.

Adesso disegniamo all'interno di questo movieclip il rettangolo di base. Dal momento che una linea ingrandita può variarevisibilmente 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 ilcontrario.

Selezioniamo lo strumento rettangolo, tracciamo una figura delle stesse dimensioni del filmato principale (700x300) concontorno 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 ottenerela 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 chiameremorettangolo, 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, connome 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 ilpannello 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 poiconvertiamo in movieclip. Posizioniamo più istanze della linea a varie altezze, facendo attenzione a non esagerare, dal momentoche le linee "dotted" pesano moltissimo e affaticano non poco la cpu. Trattandosi di movieclip, possiamo modificarne il coloretramite 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, inmodo 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 ipropri 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 ilprincipale, 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, sonoil giallo, il bianco, e varie sfumature di grigio. Abbiamo deciso di posizionare il menu nella parte bassa del filmato, cioè sullabanda 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. Editiamoquesto movieclip: nel livello più in basso posizioneremo, trascinandola dalla libreria, un'istanza del movieclip rettangolo, quelloche avevamo costruito per creare la figura di base. Riduciamo le dimensioni a un rettangolo di 65x10 di lato. Posizioniamo ilrettangolo 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 ilrettangolo 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 lacornice 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 capirese 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 alsistema 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 lamanina. Ultima considerazione: scrivere true o false alla fine di quel codice, rende le due cose molto differenti. Citando dalmanuale, "..specifica se valutare per l'intera forma dell'istanza specificata (true) oppure solo il riquadro di limitazione (false). Sela figura è un quadrato, la cosa non fa differenza, dal momento che la forma e il riquadro di limitazione coincidono, ma se lafigura 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 nonabbiamo 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 ogniframe della prima animazione, corrisponde un frame nell'altra, che rappresenta l'animazione al contrario a partire dallo stessogrado di giallo.

Ad esempio, se mi posiziono con il mouse sul pulsante, inizia la trasformazione del colore: mi tolgo dal mouse, ed esattamentedal bianco raggiunto torno al giallo. Questo perché rimando al frame corrispondente: se esco quando sono al frame 3, rimandoal 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 trasformazionedi 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, esembra 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 eancora non ne sono uscito, non deve considerare lo script di ritorno. Questo perché altrimenti, movendo il mouse sopra ilmovieclip, 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 sullaposizione del puntatore (che deve essere sul movieclip). Allora l'animazione si ferma al frame 11 (pulsante completamentebianco), premuto diventa vera, e richiamiamo una funzione che si chiama "comandi", che sta nella root, e alla quale passiamocome 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, moltooriginalmente, 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 delmovieclip pulsanteFuori, che allineeremo accanto alla prima. A ciascuna diamo un nome di istanza, composta da una singolaparola, e che sarà, tranne nel caso del pulsante che porta alla pagina principale, il nome dei filmati esterni che corrispondonoalle 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 istanzacontengono 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. Equesta è 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 comenome di istanza. Editiamo il movieclip menu: in un layer ci sono i 6 movieclip pulsanteFuori. Aggiungiamo un layer, escriviamoci, 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 diuno dei pulsanti, richiamerà una funzione che si chiama comandi, alla quale come variabile viene inviato il nome di istanza delmovieclip 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 assegnaquesto parametro alla variabile nome. Quindi carica un filmato esterno, sul livello 1, che si chiama come la variabile più lastringa ".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 decisamentesgradevole, e oltretutto non innocuo. Se infatti stiamo utilizzando il filmato esterno, e lo carichiamo di nuovo, perdiamo tutte levariabili 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, caricasolo se è diversa dall'ultima impostata. Inoltre, dobbiamo inserire un nome di partenza: quello della homepage, in modo cheall'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 pulsantepremuto. Al richiamo della variabile, avviene un confronto tra ultimo e nome: se sono diversi, viene caricato il filmato esternocorrispondente, 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 homecorrisponde 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 chesia completamente bianco, ed escludendo le animazioni di rollover e rollout. Quindi, quando premiamo un pulsante, quellopremuto 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 menucon nome di istanza menu: questo contiene i sei movieclip pulsanteFuori, con i nomi di istanza riferiti alle sezioni. Dentroognuno di questo movieclip, c'è il movieclip pulsanteDentro, nome di istanza interno, all'interno del quale si svolgel'animazione di rollover. Ad ognuno dei movieclip pulsanteDentro, è associato lo script per l'animazione, e anche il controllo sullapressione del movieclip stesso.

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

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

menu.home.interno

per avviare la riproduzione useremo:

menu.home.interno.play();

per resettare la variabile:

menu.home.interno.premuto = false;

Inoltre useremo una particolare notazione: movieclip[variabile].comandoQuesto significa che, avendo una variabile che contiene il nome di un movieclip, possiamo utilizzarla per completare il percorso.Se il valore di ultimo è "home", la scrittura

menu[ultimo].interno.premuto = false;

corrisponderà a:

menu.home.interno.premuto = false;

ultimo = "home"; menu[ultimo].interno.premuto = true;menu[ultimo].interno.gotoAndStop(11);function comandi (nome) {if (nome != ultimo) {if (nome == "home") {unloadMovieNum (1);

} else {loadMovieNum (nome + ".swf", 1);}menu[ultimo].interno.premuto = false;menu[ultimo].interno.play(); ultimo = nome;



}}

Nel dettaglio:

// settiamo come ultimo "home" (è come se avessimo// premuto "home" all'avvio)

ultimo = "home";// blocchiamo il rollover del pulsante "home" menu[ultimo].interno.premuto = true;// mandiamo il movieclip "home" al frame 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 serita sabato 16 marzo 2002 Visite: 4770

ntroduzione

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

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

l loadVariables

e variabili

nanzitutto, spieghiamo come funziona il sistema del caricamento del testo. Il Flash5, tramite il comando loadVariables, ci permette di caricare, all'interno dellmato, 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 disto con estensione .txt.

a 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 &...

ome è 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 ilo valore: e qui finisce la dichiarazione della prima variabile. Le altre variabili vengono dopo secondo lo stesso schema: variabili divise dalla "& ", e nomi e

alori uniti dal "=".

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

pippo=flasher incallito

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

pippo=123456

Flash otteremo il corrispondente di un:



ippo = "123456";

non di un

ippo = 123456;

e allora volessimo caricare in Flash la variabile numerica pippo, per poterla trattare, nell'ambiente di lavoro scriveremmo:ippo = Number(pippo);

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

a sintassi

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

oadVariablesNum("news.txt", 0);

questo modo, è come se avessimo scritto:

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

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

oadVariables("news.txt", this);

ove 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 istanzacorrimento, è come se avessimo scritto:

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

uesto è 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

ffettuare un controllo molto particolare: quello dell'avvenuto caricamento delle variabili.no degli eventi propri dei movieclip, in Flash 5, è il data. Sottoponendo un comando a questo evento, verrà eseguito solo quando le variabili saranno statearicate. Quindi al nostro movieclip assoceremo:

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

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

l movieclip

l campo di testo

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



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

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

el 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 ilannello Align, posizioniamo il campo di testo con il vertice superiore sinistro al centro del movieclip.

el layer "testo", invece posizioniamo un movieclip composto da due frame: nel primo ci sarà la scritta "caricamento in corso...", il secondo sarà vuoto. Questoi darà una scritta lampeggiante nell'attesa del caricamento.assiamo al secondo frame del layer testo: selezioniamo lo strumento Text, dal pannello Text Options lo settiamo come dinamico e multilinea, e disegniamo ilampo 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à:



Font usato sarà il _sans. In questo modo non avremo bisogno di incorporare alcun carattere, dal momento che il player ne conserva già le informazioni. Leimensioni 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 eultil inea: ticchiamo anche la casella HTML (ci permetterà di usare alcuni tag html nel testo) e Word Wrap (manderà automaticamente a capo il testo alla

ne della casella). Infine, come variabile associamo news: infatti questa è la variabile che abbiamo definito nel file di testo.

orniamo 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 ();}

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 filerà stato caricato e le variabili saranno definite, il movieclip si sposterà al secondo frame, dove è presente la casella di testo che conterrà gli aggiornamenti.

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

pulsanti

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

arto 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 inuesto tutorial)

bbiamo un campo di testo dinamico che contiene un testo più lungo di quanto possa visualizzare. Per questo motivo dobbiamo essere in grado di variare laroprietà 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é loorrimento si ferma automaticamente all'inizio e alla fine del testo.

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

quello per scorrere verso il basso sarà:

ews.scroll = news.scroll + 1; oppure, in forma abbreviata: news.scroll++;

e associassimo questi comandi alla pressione di un comune pulsante, dovremo cliccare una volta per ogni riga che vogliamo scrollare: se invece littoponiamo a un enterFrame, avremo uno scroll continuo.

iamo nel secondo frame del layer "pulsanti", all'interno del movieclip news. Disegniamo sullo stage una freccia gialla, convertiamola in movieclip con il nomeeccia, e posizioniamone un'altra istanza accanto alla prima, ruotata di 180 gradi.



elezioniamo 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--;}}

a prima parte dello script è già stata spiegata: serve a stabilire se con il mouse ho cliccato sul movieclip in questione. Quando clicco, setto la variabileremuto come vera, e quando rilascio il tasto, la setto come falsa. Quando la variabile premuto è vera, il movieclip, ogni volta che viene riprodottonterFrame), 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 disto) 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 ame al secondo del frame rate.

o script del movieclip per scorrere verso il basso è perfettamente identico, tranne che per una riga: dove in uno c'è _parent.news.scroll-- metteremoparent.news.scroll++.

ltimo accorgimento, metteremo un cambio di colore del movieclip alla pressione sulla freccia.

onClipEvent (load) {colore = new Color(this);}

onClipEvent (mouseDown) {if (this.hitTest(_root._xmouse,_root._ymouse,false)) {colore.setRGB( 0xFFFFFF );premuto = true;}}onClipEvent (mouseUp) {colore.setRGB( 0xFFCC33 );premuto = false;}onClipEvent (enterFrame) {if (premuto) {_parent.news.scroll--;}}

l caricamento del movieclip creiamo una istanza dell'oggetto color legata al movieclip stesso. Quando clicchiamo sul movieclip, il colore diventerà bianco,uando (ne settiamo il valore RGB su FFFFFF), e quando rilasciamo il tasto, il colore diventerà il giallo precedentemente impostato. Lo stesso vale per entramb

frecce.e adesso lanciamo il nostro filmato, questo è quello che possiamo vedere.

unzione del menu

rima di concludere, dobbiamo riprendere in mano la funzione del menu. Infatti, quando caricheremo i filmati esterni, dovremo rendere invisibile lo scrolling, prlo riapparire quando clicchiamo sul tasto "homepage". I cambiamenti da fare sono minimi:

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

news._visible = 0;}menu[ultimo].interno.premuto = false;menu[ultimo].interno.play();clip._x = -50;

clip._alpha = 30;clip.tempo = getTimer();ultimo = nome;}}

Come impostare i tag

inserita giovedì 21 marzo 2002 Visite: 34373

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

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

I tag HTML

I tag che si possono utilizzare non sono tantissimi, ma bastano e avanzano per i nostri scopi. A parte i tag e (chefunzionano anche in relazione alle dimensioni dei caratteri usati), possiamo usare il per mandare a capo, il per icolori, le dimensioni, e le Font vere e proprie, l' <a> per i collegamenti cliccabili.

Considerato che il nostro file di testo ha questo formato:news=...................................

vediamo cosa possiamo scrivere al posto dei puntini.

Se il nostro testo recita così:

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

e al posto dei puntini mettiamo:

Il capitolo 7 di questo manuale, “Dizionario di ActionScript”, contiene una descrizione dettagliataper 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 ognielemento di ActionScript.

Se aggiungiamo anche un , da:

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

otteniamo:

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

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

Dizionario di Actionscript

nel file di testo, in output diventano:

Dizionario di Actionscript

Con <a> invece colleghiamo le parole ad un link da aprire in una pagina esterna:

<a href="http://flash-mx.html.it" target="_blank">Flash-MX.it - Risorse italiane su Flash</a>

diventa

Flash-MX.it - risorse italiane su flash

Accorgimenti particolari

• Mandando a capo con Invio, in un file di testo, nell'output otteniamo l'equivalente di un doppio , cioè a capo con rigavuota in mezzo. Questo però vale solo per alcuni browser, e su alcune piattaforme: per evitare quindi problemi di qualsiasi tipo,è meglio scrivere il file di testo senza andare mai a capo con Invio, usando invece solo il .

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

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

testo=Flash & Actionscript;

dal momento che la e commerciale, "& ", ha come significato la divisione delle variabili. Quindi il lettore percepisce come "testo"solo la prima parte, mentre non visualizza la seconda. Per evitare questo inconveniente, bisogna utilizzare la tecnica dell'URLENCODING, 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 questasezione. Nei collegamenti, poichè Flash5.it è costruito in ASP, sono presenti le e commerciali per identificare i file ASP. Per poterpassare 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 comeoggetto 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 unparticolare 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), alcunerighe 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, siamopraticamente 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 leopzioni 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 abbastanzasgradevole.

Altra cosa da considerare è l'area di stampa, e le proporzioni del disegno rispetto ad essa. Per questo motivo useremo comebase 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, dalmomento 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 identificatotramite 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 intimeline separate, potrò ottere anche stampe dei singoli frame. Per ottenere una timeline separata, il modo più semplice è dicreare un movieclip. Con il comando print, quindi, chiederò di stampare la timeline del movieclip in questione, all'interno delquale ci sarà un solo frame con l'etichetta #p. Questo significa anche che se voglio rendere stampabili più documenti, e poterlistampare 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 ilcontenuto di questi due frame.

Vediamo qualche esempio per capire meglio cosa significa. Nel frame etichettato come #p (il frame da stampare), ho uncerchio. Nel frame etichettato come #b, ho un rettangolo. Consideriamo che il cerchio rimanga di dimensioni costanti, in questeprove, 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 bassodisegniamo un rettangolo di qualsiasi colore (non verrà stampato, quindi può essere più utile che sia bianco) di dimensioni inpixel 210x290, esattamente come un foglio A4. Posizioniamo l'angolo superiore sinistro del rettangolo sul centro del movieclip, eblocchiamo il layer.



Nel frame in alto disegniamo i contenuti che appariranno nella pagina stampata, basandoci, per le posizioni e le dimensioni, sulrettangolo presente nel layer sottostante. Quando abbiamo creato tutto il contenuto, nel layer in alto aggiungiamo un framevuoto con F7. Sblocchiamo il layer inferiore, selezioniamo il rettangolo, tagliamolo e incolliamolo nel secondo frame del layersuperiore, 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ì è laloro durata nella timeline. Nel fla d'esempio, infatti, ho posizionato i due frame un po' distanziati, e allungati nella timelineperché 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 delmovieclip pagina. Questo movieclip sarà scandalosamente enorme per il nostro filmato, ma le sue dimensioni e la suaposizione non avranno alcuna influenza sulla stampa. Per cui riduciamolo volentieri anche a un decimo delle sue dimensionioriginali, e nascondiamolo spostandolo al di fuori dello stage. Infine selezioniamolo ancora una volta, e diamogli pagina comenome 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 chespecifica 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 distampa tutta l'area del frame stampabile, scalando gli oggetti per riempire la pagina in uscita, mentre nel secondo caso lasomma 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 frameetichettato 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 aquella del filmato. Inoltre printAsBitmap permette di mantenere nella stampa gli effetti alpha, mentre il semplice print nonpuò.

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 timelineprincipale, 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 printsottoposto al mouseUp, cioè al rilascio del pulsante sinistro del mouse sopra la scritta: infatti solo quando si è sul movieclip, lavariabile premuto è vera.

Adesso però vogliamo aggiungere una semplice gif rappresentante una stampante vicino alla scritta, e vogliamo che sia anchecliccabile, come la scritta. Non possiamo inserirla nel movieclip, altrimenti cambierebbe colore al rollover. Allora torniamo allatimeline principale, e posizioniamoci nel frame con il pulsante per la stampa. Andiamo al menu File/import, cerchiamo la nostragif, e importiamola nel filmato: la selezioniamo, premiamo F8 e la convertiamo in movieclip. Torniamo per l'ultima volta allatimeline 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 menuprincipale, sarà contenuta in un filmato dal nome testo.swf: per cui creiamo un nuovo documento flash, 700x300, frame rate 24fps. Andiamo al menu File/Open as Library (apri come libreria), e apriamo il file flash5.fla. Dalla libreria che appare (con il fondogrigio), 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 sullabase 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 unnuovo 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 unmovieclip con il nome caricamento. All'interno del movieclip caricamento, inseriamo un secondo frame vuoto (avremo unascritta 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 superioresinistro al centro del movieclip stesso, disegniamo un rettangolo 130x5.

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

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 delmovieclip rettangolo, tramite il pannello Info diamole come dimensioni 10 pixel in larghezza e 120 in altezza, e posizioniamolacon 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, aiquali daremo come nomi, dal basso, base e freccia. Nel layer base, trasciniamo dalla libreria un'istanza del movieclip base, alquale diamo come dimensioni 10 pixel in larghezza e altezza, e come nome di istanza, ancora base. Nel layer sopra inseriamoinvece 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 delmovieclip pulsante, e la posizioniamo con il vertice superiore sinistro sul centro del movieclip. Come nome di istanza diamopulsante.

Unione

Adesso abbiamo tutti gli elementi che ci servono. Doppio click, nella libreria, sul movieclip scorrimento. Andiamo al secondoframe del layer barra, e trasciniamo dalla libreria un'istanza del movieclip barraScroll. Diamole come nome di istanza barra, eposizioniamo 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 inferiorecoincidente con quello superiore della barra (e quindi a coordinate 0,-10), e uno con quello inferiore, coincidente con il fondodella 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 ilcampo 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 versodestra 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 deidue 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.

(eBook - Ita - Informatica)_Corso Completo Action Script Flash_(83_pag.)

Documents

Transcript of (eBook - Ita - Informatica)_Corso Completo Action Script Flash_(83_pag.)