Creare un Ajax Loader (o Activity indicator per chi è ormai abituato ad usare l’Apple iPhone) per il Web non è una cosa difficile: esistono servizi che generano immagini gif animate di tutti i tipi. Tuttavia il formato GIF ha il grosso difetto di non supportare le trasparenze come si deve. La trasparenza, nel formato GIF attuale, coinvolge un solo piano di bit con la conseguenza che se non abbiamo un colore di sfondo uniforme, i bordi dell’immagine risultano notevolmente sgranati e frammentati.
L’animazione mostrata qui sotto è stata realizzata impostando come colore di trasparenza il bianco.

Quindi se lo sfondo è bianco (o un colore simile) non ci sono problemi. Al contrario, appena sostituiamo lo sfondo, ecco cosa accade:

In attesa, quindi, della diffusione del formato APNG (Animated PNG) – che supporterà un vero e proprio canale alpha per le trasparenze, importare GIF animati in contesti come Adobe Flash risulta “graficamente” una pessima scelta. Ecco allora come realizzare un’animazione in Adobe Flash del tutto simile a quelle presenti sul Web.

Costruiamo il nostro Ajax Loader in Adobe Flash: il “petalo”

Prima di tutto creiamo un MovieClip vuoto (o se preferite potete lavorare direttamente sullo stage) e disegnamo una linea verticale nera, il nostro petalo, alta 60/70 pixel per comodità, impostando uno spessore (tratto) di 10:

Selezioniamo la nostra linea e trasformiamola temporaneamente in un oggetto immagine (F8). Dal pannello Allinea, centriamola nello stage. Adesso duplichiamo (CTRL+D o CMD+D) la nostra linea, centriamo la linea duplicata e ruotiamola dal pannello Trasforma di 30 gradi:

Ripetiamo questa operazione (duplica, centra, ruota di 30 gradi) fino ad ottenere:

Selezioniamo tutta l’immagine, cioè la somma degli oggetti:

Dal menu Elabora selezionate Dividi (CTRL+B o CMD+B):

Poi, sempre dal menu Elabora, selezionate Forma > Converti linee in riempimenti. In questo modo abbiamo ottenuto una figura “unica”.

Adesso dobbiamo “bucare” il centro della nostra immagine. Per fare questo aumentate un po’ lo zoom (tipo 400). Create un nuovo livello e proteggiamo quello con il lavoro svolto fino adesso:

Su questo nuovo livello potremmo lavorare in tranquillità, senza danneggiare l’altra nostra immagine. Disegniamo, partendo dal centro (mantenete premuto il tasto ALT insieme al tasto maiuscole SHIFT) un cerchio rosso senza bordo:

Nella figura qui sopra ho impostato la trasparenza del cerchio per evidenziare la sua posizione rispetto alla nostra figura (che si trova sul livello sottostante). Notate che ho appositamente “tagliato” gli spigoli dove si congiungono i “petali” della nostra figura. Il cerchio, quindi, dev’essere della giusta grandezza, cosa che ci tornerà comoda più avanti. Fatto questo selezionate il cerchio, copiatelo (CTRL+C o CMD+C) ed eliminate pure l’ultimo livello creato, sbloccate il livello con la nostra figura, e incollate!

Cliccate adesso sul bianco dello stage in modo da deselezionare il cerchio rosso. Ora abbiamo “fuso” i nostri due oggetti. Selezionate nuovamente il cerchio rosso ed eliminatelo!

Ottimo! Adesso selezioniamo tutto il nostro oggetto e cambiamogli colore con un grigio chiaro:

Selezioniamo poi il primo petalo (ore 12) e impostiamolo a nero (voi ovvimente potete scegliere la gradazione di colori che preferite):

Impostiamo ora il secondo petalo (ore 13) ad un grigio scuro:

Proseguiamo per gli altri due petali (scegliete vuoi quanta gradazione applicare) fino ad ottenere:

L’animazione

Perfetto, ci siamo quasi, l’ultimo sforzo richiesto è creare la rotazione. Questa non deve riguardare i petali ma solo il colore. Per fare questo avremmo potuto procedere anche in altri modi (vedi ad esempio con luso delle maschere…), tuttavia questo mi sembra più semplice. Spostiamoci di qualche fotogramma avanti, tipo al 5 e inseriamo un Fotogramma chiave.

Da pannello Trasforma ruotiamo la nostra immagine di 30 gradi, gli stessi gradi utilizzati durante la creazione dei nostri “petali”. Ripetiamo questa operazione (inserimento Fotogramma chiave e rotazione di 30 gradi) mantenedo sempre costanti in numero di fotogrammi tra una chiave e un’altra, fino ad ottenere:

Finito! Il nostro Ajax Loader in Adobe Flash è terminato! Ecco qui sotto la versione GIF esportata da Flash.

Qui sotto il filmato Flash con uno sfondo in movimento (notate che non ci sono distorzioni o sgranature):

Il sorgente

Post correlati

• WordPress: usare gli shortcodes (5)
• WordPress: rimuovere i menu dell’amministrazione (12)
• WordPress: personalizzare la navigazione tra i post (5)
• WordPress: come scrivere un reply to comment usando jQuery (19)
• WordPress: come creare passo passo un proprio login (23)