Adobe Flash

Sommario Capitolo 1: Interfaccia _______________________________________ 1 Interfaccia Professional CS5 _____________________________________ 1 Organizzare l’ area di lavoro _____________________________________ 3 Aree di lavoro preimpostate __________________________________________ 4 Aree di lavoro personalizzate __________________________________________ 4 Eliminare aree di lavoro personalizzate__________________________________ 5 Ripristinare le preferenze originali _____________________________________ 5

Ridimensionare lo stage ________________________________________ 5 Righelli, guide e griglie __________________________________________ 6 Annulla, ripeti e cronologia ______________________________________ 8 Preferenze in Flash____________________________________________ 10 Preferenze Generali ________________________________________________ 10 Preferenze Appunti ________________________________________________ 12 Preferenze disegno _________________________________________________ 13 Preferenze Testo___________________________________________________ 14

Capitolo 2: Creare un nuovo documento _______________________ 17 Pagina iniziale _______________________________________________ 17 Creare un nuovo documento all’ avvio ____________________________ 19 Creare un nuovo documento da File ______________________________ 19 Creare un nuovo documento da modello __________________________ 19 Modificare le proprietà di un documento _________________________ 20

Capitolo 3: Aprire e salvare un documento _____________________ 23 Aprire un documento esistente__________________________________ 23 I

Sommario

Duplicare una finestra _________________________________________ 23 Salvare un documento _________________________________________ 24 Salvare un documento come modello ____________________________ 24 Ripristinare l’ ultima versione salvata_____________________________ 25

Capitolo 4: Immagini e forme ________________________________ 27 Tipi di immagini ______________________________________________ 27 Importare immagini ________________________________________________ 27 Copiare immagini __________________________________________________ 28 Modificare una bitmap ______________________________________________ 28 Convertire una bitmap in un’ immagine vettoriale ________________________ 30

Tracciati ____________________________________________________ 31 ModalitĂ di disegno ________________________________________________ 31 Linea ____________________________________________________________ 32 Forme ___________________________________________________________ 33 Penna ___________________________________________________________ 35 Matita ___________________________________________________________ 37 Pennello _________________________________________________________ 38 Pennello Spray ____________________________________________________ 39 Decorazione ______________________________________________________ 41 Riempimento a rampicante ________________________________________ 41 Riempimento griglia ______________________________________________ 43 Pennello simmetria ______________________________________________ 44 Pennello 3D ____________________________________________________ 45 Pennello edificio _________________________________________________ 47 Pennello decorato _______________________________________________ 48 Animazione fuoco _______________________________________________ 49 Pennello fiamma ________________________________________________ 50 Pennello fiore ___________________________________________________ 50 Pennello lampo _________________________________________________ 52 Sistema particellare ______________________________________________ 53 Animazione fumo ________________________________________________ 54 Pennello albero _________________________________________________ 55

II

Selezionare, spostare e rimodellare gli oggetti _____________________ 56 Selezionare gli oggetti ______________________________________________ 56 Lazo _____________________________________________________________ 57 Nascondere i bordi della selezione ____________________________________ 57 Spostare gli oggetti _________________________________________________ 57 Spostare gli oggetti nello spazio 3D ____________________________________ 58 Ruotare gli oggetti nello spazio 3D ____________________________________ 59 Regolare l’ angolo di prospettiva e il fuoco prospettico __________________ 60 Copiare o tagliare gli oggetti _________________________________________ 60 Eliminare gli oggetti ________________________________________________ 61 Rimodellare con lo strumento Selezione ________________________________ 61 Smussare, raddrizzare e ottimizzare ___________________________________ 61 Cancellare ________________________________________________________ 63 Trasformazione libera ______________________________________________ 65 Combinare e raggruppare gli oggetti __________________________________ 66 Disporre gli oggetti _________________________________________________ 67 Allineare gli oggetti _________________________________________________ 68 Aggancio _________________________________________________________ 69

Capitolo 5: Colori e palette __________________________________ 71 Modelli colore _______________________________________________ 71 Pannello Colore ______________________________________________ 71 Pannello Campioni ____________________________________________ 73 Duplicare colori in una palette ________________________________________ 74 Eliminare colori in una palette ________________________________________ 74 Aggiungere colori in una palette ______________________________________ 75 Sostituire colori in una palette ________________________________________ 75 Salvare la nuova tavolozza ___________________________________________ 76 Ordinare i colori di una palette _______________________________________ 76 Caricare i colori predefiniti ___________________________________________ 76 Nuova tavolozza predefinita _________________________________________ 77

Strumento Bottiglia inchiostro __________________________________ 77 Trasformare un riempimento con gradiente e bitmap________________ 78 Bloccare un gradiente o una bitmap ___________________________________ 79

III

Sommario

Pannello Kuler _______________________________________________ 80 Ricercare dei temi _________________________________________________ 80 Aggiungere dei temi ________________________________________________ 80 Modificare dei temi ________________________________________________ 81

Capitolo 6: Simboli_________________________________________ 83 Simboli e istanze _____________________________________________ 83 Tipi di simboli _____________________________________________________ 83 Creare un simbolo da un elemento selezionato __________________________ 84 Creare un simbolo vuoto ____________________________________________ 85

Pannello Libreria _____________________________________________ 86 Libreria esterna ______________________________________________ 87 Librerie comuni ______________________________________________ 87 Creare un simbolo tramite il pannello Libreria ______________________ 88 Modalità di modifica di un simbolo ______________________________ 88 Modificare un simbolo in modalità modifica_____________________________ 88 Modificare un simbolo in modalità posizione ____________________________ 89 Modificare un simbolo in modalità nuova finestra ________________________ 89

Eliminare un simbolo __________________________________________ 89 Duplicare un simbolo dal pannello Libreria ________________________ 90 Duplicare un simbolo da un’ istanza ______________________________ 90 Rinominare un simbolo ________________________________________ 90 Copiare simboli ______________________________________________ 91 Cercare elementi non utilizzati __________________________________ 91 Creare un’ istanza ____________________________________________ 92 Nominare un’ istanza _______________________________________________ 92 Modificare il colore di un’ istanza _____________________________________ 92 Scambiare un’ istanza _______________________________________________ 94 Modificare il tipo di un’ istanza _______________________________________ 94

IV

Ripetizione ciclica __________________________________________________ 94 Dividere un’ istanza ________________________________________________ 95

Creare, aprire e chiudere una cartella ____________________________ 95 Inserire gli elementi nelle cartelle e ordinarli ____________________________ 95

Creare un pulsante____________________________________________ 96 Attivare i pulsanti sullo stage _________________________________________ 97

Attivare la modifica in scala a 9 porzioni __________________________ 98 Modificare in scala a 9 porzioni _______________________________________ 98

Attivare il caching bitmap ______________________________________ 98

Capitolo 7: Animazioni ____________________________________ 101 Panello Linea temporale ______________________________________ 101 Cambiare la visualizzazione dei fotogrammi ____________________________ 102 Creare livelli _____________________________________________________ 103 Creare cartelle ___________________________________________________ 103 Rinominare un livello o un cartella ___________________________________ 104 Eliminare un livello o una cartella ____________________________________ 104 Bloccare o sbloccare uno o piĂš livelli o cartelle__________________________ 104 Visualizzare o nascondere uno o piĂš livelli o cartelle _____________________ 105 Visualizzare il contenuto di un livello__________________________________ 106 Distribuire gli oggetti ______________________________________________ 107 Livelli maschera __________________________________________________ 107 Creare un livello maschera _______________________________________ 108

Fotogrammi ________________________________________________ 108 Inserire fotogrammi _______________________________________________ 109 Etichettare i fotogrammi ___________________________________________ 110 Selezionare fotogrammi ____________________________________________ 110 Copiare fotogrammi _______________________________________________ 111 Eliminare i fotogrammi _____________________________________________ 111 Ridurre o aumentare la lunghezza dei fotogrammi ______________________ 112 Convertire un fotogramma chiave ____________________________________ 112 Frequenze di fotogrammi ___________________________________________ 112

Animazioni _________________________________________________ 113 V

Sommario

Interpolazione di movimento preimpostate ____________________________ 113 Salvare un’ interpolazione __________________________________________ 114 Importare una preimpostazione di movimento _________________________ 114 Esportare una preimpostazione di movimento __________________________ 115 Eliminare una preimpostazione di movimento __________________________ 115

Creare un’ interpolazione di movimento _________________________ 116 Modificare un tracciato ____________________________________________ 117 Eliminare un tracciato _____________________________________________ 118

Pannello Editor movimento____________________________________ 118 Creare un’ interpolazione classica_______________________________ 119 Creare un’ interpolazione classica lungo un tracciato ____________________ 120 Andamento personalizzato in entrata/uscita ___________________________ 122

Interpolazioni di forme _______________________________________ 123 Creare un’ interpolazione di forma ___________________________________ 123

Animazione fotogramma per fotogramma ________________________ 125 Creare un’ animazione fotogramma per fotogramma ____________________ 125

Tecnica Onion skin ___________________________________________ 126 Visualizzare più fotogrammi_________________________________________ 126 Marcatori Onion skin ______________________________________________ 126

Cinematica inversa___________________________________________ 127 Aggiungere ossi a simboli ___________________________________________ 128 Aggiungere ossi a forme ____________________________________________ 129 Eliminare gli ossi __________________________________________________ 129 Animare gli ossi ___________________________________________________ 130 Modificare l’ andamento di un’ animazione IK __________________________ 131

Capitolo 8: Testo _________________________________________ 133 Testo classico _______________________________________________ 133 Aggiungere testo classico ___________________________________________ 133 Selezionare e modificare un campo di testo ____________________________ 134 Formattare il testo ________________________________________________ 135 Opzioni per il testo dinamico e di input________________________________ 137

VI

Preferenze per il testo verticale ______________________________________ 137 Dividere il testo classico ____________________________________________ 138 Convertire un testo in un collegamento ipertestuale _____________________ 138

Testo TLF___________________________________________________ 139 Attributi del testo TLF ______________________________________________ 139

Controllo ortografico _________________________________________ 143 Utilizzare il controllo ortografico _____________________________________ 143 Impostazioni controllo ortografico ___________________________________ 144

Font_______________________________________________________ 146 Incorporare caratteri da un font in un file SWF__________________________ 146

Trova e sostituisci ___________________________________________ 147 Trovare e sostituire il testo _________________________________________ 147 Trovare e sostituire caratteri ________________________________________ 149 Trovare e sostituire colori __________________________________________ 150 Trovare e sostituire simboli _________________________________________ 151 Trovare e sostituire audio __________________________________________ 152 Trovare e sostituire video __________________________________________ 153 Trovare e sostituire bitmap _________________________________________ 155

Capitolo 9: Filtri e metodi di fusione__________________________ 157 Filtro ______________________________________________________ 157 Rimuovere un filtro _______________________________________________ 157 Copiare e incollare un filtro _________________________________________ 158 Applicare un filtro preimpostato _____________________________________ 159 Attivare o disattivare uno o pi첫 filtri __________________________________ 159 Creare una libreria di filtri __________________________________________ 159 Rinominare un filtro _______________________________________________ 160 Eliminare un filtro _________________________________________________ 160

Metodi di fusione ____________________________________________ 161 Applicare un metodo di fusione ______________________________________ 162

Capitolo 10: Suono e video _________________________________ 163 Formati audio supportati______________________________________ 163 VII

Sommario

Importare suoni __________________________________________________ 164 Aggiungere un suono ______________________________________________ 165 Aggiungere un suono ad un pulsante _________________________________ 166 Sincronizzare un suono ad un’ animazione _____________________________ 167 Gestire l’ audio senza la linea temporale_______________________________ 168 Comprimere un suono _____________________________________________ 169

Formati video supportati ______________________________________ 169 Importare un video ________________________________________________ 169 Incorporare un video ______________________________________________ 171 Gestire i video con i comportamenti __________________________________ 173 Componente FLVPlayback __________________________________________ 173

Capitolo 11: Pubblicazione ed esportazione____________________ 177 Pubblicare un filmato ________________________________________ 177 Fasi di pubblicazione ______________________________________________ 177 Scheda Formati ___________________________________________________ 178 Scheda Flash _____________________________________________________ 181 Scheda HTML ____________________________________________________ 183 Scheda GIF ______________________________________________________ 186 Scheda JPEG _____________________________________________________ 188 Scheda PNG______________________________________________________ 190

Capitolo 12: Creazione di contenuto accessibile ________________ 193 Screen reader _______________________________________________ 193 Pannello Accessibilità ________________________________________ 194

VIII

Capitolo 1 Interfaccia In questo primo capitolo inizieremo a conoscere la finestra di Flash Professional CS5 in tutte le sue parti.

Interfaccia Professional CS5 Ogni parte della finestra di Flash Pro ha dei nomi, ad esempio, nella parte in alto, troviamo la barra delle applicazioni. In essa ci sono una serie di menù a tendina, che successivamente andremo a visitare, un controllo per cambiare l’ area di lavoro e tre pulsanti con lo scopo di ridurre ad icona la finestra, ingrandirla o ripristinarla e chiudere l’ applicativo.

Figura 1: Barra delle Applicazioni

Per default la barra degli strumenti non è attiva, ma se vogliamo aggiungerla basta andare sul menù Finestra, scegliere la voce Barre degli strumenti e dal sottomenù cliccare su Principale.

Pagina | 1

Capitolo 1

Figura 2: Barra degli Strumenti

Sotto la barra delle applicazioni si trova l’ area di lavoro. All’ interno di essa è situato lo stage, zona in cui realizzeremo il nostro progetto.

Per default la barra di modifica è attiva e ci permette di cambiare lo zoom.

Figura 3: Barra di Modifica

A destra troviamo la finestra di ispezione Proprietà che permette di modificare gli attributi degli oggetti selezionati. Accanto a questo pannello c’è la Libreria da dove possiamo organizzare simboli o file importati.

Sempre a destra c’è il pannello degli Strumenti con una serie di icone che rappresentano strumenti per disegnare, selezionare, creare, colorare e ritoccare. Ogni volta che clicchiamo su uno di essi il puntatore del mouse cambia forma in base a ciò che abbiamo attivato.

Pagina | 2

Interfaccia

Figura 4: Pannello Proprietà

Organizzare l’ area di lavoro Se abbiamo tanti pannelli attivi, tutti necessari per il nostro progetto, per poter aumentare lo spazio dell’ area di lavoro, potremmo comprimerli a icona tramite 2 freccette che troviamo in alto a destra su ogni pannello. Stesso procedimento per espanderli, con l’ unica differenza che cambia l’ orientamento delle freccette.

Figura 5: Pannello Strumenti

La posizione dei pannelli può essere cambiata tramite un procedimento di trascinamento del dispositivo di aggancio di questi, Pagina | 3

Capitolo 1

che si trova in alto a sinistra. Essi possono essere posizionati in un qualsiasi punto, ma se vogliamo agganciarli ad altri pannelli o alle estremità dell’ area di lavoro, basta rilasciarli nel momento in cui si crea un bordo blu.

Se vogliamo chiudere un pannello possiamo procedere nei seguenti modi: • •

Tasto destro sul nome del pannello e scegliere la voce Chiudi.

Menù Finestra e deselezionare la voce del pannello.

Se invece vogliamo chiudere un gruppo, tasto destro sul nome del pannello e scegliere la voce Chiudi gruppo.

Se vogliamo nascondere tutti i pannelli basta premere il tasto F4 dalla tastiera.

Aree di lavoro preimpostate

Flash CS5 ci mette a disposizione una serie di layout che visualizzano determinati pannelli in base al tipo di attività che devono essere svolte.

Per poter scegliere questi layout basta andare nella barra delle applicazioni e proprio alla fine dei menù troviamo una casella combinata, basta cliccare sulla freccia che punta verso il basso per poter fare una scelta.

Per default l’ area di lavoro attiva è Fondamentali.

Aree di lavoro personalizzate

Oltre a poter usufruire di aree di lavoro preimpostate, Flash ci da la possibilità di creare dei layout personalizzati. I passaggi per fare questa operazione sono: Pagina | 4

Interfaccia

andare sul menù Finestra; selezionare la voce Area di lavoro; dal sottomenù cliccare la voce Nuova area di lavoro; a questo punto compare una finestra di dialogo dove inserire il nome del nuovo layout; 5. confermare cliccando sul pulsante OK.

1.

2.

3.

4.

Eliminare aree di lavoro personalizzate

Se un layout salvato non è più necessario è possibile eliminarlo, tramite questi passaggi: andare sul menù Finestra; selezionare la voce Area di lavoro; dal sottomenù cliccare sulla voce Gestisci aree di lavoro; a questo punto compare una finestra di dialogo da dove selezionare il layout che si vuole eliminare; 5. cliccare sul pulsante Elimina; 6. confermare cliccando sul pulsante OK.

1.

2.

3.

4.

Ripristinare le preferenze originali

Flash ci da la possibilità di ritornare indietro e ripristinare il layout originale, quello che c’era al momento del primo avvio. I passaggi per fare questa operazione sono: 1. andare sul menù Finestra; 2. selezionare la voce Area di lavoro; 3. dal sottomenù cliccare la voce Fondamentali.

Ridimensionare lo stage

Per poter visualizzare meglio un oggetto che si trova nello stage, possiamo ingrandire la visualizzazione con vari metodi.

Pagina | 5

Capitolo 1

Un primo metodo potrebbe essere dal pannello Strumenti, attivando lo strumento Ingranditore. Il puntatore si trasforma in una lente di ingrandimento e cliccando sullo stage aumentiamo la visualizzazione. Se vogliamo rimpicciolirla facciamo lo stesso procedimento, ma contemporaneamente premiamo dalla tastiera il tasto ALT. Un secondo metodo, invece, potrebbe essere dal menù Visualizza dove possiamo trovare le seguenti voci: • • • •

•

Ingrandisci: per ingrandire.

Riduci: per ridurre.

Ingrandimento: scegliamo una percentuale.

Ingrandimento: o Adatta a finestra: per adattare lo stage alle dimensioni della finestra dell’ applicativo. o Mostra tutto: per visualizzare il contenuto del fotogramma corrente. o Mostra fotogramma: per visualizzare l’ intero stage.

Tavolo di montaggio: per visualizzare l’ area di lavoro intorno allo stage.

Se abbiamo ingrandito molto lo stage, per poterlo spostare utilizziamo lo strumento Mano che troviamo nel pannello Strumenti e poi trasciniamo.

Righelli, guide e griglie

I righelli, le guide e le griglie sono utilizzate per poter posizionare degli oggetti sullo stage nel modo più preciso possibile.

Pagina | 6

Interfaccia

I righelli, se sono visibili, sono posizionati nella parte superiore e a sinistra dello stage, ma se non ci sono li inseriamo tramite questi passaggi: 1. andiamo sul menù Visualizza; 2. dal menù clicchiamo sulla voce Righelli.

Per cambiare l’ unità di misura del righello:

1. andiamo sul menù Elabora; 2. dalla finestra di dialogo scegliamo un’ unità di misura dalla casella combinata.

Se i righelli sono presenti nella nostra area di lavoro, possiamo trascinare da questi le guide verticali e orizzontali.

Nel menù Visualizza possiamo trovare le seguenti voci: •

•

Guide: o Mostra guide: per visualizzare o nascondere le guide. o Blocca guide: per bloccare le guide. o Cancella guide: per eliminare le guide. o Modifica guide: per cambiare il colore delle guide, mostrarle, agganciarle e bloccarle.

Aggancio: o Aggancia alle guide: per attivare o disattivare l’aggancio alle guide.

Sempre dal menù Visualizza possiamo inserire la griglia, modificarla e attivare o disattivare l’ aggancio tramite la voce: •

Griglia: o Mostra griglia: per visualizzare o nascondere la griglia.

Pagina | 7

Capitolo 1

•

o Modifica griglia: per cambiare il colore della griglia, mostrarla sopra o sotto gli oggetti, agganciarla, specificare le dimensioni delle celle.

Aggancio: o Aggancia alla griglia: per attivare o disattivare l’aggancio alle linee della griglia.

Figura 6: Righelli, griglie e guide

Annulla, ripeti e cronologia Per poter annullare o ripetere delle azioni possiamo: 1. andare sul menĂš Modifica;

Pagina | 8

2. cliccare sulla voce Annulla o Ripeti.

Interfaccia

Queste operazioni possono essere eseguite anche dal pannello Cronologia. Questo pannello mostra un elenco di tutti i passaggi eseguiti in un documento attivo dalla sua creazione.

Il pannello Cronologia, può essere inserito tramite questi passaggi: 1. andiamo sul menù Finestra; 2. selezioniamo dal menù la voce Altri pannelli; 3. dal sottomenù clicchiamo sulla voce Cronologia.

Da qui possiamo annullare, trascinando il cursore verso l’ alto, o ripetere, selezionando e cliccando sul pulsante Riproduci, uno o più passaggi.

Per cancellare tutte le voci che ci sono nel pannello, clicchiamo sul menù di questo e poi sulla voce Cancella cronologia.

Figura 7: Pannello Cronologia

Pagina | 9

Capitolo 1

Un’ altra cosa che ci permette di fare questo pannello è quello di copiare alcuni passaggi eseguiti nel documento corrente, in un altro documento, in questo modo: 1.

2.

3.

4.

5.

6.

selezioniamo i passaggi che vogliamo copiare; clicchiamo sull’ icona Copia passaggi; andiamo sul documento in cui vogliamo incollare i passaggi; selezioniamo l’ oggetto a cui vogliamo applicare i passaggi; andiamo sul menù Modifica; dal menù selezioniamo la voce Incolla al centro.

Grazie a questo pannello possiamo creare anche dei comandi, in questo modo: 1. selezioniamo uno o più passaggi; 2. clicchiamo sull’ icona Salva come comando; 3. immettiamo un nome.

Il comando salvato lo troverete nel menù Comandi. Sempre da questo menù, se cliccate sulla voce Gestisci comandi salvati, si apre una finestra di dialogo da dove potete rinominare il comando realizzato o eliminarlo.

Preferenze in Flash

Flash ci da la possibilità di modificare le sue impostazioni andando sul menù Modifica e cliccando sulla voce Preferenze.

Ci sono molte impostazioni, vediamone alcune.

Preferenze Generali Ecco le impostazioni generali: Pagina | 10

• •

•

•

• • •

• • •

• •

Interfaccia

All’ avvio: specifica il documento da aprire all’ avvio dell’ applicazione.

Annullamento a livello di documento o di oggetto: l’annullamento a livello di documento conserva un unico elenco di tutte le azioni effettuate, invece l’ annullamento a livello di oggetto conserva elenchi distinti relativi alle azioni effettuate sui singoli oggetti.

Livelli di annullamento: immettere un valore da 2 a 300 per impostare il numero di operazioni per l’ annullamento e il ripristino.

Area di lavoro: quando si prova un filmato possiamo scegliere se visualizzarlo sotto forma di una scheda aggiunta nell’ area di lavoro o come un finestra distaccata.

Selezione: per controllare le modalità di selezione.

Mostra descrizione comandi: consente di visualizzare la descrizione di un controllo quando il puntatore vi si sofferma.

Sensibile al contatto: consente di selezionare gli oggetti quando una parte qualsiasi di essi è inclusa nell’ area di selezione durante il trascinamento con gli strumenti Selezione o Lazo.

Mostra assi per clip filmato 3D: visualizza una sovrapposizione degli assi su tutti i clip filmato 3D. Linea temporale: per usare nella linea temporale la selezione basata sull’ estensione.

Ancoraggio con nome sulla scena: ad ogni fotogramma della prima scena viene assegnata la funzione di ancoraggio con nome.

Colore evidenziazione: scegliamo un colore di contorno per determinati elementi.

Stampa: per disattivare la stampa PostScript.

Pagina | 11

Capitolo 1

Figura 8: Preferenze Generali

Preferenze Appunti Ecco le impostazioni per gli appunti: •

ProfonditĂ colore: indica la profonditĂ massima del colore dei dati di immagini copiate negli Appunti.

Pagina | 12

• •

Interfaccia

Risoluzione: indica la risoluzione da utilizzare per i dati di immagini copiate negli Appunti.

Limite dimensioni: indica la quantità di RAM utilizzata quando si inserisce un’ immagine bitmap negli Appunti.

Figura 9: Preferenze Appunti

Preferenze disegno Ecco le impostazioni per il disegno: •

•

•

•

Mostra anteprima penna: consente di visualizzare un’anteprima dei segmenti della linea mentre si disegna.

Mostra punti solidi: consente di visualizzare i punti di ancoraggio selezionati come punti vuoti e quelli deselezionati come punti solidi.

Mostra puntatori precisi: consente di specificare che il puntatore dello strumento Penna deve essere visualizzato come mirino anziché come icona.

Collega linee: indica quanto distante deve essere l’ estremità della linea che si sta tracciando da un segmento di una linea Pagina | 13

Capitolo 1

• •

•

•

esistente affinché il punto finale si agganci al punto più vicino sull’ altra linea.

Curve smussate: indica il grado di smussatura quando si utilizza lo strumento Matita in modalità Raddrizza o Attenua.

Riconosci linee: consente di definire il grado di precisione con cui è necessario disegnare un segmento con lo strumento Matita in modo da farlo riconoscere come linea retta.

Riconosci forme: consente di definire il grado di precisione con cui è necessario disegnare cerchi, ovali, quadrati, rettangoli e archi a 90° e 180° in modo che siano riconosciuti come forme geometriche.

Precisione clic: consente di specificare quanto un elemento deve essere vicino al puntatore prima che venga riconosciuto.

Figura 10: Preferenze Disegno

Preferenze Testo Ecco le impostazioni per il testo: Pagina | 14

• • • • •

Interfaccia

Mappatura caratteri: selezioniamo un carattere da usare per la sostituzione dei caratteri mancanti.

Testo verticale: impostiamo l’ orientamento del testo.

Flusso testo da destra a sinistra: per invertire la direzione della visualizzazione del testo.

Nessuna crenatura: per disattivare la crenatura per il testo verticale.

Metodo di input: selezioniamo la lingua desiderata.

Figura 11: Preferenze Testo

Pagina | 15

Capitolo 2 Creare un nuovo documento In questo secondo capitolo impareremo com’ è possibile creare un nuovo documento e impostare le varie proprietà.

Pagina iniziale Ogni qualvolta che avviamo Flash Pro viene visualizzata una pagina iniziale contenente una serie di aree che permettono o di creare dei documenti Flash Pro utilizzando dei modelli, o di aprire i documenti più recenti, o di crearne uno nuovo, o di accedere al sito Web Flash Exchange, per scaricare applicazioni di supporto, o per accedere alle risorse fornite al sito Web di Adobe, o di accedere alla Guida in linea.

Pagina | 17

Capitolo 2

Figura 12: Pagina Iniziale

Per default la pagina iniziale è attiva, ma l’ utente potrebbe decidere di non visionarlo all’ avvio, mettendo un segno di spunta sulla checkbox Non mostrare più, che trovate in basso a sinistra.

Per poterla ripristinare nuovamente, basta seguire questi passaggi: 1. andare sul menù Modifica; 2. dal sottomenù selezionare la voce Preferenze;

Pagina | 18

Creare un nuovo documento

3. dalla finestra che appare scegliere la categoria Generali; 4. nella parte a destra, scegliere dalla casella combinata All’avvio l’ opzione Schermata di benvenuto; 5. confermare cliccando sul pulsante OK.

Creare un nuovo documento all’ avvio

Come abbiamo detto prima, quando avviamo Flash viene visualizzata la pagina iniziale, da dove possiamo creare un nuovo documento cliccando su ActionScript 3.0. A questo punto viene aperta la finestra dell’ area di lavoro, che riporta nella barra del titolo il nome del documento, che per default è “Senza nome-1”.

Creare un nuovo documento da File

Se già stiamo lavorando con Flash o abbiamo scelto precedentemente di disattivare la pagina iniziale, per poter creare un nuovo documento seguiamo questi passaggi: 1. andare sul menù File; 2. selezionare la voce Nuovo; 3. dalla finestra scegliere ActionScript 3.0.

Creare un nuovo documento da modello Oltre che creare dei documenti partendo da uno vuoto, possiamo anche utilizzare dei modelli predefiniti che ci offre il nostro Flash.

Anche in questo caso possiamo agire in 2 modi, o scegliendo il modello dalla pagina iniziale, oppure seguendo i seguenti passaggi: Pagina | 19

Capitolo 2

1.

2.

3.

4.

andare sul menù File; selezionare la voce Nuovo; dalla finestra scegliere la scheda Modelli; selezionare un modello.

Modificare le proprietà di un documento Per modificare le proprietà di un documento possiamo scegliere due strade, iniziamo dalla prima:

1. andare sul menù Elabora; 2. scegliere la voce Documento; 3. dalla finestra di dialogo che si visualizza possiamo modificare: • le dimensioni dello stage impostando dei valori in pixel nelle caselle Larghezza e Altezza, oppure selezionando l’ opzione Corrispondenza/Contenuto per fare in modo che lo stage corrisponda esattamente alla quantità di spazio utilizzata dal contenuto sullo stage.

• le dimensioni dello stage sull’ area di stampa massima disponibile selezionando Corrispondenza/Stampante.

• le dimensioni dello stage impostando i valori predefiniti selezionando Corrispondenza/Predefinite.

• la posizione e l’ orientamento degli oggetti 3D. • l’ unità di misura dei righelli.

• il colore di sfondo del documento.

• il numero di fotogrammi.

Pagina | 20

Creare un nuovo documento

La seconda strada da poter percorrere per poter modificare le proprietà del documento è dal pannello Proprietà. Se questo pannello non è visibile seguiamo questi passaggi per inserirlo: 1. andare sul menù Finestra; 2. dal menù cliccare sulla voce Proprietà.

Attenzione a quando si utilizza il secondo metodo, perché se c’è qualche elemento selezionato, sul pannello Proprietà non visualizzerete i parametri del documento, ma dell’ oggetto selezionato, quindi verificate che sia tutto deselezionato.

Figura 13: Finestra Impostazioni documento

Pagina | 21

Capitolo 3 Aprire e salvare un documento In questo capitolo vedremo i vari modi per aprire un documento esistente e i metodi per salvarlo.

Aprire un documento esistente Se si desidera aprire un documento esistente che abbiamo realizzato noi o altri, dobbiamo seguire questi passaggi: 1.

2.

3.

4.

andare sul men첫 File; selezionare la voce Apri; dalla finestra di dialogo selezionare il file; cliccare su Apri.

Duplicare una finestra

Se vogliamo aprire il documento corrente in una nuova finestra basta seguire questi due passaggi: Pagina | 23

Capitolo 3

1. andare sul menù Finestra; 2. selezionare la voce Duplica finestra.

Salvare un documento

Se abbiamo apportato delle modifiche al documento e le vogliamo salvare allora dobbiamo scegliere questo procedimento: 1. andare sul menù File; 2. selezionare la voce Salva.

Se invece vogliamo salvarlo in una posizione diversa o con un nome diverso o in un formato diverso, allora dobbiamo scegliere un’ altra voce: 1.

2.

3.

4.

andare sul menù File; selezionare la voce Salva con nome; dalla finestra fare le modifiche che di desiderano; cliccare su Salva.

Se stiamo effettuando un primo salvataggio le 2 voci si comporteranno allo stesso modo, quindi scegliere l’ una rispetto all’altra non cambia nulla.

Salvare un documento come modello

Se un documento che abbiamo realizzato lo vogliamo salvare come modello in modo da poterlo utilizzare in altre occasioni come base di un nuovo progetto, dobbiamo eseguire questi passaggi: 1. andare sul menù File; 2. selezionare la voce Salva come modello; 3. nella finestra di dialogo inseriamo il Nome;

Pagina | 24

Aprire e salvare un documento

4. selezioniamo una Categoria o creiamo una nuova categoria; 5. inseriamo una Descrizione del modello.

Ripristinare l’ ultima versione salvata Se vogliamo annullare tutte le operazioni fatte ad un documento, in modo da ripristinare l’ ultima versione che abbiamo salvato, eseguiamo questi 2 passaggi: 1. andare sul menÚ File; 2. selezionare la voce Ripristina.

Pagina | 25

Capitolo 4 Immagini e forme In questo capitolo tratteremo le immagini, dalla loro importazione alla loro modifica e le forme, facendo una panoramica di tutti gli strumenti che ci permettono di elaborarle.

Tipi di immagini Le immagini possono essere di tipo vettoriale o bitmap. Le prime descrivono le immagini utilizzando linee e curve dette vettori, invece le seconde descrivono le immagini utilizzando punti colorati detti pixel.

Importare immagini

Per importare delle immagini in Flash Pro seguiamo i seguenti passaggi:

1. andiamo sul menÚ File; 2. selezioniamo la voce Importa; 3. clicchiamo sulla voce Importa nello stage, per inserire l’immagine sia sullo Stage che nel pannello Libreria, oppure Importa nella libreria per inserirla solo nel pannello Libreria.

Pagina | 27

Capitolo 4

Figura 14: Immagine importata nel pannello Libreria e nello Stage

Copiare immagini Invece di importare le immagini e possibile copiarle da altre applicazioni: 1. copiare l’ immagine dall’ applicazione di origine; 2. da Flash Pro andare sul menù Modifica; 3. cliccare sulla voce Incolla al centro.

Modificare una bitmap

Per modificare le proprietà di un’ immagine bitmap:

1. selezionare con un clic la bitmap che si trova nello stage;

Pagina | 28

Immagini e forme

2. andare sul menù Finestra; 3. cliccare sulla voce Proprietà; 4. a questo punto si visualizza il pannello Proprietà, dove possiamo cambiare la posizione e la dimensione.

5. Se l’ immagine bitmap non si trova sullo stage, ma solo nel panello Libreria, possiamo selezionarla lì e poi cliccare sul pulsante Proprietà che troviamo nella parte inferiore del pannello stesso e da qui possiamo applicare ad esempio una smussatura, che migliora la qualità delle immagini bitmap quando vengono modificate in scala, oppure possiamo comprimerle in formato JPEG (con perdita) o in PNG/GIF (senza perdita).

Figura 15: Proprietà Bitmap

Pagina | 29

Capitolo 4

Convertire una bitmap in un’ immagine vettoriale Per poter manipolare l’ immagine bitmap come grafica vettoriale e ridurre le dimensioni del file, applichiamo una conversione seguendo questi passaggi: 1.

2.

3.

4.

5.

selezionare l’ immagine bitmap; andare sul menù Elabora; selezionare la voce Bitmap; cliccare sulla voce Ricalca bitmap; dalla finestra di dialogo immettere un valore per Soglia colori, immettere un valore per Area minima per indicare il numero di pixel circostanti da considerare quando si assegna un colore al pixel, selezioniamo un’ opzione per Adattamento curva per attenuare i contorni, selezioniamo un’ opzione per Soglia angoli per determinare se gli spigoli devono rimanere acuti o arrotondati.

Figura 16: Finestra Ricalca Bitmap

Pagina | 30

Tracciati

Immagini e forme

Un tracciato è un insieme di uno o più segmenti retti o curvi. Questi sementi sono contrassegnati da una serie di punti, detti punti di ancoraggio.

I punti di ancoraggio possono essere di due tipi: • •

punto curva. punto d’ angolo.

I primi uniscono i segmenti in una curva continua, invece in corrispondenza dei secondi il tracciato cambia direzione.

Modalità di disegno

Esistono due modalità di disegno: • •

disegno unione. disegno oggetto.

Se si disegna nella modalità Disegno unione e tali disegni vengono sovrapposti, saranno uniti in modo automatico in un’ unica forma.

Se invece si disegna nella modalità Disegno oggetto, anche se le forme vengono sovrapposte, esse non saranno unite, ma considerate degli oggetti separati.

Per passare da una modalità ad un’ altra clicchiamo su uno strumento che ci permette di disegnare e poi sullo strumento Disegno unione o Disegno oggetto dal pannello Strumenti.

Se si vuole convertire una forma realizzata con la modalità Disegno unione in una forma con le caratteristiche della modalità Disegno oggetto, effettuiamo i seguenti passaggi: Pagina | 31

Capitolo 4

1.

2.

3.

4.

selezionare la forma; andare sul menù Elabora; selezionare la voce Combina oggetti; cliccare sulla voce Unione.

Linea

Per poter disegnare una linea retta:

1. andiamo sul pannello Strumenti; 2. clicchiamo sullo strumento Linea; 3. trasciniamo lo strumento sullo stage.

Per poter modificare le caratteristiche di una linea (posizione, dimensione, colore, stile e dimensione del tratto) adiamo sul pannello Proprietà.

Se durante la creazione di una linea premiamo contemporaneamente il tasto SHIFT dalla tastiera, essa sarà realizzata con un angolo di 45° o multipli di quest’ ultimo.

Figura 17: Strumento Linea

Pagina | 32

Forme

Immagini e forme

Con Flash Pro possiamo realizzare delle forme semplici come poligoni, stelle, rettangoli e ovali.

Per realizzare una forma semplice basta:

1. andare sul pannello Strumenti; 2. cliccare sullo strumento Forme; 3. tenere premuto un po’ di più se l’ icona dello strumento non rappresenta la forma desiderata; 4. trascinare sullo stage per realizzare la forma.

Una volta realizzata la forma, per modificare le sue caratteristiche: 1. selezioniamo la forma se non è selezionato; 2. andiamo sul pannello Proprietà.

Da questo pannello modifichiamo la posizione della forma creata, la dimensione, il colore del riempimento, il colore, la dimensione e lo stile del tratto, l’ estremità e lo spigolo.

Quando clicchiamo un po’ di più sullo strumento Forme, dal menù che compare, non si visualizza la voce Stella o Poligono, ma Polystar. Una volta scelto questo strumento, dal pannello Proprietà clicchiamo sul pulsante Opzioni… nella sezione Impostazioni strumenti. Quando si clicca su questo pulsante si apre una finestra di dialogo da dove possiamo scegliere lo stile, cioè se realizzare un poligono o una stella, il numero di lati e la dimensione delle punte.

Oltre a queste forme semplici, sullo stesso strumento, troviamo anche due forme basilari, rettangolo di base e ovale di base. Le caratteristiche di queste forme possono essere modificate sempre dal pannello Proprietà, ma rispetto a quelle semplici hanno delle Pagina | 33

Capitolo 4

opzioni in più, infatti nel Rettangolo di Base possiamo arrotondare gli angoli in modo proporzionale o non, invece nell’ Ovale di Base possiamo modificare: • • • •

Angolo iniziale.

Angolo finale.

Raggio interno.

Chiudi tracciato.

Sia quando è attivo il Rettangolo di Base che l’ Ovale di Base visualizziamo nel pannello Proprietà il pulsante Ripristina che ristabilisce le opzioni iniziali.

Figura 18: Strumento Ovale

Pagina | 34

Penna

Immagini e forme

Lo strumento Penna, che troviamo sempre nel pannello Strumenti, ci permette di realizzare dei segmenti retti o curvi.

Per attivare questo strumento: 1.

2.

3.

4.

andiamo sul pannello Strumenti; clicchiamo sullo strumento Penna; clicchiamo sullo stage per inserire un primo punto; facciamo un secondo clic sullo stage per realizzare un secondo punto e in modo automatico si crea un segmento (facciamo altri clic sullo stage in base all’ oggetto da realizzare).

Per aggiungere altri punti di ancoraggio sui segmenti realizzati:

1. andiamo sul pannello Strumenti; 2. clicchiamo un po’ più allungo sullo strumento Penna; 3. dal menù scegliamo la voce Strumento Aggiungi punto di Ancoraggio; 4. cliccare sul segmento, nella zona in cui vogliamo aggiungere il punto di ancoraggio.

Se invece vogliamo rimuovere un punto di ancoraggio:

1. andiamo sul pannello Strumenti; 2. clicchiamo un po’ più allungo sullo strumento Penna; 3. dal menù scegliamo la voce Strumento Elimina punto di Ancoraggio; 4. clicchiamo sul punto di ancoraggio che vogliamo eliminare dal segmento.

Per convertire un punto d’ angolo senza linee di direzione in un punto d’ angolo con linee di direzione indipendenti: Pagina | 35

Capitolo 4

1. andiamo sul pannello Strumenti; 2. clicchiamo un po’ più allungo sullo strumento Penna; 3. dal menù scegliamo la voce Strumento Converti punto di Ancoraggio; 4. cliccare sul punto da convertire e trascinare nella direzione voluta.

Quando si attiva lo strumento Penna, dal pannello Proprietà possiamo modificare il colore, la dimensione, lo stile, l’ estremità e lo spigolo del tratto, la posizione e la dimensione del segmento.

Per poter spostare un punto di ancoraggio lo trasciniamo tramite lo strumento Sottoselezione che troviamo sempre nel pannello Strumenti.

Figura 19: Strumento Penna

Pagina | 36

Matita

Immagini e forme

Un altro strumento per disegnare è la Matita: 1. andiamo sul pannello Strumenti; 2. clicchiamo sullo strumento Matita; 3. trasciniamo lo strumento sullo stage.

Per poter modificare le caratteristiche (posizione, dimensione, colore, stile e dimensione del tratto, estremità e spigolo) adiamo sempre sul pannello Proprietà.

Inoltre, sempre dal pannello Strumenti, nell’ area Opzioni, con lo strumento Matita attivo, possiamo scegliere diverse modalità di disegno: • • •

Raddrizza: per disegnare linee rette.

Attenua: per disegnare linee curve attenuate.

Inchiostro: per disegnare linee a mano libera.

Figura 20: Strumento Matita

Pagina | 37

Capitolo 4

Pennello Un altro strumento per disegnare è il Pennello: 1. andiamo sul pannello Strumenti; 2. clicchiamo sullo strumento Pennello; 3. trasciniamo lo strumento sullo stage.

Per poter modificare le caratteristiche (posizione, dimensione, colore, stile e dimensione del tratto, colore del riempimento, estremità e spigolo) adiamo sempre sul pannello Proprietà.

Inoltre, sempre dal pannello Strumenti, nell’ area Opzioni, con lo strumento Pennello attivo, possiamo scegliere diverse modalità di colorazione: • • • • •

Colore normale: colora sopra linee e riempimenti sullo stesso livello.

Colora riempimenti: colora le aree piene e vuote lasciando inalterate le linee.

Colora dietro: colora le aree vuote dello stage sullo stesso livello lasciando le linee e i riempimenti invariati.

Colora selezione: colora solo l’ area selezionata.

Colora all’ interno: colora il riempimento e mai le linee.

Sempre in questa zona del pannello Strumenti, possiamo cambiare la dimensione e la forma del pennello.

Pagina | 38

Immagini e forme

Figura 21: Strumento Pennello

Pennello Spray Lo strumento Pennello Spray permette di nebulizzare delle zone dello stage.

Questo strumento può essere utilizzato o con un colore di riempimento o con un simbolo, argomento che affronteremo più avanti.

Ecco i passaggi per utilizzare il Pennello Spray:

1. andiamo sul pannello Strumenti; 2. clicchiamo un po’ più allungo sullo strumento Pennello se l’icona dello strumento non è quella desiderata; Pagina | 39

Capitolo 4

3. dal menù clicchiamo sulla voce Pennello Spray; 4. trasciniamo lo strumento sullo stage.

