Transcript

1 Guida Macromedia Flash MX

2 Guida Macromedia Flash MX Indice guida Macromedia Flash MX Introduzione Lo stage 1 3 Barra dei menù :: :: :: :: :: :: :: :: file modifica visualizza inserisci elabora testo controlli finestra Approfondimento finestra :: proprietà :: allinea :: mixer colori :: campioni colore :: informazioni :: scena :: trasforma :: azioni :: libreria Barra degli strumenti Il disegno La linea temporale Animazione flash :: strumenti :: visualizza :: colori :: :: :: :: livelli fotogrammi Realizzazione sito in flash esempio animazione interpolazione di forma

3 Guida Macromedia Flash MX Introduzione Macromedia Flash, nelle sue svariate versioni, è un software mediante il quale si possono creare animazioni e pagine web interattive e dinamiche. I file così prodotti sono principalmente composti da grafica vettoriale, ma possono contenere anche immagini bitmap, video e audio importati. E importante sottolineare che il file su cui si lavora ha un estensione.fla, mentre il file di pubblicazione, generato dal programma stesso, ha estensione.swf e contiene solo le informazioni utili alla visualizzazione del filmato. 1

4 introduzione Gli aspetti principali del programma sono: la barra dei menu, la barra degli strumenti, la linea temporale e lo stage. La barra dei menu è caratterizzata dalle seguenti voci: File, Modifica, Visualizza, Inserisci, Elabora, Testo, Controlli, Finestra. Selezionando le voci presenti nella barra, si aprono dei menu a comparsa, che consentono all'utente di accedere a tutta una serie di comandi ed impostazioni che permettono, non solo di elaborare il documento, ma anche di impostarne le proprietà. La barra degli strumenti ha un approccio particolarmente intuitivo, in quanto è caratterizzata da una serie di comandi iconizzati, suddivisi per tipo: strumenti, visualizza, colori e opzioni. La sua presenza nel programma attribuisce maggiore rapidità alla scelta di alcuni comandi e, di conseguenza, al lavoro. La linea temporale, posizionata sotto la barra dei menu, è indispensabile per creare un'animazione in flash. Essa è costituita dai livelli, dai fotogrammi e da un indicatore di riproduzione che ci consente di muoverci lungo la riga dei fotogrammi. Lo stage è il foglio di lavoro, all'interno del quale prende forma l'elaborato. E' possibile impostarne le dimensioni, l'unità di misura, il colore di sfondo, ecc. 2

5 Guida Macromedia Flash MX Lo stage Lo stage è il foglio di lavoro, all'interno del quale prende forma l'elaborato. Attraverso la finestra delle proprietà è possibile impostare l'unità di misura (pixel, centimetri, millimetri, pollici, punti) e le dimensioni in base al fine dell'elaborato; nel caso in cui si tratti dell'impostazione di un sito in flash, è consigliabile dimensionare lo stage sugli 800 per 600 pixel, in quanto questa è la dimensione standard utilizzata per i siti web. Per quanto riguarda lo sfondo, è possibile stabilire un colore che sarà comune a tutte le scene. All'interno dello stage sono presenti dei pulsanti che ci permettono di controllare sempre su che scena stiamo lavorando, di visualizzare tutti i simboli presenti nel documento e di ingrandire o ridurre la visualizzazione dello stage stesso. 3

6 Guida Macromedia Flash MX Barra dei menù La barra dei menu è caratterizzata dalle seguenti voci: File, Modifica, Visualizza, Inserisci, Elabora, Testo, Controlli, Finestra. : : File File comprende: nuovo > per aprire un nuovo documento; nuovo da modello > per aprire un documento, dove è possibile scegliere delle impostazioni predefinite; apri come libreria > permette di aprire la libreria di un altro file.fla nel documento corrente; chiudi > per chiudere il documento; salva > per salvare il documento; salva con nome > per salvare il documento; salva come modello > rende il documento salvato un modello da poter riutilizzare; ripristina > ripristina l'ultima versione salvata del documento; importa > per importare file nello stage; importa nella libreria > per importare file nella libreria; esporta filmato > per espoprtare il filmato con varie estensioni; esporta immagine > per esportare il fotogramma selezionato come immagine; impostazione pubblicazione > per impostare l'estensione e le caratteristiche del filmato; anteprima pubblicazione > per visualizzare un'anteprima del filmato; pubblica > per pubblicare il filmato; impostazione pagina > per impostare la pagina prima della stampa; anteprima stampa > per visualizzare la pagina prima della stampa; stampa > per far partire la stampa; invia > per spedire via il documento; 4

