Animazioni flash e image mapping su foto 
Autore: Paolo M.
Visite 1789,
Followers 1,
Condiviso 0
Innanzitutto perdonate la mia scarsissima conoscenza, mi stò avvicinando in punta di piedi a questo software per tanto perdonate gli errori.
Stò tentando di realizzare un sito per un bar dove da una foto del bancone con sopra una scritta, da queste ultime (mappate ovviamente) dovrebbero scendere sul banco appunto, le foto dei vari cocktail che ulteriormente clikkati originerebbero una gallery con l'esecuzione e i suoi ingredienti.
Perdonate la banalità nella spiegazione del mio concetto.
Grazie a tutti
Postato il
... come da titolo, in animazione Flash puoi fare di tutto, non hai limiti, magari da integrare con Swiffy come contenuto alternativo, ma devi essere molto esperto con Flash, e/o con SwishMax che usavo io, e per inserire l'animazione Flash in WebSiteX5 basta un click...
... in alternativa di fornisco solo una idea, e mi limito a ciò, facendoti vedere un esempio: http://www.zspace.it/kolasim/website/divsino2K/index.html
... oppure, mappi l'immagine ed usi un IFRAME, ma devi avere le idee chiare; esempio primordiale: http://www.zspace.it/kolasim/website/iframe/link_iframe.html
... oppure potresti farti venire una idea da Snake.Xenzia, qui: http://www.ilcacciatoredinuvole.it/accordion_3/index.html
... oppure, cercare in rete qualche risorsa che faccia al caso...
.
ciao
Autore
Ottimo Kolasim,
ho costruito la mia immagine mappata con Macromedia fireworks MX 2004 e nella sua preview funziona alla grande, ora la devo esportare su Website ma ho trovato degli intoppi.
Dove devo incollare l'html che ho generato?
L'immagine originale la devo inserire nella creazione della pagina?
Dapprima ho incollato l'html nella sezione esperto ma in anteprima veniva riproposto il mio grigliato a tutta pagina e non localizzato solo nell'immagine creata.
Mi riscuso ancora per la mia scarsa conoscenza dell'argomento e del software stesso, portate pazienza.
Paolo
guarda questo esempio, potrebbe essere proprio quello che serve a te....
http://www.essedi.altervista.org/_sito/con-css.html
Oppure prova a mettere la tua cartella zippata qui, che gli si da un'occhiata, e si prova ad inserirla...
... non conosco quel programma...
... prova ad esportare in rete la struttura che hai generato, html, swf, xml, cartelle ed altri files a servizio, e me li elenchi, e particolarmente, posta il link alla pagina HTML, in modo da vedere se ci posso capire qualcosa, ...e poi si vedrà...
.
ciao
... ciao Mirko, ...intanto che cercavo degli esempi, mi hai preceduto...
Autore
Grazie Mirko innanzitutto,
si esattamente così, poi la foto rolloverata porterebbe ad una'altra pagina del sito ma faccio un passo alla volta.
Nel zip che posto abbiamo infatti un banco, dove in prossimità di alcuni oggetti dovrebbero apparire i tre cocktail sempre allegati;
che ne so uno in prossimità del pupazzo sulla sinistra ecc....
una specie di caccia al tesoro per scoprire quello che la location "costruisce".
Ovviamente mi studio il link, ho una buona conoscenza del computer ma mi stò avvicinando alla categoria sites in punta di piedi, infatti html e css li conosco si può dire "di vista" e mi rendo conto sia una grossa lacuna,
grazie 1000
Paolo
anche una cosa tipo questa con le immagini pronte, non sarebbe male...
http://www.zspace.it/kolasim/website/rosaventi/rosadeiventi.html
Autore
Grazie per l'intervento anche a Kolasim intervenuto mentre stavo scrivendo a Mirko.
Allora il preview della mia immagine mappata e creata con firework mx2004 quando la visualizzo con paint per esempio non la vedo intera e già questo non me lo so spiegare, però in quest'altro zip vi mostro il testo html creato sullo screenshot sempre allegato.
Le tre immagini sono nel post precedente.
Paolo
e qui una prova veloce con le tue immagini...
http://provews.altervista.org/bar/
ovviamente dovresti preparare l'immagine di sfondo di misure adatte e tutte le miniature pronte magari con la scritta gia sopra del nome del cocktail....
Autore
MMMHHH!!!!!! Perdonami Mirko ma dove sono le immagini?
c'è solo lo sfondo del chiringuito, no?
Paolo
Da come l'ho capita io, a te serve esattamente quello realizzato nell'esempio che ti è stato indicato d Mirko
http://www.essedi.altervista.org/_sito/con-css.html
Perché perdersi in altre discussioni?
quello che hai messo zippato tu è cosi....le immagini appaiono solo al passaggio del mouse...
Passaggio del mouse dove?
effettivamente l'avevo provato solo con IE....
Autore
Molto probabilmente sono applicazioni che non sono nelle mie corde, non ci stò capendo assolutamente niente e non voglio assolutamente fare perdere del tempo a nessuno, quello che vorrei realizzare lo avete capito tutti ma nessuno mi stà spiegando come fare praticamente:
l'ultima cattura di Mirko cosa rappresenterebbe?
vedo solo le mie immagini circoscritte da "x".
Il link di EsseDi spiega altrettanto bene ma come realizzo la mappatura, con i comandi CSS3 da editare in base alla mappa oppure con un software di terze parti dove creare le zone editabili?
Sono veramente alle primissime armi,
riririscusatemi,
Paolo
Non sono certo di avere capito quello che vuoi dire.
Le immagini occorrenti le hai già.
Devi solo determinare dimensioni e posizione dell'angolo in alto a sinistra delle porzioni da mappare. E ciò può essere fatto con qualsiasi programma di grafica.
Fra l'altro, in quest'altra pagina è anche spiegato come fare con Gimp
http://www.essedi.altervista.org/_sito/mappatura-immagine.html
Autore
Grazie ragazzi,
quindi una volta determinate le coordinate x e y degli oggetti da inserire nelle mappe devo editarle nella formula CSS per esempio oppure in tag area giusto?
Domani full immersion.
Paolo
Autore
Ed eccomi qua,
Con Gimp ho effettuato la mappatura dell'immagine ed esportato il testo della mappa ma quando la trascrivo nell'editor di Website non esce niente o perlomeno la mappatura sembrerebbe fuoricampo, ho seguito alla lettera anche il demo di essedi ma non riesco a farla funzionare.
Se non vi arreca troppo disturbo con i dati zippati in allegato sareste così gentili da crearmi il codice così da studiarmi cosa continuo a sbagliare?
E' tutto chiarissimo in teoria ma in pratica purtroppo.............
Santi subito!!!!!!!!!
Paolo
... giusto...
... comunque devi anche impadronirti del programma che hai usato o qualsiasi altro, anche direttamente in rete, e fare degli esperimenti per capire, pubblicando in rete per osservarne e far osservare i risultati ottenuti...
... in questo Argomento troveresti altri metodi utili, semplici, nelle cui pagine si deve decifrare il codice in chiaro: http://answers.websitex5.com/post/93150
... tanto per stare in tema col Titolo, ed avendo il vecchio catorcio a portata di mano, ho voluto farti un veloce esempio minimale con SwishMax (c'è lo SWI): http://www.zspace.it/kolasim/prove/mappatura/cocktail1.html
... qui è tradotto in HTML5(!) : http://www.zspace.it/kolasim/prove/mappatura/cocktailSwiffy.html
... e questo, il tradizionale in JS, fatto con PSP cliccando, ma il codice che puoi vedere nella pagina è universale, quindi potrebbe non occorrereree nessun programma: http://www.zspace.it/kolasim/prove/mappatura/cocktail_js.html
...
Autore
BELLISSIMO!!!!!!!!!
Perdonate l'urlo di approvazione, è esattamente quello che mi piacerebbe fare,
Grazie 1000 Kolasim e grazie a tutti gli intervenuti credo di avere di tutto di più, ora tocca solo a me.
Paolo
Però stiamo giocando a non capirci.
Il riferimento a GIMP nell'ultimo mio messaggio era solo per suggerirti uno strumento per rilevare coordinate e dimensioni delle porzioni da mappare, ma non era una indicazione all'utilizzo della mappa generata da Gimp. Il metodo del tag area non ti permette di mostrare le immagini ingrandite dei vari cocktail.
Una volta in possesso delle immagini occorrenti, delle posizioni e delle dimensioni delle aree da mappare, devi applicare il metodo dellla mappature con CSS
http://www.essedi.altervista.org/_sito/con-css.html
come ti è stato indicato da Mirko e da me.
Il sistema suddetto prevede una unica immagine suddivisa in varie componenti: normanale, immagine da mostrare al passaggio del mouse su porzioni non mappate, immagini da mostrare al passaggio del mouse su porzioni mappate. Posizione e dimensioni delle suddette componenti possono essere determinate sempre con Gimp.