Le caratteristiche del Pennello Spray possono essere sempre modificate dal pannello Proprietà.

Vediamo quali sono le opzioni di questo strumento: • • • • • • • • • • •

Modifica: apre una finestra di dialogo che permette di selezionare un simbolo di tipo grafico o clip filmato.

Selettori colori: consente di selezionare un colore di riempimento.

Scala: permette di ridimensionare il simbolo utilizzato come particella della nebulizzazione.

Larghezza scala: permette di ridimensionare la larghezza di un simbolo utilizzato come particella della nebulizzazione.

Altezza scala: permette di ridimensionare l’ altezza di un simbolo utilizzato come particella della nebulizzazione.

Modifica in scala casuale: ogni particella della nebulizzazione ha dimensioni diverse.

Ruota simbolo: ruota la particella della nebulizzazione basata su un simbolo attorno ad un punto centrale.

Rotazione casuale: ruota la particella della nebulizzazione basata su un simbolo in modo casuale.

Larghezza: imposta la larghezza della particella della nebulizzazione quando non si utilizza un simbolo.

Altezza: imposta l’ altezza della particella della nebulizzazione quando non si utilizza un simbolo.

Angolo pennello: imposta l’ angolo di rotazione in senso orario da applicare alla particella della nebulizzazione quando non si utilizza un simbolo.

Pagina | 40

Immagini e forme

Figura 22: Strumento Pennello Spray

Decorazione Lo strumento disegno Decorazione permette di creare forme geometriche e motivi di elevata complessitĂ .

Per utilizzarlo, basta trascinarlo sullo stage.

Quando dal pannello Strumenti attiviamo questo strumento, dal pannello ProprietĂ possiamo scegliere diversi effetti di disegno che adesso andremo ad analizzare ad uno a uno.

Riempimento a rampicante

L’ effetto disegno Riempimento a rampicante consente di riempire lo stage, un simbolo o un’ area chiusa con un pattern a rampicante.

Pagina | 41

Capitolo 4

Per default le forme predefinite sono i fiori e le foglie, ma noi li possiamo cambiare dal pulsante Modifica con dei simboli (ovviamente se non ci sono simboli all’ interno del pannello Libreria non troverete nulla).

Le opzioni che possiamo modificare sono: • • • • • •

Angolo ramo: specifica l’ angolo del pattern del ramo.

Colore ramo: specifica quale colore utilizzare per il ramo.

Scala pattern: ridimensiona l’ oggetto.

Lunghezza segmento: specifica la lunghezza del segmento tra i nodi delle foglie e dei fiori.

Anima pattern: per animare i fiori mentre vengono disegnati.

Passaggio fotogramma: specifica il numero di fotogrammi al secondo.

Figura 23: Strumento Decorazione, riempimento a rampicante

Pagina | 42

Riempimento griglia

Immagini e forme

L’ effetto disegno Riempimento griglia consente di riempire lo stage, un simbolo o un’ area chiusa con un simbolo della libreria.

Per selezionare un simbolo clicchiamo sul pulsante Modifica.

Nella sezione Opzioni avanzate possiamo modificare il layout scegliendo tra: • • •

Pattern a tessere: i simboli vengono disposti in un semplice schema a griglia.

Pattern a mattoni: i simboli vengono disposti in uno schema a griglia con offset orizzontale.

Pattern a pavimento: i simboli vengono disposti in uno schema a griglia con offset verticale.

Inoltre troviamo: •

• • • •

Colora oltre il bordo: per consentire al riempimento di sovrapporsi al bordo del simbolo, della forma o dello stage che funge da contenitore.

Ordine casuale: per consentire la distribuzione casuale dei simboli nella griglia.

Spaziatura orizzontale: specifica la distanza orizzontale in pixel tra i simboli utilizzati nel riempimento della griglia.

Spaziatura verticale: specifica la distanza verticale in pixel tra i simboli utilizzati nel riempimento della griglia.

Scala pattern: ridimensiona i simboli.

Pagina | 43

Capitolo 4

Figura 24: Strumento Decorazione, riempimento griglia

Pennello simmetria L’ effetto disegno Pennello simmetria permette di disporre i simboli simmetricamente intorno a un punto centrale.

Anche in questo caso per inserire un simbolo utilizziamo il pulsante Modifica.

Nella sezione Opzioni avanzate troviamo: •

•

Ruota intorno: ruota le forme attorno a un punto fisso specificato.

Rifletti attraverso la linea: riflette le forme a uguale distanza in base a una linea invisibile che specificate.

Pagina | 44

• • •

Immagini e forme

Rifletti attraverso il punto: inserisce due forme a uguale distanza attorno a un punto fisso che specificate.

Traslazione griglia: crea una griglia utilizzando le forme disegnate.

Verifica collisioni: impedisce che le forme disegnate entrino in collisione le une con le altre.

Figura 25: Strumento Decorazione, pennello simmetria

Pennello 3D L’ effetto disegno Pennello 3D permette di disegnare più istanze del simbolo sullo stage con una prospettiva 3D. Pagina | 45

Capitolo 4

Anche in questo caso utilizziamo il pulsante Modifica per inserire un simbolo.

Nella sezione Opzioni avanzate troviamo le seguenti proprietà: • •

• • • •

Oggetti massimi: il numero massimo di oggetti da disegnare.

Area spray: la distanza massima dal cursore alla quale le istanze vengono disegnate.

Prospettiva: permette di attivare o disattivare l’ effetto 3D. Scala distanza: determina l’ intensità dell’ effetto 3D. Raggio di scala casuale: consente di determinare casualmente il ridimensionamento per ciascuna istanza.

Raggio di rotazione casuale: consente di determinare casualmente la rotazione per ciascuna istanza.

Figura 26: Strumento Decorazione, pennello 3D

Pagina | 46

Pennello edificio

Immagini e forme

L’ effetto disegno Pennello edificio permette di disegnare edifici sullo stage.

Questo effetto ha le seguenti proprietà: • •

Tipo di edificio: lo stile dell’ edificio da creare.

Dimensione edificio: la larghezza dell’ edificio.

Figura 27: Strumento Decorazione, pennello edificio

Pagina | 47

Capitolo 4

Pennello decorato L’ effetto disegno Pennello decorato consente di disegnare linee decorative.

Questo effetto ha le seguenti proprietà nella sezione Opzioni avanzate: • • • •

Stile linea: lo stile della linea da disegnare.

Colore pattern: il colore della linea.

Dimensione pattern: la dimensione del motivo selezionato.

Larghezza pattern: la larghezza del motivo selezionato.

Figura 28: Strumento Decorazione, pennello decorato

Pagina | 48

Animazione fuoco

Immagini e forme

L’ effetto disegno Animazione fuoco crea un fuoco stilizzato fotogramma per fotogramma.

Le proprietà per questo effetto disegno sono: • • • •

• • •

Dimensione fuoco: la larghezza e l’ altezza delle fiamme.

Velocità fuoco: la velocità dell’ animazione.

Durata fuoco: il numero di fotogrammi.

Termina animazione: per creare un’ animazione di un fuoco che si spegne.

Colore fiamma: il colore delle punte delle fiamme.

Colore nucleo fiamma: il colore alla base delle fiamme.

Scintilla di fuoco: il numero di singole fiamme alla base del fuoco.

Figura 29: Strumento Decorazione, animazione fuoco

Pagina | 49

Capitolo 4

Pennello fiamma L’ effetto disegno Pennello fiamma consente di disegnare delle fiamme.

Le proprietà per questo effetto disegno sono: • •

Dimensione fiamma: la larghezza e l’ altezza delle fiamme.

Colore fiamma: il colore al centro delle fiamme.

Figura 30: Strumento Decorazione, pennello fiamma

Pennello fiore L’ effetto disegno Pennello fiore consente di disegnare dei fiori.

Pagina | 50

Immagini e forme

Sulla sezione Opzioni avanzate troviamo le seguenti proprietà: • • • • • • •

Colore fiore: il colore dei fiori.

Dimensione fiore: la larghezza e l’ altezza dei fiori.

Colore foglia: il colore delle foglie.

Dimensione foglia: la larghezza e l’ altezza delle foglie.

Colore frutto: il colore del frutto.

Ramo: per disegnare rami.

Colore ramo: il colore dei rami.

Figura 31: Strumento Decorazione, pennello fiore

Pagina | 51

Capitolo 4

Pennello lampo L’ effetto disegno Pennello lampo consente di creare dei fulmini.

Le proprietà per questo effetto disegno sono: • • • • •

Colore lampo: il colore del lampo.

Scala lampo: la lunghezza del lampo.

Animazione: permette di animare il lampo.

Larghezza raggio: lo spessore del lampo.

Complessità: il numero di ramificazioni di ogni ramo del lampo.

Figura 32: Strumento Decorazione, pennello lampo

Pagina | 52

Sistema particellare

Immagini e forme

L’ effetto disegno Sistema particellare consente di creare animazioni di particelle.

Se invece di una forma vogliamo utilizzare un simbolo, clicchiamo sul pulsante Modifica.

Questo effetto disegno ha le seguenti proprietà: • • • • • • • • •

•

Lunghezza totale: la durata dell’ animazione in fotogrammi.

Generazione particelle: il numero di fotogrammi in cui le particelle vengono generate.

Frequenza per fotogramma: il numero di particelle generate per fotogramma.

Durata: il numero di fotogrammi durante i quali una particella rimane visibile sullo stage.

Velocità iniziale: la velocità con cui si muove ogni particella.

Dimensione iniziale: la dimensione iniziale di ogni particella.

Direzione iniziale minima: il valore minimo delle possibili direzioni di movimento di ogni particella.

Direzione iniziale massima: il valore massimo delle possibili direzioni di movimento di ogni particella.

Gravità: con un valore positivo le particelle cambiamo direzione come se stessero cadendo, invece con un valore negativo vanno verso l’ alto.

Velocità di rotazione: i gradi di rotazione da applicare a ciascuna particella per ogni fotogramma.

Pagina | 53

Capitolo 4

Figura 33: Strumento Decorazione, sistema particellare

Animazione fumo L’ effetto disegno Animazione fumo crea un fumo.

Questo effetto disegno presenta le seguenti proprietà: • • • • • •

Dimensione fumo: la larghezza e l’ altezza del fumo.

Velocità fumo: la velocità dell’ animazione.

Durata fumo: il numero di fotogrammi.

Termina animazione: per creare un’ animazione di un fumo che si esaurisce progressivamente.

Colore fumo: il colore del fumo.

Colore di sfondo: il colore di sfondo del fumo.

Pagina | 54

Immagini e forme

Figura 34: Strumento Decorazione, animazione fumo

Pennello albero L’ effetto disegno Pennello Albero consente di creare disegni a forma di albero.

Le Opzioni avanzate per questo effetto disegno sono: • • • • •

Stile albero: il tipo di albero da creare.

Scala albero: le dimensioni dell’ albero.

Colore ramo: il colore dei rami dell’ albero.

Colore foglia: il colore delle foglie.

Colore fiore/frutto: il colore dei fiori e dei frutti.

Pagina | 55

Capitolo 4

Figura 35: Strumento Decorazione, pennello albero

Selezionare, spostare e rimodellare gli oggetti Vediamo alcuni strumenti che ci permettono di selezionare, spostare e rimodellare gli oggetti.

Selezionare gli oggetti

Per poter selezionare un oggetto possiamo utilizzare lo strumento Selezione che troviamo nel pannello Strumenti, basta cliccare con questo sull’ oggetto da selezionare. Se, invece, dobbiamo selezionare piÚ oggetti trasciniamo sempre lo stesso strumento creando un perimetro che racchiude tutti gli elementi desiderati.

Pagina | 56

Immagini e forme

Se si vogliono selezionare tutti gli oggetti presenti sullo stage:

1. andiamo sul menù Modifica; 2. clicchiamo sulla voce Seleziona tutto (oppure su Deseleziona tutto nel caso in cui vogliamo svolgere il procedimento inverso).

Lazo

Lo strumento Lazo ci permette di fare una selezione a mano libera: 1. andiamo sul pannello Strumenti; 2. clicchiamo sullo strumento Lazo; 3. trasciniamo lo strumento e creiamo un’ area di selezione.

Quando questo strumento è attivo, nell’ area Opzioni del pannello Strumenti possiamo cambiare la modalità in modalità Poligono.

Con questo sistema non dobbiamo trascinare, ma creare un’ area di selezione cliccando e muovendo il mouse in modo da realizzare delle linee intorno all’ elemento di nostro interesse. Per chiudere il tracciato facciamo doppio clic.

Vi ricordo che lo strumento Lazo non può essere utilizzato con forme realizzate tramite il metodo Disegno oggetto.

Nascondere i bordi della selezione

Se vogliamo nascondere i bordi che indicano gli elementi selezionati: 1. andiamo sul menù Visualizza; 2. dal menù clicchiamo sulla voce Nascondi bordi.

Spostare gli oggetti

Per poter spostare gli oggetti ci sono diversi metodi, ad esempio: Pagina | 57

Capitolo 4

1. selezioniamo uno o più oggetti; 2. attiviamo lo strumento Selezione dal pannello Strumenti e trasciniamo, oppure tramite i tasti unidirezionali dalla tastiera, oppure immettiamo un valore nelle caselle x e y che troviamo nel pannello Proprietà o nel pannello Informazioni.

Spostare gli oggetti nello spazio 3D

Vediamo com’è possibile spostare gli oggetti nello spazio 3D: 1.

2.

3.

4.

andiamo sul pannello Strumenti; clicchiamo sullo strumento Traslazione 3D; selezioniamo un clip filmato; trasciniamo lungo i tre assi X, Y e Z per spostare l’ oggetto, oppure immettiamo un valore per X, Y o Z dal pannello Proprietà.

Figura 36: Strumento Traslazione 3D

Pagina | 58

Ruotare gli oggetti nello spazio 3D

Immagini e forme

Questa volta vediamo quali sono i passaggi che ci permettono di ruotare un oggetto nello spazio 3D:

1. andiamo sul pannello Strumenti; 2. clicchiamo un po’ più allungo sullo strumento Traslazione 3D se l’ icona non è quella desiderata; 3. dal menù scegliamo Rotazione 3D; 4. selezioniamo un clip filmato; 5. trasciniamo uno dei controlli per poterci muovere attorno ad un asse.

Figura 37: Strumento Rotazione 3D

Pagina | 59

Capitolo 4

Questa operazione potrebbe essere fatta anche dal pannello Trasforma che inseriamo nell’ area di lavoro dal menù Finestra.

Regolare l’ angolo di prospettiva e il fuoco prospettico

Aumentando o diminuendo l’ angolo di prospettiva, il clip filmato sembrerà più vicino o più lontano.

Per modificarlo:

1. selezioniamo un clip filmato a cui abbiamo applicato una Traslazione 3D o una Rotazione 3D; 2. dal pannello Proprietà immettiamo un valore nel campo Angolo prospettiva.

Invece, il fuoco prospettico controlla l’ orientamento dell’ asse Z.

Per modificarlo:

1. selezioniamo un clip filmato a cui abbiamo applicato una Traslazione 3D o una Rotazione 3D; 2. dal pannello Proprietà immettiamo un valore nel campo Fuoco prospettico.

Per riposizionare il fuoco prospettico al centro dello stage clicchiamo sul pulsante Ripristina.

Copiare o tagliare gli oggetti

I passaggi che ci permettono ci copiare o tagliare gli oggetti sono: 1.

2.

3.

4.

5.

selezioniamo uno o più oggetti; andiamo sul menù Modifica; dal menù clicchiamo sulla voce Copia o Taglia; selezioniamo un altro livello, un’ altra scena o un altro file; andiamo di nuovo sul menù Modifica;

Pagina | 60

Immagini e forme

6. dal menù clicchiamo sulla voce Incolla in posizione (per incollare nella stessa posizione), oppure Incolla al centro (per incollare al centro dell’ area di lavoro).

Eliminare gli oggetti

Per eliminare un oggetto o più oggetti dallo stage seguiamo i seguenti passaggi:

1. selezioniamo uno o più oggetti; 2. premiamo Canc o Backspace dalla tastiera, oppure dal menù Modifica clicchiamo sulla voce Cancella o Taglia.

Rimodellare con lo strumento Selezione

Con lo strumento Selezione, oltre che a selezionare gli oggetti, possiamo modellarli:

1. creiamo una forma; 2. deselezioniamo; 3. ci mettiamo vicino al bordo e trasciniamo in modo da dargli la forma desiderata.

Smussare, raddrizzare e ottimizzare

Per poter smussare, raddrizzare o ottimizzare delle linee o delle curve già disegnate, seguiamo i seguenti passaggi: 1.

2.

3.

4.

selezioniamo la forma; andiamo sul menù Elabora; dal menù selezioniamo la voce Forma; dal sottomenù clicchiamo sulla voce Smussatura avanzata (se vogliamo smussare) oppure sulla voce Raddrizzamento avanzato (se vogliamo raddrizzare) oppure sulla voce Ottimizza (se vogliamo ridurre il numero di curve usate).

Pagina | 61

Capitolo 4

In tutti e tre i casi si visualizza una finestra di dialogo.

Nel primo caso scegliamo se smussare l’ angolo inferiore o superiore e impostiamo un valore di intensità per la smussatura, invece nel secondo caso, immettiamo solamente un valore per l’ intensità di raddrizzamento, nell’ ultimo caso specifichiamo un valore per l’intensità di ottimizzazione e decidiamo se farci visualizzare un messaggio che indica il numero di segmenti ottimizzati.

Figura 38: Finestra Smussatura avanzata

Figura 39: Finestra Raddrizzamento avanzato

Pagina | 62

Immagini e forme

Figura 40: Finestra Ottimizza Curve

Sempre nello stesso sottomenù, oltre alle voci precedenti, troviamo anche: • •

•

Converti linee in riempimenti: le linee selezionate vengono convertite in riempimenti.

Espandi in riempimento: per espandere la forma di un oggetto pieno. Dalla finestra di dialogo impostiamo la distanza e la direzione.

Sfuma bordi riempimento: per sfumare i bordi di un oggetto. Dalla finestra di dialogo impostiamo la distanza, il numero di passaggi per ottenere l’ effetto desiderato e la direzione.

Cancellare

Per cancellare tutti gli elementi in uno stage facciamo doppio clic sullo strumento Gomma che troviamo nel pannello Strumenti, se invece vogliamo eliminare solo alcune parti degli elementi seguiamo i seguenti passaggi: 1. andiamo sul pannello Strumenti; 2. clicchiamo sullo strumento Gomma; 3. trasciniamo lo strumento nella zona da cancellare.

Pagina | 63

Capitolo 4

Nella zona delle Opzioni del pannello Strumenti, quando lo strumento Gomma è attivo, possiamo impostare diverse modalità di cancellazione: • • • • •

Cancella normale: cancella tratti e riempimenti.

Cancella riempimenti: cancella solo i riempimenti.

Cancella linee: cancella solo i tratti.

Cancella riempimenti selezionati: cancella riempimenti selezionati.

Cancella all’ interno: cancella solo il riempimento.

solo

i

Inoltre potete cambiare la forma e la dimensione della gomma e anche attivare il modificatore Rubinetto che vi permette con un semplice clic di cancellare il tratto o il riempimento, tutto dipende dalla zona in cui cliccate.

Figura 41: Strumento Gomma

Pagina | 64

Trasformazione libera

Immagini e forme

Per modellare gli oggetti, un altro strumento che ci offre Flash è Trasformazione libera.

Quando attiviamo questo strumento dal pannello Strumenti, si inserisce un riquadro intorno alla forma con delle maniglie che ci permette di scalare, ruotare o inclinare questa.

Figura 42: Strumento Trasformazione libera

Queste operazioni possono essere svolte anche eseguendo i seguenti passaggi: 1. selezioniamo una oggetto grafico; 2. andiamo sul menĂš Elabora;

Pagina | 65

Capitolo 4

3. dal menù selezioniamo la voce Trasforma; 4. dal sottomenù possiamo scegliere le seguenti voci: • Distorci: trasciniamo le maniglie per poter distorcere.

• Involucro: trasciniamo le maniglie per poter modificare l’ involucro.

• Scala: trasciniamo le maniglie per poter modificare le dimensioni. Se trasciniamo quelle degli angoli la modifica sarà proporzionale.

• Ruota e inclina: trasciniamo una delle maniglie agli angoli per ruotare, invece quelle centrali per inclinare.

• Scala e ruota: si apre una finestra di dialogo che ci permette di immettere una percentuale per ridimensionare l’ oggetto e un valore per impostare l’angolo di rotazione.

• Ruota di 90° in senso orario: ruota l’ oggetto di 90° gradi in senso orario.

• Ruota di 90° in senso antiorario: ruota l’ oggetto di 90° in senso antiorario.

• Rifletti in verticale: riflette l’ oggetto in verticale.

• Rifletti in orizzontale: riflette l’ oggetto in orizzontale.

• Elimina trasformazione: rimuove tutte le trasformazioni applicate all’ oggetto.

Combinare e raggruppare gli oggetti

Per poter creare delle nuove forme oltre che a modificarle, possiamo anche combinarle o raggrupparle con i seguenti passaggi: 1. selezioniamo due o più forme; 2. andiamo sul menù Elabora; 3. dal menù selezioniamo la voce Combina oggetti;

Pagina | 66

Immagini e forme

4. dal sottomenù possiamo scegliere le seguenti voci: • Unione: unisce due o più forme.

• Intersezione: crea un oggetto dall’ intersezione di due o più forme.

• Ritaglio interno: rimuove le parti di un oggetto che sono sovrapposte da un altro oggetto disposto avanti.

