Tutorials » Flash CS4 » Actionscript 3.0

Come usare Google Maps in Adobe Flash CS4

sabato 29 agosto, 2009

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:
  1. // Mac
  2. [cartella utente]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components
  3.  
  4. // Windows
  5. [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:

Google Maps Library

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

PLAIN TEXT
Actionscript:
  1. // Importo le classi Google Maps
  2. import com.google.maps.*;
  3. import com.google.maps.overlays.*;
  4. import com.google.maps.controls.*;
  5.  
  6. var map:Map = new Map();
  7. map.key     = "API_KEY"; // vedi sotto per ottenere una tua chiave
  8. // In questo esempio imposto la dimensione della Mappa Google della
  9. // stessa grandezza del filmato. In alternativa potete inserire le
  10. // dimensioni che preferite.
  11. map.setSize( new Point(stage.stageWidth, stage.stageHeight));
  12. 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:

Google API Key

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

Filmato Flash con Google Maps

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:
  1. // Aggiungiamo i controlli
  2. map.addEventListener( MapEvent.MAP_READY, onMapReady );
  3.  
  4. function onMapReady(e:MapEvent):void {
  5.     map.addControl( new PositionControl() );
  6.     map.addControl( new ZoomControl() );
  7.     map.addControl( new MapTypeControl() );
  8. }

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:
  1. javascript:void(prompt('',gApplication.getMap().getCenter()));

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

Latitudine e Longitudine

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

PLAIN TEXT
Actionscript:
  1. // centro la mappa su una specifica località
  2. map.setCenter( new LatLng( 44.639828, 10.941795), 18, MapType.SATELLITE_MAP_TYPE );

Eseguiamo il filmato:

La sede di Saidmade Srl

Aggiungiamo un Marker

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

PLAIN TEXT
Actionscript:
  1. // aggiungiamo il default marker
  2. var m:Marker = new Marker( new LatLng( 44.639828, 10.941795) );
  3. map.addOverlay(m);

Marker overlay

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:
  1. import com.google.maps.styles.*;

e sostituiendo il codice di creazione Marker visto prima con:

PLAIN TEXT
Actionscript:
  1. // aggiungiamo il default marker
  2. var m:Marker = new Marker(
  3.   new LatLng(44.639828, 10.941795),
  4.   new MarkerOptions({
  5.      strokeStyle: new StrokeStyle({color: 0x987654}),
  6.      fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
  7.      radius: 12,
  8.      hasShadow: true
  9. }));
  10. map.addOverlay(m);

otteniamo il seguento effetto:

Personalizzare il Marker

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:

Impostazione proprietà MovieClip usato come Marker

Fatto questo modificate il codice di creazione Marker in:

PLAIN TEXT
Actionscript:
  1. // aggiungiamo il default marker
  2. var m:Marker = new Marker( new LatLng(44.639828, 10.941795),
  3.                new MarkerOptions( {icon: new myMarkerMovieClip() } ) );
  4. map.addOverlay(m);

Un Marker davvero speciale

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.

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , , , , ,

16 commenti a: “Come usare Google Maps in Adobe Flash CS4”

  1. getAvatar 1.0
    29 ago, 2009 Undolog.com» Adobe Flash: rilasciato il Player 10 in beta e le API Google Maps:

    [...] Aggiornamento: vedi Come usare Google Maps in Adobe Flash CS4 [...]

  2. getAvatar 1.0
    30 set, 2009 Napolux:

    Ottimo tutorial, anche se preferisco usarle in Flex ;) :P

    Rispondi Quota
  3. getAvatar 1.0
    30 set, 2009 Giovambattista Fazioli:

    @Napolux: immaginavo :D :D - visto che carino il trick (javascript) per ottenere "al volo" Lat e Lang da Google Maps ?! ;)

    Rispondi Quota
  4. getAvatar 1.0
    13 ott, 2009 Diego:

    wonderful!!
    ...mah...per personalizzare la mappa ad esempio 600*600 a x 200 e y 250 in as3 come li devo gestire!?
    Sono alle prime righe con as3.
    Tnks for all!!

    Rispondi Quota
  5. getAvatar 1.0
    02 dic, 2009 Devis:

    è possibile memorizzare la key e le coordinate scrivendole su file xml esterno e quindi leggerle e poi inviarle nel punto map.key = "API_KEY";

    PLAIN TEXT
    Actionscript:
    1. map.setCenter( new LatLng( 44.639828, 10.941795), 18, MapType.SATELLITE_MAP_TYPE );

    potreste dirmi come fare ??
    Grazie.

    Rispondi Quota
  6. getAvatar 1.0
    02 dic, 2009 Giovambattista Fazioli:

    @Devis: se il file XML è presente su un server puoi sicuramente leggerlo, ma non scriverlo direttamente. Per sapere come vedi Flash CS3: comunicazione con un Web Server

    Rispondi Quota
  7. getAvatar 1.0
    13 dic, 2009 Massimo:

    Funziona solo con Flash CS4?
    Ho provato con il CS3 ma mi esce la scritta:

    PLAIN TEXT
    CODE:
    1. "Initialization failed: please check the API key,
    2. swf location, version and network availability."

    Rispondi Quota
  8. getAvatar 1.0
    13 dic, 2009 Giovambattista Fazioli:

    @Massimo:

    Funziona solo con Flash CS4?

    No, può essere utilizzato anche con Adobe Flash CS3. Vedi qui per dettagli

    Rispondi Quota
  9. getAvatar 1.0
    12 feb, 2010 nuovobuio:

    ciao, ti ringrazio per il tutorial è molto utile.
    Una cosa che non capisco, quando utilizzi un marker, com'è possibile fare in modo che appaia la nuvoletta bianca di google con le varie informazioni sull'inidirizzo sopra di esso, come accade normalmente cliccando sul marker in google maps?

    Rispondi Quota
  10. getAvatar 1.0
    12 feb, 2010 Giovambattista Fazioli:

    @nuovobuio: per farlo devi utilizzare il metodo: map.openInfoWindow(), ad esempio:

    PLAIN TEXT
    Actionscript:
    1. map.openInfoWindow(new LatLng( 44.639828, 10.941795), options);

    Dove è options usa, ad esempio:

    PLAIN TEXT
    Actionscript:
    1. // Specifying all InfoWindowOptions properties.
    2. var titleFormat:TextFormat = new TextFormat();
    3. titleFormat.bold = true;
    4. var titleStyleSheet:StyleSheet = new StyleSheet();
    5. var h1:Object = {
    6.   color: "#FFFF80",
    7.   fontWeight: "bold" };
    8. titleStyleSheet.setStyle("h1", h1);
    9. var contentStyleSheet:StyleSheet = new StyleSheet();
    10. var body:Object = {
    11.   color: "#FF0080",
    12.   fontStyle: "italic" };
    13. contentStyleSheet.setStyle("body", body);
    14. var contentFormat:TextFormat = new TextFormat("Arial", 10);
    15. var options:InfoWindowOptions = new InfoWindowOptions({
    16.   strokeStyle: {
    17.     color: 0x987654
    18.   },
    19.   fillStyle: {
    20.     color: 0xffffff,
    21.     alpha: 0.8
    22.   },
    23.   titleFormat: titleFormat,
    24.   titleStyleSheet: titleStyleSheet,
    25.   contentFormat: contentFormat,
    26.   title: "Mio titolo",
    27.   content: "Ciao come va?",
    28.   contentStyleSheet: contentStyleSheet,
    29.   width: 200,
    30.   cornerRadius: 12,
    31.   padding: 10,
    32.   hasCloseButton: true,
    33.   hasTail: true,
    34.   tailWidth: 20,
    35.   tailHeight: 30,
    36.   tailOffset: -12,
    37.   tailAlign: InfoWindowOptions.ALIGN_LEFT,
    38.   pointOffset: new Point(3, 8),
    39.   hasShadow: true
    40. });

    Rispondi Quota
  11. getAvatar 1.0
    12 feb, 2010 nuovobuio:

    Ciao, gentilissimo. Ti chiedo ancora una cosa che non mi è chiara sto provando ad adattare l'aliasing del testo a mio piacimento, con il classico:

    PLAIN TEXT
    Actionscript:
    1. field.antiAliasType = AntiAliasType.ADVANCED;

    ma non capisco dove metterlo.
    Il testo appare sempre sgranato, non trovo il texField a cui applicare l'aliasing, dov'è??? Non lo vedo??

    Rispondi Quota
  12. getAvatar 1.0
    13 feb, 2010 Giovambattista Fazioli:

    @nuovobuio: il fatto che tu non trovi il textField probabilmente significa che l'hai inserito direttamente nello stage. Per impostare il tipo di AntiAlias ricordati, comunque, che devi incorporare i caratteri, altrimenti non ti funzionerà. Se il TextField è presente nello stage puoi impostare il tipo di AntiAlias selezionando il TextField (forse intendevi Label o TextInput) e modificando i parametri nella finestra/pannello proprietà.
    Se invece vuoi operare da codice, il TextField deve avere un'identificativo, cioè un nome univoco che permetta al codice di referenziarlo. Per impostare il nome dell'istanza (tipo "miotextfield") puoi operare sempre dallo stage: seleziona il componente e nella finestra/pannello proprietà in "nome istanza" inserisci "miotextfield". Se hai difficoltà inviami il codice.

    Rispondi Quota
  13. getAvatar 1.0
    13 feb, 2010 nuovobuio:

    scusami, non sono stato chiaro io, intendevo l'aliasing del testo della nuvoletta di google map, il title e il content del codice che mi hai precedentemente postato, non riesco ad impostargli l'aliasing, il testo mi appare sempre "rovinato".
    Dove trovi le varie opzioni da impostare per google map? Sono tutte qui o ce ne sono altre tipo lo spessore della linea di perimetro della nuvola ecc ?
    Scusami, è la prima volta che provo le mappe in flash..

    Rispondi Quota
  14. getAvatar 1.0
    15 feb, 2010 nuovobuio:

    ho fatto una domanda troppo scema?

    Rispondi Quota
  15. getAvatar 1.0
    15 feb, 2010 Giovambattista Fazioli:

    @nuovobuio: :) no, tranquillo... comunque devi guardare nella documentazione Google. Solo se le API di Google lo permettono puoi impostare l'aliasing. Quelli non sono oggetti Flash direttamente indirizzabili. Ergo, se Google non lo supporta non lo puoi impostare :( spiacente :)

    Rispondi Quota
  16. getAvatar 1.0
    22 feb, 2010 nuovobuio:

    niente.. non va :-(

    ho seguito alla lettera il tutorial, inserita la mappa in libreria, e messa su schermo tramite addChild da libreria:

    var mioOggetto:mappa = new mappa();
    mcSezione3.addChild(mioOggetto);

    funziona solo in locale, se lo provo in linea, mi dice:

    Initialization failed: please check the API key,
    swf location, version and network availability.

    Ho anche inserito l'url del sito per ricevere la chiave, ma nulla, in rete non vuole funzionare, in locale invece funziona benissimo.. è in as3 con cs4.. mi aiuti a risolvere?

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL