Introduzione

Sono disponibili tre modi per aggiungere del testo al progetto Animate:

  • Con lo strumento testo.
    Nella palette Strumenti, fate clic sulla lettera T grande (o utilizzate il tasto di scelta rapida T), quindi fate clic e trascinate nel documento per creare una casella di testo. Inizialmente, non è necessario preoccuparsi troppo del posizionamento o del ridimensionamento della casella di testo dato che questi dettagli potranno essere gestiti più tardi. Iniziate quindi a digitare. Provate con la frase “ON the EDGE.” Il testo digitato è visualizzato sullo stage, come illustrato nella figura 1. Per creare più paragrafi, premete Invio come in un elaboratore di testi. Al termine, chiudete la finestra di testo premendo il pulsante Esc oppure facendo clic sul pulsante X nell’angolo in alto a destra.
  • Copiando e incollando.
    Se state lavorando con blocchi grandi di testo, avrete già preparato uno bozza in un elaboratore di testi o in un altro programma. In tal caso, copiate il testo preparato nell’elaboratore di testi, create una casella di testo in Animate e premete Ctrl+V (Comando-V) per incollarlo nel progetto. Il testo non sarà formattato esattamente come originariamente preparato, ma sarà tutto disponibile. Questo processo conserva una parte della formattazione principale, ad esempio le interruzioni di paragrafo.
  • Aprendo codice HTML con testo.
    Consideriamo l’ipotesi che abbiate già una pagina Web creata in un editor HTML o un altro strumento per la creazione di pagine Web e desiderate aggiungere un’animazione alla pagina statica. Potete aprire tale pagina in Animate selezionando FileApri e utilizzare Animate per animare gli elementi. Importando il testo in questo modo, ci sono limitazioni e non potete modificarlo o modificarne la formattazione. In pratica, è solo un altro elemento grafico che potete utilizzare in un’animazione. Un vantaggio significativo offerto da questo metodo è che si preservano i collegamenti all’interno del testo.

Modifica delle proprietà specifiche del testo

Una volta inserito il testo nel progetto Animate, potete modificarne l’aspetto utilizzando diverse proprietà specifiche, come mostrato nelle figura 2. Queste proprietà sono disponibili nel sottopannello Testo. Inizialmente, alcune delle opzioni utilizzate con minor frequenza potrebbero essere nascoste. Per mostrare e nascondere le altre proprietà, fate clic sul pulsante nell’angolo inferiore sinistro del sottopannello. I nomi di questi strumenti seguono le convenzioni di denominazione CSS (cascading style sheet), per cui sono in minuscolo con le parole separate da trattini.

  • font-family. Potete scegliere tra diverse varietà di tipi di caratteri. La varietà di font disponibili non è la stessa di quella che avreste da computer. Nella progettazione Web si è limitati ai font che sono disponibili al pubblico a meno di non poter fornire i font con il progetto. Per ulteriori informazioni su font e tipi di caratteri, consultate la sezione successiva.
  • color. Fate clic sul campione per visualizzare il selettore colore standard dal quale potete impostare il colore del testo.
  • font-size. Selezionate la dimensione del font con un valore. Accanto a font-size è presente un pulsante denominato Unità proprietà testo. Fate clic su di esso per modificare il metodo per specificare font-size.
  • font-unit. Animate utilizza tre unità diverse per specificare la dimensione dei font: pixel (px), em (em) e percentuale (%). Un pixel equivale a un punto sul monitor. Un em ha all’incirca le dimensioni della lettera M. La maggior parte dei browser Web consente agli utenti di modificare la dimensione del testo, per cui un em è un’unità che cambia a seconda dell’impostazione del browser. La percentuale è un’opzione utile quando si progetta contenuto Web che può essere visualizzato su dispositivi mobili e computer desktop.
  • font-style. Inclina il testo in modo che sembri corsivo.
  • font-weight. Offre diverse opzioni, ad esempio Thin, Extra Light, Normal ed Extra Bold. L’ordine delle opzioni e i valori ad esse associati sono di aiuto nel confrontare i diversi spessori.
  • font-decoration. Utilizzare questo pulsante per sottolineare il testo.
  • text-align. Come in un elaboratore di testi, Animate consente di allineare il testo a destra, al centro o a sinistra. L’allineamento influisce su tutto il testo presente nella casella di testo. Pertanto, per ottenere un paragrafo allineato a destra e un altro centrato, il testo dovrà essere in caselle di testo diverse.
  • text-indent. Imposta il rientro della prima riga all’interno di una casella di testo. Potete modificare il valore in pixel ma non è possibile utilizzare valori negativi per creare rientri sporgenti.
  • line-height. Per impostare lo spazio tra le righe di testo.
  • letter-spacing. Come dice il nome, potete regolare la spaziatura tra le lettere. Questo effetto è utilizzato spesso nella creazione di titoli o loghi di società, ma dovrebbe essere utilizzato con moderazione nel corpo del testo normale.
  • word-spacing. Varia la distanza tra le parole. Utilizzate questa opzione con attenzione o il testo potrebbe risultare poco elegante e di difficile lettura.

Utilizzo di font per Web

Il numero di tipi di caratteri che potete utilizzare nelle animazioni Animate può essere incrementato in un altro modo. Da anni, i progettisti Web utilizzano i font per Web. Per visualizzare un font specifico, i programmi, compresi i browser Web, devono avere accesso alla descrizione del font. La descrizione risiede generalmente nello stesso computer del programma, denominato anche client. I font per Web funzionano in modo leggermente diverso. Ad esempio, con i font per Web di Google (www.google.com/webfonts), le definizioni dei font sono memorizzate nei server di Google. In qualità di progettisti Web, potete utilizzare questi font aggiungendo del codice alle pagine che indicano ai browser la posizione delle descrizioni dei font.

In primo luogo, trovate il font per Web da usare. I font per Web di Google sono gratuiti e sorprendentemente facili da usare, per cui sono il candidato ideale per un primo tentativo. Di seguito sono illustrati i passaggi per selezionare un font per Web di Google e trovare il codice necessario per identificarlo nel progetto:

  1. Nel browser Web, immettete l’indirizzo www.google.com/webfonts. La pagina visualizzata mostra gli esempi dei font. I font disponibili sono centinaia, quindi utilizzate i widget a sinistra per filtrare i font. I pulsanti nella parte inferiore della pagina indicano i tre passaggi necessari per ottenere risultati dalla ricerca di font per Web: Choose, Review e Use (Scegli, esamina e usa).

  2. A sinistra, sotto la parola Filter (Filtri), fate clic sul menu a discesa. Scegliete tra Serif, Sans-Serif, Display e Hand Writing (Scrittura). Il menu utilizza le caselle di controllo, per cui potete scegliere una combinazione di caratteristiche. Potete utilizzare, ad esempio, Sans-Serif e Display.

  3. Se necessario, utilizzate i cursori Thickness (Spessore), Slant (Inclinazione) e Width (Larghezza) per limitare la ricerca dei font. Con una scelta così ampia, è utile ridurre il numero di font visualizzati sullo schermo.

  4. Utilizzate le schede nella parte superiore della finestra dei font per modificare
    la visualizzazione in Word (Parola), Sentence (Frase) o Paragraph (Paragrafo).

    Se state cercando un font per un’intestazione, la scheda Word o Sentence è la scelta
    migliore. Se scegliete un font per il corpo del testo, assicuratevi di verificarne l’aspetto
    con l’opzione Paragraph.

  5. Fate clic sul pulsante blu “Add to Collection” (Aggiungi alla raccolta). In una raccolta possono essere presenti più font, ma per non compromettere la velocità di rendering della pagina e soddisfare dei criteri di progettazione ottimale, è desiderabile limitare il numero di font utilizzato.

  6. Fate clic su Review (Esamina). Questo passaggio può anche essere omesso, ma come indicato dal nome, in questa pagina potete osservare con maggior attenzione il font scelto quando utilizzato in un titolo o in un paragrafo.

  7. Fate clic su Use (Utilizza). Viene caricata una nuova pagina con le istruzioni per utilizzare i font nel sito Web. Scendendo nella pagina troverete un riquadro blu (figura 3) con l’intestazione “Add this code to your website” (Aggiungi codice al sito Web).

  8. Selezionate la scheda Standard, quindi selezionate e copiate il codice visualizzato. Con il codice memorizzato negli Appunti, potete iniziare la seconda parte della procedura: aggiungere la posizione della descrizione del font al progetto Animate.

Aggiunta di font per Web alla composizione

Una volta scelto il font per Web di Google o di un altro marchio e aver copiato il codice che lo identifica, la sua aggiunta al progetto Animate è semplice. Di seguito sono riportati i passaggi:

  1. Nel pannello Libreria, sulla barra denominata Font, fate clic sul pulsante +, come mostrato nella figura 4.

    Viene visualizzata la finestra di dialogo Aggiungi font per web.

  2. Incollate il codice che identifica la posizione del font nella casella di testo “embed code” (incorpora codice) inferiore.

    Questo codice è fornito dalla stessa organizzazione che ospita il font per Web. Se avete seguito i passaggi precedenti, il codice è memorizzato negli Appunti.

  3. Digitate il nome del font per Web in Font Fallback List (Elenco font alternativi) presente sopra insieme ai font da utilizzare nel caso in cui il font per Web non sia disponibile. Se il computer client non è connesso a Internet, il font per Web non sarà disponibile.

  4. Fate clic sul pulsante Aggiungi font. Quando lavorate con il testo, troverete ora il font nel menu a discesa Nome font.

Modifica di altre proprietà del testo

Come qualsiasi altro elemento in Animate, probabilmente non pensate che il testo debba rimanere sempre statico. Fortunatamente per voi, i progettisti Web, non è necessario apprendere nuovi strumenti per far danzare il testo sullo schermo. Le proprietà Posizione X/Y determinano la posizione di visualizzazione del testo e le proprietà Dimensione L/ A determinano le dimensioni della casella di testo. Tenete presente che le proprietà Dimensione cambiano le dimensioni della casella di testo, ma non modificano la dimensione delle lettere. Per modificare la dimensione delle lettere, potete utilizzare le proprietà font-size o Adatta. In alcuni casi è necessario che le dimensioni del testo cambino in base alle dimensioni della finestra del browser. In tal caso, utilizzate % (percentuale) come Unità proprietà testo. Come per i disegni e le foto, potete creare dei fotogrammi chiave di proprietà sulla linea temporale per modificare nel tempo le proprietà del testo.

Vi ricordate gli strumenti per piegare, far girare e mutilare? Le proprietà Trasforma possono essere utilizzate anche con il testo. Provate e ruotate o inclinate i blocchi di testo per effetti speciali mentre li aggiungete o rimuovete dalla pagina Web. Utilizzate le proprietà Adatta per ingrandire o ridurre la casella di testo o il testo contenuto. La proprietà Adatta funziona sul testo come per un’immagine JPEG; immettete una percentuale e il contenuto si espande o si restringe. Tenete presente che ingrandendolo con la proprietà Adatta, il testo si sfoca leggermente.

Ritaglio del testo intorno ai bordi

Come con altri elementi grafici sullo stage, potete utilizzare le proprietà Ritaglia per nascondere i bordi della casella di testo. L’effetto è simile al ritaglio dei bordi di una fotografia. Pensate ad animare una casella di testo in modo che all’inizio sia solo visibile un puntino al centro che poi cresce fino a visualizzare l’intero blocco di testo. Selezionate il testo, quindi cercate in prossimità della parte inferiore del pannello Proprietà. Fate clic sul pulsante a forma di triangolo per espandere il sottopannello Ritaglia. Nell’angolo superiore destro del sottopannello, fate clic sul pulsante per attivare il ritaglio. Edge Animate offre quattro comandi che rappresentano il bordo superiore, inferiore, sinistro e destro dell’elemento (figura 7). Immettete o scorrete per selezionare i valori in pixel (px).

Mentre apportate le modifiche, potrete notare l’effetto che hanno sulla casella di testo. Volete rimuovere le proprietà di ritaglio dopo averle applicate? Fate clic con il pulsante destro del mouse (Control-clic) sull’elemento ritagliato e scegliete Rimuovi ritaglio dal menu di scelta rapida.

Creazione di un’intestazione che cade in posizione

Lo scopo del testo, nella maggior parte dei casi, è quello di comunicare un messaggio, quindi risulta controproducente imporre al pubblico del testo in costante movimento e cambiamento. Questo non significa che non possiate divertirvi un poco. Potete, ad esempio, fare in modo che l’intestazione della pagina Web cada o rimbalzi in posizione durante il caricamento iniziale della pagina. In questo progetto, create un banner nella parte superiore dello stage. Durante il caricamento della pagina Web, le tre parole “ON the EDGE” cadranno in posizione. In questo caso, dovete animare la frase “ON the EDGE”. Suddividete le parole in tre caselle di testo separate per poter spostare ciascuna parola indipendentemente. In altri casi, potete animare tutte le singole lettere di una parola o una frase. La parte più difficile del trucco consiste nell’ottenere un allineamento corretto delle lettere o delle parole quando sono nella posizione finale. La spaziatura delle lettere deve sembrare naturale e il testo deve essere allineato uniformemente su una linea orizzontale. In generale, quando animate parole o lettere, come nell’esempio seguente, può essere utile creare un modello di posizionamento ed è esattamente ciò che faremo in questo progetto. Il modello di posizionamento (figura 8) è visibile in fase di progettazione per semplificare l’allineamento delle parole e delle lettere da animare. Quando avrete completato l’animazione, potete rimuovere il modello.