• Ritaglio: utilizza il contorno di un oggetto per ritagliare un altro oggetto e rimangono solo le parti dell’ oggetto che sta in basso e che sono sovrapposte dall’ oggetto in primo piano.

Invece, per raggrupparle:

1. selezioniamo le forme; 2. andiamo sul menù Elabora; 3. dal menù clicchiamo sulla voce Raggruppa ( se invece li vogliamo separare, dal menù di Elabora clicchiamo sulla voce Separa).

Disporre gli oggetti

Per poter portare un oggetto in avanti o indietro rispetto ad una o più forme, eseguiamo i seguenti passaggi: 1.

2.

3.

4.

selezioniamo l’ oggetto; andiamo sul menù Elabora; dal menù selezioniamo la voce Disponi; dal sottomenù clicchiamo su una delle seguenti voci: • Porta in primo piano: sposta l’ oggetto davanti a tutti gli altri.

• Porta dietro: sposta l’ oggetto dietro a tutti gli altri.

• Porta avanti: sposta l’ oggetto in avanti di una posizione.

Pagina | 67

Capitolo 4

•

Sposta dietro: sposta l’ oggetto dietro di una posizione.

Allineare gli oggetti

Per poter allineare gli oggetti, seguiamo i seguenti passaggi: 1.

2.

3.

4.

selezioniamo gli oggetti; andiamo sul menù Elabora; dal menù selezioniamo la voce Allinea; dal sottomenù clicchiamo su una delle seguenti voci: • A sinistra.

• Centrato orizzontalmente.

• A destra.

• In alto.

• Centrato verticalmente.

• In basso.

Se vogliamo allineare in base alle dimensioni dello stage, allora sempre da questo sottomenù clicchiamo sulla voce Allinea allo stage.

Inoltre possiamo allineare gli oggetti anche dal pannello

Allinea che inseriamo Figura 43: Pannello Allinea nell’ area di lavoro dal menù Finestra e cliccando sulla voce Allinea.

Pagina | 68

Immagini e forme

Aggancio Un altro metodo che ci permette di allineare automaticamente degli oggetti tra di loro è la funzione di aggancio.

Flash Pro ci mette a disposizione tre metodi, per attivarli eseguiamo i seguenti passaggi: 1. andiamo sul menù Visualizza; 2. dal menù selezioniamo la voce Aggancio; 3. dal sottomenù clicchiamo su una di queste voci: • Allinea agganciato: consente di agganciare gli oggetti in base a una tolleranza di aggancio.

• Aggancia ai pixel: consente di agganciare gli oggetti direttamente a singoli pixel sullo stage.

• Aggancia agli oggetti: consente di agganciare gli oggetti direttamente ad altri oggetti lungo i bordi.

Per regolare la tolleranza di aggancio:

1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Preferenze; 3. dalla finestra di dialogo clicchiamo a sinistra sulla voce Disegno; 4. scegliamo una impostazione per Collega linee.

Pagina | 69

Capitolo 5 Colori e palette In questo capitolo vedremo com’ è possibile applicare diversi tipi di riempimenti e tratti, e creare e modificare delle palette.

Modelli colore I modelli colore descrivono i colori visualizzati e utilizzano dei valori numerici per rappresentare lo spettro visibile del colore.

Lo spazio colore è una variante del modello di colore e include una gamma specifica di colori.

I modelli di colore sono tantissimi, ma quelli più conosciuti sono RGB (Rosso, Verde, Blu), HSB (Tonalità, Saturazione, Luminosità) e CMYK (Ciano, Magenta, Giallo, Nero).

Pannello Colore

Il pannello Colore ci permette di modificare il colore dei tratti e dei riempimenti di varie forme.

I controlli che troviamo su questo pannello sono: •

Colore tratto: modifica il colore del tratto.

Pagina | 71

Capitolo 5

• •

• •

•

•

Colore di riempimento: modifica il colore del riempimento.

Menù tipo di colore: serve a cambiare lo stile del riempimento: o Nessuno: elimina il riempimento. o Tinta unita colore: crea un riempimento uniforme di un singolo colore. o Lineare sfumatura: crea un gradiente che si modifica lungo un percorso lineare. o Radiale sfumatura: crea un gradiente che si modifica verso l’ esterno creando un percorso circolare rispetto a un punto focale. o Bitmap: inserisce come riempimento un’ immagine scelta dall’ utente.

HSB: per modificare i valori della tonalità, saturazione e luminosità del riempimento.

RGB: per modificare la densità del rosso, del verde e del blu del riempimento.

Alfa: per modificare l’opacità del riempimento.

Selettore colore: serve Figura 44: Pannello Colore a selezionare visivamente un colore trascinando il mirino.

Pagina | 72

• •

Colori e palette

Esadecimale: visualizza il valore esadecimale del colore selezionato.

Flusso: se applichiamo un gradiente possiamo applicare un flusso diverso, che può essere: o Estendi colore: questa è l’ opzione predefinita che applica i colori oltre i limiti del gradiente. o Rifletti colore: applica i colori con un effetto di specchio riflettente. o Ripeti colore: ripete il gradiente dall’ inizio alla fine.

Pannello Campioni Il pannello Campioni permette di gestire delle tavolozze di colori. Per visualizzare questo pannello: 1. andare sul menù Finestra; 2. scegliere la voce Campioni.

Oltre alla predefinita

tavolozza possiamo

inserire la Web 216. La Figura 45: Pannello Campioni particolarità di questa palette è che i colori che la compongono appariranno uguali su tutti i browser. Per poterla impostare seguiamo questi semplici passaggi: 1. inserire il pannello Campioni, se non è visibile, come descritto precedentemente; Pagina | 73

Capitolo 5

2. aprire il menù del pannello.; 3. dal menù scegliere la voce Web 216.

Duplicare colori in una palette Se vogliamo duplicare un colore che c’è nella palette in modo di averlo in una posizione diversa e ritrovarlo all’ interno della tavolozza più facilmente, seguiamo questi passaggi: 1. cliccare sul colore da duplicare all’ interno della palette; 2. dal menù del pannello Campioni scegliere la voce Duplica campione; 3. a questo punto il puntatore del mouse cambierà forma in un secchiello; 4. clicchiamo in un punto vuoto del pannello Campioni per duplicarlo.

Eliminare colori in una palette

Se invece vogliamo eliminare un colore all’ interno di una palette, seguiamo questi passaggi: 1. cliccare sul colore che vogliamo eliminare dalla palette; 2. dal menù del pannello Campioni cliccare sulla voce Elimina campione.

Un metodo che ci permette di eliminare tutti i colori dalla palette è: 1. dal menù del pannello Campioni; 2. clicchiamo sulla voce Cancella colori.

In realtà rimarranno due colori, il nero e il bianco.

Pagina | 74

Aggiungere colori in una palette

Colori e palette

Se vogliamo aggiungere dei colori a una tavolozza, seguiamo questi passaggi: 1. dal menù del pannello Campioni clicchiamo sulla voce Aggiungi colori…; 2. dalla finestra di dialogo selezioniamo il file che contiene i colori da aggiungere; 3. confermiamo cliccando sul pulsante Ok.

Un altro metodo per poter aggiungere dei colori ad una tavolozza è utilizzando lo strumento Conta gocce.

Ecco i passaggi:

1. aprire un documento esistente, da cui prelevare i colori; 2. cliccare sullo strumento Conta gocce dal pannello Strumenti; 3. cliccare sul documento, nella zona dove si trova il colore da prelevare; 4. a questo punto il puntatore del mouse cambierà forma in un secchiello; 5. cliccare in un punto vuoto del pannello Campioni per aggiungerlo.

Sostituire colori in una palette

Invece di aggiungere dei colori ad una tavolozza esistente, la possiamo sostituire con degli altri colori.

Ecco come fare:

1. dal menù del pannello Campioni cliccare sulla voce Sostituisci colori…; Pagina | 75

Capitolo 5

2. dalla finestra di dialogo selezionare il file che contiene i colori da sostituire; 3. confermare cliccando sul pulsante Ok.

Salvare la nuova tavolozza

Ogni volta che facciamo un cambiamento ad una tavolozza, possiamo scegliere di salvarla in modo da poterla utilizzare successivamente.

Ecco come fare:

1. dal menù del pannello Campioni cliccare sulla voce Salva colori…; 2. dalla finestra di dialogo scegliere la destinazione e il nome da dare alla nuova palette; 3. confermare cliccando sul pulsante Ok.

Ordinare i colori di una palette

Se si desidera ordinare i colori di una palette in base alla tonalità, seguiamo questi passaggi: 1. cliccare sul menù del pannello Campioni; 2. cliccare sulla voce Ordina per colore.

Caricare i colori predefiniti

Se si vuole ripristinare la palette predefinita, seguiamo questi passaggi: 1. cliccare sul menù del pannello Campioni; 2. cliccare sulla voce Carica colori predefiniti.

Pagina | 76

Nuova tavolozza predefinita

Colori e palette

Nei paragrafi precedenti abbiamo visto che nel pannello Campioni c’è una tavolozza predefinita che possiamo ripristinare in un qualsiasi momento.

Un’ altra cosa che abbiamo notato è la possibilità di personalizzare e creare nelle nuove tavolozze.

In questo paragrafo descriveremo quali sono i passaggi per impostare una nuova tavolozza come predefinita: 1. una volta modificata o creata la tavolozza; 2. cliccare sul menù del pannello Campioni; 3. cliccare sulla voce Salva come predefiniti.

Strumento Bottiglia inchiostro Lo strumento Bottiglia inchiostro permette di modificare il colore del tratto, lo spessore e lo stile.

Per utilizzare questo strumento seguiamo i seguenti passaggi:

1. andiamo sul pannello Strumenti; 2. clicchiamo un po’ più allungo sull’ icona che mi rappresenta lo strumento Secchio di vernice se non è visibile l’ icona dello strumento Bottiglia inchiostro; 3. scegliamo un colore da applicare al tratto dal pannello Proprietà o dal pannello Strumenti; 4. dal pannello Proprietà impostiamo lo stile selezionando un’estremità tra: • Nessuno: è allineato all’ estremità del tratto.

• Rotonda: aggiunge un’ estremità arrotondata.

Pagina | 77

Capitolo 5

• Quadrata: aggiunge un’ estremità quadrata.

5. scegliamo anche lo spigolo che può essere: • Troncato.

• Rotondo.

• Smussato.

6. clicchiamo sul tratto dell’ oggetto per applicare le modifiche.

Trasformare un riempimento con gradiente e bitmap

Se applichiamo come riempimento un gradiente o una bitmap, possiamo modificare la direzione, le dimensioni o il centro di quest’ultimi.

Per fare queste operazioni seguiamo i seguenti passaggi:

1. dal pannello Strumenti attiviamo con un clic lo strumento Trasformazione gradiente; 2. clicchiamo sull’ area che ha come riempimento un gradiente o una bitmap; 3. a questo punto si visualizza un riquadro con delle maniglie che hanno lo scopo di effettuare dei cambiamenti tramite il loro trascinamento.

Pagina | 78

Colori e palette

Figura 46: Strumento Trasformazione gradiente

Bloccare un gradiente o una bitmap Per far si che un riempimento con gradiente o bitmap si estenda su tutto lo stage e che quindi gli oggetti diventano delle maschere, ecco cosa fare: 1. dal pannello Strumenti attivare o lo strumento Pennello o Secchio di vernice; 2. selezionate come riempimento gradiente o bitmap; 3. alla fine del pannello Strumenti cliccare su Blocca riempimento; 4. a questo punto clicchiamo nell’ area dove vogliamo posizionare il centro del riempimento, e poi spostarci nelle altre aree.

Pagina | 79

Capitolo 5

Pannello Kuler Il pannello Kuler ci permette di accedere a gruppi di colori che sono stati creati da una comunità online di grafici, inoltre, è possibile creare e salvare temi per condividerli con gli altri.

Per visualizzare questo eseguiamo questi passaggi:

pannello

1. andare sul menù Finestra; 2. selezioniamo la voce Estensioni; 3. dal sottomenù clicchiamo sulla voce Kuler.

Ricercare dei temi

Figura 47: Pannello Kuler

Per ricercare dei temi tramite il pannello Kuler basta inserire all’ interno della casella di testo di quest’ ultimo o il nome del tema o di un tag o di un autore.

Aggiungere dei temi

Per aggiungere all’ interno del pannello Campioni dei temi dobbiamo:

1. selezionare un tema dal pannello Sfoglia; 2. clicchiamo sul triangolino che troviamo a destra del tema; 3. selezioniamo la voce Aggiungi al pannello Campioni.

Pagina | 80

Modificare dei temi

Colori e palette

Per modificare dei temi dobbiamo:

1. per prima cosa selezionare il tema che ci interessa dal pannello Sfoglia e fare doppio click; 2. dal pannello Crea modifichiamo il tema; 3. cliccare sul pulsante Salva tema per poterlo salvare.

Pagina | 81

Capitolo 6 Simboli In questo capitolo vedremo la differenza tra simboli e istanze e le operazioni che si possono svolgere su di essi.

Simboli e istanze Un simbolo può essere formato da un’ immagine, un pulsante o un clip filmato.

Un’ istanza è una copia di un simbolo situata sullo stage o all’ interno di un altro simbolo.

Se modifichiamo un simbolo allora saranno aggiornate tutte le sue istanze, se invece modifichiamo un’ istanza né le altre e né il simbolo subiranno delle variazioni.

L’ utilizzo dei simboli comporta una riduzione notevole delle dimensioni del file.

Tipi di simboli

Durante la creazione di un simbolo possiamo scegliere la sua tipologia tra: Pagina | 83

Capitolo 6

•

• •

simboli grafici: per immagini statiche o per creare animazioni utilizzando la linea temporale principale. I suoni e i comandi interattivi non funzionano con questo tipo di simbolo. simboli di pulsante: per creare pulsanti interattivi. simboli di clip filmato: per creare animazioni riutilizzabili.

Essi dispongono di una propria linea temporale.

Creare un simbolo da un elemento selezionato

In questo paragrafo elencheremo i passaggi per poter trasformare un oggetto che si trova nello stage in un simbolo.

1.

2.

3.

4.

selezionare uno o più elementi sullo stage; andare sul menù Elabora; cliccare sulla voce Converti in simbolo; dalla finestra di dialogo immettere il nome del simbolo, il tipo e dalla griglia specificare il punto di registrazione; 5. confermare cliccando sul pulsante Ok.

Pagina | 84

Simboli

Figura 48: Finestra Converti in simbolo

Creare un simbolo vuoto Questa volta, per creare il simbolo, non partiremo da uno o pi첫 elementi, ma creeremo direttamente un simbolo vuoto.

Ecco i passaggi:

Pagina | 85

Capitolo 6

1. andare sul menù Inserisci; 2. cliccare sulla voce Nuovo simbolo; 3. dalla finestra di dialogo immettere il nome del simbolo e specificare la tipologia; 4. confermare cliccando sul pulsante Ok; 5. a questo punto si apre la modalità di modifica dei simboli dove è possibile creare il contenuto del simbolo; 6. per tornare alla modalità di modifica del documento, andare sul menù Modifica; 7. cliccare sulla voce Modifica documento.

Pannello Libreria Ogni volta che creiamo un simbolo, questo , in modo automatico, viene inserito nel pannello Libreria. Se tale pannello non è visibile, seguiamo questi passaggi: 1. andare sul Finestra; 2. cliccare sulla Libreria.

menù voce

Questo pannello è composta da due parti. La parte superiore visualizza un’ anteprima del simbolo selezionato, invece la parte inferiore contiene un Pagina | 86

Figura 49: Pannello Libreria

elenco di tutti i simboli.

Simboli

Libreria esterna Per poter aprire la libreria di un file Flash Pro salvato nel proprio PC, seguiamo i seguenti passaggi: 1.

2.

3.

4.

5.

andare sul menĂš File; selezionare la voce Importa; cliccare sulla voce Apri libreria esterna; dalla finestra di dialogo individuare e selezionare il file; cliccare sul pulsante Apri.

Librerie comuni

Le librerie comuni contengono elementi giĂ pronti per essere utilizzati.

Per poter inserire sullo stage un elemento di una libreria comune:

1. andare sul menĂš Finestra; 2. cliccare sulla voce Librerie comuni; 3. scegliere una libreria; 4. trascinare sullo stage un elemento.

Figura 50: Pannello Librerie comuni, pulsanti

Pagina | 87

Capitolo 6

Creare un simbolo tramite il pannello Libreria Un altro metodo per creare un simbolo è attraverso il pannello Libreria.

1. clicchiamo sullo strumento Nuovo simbolo che troviamo in basso a sinistra del pannello; 2. si apre la finestra di creazione del simbolo; 3. dopo aver creato il simbolo tramite gli strumenti visti, chiudere la finestra ed esso sarà memorizzato nel pannello.

Modalità di modifica di un simbolo

Per poter modificare un simbolo possiamo utilizzare tre modalità: •

•

•

Modifica: con questa modalità si apre una finestra da dove è possibile modificare il simbolo senza che vengono visualizzati gli altri oggetti presenti sullo stage.

Modifica in posizione: con questa modalità modifichiamo il simbolo e visualizziamo gli altri oggetti che sono posizionati nello stage, ma disattivati in modo da poterli distinguere.

Modifica in nuova finestra: con questa modalità il simbolo sarà modificato in una nuova finestra in modo che anche la linea temporale principale sia visibile.

Modificare un simbolo in modalità modifica I passaggi per modificare un simbolo in modalità modifica sono: 1. andare sul menù Modifica; 2. cliccare sulla voce Modifica simboli; 3. modificare il simbolo;

Pagina | 88

Simboli

4. per uscire da questa modalità andare sul menù Modifica e cliccare sulla voce Modifica documento.

Modificare un simbolo in modalità posizione I passaggi per modificare un simbolo in modalità posizione sono: 1.

2.

3.

4.

andare sul menù Modifica; cliccare sulla voce Modifica in posizione; modificare il simbolo; per uscire da questa modalità andare sul menù Modifica e cliccare sulla voce Modifica documento.

Modificare un simbolo in modalità nuova finestra

I passaggi per modificare un simbolo in modalità nuova finestra sono: 1. selezionare un’ istanza del simbolo sullo stage; 2. cliccare su di essa con il tasto destro del mouse e cliccare sulla voce Modifica in nuova finestra; 3. modificare il simbolo; 4. per uscire cliccare sulla casella Chiudi in alto a destra.

Eliminare un simbolo

Se vogliamo eliminare un simbolo dobbiamo:

1. selezionare il simbolo dal pannello Libreria; 2. cliccare in basso a destra del pannello sull’ icona del cestino.

Oppure

Pagina | 89

Capitolo 6

2. dal menù del pannello clicchiamo su Elimina.

Duplicare un simbolo dal pannello Libreria Per duplicare un simbolo dal pannello Libreria:

1. selezioniamo il simbolo dal pannello Libreria; 2. tasto destro del mouse; Oppure

2. dal menù del pannello; 3. cliccare sulla voce Duplica; 4. dalla finestra di dialogo inseriamo il nome del simbolo, specifichiamo la tipologia e altre opzioni; 5. per confermare cliccare sul pulsante OK.

Duplicare un simbolo da un’ istanza Per duplicare un simbolo da un’ istanza: 1.

2.

3.

4.

selezionare un’ istanza del simbolo; andare sul menù Elabora; selezionare la voce Simbolo; dal sottomenù cliccare sulla voce Duplica simbolo.

L’ istanza sarà sostituita con un’ istanza del simbolo duplicato.

Rinominare un simbolo Per cambiare un nome ad un simbolo: Pagina | 90

Simboli

selezionare il simbolo dal pannello Libreria; tasto destro del mouse; cliccare sulla voce ProprietĂ ; dalla finestra di dialogo immettere un nuovo nome nella casella Nome; 5. per confermare cliccare sul pulsante OK. 1.

2.

3.

4.

Copiare simboli

Se necessitiamo di un simbolo che si trova in un altro documento, non è necessario ricrearlo, ma semplicemente copiarlo tramite questi passaggi: 1.

2.

3.

4.

5.

6.

7.

8.

aprire il documento che contiene il simbolo da copiare; selezionare dal pannello Libreria il simbolo; andare sul menĂš Modifica; cliccare sulla voce Copia; aprire il documento in cui vogliamo incollare; selezionare il pannello Libreria; andare sul menĂš Modifica; cliccare sulla voce Incolla.

Cercare elementi non utilizzati

A volte capita di trovarsi nel pannello Libreria degli elementi che abbiamo importato o creato e che alla fine del nostro progetto non abbiamo utilizzato. Flash Pro ci mette a disposizione uno strumento che ricerca questi elementi in modo da poterli cancellare e non creare confusione.

Ecco i passaggi:

Pagina | 91

Capitolo 6

1. andare sul menù del pannello Libreria; 2. cliccare sulla voce Elementi non in uso.

Creare un’ istanza

Dopo che un simbolo è stato creato è possibile realizzare una o più istanze. I passaggi per poter creare un’ istanza sono molto semplici: 1. selezionare un livello dal pannello Linea temporale; 2. selezionare un simbolo dal pannello Libreria; 3. trascinarlo sullo stage.

L’ istanza sarà aggiunta nel primo fotogramma chiave a sinistra rispetto a quello selezionato.

Nominare un’ istanza

Per poter dare un nome ad un’ istanza:

1. selezionare l’ istanza sullo stage; 2. dal pannello Proprietà immettere un nome nella casella Nome istanza.

Modificare il colore di un’ istanza Per poter modificare i colori di un’ istanza:

1. selezioniamo un’ istanza sullo stage; 2. dal pannello Proprietà, nella sezione Effetto colore, selezioniamo una delle opzioni del menù Stile tra: • Luminosità: regola la luminosità scegliendo un valore tra un intervallo che va da -100% (nero) a 100% (bianco).

Pagina | 92

Simboli

• Tinta: permette di selezionare un colore, o immettendo i valori RGB nelle rispettive caselle, o cliccando sul controllo dei colori. Inoltre tramite il cursore Tinta impostiamo una percentuale tra 0% (trasparente) e 100% (completamente satura). • Alfa: serve per impostare la trasparenza scegliendo un valore tra 0% e 100%. • Avanzate: permette di regolare separatamente i valori RGB e la trasparenza.

Figura 51: Modificare il colore di un'istanza

Pagina | 93

Capitolo 6

Scambiare un’ istanza Per poter visualizzare sullo stage un’ istanza diversa con le stesse proprietà di quella originale: 1.

2.

3.

4.

selezioniamo un’ istanza sullo stage; dal pannello Proprietà clicchiamo sul pulsante Scambia; dalla finestra di dialogo selezionare un simbolo da sostituire; per confermare clicchiamo sul pulsante OK.

Modificare il tipo di un’ istanza

Se durante la creazione notiamo di aver scelto un tipo di simbolo che non ci permette di eseguire determinate operazioni è possibile cambiarlo: 1. selezioniamo l’ istanza sullo stage; 2. dal pannello Proprietà selezioniamo dalla casella combinata un tipo tra Grafico, Pulsante o Clip filmato.

Ripetizione ciclica

Per poter specificare come le sequenze di un’ animazione nell’istanza di un’ immagine devono essere riprodotte, seguiamo questi passaggi:

1. selezioniamo un’ istanza di immagine sullo stage; 2. dal pannello Proprietà, nella sezione Ripetizione ciclica, dal menù Opzioni scegliamo tra: • Ciclo: ripetizione ciclica dell’ animazione.

• Riproduci una volta: riproduce una sola volta l’animazione.

• Fotogramma singolo: visualizza un fotogramma della sequenza di animazione.

Pagina | 94

Simboli

3. per specificare il primo fotogramma da visualizzare quando si applica una ripetizione ciclica, nella casella Primo, immettere un numero di fotogramma.

Dividere un’ istanza

Per rimuovere il collegamento che c’ è tra un’ istanza e un simbolo dobbiamo dividere l’ istanza tramite questi passaggi: 1. selezionare l’ istanza sullo stage; 2. andare sul menù Elabora; 3. cliccare sulla voce Dividi.

Creare, aprire e chiudere una cartella Per poter organizzare gli elementi che ci sono nel pannello Libreria, possiamo utilizzare le cartelle.

Per creare una nuova cartella clicchiamo sullo strumento Nuova cartella che troviamo nella parte inferiore del pannello Libreria.

Per aprire o chiudere una cartella facciamo doppio clic su di essa oppure dal menù del pannello Libreria clicchiamo sulle voci Espandi cartella o Comprimi cartella.

Nel caso in cui vogliamo aprire o chiudere più cartelle, dal menù del pannello Libreria, clicchiamo sulle voci Espandi tutte le cartelle o Comprimi tutte le cartelle.

Inserire gli elementi nelle cartelle e ordinarli

Per poter inserire all’ interno di una cartella un elemento basta trascinarlo.

Pagina | 95

Capitolo 6

Per poter ordinare gli elementi che ci sono nel pannello Libreria basta cliccare sull’ intestazione di una delle colonne.

Creare un pulsante

In questo paragrafo vedremo com’ è possibile creare un simbolo di tipo pulsante lavorando sui suoi vari stati, per renderlo interattivo.

I passaggi sono:

1. cliccare su un punto vuoto dello stage in modo che non ci siamo elementi selezionati; 2. andare sul menù Inserisci; 3. cliccare sulla voce Nuovo simbolo; 4. nella finestra di dialogo dare un nome al simbolo e specificare che è di tipo pulsante; 5. a questo punto ci troviamo nella modalità di modifica dei simboli e nella linea temporale facciamo clic sul fotogramma denominato Su, creiamo un oggetto; 6. clicchiamo sul fotogramma denominato Sopra e andiamo sul menù Inserisci; 7. selezioniamo la voce Linea temporale; 8. clicchiamo su Fotogramma chiave; 9. se volete potete modificare qualche proprietà dell’ oggetto; 10. ripete i passaggi 6, 7, 8 e 9 per i fotogrammi Giù e Premuto.

Pagina | 96

Simboli

Figura 52: Creare un pulsante

Attivare i pulsanti sullo stage Per poter provare i pulsanti direttamente sullo stage dobbiamo attivarli.

1. andare sul men첫 Controllo; 2. cliccare sulla voce Attiva pulsanti semplici.

Pagina | 97

Capitolo 6

Attivare la modifica in scala a 9 porzioni Grazie alla modifica in scala a 9 porzioni possiamo modificare specifiche aree del clip filmato, ma dobbiamo attivarli tramite questi passaggi:

1. selezionare un simbolo dal pannello Libreria; 2. dal menù del pannello cliccare sulla voce Proprietà; 3. dalla finestra di dialogo mettere un segno di spunta su Attiva guide per modifica in scala a 9 porzioni.

Modificare in scala a 9 porzioni

Per modificare il nostro simbolo di tipo clip filmato in scala a 9 porzioni dobbiamo:

1. fare doppio clic sul simbolo all’ interno del pannello Libreria per poter attivare la modalità di modifica simboli; 2. per postare le guide basta trascinarle.

Attivare il caching bitmap

Grazie all’ opzione caching bitmap, il Flash Player non deve ridisegnare continuamente l’ elemento perché l’ immagine è una bitmap e la sua posizione non cambia nello stage e questo migliora le prestazioni di riproduzione.

Per attivarlo:

1. selezionare un simbolo o di tipo clip filmato o pulsante che si trova nello stage;

Pagina | 98

Simboli

2. dal pannello Proprietà spuntare l’ opzione Memorizza in cache come bitmap.

Pagina | 99

Capitolo 7 Animazioni In questo capitolo affronteremo uno degli argomenti piĂš importanti, le animazioni, ma, prima di elencare i passaggi e le varie tipologie, presentiamo il pannello Linea temporale.

Panello Linea temporale Il pannello Linea temporale ci permette di organizzare il contenuto del documento in livelli e fotogrammi e di controllare il tempo.

Se questo pannello non è visibile seguiamo questi passaggi: 1. andare sul menÚ Finestra; 2. cliccare sulla voce Linea temporale.

Figura 53: Pannello Linea temporale

Pagina | 101

Capitolo 7

Cambiare la visualizzazione dei fotogrammi Per cambiare la visualizzazione dei fotogrammi:

1. andare sul menù del pannello Linea temporale; 2. cliccare su una delle seguenti voci: • Molto piccolo.

• Piccolo.

• Normale.

• Medio.

• Grande.

• Anteprima.

• Anteprima in contesto.

Per default la visualizzazione attiva è Normale.

Figura 54: Tipi di visualizzazione dei fotogrammi

Pagina | 102

Creare livelli

Animazioni

Come abbiamo accennato prima, i livelli nel pannello Linea temporale ci consentono di organizzare gli elementi del documento.

Per poterli creare:

1. andare sul menù Inserisci; 2. selezionare la voce Linea temporale; 3. cliccare sulla voce Livello.

Oppure clicchiamo sull’ icona Nuovo livello che troviamo nella parte inferiore del pannello Linea temporale.

Creare cartelle

I livelli possono essere organizzati a loro volta in cartelle.

Per crearle: 1.

2.

3.

4.

selezioniamo un livello o una cartella; andiamo sul menù Inserisci; selezioniamo la voce Linea temporale; clicchiamo sulla voce Cartella livelli.

Oppure:

1. tasto destro del mouse sul nome del livello; 2. dal menù di scelta rapida cliccare sulla voce Inserisci cartella.

Oppure clicchiamo sull’ icona Nuova cartella che troviamo nella parte inferiore del pannello Linea temporale.

Per inserire i livelli nelle cartelle, basta trascinarli su quest’ ultime.

Pagina | 103

Capitolo 7

Rinominare un livello o un cartella I procedimenti per cambiare il nome ad un livello o ad una cartella sono identici: 1.

2.

3.

4.

5.

andare sul menù Elabora; selezionare la voce Linea temporale; cliccare sulla voce Proprietà livello; immettere il nome nella casella Nome; confermare cliccando sul pulsante OK.

Oppure doppio clic sul nome del livello o della cartella all’ interno del pannello Linea temporale e digitare un nuovo nome.

Eliminare un livello o una cartella

Anche in questo caso i procedimenti per eliminare una cartella o un livello sono identici: 1. selezionare il livello o la cartella da eliminare; 2. tasto destro del mouse; 3. dal menù di scelta rapida cliccare sulla voce Elimina livello.

Oppure clicchiamo sull’ icona Elimina livello che troviamo nella parte inferiore del pannello Linea temporale, oppure li trasciniamo su questa.

Bloccare o sbloccare uno o più livelli o cartelle

Per evitare di spostare per sbaglio gli elementi che abbiamo nei vari livelli e cartelle, possiamo decidere di bloccarli in modo che non subiscono variazioni.

Pagina | 104

Animazioni

Per bloccare un livello o una cartella clicchiamo sull’ icona del lucchetto che troviamo accanto ai nomi di questi, stessa cosa per sbloccare.

Per bloccare più livelli o cartelle clicchiamo sull’ icona del lucchetto.

Stessa cosa per sbloccare.

Figura 55: Bloccare un livello

Visualizzare o nascondere uno o più livelli o cartelle Per poter nascondere alcuni elementi che sono sullo stage in modo da non avere troppi elementi visibili e lavorare meglio sugli altri, possiamo cliccare sull’ icona a forma di occhio accanto al nome di un livello o di una cartella, e stessa cosa per visualizzarli nuovamente.

Se vogliamo nasconderli tutti clicchiamo sull’ icona a forma di occhio.

Stesso procedimento per visualizzarli nuovamente tutti.

Pagina | 105

Capitolo 7

Figura 56: Nascondere livelli

Visualizzare il contenuto di un livello Per capire a quale livello un determinato oggetto fa parte, clicchiamo sull’ icona del contorno accanto al nome di questo. Tramite questo procedimento sarà visualizzato un contorno, di un determinato colore, a tutti gli oggetti che fanno parte di quel livello. È possibile cambiare il colore del contorno tramite questi passaggi: 1.

2.

3.

4.

5.

selezionare il livello; andare sul menù Elabora; selezionare la voce Linea temporale; cliccare sulla voce Proprietà livello; dalla finestra di dialogo cliccare sulla casella Colore contorno; 6. selezionare un nuovo colore; 7. confermare cliccando sul pulsante OK.

Pagina | 106

Animazioni

Figura 57: Visualizzare il contenuto di un livello

Distribuire gli oggetti Se abbiamo creato degli oggetti tutti sullo stesso livello, ma vogliamo distribuirli su livelli diversi, possiamo: 1. andare sul menĂš Elabora; 2. selezionare la voce Linea temporale; 3. cliccare sulla voce Distribuisci su livelli.

Livelli maschera

Grazie al livello maschera è possibile creare delle aree trasparenti attraverso la quale vengono visualizzati i livelli sottostanti.

Pagina | 107

Capitolo 7

Creare un livello maschera Vediamo quali sono i passaggi che ci permettono di creare un livello maschera:

1. selezioniamo il livello che contiene gli oggetti che appariranno all’ interno della maschera; 2. creiamo un livello sopra quello precedente; 3. posizioniamo una forma, un testo o un’ istanza; 4. clicchiamo con il tasto destro del mouse sul nome del livello e dal menÚ clicchiamo sulla voce Maschera; 5. per visualizzare l’ effetto blocchiamo sia il livello maschera che il livello mascherato.

Se dopo la creazione di un livello maschera vogliamo mascherare un altro livello semplicemente lo trasciniamo sotto il livello maschera.

Se invece lo vogliamo scollegare lo trasciniamo sopra il livello maschera.

Figura 58: Livelli Maschera

Fotogrammi Nella linea temporale gli intervalli di tempo sono suddivisi in fotogrammi.

Pagina | 108

Animazioni

Grazie a questi, gli elementi che fanno parte del documento, possono essere organizzati e controllati.

Nella linea temporale possono essere presenti diverse tipologie di fotogrammi, con scopi altrettanto diversi, vediamo quali: • •

•

• •

Fotogramma chiave: è un fotogramma che contiene una o più istanze di simboli.

Fotogramma chiave vuoto: è un fotogramma vuoto che può essere lasciato come tale o semplicemente un segnaposto per istanze.

Fotogramma chiave di proprietà: è un fotogramma dove vengono modificate una o più proprietà di un oggetto durante un’ animazione.

Fotogramma interpolato: è un fotogramma che fa parte di un’interpolazione movimento.

Fotogramma statico: è un fotogramma che non fa parte di un’interpolazione movimento.

Inserire fotogrammi

Per inserire un fotogramma nuovo:

1. andiamo sul menù Inserisci; 2. selezioniamo la voce Linea temporale; 3. clicchiamo sulla voce Fotogramma.

Oppure utilizziamo il tasto F5 sulla tastiera.

Per inserire un fotogramma chiave nuovo:

1. andiamo sul menù Inserisci; 2. selezioniamo la voce Linea temporale; 3. clicchiamo sulla voce Fotogramma chiave.

Pagina | 109

Capitolo 7

Oppure utilizziamo il tasto F6 sulla tastiera.

Per inserire un fotogramma chiave vuoto nuovo:

1. andiamo sul menù Inserisci; 2. selezioniamo la voce Linea temporale; 3. clicchiamo sulla voce Fotogramma chiave vuoto.

Etichettare i fotogrammi

È possibile assegnare dei nomi ai vari fotogrammi per poterli organizzare.

Per fare questa operazione:

1. selezioniamo il fotogramma da etichettare; 2. andare sul pannello Proprietà; 3. immettere il nome nella casella Etichetta.

Figura 59: Fotogramma etichettato

Selezionare fotogrammi È possibile selezionare con un solo clic più fotogrammi compresi tra due fotogrammi chiavi, ma per fare questo è necessario che l’opzione sia attiva.

Pagina | 110

Per attivarla:

Animazioni

andiamo sul menù Modifica; cliccare sulla voce Preferenze; dalla finestra selezionare la categoria Generali; nella sezione Linea temporale, mettiamo un segno di spunta sulla voce Selezione basta sull’ estensione; 5. per confermare clicchiamo sul pulsante OK.

1.

2.

3.

4.

Copiare fotogrammi

Per poter copiare dei fotogrammi e poi incollarli: 1.

2.

3.

4.

selezioniamo i fotogrammi; andiamo sul menù Modifica; selezioniamo la voce Linea temporale; clicchiamo sulla voce Copia fotogrammi.

1.

2.

3.

4.

selezioniamo il punto in cui vogliamo incollare i fotogrammi; andiamo sul menù Modifica; selezioniamo la voce Linea temporale; clicchiamo sulla voce Incolla fotogrammi.

Se vogliamo incollare:

Se invece di copiarli li vogliamo spostare basta che li selezioniamo e poi li trasciniamo.

Eliminare i fotogrammi

Per poter eliminare uno o più fotogrammi:

1. selezioniamo i fotogrammi; 2. andiamo sul menù Modifica; 3. selezioniamo la voce Linea temporale;

Pagina | 111

Capitolo 7

4. clicchiamo sulla voce Rimuovi fotogramma.

Ridurre o aumentare la lunghezza dei fotogrammi Per ridurre o aumentare la lunghezza di fotogrammi statici:

1. selezioniamo il primo o l’ ultimo fotogramma; 2. trasciniamo verso sinistra o destra tenendo premuto contemporaneamente il tasto CTRL.

Convertire un fotogramma chiave

In alcuni casi potrebbe essere necessario convertire un fotogramma chiave in uno semplice.

Per fare questo: 1.

2.

3.

4.

selezioniamo il fotogramma chiave da convertire; andiamo sul menù Modifica; selezioniamo la voce Linea temporale; clicchiamo sulla voce Cancella fotogramma chiave.

Frequenze di fotogrammi

La velocità di riproduzione di un’ animazione è misurata in frequenza di fotogrammi, cioè i numeri di fotogrammi che vengono riprodotti in un secondo.

Per impostazione predefinita la frequenza di fotogrammi è uguale a 24 fps.

Pagina | 112

Animazioni

Animazioni

A questo punto, che sappiamo come organizzare gli elementi presenti nello stage e sappiamo gestire i vari tipi di fotogrammi, possiamo conoscere e realizzare le animazioni.

Flash Pro supporta vari tipi di animazione, vediamo quali: •

• • •

•

Interpolazioni di movimento: utilizzate per creare animazioni di oggetti che si muovono continuamente o si trasformano.

Interpolazioni classiche: simili al precedente, ma più complesse.

Interpolazioni di forma: utilizzate per creare animazioni di oggetti che cambiano forma.

Fotogramma per fotogramma: utilizzate per creare animazioni complesse di oggetti che devono essere diversi per ogni fotogramma.

Cinematica inversa: utilizzate per creare animazioni di oggetti che devono allungarsi o piegarsi.

Interpolazione di movimento preimpostate

È possibile utilizzare delle interpolazioni di movimento preconfigurate, cioè animazioni pronte che devono essere solo aggiunte ad un oggetto.

Per fare questo:

1. andiamo sul menù Finestra; 2. clicchiamo sulla voce Preimpostazioni movimento;

Pagina | 113

Capitolo 7

3. selezioniamo l’oggetto; 4. selezioniamo una preimpostazione; 5. clicchiamo sul pulsante Applica.

Figura 60: Pannello Preimpostazioni movimento

Salvare un’ interpolazione Se abbiamo realizzato un’ interpolazione possiamo salvarla nel pannello Preimpostazioni movimento come un’ interpolazione personalizzata, tramite i seguenti passaggi: 1. selezionare l’ oggetto a cui è stata applicata un’interpolazione; 2. dal pannello Preimpostazioni movimento, cliccare sul pulsante Salva.

Importare una preimpostazione di movimento

Le preimpostazioni di movimento vengono memorizzate come file di tipo XML. Questi possono essere importati tramite questi passaggi: Pagina | 114

Animazioni

1. dal menĂš del pannello Preimpostazioni movimento clicchiamo sulla voce Importa; 2. dalla finestra di dialogo selezioniamo il file XML; 3. clicchiamo sul pulsante Apri.

Esportare una preimpostazione di movimento

Se invece vogliamo esportare una preimpostazione di movimento come file XML, seguiamo questi passaggi:

1. dal pannello Preimpostazioni movimento, selezioniamo la preimpostazione da esportare; 2. dal menĂš del pannello clicchiamo sulla voce Esporta; 3. dalla finestra di dialogo, specifichiamo un nome e una posizione per il file XML; 4. clicchiamo sul pulsante Salva.

Eliminare una preimpostazione di movimento

Ăˆ possibile eliminare le preimpostazioni di movimento tramite questi passaggi: 1. dal pannello Preimpostazioni movimento, selezioniamo una preimpostazione; 2. dal menĂš del pannello clicchiamo sulla voce Rimuovi.

Pagina | 115

Capitolo 7

Creare un’ interpolazione di movimento È possibile applicare un’ interpolazione di movimento solo su istanze di simboli e su campi di testo.

Per muovere un oggetto sullo stage e cambiare una sua proprietà: 1.

2.

3.

4.

selezioniamo un’ istanza o un campo di testo; andiamo sul menù Inserisci; clicchiamo sulla voce Interpolazione movimento; trasciniamo un’ estremità dell’ estensione di interpolazione per aumentare o ridurre il numero di fotogrammi desiderato; 5. selezioniamo un fotogramma e cambiamo la posizione dell’ oggetto o una delle sue caratteristiche.

Figura 61: Interpolazione di movimento

Pagina | 116

Modificare un tracciato

Animazioni

Quando realizziamo un’ interpolazione di movimento, viene creato in modo automatico un tracciato.

Per poterlo modificare:

1. dal pannello Strumenti, clicchiamo sullo strumento Selezione o Trasformazione libera; 2. clicchiamo sull’ istanza per rendere visibile il tracciato; 3. con lo strumento Sottoselezione trasciniamo il tracciato per ridimensionarlo, invece con lo strumento Trasformazione libera lo ridimensioniamo o l’ incliniamo o lo ruotiamo.

Se invece volete spostare un punto ci controllo, trascinatelo tramite lo strumento Selezione.

Figura 62: Modifica di un tracciato

Pagina | 117

Capitolo 7

Eliminare un tracciato Per poter eliminare un tracciato da un’ interpolazione di movimento: 1. tramite lo strumento Selezione, selezioniamo il tracciato; 2. premere il tasto CANC dalla tastiera.

Pannello Editor movimento

Il pannello Editor movimento permette di fare tantissime cose, tra cui: • • • • • • •

Creare curve di andamento personalizzate.

Aggiungere o rimuovere filtri.

Aggiungere o rimuovere effetti di colore.

Modificare il tracciato di un’ interpolazione.

Aggiungere o rimuovere fotogrammi chiave di proprietà per proprietà singole.

Spostare i fotogrammi chiave di proprietà.

Invertire i fotogrammi chiave per singole proprietà

Per visualizzare questo pannello:

1. andiamo sul menù Finestra; 2. clicchiamo sulla voce Editor movimento.

Pagina | 118

Animazioni

Figura 63: Pannello Editor movimento

Creare un’ interpolazione classica Un’ interpolazione classica non può essere applicata a tutti gli oggetti, ma solo alle istanze dei simboli.

Inoltre, non è possibile interpolare proprietà 3D con le interpolazioni classiche.

Per applicare un’ interpolazione classica:

1. selezioniamo un fotogramma chiave vuoto; 2. creiamo o importiamo un simbolo; 3. selezioniamo un secondo fotogramma chiave dove supponiamo che finirà l’animazione; 4. spostiamo o modifichiamo le caratteristiche dell’ oggetto; 5. andiamo sul menù Inserisci; 6. clicchiamo sulla voce Interpolazione classica.

Pagina | 119

Capitolo 7

Figura 64: Interpolazione classica

Creare un’ interpolazione classica lungo un tracciato I livelli possono essere convertiti in livelli guida. È possibile collegare uno o più livelli ai livelli guida per far muovere gli oggetti lungo un tracciato.

I livelli normali che sono collegati a un libello guida vengono detti livelli guidati.

Vediamo quali sono i passaggi per creare un’ interpolazione classica lungo un tracciato: Pagina | 120

Animazioni

1. creiamo un’ interpolazione classica com’ è stata descritta nel paragrafo precedente; 2. nel livello che contiene l’ interpolazione classica facciamo tasto destro sul nome e clicchiamo sulla voce Aggiungi guida di movimento classica; 3. selezioniamo il livello guida e con gli strumenti disegniamo un tracciato; 4. trasciniamo l’ oggetto per agganciarlo all’ inizio del tracciato nel primo fotogramma e alla fine di esso nell’ ultimo fotogramma.

Figura 65: Interpolazione classica lungo un tracciato

Pagina | 121

Capitolo 7

Andamento personalizzato in entrata/uscita La finestra di dialogo Andamento personalizzato in entrata/uscita visualizza un grafico che rappresenta la curva del movimento nel tempo.

Per visualizzare questa finestra clicchiamo sul pulsante Modifica che troviamo nel pannello Proprietà.

In tale finestra troviamo la checkbox Usa una sola impostazione per tutte le proprietà, che per default è attiva, ma se viene disattivata togliendo il segno di spunta, la casella combinata Proprietà viene abilitato.

Le proprietà sono: • • • • •

Posizione.

Rotazione.

Scala.

Colore.

Filtri.

Inoltre troviamo dei pulsanti: •

•

Riproduci e Interrompi che permettono di visualizzare un’anteprima dell’ animazione.

Reimposta che ripristina lo stato predefinito.

Pagina | 122

Animazioni

Figura 66: Finestra Andamento personalizzato in entrata/uscita

Interpolazioni di forme In questo tipo di animazione si ha un cambiamento della forma. È un’ animazione molto semplice da realizzare, infatti noi dobbiamo solamente creare una forma nel primo fotogramma e un’ altra nell’ ultimo fotogramma, sarà direttamente il nostro Flash a creare i fotogrammi intermedi per trasformare la nostra prima forma nella seconda specificata.

Creare un’ interpolazione di forma

Ecco i procedimenti per creare una interpolazione di forma:

Pagina | 123

Capitolo 7

1. disegniamo un oggetto nel primo fotogramma; 2. selezioniamo l’ n-simo fotogramma, dove vogliamo che finisce la nostra animazione e creiamo un fotogramma chiave; 3. disegniamo un’ altra forma; 4. selezioniamo un fotogramma qualsiasi tra il primo e l’ ultimo e andiamo sul menÚ Inserisci e clicchiamo sulla voce Interpolazione forma.

Figura 67: Interpolazione di forma

Pagina | 124

Animazione fotogramma per fotogramma

Animazioni

Le animazioni fotogramma per fotogramma sono ideali quando devono essere create animazioni complesse in cui un’ immagine cambia in ogni fotogramma.

Creare un’ animazione fotogramma per fotogramma

Ecco i passaggi per creare un’ animazione fotogramma per fotogramma: 1. selezioniamo un fotogramma e trasformiamol o in un fotogramma chiave; 2. inseriamo o creiamo un oggetto; 3. selezioniamo un altro fotogramma e trasformiamol o in un

fotogramma Figura 68: Animazione fotogramma per fotogramma chiave e modifichiamo il contenuto;

Pagina | 125

Capitolo 7

4. ripetiamo il punto 3 fino all’ ultimo fotogramma della nostra animazione.

Tecnica Onion skin Grazie alla tecnica Onion skin possiamo visualizzare contemporaneamente sullo stage il contenuto di più fotogrammi.

Visualizzare più fotogrammi

Nel pannello Linea temporale troviamo alcuni strumenti che ci permettono di: •

• •

attivare la tecnica Onion skin cliccando sul pulsante Onion skin. visualizzare solo il contorno dei fotogrammi cliccando sul pulsante Contorni Onion skin. modificare i fotogrammi compresi tra i marcatori cliccando sul pulsante Modifica più fotogrammi.

Marcatori Onion skin

Un altro pulsante che troviamo nel pannello Linea temporale è l’Elabora marcatori Onion skin.

Per poter modificare la loro visualizzazione clicchiamo su questo pulsante e scegliamo tra: •

•

Mostra sempre marcatori: visualizza i marcatori anche se la tecnica Onion skin non è attiva.

Ancora Onion skin: blocca i marcatori.

Pagina | 126

• • •

Animazioni

Onion 2: visualizza solo 2 fotogrammi su entrambi i lati del fotogramma corrente.

Onion 5: visualizza solo 5 fotogrammi su entrambi i lati del fotogramma corrente.

Onion skin su tutto: visualizza tutti i fotogrammi su entrambi i lati del fotogramma corrente.

Figura 69: Tecnica Onion skin

Cinematica inversa La cinematica inversa ci permette di animare gli oggetti utilizzando ossi concatenati.

Pagina | 127

Capitolo 7

Questa tecnica può essere utilizzata come contenitore per più ossi oppure per concatenare delle istanze.

Quando aggiungiamo degli ossi, Flash crea un nuovo livello detto livello di posa.

Aggiungere ossi a simboli

Gli ossi possono essere aggiunti a istanze di clip filmato, grafica e pulsanti.

Vediamo i passaggi:

1. disponiamo le istanze nello stage; 2. dal pannello Strumenti clicchiamo sullo strumento Osso per attivarlo; 3. clicchiamo sulla prima istanza, nel punto in cui desideriamo collegare l’osso; 4. trasciniamo su un’ altra stanza e rilasciamo il pulsante del mouse nel punto in cui vogliamo collegare; 5. per aggiungere un altro osso trasciniamo la coda del primo osso ad un’altra istanza.

Pagina | 128

Figura 70: Cinematica inversa

Aggiungere ossi a forme

Animazioni

Gli ossi possono essere aggiunti anche a forme, anche se questo presenterà alcuni limitazioni, come: • •

non è possibile unire ad una forma IK altre forme all’ esterno di questa. non è possibile su di essa utilizzare lo strumento Trasformazione libera.

Flash converte tutte le forme e gli ossi in un oggetto forma IK.

Vediamo adesso come aggiungere un osso ad una forma: 1.

2.

3.

4.

creare una o più forme piene; selezionare l’ intera forma; dal pannello Strumenti selezioniamo lo strumento Osso; clicchiamo all’ interno della forma e trasciniamo in una posizione diversa all’ interno della forma; 5. per aggiungere un altro osso trasciniamo la coda del primo osso in una posizione diversa all’ interno della forma.

Eliminare gli ossi

Se vogliamo eliminare un osso clicchiamo su di esso e premiamo il tasto CANC dalla tastiera.

Se invece vogliamo eliminare tutti gli ossi facciamo doppio clic su uno di essi e poi dalla tastiera premiamo il tasto CANC.

Pagina | 129

Capitolo 7

Animare gli ossi I fotogrammi chiave nei livelli di posa sono detti pose.

Vediamo i passaggi per creare l’ animazione:

1. aggiungiamo i fotogrammi nel livello di posa; 2. per aggiungere una posa clicchiamo con il tasto destro del mouse su un fotogramma e dal menù scegliamo la voce Inserisci posa; 3. aggiungiamo altre pose per completare l’animazione in base alle nostre necessità.

Figura 71: Animazione ossi

Se vogliamo applicare degli effetti di interpolazione:

1. selezioniamo gli oggetti IK; 2. clicchiamo con il tasto destro del mouse sulla selezione e dal menù di scelta rapida clicchiamo sulla voce Converti in simbolo; 3. nella finestra di dialogo che si apre specifichiamo un nome e scegliamo la tipologia di simbolo; 4. per confermare clicchiamo sul pulsante OK; 5. trasciniamo il simbolo dal pannello Libreria sullo stage;

Pagina | 130

Animazioni

6. adesso possiamo aggiungere gli effetti di interpolazione di movimento.

Modificare l’ andamento di un’ animazione IK

Per poter modificare l’andamento della velocità di animazione per poter creare un movimento più realistico: 1. selezioniamo un fotogramma; 2. dal pannello Proprietà, selezioniamo un tipo di andamento, dal menù Andamento, tra: • Andamenti semplici: quattro andamenti che rallentano il movimento nei fotogrammi che si trovano immediatament

•

e prima o dopo Figura 72: Andamento animazione IK il fotogramma selezionato.

Andamenti iniziale e finale: rallentano il movimento ai fotogrammi che si trovano tra 2 fotogrammi di posa.

Pagina | 131

Capitolo 8 Testo In questo capitolo vedremo com’ è possibile aggiungere del testo a un file FLA, e come formattarlo, inoltre introdurremo il testo TLF (Text Layout Framework). Quest’ ultimo è stato introdotto nella versione CS5, e a differenza di quello classico, supporta un’ ampia gamma di funzioni di layout e di attributi di formattazione.

Testo classico Con il termine “testo classico” si intende lo strumento testo che era presente nelle versioni precedenti di Flash Professional.

Esso può essere di tre tipi: •

• •

statico: testo che viene inserito al momento della creazione del documento. dinamico: testo che deve subire degli aggiornamenti. input: testo che viene immesso dagli utenti per compilare form o questionari.

Aggiungere testo classico

Vediamo quali sono i passaggi che ci permettono di aggiungere del testo statico:

Pagina | 133

Capitolo 8

1. dal pannello Strumenti clicchiamo sullo strumento Testo; 2. dal pannello Proprietà selezioniamo dal menù Motore di testo la voce Testo classico; 3. sempre su questo pannello selezioniamo il tipo di testo dalla casella combinata che troviamo subito sotto a quello precedente; 4. se nel passo precedente abbiamo scelto il tipo statico, accanto al menù precedente troviamo un altro menù che ci permette di specificare l’ orientamento del testo, che per impostazione predefinita è Orizzontale; 5. a questo punto possiamo scegliere di inserire il testo su una singola riga, allora facciamo un solo clic sullo stage, oppure creiamo sullo stage un’ area per il testo premendo il tasto sinistro del mouse e trascinando.

Selezionare e modificare un campo di testo Se vogliamo selezionare un campo di testo:

1. dal pannello Strumenti clicchiamo Selezione; 2. e poi clicchiamo sul campo di testo.

sullo

strumento

Se invece vogliamo selezionare più campi di testo eseguiamo gli stessi passaggi di prima, ma in più teniamo premuto dalla tastiera il tasto SHIFT.

Se invece vogliamo selezionare i caratteri che sono presenti in un campo di testo:

1. dal pannello Strumenti clicchiamo sullo strumento Testo; 2. trasciniamo il puntatore per selezionare i caratteri o doppio clic per selezionare una parola.

Pagina | 134

Testo

Per modificare le dimensioni di un campo di testo basta trascinare le maniglie di ridimensionamento che troviamo agli angoli.

Formattare il testo

Per poter modificare il tipo di carattere, il layout, la dimensione, la posizione, lo stile e i colori del testo, seguiamo i seguenti passaggi:

1. dal pannello Strumenti, clicchiamo sullo strumento Selezione; 2. selezioniamo uno o più campi di testo; 3. dal pannello Proprietà visitiamo le varie sezioni: • Posizione e dimensioni: per poter modificare la posizione del campo di testo inseriamo dei valori nelle caselle di testo X e Y, invece per cambiare la dimensione immettiamo dei valori nelle caselle L e A. Per bloccare le proporzioni delle dimensioni l’ icona della catena non deve essere spezzata, se è così cliccateci.

• Carattere: da questa sezione possiamo modificare, da Famiglia il tipo di carattere, da Stile la forma come ad esempio impostare un grassetto, un corsivo, una forma normale e ecc.. (in base al tipo di carattere scelto non è detto che sono disponibili tutti i tipi di stile), da Dimensione scegliamo la grandezza del carattere, da Spaziatura tra lettere impostiamo un valore per poter distanziare le lettere tra loro, da Colore scegliamo un colore da applicare ai caratteri, da Crenatura automatica attiviamo o disattiviamo la riduzione dello spazio in eccesso fra coppie di caratteri, da Antialiasing riduciamo o meno l’ effetto di scalettatura, dal pulsante Selezionabile rendiamo il Pagina | 135

Capitolo 8

•

•

testo selezionabile agli utenti finali, dai pulsanti Apice e Pedice attiviamo o disattiviamo questa impostazione.

Paragrafo: da Formato scegliamo il tipo di allineamento orizzontale (a sinistra, al centro, a destra, giustificato), da Interlinea impostiamo il rientro della prima riga di un paragrafo e accanto immettiamo un valore che indica lo spazio tra le righe, da Margini specifichiamo un valore per il margine sinistro e accanto quello per il margine destro.

Filtri: per applicare degli effetti al testo.

Figura 73: Formattazione Testo classico

Pagina | 136

Opzioni per il testo dinamico e di input

Testo

Se abbiamo creato dei campi testo di tipo dinamico o di input, nel pannello Proprietà si attivano delle opzioni inerenti proprio a queste tipologie.

Ad esempio nella sezione carattere si attivano i seguenti strumenti: • •

Rendi il testo come HTML: per applicare al testo una formattazione con i tag HTML appropriati.

Mostra bordo intorno al testo: per visualizzare un bordo nero attorno al campo di testo.

Nella sezione Paragrafo si attiva il menù Comportamento con le seguenti voci: • • •

Singola riga: visualizza il testo su una sola riga.

Multiriga: visualizza il testo su più righe.

Multiriga senza a capo: visualizza il testo su più righe che possono essere interrotte solo nel caso in cui l’ ultimo carattere è un carattere di interruzione riga.

Nella sezione Opzioni si attiva la casella di testo Variabile dove viene inserito il nome della variabile per il campo di testo. Questa opzione deve essere utilizzata solo se vogliamo pubblicare il contenuto per Macromedia Flash Player 5 o versioni precedenti.

Preferenze per il testo verticale

Per impostare le preferenze per il testo verticale:

1. andiamo sul menù Modifica; 2. clicchiamo sulla voce Preferenze; 3. dalla finestra di dialogo clicchiamo sulla categoria Testo che troviamo a sinistra; Pagina | 137

Capitolo 8

4. nella sezione Testo verticale troviamo tre checkbox: • Orientamento del testo predefinito: i nuovi campi di testo avranno impostato in modo automatico l’orientamento verticale.

• Flusso testo da destra a sinistra: il testo sarà inserito in verticale partendo da destra verso sinistra.

• Nessuna crenatura: viene disattivata l’ opzione della crenatura per il testo verticale.

Dividere il testo classico

Se vogliamo posizionare ogni carattere di una o più parole all’interno di un campo di testo separato, eseguiamo una divisione tramite questi passaggi: 1. dal pannello Strumenti clicchiamo sullo strumento Selezione; 2. con questo clicchiamo sul campo di testo da dividere; 3. andiamo sul menù Elabora; 4. clicchiamo sulla voce Dividi.

Se vogliamo convertire i singoli caratteri in forme, allora dividiamo nuovamente, seguendo i passaggi precedenti.

Convertire un testo in un collegamento ipertestuale

Un collegamento ipertestuale permette di creare link ai più svariati oggetti.

Vediamo com’ è possibile convertire un testo ad un collegamento ipertestuale: 1. selezioniamo un testo o un campo di testo;

Pagina | 138

2. dal pannello Proprietà andiamo nella sezione Opzioni; 3. inseriamo un URL nella casella di testo Collegamento.

Testo

Testo TLF

Come detto ad inizio capitolo il testo TLF è stato introdotto nella versione Flash Professional CS5. Questo testo, rispetto a quello precedente a più attributi per la formattazione.

Esistono tre tipi di blocco di testo: • • •

Sola lettura: una volta pubblicato in un file SWF, il testo non può essere selezionato o modificato.

Selezionabile: una volta pubblicato in un file SWF, il testo può essere selezionato e copiato, ma non modificato.

Modificabile: una volta pubblicato in un file SWF, il testo può essere sia selezionato che modificato.

I metodi per poter aggiungere il testo TLF sono uguali a quelli che abbiamo precedentemente descritto per il testo classico.

Attributi del testo TLF

In questo paragrafo elencheremo tutti gli attributi del testo TLF che troviamo nel pannello Proprietà e che sono in più rispetto a quelli del testo classico.

Nella sezione Posizione e vista 3D, oltre alle caselle X e Y, troviamo anche: •

Z: che ci permette di impostare un valore numerico, positivo o negativo, che ci sposta il testo lungo l’asse delle Z, dando una percezione della profondità.

Pagina | 139

Capitolo 8

• •

•

Angolo prospettiva: questa opzione influenza la dimensione e la posizione del testo.

Fuoco prospettico: riposizionando il fuoco prospettico modifichiamo la direzione in cui un testo si muove rispetto all’ asse Z. Ripristina: questo pulsante permette di ripristinare le coordinate iniziali del fuoco prospettico.

Nella sezione Carattere troviamo in più: •

• • •

Evidenzia: che permette di impostare un colore di evidenziazione.

Rotazione: che consente di ruotare singoli caratteri.

Sottolineato: che applica una sottolineatura.

Barrato: che applica una riga orizzontale al centro dei caratteri.

Nella sezione Impostazioni avanzate, troviamo: • • •

•

Maiuscole/minuscole: permette di trasformare i caratteri in maiuscolo o in minuscolo o in maiuscoletto.

Tipo di cifre: permette di specificare quale stile numerico applicare quando si usano font Open Type.

Larghezza cifre: permette di specificare se utilizzare i caratteri numerici proporzionali (le cifre non occupano la stessa larghezza e non hanno un allineamento verticale) o tabulari (le cifre occupano la stessa larghezza e hanno l’allineamento verticale).

Linea di base dominante: specifica la linea di base del testo selezionato.

Pagina | 140

•

• • • •

Testo

Allineamento linea di base: specifica una linea di base differente per il testo o un’ immagine grafica all’ interno del paragrafo.

Legature: permette di impostare caratteri tipografici sostitutivi.

Interruzione: permette di evitare la suddivisione in sillabe di alcune parole.

Spostamento linea di base: permette di immettere un valore in percentuale o in pixel per poter spostare la linea di base.

Impostazione internazionale: ci permette di scegliere una lingua che influirà sulla forma dei glifi (unità grafica).

Nella sezione Paragrafo abbiamo in più: • • • • •

•

Giustifica con l’ ultima riga allineata all’ inizio.

Giustifica con l’ ultima riga allineata al centro.

Giustifica con l’ ultima riga allineata alla fine.

Giustifica tutte le righe.

Interlinea prima e dopo: specifica la spaziatura prima e dopo un paragrafo.

Giustificazione testo: permette di applicare una spaziatura tra lettere o parole.

Nella sezione Contenitore e flusso, troviamo: • • • •

Caratteri massimi: indichiamo il numero massimo di caratteri da poter inserire.

Allineamento verticale (alto, centro, basso, giustifica).

Numero colonne: per trasformare un testo in colonne specifichiamone il numero inserendo un valore.

Margine di rilegatura: specifica la spaziatura tra le colonne.

Pagina | 141

Capitolo 8

• • • •

Riempimento: specifica la larghezza dei margini tra il testo e il contenitore.

Colore bordo: per impostare il colore del bordo.

Colore sfondo: per impostare il colore dello sfondo.

Spostamento prima riga: specifica l’ allineamento della prima riga di testo rispetto al lato superiore del contenitore.

Nella sezione Effetto colore troviamo la casella combinata Stile da cui è possibile modificare la luminosità, la trasparenza e il colore del testo.

Nella sezione Visualizzazione troviamo la casella combinata Fusione che ci permette di applicare un metodo di fusione, di cui parleremo nel prossimo capitolo.

Figura 74: Formattazione Testo TLF

Pagina | 142

Testo

Controllo ortografico

Il controllo ortografico ci permette di verificare l’ esattezza dell’ortografia del testo.

Utilizzare il controllo ortografico

Per visualizzare la finestra di dialogo del controllo ortografico: 1. andiamo sul menù Testo; 2. clicchiamo sulla voce Controllo ortografico.

Se non riscontra degli errori viene mostrato il seguente messaggio “Controllo ortografico completato”, altrimenti si apre una finestra di dialogo dove visualizza l’ errore trovato nella casella di testo che è posizionata a sinistra.

In questa finestra troviamo anche i seguenti pulsanti: •

• • •

•

•

Aggiungi: per aggiungere una parola al dizionario personalizzato.

Ignora: per lasciare inalterata la parola.

Ignora tutto: per lasciare inalterata tutte le ricorrenze della parola.

Cambia: per cambiare la parola con quella che abbiamo digitato nella casella di testo Cambia in o con una che abbiamo selezionato nell’ elenco Suggerimenti.

Cambia tutto: per cambiare tutte le ricorrenze della parola con quella che abbiamo digitato nella casella di testo Cambia in o con una che abbiamo selezionato nell’ elenco Suggerimenti.

Elimina: per eliminare la parola.

Per terminare il controllo ortografico clicchiamo sul pulsante Chiudi.

Pagina | 143

Capitolo 8

Figura 75: Finestra Controllo ortografico

Impostazioni controllo ortografico Per poter impostare le varie opzioni del controllo ortografico:

1. andare sul menù Testo; 2. cliccare sulla voce Imposta controllo ortografico; 3. dalla finestra di dialogo visualizziamo una serie di opzioni: • Opzioni documento: tramite queste opzioni specifichiamo quali elementi devono essere controllati ortograficamente.

• Dizionari: visualizziamo un elenco dei dizionari incorporati.

• Dizionario personale: possiamo selezionare un dizionario personale cha abbiamo all’ interno del nostro computer.

• Modifica dizionario personale: permette di aggiungere parole o frasi al dizionario personale.

Pagina | 144

•

•

Testo

Opzioni del controllo: tramite queste opzioni controlliamo il modo in cui Flash Pro gestisce tipi specifici di parole e caratteri.

Figura 76: Finestra Imposta controllo ortografico

Pagina | 145

Capitolo 8

Font

Flash ci permette di incorporare caratteri da un font in un file SWF.

Incorporare caratteri da un font in un file SWF

Per poter incorporare caratteri da un font in un file SWF dobbiamo:

aprire con Flash il file FLA; andare sul men첫 Testo; cliccare sulla voce Incorporamento caratteri; cliccare sul pulsante Aggiungi nuovo carattere (+) per aggiungere un nuovo font incorporato al file FLA; 5. selezionare la famiglia e lo stile del font; 6. nella sezione Intervalli di caratteri, selezioniamo gli intervalli di caratteri da incorporare; 7. per confermare cliccare sul pulsante OK. 1.

2.

3.

4.

Figura 77: Finestra Incorporamento caratteri

Pagina | 146

Trova e sostituisci

Testo

La funzione trova e sostituisci consente di cercare una stinga di testo, un carattere, un colore, un simbolo, un file audio, un file video o un file bitmap importato e se vogliamo, sostituirlo con un elemento specificato.

Trovare e sostituire il testo

Per poter trovare o sostituire il testo, seguiamo i seguenti passaggi:

1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Trova e sostituisci; 3. dalla finestra di dialogo scegliamo Testo dalla casella combinata; 4. nella casella testo immettiamo il testo da trovare; 5. nella casella sostituisci immettiamo il testo con cui sostituire; 6. se è necessario attiviamo delle Opzioni per la ricerca come: • Parola intera: cerca il testo specificato come parola intera e no come parte di altro testo.

• Maiuscole/minuscole: cerca il testo esattamente com’ è stato specificato nella casella di testo, distinguendo i caratteri maiuscoli dai minuscoli.

• Espressioni regolari: cerca il testo nelle espressioni regolari di ActionScript.

• Contenuto dei campi di testo: ricerca nel contenuto di un campo di testo.

• Fotogrammi/livelli/parametri: ricerca nelle etichette dei fotogrammi, nei nomi di livelli, scene e nei parametri dei componenti.

• Stringhe di ActionScript: ricerca nelle stringhe di ActionScript.

Pagina | 147

Capitolo 8

ActionScript: ricerca in tutti gli elementi di ActionScript.

7. per cercare il testo possiamo scegliere tra: • Trova successivo: per trovare l’ occorrenza successiva.

• Trova tutto: per trovare tutte le occorrenze.

8. per sostituire il testo possiamo scegliere tra: • Sostituisci: per sostituire solo l’ occorrenza selezionata.

• Sostituisci tutto: per sostituire tutte le occorrenze.

•

Figura 78: Pannello Trova e sostituisci, testo

Pagina | 148

Testo

Trovare e sostituire caratteri Per poter trovare o sostituire caratteri, seguiamo i seguenti passaggi: 1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Trova e sostituisci; 3. dalla finestra di dialogo scegliamo Carattere tipografico dalla casella combinata; 4. specifichiamo il tipo di carattere, lo stile e la dimensione del carattere da ritrovare; 5. specifichiamo il tipo di carattere, lo stile e la dimensione del carattere da sostituire; 6. per cercare il carattere possiamo scegliere tra: • Trova successivo: per trovare l’occorrenza successiva.

• Trova tutto: per trovare Figura 79: Pannello Trova e sostituisci, carattere tipografico

Pagina | 149

Capitolo 8

tutte le occorrenze.

7. per sostituire il carattere possiamo scegliere tra: • Sostituisci: per sostituire solo l’ occorrenza selezionata.

• Sostituisci tutto: per sostituire tutte le occorrenze.

Trovare e sostituire colori Per poter trovare o sostituire colori, seguiamo i seguenti passaggi: 1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Trova e sostituisci; 3. dalla finestra di dialogo scegliamo Colore dalla casella combinata; 4. specifichiamo il colore da ritrovare; 5. specifichiamo il colore da sostituire; 6. specifichiamo se riguarda il colore di un testo, di un riempimento o di un tratto; 7. per cercare il colore possiamo scegliere tra: • Trova successivo: per trovare l’occorrenza successiva.

Pagina | 150

Figura 80: Pannello Trova e sostituisci, colore

Testo

• Trova tutto: per trovare tutte le occorrenze.

8. per sostituire il colore possiamo scegliere tra: • Sostituisci: per sostituire solo l’ occorrenza selezionata.

• Sostituisci tutto: per sostituire tutte le occorrenze.

Trovare e sostituire simboli Per poter trovare o sostituire simboli, seguiamo i seguenti passaggi: 1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Trova e sostituisci; 3. dalla finestra di dialogo scegliamo Simbolo dalla casella combinata; 4. specifichiamo il nome del simbolo da ritrovare; 5. specifichiamo il nome del simbolo da sostituire; 6. per cercare il simbolo possiamo scegliere tra: • Trova successivo: per trovare l’occorrenza successiva.

Figura 81: Pannello Trova e sostituisci, simboli

Pagina | 151

Capitolo 8

• Trova tutto: per trovare tutte le occorrenze.

7. per sostituire il simbolo possiamo scegliere tra: • Sostituisci: per sostituire solo l’ occorrenza selezionata.

• Sostituisci tutto: per sostituire tutte l’ occorrenze.

Trovare e sostituire audio Per poter trovare o sostituire dell’ audio, seguiamo i seguenti passaggi: 1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Trova e sostituisci; 3. dalla finestra di dialogo scegliamo Audio dalla casella combinata; 4. specifichiamo il nome dell’ audio da ritrovare; 5. specifichiamo il nome dell’ audio da sostituire; 6. per cercare l’ audio possiamo scegliere tra: • Trova successivo: per trovare l’ occorrenza successiva.

• Trova tutto: per trovare tutte le occorrenze.

7. per sostituire l’ audio possiamo scegliere tra: • Sostituisci: per sostituire solo l’ occorrenza selezionata.

• Sostituisci tutto: per sostituire tutte le occorrenze.

Pagina | 152

Testo

Figura 82: Pannello Trova e sostituisci, audio

Trovare e sostituire video Per poter trovare o sostituire un video, seguiamo i seguenti passaggi: 1. andiamo sul men첫 Modifica; 2. dal men첫 clicchiamo sulla voce Trova e sostituisci;

Pagina | 153

Capitolo 8

3. dalla finestra di dialogo scegliamo Video dalla casella combinata; 4. specifichiamo il nome del video da ritrovare; 5. specifichiamo il nome del video da sostituire; 6. per cercare il video possiamo scegliere tra: • Trova successivo : per trovare l’occorrenz a successiva.

• Trova tutto: per

trovare Figura 83: Pannello Trova e sostituisci, video tutte le occorrenze.

7. per sostituire il video possiamo scegliere tra: • Sostituisci: per sostituire solo l’ occorrenza selezionata.

• Sostituisci tutto: per sostituire tutte le occorrenze.

Pagina | 154

Trovare e sostituire bitmap

Testo

Per poter trovare o sostituire una bitmap, seguiamo i seguenti passaggi: 1. andiamo sul menù Modifica; 2. dal menù clicchiamo sulla voce Trova e sostituisci; 3. dalla finestra di dialogo scegliamo Bitmap dalla casella combinata; 4. specifichiamo il nome della bitmap da ritrovare; 5. specifichiamo il nome bitmap da sostituire; 6. per cercare la bitmap possiamo scegliere tra: • Trova successivo: per trovare l’occorrenza Figura 84: Pannello Trova e sostituisci, bitmap successiva.

• Trova tutto: per trovare tutte le occorrenze.

7. per sostituire la bitmap possiamo scegliere tra:

Pagina | 155

Capitolo 8

• •

Pagina | 156

Sostituisci: per sostituire solo l’ occorrenza selezionata.

Sostituisci tutto: per sostituire tutte le occorrenze.

Capitolo 9 Filtri e metodi di fusione In questo capitolo affronteremo i filtri, cioè degli effetti grafici che possono essere applicati al testo e ai simboli di tipo clip filmato e pulsante. Inoltre conosceremo i metodi di fusione che consentono di creare immagini con effetti compositi.

Filtro Ogni volta che viene applicato un nuovo filtro ad un elemento, questo viene aggiunto nell’ elenco dei filtri all’ interno del pannello Proprietà, ma vediamo quali sono i passaggi: 1. selezionare l’ oggetto; 2. dal pannello Proprietà andare nella sezione Filtri e cliccare sul pulsante Aggiungi filtro; 3. selezionare un filtro; 4. cambiare le opzioni.

Rimuovere un filtro

Se dobbiamo rimuovere un filtro seguiamo i seguenti passaggi: 1. selezionare l’ oggetto;

Pagina | 157

Capitolo 9

2. dal pannello Proprietà andare nella sezione Filtri e cliccare sul pulsante Rimuovi filtro.

Copiare e incollare un filtro

Se un filtro che abbiamo applicato ad un oggetto lo vogliamo applicare ad un altro: 1.

2.

3.

4.

selezionare l’ oggetto da cui copiare il filtro; selezionare il filtro da copiare; cliccare sul pulsante Appunti; dal menù a comparsa selezionare la voce Copia selezionati, se invece vogliamo copiare tutti i filtri scegliamo Copia tutto; 5. selezionare l’oggetto a cui applicare il filtro; 6. cliccare sul pulsante Appunti; 7. dal menù a comparsa scegliere Incolla dal menù.

Figura 85: Filtro applicato al testo

Pagina | 158

Filtri e metodi di fusione

Applicare un filtro preimpostato Per aggiungere dei filtri preimpostati: 1.

2.

3.

4.

selezionare l’ oggetto a cui vogliamo applicare il filtro; dalla scheda filtro clicchiamo sul pulsante aggiungi filtro; selezioniamo Preimpostazioni; selezioniamo il filtro.

Attivare o disattivare uno o piĂš filtri

Per attivare o disattivare un solo filtro clicchiamo sull’ icona accanto al nome del filtro, invece se vogliamo attivare o disattivare tutti i filtri: 1. clicchiamo sul pulsante Aggiungi filtro; 2. clicchiamo o su Attiva tutto oppure su Disattiva tutto.

Creare una libreria di filtri Per poter creare una libreria di filtri con impostazioni predefinite:

Figura 86: Filtro disattivato

1. applichiamo ad un oggetto uno o piĂš filtri; 2. clicchiamo sul pulsante Aggiungi filtro; 3. aggiungiamo un nuovo filtro;

Pagina | 159

Capitolo 9

4.

5.

6.

7.

8.

selezioniamo il filtro; clicchiamo sul men첫 Preimpostazioni; scegliamo Salva con nome; dalla finestra di dialogo immettiamo un nome; per confermare clicchiamo sul pulsante OK.

Rinominare un filtro

Per poter rinominare un filtro preimpostato: 1.

2.

3.

4.

5.

6.

7.

8.

9.

applichiamo ad un oggetto uno o pi첫 filtri; clicchiamo sul pulsante Aggiungi filtro; aggiungiamo un nuovo filtro; selezioniamo il filtro; clicchiamo sul men첫 Preimpostazioni; scegliamo Rinomina; doppio clic sul nome; immettere un nuovo nome; cliccare su Rinomina.

Eliminare un filtro

Per poter eliminare un filtro preimpostato:

1. cliccare sul pulsante Aggiungi filtro;

2.

3.

4.

5.

6.

7.

aggiungere un nuovo filtro; selezionate il filtro; cliccare sul men첫 Preimpostazioni; scegliere Elimina; selezionare il filtro; cliccare su Elimina.

Pagina | 160

Metodi di fusione

Filtri e metodi di fusione

Come abbiamo detto ad inizio capitolo, i metodi di fusione permettono di creare effetti unici tramite la miscelatura dei colori nei clip filmato sovrapposti.

Un metodo di colore ha i seguenti elementi: •

• • •

Colore di fusione: è il colore che viene applicato al metodo di fusione.

Colore di base: è il colore dei pixel sotto il colore di fusione.

Colore risultante: è il risultato derivante dall’ effetto della fusione sul colore di base.

Opacità: è il grado di trasparenza che viene applicato al metodo di fusione.

Su Flash Pro ci sono diversi metodi di fusione e il risultato dipende sia dal colore dell’ oggetto a cui stiamo applicando la fusione che dal colore sottostante.

I metodi di fusione che abbiamo a disposizione sono: • • •

• • • • •

Normale: non viene applicata nessuna fusione.

Livello: non modifica il colore.

Scurisci: modifica solo le aree in cui i pixel sono più chiari del colore di fusione.

Moltiplica: crea un colore più scuro moltiplicando il colore di base per quello di fusione.

Schiarisci: modifica solo le aree in cui pixel sono più scuri del colore di fusione.

Schermo: crea un effetto di decolorazione moltiplicando l’ opposto del colore di fusione per il colore di base.

Sovrapponi: a seconda dei colori di base moltiplica o scolora.

Luce intensa: a seconda del colore del metodo di fusione moltiplica o scolora i colori.

Pagina | 161

Capitolo 9 •

• • • • •

Differenza: crea un effetto simile a un negativo sottraendo il colore di base al colore di fusione o viceversa, dipende da chi dei due ha il valore di luminosità maggiore.

Aggiungi: utilizzato nelle animazioni per creare una dissolvenza con effetto di schiarimento.

Sottrai: utilizzato nelle animazioni per creare una dissolvenza con effetto di scurimento.

Inverti: inverte il colore di base.

Alfa: applica una maschera alfa.

Cancella: elimina tutti i pixel dal colore di base e anche quelli dello sfondo.

Applicare un metodo di fusione Per applicare un metodo di fusione: 1. selezionar e l’ istanza del clip filmato sullo stage; 2. dal pannello Proprietà selezionar e un metodo di fusione.

Figura 87: Applicato metodo di fusione

Pagina | 162

Capitolo 10 Suono e video In questo capitolo vedremo com’ è possibile importare suoni e video, quali formati possono essere importati e la gestione di questi con e senza la linea temporale.

Formati audio supportati Prima di elencare i vari procedimenti di importazione, cerchiamo di capire quali formati audio il nostro Flash CS5 accetta.

I formati audio importati possono essere: • • • •

mp3 WAV (solo Windows) AIFF (solo Macintosh) ASND

Se tra i vostri applicativi avete il programma QuickTime 4 o una versione successiva, potete importare anche questi formati audio: • • •

AIFF Sun AU WAV

Pagina | 163

Capitolo 10

• • •

Filmati QuickTime, solo audio Sound Designer II (solo Macintosh) Audio System 7 (solo Macintosh)

Importare suoni

Adesso che sappiamo quali tipi di file importare, vediamo come possiamo fare questa operazione: 1. andare sul menù File; 2. selezionare la voce Importa; 3. dal sottomenù cliccare sulla voce Importa nella libreria; 4. dalla finestra di dialogo individuare il file audio; 5. cliccare sul pulsante Apri.

Inoltre, Flash, vi mette a disposizione una serie di suoni che trovate nella libreria Suoni. Per poter aprire quest’ ultima, seguiamo questi passaggi:

1. andare sul menù Finestra; Figura 88: Pannello Librerie comuni, 2. selezionare la voce Librerie suoni comuni; 3. dal sottomenù cliccare sulla voce Suoni; 4. trascinare il file all’ interno del pannello Libreria.

Pagina | 164

Aggiungere un suono

Suono e video

Adesso vediamo com’ è possibile aggiungere un suono alla linea temporale: 1.

2.

3.

4.

5.

6.

importare un file audio; andare sul menù Inserisci; selezionare la voce Linea temporale; dal sottomenù cliccare sulla voce Livello; trascinare il suono dalla Libreria allo stage; dal pannello Proprietà selezionare il file audio dal menù a comparsa Audio; 7. selezionare dal menù a comparsa Effetto un effetto: • Nessuno: non viene applicato nessun effetto.

• Canale sinistro/Canale destro: riproduce il suono nel canale sinistro o nel canale destro.

• Dissolvenza da sinistra a destra/Dissolvenza da destra a sinistra: sposta l’ audio da un canale all’ altro.

• Dissolvenza in entrata: aumenta a poco a poco il volume del suono durante la sua riproduzione.

• Dissolvenza in uscita: riduce a poco a poco il volume del suono durante la sua riproduzione.

• Personalizzata: permette di modificare il suono creando dei punti in entrata e uscita.

8. selezionare dal menù a comparsa Sincronizza un’ opzione di sincronizzazione: • Evento: sincronizza il suono in base ad un evento, ad esempio un click su un pulsante.

• Avvio: ha lo stesso comportamento di Evento, con l’unica differenza che se la riproduzione del suono è iniziata non vengono riprodotte altre istanze.

• Interrompi: interrompe la riproduzione del suono.

Pagina | 165

Capitolo 10

Stream: sincronizza la riproduzione di un suono su un sito Web. 9. possiamo specificare un valore nella casella di testo Ripeti per ripetere piÚ volte il suono, oppure possiamo scegliere di ripetere in modo ciclico selezionando Ripetizione ciclica. •

Figura 89: Suono aggiunto nella Linea temporale

Aggiungere un suono ad un pulsante Possiamo associare un suono ad un pulsante tramite questi passaggi: 1. creiamo un pulsante; 2. importiamo un file audio;

Pagina | 166

Suono e video

clicchiamo sul menù del pannello Libreria; selezioniamo la voce Modifica; a questo punto si apre l’ Editor di pulsanti; creiamo un nuovo livello nella linea temporale; se ad esempio vogliamo che l’ audio si avvii nel momento in cui il puntatore del mouse si trova sopra il pulsante, allora selezioniamo il fotogramma che corrisponde allo stato Sopra; 8. aggiungiamo un fotogramma chiave vuoto tramite il tasto F7 dalla tastiera; 9. dal pannello Proprietà selezioniamo l’ audio dalla casella Nome; 10. nel campo Sincronizza scegliamo l’ opzione Evento.

11. clicchiamo sulla freccia in alto a sinistra dello stage per uscire da questa modalità.

3.

4.

5.

6.

7.

Sincronizzare un suono ad un’ animazione

Per far coincidere un suono ad un particolare momento dell’animazione, questi sono i passaggi da fare:

1. importare il file audio; 2. inserirlo in nuovo livello; 3. selezionare un fotogramma chiave iniziale che corrisponda al fotogramma chiave dell’ evento della scena; 4. creare nel livello dell’ audio un fotogramma chiave finale in corrisponda del fotogramma in cui desideriamo terminare il suono; 5. dal pannello Proprietà selezioniamo dal menù a comparsa Audio il suono che abbiamo inserito nel livello audio; 6. dal menù Sincronizzazione scegliamo l’ opzione Interrompi.

Pagina | 167

Capitolo 10

Gestire l’ audio senza la linea temporale Fino ad ora abbiamo visto che, ogni qualvolta che si importava un file audio, questo veniva inserito in un livello per poterlo gestire. In questo paragrafo descriveremo come gestire i suoni tramite i comportamenti.

Vediamo come:

1. importiamo il file audio; 2. selezioniamo un oggetto, ad esempio un pulsante; 3. dal pannello Comportamenti clicchiamo sul pulsante +; 4. selezioniamo la voce Audio; 5. dal sottomenù clicchiamo sulla

voce Carica audio Figura 90: Gestione dell' audio senza Linea temporale dalla libreria; 6. dalla finestra di dialogo immettere l’ identificatore di concatenamento e il nome dell’ istanza; 7. per confermare cliccare su Ok. 8. dal pannello Comportamenti clicchiamo nella sezione Al rilascio e scegliamo l’ evento che dovrà avviare la nostra azione.

Pagina | 168

Comprimere un suono

Suono e video

La compressione del suono è un’ operazione utile nel momento in cui vogliamo esportarlo. Per fare questa operazione eseguiamo i seguenti passaggi:

1. dal pannello Libreria facciamo doppio click sull’ icona del suono; 2. specifichiamo il tipo di compressione, Predefinita, ADPCM, mp3, Nessuna o Voce; 3. definiamo le impostazioni di esportazione, operazione che non deve essere svolta nel caso in cui abbiamo scelto nel punto precedente Predefinita; 4. confermiamo cliccando sul pulsante Ok.

Formati video supportati

Anche in questo caso, prima di elencare i vari procedimenti di importazione, cerchiamo di capire quali formati video il nostro Flash CS5 accetta.

I formati video importati possono essere: • • •

FLV F4V MPEG

Importare un video Se vogliamo importare un file video che è memorizzato all’ interno del nostro computer, ecco i passaggi da effettuare: 1. andare sul menù File; 2. selezionare la voce Importa;

Pagina | 169

Capitolo 10

3. dal sottomenù cliccare sulla voce Importa video; 4. dalla finestra di dialogo selezionare il video da importare; 5. se il tipo di formato video non è supportato da Flash Player, bisogna procedere alla conversione, quindi confermiamo cliccando sul pulsante Ok; 6. a questo punto si apre la finestra Importa video, non dobbiamo modificare nessuna opzione, ma cliccare sul pulsante Avvia Adobe Media Encoder; 7. adesso si apre la finestra Salva con nome e clicchiamo sul pulsante Salva; 8. viene aperta un’ altra finestra e da qui clicchiamo su Ok per confermare; 9. attendiamo l’ apertura di Adobe Media Encoder e scegliamo il formato con cui convertire il video; 10. selezioniamo un predefinito di codifica; 11. clicchiamo sul pulsante Inizia coda, per avviare la conversione; 12. terminata la conversione chiudiamo Adobe Media Encoder; 13. dalla finestra di dialogo Importa video clicchiamo sul pulsante Sfoglia; 14. dalla finestra Apri selezioniamo il file convertito e clicchiamo sul pulsante Apri; 15. clicchiamo sul pulsante Avanti; 16. selezioniamo l’ aspetto del lettore; 17. clicchiamo sul pulsante Avanti; 18. clicchiamo sul pulsante Fine.

Pagina | 170

Suono e video

Figura 91: Conversione video

Incorporare un video A differenza del procedimento precedente, quando si incorpora un video, esso viene collocato nella linea temporale in modo che i singoli fotogrammi video siano visibili sotto forma di fotogrammi della linea temporale. Ovviamente, questo metodo, ingrandisce il file SWF.

Ecco i passaggi: 1.

2.

3.

4.

andare sul men첫 File; selezionare la voce Importa; dal sottomen첫 cliccare sulla voce Importa Video; selezionare il video clip da importare;

Pagina | 171

Capitolo 10

5. selezionare Incorpora FLV nel file SWF e riproduci nella linea temporale; 6. cliccare sul pulsante Avanti; 7. scegliamo il tipo di simbolo tra: • Video incorporato • Clip filmato • Grafica 8. importare nello stage o nella libreria; 9. cliccare sul pulsante Fine.

Figura 92: Video incorporato

Pagina | 172

Gestire i video con i comportamenti

Suono e video

Vediamo un po’ com’ è possibile gestire i video tramite i comportamenti.

1. selezioniamo un simbolo; 2. dal pannello Comportamenti clicchiamo sul più e scegliamo un comportamento dal sottomenù Video incorporato; 3. selezioniamo il video; 4. selezioniamo un percorso relativo o assoluto; 5. se è necessario selezioniamo i parametri dei comportamenti e confermiamo con Ok; 6. nella sezione Evento clicchiamo su Al rilascio e selezioniamo un evento associato al mouse.

Componente FLVPlayback

Il componente FLVPlayback permette di inserire un lettore video in un’ applicazione per poter riprodurre dei video Flash.

Per poterlo configurare, seguiamo questi passaggi:

selezioniamo il componente FLVPlayback; andiamo sul menù Finestra; clicchiamo sulla voce Proprietà; dal pannello Proprietà immettiamo un nome di istanza; sempre dal pannello Proprietà selezioniamo la scheda Parametri; 6. specifichiamo i nuovi parametri o lasciamo quelli predefiniti.

1.

2.

3.

4.

5.

I parametri che troviamo nella scheda Parametri sono: •

autoPlay: se il valore impostato è true, il video viene riprodotto immediatamente dopo che è stato caricato, se è false, viene caricato solo il primo fotogramma.

Pagina | 173

Capitolo 10

•

• •

• • • • • • • •

autoRewind: se il valore è true, quando il video è finito si riavvolge in modo automatico, se è false non viene riavvolto in modo automatico. autoSize: se il valore è true, ridimensiona il componente per utilizzare le dimensioni di origine del video in fase di runtime. bufferTime: viene inserito un numero che rappresenta i secondi di bufferizzazione prima che il video venga riprodotto. contentPath: si specifica una stringa URL di un file FLV, F4V o XML che descrive come riprodurre il video (file AS2). source: si specifica una stringa URL di un file FLV, F4V o XML che descrive come riprodurre il video (file AS3). isLive: se il valore è true, specifica che il video è in streaming dal vivo da FMS. cuePoints: si specificano i cue point del video. maintainAspectRatio: se è true, ridimensiona il lettore video in modo da mantenere le proporzioni del video di origine. skin: permette di modificare lo skin del componente. totalTime: si specifica il numero totale di secondi del video di origine. volume: si specifica un numero tra 0 e 100 che rappresenta la percentuale del volume.

Pagina | 174

Suono e video

Figura 93: Gestione del video

Pagina | 175

Capitolo 11 Pubblicazione ed esportazione In questo capitolo andremo a vedere com’ è possibile pubblicare un filmato in Flash e gestire i parametri di pubblicazione.

Pubblicare un filmato Dopo aver creato e provato il filmato, è arrivato il momento di pubblicarlo.

Fino adesso abbiamo lavorato con file con estensione .fla, ma per poterlo pubblicare deve essere esportato in un file con estensione .swf, per fare in modo che possa essere visualizzato in pagine html o per farlo leggere dal Flash Player.

In realtà è possibile pubblicarlo in altri formati, GIF, JPEG, PNG e QuickTime, per fare in modo che chi non dispone del Flash Player possa visualizzare il filmato nei vari browser.

Fasi di pubblicazione

Il processo di pubblicazione di un filmato Flash è composto da 2 fasi.

Pagina | 177

Capitolo 11

Nella prima fase si scelgono i formati dei file di pubblicazione e le impostazioni, invece nella seconda fase si pubblica il filmato.

I passaggi per poter cambiare le impostazioni sono:

1. andare sul menù File; 2. scegliere la voce Impostazioni pubblicazione; 3. dalla finestra che si visualizza notiamo che per default ci sono tre schede, Formati, Flash e HTML.

I passaggi per pubblicare sono:

1. andare sul menù File; 2. scegliere la voce Pubblica.

In questa finestra di dialogo, in alto a destra, troviamo cinque pulsanti che ci permettono di importare o esportare il profilo, di crearne uno nuovo, di duplicarlo, di rinominarlo e di eliminarlo.

Scheda Formati

La scheda Formati è composta da 2 colonne.

Nella prima colonna scegliamo il tipo di file che Flash dovrà generare, invece nella seconda specifichiamo il nome di quest’ ultimo.

Possiamo notare, che per default, c’è un segno di spunta sulle checkbox Flash e HTML.

Il primo genera un filmato Flash Player che potrà essere inserito e visualizzato in una pagina Web, invece il secondo genera un file html per visualizzare un file swf in un browser.

Se spuntiamo anche le altre checkbox, saranno aggiunte in modo automatico le corrispondenti schede.

Pagina | 178

Gli altri tipi che possiamo trovare sono: •

• • • •

Pubblicazione ed esportazione

Immagine GIF: genera file come immagini o animazioni con estensione .gif.

Immagine JPEG: salva le immagini con estensione .jpg.

Immagine PNG: salva le immagini con estensione .png.

Proiettore Windows: genera file eseguibili in Windows.

Proiettore Macintosh: genera file eseguibili in Macintosh.

In basso si trova un pulsante Usa nomi predefiniti che inserisce in modo automatico i nomi dei file.

In basso a destra ci sono tre pulsanti: • • •

Annulla: per annullare le modifiche impostate.

Ok: per confermare le modifiche.

Pubblica: per pubblicare il filmato generando i file selezionati.

Pagina | 179

Capitolo 11

Figura 94: Scheda Formati

Pagina | 180

Scheda Flash

Pubblicazione ed esportazione

La scheda Flash ci permette di impostare le opzioni per la compressione di immagini e suoni e per la protezione del filmato durante l’ importazione.

La prima cosa che incontriamo in questa scheda è il Lettore, una casella combinata da dove possiamo scegliere la versione del Flash Player. La scelta è molto importante in quanto non tutte le funzioni di Flash CS5 sono disponibili nei filmati pubblicati prima di Flash Player 10.

La seconda cosa è lo Script, anche in questo caso abbiamo una casella combinata da dove andremo a scegliere la versione di ActionScript.

Nella sezione Immagini e suoni possiamo impostare la Qualità JPEG, cioè specifichiamo la qualità con cui le immagini dovranno essere salvate. Questa operazione può essere svolta o attraverso il trascinamento di un cursore o inserendo un valore numerico nella casella di testo.

Ai campi Flusso audio e Evento audio sono associati 2 pulsanti denominati Imposta. Se clicchiamo su questi pulsanti, viene visualizzata una finestra dove possiamo modificare le impostazioni relative all’audio.

Sempre in questa sezione abbiamo 2 checkbox: • •

Ignora impostazioni audio.

Esporta audio dispositivo.

La prossima sezione che incontriamo è Impostazioni SWF. Qui troviamo 4 checkbox: Pagina | 181

Capitolo 11

• • • •

Comprimi filmato: per comprimere ulteriormente il filmato.

Includi livelli nascosti: per esportare anche i livelli non visibili.

Includi metadati XMP: include tutti i metadati immessi nella finestra di dialogo Informazioni file.

Esporta SWC: esporta il file con estensione swc per la distribuzione di componenti.

Infine troviamo le impostazioni Avanzate. Inizialmente abbiamo 4 checkbox: • • • •

Genera rapporto dimensioni: genera un report che contiene le informazioni relative alle dimensioni del filmato realizzato.

Proteggi da importazione: evita che un qualsiasi utente apra il filmato con Flash e quindi modificarlo.

Ometti azioni trace: disattiva tutte le informazioni relative alle azioni Trace.

Consenti debug: per far si che un utente effettua il debug del filmato.

Il campo Password è attivo solamente se la checkbox precedente è spuntata, infatti in questa casella di testo si inserisce la parola chiave che permetterà all’ utente di effettuare il debug.

Scegliamo un modello di sicurezza tra: •

•

Accedi solo ai file locali: il file SWF può interagire solo con i file e le risorse nel sistema locale.

Accedi solo alla rete: il file SWF può interagire solo con i file e le risorse in rete.

Adesso scegliamo l’ Accelerazione tra: Pagina | 182

• •

•

Nessuna: nessuna impostazione.

Livello 1 – Diretta: consente al Flash Player di disegnare direttamente sullo schermo anziché sul browser.

Livello 2 – GPU: viene utilizzata la potenza di elaborazione disponibile della scheda grafica.

Pubblicazione ed esportazione

Nella casella di testo Limite temporale script viene immesso un intervallo massimo durante il quale è possibile eseguire gli script nel file SWF.

Scheda HTML

Figura 95: Scheda Flash

Nella scheda HTML andremo a impostare i parametri che serviranno ad indicare la posizione del filmato, le dimensioni, i colori di sfondo e così via….

Il campo Modello ci permette di specificare il modello in base al quale Flash dovrà generare il documento HTML. La scelta di questo viene effettuata attraverso una casella combinata. Accanto a Pagina | 183

Capitolo 11

quest’ultima c’è un pulsante denominato Informazioni, che visualizza le informazione del modello selezionato.

Se è stato impostato un modello diverso da Mappa immagine o QuickTime, spuntiamo Rileva versione di Flash.

Selezioniamo un’ opzione per Dimensioni: • • •

Adatta a filmato: utilizza le dimensioni del file SWF. Pixel: immettiamo il numero di pixel per la larghezza e altezza.

Percentuale: specifica la percentuale della finestra del browser che viene occupata dal file SWF.

Per controllare la Riproduzione troviamo le seguenti opzioni: • •

•

•

Pausa all’ avvio: mette in pausa il file SWF. Ciclo: appena arriva all’ ultimo fotogramma riproduce il tutto nuovamente.

Visualizza menù: per fare in modo che quando l’ utente clicca con il tasto destro del mouse sul file SWF si visualizza un menù.

Carattere dispositivo: sostituisce i caratteri non installati con caratteri di sistema.

Selezioniamo una opzione per la Qualità tra: • • •

Bassa: privilegia la velocità rispetto alla qualità.

Bassa automatica: migliora inizialmente la velocità, ma quando può ottimizza la qualità.

Alta automatica: crea un bilanciamento tra velocità di riproduzione e qualità, ma quando può dà priorità alla velocità di riproduzione.

Pagina | 184

• • •

Pubblicazione ed esportazione

Media: applica l’ antialiasing senza smussare le bitmap.

Alta: privilegia la qualità rispetto alla velocità di riproduzione.

Migliore: offre la migliore qualità di visualizzazione e non considera la velocità di riproduzione.

Selezioniamo dalla casella combinata una Modalità finestra tra: • • •

Finestra: sfondo opaco e utilizza il colore di sfondo HTML. Opaca senza finestra: imposta uno sfondo opaco, oscurando qualsiasi elemento si trovi al di sotto del contenuto.

Trasparente senza finestra: rende trasparente lo sfondo, consentendo al contenuto HTML di essere visualizzato sopra e sotto il contenuto.

Per posizionare la finestra del file SWF all’ interno della finestra del browser, selezioniamo una opzione Allineamento HTML tra: •

•

Valore predefinito: centra il contenuto nella finestra del browser e ritaglia i bordi se la finestra del browser è più piccola dell’applicazione.

A sinistra, A destra o In alto: allinea il file SWF lungo il rispettivo bordo del browser e, se è necessario, ritaglia i tre lati rimanenti.

Per posizionare il contenuto all’ interno dei limiti specificati, scegliamo una delle opzioni di Scala: •

Predefinita: rende visibile l’ intero documento nell’ area specificata senza distorsione.

Pagina | 185

Capitolo 11

•

•

•

Nessun bordo: scala il documento in modo da riempire l’ area specificata sempre senza distorsioni.

Adatta esattamente: visualizza l’ intero documento nell’ area specificata causando delle possibili distorsioni.

Nessuna scala: evita che il documento sia ridimensionato.

Selezioniamo anche un Allineamento Flash per impostare il posizionamento del contenuto Flash all’ interno della finestra dell’applicazione.

Spuntiamo la checkbox Mostra messaggi di avvertenza se

vogliamo visualizzare degli eventuali messaggi di errore.

Figura 96: Scheda HTML

Scheda GIF Se dobbiamo esportare disegni o semplici animazioni da utilizzare nelle pagine Web utilizziamo i file GIF. Pagina | 186

Pubblicazione ed esportazione

Nella scheda GIF troviamo le seguenti opzioni: • • • • • • •

Dimensioni: immettiamo dei valori per la larghezza e altezza per le immagini bitmap esportate.

Riproduzione: specifichiamo se creare un’ immagine statica o animata.

Ottimizza colori: rimuove gli eventuali colori non utilizzati.

Interlaccia: visualizza in modo incrementale il file GIF esportato in un browser mentre viene scaricato.

Attenua: applica un’ antialiasing per produrre immagini bitmap di qualità superiore.

Dithering uniformi: applica il dithering ai colori uniformi oltre che ai gradienti.

Elimina gradienti: converte i gradienti in colori uniformi.

Per specificare la trasparenza dello sfondo dell’ applicazione, scegliamo tra: • • •

Opaco: rende lo sfondo di un colore uniforme.

Trasparente: rende lo sfondo trasparente.

Alfa: imposta la trasparenza parziale.

Per simulare i colori che non sono disponibili, scegliamo tra le opzioni Dithering: • • •

Nessuno: disattiva il dithering, sostituendo i colori con quelli più simili, ma avendo dei risultati poco soddisfacenti.

Ordinato: produce un dithering di buona qualità.

Diffusione: produce il dithering migliore, ma aumenta la dimensione del file.

Per definire la tavolozza dei colori dell’ immagine possiamo scegliere tra: Pagina | 187

Capitolo 11

•

•

•

•

Web 216: utilizza una tavolozza a 216 colori supportata dai browser.

Adattato: analizza i colori dell’ immagine e crea una tavolozza con quei colori.

Adattata Web Snap: simile a quella precedente, con la differenza che converte colori molto simili alla tavolozza dei colori Web 216.

Personalizzata: crea una tavolozza ottimizzata per l’ immagine selezionata.

Figura 97: Scheda GIF

Scheda JPEG Il formato JPEG consente di salvare un’ immagine come bitmap a 24 bit altamente compressa. Viene utilizzata per esportare immagini come fotografie, gradienti o bitmap incorporate.

Le opzioni che troviamo nella scheda JPEG sono: • •

Dimensioni: immettiamo dei valori per la larghezza e altezza per le immagini bitmap esportate.

Qualità: trasciniamo il cursore o immettiamo un valore per la qualità di compressione del file JPEG.

Pagina | 188

•

Pubblicazione ed esportazione

Progressivo: per visualizzare le immagini JPEG in modo incrementale in un browser.

Figura 98: Scheda JPEG

Pagina | 189

Capitolo 11

Scheda PNG Il formato PNG è l’ unico formato bitmap utilizzabile da più piattaforme che supporta la trasparenza.

Le opzioni che troviamo nella scheda PNG sono: • • • • • • •

Dimensioni: immettiamo dei valori per la larghezza e altezza per le immagini bitmap esportate.

Profondità bit: impostare il numero di bit per pixel e i colori da utilizzare nella creazione dell’ immagine.

Ottimizza colori: rimuove gli eventuali colori non utilizzati.

Interlaccia: visualizza in modo incrementale il file PNG esportato in un browser mentre viene scaricato.

Attenua: applica un’ antialiasing per produrre immagini bitmap di qualità superiore.

Dithering uniformi: applica il dithering ai colori uniformi oltre che hai gradienti.

Elimina gradienti: converte i gradienti in colori uniformi.

Per simulare i colori che non sono disponibili, scegliamo tra le opzioni Dithering: • • •

Nessuno: disattiva il dithering, sostituendo i colori con quelli più simili, ma avendo dei risultati poco soddisfacenti.

Ordinato: produce un dithering di buona qualità.

Diffusione: produce il dithering migliore, ma aumenta le dimensione del file.

Per definire la tavolozza dei colori dell’ immagine possiamo scegliere tra: •

Web 216: utilizza una tavolozza a 216 colori supportata dai browser.

Pagina | 190

• •

•

Pubblicazione ed esportazione

Adattato: analizza i colori dell’ immagine e crea una tavolozza con quei colori.

Adattata Web Snap: simile a quella precedente, con la differenza che converte colori molto simili alla tavolozza dei colori Web 216.

Personalizzata: crea una tavolozza ottimizzata per l’immagine selezionata.

Per poter rendere il file più comprimibile scegliamo tra le Opzioni filtro: • • • • • •

Nessuno: disattiva il filtraggio.

Sotto: trasmette la differenza tra ogni byte e il valore del byte corrispondente del pixel precedente.

Su: trasmette la differenza tra ogni byte e il valore del byte corrispondente del pixel immediatamente superiore.

Medio: utilizza la media di due pixel adiacenti per prevedere il valore di un pixel.

Paeth: calcola una funzione lineare dei tre pixel adiacenti.

Adattato: analizza i colori dell’ immagine e crea una tavolozza con quei colori.

Pagina | 191

Capitolo 11

Figura 99: Scheda PNG

Pagina | 192

Capitolo 12 Creazione di contenuto accessibile In questo capitolo vedremo com’ è possibile rendere gli oggetti di un file Flash Pro accessibili anche ad utenti disabili.

Il W3C ha sviluppato delle linee guida per l’ accessibilità del contenuto Web, e questi sono stati adottati da molti paesi.

Screen reader Lo screen reader è un software che viene utilizzato dagli utenti ipovedenti. Esso permette di descrivere il contenuto del sito web attraverso una riproduzione audio. Ovviamente, per poter leggere gli oggetti non testuali essi devono essere resi accessibili.

Per impostazione predefinita il testo dinamico e di input, i pulsanti, i clip filmato e i documenti sono accessibili.

Per gli utenti audiolesi che non hanno la possibilità di comprendere il contenuto audio, vengono introdotte delle didascalie.

Pagina | 193

Capitolo 12

Pannello Accessibilità Per rendere accessibile gli oggetti presenti in un documento Flash Pro seguiamo i seguenti passaggi: 1. selezioniamo un oggetto; 2. andiamo sul menù Finestra; 3. selezioniamo la voce Altri pannelli; 4. clicchiamo sulla voce Accessibilità; 5. nel pannello troviamo le seguenti opzioni: •

•

•

•

Pagina | 194

Rendi accessibile Figura 100: Pannello Accessibilità l’oggetto: per impostazione predefinita questa opzione è attiva e sta ad indicare al Flash Player di passare allo screen reader le informazioni di accessibilità relative ad un oggetto.

Rendi accessibili gli oggetti secondari: per impostazione predefinita questa opzione è attiva solo per i clip filmato e indica al Flash Player di passare allo screen reader le informazioni di accessibilità relative a un oggetto secondario, in quanto un clip filmato potrebbe essere composto da più oggetti.

Etichetta automatica: indica al Flash Player di etichettare automaticamente gli oggetti sullo stage con il testo ad essi associato.

Nome: ci permette di specificare un nome per l’oggetto selezionato, che poi sarà letto dallo screen reader.

•

• •

Creazione di contenuto accessibile

Descrizione: ci permette di immettere una descrizione per l’ oggetto selezioniato che poi sarà letto dallo screen reader.

Scelta rapida: descrive all’ utente i tasti di scelta rapida che poi vengono letti dallo screen reader.

Indice tabulazione: questa opzione serve per la navigazione tramite tastiera, creando un ordine di tabulazione immettendo un valore numerico. Per visualizzare l’ ordine di tabulazione andiamo sul menù Visualizza e clicchiamo sulla voce Mostra ordine tabulazioni.

Ricordatevi che, per applicare le opzioni di accessibilità agli oggetti, essi devono avere un nome di istanza.

Se invece vogliamo rendere un’ intera applicazione SWF accessibile, seguiamo i seguenti passaggi: 1.

2.

3.

4.

5.

deselezioniamo tutti gli elementi nel documento; andiamo sul menù Finestra; selezioniamo la voce Altri pannelli; clicchiamo sulla voce Accessibilità; dal pannello dovremmo trovare per impostazione predefinita l’ opzione Rendi accessibile il filmato attiva; 6. scegliamo se attivare o meno l’ opzione Rendi accessibili gli oggetti secondari; 7. immettiamo un nome e una descrizione; 8. scegliere se attivare Etichetta automatica, oppure no.

Pagina | 195