Oggi, come promesso in precedenza, vogliamo mettere a disposizione questo utilissimo tutorial Flash scaricabile gratuitamente contenente la mappa dell’Italia in Flash e ActionScript 3.0 + Xml.

Si tratta di una piantina dell’Italia in Flash + ActionScript 3.0 gestita completamente da Xml (con la stessa identica logica e funzionalità del tutorial contentente la mappa dell’Europa di cui parlavo in un precedente post).

Opzioni disponibili

Tutte le opzioni disponibili sono modificabili interamente dal File XML in modo da avere piena libertà di gestione, ma vediamo subito cosa possiamo fare:

  • cambiare colore di sfondo e dimensioni della mappa,
  • abilitare o disabilitare una regione,
  • scegliere il colore di sfondo dei vari stati delle regioni: attivato, disattivato e selezionato,
  • abilitare o disabilitare il relativo tooltip contenente le informazioni degli città corrispondenti (se abbiamo la necessità di inserirle) e gestirne il relativo colore, le etichette che compaiono all’interno di esso: “Esplora” o “Nessuna corrispondenza trovata” e infine il link di destinazione per ciascuna regione (potrebbe tranquillamente essere anche un richiamo ad una funzione javascript che scatena un file.PHP),
  • inserire Infiniti Tooltip per ogni Regione.

Variabili utilizzate

Tutte le variabili necessarie alla modifica sono inserite all’interno del file.XML

  • bg_color=”292929″ (colore di sfondo della mappa)
  • disable_state_color=”CCCCCC” (colore regione disabilitata)
  • active_state_color=”A3A3A3″ (colore regione attiva)
  • selected_state_color=”F52929″ (colore regione selezionata)
  • tooltip_show=”true” (possibilità di attivare il tooltip, in caso contrario inserire “false”)
  • tooltip_bg_color=”F52929″ (colore di sfondo del Tooltip)
  • tooltip_text_color=”FFFFFF” (colore del desto del Tooltip)
  • department_found=”Esplora” (testo etichetta che compare sul tooltip)
  • department_not_found=”Nessuna corrispondenza trovata” (testo etichetta in caso non ci siamo città con affiliati)
  • <country link=”http://www.miodomio.com” active=”true” clip=”veneto”>Veneto (possibilità di gestire il link e scegliere se la regione sia attivata o disattivata)
    <affiliate>Citta Uno</affiliate>
    <affiliate>Citta Due</affiliate>
    </country>

File inclusi nel pacchetto

  • italia.fla
  • italia.swf
  • config.xml
  • index.html
  • jquery.core.1-3-2.min.js
  • jquery.swfobject.1-0-5.min.js
  • Pacchetto caurina
  • pacchetti com/flepstudio
  • Mappa Italia Vettoriale.ai

Installazione

se la neseccità è quella di implementare ulteriori funzioni aggiuntive non inserite in questo tutorial occorre:

  • aprire e modificare il file main.fla e il file com/flepstudio/main.as per modificarlo a piacere;

altrimenti basterà caricare sul vostro sito web i seguenti file e il gioco è fatto (il resto dei file in questo caso non serviranno a nulla):

  • config.xml (dove andremo a modificare le caratteristiche della mappa come spiegato sopra)
  • italia.swf (mappa Italia)
  • jquery.core.1-3-2.min.js (libreria jQuery)
  • jquery.swfobject.1-0-5.min.js (libreria jQuery per implementare il filmato nella pagina web)
  • index.html (qui andremo ad inserire i percorsi ai vari file)

Montare il tutto

Per montare il tutto sul nostro sito web occorre caricare i file descritti sopra e successivamente aprire la index.html che si presenterà nel seguente modo:

<html>
<head>
<script src=”jquery.core.1-3-2.min.js” type=”text/javascript” charset=”utf-8″></script> <!– Percorso della libreria jQuery –>
<script src=”jquery.swfobject.1-0-5.min.js” type=”text/javascript” charset=”utf-8″></script> <!– Percorso della libreria jQuery –>
<script type=”text/javascript” charset=”utf-8″>
$(document).ready(function () {
$(‘#mappa-italia’).flash({ // Nome del div in cui vogliamo che compaia la mappa
swf: ‘italia.swf’, // Percorso del file.swf
width: 450, // Larghezza della mappa
height: 500, // Altezza della mappa
flashvars:{xmlFile: ‘config.xml’} // Percorso del file xml
});
});
</script>
</head>
<body>
<div id=”mappa-italia”></div> <!– Div in cui comparirà la mappa –>
</body>
</html>

modificate il tutto a piacere, salvate e il gioco è fatto.

Speriamo di essere stati abbastanza esaurienti nella spiegazione ma in caso di dubbi non esitate a lasciare un commento, anche per quanto riguarda la mappa dell’europa messa a disposizione qualche giorno fa.

Demo Scarica il sorgente