Di seguito sono illustrati i passaggi necessari per creare un’intestazione che cade in posizione:

  1. Create e salvate un nuovo documento con dimensioni 550 x 400 con un colore di sfondo bianco. Come sempre, create una nuova cartella per salvare i file HTML e JavaScript del progetto.

  2. Con lo strumento Rettangolo (M), create un rettangolo di 550 px x 100 px e posizionatelo a X=0, Y=0. Impostate il colore di sfondo su R=200, G=210, B=250 e A=100%. Impostate il colore del bordo su nessuno. Assegnate al rettangolo l’ID BannerBG. Il modo più rapido per creare un rettangolo delle dimensioni specificate consiste nel trascinare e inserire rapidamente una casella di qualsiasi forma e digitare i valori in Proprietà. Accertatevi di fare clic sul collegamento accanto alle proprietà Dimensione L/A per immettere valori non proporzionali.

  3. Nel pannello Elementi fate clic sul pulsante Lock Element (Blocca elemento) accanto a BannerBG. L’icona di un lucchetto viene visualizzata accanto a BannerBG. A questo punto, non potrete selezionare o spostare involontariamente la casella blu sullo stage.

  4. Selezionate lo strumento testo e trascinate una casella di testo. Quindi, digitate ON the EDGE. Impostate il font Arial Black, la dimensione 72 px e l’allineamento Centrato. Questo testo fungerà da modello di posizionamento per il testo animato.

  5. In Proprietà specificate il nome OnEdgeTemplate per la casella di testo. Come con i grafici, dovete essere in grado di identificare blocchi di testo differenti nella linea temporale e nel pannello Elementi. A questo punto, la finestra delle proprietà del testo dovrebbe corrispondere a quella riprodotta nella figura 9.

  6. Impostate le dimensioni e la posizione della casella di testo in modo che questa coincida perfettamente con il rettangolo colorato. Le dimensioni dovranno corrispondere a 550 px x 100 px e la posizione a X=0, Y=0. Al termine dell’operazione, la parte superiore dello stage Animate dovrebbe avere lo stesso aspetto della figura 10. Se, per qualunque motivo, il testo dovesse essere dietro la casella blu, potete modificare l’ordine Z nel pannello Elementi. Trascinate semplicemente OnEdgeTemplate sopra BannerBG.

  7. Selezionate OnEdgeTemplate e premete Ctrl+D (c-D). In questo modo, il testo viene duplicato, anche se potreste non notarlo subito in quanto il duplicato si trova proprio sopra il testo precedente. Tuttavia, potrete vedere la dicitura OnEdgeTemplateCopy nel pannello Elementi.

  8. Trascinate OnEdgeTemplateCopy verso il basso al centro dello stage. Durante i passaggi successivi, utilizzerete questo elemento per creare varie caselle di testo con le singole parole: “ON”, “the” ed “EDGE”. Prima di ciò, però, è consigliabile completare l’impostazione del modello di posizionamento.

  9. Selezionate la versione originale di OnEdgeTemplate, quindi impostate il colore del testo su rosso (#ff0000). Come anticipato, questo testo viene utilizzato per un modello di posizionamento. Successivamente, il colore rosso consentirà di vedere più facilmente se il testo è posizionato correttamente.

  10. In Elementi fate clic sul pulsante Lock Element (Blocca elemento) accanto a OnEdgeTemplate. Questa operazione consente di bloccare il modello di posizionamento nella posizione corretta affinché non possiate selezionarlo o spostarlo involontariamente.

  11. Selezionate OnEdgeTemplateCopy e premete due volte i tasti Ctrl+D (c-D). In questo modo, vengono create altre due copie dell’intero testo del banner.

  12. Fate doppio clic sul primo OnEdgeTemplateCopy. Nella casella di modifica del testo, eliminate tutto eccetto la parola “ON”. Quindi, in Proprietà rinominate il testo ON. Quando animate singole parole o lettere è preferibile eliminare gli spazi aggiuntivi e ridurre la larghezza della casella di testo per adattarla al testo modificato.

  13. Ripetete il passaggio 12 per creare gli elementi di testo per “the” ed “EDGE”. Adesso, avete tre parole correttamente etichettate che potete identificare e animare indipendentemente. Inoltre, potete ridimensionare la larghezza delle caselle di testo in modo che possano contenere le parole, come mostrato nella figura 11.

  14. Trascinate la parola “ON” verso l’alto in modo che si trovi sopra lo stage, leggermente a sinistra. Trascinate la parola “EDGE” in modo che si trovi sopra lo stage, leggermente a destra. Trascinate la parola “the” verso l’alto sopra lo stage. Queste sono le posizioni iniziali per ciascuna delle parole, che dovrebbero essere completamente all’esterno dello stage.

  15. Selezionate “ON” e impostate la proprietà Rotate (Ruota) su -30. Selezionate “EDGE” e impostate la rotazione su 30 gradi. Queste due parole sembreranno cadere ad un angolo dai rispettivi lati.

  16. Selezionate tutte e tre le parole e fate clic sui pulsanti Posizione e Rotate Add Keyframe (Ruota aggiungi fotogramma chiave). Le posizioni iniziali di ogni parola vengono debitamente registrate in fotogrammi chiave.

  17. Trascinate l’indicatore di riproduzione sul contrassegno di mezzo secondo: 0:00.500. L’intera animazione impiegherà un secondo, ovvero molto tempo per una semplice animazione come questa e voi non desiderate annoiare il vostro pubblico. Ogni parola impiegherà mezzo secondo per completare il movimento. Ognuna di esse inizierà a muoversi in un momento diverso.

  18. Selezionate “ON” e impostate la proprietà Rotate (Ruota) di nuovo su 0, quindi spostate “ON” sulla stessa parola nel modello di posizionamento. Se desiderate rivedere il movimento, trascinate avanti e indietro l’indicatore di riproduzione. Se necessario, potete regolare il punto iniziale o finale. Spostate l’indicatore di riproduzione nella posizione corretta e perfezionate la posizione della parola.

  19. Spostate l’indicatore di riproduzione su 0:00.250. Quindi, selezionate la parola “the” e fate clic sul pulsante Location Add Keyframe (Posizione aggiungi fotogramma chiave). L’intenzione qui è avviare il movimento della parola “the” prima che termini il movimento della parola “ON”. Tuttavia, se desiderate che la parola “the” resti ferma per il primo quarto di secondo, dovete creare due fotogrammi chiave di posizione con valori uguali a 0:00.000 e 0:00.250.

  20. Trascinate l’indicatore di riproduzione su 0:00.750, quindi spostate “the” sulla stessa parola nel modello di posizionamento. Utilizzate il cursore Timeline Zoom per visualizzare meglio la linea temporale. Le unità di misura nella parte superiore della linea temporale cambiano in base al livello di zoom (figura 11).

    Nessuna rotazione viene utilizzata per “the”, di conseguenza, la parola sembrerà cadere verso il basso.

  21. Spostate l’indicatore di riproduzione su 0:00.500. Selezionate “EDGE”, quindi fate clic sui pulsanti Posizione e Rotate Add Keyframe (Ruota aggiunti fotogramma chiave).

    In questo modo potete mantenere “EDGE” in posizione per il primo mezzo secondo dell’animazione.

  22. Spostate l’indicatore di riproduzione su 0:01 e trascinate “EDGE” in posizione sul modello di posizionamento.

    In corrispondenza del contrassegno di 1 secondo sulla linea temporale, le parole avranno terminato il loro movimento e la prima versione dell’animazione sarà stata completata, eccetto per la rimozione del modello di posizionamento.

    Prima di rimuovere il modello di posizionamento rosso, è utile visualizzare in anteprima l’animazione. A tale scopo, premete Home, quindi premete la barra spaziatrice. Se necessario, potete continuare a modificare i punti iniziali e finali per le parole animate. Ad esempio, potreste preferire che “ON” ed “EDGE” cadano in posizione per primi e la parola “the” venga aggiunta in ultimo.

Utilizzo del modello

Il modello di posizionamento rosso non è stato ideato per essere un elemento permanente dell’animazione. Pertanto, se il risultato vi soddisfa, potete rimuoverlo. Innanzitutto, disattivate il pulsante Lock Element (Blocca elemento) per rendere selezionabile il modello. Quindi, potete selezionare il modello nel pannello Elementi o sullo stage e premere Elimina. In alternativa, potete trasformare il modello in un’ombra esterna (figura 13) o utilizzare l’effetto bagliore per il testo.

  • Per l’ombra esterna, impostate il testo su un tono grigio-medio, quindi regolate l’opacità a piacere. Generalmente va bene una percentuale del 30%. Potete scegliere di mantenere nascosta l’ombra esterna finché le tre parole non hanno terminato il movimento. In questo caso, impostate l’opacità su zero fino a tale punto dell’animazione, quindi aumentatene il valore.
  • Per un effetto bagliore, scegliete un colore giallo o arancione. Usate il controllo Adatta per rendere il testo leggermente più grande rispetto al testo che cade in posizione. Anche in questo caso, probabilmente vorrete utilizzare l’opacità per controllare il tempo e l’aspetto del testo di bagliore. Potreste volere una dissolvenza in apertura e in chiusura per l’effetto bagliore, in modo tale da aggiungere enfasi momentanea all’intestazione.

Aggiunta del rimbalzo

Se l’esempio precedente, in cui il testo si trova nella posizione desiderata, è troppo piatto per la vostra pagina Web, potrebbe essere utile aggiungere all’azione un po’ di rimbalzo. Il rimbalzo fa sembrare che la pagina Web rispetti le leggi della fisica. Come una palla da basket, il vostro testo può iniziare con un grande rimbalzo e, in seguito, uno o due rimbalzi più piccoli finché non si stabilizza al posto giusto. Potete creare il vostro rimbalzo aggiungendo fotogrammi chiave di posizione oppure utilizzando le proprietà di Andamento che fanno parte della transizione nella linea temporale.

Creazione manuale di un rimbalzo

Aprite il file e analizzate il pannello Elementi (vedrete lo stage con altri tre elementi). “BOUNCE” è la parola che verrà animata. “BounceTemplate” (testo in rosso) è il modello di posizionamento. Come nell’esempio precedente, questo indica la posizione finale del testo animato. L’elemento di base è un rettangolo grigio posizionato nella parte inferiore dello stage. Questo indica la base su cui il testo rimbalzerà.

Un movimento di rimbalzo viene creato nella linea temporale quando vengono aggiunti fotogrammi chiave con posizioni alternate verso l’alto e verso il basso (figura 14). Con l’indicatore di riproduzione ancora su 0:00, selezionate BOUNCE e fate clic sul pulsante “Aggiungi fotogramma chiave per Y” in Proprietà. In questo modo verrà impostato il punto di inizio. Per la parte successiva del processo, trascinate l’indicatore di riproduzione a 1:00 e spostate BOUNCE affinché copra BounceTemplate.

Fate clic su “Aggiungi fotogramma chiave per Y” per aggiungere nuovi fotogrammi chiave di posizione. Trascinate l’indicatore di riproduzione fino a 1,75, quindi spostate BOUNCE vicino al centro dello stage. Spostate l’indicatore di riproduzione a 2,25 e spostate indietro BOUNCE lungo il modello. Potete creare alcuni altri rimbalzi utilizzando un punto più breve per il movimento (un istante, un quarto di secondo). Per ogni rimbalzo verso l’alto, riducete la distanza.

Quando vi stancate di un rimbalzo verso l’alto e verso il basso costante, potete sempre aggiungere una piccola rotazione al movimento, facendo sembrare che la parola stia rimbalzando avanti e indietro tra gli angoli inferiori. Se riducete la proprietà della scala verticale quando il testo tocca la base, potete creare un’azione in cui il testo viene schiacciato (simil cartone animato), come se il testo venisse compresso all’impatto con la base.

Utilizzo del rimbalzo predefinito di Animate

Per prima cosa, ecco una piccola introduzione alle transizioni e al concetto di andamento. Quando viene animato un elemento sullo stage, modificando le proprietà e creando le proprietà del fotogramma chiave nella linea temporale, vengono create le transizioni. Le transizioni vengono visualizzate come barre nella linea temporale. Come gli elementi sullo stage, anche le transizioni dispongono di proprietà. Una di queste proprietà viene chiamata Andamento. Nella realtà, quando gli oggetti vengono spostati, questi accelerano e decelerano. Non è possibile che un’auto possa muoversi immediatamente a massima velocità o fermarsi all’istante. Le proprietà di Andamento aiutano a creare un movimento più realistico controllando automaticamente la transizione di un elemento. In questo modo una delle opzioni Andamento aiuta a creare un movimento di rimbalzo.

Di seguito sono riportati alcuni passaggi per scoprire le proprietà di transizione:

  1. Trascinate l’indicatore di riproduzione a 0:01 e BOUNCE verso il basso affinché copra BounceTemplate. Animate creerà una transizione nella linea temporale.

  2. Nella linea temporale, fate clic sulla corsia di transizione accanto a BOUNCE. La transizione verrà evidenziata nella linea temporale.

  3. Nella parte superiore della linea temporale, fate clic sul pulsante Andamento. Verrà mostrato il pannello Andamento al di sopra della linea temporale. Inizialmente, la descrizione di questo pulsante sarà Andamento: lineare, poiché questo è il metodo di andamento che viene applicato. Con l’andamento lineare, la transizione viene applicata a un ritmo costante dall’inizio alla fine.

  4. Sul lato sinistro del pannello Andamento, fate clic su Agevola in uscita. Quindi, a destra, fate clic su Rimbalzo, come nella figura 15. Quando fate clic su Agevola in uscita, il pannello mostra un numero di metodi per Agevola in uscita. Il grafico offre una rappresentazione visiva del metodo di andamento.

  5. Fate clic all’esterno del pannello Andamento. Il pannello si chiuderà e il metodo di andamento verrà applicato alla transizione selezionata.

  6. Premete il tasto HOME e poi la barra spaziatrice.

    Quando l’animazione verrà riprodotta, noterete una piacevole azione di rimbalzo alla fine del movimento. Se avete adottato EaseInBounce, il movimento di rimbalzo dovrebbe avvenire all’inizio della transizione.

    Le proprietà di Andamento per le transizioni possono far risparmiare molto tempo. Animate offre numerose transizioni diverse, ma talvolta i nomi sono poco indicativi. Il modo migliore per scoprire le diverse caratteristiche di andamento consiste nel creare un’animazione di esercitazione e applicare diversi andamenti a elementi e transizioni identiche.

Creazione della prima animazione

  1. Avviate Animate e selezionate FileNuovo per creare un nuovo documento. Quando create un nuovo documento, cominciate con uno stage vuoto. Vedrete “Stage” come unico elemento elencato nelle finestre Elementi e Proprietà. Come indicato nel pannello Proprietà, lo Stage ha dimensione, colore e altre proprietà. In seguito scoprirete di più su ognuna di queste proprietà.

  2. Create una cartella per il progetto e poi selezionate FileSalva con nome per salvare il file con un nome come Ciao_Mondo o Prima_Prova.

    Potete creare una cartella al di fuori di Animate utilizzando Esplora risorse o Finder, oppure potete creare una nuova cartella dal programma utilizzando il comando FileSalva con nome. È opportuno salvare immediatamente il progetto di Animate con un nome utile. In questo modo non finirete per avere un elenco di progetti “senza titolo” che non ricordate. Inoltre, ciò permette di salvare presto e spesso il lavoro con un rapido CTRL+S o Comando-S. È consigliabile salvare ogni progetto di Animate nella sua cartella, poiché quando salvate per la prima volta un progetto, il programma crea diversi file e una cartella edge_includes.

  3. Nella finestra Proprietà, fate clic sul campione bianco Colore di sfondo. Viene visualizzato un pannello in cui è possibile scegliere un colore (figura 16). Se preferite un approccio totalmente visivo, fate clic sulla barra di spettro a sinistra per una tonalità di base e quindi fate clic sul quadrato per regolare la selezione. In alcuni casi, è possibile disporre di una precisa specifica di colore nel formato RGB (rosso-verde-blu) o come numero esadecimale.

  4. Quando viene visualizzato il selettore colore, scegliete un colore blu scuro per rappresentare lo spazio scuro. In caso di dubbi, provare R=30 G=45 B=90 A=100 per questo progetto. Animate utilizza il metodo predefinito di Adobe per la scelta dei numeri. Quando visualizzate un numero evidenziato, ciò indica che è possibile cliccare e digitare un numero, oppure che è possibile cliccare e trascinare per ricercare un numero. Trascinate verso destra per aumentare il numero, a sinistra per ridurre.

  5. Sempre nel pannello delle proprietà Stage, modificate la voce Riversamento in nascosto. La proprietà Riversamento controlla la visibilità degli elementi quando vengono visualizzati in un browser Web. In una pagina Web, lo stage potrebbe rappresentare una sola parte dell’intera pagina Web. Potete controllare la visibilità degli elementi fuori dal rettangolo dello stage. Modificate questa proprietà in nascosto quando non desiderate visualizzare gli elementi che si trovano fuori dallo stage.

  6. Scegliete FileImporta. Nella finestra Importa che viene visualizzata, individuate e selezionate un’immagine, come ad esempio, un pianeta Terra. Fate clic su Apri per importare l’immagine nel progetto.

    Dopo aver importato un file nel progetto Animate, questo viene elencato nella finestra Elementi e visualizzato nello stage. Il file viene selezionato automaticamente, quindi potete visualizzare le proprietà del nuovo elemento importato nella finestra Proprietà. Le proprietà di visibilità di "planet_earth" sono disponibili nella parte superiore del pannello. Subito dopo sono riportate le proprietà Posizione e dimensioni. Successivamente, è possibile visualizzare le proprietà Trasforma che consentono di ruotare, inclinare e ridimensionare gli elementi. Sotto è elencato il file di origine, elemento utile se non si ricorda il nome del file.

  7. Nel pannello Proprietà, fate clic sulla casella ID nella parte più in alto e modificate planet_earth in World.

    Le immagini importate in Animate vengono denominate con il nome del file. Se necessario, è possibile rinominare l’elemento in Animate. Tenete presente che ciò non modifica il nome dell’immagine. Quando lavorate in Animate viene utilizzato l’ID World. Come descritto più avanti in questa guida, gli ID hanno un’importante funzione nel codice HTML. Notate che nel pannello Elementi World viene visualizzato con il nuovo nome. Poiché si trova sullo stage, World viene visualizzato anche nella linea temporale.

  8. Nella linea temporale, verificate che l’indicatore di riproduzione sia posizionato su 0:00. Se da quando avete creato il progetto non avete apportato alcuna modifica alla linea temporale, l’indicatore di riproduzione sarà posizionato su 0:00, ovvero l’inizio o il primo frame dell’animazione, come illustrato nella figura 17. Se è necessario spostare l’indicatore di riproduzione, trascinarne la parte inferiore di colore oro. La parte superiore denominata blocco si sposterà automaticamente.

    Successivamente verranno fornite ulteriori informazioni sulle due parti dell’indicatore di riproduzione.

  9. Trascinate World sotto lo stage. Come descritto al punto 5, potete controllare se gli elementi che si trovano fuori dallo stage vengono visualizzati nella pagina Web. Con Riversamento impostato su nascosto, quando siete nell’area di lavoro di Animate, gli elementi che si trovano fuori dallo stage vengono visualizzati in un colore leggermente più scuro del solito. Quando il progetto finale viene visualizzato in un browser, questi elementi vengono nascosti.

  10. Nella linea temporale, verificate che il pulsante Modalità fotogramma chiave automatico sia premuto. Quando il pulsante Modalità fotogramma chiave automatico (figura 17) è premuto, i fotogrammi chiave vengono creati automaticamente nella linea temporale mentre modificate le proprietà degli elementi. Gli indicatori del fotogramma chiave hanno l’aspetto di un rombo.

  11. Nella linea temporale, verificate che il pulsante Modalità transizione automatica sia premuto. Quando questo pulsante è premuto, Animate crea transizioni omogenee, senza cambiamenti improvvisi. In questo caso, l’immagine World si sposterà gradualmente da una posizione all’altra.

  12. Trascinate l’indicatore di riproduzione su 0:01 sulla linea temporale. Nella linea temporale, 0:01 indica il primo secondo dell’animazione. Una linea rossa si estende dall’indicatore di riproduzione verso il basso, fornendo un indicatore per tutti i livelli di elementi e proprietà.

  13. Con World selezionato, nel pannello Proprietà passate a Posizione e dimensioni e fate clic sui pulsanti a forma di rombo accanto a X e Y. Due fotogrammi chiave a forma di rombo vengono visualizzati nella linea temporale per indicare la posizione del bordo Sinistro e Superiore dell’immagine World. Le proprietà X e Y consentono di impostare la posizione degli elementi sullo stage. Facendo clic sul rombo accanto a Posizione nel pannello Proprietà, registrerete manualmente la posizione di World sullo stage. In questo modo, World resterà nella stessa posizione X/Y per il primo secondo dell’animazione.

  14. Fate clic sul pulsante Alterna blocco, quindi trascinate la parte inferiore di colore oro dell’indicatore di riproduzione su 0:03. Per animare un elemento, modificatene le proprietà per un periodo di tempo specificato. L’indicatore di riproduzione e il blocco consentono di contrassegnare due istanti di tempo, come illustrato nella figura 18.

  15. Trascinate l’immagine World in modo che Earth sia visibile sullo stage. Potete centrare l’immagine sullo stage o scegliere il layout desiderato.

  16. Fate clic sul pulsante Alterna blocco, quindi premete il tasto Home e successivamente la barra spaziatrice. Quando premete Home, l’indicatore di riproduzione torna a 0:00. Premendo la barra spaziatrice viene riprodotta l’animazione, in modo da poterne visualizzare l’anteprima sullo stage.

  17. Riportate l’indicatore di riproduzione su 0:00 e quindi, nella barra degli strumenti, fate clic sulla lettera T . Viene selezionato lo strumento di testo e il cursore assume la forma di una croce.

  18. Fate clic sullo stage e digitate Hello World. Al termine, chiudete la finestra di testo premendo il pulsante ESC oppure facendo clic sul pulsante X nell’angolo in alto a destra. Le parole "Hello World" vengono visualizzate sullo stage, ma è possibile che non siano posizionate o formattate nel modo desiderato.

  19. Nella finestra Proprietà, impostate l’ID per la casella di testo su HelloWorld. L’assegnazione di un nome al testo consente di identificarlo più facilmente nella linea temporale e nel pannello Elementi. Animate non supporta il carattere di spaziatura nei nomi, pertanto è necessario utilizzare HelloWorld o Hello_World.

  20. Formattate il testo utilizzando il pulsante Proprietà. Modificate il colore del testo in bianco o blu molto chiaro. Selezionate Arial Black o un altro font grassetto. Regolate le dimensioni in modo da riempire quasi interamente lo schermo (72 px è ideale con Arial Black). Animate annota ogni modifica del testo nella linea temporale, aggiungendo i livelli delle proprietà e creando i fotogrammi chiave.

  21. Posizionate il testo. Se non siete sicuri della posizione, provate a centrare il testo orizzontalmente e a posizionarlo a circa un terzo dello stage.

  22. Con l’indicatore di riproduzione su 0:00, impostate l’opacità su 0. Il cursore Opacità si trova nella parte superiore del pannello Proprietà. Ciò significa che il testo non sarà visibile all’inizio dell’animazione. Verrà visualizzata solo la casella di selezione che scomparirà quando si fa clic su un altro elemento. Potrete comunque selezionare qualsiasi elemento, visibile o meno, facendo clic sul relativo nome nel pannello Elementi.

  23. Accertatevi che Alterna blocco sia disattivato. Quando Alterna blocco è disattivato, il pulsante non è premuto e il blocco si sposta insieme all’indicatore di riproduzione.

  24. Trascinate l’indicatore di riproduzione su 0:02. Con il testo selezionato, fate clic sul rombo accanto a Opacità nel pannello Proprietà. Mentre trascinate l’indicatore di riproduzione, viene visualizzato il Mondo in movimento sullo stage. I produttori di film e gli animatori definiscono scrubbing il trascinamento dell’indicatore di riproduzione: si tratta di un modo semplice e rapido per rivedere un segmento dell’animazione. Facendo clic sul rombo Opacità si crea un fotogramma chiave in corrispondenza dell’indicatore dei 2 secondi in cui il testo è ancora invisibile.

  25. Riportate Alterna blocco indietro, quindi trascinate l’indicatore di riproduzione sul marcatore 0:03. Con il blocco su 0:02 e l’indicatore di riproduzione su 0:03, è possibile creare un’altra transizione.

  26. Con la casella di testo HelloWorld selezionata, impostate l’opacità su 100. Animate crea una transizione in modo che il testo cambi gradualmente l’opacità dallo 0 al 100 percento tra 0:02 e 0:03 nell’animazione.

  27. Trascinate il blocco sul marcatore 0:03, quindi trascinate l’indicatore di riproduzione su 0:04. Riportate l’opacità su 0. Il testo scompare nuovamente.

  28. Premete Ctrl + S (Comando-S) per salvare il lavoro.

    Come illustrato in precedenza, Animate consente di salvare l’animazione come raccolta di file HTML e JavaScript. Il file HTML principale utilizza il nome che è stato immesso al punto 2 la prima volta che avete salvato il progetto. Quindi, ad esempio, potete vedere Hello_World .html nella cartella del progetto. Quando è stata eseguita l’importazione dell’immagine planet_earth.png, Animate ha creato una cartella di immagini e ha inserito una copia del grafico nella cartella. La vostra semplice animazione è completata. Potete visualizzarla in anteprima in Animate premendo il tasto Home e quindi la barra spaziatrice. La terra prende corpo nella visualizzazione mentre il messaggio sfuma e si dissolve (Figura 19). L’intera animazione richiede 4 secondi.

Impostazione dello stage

Come disse il Bardo qualche secolo fa, "Tutto il mondo è un palcoscenico". Questo è senz’altro vero in Edge Animate. Come illustrato nel Capitolo 1, quando inserite un elemento sullo stage, lo stesso diventa visibile al pubblico. Vi sono due modi per nascondere o rimuovere gli elementi dallo stage. Se le proprietà di Riversamento dello stage sono impostate su nascosto, è possibile uscire dallo stage a destra, a sinistra, in alto o in basso spostando l’elemento all’esterno dell’area di visualizzazione.

Almeno, non è visibile quando viene visualizzato in un browser. Lo stage con cui lavorate in Edge Animate rappresenta una parte di una pagina Web quando viene visualizzata in un browser. Lo stage ha un numero di proprietà limitato. Le più ovvie sono le dimensioni e il colore di sfondo, tuttavia è opportuno comprenderle tutte. Di seguito è riportato l’elenco, a partire dalla parte superiore del pannelloProprietà:

  • L’ID, come è facile immaginare, è il nome della vostra animazione. Quando salvate un progetto, Animate crea una pagina Web, nota anche come documento HTML. La maggior parte dei browser mostra l’ID della pagina Web in una scheda o sulla barra del titolo della finestra.
  • Inizialmente, le dimensioni dello stage sono indicate come proprietà L (larghezza) e A (altezza), espresse in pixel. Niente di nuovo, fin qui. Potete digitare o trascinare la larghezza e l’altezza dello stage. Non è indispensabile che lo stage appaia nell’angolo in alto a sinistra di una pagina Web. Ad esempio, se la composizione Animate è un banner pubblicitario, è possibile creare uno stage alto e stretto e quindi posizionarlo sul lato sinistro della pagina. Utilizzate il collegamento accanto alle proprietà L e A per bloccare e sbloccare le proporzioni dello stage. Quando il collegamento di Larghezza e Altezza è continuo, modificando una dimensione si cambia automaticamente anche l’altra, in modo che lo stage resta proporzionato; quando il collegamento è discontinuo, è possibile modificare L e A indipendentemente. È possibile modificare l’unità di misura da pixel (px) a percentuale (%). Ad esempio, se la larghezza dello stage viene impostata su 80%, lo stage sarà pari all’80 percento della dimensione della finestra del browser Web in cui viene visualizzato. Questa funzione è di grande aiuto quando si sviluppa una pagina per computer, tablet e telefono. Inoltre, se si ridimensiona la finestra del browser, lo stage si adatta automaticamente alle nuove dimensioni.
  • Il colore di sfondo viene impostato mediante un selettore colore. Nel pannello Proprietà, fate clic sul campione colore e apparirà un selettore colore, come illustrato nella Figura 20. Fate clic sulla barra (denominata anche spettro) a sinistra per scegliere una tonalità, quindi fate clic sul quadrato più grande per regolare la sfumatura. Il cerchio è posizionato sopra al colore selezionato e il campione all’angolo in basso a destra lo visualizza. I tre campioni in alto a destra consentono di scegliere rapidamente uno sfondo bianco, nero o trasparente. Se lavorate in team, è possibile che vi venga data una specifica di colore in RGB o nei formati esadecimali. D’altro canto, se siete voi a decidere, potreste voler specificare un colore per gli altri progettisti.
  • Utilizzate L min e L max per impostare la larghezza minima e massima per lo stage. Le pagine Web non sono di dimensioni fisse. La pagina può essere visualizzata su uno smartphone o su un grande schermo TV. Inoltre, gli utenti possono ridimensionare la finestra del browser. Potete acquisire un certo controllo sul modo in cui si presenta il vostro progetto, impostando la larghezza minima e massima. È possibile utilizzare i pixel per impostare un valore assoluto, oppure si può utilizzare una percentuale per i design reattivi. Inizialmente, il valore L max è impostato su Nessuno. Per attivarlo, fate clic sull’etichetta e deselezionate Nessuno. A questo punto, il valore viene visualizzato nel pannello ed è possibile effettuare le regolazioni.
  • Il menu Riversamento controlla il modo in cui vengono visualizzati gli elementi si trovano all’esterno dello stage. Spesso, è necessario impostare questo menu su Nascosto, rendendo così invisibili gli elementi al di fuori del rettangolo dello stage. L’opzione Nascosto funziona bene quando si desidera che gli elementi entrino ed escano dallo stage. Se impostate il menu su Visibile, gli elementi che si spostano oltre il bordo dello stage rimangono visibili fintanto che c’è spazio sulla pagina Web. L’opzione di scorrimento inserisce le barre di scorrimento a destra e nella parte inferiore dello stage, rendendo così possibile la visualizzazione degli elementi che si spostano all’esterno delle dimensioni specificate dello stage. L’opzione automatica aggiunge automaticamente le barre di scorrimento se è presente eventuale contenuto oltre il perimetro dello stage.
  • Utilizzate la casella di controllo Esecuzione automatica per indicare all’animazione di partire automaticamente quando la rispettiva pagina Web viene caricata in un browser. Se la casella è disattivata, è necessario utilizzare un trigger JavaScript per eseguire l’animazione.
  • L’ID composizione viene utilizzato per identificare questo particolare stage e la relativa linea temporale associata. Ciò risulta utile quando si dispone di più composizioni Animate in un’unica pagina Web. Questo argomento verrà approfondito nei capitoli di JavaScript.
  • Le proprietà Stage di versione precedente e Poster creano elementi alternativi per i browser Web che non sono compatibili con HTML5.
  • Il Precaricatore è responsabile del caricamento di tutte le risorse necessarie per visualizzare la composizione in una pagina Web. Tali risorse comprendono le librerie e i grafici di JavaScript.

Creazione di immagini artistiche in Animate

La sezione successiva descrive dettagliatamente le proprietà del rettangolo. Tuttavia, molte di queste proprietà sono utilizzate da altri oggetti, ad esempio i blocchi di testo e la grafica importati in Animate. Quindi, mentre state scoprendo tutto ciò che occorre sapere su rotazione, inclinazione e modifica in scala dei rettangoli, tenete presente che potete ruotare, inclinare e ridimensionare anche il testo e le foto.

Rettangoli: costruzione della casella di base

Con lo strumento Rettangolo (M), potete aggiungere i blocchi di colore allo stage. Questi blocchi sono la soluzione ideale se desiderate distinguere le parti della pagina Web. Ad esempio, forse desiderate creare una barra laterale. Aggiungete un rettangolo, quindi potrete inserire il testo o la grafica sopra al rettangolo, impostandolo fuori dal resto della pagina. Sicuramente sapete già come creare un rettangolo. Fate clic sullo strumento Rettangolo sulla Palette strumenti, quindi fate clic e trascinate sullo stage per delinearne la forma. Per creare un quadrato, tenete premuto il tasto Maiusc mentre trascinate. Il nuovo elemento viene visualizzato sullo stage e viene selezionato automaticamente, perciò vedete otto quadrati bianchi intorno al bordo che rappresentano le maniglie (Figura 21). È possibile continuare a modificare le dimensioni e la forma del rettangolo dopo che è stato disegnato trascinando le maniglie. Di seguito sono elencate le proprietà di base che descrivono i rettangoli:

  • ID. Non appena si disegna un rettangolo sullo stage, questo viene inserito nell’elenco del pannello Elementi. Quando viene selezionato il rettangolo, le sue proprietà vengono visualizzate nel pannello Proprietà. Come con tutti gli elementi di Animate, probabilmente vorrete dare al vostro rettangolo un ID significativo, ad esempio LeftSidebar o Intestazione. Altrimenti, cercherete in Rettangolo1, Rettangolo2 e Rettangolo3 tentando di trovare quello desiderato. Per rinominare il rettangolo, selezionatelo e modificate l’ID nella parte superiore del pannello Proprietà. In alternativa, potete fare doppio clic sul nome nel pannello Elementi.
  • Tag. Individuate Rettangolo nel pannello Elementi e controllate il <div> dopo il nome. Al rettangolo viene assegnato automaticamente un tag <div> HTML. Animate utilizza questi tag per identificare, posizionare e trasformare gli elementi. Con altri Elementi, Edge Animate consente di scegliere tag diversi. Ad esempio, quando si aggiunge una foto all’animazione, vi sono buoni motivi per utilizzare un tag <img> invece di <div>.
  • Posizione. Sotto al nome nel pannello Proprietà, è possibile visualizzare le proprietà Posizione e Dimensioni. L’angolo superiore sinistro dello stage è indicato come X = 0, Y = 0. Spostandosi da sinistra a destra, aumenta il valore X. Spostandosi dall’alto al basso, aumenta il valore Y. Inizialmente, la posizione del rettangolo è indicata dall’angolo in alto a sinistra. È possibile modificare il punto di riferimento, se si utilizza lo strumento "Relativo a". Somiglia a una casella con un quadrato in ogni angolo. Si supponga di dover posizionare un elemento a una determinata distanza dall’angolo in basso a destra dello stage: è possibile utilizzare l’angolo in basso a destra dell’elemento come punto di riferimento. In tal caso, fate clic sul quadrato nella parte inferiore destra nella casella "Relativo a".
  • Dimensioni. Accanto alle proprietà Posizione vi sono le proprietà Dimensioni: L (larghezza) e A (altezza). Queste si modificano automaticamente quando si trascinano le maniglie di un rettangolo. È inoltre possibile digitare o trascinare un numero specifico. Per i rettangoli, inizialmente le proprietà Dimensioni utilizzano i pixel come unità di misura. Tuttavia, potete cambiare passando dai pixel alla percentuale. Quindi, un rettangolo con una larghezza del 20% sarebbe il 20% della larghezza dello stage. Utilizzate il collegamento accanto alle proprietà L e A per bloccare e sbloccare le proporzioni per il rettangolo. Quando il collegamento della Scala è continuo, modificando una dimensione si cambia automaticamente anche l’altra, in modo che il rettangolo resta proporzionato. Quando il collegamento è discontinuo, è possibile modificare L e A indipendentemente.
  • Visualizzazione. Alcuni elementi sono sempre sullo stage, mentre altri vanno e vengono. Il menu Visualizza consente di nascondere facilmente un elemento fino a quando lo stesso non è necessario. Le tre opzioni disponibili includono: Sempre attivato, Attivato, e Disattivato.
  • Riversamento. Il comando Riversamento per il rettangolo funziona come quello per lo stage, a meno che non si applichi in modo esplicito al rettangolo.
  • Opacità. Utilizzate il cursore vicino alla parte superiore del pannello Proprietà per controllare l’Opacità dell’intero rettangolo. Per regolare l’opacità del bordo o dello sfondo indipendentemente, fate clic sui campioni colore (come descritto in Colore) e modificate la A (proprietà alpha).
  • Colore. I rettangoli hanno due parti basilari: il colore del bordo e il colore di sfondo. Il colore del bordo contrassegna il bordo esterno del rettangolo, mentre il colore di sfondo è il colore all’interno della casella. (Altri programmi talvolta fanno riferimento a queste proprietà denominandole tratto e riempimento). Potete assegnare colori diversi al bordo e allo sfondo, oppure potete renderli trasparenti impostando il canale Alfa su zero. Vi sono due proprietà supplementari per il tratto. Potete impostare la dimensione in pixel (px) e potete scegliere tra un tratto uniforme, una linea tratteggiata, una linea punteggiata o niente, cioè nessun tratto. La barra degli strumenti nella parte superiore dell’area di lavoro offre un’altra soluzione per modificare rapidamente lo sfondo e il colore del bordo di un elemento selezionato. Funziona proprio come il selettore colore nel pannello delle proprietà.

Allineamento, distribuzione e disposizione degli elementi

La massima secondo la quale "ogni cosa ha il suo posto" è senz’altro vera quando si tratta di animazione. Con più di un elemento sullo stage, la relazione dell’uno con l’altro è determinante. I progettisti hanno spesso una griglia specifica quando creano le pagine stampate o le pagine Web. È preferibile che le caselle di testo o i grafici vengano allineati con questa griglia invisibile. Quando si allineano vari elementi, in genere si presentano meglio se sono distanziati equamente tra loro. Potreste trascorrere un mucchio di tempo guardando bene lo stage per verificare che sia tutto a posto, ma per fortuna, non è necessario.

Per sperimentare con gli strumenti Disponi, Allinea e Distribuisci di Animate, potete creare tre o quattro oggetti semplici con gli strumenti Rettangolo e Rettangolo arrotondato come quelli illustrati nella Figura 22. Mentre trascinate gli elementi attorno allo stage, noterete alcune linee color magenta che provengono dai bordi e dai punti centrali. Si tratta delle Guide sensibili che consentono di allineare rapidamente uno o più oggetti mentre siete in movimento. In molti casi, possono rappresentare tutto l’aiuto di cui avete bisogno.

Per esigenze di allineamento più convenzionali, passate al menu ModificaAllinea. Perché l’allineamento funzioni, è necessario selezionare almeno due elementi. Uno di questi elementi può essere lo stage. Potete selezionare gli elementi sullo stage oppure utilizzare il pannello Elementi. Per utilizzare questi comandi, selezionate tutti gli elementi che desiderate allineare, quindi scegliete una delle seguenti opzioni:

  • ElaboraAllineaA sinistra
  • ElaboraAllineaCentrato orizzontale
  • ElaboraAllineaA destra
  • ElaboraAllineaIn alto
  • ElaboraAllineaCentrato verticale
  • ElaboraAllineaIn basso I comandi ElaboraDistribuisci consentono l’inserimento di uguali distanze fra tre o più elementi sullo stage. Potete scegliere la parte degli elementi utilizzata dal comando Distribuisci per il processo e se l’azione si svolge lungo l’asse orizzontale o verticale. I comandi specifici sono:
  • ElaboraDistribuisciA sinistra
  • ElaboraDistribuisciCentrato orizzontale ElaboraDistribuisciA destra
  • ElaboraDistribuisciIn alto
  • ElaboraDistribuisciCentrato verticale
  • ElaboraDistribuisciIn basso

Righelli e guide manuali

Lo stage include i righelli che consentono di posizionare con precisione gli elementi. Potete mostrare e nascondere i righelli utilizzando il menu Visualizza (VisualizzaRighelli) o il tasto di scelta rapida: Ctrl+R (Comando-R). I righelli si estendono oltre i bordi dello stage, ma sono presenti marcatori che indicano la dimensione dello stage attuale. Come supporto per i lavori di allineamento, create delle guide facendo clic sul righello verticale o orizzontale e trascinando verso lo stage. La guida segue e rimane in posizione quando si rilascia il pulsante del mouse. Se il punto non è perfetto, potete trascinare la guida in una nuova posizione. Se la guida non è più necessaria, potete rimuoverla, trascinandola fino al righello. Per evitare di selezionare e spostare inavvertitamente una guida, utilizzate il comando VisualizzaBlocca guide.

In questo modo, vengono bloccate in posizione finché non utilizzate VisualizzaSblocca guide per sbloccarle nuovamente. Come supporto rapido per i lavori di allineamento, attivate Aggancia alle guide (VisualizzaAggancia alle guide).

Potete trascinare più guide sullo stage per diverse funzioni di allineamento, nonché mostrare e nascondere tutte le guide contemporaneamente, utilizzando il comando VisualizzaGuide (Ctrl+ o Comando-).

Organizzazione degli elementi: ordine z

Oltre alla posizione orizzontale e verticale, esiste un altro modo per disporre gli oggetti sullo stage. Quando si creano degli elementi, potete notare che i nuovi elementi sembrano situati davanti agli elementi meno recenti e, se trascinate un nuovo elemento nella stessa posizione X/Y sullo stage, uno meno recente viene nascosto. Se avete dimestichezza con Photoshop, potreste pensare a questo posizionamento come “livelli”. I fanatici del computer lo definiscono spesso come livello Z o ordine Z, poiché questa terza dimensione è nota come asse Z.

Potete esaminare l’ordine Z degli elementi sullo stage semplicemente visualizzando il pannello Elementi. Gli elementi riportati per primi nell’elenco sono più vicini alla parte anteriore. Se desiderate modificarne l’ordine, è sufficiente trascinare un elemento in una nuova posizione del pannello. Animate offre anche comandi di menu e tasti di scelta rapida per ridisporre gli elementi:

  • ElaboraDisponiPorta in primo piano (Ctrl+Maiusc+] o Maiusc-Comando-])
  • ElaboraDisponiPorta avanti (Ctrl+] o Comando -])
  • ElaboraDisponiPorta dietro (Ctrl+[ o Comando -[)
  • ElaboraDisponiPorta sullo sfondo (Ctrl+Maiusc+[ o Maiusc- Comando -[)

Animazioni rettangolari

È ora di passare all’azione. Conclusa la teoria, non resta che iniziare con l’animazione. In questo esercizio, potete creare quattro rettangoli. Potete assegnare a ciascuno di essi un nome, nonché applicare colori e inclinazioni.

Potete quindi posizionarli sullo stage e farli muovere, nonché modificarne la forma, quindi aggiungere l’effetto dissolvenza. È il tipo di effetto che potrebbe far parte di un banner pubblicitario o dell’introduzione a un’animazione più complessa.

Questo esercizio è diviso in due parti. Nella prima serie di passaggi, dovete creare e posizionare le barre dei colori:

  1. Aprite e salvate un nuovo progetto Animate con il nome Barre dei colori. Non dimenticate di creare una nuova cartella per il progetto.

  2. Impostate il colore dello stage su bianco e le dimensioni di larghezza e altezza rispettivamente su 550 e 400 px. Animate ricorda le ultime impostazioni dello stage utilizzate. Se avete seguito esercizi precedenti o esperimenti personali, potreste dover apportare queste modifiche.

  3. Nella linea temporale (Figura 23), verificate che siano premuti i pulsanti Modalità fotogramma chiave automatico e Modalità automatica transizione. Spostando il cursore sui pulsanti, potete visualizzarne i nomi nelle descrizioni comandi. Ad esempio, nella parte superiore della linea temporale viene visualizzato: Modalità fotogramma chiave automatico, Modalità transizione automatica, Alterna blocco e Andamento.

  4. Disegnate un rettangolo e in ProprietàID, digitate Red (Rosso). La casella ID viene visualizzata nella parte superiore del pannello Proprietà quando il rettangolo è selezionato.

  5. In Proprietà, fate clic sul colore di sfondo e impostatelo su rosso puro, quindi impostate su nessuno. Al termine, il numero del valore esadecimale del colore deve essere #ff0000.

  6. Impostate la dimensione della larghezza e dell’altezza del rettangolo rispettivamente su 550 e 100 px. Il modo più semplice per eseguire tale operazione consiste nell’immettere le dimensioni nel pannello Proprietà, tuttavia, se siete molto precisi con il mouse, potete trascinare le maniglie del rettangolo. Potreste dover fare clic sul pulsante di “collegamento” accanto a L e A per modificare la larghezza a e l’altezza separatamente.

  7. Impostate l’inclinazione (x) su 50° (gradi). L’inclinazione orizzontale è l’impostazione più in alto. Un valore positivo fa scorrere il bordo superiore a sinistra e il bordo inferiore a destra.

  8. Posizionate il rettangolo inclinato rosso nell’angolo superiore sinistro dello stage in modo che sia visibile solo la punta. Le proprietà della posizione devono essere X = -550 px, Y = 0 px. In genere, nell’angolo superiore sinistro dello stage viene visualizzato solo un triangolo rosso.

  9. Con il rettangolo rosso selezionato, premete Ctrl+D (Comando-D). Modificate l’ID di RedCopy su Verde. Quindi, modificate il colore affinché corrisponda. Il valore esadecimale del verde uniforme è #00ff00. Potete modificare il colore di sfondo di un elemento selezionato nel sottopannello ProprietàColore oppure utilizzare dei campioni di colore nella barra degli strumenti sopra lo stage.

  10. Allineate il bordo superiore del rettangolo verde con il bordo inferiore del rettangolo rosso (Y = 100 px). Quindi, tenete premuto il tasto Maiusc e scorrete il verde verso destra finché non viene visualizzata solo la punta (X = 430 px).

    Tenendo premuto il tasto Maiusc mentre spostate un elemento potete bloccare quest’ultimo sull’asse orizzontale o verticale durante il trascinamento. Potete ancora trascinarlo fuori dall’asse, ma è un po’ “pesante”.

  11. Create due rettangoli più inclinati, assegnate loro un nome e colorateli in blu e giallo. Posizionate i rettangoli ai lati alternati dello stage. Il colore blu è #0000ff e il colore è giallo #ffff00. Al termine del posizionamento dei rettangoli, l’aspetto dello stage deve essere simile alla Figura 23.

Creazione di animazioni con l’aggiunta di fotogrammi chiave delle proprietà

Una volta create e posizionate correttamente le barre dei colori, è necessario farle muovere. Nel capitolo 1 è stato dimostrato come la posizione degli elementi sullo stage sia controllata dai fotogrammi chiave di proprietà nella linea temporale. Quando viene premuto il pulsante Modalità fotogramma chiave automatico, come illustrato nella Figura 23, vengono creati nuovi fotogrammi chiave di proprietà ogni volta che si imposta o si modifica una proprietà. Potete anche creare manualmente i fotogrammi chiave di proprietà facendo clic sui pulsanti a forma di rombo nel pannello Proprietà. Potete bloccare le proprietà Posizione, Dimensione e Opacità all’inizio dell’animazione creando fotogrammi chiave di proprietà. Quindi la linea temporale si sposterà verso il basso e verranno creati diversi fotogrammi chiave di proprietà. Il risultato sarà una magia di animazione.

  1. Accertatevi che l’indicatore di riproduzione della linea temporale sia a 0:00. Selezionate il parallelogramma denominato Red (Rosso); quindi, nel pannello Proprietà, fate clic sui pulsanti a forma di rombo accanto a X, Y, L, A e Opacità.

    Le proprietà X e Y si trovano nel sottopannello Posizione e Dimensione. Controllano la posizione. I pulsanti L e A creano fotogrammi chiave per la larghezza e l’altezza. Il cursore Opacità è vicino alla parte superiore del pannello Proprietà. I pulsanti a forma di rombo aggiungono fotogrammi chiave di proprietà e singoli livelli di proprietà nella linea temporale come illustrato nella Figura 24. I fotogrammi chiave di proprietà ancorano un valore di proprietà specifico in un punto temporale specifico. Nella linea temporale, saranno visibili i fotogrammi chiave di proprietà e i livelli di proprietà di:

    • A sinistra
    • Margine superiore
    • Larghezza
    • Altezza
    • Opacità

    Se tutti questi fotogrammi chiave e queste linee temporali di proprietà non vengono visualizzate in Rosso, dovete crearle manualmente, facendo clic sul pulsante a forma di rombo accanto alla proprietà mancante.

  2. Ripetete il passaggio 1 per le barre dei colori verde, blue e giallo per creare fotogrammi chiave di proprietà e livelli di proprietà per ciascuno di essi. Per velocizzare le operazioni, potete selezionare prima tutte e tre le barre, quindi fare clic sui pulsanti relativi ai fotogrammi chiave.

  3. Verificate che la Modalità fotogramma chiave automatico e la Modalità transizione automatica siano state attivate (con la pressione dei relativi pulsanti) e gli altri pulsanti non lo siano. Quando l’opzione Fotogramma chiave automatico è attivata, Animate crea automaticamente i fotogrammi chiave di proprietà alla modifica degli elementi sullo stage. È un processo che può essere completato in due passaggi. Spostate l’indicatore di riproduzione su un punto temporale, quindi modificate le proprietà dell’elemento. Potete apportare modifiche nel pannello Proprietà o sullo stage con gli strumenti Selezione e Trasforma.

  4. Nella linea temporale, trascinate l’indicatore di riproduzione nella posizione 0:02. Per questo passaggio, il blocco deve essere disattivato (senza la pressione del relativo pulsante).

  5. Trascinate ogni rettangolo sullo stage fino a quando l’estremità del rettangolo inclinato non è visibile.

    A questo punto, la maggior parte dello stage è coperta dalle barre dei colori, con i triangoli bianchi dello stage visibili ai bordi. Ricordatevi di tenere premuto il tasto Maiusc durante il trascinamento per mantenere stabile la posizione verticale delle barre.

  6. Con tutti i rettangoli selezionati, in Proprietà fate clic sul pulsante Aggiungi fotogramma chiave per opacità. Trascinate avanti e indietro l’indicatore di riproduzione per visualizzare l’anteprima dell’animazione. L’opacità di ogni barra dei colori è impostata su 100 percento al secondo punto 2. Con lo scorrimento, l’indicatore di riproduzione consente di esaminare l’azione.

  7. Trascinate l’indicatore di riproduzione in corrispondenza del marcatore 0:03. La posizione indica il punto 3 secondi nell’animazione.

  8. Selezionate ciascun rettangolo, quindi modificate l’altezza (proprietà A) su 300 px, e l’opacità sul 50 percento. L’effetto è che i rettangoli vengono ingranditi, divisi in sezioni verticali e, allo stesso tempo, iniziano a sfocare. Vedete la Figura 25. Tenete presente che potrebbe essere necessario eliminare il collegamento delle proprietà L e A per modificarle separatamente.

  9. Trascinate l’indicatore di riproduzione in corrispondenza del marcatore 0:04. Quindi modificate l’altezza di ciascun rettangolo su 500 px, e l’opacità sullo 0 percento. L’effetto è che i rettangoli continuano a essere ingranditi e sfocano fino a scomparire.

Rettangoli arrotondati: l’apparenza inganna

OK, Animate consente di giocare con piccoli trucchi attraverso gli strumenti Rettangolo, Rettangolo arrotondato ed Ellisse. Il segreto è che è possibile creare tutte queste forme utilizzando lo strumento Rettangolo e modificando le proprietà. Questi piccoli trucchi sono possibili perché tali forme sono definite dal codice Javascript. È possibile controllare queste impostazioni creando una forma con ogni strumento ed esaminando le proprietà. Potete trasformare un rettangolo in un rettangolo arrotondato semplicemente regolando le proprietà AngoliRaggio, come illustrato nella Figura 26. Allo stesso modo, potete squadrare un rettangolo arrotondato utilizzando gli stessi strumenti. Di seguito sono riportati i dettagli relativi a queste operazioni.

In un nuovo progetto Animate, create un rettangolo e lasciatelo selezionato. Scegliete lo strumento Trasforma (Q), quindi posizionate il mouse sul rombo del fotogramma chiave nelle proprietà del rettangolo arrotondato: la descrizione comando indica che “viene aggiunto un fotogramma chiave per raggio bordo”. I tre pulsanti nella parte superiore del pannello sono 1, 4 e 8. Di seguito, viene visualizzato un quadrato composto da pulsanti in cui potete selezionare singolarmente i quattro angoli di un rettangolo. È presente un numero accanto ai pulsanti degli angoli impostato inizialmente su 0. Un raggio dell’angolo pari a zero significa che il rettangolo ha angoli ben delineati. Fate clic sul numero e trascinate verso destra per arrotondare gli angoli. La casella del numero accetta solo numeri positivi, pertanto non potete trascinare verso sinistra. Notare che durante il trascinamento, i rombi neri sugli angoli del rettangolo si spostano al centro. Questi rombi sono i punti di controllo dei raggi degli angoli. Potete trascinare manualmente i rombi in ogni rettangolo per creare e regolare gli angoli arrotondati.

Reimpostate il rettangolo in modo che sia quadrato, quindi fate clic sull’angolo superiore destro nel pannello Proprietà. Modificate l’impostazione del raggio e questa volta si noterà che l’angolo superiore destro rimane quadrato mentre gli altri assumono lo stile con angoli arrotondati. Quando un pulsante dell’angolo viene premuto, l’angolo viene deselezionato dalle impostazioni di arrotondamento.

Reimpostate il rettangolo ancora una volta e fate clic sull’angolo superiore destro, in modo che scompaia di nuovo. Quindi fate clic sul pulsante 4 nella parte superiore delle proprietà degli angoli. Quattro nuove caselle di numeri vengono visualizzate accanto a ogni angolo. Ora potete definire ciascun angolo separatamente con diversi valori di raggio. In questo modo, potete creare forme irregolari anche se, tecnicamente, con quattro angoli. Combinate questa funzione con proprietà di inclinazione e dimensionamento per creare effetti di ameba interessanti. Fate clic sul pulsante 8; ogni angolo dispone di due numeri di controllo. In questo modo, potete decentrare il punto di controllo, creando un angolo più piano in un lato rispetto all’altro. Notate che quando regolate le impostazioni, il punto di controllo del rombo nero si sposta a sua volta. Potete regolare sempre gli angoli mediante le caselle di numeri o i punti di controllo del rettangolo.

Un cerchio è un rettangolo con angoli molto arrotondati

Potete sperimentare le proprietà AngoliRaggio trasformando i rettangoli in ovali o cerchi. Ad esempio, di seguito sono riportati i passaggi per trasformare un quadrato in un cerchio:

 

  1. Fate clic sullo strumento Rettangolo e, tenendo premuto il tasto Maiusc, trascinate una casella. Se tenete premuto il tasto Maiusc il rettangolo viene vincolato affinché tutti i lati siano uguali.

  2. Nelle proprietà Angoli, fate clic sul pulsante 1. Con questa impostazione, tutti gli angoli condividono lo stesso valore del raggio dell’angolo.

  3. Fate clic e trascinate la casella del numero del raggio del bordo finché il quadrato non diventa un cerchio, come illustrato nella Figura 27.

    È possibile trascinare il numero in modo che i raggi degli angoli si incrocino al centro, ma ciò non è necessario per creare un cerchio. Potete modificare e regolare le proprietà del cerchio come per qualsiasi altro oggetto creato in Animate. Inclinando un oggetto, potete creare aree ellittiche. Ridimensionandolo, potete creare degli ovali. Infine, con le impostazioni corrette, potete creare qualsiasi oggetto di forma tra un quadrato e un’ellisse.

Aggiunta di ombre esterne alla grafica

Le ombre esterne non solo appaiono di grande effetto, ma consentono di separare visivamente gli elementi differenti. Applicate un’ombra esterna a un elemento grafico e fatelo apparire come mobile sopra lo stage. Aggiungete un’ombra all’interno di un elemento e conferitegli un aspetto più tridimensionale. Le ombre vengono spesso utilizzate con i pulsanti per creare un aspetto diverso per gli stati Sopra, Cliccato e Selezionato. Animate offre un modo semplice per creare ombre esterne e modificarle in base alle vostre esigenze e al vostro gusto.

Per un’ombra leggera che separa un elemento dallo sfondo, provate le seguenti operazioni:

  1. Disegnate tre elementi sullo stage.

  2. Selezionatene uno, quindi, nel pannello Proprietà, scorrete verso il basso fino ai comandi Ombra esterna illustrati nella figura 28.

  3. Fate clic sul campione di colore e scegliete Nero.

  4. Fate clic sull’offset orizzontale e digitate 4.

  5. Fate clic sull’offset verticale e digitate 4.

  6. Fate clic sul raggio di sfocatura e digitate 14.

  7. Fate clic sull’estensione e digitate 2.

    Se desiderate che uno degli elementi sembri tridimensionale, potete utilizzare le stesse impostazioni ma dovete fare clic sul pulsante Inserto. Invece di comparire all’esterno dell’elemento, l’ombra viene creata all’interno dell’elemento. Come dice il nome, la proprietà Estensione controlla le dimensioni dell’ombra, estendendola in tutte le direzioni. Come con qualsiasi altra proprietà, potete far cambiare l’ombra esterna nel tempo. Con un po’ di creatività, potete creare l’impressione che la posizione del sole nel cielo vari con ombre che si muovono e cambiano forma. Le ombre sono uno strumento importante anche per il testo. Il testo su uno sfondo molto pieno è più leggibile se è separato da un’ombra.

Importazione di grafica

È abbastanza semplice creare forme e testo di base in Animate. Tuttavia, quando si tratta di grafica complessa, avrete probabilmente bisogno dei vostri strumenti per la creazione di grafica preferiti. Per disegni elaborati e grafica al tratto, Adobe Illustrator può essere lo strumento adatto. Per le foto, potete usare Photoshop, Lightroom o iPhoto. Adobe Fireworks può essere lo strumento ideale per Animate poiché entrambi gli strumenti sono stati progettati per la creazione di contenuti Web. A prescindere da come create i file JPEG, GIF, PNG o SVG, potete importarli in Animate e animarli modificandone la posizione sullo stage e l’aspetto.

La procedura per importare la grafica è la stessa indipendentemente dal formato del file. Selezionate File➝Importa e individuate il file da portare del vostro progetto. La cartella CD mancante 02-2_Sliding_Show ha tre foto in formato JPEG. Potete esercitarvi creando un nuovo progetto completo con una nuova cartella denominata 02-2_Sliding_Show e importando tutte le foto. Una volta selezionato FileImporta, si apre una finestra di file/cartelle standard per il vostro PC o Mac. Se desiderate importare tutti e tre i file contemporaneamente, fate clic tenendo premuto il tasto Maiusc per selezionarli. Normalmente, Animate consente di importare i file e, per risparmiare tempo, i nomi assegnati sono basati sui nomi dei file. Ciò significa che troverete nomi come “scoiattolo”, “fattoria” e “bicicletta” nel vostro pannello Elementi. Ciascuna immagine viene inoltre posizionata automaticamente nella posizione 0,0 sullo stage. Tuttavia, verrà visualizzata solo una delle immagini poiché le immagini si coprono a vicenda.

Scelta tra GIF, JPG, PNG e SVG

Il mondo della grafica computerizzata 2D offre due sistemi per la memorizzazione e la visualizzazione delle immagini: bitmap (denominata “grafica raster” in gergo tecnico) e grafica vettoriale.

I programmi memorizzano le bitmap come una serie di pixel, identificati dal colore e dalla posizione. Il termine “grafica bitmap” non si riferisce solo ai file con l’estensione Windows bitmap (.bmp), ma a tutte le immagini memorizzate in formato bitmap, tra cui .gif, .jpg, .tiff e .png.

La cosa positiva della grafica bitmap è che consente di creare dettagli super-realistici con colori complessi, gradienti e ombreggiature leggere. Il lato negativo è che le bitmap non compresse occupano generalmente un’enorme quantità di spazio su disco e non sono particolarmente scalabili. Ad esempio, supponete di avere un’immagine bitmap di un’auto e di dire a un programma di aumentare le dimensioni del 500%.

Il programma deve creare nuovi pixel per un’immagine più grande, pertanto duplica i pixel (punti colorati) già presenti nell’immagine. I risultati non sono sempre belli. È probabile che l’intera immagine appaia sfocata. I bordi curvi potrebbero diventare sgranati o pixelati.

I computer memorizzano la grafica vettoriale come una serie di formule. Rispetto alla grafica raster, la grafica vettoriale ha dimensioni relativamente ridotte ed è scalabile. In altre parole, se disegnate un’auto minuscola e decidete di modificarne le dimensioni del 500%, il disegno ridimensionato avrà dettagli nitidi e gradevoli.

I punti di forza e di debolezza di ciascun formato sono importanti quando lavorate con le immagini. Le bitmap sono migliori per le immagini fotorealistiche con molti colori e tonalità. Le immagini vettoriali sono migliori per la grafica al tratto, i grafici, i diagrammi e le immagini da ridimensionare. Animate può importare quattro tipi di file di grafica: JPG, GIF, PNG e SVG. Tuttavia, ci sono un paio di cose che potrebbero sorprendervi.

I file JPG, noti anche come JPEG, sono il familiare formato bitmap utilizzato sul Web e in molte fotocamere. Il formato è stato sviluppato dal Joint Photographic Experts Group, da cui deriva l’acronimo. I file JPEG usano la cosiddetta tecnica di compressione con perdita di dati per creare file di dimensioni inferiori. Gli editor di immagini che funzionano con i file JPEG di solito permettono di scegliere il livello di compressione. Se l’immagine verrà visualizzata solo su schermo, potete alzare il livello di compressione. Se la destinazione è una stampante per foto e desiderate le dimensioni di un poster, avrete bisogno di tutti i pixel.

I file GIF sono stati sviluppati da CompuServe, uno dei primi servizi online. L’acronimo viene da Graphic Interchange Format. I file GIF stanno diventando meno comuni dei file JPEG e PNG, ma continueranno a essere disponibili su molti siti Web. I file GIF sono bitmap memorizzate con una tecnica di compressione senza perdita di dati, ma usano una tavolozza di colori limitata. Di conseguenza, un’immagine con grandi strisce a tinta unita, come un logo aziendale o un grafico a barre, potrebbe produrre un file più piccolo. D’altra parte, un’immagine fotografica in formato GIF non può essere compressa così bene e potrebbe non essere così bella come, ad esempio, un’immagine in formato JPEG a causa del limitato numero di colori. Le immagini GIF offrono un paio di bei trucchi. Potete creare immagini GIF animate utilizzando una semplice animazione realizzata fotogramma per fotogramma. Programmi come Adobe Fireworks e

Flash rendono il processo piuttosto semplice. Inoltre, i file GIF consentono di specificare le parti dell’immagine da rendere trasparenti. Questo è molto utile quando si posiziona una forma irregolare, come un personaggio animato, su uno sfondo già sviluppato, come l’interno di una stanza.

I file PNG sono stati sviluppati in un periodo caratterizzato da problemi di brevetto riguardanti il formato GIF. Pronunciata “ping”, questa abbreviazione significa Portable Network Graphics. Il formato PNG è stato progettato per essere utilizzato sul Web (al contrario della grafica di stampa) e per migliorare le funzionalità già comuni dei file GIF. I file PNG usano una tecnica di compressione senza perdita di dati, offrono una tavolozza di colori più grande, sono in grado di visualizzare sequenze animate e possono includere trasparenze all’interno dell’immagine. I file PNG sono supportati dai browser Web moderni, ma probabilmente ci sono ancora alcuni browser meno recenti che non supportano il formato. Il formato PNG è ideale con Animate, in parte perché entrambi sono stati sviluppati per il Web. I file SVG sono basati su dati vettoriali. Il nome significa Scalable Vector Graphics. Invece di registrare la mappa di un’immagine un pixel alla volta, i file SVG contengono formule che descrivono le linee, le curve, le forme e altri dettagli di un’immagine. Tutti i browser Web moderni supportano il formato SVG, ma i browser meno recenti non supportano il formato SVG in modo coerente.

Se ridimensionate un’immagine SVG quando lavorate in Animate, è probabile che l’immagine inizierà a diventare pixelata, cioè ad avere quell’aspetto scalettato tipico delle immagini ingrandite. Quando l’immagine modificata viene visualizzata in un browser, l’effetto pixel diventa evidente. È interessante notare che se non si modifica l’immagine all’interno di Animate, essa si ridimensiona in una finestra del browser quando si ingrandisce o si riduce.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online