Con questo tutorial Flash scaricabile gratuitamente vogliamo mettere a disposizione una mappa dell’europa in Flash e ActionScript 3.0 + Xml presa qualche tempo fa dall’ottimo FlepStudio e migliorata in molti punti, in termini di semplicità di configurazione e opzioni possibili.

Si tratta di una piantina dell’europa in Flash + ActionScript 3.0 gestita completamente da Xml (quindi per assurdo il file.FLA non ha nessuna necessità di essere aperto o modificato a meno che non si voglia estendere alcune funzioni ulteriori) che racchiude tutti gli stati europei, i quali possono essere selezionati, attivati oppure disattivati.

Inoltre dal file XML è possibile cambiare il colore di sfondo, della mappa, degli stati europei selezionati, attivi e disattivati, abilitare, disabilitare e gestire il comportamento e le caratteristiche dei tooltip, aggiungere o rimuovere gli affiliati, modificare il link di destinazine al click, e tante altre cose che spieghiamo subito nello specifico.

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 nazione,
  • scegliere il colore di sfondo dei vari stati delle nazioni europee: attivato, disattivato e selezionato,
  • scegliere se per ogni nazione vogliamo far comparire il relativo tooltip contenente le informazioni degli affiliati (se abbiamo la necessità di inserirli) e gestirne il relativo colore, le etichette che compaiono all’interno di esso: “Esplora” o “Nessun affiliato trovato” e infine il link di destinazione per ciascuna nazione (Potrebbe tranquillamente essere anche un richiamo ad una funzione javascript che scatena un file.PHP),
  • inserire Infiniti Tooltip per ogni Nazione.

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 nazione disabilitata)
  • active_state_color=”A3A3A3″ (colore nazione attiva)
  • selected_state_color=”F52929″ (colore nazione 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=”Nessun affiliato trovato” (testo etichetta in caso non ci siano affiliati)
  • <country link=”http://www.miodomio.com” active=”true” clip=”albania”>Albania (possibilità di gestire il link e scegliere se la nazione sia attivata o disattivata)
    <affiliate>Affiliato Uno</affiliate>
    <affiliate>Affiliato Due</affiliate>
    <affiliate>Affiliato Tre</affiliate>
    </country>

File inclusi nel pacchetto

  • europa.fla
  • europa.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 Europa 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

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)
  • europa.swf (mappa europa)
  • 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-europa’).flash({ // Nome del div in cui vogliamo che compaia la mappa
swf: ‘europa.swf’, // Percorso del file.swf
width: 570, // Larghezza della mappa
height: 540, // Altezza della mappa
flashvars:{xmlFile: ‘config.xml’} // Percorso del file xml
});
});
</script>
</head>
<body>
<div id=”mappa-europa”></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.
Continuate comunque a seguirci, tra qualche giorno verrà rilasciata anche la mappa del”italia con le stesse identiche caratteristiche.

Demo Scarica il sorgente