7 barra dei menù_modifica file recenti > visualizzazione degli ultimi quattro file elaborati; esci > per uscire dal programma. : : Modifica Modifica comprende: annulla > per annullare l'ultima azione eseguita; ripeti > per tornare all'ultima azione eseguita; taglia > per tagliare un oggetto selezionato; copia > per copiare un oggetto selezionato; incolla > per incollare un oggetto; incolla in posizione > per incollare un oggetto nella stessa posizione in cui è stato copiato; incolla speciale > permette di stabilire le modalità in cui l'oggetto copiato deve essere incollato (es. incolla come disegno flash o device indipendent bitmap); cancella > per cangellare un oggetto selezionato; duplica > per duplicare un oggetto; seleziona tutto > per selezionare tutti gli elementi presenti sullo stage; deseleziona tutto > per deselezionare tutti gli elementi; taglia fotogrammi > per tagliare i fotogrammi; copia fotogrammi > per copiare i fotogrammi; incolla fotogrammi > per incollare i fotogrammi; cancella fotogrammi > per cancellare i fotogrammi; seleziona tutti i fotogrammi > per selezionare tutti i fotogrammi; modifica simboli > per accedere all'area di lavoro relativa ai simboli presenti nella libreria; modifica selezionato > per modificare un gruppo o un oggetto all'interno del gruppo; modifica in posizione > consente di modificare un simbolo selezionato sullo stage; modifica tutto > per modificare un gruppo o un oggetto all'interno del gruppo; preferenze > consente di impostare le preferenze per operazioni generali, di modifica e relative agli appunti; tasti di scelta rapida > per visualizzare e modificare i tasti di scelta rapida; mappatura caratteri > sostituisce i caratteri mancanti con altri disponibili. 5

8 barra dei menù_visualizza : : Visualizza Visualizza comprende: vai a > permette di accedere alle varie scene del documento (primo, precente, successivo, ecc.); ingrandisci > ingrandisce la visualizzazione del foglio di lavoro; riduci > diminuisce la visualizzazione del foglio di lavoro; ingrandimento > regola in percentuale la visualizzazione del foglio di lavoro; contorno > per visualizzare solo il contorno di tutto il contenuto delle scene; rapida > visualizzazione più leggera e veloce del documento; antialiasing > visualizzazione più pesante, ma più definita del documento; testo con antialising > visualizzazione del testo più definita; linea temporale > per mostrare o nascondere la linea temporale; area di lavoro > per mostrare o nascondere l'area di lavoro; righelli > per mostrare o nascondere i livelli; griglia > per mostrare, nascondere e modificare la griglia; aggancia a pixel > se attiva quest'opzione, quando l'ingrandimento della visualizzazione è impostato su un valore pari a 400% o superiore viene visualizzata una griglia di pixel, quando si crea o si sposta un oggetto, questo è agganciato alla griglia di pixel; aggancia a oggetto > per agganciare gli oggetti in uso ad altri oggetti presenti nello stage; mostra suggerimento forma > per controllare cambiamenti di forma più complessi o artificiosi, mediante l'identificazione di punti che dovrebbero corrispondere nelle forme iniziali e finali; nascondi bordi > per nascondere o mostrare l'evidenziazione di selezione; nascondi pannelli > per nascondere o mostrare i pannelli. 6

9 barra dei menù_inserisci : : Inserisci Inserisci comprende: converti in simbolo > per convertire in simbolo (clip filmato, pulsante o grafico) l'elemento selezionato; nuovo simbolo > per creare un nuovo simbolo; livello > per aggiungere un nuovo livello; cartella livelli > per aggiungere una cartella livelli; guida movimento > per aggiungere un livello di guida movimento; fotogramma > per inserire un fotogramma nella linea temporale; rimuovi fotogramma > per cancellare il fotogramma selezionato; fotogramma chiave > per inserire un fotogramma chiave nella linea temporale; fotogramma chiave vuoto > per inserire un fotogramma chiave vuoto nella linea temporale; cancella fotogramma chiave > per eliminare il fotogramma chiaveselezionato; crea interpolazione movimento > per creare un'animazione con i fotogrammi selezionati; scena > per aggiungere una nuova scena; elimina scena > per cancellare la scena corrente. 7

10 barra dei menù_elabora : : Elabora Elabora comprende: livello > permette di modificare le proprietà del livello selezionato; scena > apre la paletta delle scene; documento > apre la paletta per le impostazioni del documento; attenua > per smussare le linee selezionandone una o più parti; raddrizza > per raddrizzare le linee selezionando uno o più segmenti; ottimizza > comando per la stampa, utilizzato per semplificare forme troppo complesse e grandi; forma > permette di applicare alcune modifiche agli elementi vettoriali selezionati, come convertire le linee in riempimento, espandere il riempimento e sfumare i bordi riempimento. Offre anche la possibilità di aggiungere ed eliminare suggerimenti forma; cambia simbolo > permette di sostituire il simbolo selezionato con un altro simbolo; duplica simbolo > permette di duplicare il simbolo selezionato; scambia bitmap > permette di sostituire l'immagine selezionata con un'altra presente nella libreria; ricalca bitmap > converte in grafica vettoriale l'immagine selezionata; trasforma > permette di trasformare l'oggetto selezionato; disponi > permette di scegliere la disposizione dell'oggetto selezionato, di bloccarlo o sbloccarlo; allinea > consente di allineare più oggetti fra di loro; fotogrammi > permette di convertire i fotogrammi selezionati in fotogrammi chiave pieni o vuoti e di invertirne l'ordine; raggruppa > permette di raggruppare gli oggetti selezionati; dividi > separa gli oggetti raggruppati; distribuisci su livelli > assegna un nuovo livello ad ogni oggetto selezionato. 8

11 barra dei menù_testo : : Testo Testo comprende: carattere > per selezionare il font da utilizzare; dimensioni > per scegliere la dimensione dei testi; stile > per scegliere tra lo stile normale, grassetto, corsivo, pedice ed apice; allinea > per stabilire l'allineamento del testo; tracciamento > per aumentare o diminuire la crenatura delle lettere; scorrevole > per rendere scorrevole un testo dinamico. 9

12 barra dei menù_controlli : : Controlli Controlli comprende: riproduci > per riprodurre all'interno dello stage il filmato; riavvolgi > riavvolge il filmato; vai alla fine > per spostarsi alla fine del filmato; passo avanti > per muoversi nella riproduzione del filmato fotogramma per fotogramma; passo indietro > per tornare indietro nella riproduzione del filmato fotogramma per fotogramma; prova filmato > per ottenere un'anteprima del filmato; debug filmato > permette di scegliere di proteggere il filmato Flash mediante password; prova scena > per visualizzare un'anteprima solo della scena corrente; riproduzione ciclica > per non interrompere la riproduzione del filmato, all'interno dello stage, al termine di esso; riproduci tutte le scene > per riprodurre tutte le scene all'interno dello stage; attiva azioni fotogramma semplici > per provare le azioni relative ai fotogrammi; attiva pulsanti semplici > per attivare le azioni ai pulsanti; senza audio > per disattivare l'audio del filmato; attiva anteprima dal vivo > consente di visualizzare i componenti sullo stage così come appariranno nel filmato pubblicato. 10

13 barra dei menù_finestra : : Finestra Finestra comprende: nuova finestra > per aprire una finestra uguale a quella in uso; barre degli strumenti > "principale" per visualizzare i comandi principali (nuovo, apri, salva, stampa ecc); "stato" apre la barra di stato; "controller" apre dei controlli per la riproduzione della scena (play, riavvolgi, passo avanti, passo indietro, vai alla fine e stop); strumenti > apre la barra degli strumenti; linea temporale > per visualizzare o nascondere la linea temporale; proprietà > per visualizzare o nascondere la finestra delle proprietà; risposte > per aprire una finestra di aiuto; allinea > per visualizzare o nascondere la finestra per l'allineamento degli oggetti; mixer colori > per visualizzare o nascondere la finestra per la gestione dei colori; campioni colori > per visualizzare o nascondere la finestra per la scelta dei colori campione; informazioni > fornisce tutte le informazioni riguardanti colore, dimensioni e posizioni delle immagini all'interno dello stage; scena > per mostrare o nascondere la finestra per la visualizzazione delle scene; trasforma > permette di trasformare l'oggetto selezionato; azioni > per visualizzare o nascondere la finestra per le azioni degli oggetti; debugger > opzione che permette di proteggere il filmato attraverso una password; esplora filmato > mostra tutti gli oggetti presenti nelle scene specificando le loro caratteristiche; riferimento > fornisce indicazioni sull'utilizzo delle azioni; output > apre una finestra per i commenti; accessibilità > apre una finestra che permette di gestire l'accessibilità al filmato e agli oggetti secondari; componenti > per l'inserimento di alcuni componenti come lo scroll bar; parametri dei componenti > per inserire i parametri dei componenti; libreria > per aprire la libreria contenente tutti gli elementi presenti nel documento; 11

14 barra dei menù_finestra librerie comuni > per aprire delle librerie predefinite contenenti suoni, pulsanti ecc; gruppi pannelli > per visualizzare i pannelli secondo delle disposizioni predefinite; salva layout pannelli > per salvare il layout personalizzato; chiudi tutti i pannelli > riduce i pannelli al minimo; sovrapponi > sovrappone due o più documenti aperti; affianca > affianca due o più documenti aperti. 12

15 Guida Macromedia Flash MX Approfondimento finestra : : Proprietà La configurazione delle proprietà di un filmato costituisce in genere la prima fase della creazione. Usare la finestra di dialogo Proprietà filmato per specificare le impostazioni per l intero filmato, ad esempio la velocità di riproduzione espressa in fotogrammi al secondo (f/s), le dimensioni dello stage ed il colore di sfondo. La velocità di riproduzione per le animazioni web dev essere impostata sui 12 f/s. Dalla finestra proprietà è possibile gestire le impostazioni della pubblicazionedel filmato dove si può scegliere il formato in cui si desidera pubblicarlo tra: flash (.svf), html (.html), immagine giff (.giff), immagine jpeg (.jpg), immagine png (.png), proiettore windows (.exe), proiettore mascintosh, quick time (.move). Nelle impostazioni di pubblicazione, in formato flash e in formato html è possibile stabilire una serie di parametri che riguardano la qualità, la compressione, l audio, la riproduzione, il caricamento, l allineamento ecc. : : Allinea E possibile usare il pannello Allinea per allineare un oggetto in relazione con altri oggetti. La finestra allinea è caratterizzata da quattro voci: allinea, distribuzione, misure uguali e spazio. La voce allinea permette di allineare gli oggetti selezionati lungo i bordi laterali o quelli superiori e inferiori, consente anche di allineare al centro. La voce distribuzione, distribuisce gli spazi tra gli oggetti selezionati, in relazione ai bordi o ai centri. La voce misure uguali consente di assegnare a due o più oggetti selezionati, le stesse dimensioni automaticamente. La voce spazio permette un equa distribuzione degli spazi tra gli oggetti selezionati. 13

16 approfondimento finestra_mixer colori_campioni colore_informazioni : : Mixer colori Servendosi della paletta mixer colori è possibile gestire sia il colore del tratto che del riempimento. Attraverso uno spettro di colore si può scegliere il colore da utilizzare e visualizzarne il codice esadecimale, in RGB o in TSL negli appositi spazi, dove è anche possibile inserire i valori numerici desiderati. Nella paletta sono presenti inoltre comandi che consentono di impostare la percentuale di opacità da utilizzare (alfa) e le modalità di riempimento (uniforme, lineare, radiale, bitmap). : : Campioni colore La paletta campioni colori contiene una serie di colori preimpostati tra i quali si può scegliere quello da utilizzare. E' possibile duplicarli, aggiungerne nuovi, eliminarne alcuni e sostituirli. : : Informazioni Il pannello informazioni è diviso in due parti: quella superiore, che contiene informazioni riguardanti le dimensioni e le coordinate di uno dei punti principali (centrale o superiore sinistro) dell'oggetto selezionato, e quella inferiore, che mostra il valore in RGB e la percentuale di opacità del colore sul quale si passa con il cursore e le coordinate della posizione occupata dal cursore stesso. 14

17 approfondimento finestra_scena_trasforma : : Scena E' possibile visualizzare tutte le scene contenute nel documento dalla paletta scena, nella quale esse si possono rinominare, duplicare, aggiungere o eliminare. : : Trasforma Per applicare delle trasformazioni a un oggetto è possibile servirsi della paletta trasforma. Essa permette infatti di modificarne le dimensioni in percentuale e di ruotarlo e inclinarlo scegliendone l'angolazione. La paletta contiene inoltre due tasti: il primo per copiare l'oggetto selezionato ed applicare la trasformazione alla copia, il secondo per ripristinare le caratteristiche dell'oggetto prima della trasformazione. 15

18 approfondimento finestra_azioni_libreria : : Azioni Flash consente di aggiungere funzioni interattive inserendo azioni nel filmato. Nella finestra azioni sono presenti le voci: azioni, operatori, funzioni, costanti, proprietà, oggetti, obsolete, componenti IU Flash ed indice. Attraverso queste voci è possibile gestire le azioni di un filmato, ad esempio impostare gli stop, in modo da disattivare la riproduzione ciclica, dare l'azione ai pulsanti per collegare più scene o fotogrammi dello stesso documento, o anche per il collegamento con file esterni non necessariamente flash. : : Libreria La libreria si presenta come una finestra divisa in due parti: quella inferiore, che contiene una lista di tutti gli elementi utilizzati nel documento, e quella superiore che mostra un'anteprima dell'oggetto selezionato dalla lista. In caso di file audio, nella parte superiore sono presenti dei tasti di riproduzione e interruzione del brano. La paletta presenta anche dei pulsanti che regolano l'ordine degli elementi contenuti nella libreria (attiva/disattiva ordinamento), stabiliscono la visualizzazione della paletta (visualizzazione stretta o larga), aggiungono nuovi simboli o cartelle alla libreria e permettono di visualizzare le proprietà dell'elemento selezionato o di cancellarlo. 16

19 Guida Macromedia Flash MX Barra degli strumenti Flash permette l'utilizzo di strumenti per il disegno di figure a mano libera o linee precise, forme e tracciati, e per il riempimento di oggetti. : : Strumenti Freccia > per selezionare e spostare oggetti; sottoselezione > per selezionare e spostare oggetti, ma anche per modificarli attraverso i punti di controllo; linea > per tracciare forme geometriche di base; lazo > per selezionare gli oggetti a mano libera, può essere utilizzato con l'opzione bacchetta magica o lazo poligonale; penna > per disegnare tracciati come linee rette o curve; testo > per inserire una casella di testo; ovale > per disegnare forme ovali, premendo il tasto maiusc è possibile creare una circonferenza; rettangolo > per disegnare un rettangolo, premendo il tasto maiusc è possibile creare un quadrato, nelle opzioni è possibile inserire il raggio dell'angolo; matita > per tracciare linee e forme a mano libera, nelle opzioni è possibile stabilire le modalità d'uso dello strumento (raddrizza, attenua, inchiostro); pennello > utilizzato per disegnare a mano libera e come riempimento, è possibile stabilirne le dimensioni, la forma e le modalità (colora riempimenti, colora dietro, colora 17

20 barra degli strumenti_visualizza colori all'interno, colora selezione; trasformazione libera > per trasformare un oggetto liberamente, è possibile ruotare, scalare, distorcere e gestire i punti di controllo; trasformazione e riempimento > per regolare un riempimento sfumato o bitmap; bottiglia inchiostro > per modificare il colore del contorno; contenitore colore > per applicareil colore al riempimento di unoggetto; strumento contagocce > per copiare da un oggetto all'altro gli attributi di tratto e riempimento; gomma > per cancellare, è possibile stabilirne dimensioni e forma, con l'opzione rubinetto attiva cancella tutto ciò che è unito e ha lo stesso colore in un oggetto, è possibile inoltre modificarne le modalità d'uso. : : Visualizza Mano > per spostare lo stage in modo da cambiare la vista senza cambiare la modalità di ingrandimento; ingranditore > per ingrandire un'area selezionata. : : Colori Tratto > per sceglire il colore del tratto; riempimento > per scegliere il colore del riempimento. 18

21 Guida Macromedia Flash MX Il disegno Dopo aver specificato le caratteristiche degli strumenti occorre fare una breve panoramica su come può essere gestito il disegno in flash. Create linee e contorni delle forme, è possibile rimodellarli in diversi modi. I riempimenti e i tratti vengono considerati come oggetti separati, pertanto, è possibile selezionare separatamente i riempimenti e i tratti per spostarli o modificarli. Usando gli strumenti linea, matita, pennello, rettangolo, ovale per disegnare, sullo stesso livello, linee o forme che si sovrappongono esse vengono suddivise in corrispondenza dei punti di intersezione. Prima di utilizzare gli strumenti di disegno occorre impostarne i parametri dalla finestra proprietà. Per disegnare con lo strumento matita bisogna impostare colore, dimensione e stile del tratto. E' possibile inoltre sceglire tra varie opzioni l'andamento dello strumento; se si desidera creare una forma geometrica occore utilizzare l'opzione "raddrizza", per disegnare linee curve smussate "smussa", per disegnare a mano libera "inchiostro". Per disegnare con lo strumento penna bisogna impostare colore, dimensione e stile del tratto, più il colore di riempimento per una curva chiusa. Lo strumento penna lavora per punti ed è per questo che ci permette di chiudere delle figure. Viene utilizzato per gestire con maggiore precisione le curve attraverso i punti 19

22 il disegno di controllo e le tangenti. Per disegnare forme geometriche di base si utilizzano gli strumenti ovale e rettangolo, i quali creano forme piene con contorno, è dunque necessario impostare le caratteristiche del tratto e del riempimento. Lo strumento linea consente di creare linee rette, è possibile regolarne l'angolazione ad intervalli di 45 tenendo premuto, durante l'utilizzo, il tasto "maiusc". 20

23 Guida Macromedia Flash MX La linea temporale Gli elementi principali che compongono la linea temporale sono i fotogrammi, i livelli e l indicatore di riproduzione. I fotogrammi sono disposti in una riga alla deastra del livello a cui appartengono. Sopra di essi vi è una riga d intestazione che riporta i numeri dei fotogrammi. I livelli, ognuno dei quali contiene un diverso elemento presente nello stage, si trovano nella colonna sinistra della linea temporale. L indicatore di riproduzione indica quale fotogramma viene visualizzato nello stage. 21

24 la linea temporale_livelli : : Livelli Sono presenti sulla linea temporale dei controlli relativi ai livelli che permettono di nasconderli, mostrarli, bloccarli, sboccarli, visualizzarne il contenuto come contorni, aggiungere nuovi livelli, cartelle livelli, livelli di guida movimento, nonché eliminare livelli e cartelle livelli. Per nascondere o mostrare uno o più livelli, svolgere una delle azioni seguenti: Cliccare a destra del nome di un livello nella colonna con l icona a forma di occhio per nasconderlo. Cliccare nuovamente per mostrare il livello. Cliccare sull icona a forma di occhio per nascondere tutti i livelli. Cliccare nuovamente per mostrare tutti i livelli. Trascinare il puntatore nella colonna con l icona a forma di occhio per nascondere o mostrare più livelli consecutivi. Cliccare tenendo premuto il tasto Alt (Windows) o il tasto Opzione (Macintosh) a destra del nome di un livello nella colonna con l icona a forma di occhio per nascondere tutti gli altri livelli. Cliccare nuovamente nella colonna tenendo premuto il tasto Alt o il tasto Opzione per mostrare tutti i livelli. Per bloccare o sbloccare uno o più livelli, svolgere una delle azioni seguenti: Cliccare a destra del nome di un livello nella colonna con l icona a forma di lucchetto per bloccarlo. Cliccare nuovamente per sbloccare il livello. Cliccare sull icona a forma di lucchetto per bloccare tutti i livelli. Cliccare nuovamente per sbloccare tutti i livelli. Trascinare il puntatore nella colonna con l icona a forma di lucchetto per bloccare o sbloccare più livelli consecutivi. Cliccare tenendo premuto il tasto Alt (Windows) o il tasto Opzione (Macintosh) a destra del nome di un livello nella colonna con l icona a forma di lucchetto per bloccare tutti gli altri livelli. Cliccare nuovamente nella colonna tenendo premuto il tasto Alt o il tasto Opzione per sbloccare tutti i livelli. 22

25 la linea temporale_livelli Cliccare sull icona a forma di lucchetto per bloccare tutti i livelli. Cliccare nuovamente per sbloccare tutti i livelli. Trascinare il puntatore nella colonna con l icona a forma di lucchetto per bloccare o sbloccare più livelli consecutivi. Cliccare tenendo premuto il tasto Alt (Windows) o il tasto Opzione (Macintosh) a destra del nome di un livello nella colonna con l icona a forma di lucchetto per bloccare tutti gli altri livelli. Cliccare nuovamente nella colonna tenendo premuto il tasto Alt o il tasto Opzione per sbloccare tutti i livelli. Per visualizzare il contenuto dei livelli come contorni, svolgere una delle azioni seguenti: Cliccare a destra del nome di un livello nella colonna con l icona a forma quadrata per attivare la visualizzazione come contorno. Cliccare nuovamente per disattivarla. Cliccare sull icona a forma quadrata per visualizzare come contorni i contenuti di tutti i livelli. Cliccare nuovamente per disattivare la visualizzazione. Trascinare il puntatore nella colonna con l icona a forma quadrata per attivare o disattivare la visualizzazione come contorni su più livelli consecutivi. Cliccare tenendo premuto il tasto Alt (Windows) o il tasto Opzione (Macintosh) a destra del nome di un livello nella colonna con l icona a forma quadrata per visualizzare come contorni i contenuti di tutti gli altri livelli. Cliccare nuovamente nella colonna tenendo premuto il tasto Alt o il tasto Opzione per disattivare la visualizzazione su tutti i livelli. Per aggiungere un nuovo livello, svolgere una delle azioni seguenti: Cliccare sul pulsante Inserisci livello nella parte inferiore della linea temporale. Cliccare Inserisci sulla barra dei menu e scegliere poi la voce Livello. Cliccare con il pulsante destro del mouse (Windows) o premere Ctrl (Macintosh) e cliccare sul nome di un livello nella linea temporale e scegliere Inserisci livello dal menu di scelta rapida. Per aggiungere una cartella livelli, svolgere una delle azioni seguenti: 23

26 la linea temporale_fotogrammi Cliccare sul pulsante Inserisci cartella livelli nella parte inferiore della linea temporale. Cliccare Inserisci sulla barra dei menu e scegliere poi la voce cartella livelli. Cliccare con il pulsante destro del mouse (Windows) o premere Ctrl (Macintosh) e cliccare sul nome di un livello nella linea temporale e scegliere Inserisci cartella livelli dal menu di scelta rapida. Per aggiungere un livello di guida movimento, svolgere una delle azioni seguenti: Cliccare sul pulsante Aggiungi guida movimento nella parte inferiore della linea temporale. Cliccare Inserisci sulla barra dei menu e scegliere poi la voce guida movimento. Cliccare con il pulsante destro del mouse (Windows) o premere Ctrl (Macintosh) e cliccare sul nome di un livello nella linea temporale e scegliere Aggiungi guida movimento dal menu di scelta rapida. Per eliminare un livello o una cartella livelli, svolgere una delle azioni seguenti: Cliccare sul pulsante Elimina livello nella parte inferiore della linea temporale. Cliccare con il pulsante destro del mouse (Windows) o premere Ctrl (Macintosh) e cliccare sul nome di un livello o di una cartella livelli nella linea temporale e scegliere Elimina livello dal menu di scelta rapida. : : Fotogrammi Come abbiamo detto in precedenza i fotogrammi sono disposti in una riga alla deastra del livello a cui appartengono; per visualizzare un fotogramma sullo stage occorre semplicemente spostare l indicatore di riproduzione sul relativo fotogramma della linea temporale. Per passare a un fotogramma: Cliccare sulla posizione del fotogramma nell intersezione della linea temporale oppure trascinare l indicatore dove si desidera collocare il fotogramma. Fotogrammi e fotogrammi chiave Nella linea temporale assumono particolare importanza i fotogrammi e i fotogrammi chiave. Il fotogramma chiave è un fotogramma all interno del quale si includono azioni per modificare un 24

27 la linea temporale_fotogrammi filmato o cambiamenti nel corso di un animazione. All interno delle animazioni di interpolazione i fotogrammi chiave giocano un ruolo fondamentale ed è grazie ad essi, per esempio, possibile cambiare la lunghezza di un animazione trascinando un fotogramma chiave sulla linea temporale. Modifiche fotogrammi e fotogrammi chiave: Selezionare, inserire, eliminare e spostare fotogrammi o fotogrammi chiave. Copiare o incollare fotogrammi e fotogrammi chiave. Trascinare fotogrammi e fotogrammi chiave in una nuova posizione sullo stesso livello o su un livello diverso. Aggiungere un elemento al fotogramma chiave corrente, trascinandolo dalla finestra libreria. Per eliminare o modificare un fotogramma dalla linea temporale Per eliminare un fotogramma selezionare il fotogramma da eliminare, scegliere inserisci > rimuovi fotogramma. Per spostare un fotogramma occorre semplicemente trascinarlo nella posizione desiderata. Per copiare un fotogramma chiave o una sequenza di fotogrammi occorre trascinare la selezione tenendo premuto alt (per Win) e ctrl (per Mac) quindi posizionarlo dove si desidera. Per copiare e incollare un fotogramma selezionare il fotogramma quindi scegliere modifica > copia fotogrammi, poi selezionare i fotogrammi da sostituire quindi scegliere modifica > incolla fotogrammi. Per aumentare la durata di un fotogramma chiave, trascinarlo fino al fotogramma finale della nuova sequenza tenendo premuto alt (per Win) e opzione (per Mac). Per cambiare la lunghezza di una sequenza interpolata, trascinare il fotogramma chiave iniziale o finale. Per convertire un fotogramma chiave in un fotogramma occorre selezionarlo e scegliere inserisci > cancella fotogramma chiave. Per aggiungere al fotogramma chiave un elemento della libreria occorre trascinarlo dalla finestra libreria all area di lavoro. 25

28 Guida Macromedia Flash MX Animazione in flash Una volta stabiliti gli elementi che devono fare parte dell'animazione, occorre decidere l'ordine d'entrata di ognuno di essi. Particolare attenzione va posta sia nei riguardi della distribuzione dei vari elementi sui rispettivi livelli (ogni oggetto su un livello differente), sia nell'ordine in cui essi vengono disposti. 26

29 animazione in flash : : Esempio animazione Come esempio, proponiamo una breve animazione per l'intro di una home page di un sito tipo. Gli elementi di questa animazione sono: pulsante, freccette, testo, immagine e rettangolo blu. Distribuiti i vari elementi sui rispettivi livelli, abbiamo stabilito il loro ingresso: Il rettangolo blu entra da sinistra verso destra, occupando la larghezza dello stage; stabilito che l'ingresso deve avvenire nell'arco di 34 fotogrammi, si inserisce un fotogramma chiave in corrispondenza del fotogramma 34 sul livello del rettangolo. Per creare il movimento, occorre inserire un'interpolazione movimento; pertanto bisogna selezionare il primo fotogramma, premere maiusc, selezionare l'ultimo fotogramma, premere il tasto destro del mouse e scegliere dal menu a comparsa "crea interpolazione movimento". A questo punto, spostandoci sull'ultimo fotogramma chiave, bisogna assegnare all'oggetto la posizione corretta d'arrivo. L'immagine è posizionata al centro nella parte inferiore dello stage e compare in dissolvenza. Per creare la dissolvenza occorre assegnare all'oggetto un'interpolazione di movimento, non per ottenere un movimento reale, ma per avere la possibilità di dare all'immagine una diversa opacità tra il momento del suo ingresso e quello del suo arrivo. Per gestire il canale alfa (dissolvenza) occorre aprire la finestra proprietà selezionando l'oggetto, ed impostare nella selezione colore la voce alfa, assegnando i valori 0% sul primo fotogramma e 100% sull'ultimo. Il testo compare anch'esso in dissolvenza, aumentando le sue dimensioni. Il processo è lo stesso di quello utilizzato per l'immagine, 27

30 animazione in flash con la differenza che nel fotogramma d'arrivo, oltre a cambiare il canale alfa dell'oggetto, ne cambiamo anche le dimensioni. Il pulsante è posizionato in basso, a destra dell'immagine, entra al quindicesimo fotogramma e resta nella stessa posizione fino alla fine dell'animazione. Le freccette che accompagnano l'entrata del pulsante, sono disposte ognuna su un livello e compaiono una dopo all'altra: la prima in corrispondenza del fotogramma 23, la seconda del 26 e la terza del 29. : : Interpolazione di forma Come abbiamo precedentemente affermato, l'interpolazione di movimento serve per creare un movimento ad un oggetto o per avere la possibilità di cambiarne il canale alfa, la luminosità e la tinta. Con l'interpolazione di forma, invece, è possibile assegnare all'oggetto (necessariamente vettoriale) un cambiamento di forma tra le condizioni di partenza e quelle d'arrivo. Va inserita aprendo la finestra proprietà del fotogramma e scegliendo dal menu della voce interpolazione l'opzione "forma". Sulla linea temporale i fotogrammi intermedi di un'interpolazione di movimento sono rappresentati da una freccia nera su uno sfondo viola, mentre quelli facenti parte di un'interpolazione di forma sono rappresentati da una freccia nera su sfondo verde. Le due interpolazioni sono alla base delle animazioni in flash perchè ci permettono di gestire tutte le proprietà degli oggetti da animare. Per controllare il risultato del lavoro ci si posiziona sul primo fotogramma e si preme invio oppure si fa una prova del filmato premendo i tasti ctrl e invio. 28

31 Guida Macromedia Flash MX Realizzazione sito in flash Per la creazione di un sito è indispensabile la conoscenza di un metodo da seguire che ci aiuti a rendere più efficiente il nostro lavoro, mediante il corretto utilizzo di alcuni software, quali freehand, photoshop e flash. Freehand è il giusto mezzo (per compatibilità con flash e professionalità) per elaborare l'impaginazione di un sito. Il primo step da eseguire in quest'operazione è quello di stabilire le dimensioni delle pagine del documento da realizzare. Per stabilire le dimensioni delle pagine, svolgere le operazioni che seguono: per impostare l'unità di misura da utilizzare, selezionare la voce pixel dalla barra degli strumenti posta in basso; per aprire la paletta di impostazione del documento, scegliere dalla barra dei menu, Finestra > Finestre di ispezione > Documento; scegliere la disposizione orizzontale del foglio; selezionare Personalizzato, dal menu a comparsa del riquadro delle dimensioni della pagina e inserire ad x e y i valori 800 e

32 realizzazione sito in flash E' consigliabile gestire anche i livelli in freehand in modo da poterli utilizzare, senza apportare modiche, in flash. Per visualizzare la paletta dei livelli, svolgere una delle operazioni che seguono: cliccare sull'icona livelli posta sulla barra degli strumenti principale; scegliere dalla barra dei menu Finestra > Pannelli > Livelli. Per creare i livelli utili, cliccare sulla freccia in alto a destra nel pannello dei livelli e scegliere nuovo dal menu a comparsa. Rinominare i livelli (doppio clic) in modo da renderne identificabile il contenuto (es. layout per la grafica delle pagine, pls per i pulsanti, img per le immagini e testo per tutto il testo presente nel documento). A questo punto si procede con l'inserimento dei dati. Cliccare sul nome di un livello prima della creazione di un elemento, per inserirlo nel livello selezionato. NB. il livello Guide deve essere sempre al di sopra degli altri e nessun livello deve esser disposto al sotto della riga grigia nella paletta dei livelli. E' preferibile, per evitare perdita di dati, salvare sia il documento freehand che le immagini utilizzate nella stessa cartella. Nel caso in cui ci sia bisogno di inserire delle immagini nel sito al quale si sta lavorando, occorre elaborarle prima con photoshop. Per una maggiore precisione nel lavoro e per non appesantire inutilmente il sito, occorre infatti ridimensionare le immagini e salvarle per il web. 30

33 realizzazione sito in flash Per cambiare le dimensioni dell'immagine: dalla barra dei menu, scegliere Immagine > Dimensione immagine; impostare la risoluzione a 72 dpi e immettere i valori di altezza e larghezza desiderati. Per salvare per il web: dalla barra dei menu, scegliere File > Salva per web; impostare il formato JPEG medium e salvare. Dopo aver completato e salvato il lavoro svolto in freehand (FH10 o versioni precedenti compatibile con flash mx; FH11 o versioni precedenti con flash mx 2004) si può passare all'uso di flash. Anche in questo caso, la prima cosa da fare è impostare le proprietà del documento. Per impostare le proprietà. svolgere una delle seguenti operazioni: dalla barra dei menu, scegliere Finestra > Proprietà, quindi inserire i valori delle dimensio ni (800 x 600), il colore di sfondo e la frequenza (12 f/s); dalla barra dei menu, scegliere Elabora > Documento ed inserire i valori desiderati. Il passo successivo consiste nell'importare in flash il documento salvato in freehand. Per importare il file: dalla barra dei menu, scegliere File > Importa, quindi selezionare il file salvato in precedenza; nella finestra che si apre, impostare il passaggio da pagine a scene e da livelli a livelli. 31

34 realizzazione sito in flash Aprire il pannello delle scene (Finestra > Scena) ed assegnare ad ogni scena un nome (doppio clic). Eliminare in ogni scena tutti gli eventuali livelli vuoti (tasto destro del mouse > elimina livello, opp. clic sul nome del livello e clic sull'icona a forma di cestino presente nella finestra della linea temporale), riconoscibili dal pallino bianco sul fotogramma nella linea temporale. Per ogni scena applicare l'azione "stop" sul fotogramma di un livello in cui non si devono applicare altre azioni (es. layout o testo). Per impostare l'azione stop: cliccare sul fotogramma al quale si deve assegnare l'azione; aprire la paletta azioni (Finestra > Azioni); dal menu a sinistra, scegliere Azioni > Controllo filmato > stop (doppio clic). Aggiungere i pulsanti: dalla barra dei menu, scegliere Inserisci > Converti in simbolo; nella finestra che si apre, inserire il nome del pulsante (es. pls home) e selezionare il comportamento pulsante; doppio clic sul pulsante appena creato per accedere all'area di impostazioni del pulsante; inserire fotogramma chiave in corrispondenza di "sopra" e impostare il cambiamento che il pulsante deve avere quando il mouse ci passa sopra (es. cambia colore); inserire altri due fotogrammi chiave per giù e premuto; selezionare premuto e disegnare sopra al pulsante l'area sensibile (es. con un rettangolo); tornare all'area di lavoro cliccando sul nome della scena nella barra al di sopra del foglio; selezionare il pulsante e aprire il pannello azioni; scegliere Azioni > Controllo filmato > goto (doppio clic); impostare i seguenti valori: scena - vai a e interrompi, tipo - inserire il nome della scena che il pulsante deve aprire, fotogramma - 32

35 realizzazione sito in flash numero fotogramma > 1 (il numero varia in base alla posizione del fotogramma che il pulsante deve aprire). NB. Nel caso in cui più scene hanno gli stessi pulsanti, è possibile copiarli da una scena e incollarli (Modifica > Incolla in posizione) nell'altra. Se ci sono pagine in cui il contenuto resta quasi completamente immutato (es. cambia solo un'immagine) è preferibile inserirle tutte in un'unica scena, aggiungendo fotogrammi chiave (ognuno con le variazioni dell'elemento) al livello interessato (es. livello img). In tal caso, agli altri livelli vanno aggiunti fotogrammi (non chiave) affinchè gli elementi comuni siano presenti in tutte le pagine. Non bisogna dimenticare di aggiungere gli stop a tutti i fotogrammi chiave inseriti. Per verificare il corretto funzionamento dei pulsanti fare una prova filmato (Controlli > Prova filmato). 33