- Home
- Categorie
- Digital Marketing
- Grafica, Visual Design & UX
- Quale tecnica per animazione grafica?
-
Quale tecnica per animazione grafica?
Vorrei realizzare un'animazione in cui passando su un punto x dell'immagine, ne nasca un bottoncino rotondo.
Il problema è questo: tutte le fasi che compongono l'animazione (bottone piccolo, bott. medio, bott. grande con logo al centro illuminato) vanno disegnate separatamente o posso usare qualche tecnica che mi semplifichi il lavoro?
Ma soprattutto...con che programma faccio tutto questo? Photoshop? Grazie in anticipo per la pazienaza
EDIT: io avevo pensato ad un immagine mappata...e l'animazione con una gif "animata" appunto. Ma non ho la minima idea di come si faccia e di quale programma avrei bisogno...help!
-
Se intendi passando con sopra il mouse per una pagina internet, io ti consiglio di utilizzare imageready che ha un'interfeccia potente per la creazione di effetti "rollover" (qui trovi una spiegazioncina dell'effetto senza l'utilizzo di imageready). Per quanto riguarda le fasi, devi creare l'area di lavoro che può essere un'immagine, poi come hai detto tu puoi mappare l'immagine e attraverso l'utilizzo delle sclices (presenti in imageready) puoi creare gli effetti rollover (quindi far apparire dei bottoni) al passaggio del mouse. Addirittura imageready ti crea anche l'html della pagina. Non so se era questo che intendevi..
-
Grazie per la risposta! Allora, il rollover non fà al caso mio perchè l'animazione ha più di 2 fasi e quindi credo che non sia utile usarlo...non ho capito però come faccio con imageready (azz quanto costa!) a crere l'animazione dopo aver creato l'area di lavoro.
Cioè: prendo la mia immagine mappata (area di lavoro) e su un punto di cordinate x,y deve nascere dal nulla (un puntino lungo 1px) un immagine-logo che cresce fino a divenire della grandezza adatta. Non vorrei che appena si passa il cursore su quel punto apparisse il logo, vorrei che fosse una cosa progressiva.
Tutto questo lo posso realizzare con imageready?
-
Si, io ti avevo parlato del rollover per il semplice motivo che dopo aver aperto la tua immagine, puoi dargli come stato l'esecuzione dell'animazione al passaggio del mouse (cioè selezioni l'area in cui deve apparire l'animazione e poi gli dai come stato l'animazione). Resta il fatto che prima devi creare l'animazione e poi inserirla nello stato rollover (devi fare qualche prova). Comunque puoi farlo benissimo con imageready che come ti ho detto ti da anche l'html da utilizzare subito.
-
@delargester said:
Grazie per la risposta! Allora, il rollover non fà al caso mio perchè l'animazione ha più di 2 fasi e quindi credo che non sia utile usarlo...non ho capito però come faccio con imageready (azz quanto costa!) a crere l'animazione dopo aver creato l'area di lavoro.
Cioè: prendo la mia immagine mappata (area di lavoro) e su un punto di cordinate x,y deve nascere dal nulla (un puntino lungo 1px) un immagine-logo che cresce fino a divenire della grandezza adatta. Non vorrei che appena si passa il cursore su quel punto apparisse il logo, vorrei che fosse una cosa progressiva.
Tutto questo lo posso realizzare con imageready?
Questo lavoro è abbastanza semplice da fare con flash,
viene molto meglio.
In rete c'è ne sono di guide semplici per imparare, guarda qui:
http://www.risorse.net/flash/_6/
-
Guarda, ti ho fatto un piccolo esempio per farti capire come venga fuori un'animazione al passaggio del mouse con imageready. Ti posto l'allegato, basta che tu apra la pagina prova.html e tu vada sopra il quadratino nero :).
-
Grazie mille carlitos! Un esempio vale più di 1000 spiegazioni. E' molto simile a quello che avevo intenzione di realizzare.
Grazie anche a te Hotshot per il consiglio ma flash è uno strumento a me sconosciuto ed estremamente difficile da utilizzare per chi è proprio agli inizi. In più siccome questa immagine mappata la voglio usare come pagina principale per il sito, farla in flash vorrebbe dire problemi di indicizzazione e problemi di posizionamento. Senza contare i problemi più seri: l'accessibilità.
Dalle statistiche del mio sito ho notato che quasi il 35% dei visitatori non aveva il player flash e non visualizzava parti della vecchia home.
Farlo tutto in flash vorrebbe dire perdere visitatori e non essendo un sito ancora famoso mi sembra poco producente come soluzione.
Un ultima domanda preliminare (sento che ne seguiranno altre per quanto concerne l'utilizzo di image ready): è possibile far si che a quell'effetto sia corrispondente un effetto rollover sul pulsante della barra di navigazione?
Cioè: vorrei che il sito fosse navigabile sia partendo dall'immagine, sia dalla barra di navigazione che porrò in alto.
Vorrei che sia che si passasse sull'immagine, sia che si passasse sulla barra, il bottone della barra e l'animazione dell'immagine si accendessero.
Che si veda cioè che sono in relazione e che hanno la stessa funzione.
E' possibile?
-
si è possibilissimo, basta che tu crei un effetto rollover anche sul menù in alto con le stesse impostazioni del rollover sull'immagine.
-
Ed in questo modo se passo sul punto dell'animazione si attiva anche il rollover sul bottone che però non è toccato dal cursore? Mi sembra strano che sia così semplice...per attivare un rollover bisogna passarci sopra...io invece vorrei che si attivasse anche passando sopra un altro punto (cioè quello dell'immagine mappata) e non quello dove è impostato il rollover...come faccio a impostare questa corrispondenza?
Avevo teorizzato che si potesse dire al rollover:
attivati se passo sopra il punto x;
attivati anche se passo sopra il punto y.
Vorrei che si potesse attivare lo stesso rollover ma da due punti diversi...non sò come spiegarmi meglio...grazie comunque per l'attenzione, siete davvero fantastici!
-
Si avevo capito, infatti si può fare unendo la mappatura immagini con stati di rollover. Il risultato è che passando in due punti diversi, attivi la stessa animazione, ti ho fatto un piccolo esempio: nel file si attiva il solito puntino lampeggiante passando sopra la voce di menù GO e passando sopra la palla blu che racchiude il puntino stesso, ciao
-
Ok. Vada per ImageReady. Corro a cercare qualche buona guida. Se hai qualche link da consigliare è ben accetto!
Grazie mille!
-
Su internet digitando imageready trovi parecchie cose, poi quando hai dei dubbi puoi sempre chiedere qui nel forum :). Io ho trovato questa guida, anche se in inglese, non è male, ciao