Come si fa a ceare una mappa interattiva dell'Italia?

Unisciti alla comunità di WebAnimator. Condividi le tue conoscenze e aiuta gli altri utenti.
Locked
maxweb
Posts: 9

Come si fa a ceare una mappa interattiva dell'Italia?

Post by maxweb »

Ciao,

ho bisogno di un aiuto. :shock:

Con Web Animator Plus, in una pagina di un sito che sto creando con Website X5 Professional 13 dovrei inserire una mappa dell'Italia suddivisa per Regioni e cliccando su ogni Regione dovrebbe cambiare colore lo sfondo della Regione selezionata ed apparire la relativa Rete Commerciale con l'Agenzia di riferimento per la Regione selezionata.

Per cercare di spiegarmi meglio di seguito il link ad una mappa dell'italia (come esempio) simile a quella che vorrei realizzare anche se per una tipologia diversa di attività commerciale:

http://www.femicz.it/cms/rete-vendita

Nel mio caso specifico vorrei, se possibile, che la descrizione dell'Agenzia di riferimento della Regione selezionata apparisse alla destra della mappa dell'Italia.

Grazie in anticipo per il vostro prezioso aiuto ;)

Max

ICR
Posts: 235

Post by ICR »

Buongiorno Max,
In questo caso puoi anche procedere creando l'effetto di animazione per il cambio del colore in una timeline differente cliccando su "Timeline Principale" e poi selezionando "aggiungi timeline" dove crei un'animazione di passaggio del colore con la funzione "fotogrammi chiave".
Nella timeline pricipale sull'oggetto imposti che con la funzione "on mouse over" deve essere caricata la timeline dove hai inserito l'effetto.

In questo modo non dovrai creare diverse scene ma solo creare delle timeline per la stessa scena per ogni oggetto con l'effetto per cambiare colore.

Cordiali Saluti

maxweb
Posts: 9

Post by maxweb »

Buon Pomeriggio iCR,
innanzitutto grazie per la tua risposta.
Purtroppo non ho le tue competenze, devo partire proprio da zero ovvero da come inserire l'immagine della cartina cliccabile nella timeline e step by step tutti i vari passaggi su come fare a creare regioni colorate, renderle cliccabili e attivare un particolare evento su ognuna di esse (al passaggio del mouse, deve apparire la relativa Rete Commerciale con l'Agenzia di riferimento per la Regione selezionata).
Ad esempio il tuo passaggio <"creando l'effetto di animazione per il cambio del colore in una timeline differente cliccando su "Timeline Principale" e poi selezionando "aggiungi timeline" dove crei un'animazione di passaggio del colore con la funzione "fotogrammi chiave"> per me è buio completo.
Sono consapevole che per te, leggendo la tua spiegazione, dovrebbe essere di una facilità assurda, ma per me è esattamente l'opposto.
Ultimo ostacolo per me insuperabile è come essere certo che la mappa sia "responsive" su qualsiasi tipologia di monitor e device.
Ti ringrazio in anticipo per la tua cortese pazienza se vorrai spiegarmi come procedere passo dopo passo partendo dalla videata principale di apertura del progamma WebAnimator Plus per la realizzazione di questa mappa interattiva.
Cordiali Saluti
Max

ICC
Posts: 486

Post by ICC »

Buongiorno Max,

Devi inserire ogni regione come immagine separata cosi che ognuna sia un oggetto separato.
In questo modo per ogni regione puoi inserire una funzione per il passaggio del mouse.

Fatto questo crei una nuova scena per ogni regione dove lavorando con la timeline crei l'animazione dove saranno mostrate le informazioni che devono apparire al passaggio del mouse.

Nella scena principale selezioni la regione e in Proprietà -> Eventi imposti per "on mouse over" che deve essere caricata la scena relativa alla regione.
Questa operazione va ripetuta per tutte le regioni.

Grazie mille!

maxweb
Posts: 9

Post by maxweb »

Buongiorno ICR,
anche se è passata da poco la mezzanotte è già iniziato un nuovo giorno.
Riesco solo ora ad accedere per leggere la tua risposta.
Grazie per la tua collaborazione e pazienza, sono consapevole di essere un "caso disperato"...
Adesso però sembra non essere più una "Mission Impossible" per me anche se ho un dubbio in merito ad un passaggio della tua spiegazione (subito al'inizio del primo paragrafo).
"Devi inserire ogni regione come immagine separata cosi che ognuna sia un oggetto separato".
Come faccio ad inserire ogni regione come immagine separata? Potrei creare una immagine con sfondo trasparente (ad esempio .png) di ogni regione, ma poi come riesco a fare coincidere i bordi frastagliati dei confini di ogni regione per ottenere un visualizzazione globale della cartina dell'Italia con tutte le singole regioni?
Grazie ancora per la tua risposta nonostante il periodo di vacanze... spero che leggerai ancora questa mio messaggio... in caso contrario attenderò il tuo rientro e nel frattempo Buone Vacanze!
In attesa di leggere una tua ulteriore e preziosa risposta i miei migliori saluti.
Max

ICC
Posts: 486

Post by ICC »

Buongiorno maxweb,

Si dovresti ritagliare tutte le regioni come singole immagini con sfondo trasparente e poi una volta inserite nella scena allinearle.
Puoi anche importare l'immagine della cartina completa cosi da poter poi spostare le immagini separate correttamente sopra cosi da avere un riscontro visivo.

Grazie mille!

maxweb
Posts: 9

Post by maxweb »

Buona giornata ICC,
innanzitutto grazie!
Riesco ad accedere finalmente al mio Desktop come singola immagine con sfondo trasparente potrebbe andare bene un fac-simile dell'allegato (Fonte: dalla Rete)? Attendo tua conferma se ho capito bene....
Ti invio altro msg con allegato cartina completa Italia (Fonte: dalla Rete) su cui spostare le immagini (in questo caso l'immagine del Piemonte presa ad esempio allegata a questa msg) separate correttamente sopra cosi da avere un riscontro visivo, per una tua cortese conferma di avere compreso bene anche questo passaggio...
Max
Attachments
Esempio PIEMONTE contorni regione su sfondo trasparente
Esempio PIEMONTE contorni regione su sfondo trasparente
it-piemonte.png (6.19 KiB) Viewed 8303 times

maxweb
Posts: 9

Post by maxweb »

Buon Pomeriggio ICC,
in allegato potrai trovare la Cartina dell’italia (Fonte: dalla Rete) come esempio.
Riepilogando la procedura corretta da seguire (se ho capito bene) è la seguente:
A) ritagliare tutte le regioni dalla cartina dell’Italia, elaborarle una ad una eliminando i contorni delle regioni confinanti e rendendo lo sfondo dell’immagine di una singola regione trasparente per poi salvare ogni immagine di ogni regione in .png che supporta la trasparenza dello sfondo (ovvero creando oggetti separati e distinti uno per ogni regione della cartina dell’Italia come singole immagini poi rendere lo sfondo trasparente e poi nel caso esempio regione Piemonte una volta inserita nella scena allinearla.
Chiarimento: cosa devo fare per inserire nella scena una ad una le Regioni partendo dall’esempio di quella del Piemonte con sfondo trasparente (allegata al mio precedente msg) per inserirla nella scena ed allinearla?
B) importare l'immagine della cartina dell’Italia completa così da poter poi spostare le immagini separate correttamente sopra così da avere un riscontro visivo (l’immagine della regione Piemonte avendo uno sfondo trasparente quindi non si va a sovrapporre sulla immagine completa della cartina dell’Italia).
C) inserire ogni regione come immagine separata (partendo da quella della regione Piemonte) cosi che ognuna sia un oggetto separato.
Chiarimento:
In questo modo per ogni regione posso inserire una funzione per il passaggio del mouse. Devo creare una nuova scena per ogni regione (in questo caso di esempio il Piemonte) dove lavorando con la timeline creo l'animazione dove saranno mostrate le informazioni che devono apparire al passaggio del mouse (nel mio caso specifico i riferimenti della Agenzia in Piemonte, nome agenzia recapiti, indirizzo etc). Per fare questo nella scena principale seleziono la regione (immagine con sfondo trasparente regione Piemonte) e in Proprietà -> Eventi imposti per "on mouse over" che deve essere caricata la scena relativa alla regione (ovvero i riferimenti della Agenzia in Piemonte, nome agenzia recapiti, indirizzo etc).
D) Cambio di colore al passaggio del mouse: creare l'effetto di animazione per il cambio del colore in una timeline differente cliccando su "Timeline Principale" e poi selezionando "aggiungi timeline" dove creare un'animazione di passaggio del colore con la funzione "fotogrammi chiave".
Nella timeline principale sull'oggetto impostare che con la funzione "on mouse over" deve essere caricata la timeline dove hai inserito l'effetto.
E) La cartina completa dell’Italia.
Chiarimento:
In che timeline va inserita per farla rimanere come immagine di sfondo fissa su cui sovrapporre le singole immagini delle regioni con sfondo trasparente in modo che ogni contorno delle regioni corrisponda esattamente con il relativo contorno riportato dalla mappa dell’Italia a livello visivo?
Spero di non essere diventato il tuo “incubo peggiore” con tutte queste mie richieste di chiarimenti per una corretta procedura basata sulla tua esperienza.
Ti ringrazio ulteriormente per la tua cortese collaborazione e per la relativa tua “sopportazione” necessaria per le spiegazioni richieste nel mio riepilogo che sicuramente a te sembrano evidenti e intuitive.
I mie migliori saluti
Max
Attachments
Mappa_italia_piemonte.png
Mappa_italia_piemonte.png (94.85 KiB) Viewed 8302 times

