Tutorials » Tecnologia » Sviluppo » Software » Internet » Flash CS3 » Flash » Actionscript 3.0 » ActionScript

Google Maps component per Flash

venerdì 25 gennaio, 2008

AFComponents UMAP

Google ha reso disponibile le API – in Javascript – per inserire le sue mappe in qualsiasi sito Web. Viediamo come realizzare la stessa cosa con Flash!

image Partiamo da un componente gratuito, UMAP (Universal ActionScript 3.0 Mapping API  – integrated with Google Maps), sviluppato da AFComponents, una società verticalizzata su componenti per Flash/Flex davvero interessanti e a prezzi accessibili. Sul sito, dove è necessario registrarsi per usufruire dei download gratuiti, sono presenti anche le versioni di UMAP per ActionScript 2.0: G MAP Ver.2.6.1. In questo caso noi analizzeremo la versione 0.4 Beta di UMAP per ActionScript 3.0 (all’interno del pacchetto c’è anche il componente Flex). Questa che andremo a vedere è – evidentemente – una versione beta e manca, quindi, di alcune funzionalità presenti nella versione per Actionscript 2.0 (G MAP Ver.2.6.1). Tuttavia, gurdando al futuro, mi sembra più interessante focalizzare l’attenzione su questa release; le ho provate entrambe e, nonostante la maggiore completezza della release per Actionscript 2.0, la versione beta per Actionscript 3.0 è notevolmente più performante.

Tra le sue features troviamo:

  • Support for custom map tiles and providers
  • Updated loading algorithms for faster tile loading
  • Flash / Flex versions
  • KML Support
  • Advanced content layering
  • FLA-Based Map Controls
  • Vector shape overlays
  • Extended Info Window styling

Componenti UMAP Una volta installato il componente UMAP tramite Adobe Extension Manager troveremo quattro nuovi componenti che fanno tutti parte di UMAP. I controlli usati in Google Maps, come lo Zoom (Zoom Control), la scelta del tipo di mappa (Map Type Control) e il cursore per gli spostamenti (Position Control), sono qui realizzati come componenti/elementi esterni. Il componente principale è, ovviamente, UMap. A questo possono essere aggiungi tutti gli altri se lo desideriamo. Per farlo, tuttavia, bisogna scrivere qualche riga di codice…

Per la documentazione clicca qui: attenzione che la documentazione contiene qualche errore e tutorial sono assenti!

Vediamo un primo esempio. Apriamo un nuovo filmato Flash e trasciniamo il componente UMap e il componente Zoom Control. Nominiamo le istanze di questi rispettivamente umap e zoom.

Stage Player
Componenti sullo Stage Prova filmato

Non è necessario porre il componente Zoom Control sopra il componente UMAP. Quando proverete il filmato lo Zoom sarà posizionato automaticamente sulla sinistra del componente principale. Il codice Actionscript da usare per “aggiungere” il componente Zoom è il seguente:

1
umap.addControl(zoom);

La stessa cosa va fatta se vogliamo completare la vista come normalmente viene mostrata su Google Maps.

Stage Player
Componenti sullo Stage Prova filmato

Anche in questo caso nominare le istanze degli altri due componenti e scrivere il seguente codice:

1
2
3
umap.addControl(zoom);
umap.addControl(maptype);
umap.addControl(mapposition);

Chi non è pratico di Actionscript deve stare attento a qualche errore di “battitura” nella documentazione – come accennavo sopra. Dopotutto è un prodotto gratuito e in beta!

Per aprere una finestra (Window) personalizzata, ad esempio, il codice corretto è:

image Window personalizzate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import com.afcomponents.umap.core.UMap;
import com.afcomponents.umap.styles;
import com.afcomponents.umap.styles.InfoWindowStyle;
import com.afcomponents.umap.types.Size;
//
umap.addControl (zoom);
umap.addControl (maptype);
umap.addControl (mapposition);
//
// definisce lo stile della Window
var style:InfoWindowStyle = new InfoWindowStyle();
style.strokeAlpha = 0.8;
style.size = new Size(200,100);
style.autoSize = InfoWindowStyle.AUTO_SIZE_NONE;
style.tailSize.height = 30;
style.tailOffset = 0.10;
style.contentStyle.html = true;
style.contentStyle.styleSheet = new StyleSheet();
style.contentStyle.styleSheet.setStyle ("html", {fontFamily:"arial", fontSize:12, color:"#555555"});
// parametri Window
var param:Object = new Object();
param.title = "Titolo Finestra";
param.content = "Contenuto...<br />in stile<br /><b><u>HTML</u></b>!";
// apre la Window
umap.openInfoWindow (param, style);

Ovviamente è possibile usare il componente UMAP, e gli altri, anche direttamente da codice, senza cioè trascinarli dalla finestra dei componenti nello stage. Ed è anche possibile aggiungere i Marker (o Ballon) per indicare luoghi sulla mappa.

image Marker
1
2
3
4
5
6
7
8
9
10
11
import com.afcomponents.umap.core.UMap;
import com.afcomponents.umap.styles.GeometryStyle;
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.types.LatLng;
//
var map:UMap = new UMap();
map.setSize (300, 300);
this.addChild (map);
//
var m:Marker = new Marker({name:"Titolo Marker",position:new LatLng(10, 10), description:"Questo è il testo del corpo del Marker"}, {fill:GeometryStyle.RGB, fillRGB:0xffcc00});
map.addOverlay (m);

Torneremo a parlare presto di questo componente, in attesa anche di altri rilasci – visto che è una beta!

Post correlati

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

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

5 commenti a: “Google Maps component per Flash”

  1. 09 mag, 2008 Advanced Flash Components Blog » Blog Archive » Stuff is Happening at AFC:

    [...] Undolog [...]

  2. 10 feb, 2009 Simo:

    Ciao! Ho un problemino con la mappa…se la metto in un swf va benissimo. Ma se devo richiamarla dall’indice e caricarlo la mappa “impazzisce” e non si carica!
    Ho provato ad inserire uno stop(); dopo il codice, ma niente. Io ho necessità di inserire la mappa
    nel capitolo “dove siamo” .
    Ho un file index.swf che richiama la homepage.swf e menu.swf, poi da menu.swf carico i vari capitoli tra cui dovesiamo.swf…ma così la mappa non va! Mi potete aiutare?

    Rispondi Quota
  3. 18 mar, 2009 Daniel Torres:

    Hola, tengo un problema con este componente. Ya lo instale y no me funciona, ¿Tengo que hacer algo más aparte de colocarlo en el escenario?, Cuando lo publico me muestra un cuadro parpadeante con los componentes adicionales pero amontonados. Por favor una ayudita.

    Rispondi Quota
  4. 12 apr, 2009 Juan Felipe:

    Listo, ya lo averigué, la solucion es esta, si hay alguien con otra solucion tambien sería bueno saberla:

    1
    2
    3
    4
    var pz:ZoomControl = new ZoomControl;  //creamos el control de zoom
    pz.align = new Align(Align.RIGHT, Align.BOTTOM);  //lo ubicamos en la esquina inferior derecha
    pz.padding = new Point(100,100);   //le damos un padding para ubicarlo donde queremos
    mapa.addControl(pc);   //Por ultimo lo agregamos al mapa

    Exitos!!!. :P

    Rispondi Quota
  5. 12 apr, 2009 Juan Felipe:

    Hola, como hago para posicionar los controles del mapa (Zoom, Tipo de mapa y Posicion) en otra area, por ejemplo en la esquina inferior derecha????

    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
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL