Undolog.com » Flash CS4

Adobe Flash CS4: creare un Ajax Loader o Activity Indicator

Giovambattista Fazioli — Wed, 04 Nov 2009 14:19:44 +0000

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

Tags: Actionscript 3.0, Activity Indicator, Adobe Flash CS4, Ajax Loader, Flash, Flash CS3, Flash CS4, PNG, Sviluppo, Tutorials, Tutorials

Post correlati

Come usare Google Maps in Adobe Flash CS4

Giovambattista Fazioli — Fri, 28 Aug 2009 22:34:40 +0000

In Adobe Flash è possibile utilizzare un vasto assortimento di Web API esterne fornite da servizi come Facebook, Twitter o Flickr. In questo tutorial vedremo come integrare, in modo davvero semplice, i servizi di Google Maps in un filmato/applicazione Adobe Flash CS4. Premetto che il procedimento per poter utilizzare Google Maps in Flash è molto simile a quello che accade in HTML/Javascript (vedi per dettagli Come inserire Google Map nel proprio Web).

Download ed installazione delle SDK

Per prima cosa memorizziamo nei bookmark del nostro browser l'indirizzo del sito Google Maps API per Flash. Su questo sito troviamo tutto ciò che ci server per utilizzare le API di Google. Sulla destra della pagina è possibile accedere ad una serie di risorse, tra cui il link per scaricare le SDK da usare in Flash. Salvate lo ZIP sulla vostra scrivania (o Desktop) e scompattatelo. Nella cartella sdk/lib troverete un file chiamato map_1_16.swc. Copiate questo file nella clipboard (Command-C per Mac o Ctrl-C per PC) e posizionatelo all'interno di questo percorso:

PLAIN TEXT

CODE:

// Mac
[cartella utente]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components
 
// Windows
[cartella utente]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components

Se la cartella Components non esiste già, createla e in questa create una cartella Google e incollate il file map_1_16.swc. Se per caso avevate già aperto Flash (frettolosi...), chiudetelo e rapritelo, in modo che possa ricaricare il componente appena installato.

Creiamo il filmato Flash

A questo punto apriamo Flash e creiamo un nuovo filmato. Aprite la finestra Componenti e dovreste trovare Google Maps:

Selezionate il componente GoogleMapsLibrary e trascinatelo nello stage. Nel primo frame del nostro filmato inserite il seguente semplice codice:

PLAIN TEXT

Actionscript:

// Importo le classi Google Maps
import com.google.maps.*;
import com.google.maps.overlays.*;
import com.google.maps.controls.*;
 
var map:Map = new Map();
map.key     = "API_KEY"; // vedi sotto per ottenere una tua chiave
// In questo esempio imposto la dimensione della Mappa Google della
// stessa grandezza del filmato. In alternativa potete inserire le
// dimensioni che preferite.
map.setSize( new Point(stage.stageWidth, stage.stageHeight));
addChild(map);

Nella riga 7 dovete sostituire la stringa API_KEY con la chiave di attivazione che fornisce Google. Per ottenerla basta tornare sul sito Google Maps API for Flash e richiedere una API Key cliccando su Sign up for a Google Maps API Key. Quando vi verrà chiesto di inserire l'url del sito sul quale volete utilizzare il filmato Flash che accede alle API di Google, nel caso non lo sapete ancora o voletete semplicemente provare il filmato in locale, inserite http://localost e cliccate su Generate API Key:

A questo punto possiamo già provare il filmato, ottenendo:

Aggiungiamo qualche controllo

Per prima cosa aggiungiamo i classici controlli di Posizione, Zoom e Tipo Mappa. Per fare questo dobbiamo essere sicuri che la mappa sia pronta all'uso. Basta quindi creare un listener sull'evento MapEvent.MAP_READY. Aggiungiamo quindi le seguenti righe di codice:

PLAIN TEXT

Actionscript:

// Aggiungiamo i controlli
map.addEventListener( MapEvent.MAP_READY, onMapReady );
 
function onMapReady(e:MapEvent):void {
    map.addControl( new PositionControl() );
    map.addControl( new ZoomControl() );
    map.addControl( new MapTypeControl() );
}

Impostiamo un indirizzo

A questo punto possiamo impostare la mappa in modo che visualizzi un indirizzo specifico, come la sede della mia società Saidmade a Modena - o qualsiasi altro indirizzo che preferite.
Suggerimento: per trovare le coordinate del nostro indirizzo, ovvero Latitudine e Longitudine, possiamo usare questo semplice e utile hack. Aprire il sito di Google Maps. Una volta sulla mappa cercate l'indirizzo che desiderate (ad esempio Via Cortese 10, Modena). Quando l'indirizzo è visualizzato sulla mappa, inserite questa riga nella barra indirizzi del browser:

PLAIN TEXT

JavaScript:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Si aprirà una finestra pop-up con le coordinate utilizzabile nel codice:

Torniamo ad ActionScript e aggiungiamo le seguenti righe di codice nella funzione onMapReady():

PLAIN TEXT

Actionscript:

// centro la mappa su una specifica località
map.setCenter( new LatLng( 44.639828, 10.941795), 18, MapType.SATELLITE_MAP_TYPE );

Eseguiamo il filmato:

Aggiungiamo un Marker

Sempre all'interno della funzione onMapReady() aggiungiamo le seguenti righe di codice:

PLAIN TEXT

Actionscript:

// aggiungiamo il default marker
var m:Marker = new Marker( new LatLng( 44.639828, 10.941795) );
map.addOverlay(m);

I Marker possono essere personalizzati a piacimento, sia tramite gli stili fornite dalle API stesse di Google, sia tramite Flash. Ad esempio aggiungendo questa import all'inizio del codice:

PLAIN TEXT

Actionscript:

import com.google.maps.styles.*;

e sostituiendo il codice di creazione Marker visto prima con:

PLAIN TEXT

Actionscript:

// aggiungiamo il default marker
var m:Marker = new Marker(
  new LatLng(44.639828, 10.941795),
  new MarkerOptions({
     strokeStyle: new StrokeStyle({color: 0x987654}),
     fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
     radius: 12,
     hasShadow: true
}));
map.addOverlay(m);

otteniamo il seguento effetto:

In alternativa è possibile associare direttamente un MovieClip come Marker. Essendo un MovieClip, ovviamente, esso potrà contenere animazioni, video o qualsiasi altro tipo di contenuto interattivo supportato in Flash. Inoltre è possibile disegnare linee e forme così da creare delle mappe interattive e ricche di contenuti multimediali.
Per aggiungere un MovieClip e sufficiente crearlo, usando ad esempio un'immagine o un'animazione Flash, e impostare le sue proprietà in questo modo:

Fatto questo modificate il codice di creazione Marker in:

PLAIN TEXT

Actionscript:

// aggiungiamo il default marker
var m:Marker = new Marker( new LatLng(44.639828, 10.941795),
               new MarkerOptions( {icon: new myMarkerMovieClip() } ) );
map.addOverlay(m);

Tutte le informazioni sulle API, le classi, metodi, eventi e proprietà sono disponibili su Google Maps API ActionScript Reference.
Inoltre l'intero pacchetto è stato recentemente aggiornato con molte novità interessanti, come le Mappe 3D.

Tags: ActionScript, Actionscript 3.0, Adobe-Flash, api, Featured, Flash CS4, Flash CS4, Google Maps API, Google Maps API ActionScript Reference, Latitudine, Longitudine, Marker, Overlay, RIA, Tutorials