maxweb
Posts: 9

Post by maxweb »

**** ULTERIORE INOLTRO PER SICUREZZA DI CORRETTEZZA INVIO ****
Buon Pomeriggio ICC,
in allegato potrai trovare la Cartina dell’italia (Fonte: dalla Rete) come esempio.
Riepilogando la procedura corretta da seguire (se ho capito bene) è la seguente:
A) ritagliare tutte le regioni dalla cartina dell’Italia, elaborarle una ad una eliminando i contorni delle regioni confinanti e rendendo lo sfondo dell’immagine di una singola regione trasparente per poi salvare ogni immagine di ogni regione in .png che supporta la trasparenza dello sfondo (ovvero creando oggetti separati e distinti uno per ogni regione della cartina dell’Italia come singole immagini poi rendere lo sfondo trasparente e poi nel caso esempio regione Piemonte una volta inserita nella scena allinearla.
Chiarimento: cosa devo fare per inserire nella scena una ad una le Regioni partendo dall’esempio di quella del Piemonte con sfondo trasparente (allegata al mio precedente msg) per inserirla nella scena ed allinearla?
B) importare l'immagine della cartina dell’Italia completa così da poter poi spostare le immagini separate correttamente sopra così da avere un riscontro visivo (l’immagine della regione Piemonte avendo uno sfondo trasparente quindi non si va a sovrapporre sulla immagine completa della cartina dell’Italia).
C) inserire ogni regione come immagine separata (partendo da quella della regione Piemonte) cosi che ognuna sia un oggetto separato.
Chiarimento:
In questo modo per ogni regione posso inserire una funzione per il passaggio del mouse. Devo creare una nuova scena per ogni regione (in questo caso di esempio il Piemonte) dove lavorando con la timeline creo l'animazione dove saranno mostrate le informazioni che devono apparire al passaggio del mouse (nel mio caso specifico i riferimenti della Agenzia in Piemonte, nome agenzia recapiti, indirizzo etc). Per fare questo nella scena principale seleziono la regione (immagine con sfondo trasparente regione Piemonte) e in Proprietà -> Eventi imposti per "on mouse over" che deve essere caricata la scena relativa alla regione (ovvero i riferimenti della Agenzia in Piemonte, nome agenzia recapiti, indirizzo etc).
D) Cambio di colore al passaggio del mouse: creare l'effetto di animazione per il cambio del colore in una timeline differente cliccando su "Timeline Principale" e poi selezionando "aggiungi timeline" dove creare un'animazione di passaggio del colore con la funzione "fotogrammi chiave".
Nella timeline principale sull'oggetto impostare che con la funzione "on mouse over" deve essere caricata la timeline dove hai inserito l'effetto.
E) La cartina completa dell’Italia.
Chiarimento:
In che timeline va inserita per farla rimanere come immagine di sfondo fissa su cui sovrapporre le singole immagini delle regioni con sfondo trasparente in modo che ogni contorno delle regioni corrisponda esattamente con il relativo contorno riportato dalla mappa dell’Italia a livello visivo?
Spero di non essere diventato il tuo “incubo peggiore” con tutte queste mie richieste di chiarimenti per una corretta procedura basata sulla tua esperienza.
Ti ringrazio ulteriormente per la tua cortese collaborazione e per la relativa tua “sopportazione” necessaria per le spiegazioni richieste nel mio riepilogo che sicuramente a te sembrano evidenti e intuitive.
I mie migliori saluti
Max
Attachments
Mappa_italia_piemonte.png
Mappa_italia_piemonte.png (94.55 KiB) Viewed 8302 times

ICC
Posts: 486

Post by ICC »

Buongiorno Maxweb,

L'immagine completa la importi nella prima scena dove inserisci sopra di essa tutte le immagini separate cosi da avere oggetti separati nella timelime cosi da poter aggiungere i vari effetti alle varie regioni.
Una volta creata questa scena principale con tutte le regioni crei una scena per ogni regione dove nella scena principale inserisci la funzione per caricare la scena associata alla regione.

Grazie mille!

Locked