News, Storie & Consigli sui nostri Software Multimediali

Animazioni per siti web: trasforma il tuo sito web per il giorno di San Valentino

Animazioni per siti web: trasforma il tuo sito web per il giorno di San Valentino

Questo mese, con San Valentino, si è completamente all’insegna del romanticismo. I cuoricini rosa spuntano dovunque. Anche tu dovresti avere la possibilità di ricoprire il mondo d’amore. Ti mostriamo, quindi, come creare una pioggia di cuoricini magici per il tuo sito web.

 

Consigli per gli anti-romantici più tenaci presenti fra voi: i cuori si possono sostituire benissimo con della neve, in inverno, o con delle foglie colorate durante l’autunno. Chiaramente puoi anche usare la nostra guida base per creare una composizione creativa tutta tua.

Creare un’animazione

Poiché un’animazione è costituita da più immagini singole (fotogrammi), è necessario dapprima creare i singoli fotogrammi. Se, ad es. vuoi spostare un cerchio da in basso a sinistra verso in alto a destra sulla pagina web, il primo fotogramma mostrerebbe il cerchio in basso a sinistra e il secondo il cerchio in alto a destra.

Non appena esporti il file come Flash o guardi l’anteprima, il programma calcola in automatico tutte le immagini intermedie così da creare un movimento fluido.

Fondamentalmente, per animare un oggetto, hai a disposizione le seguenti possibilità:

Spostamento: puoi spostare gli oggetti da un posto all’altro

Ridimensionamento: gli oggetti possono essere ingranditi o rimpiccioliti

Distorsione: puoi comprimere o inclinare gli oggetti

Rotazione: fa ruotare gli oggetti

Trasparenza: modifica uniforme della trasparenza degli oggetti

Modifica colore: gli oggetti possono cambiare di colore progressivamente

 

Creazione del 1° fotogramma:

→ Per creare un documento di animazione, seleziona nel menu “File” → “Nuovo” → “Animazione”.

→ Disegna sulla superficie bianca gli oggetti che vuoi nella posizione iniziale (per la nostra pioggia di cuoricini usiamo una serie di cuori).

→ Con il simbolo: (ICON) dai un nome ad ogni singolo oggetto, di modo che il programma li possa associare facilmente ad ogni posizione nel secondo fotogramma.

a

→ Con il simbolo: (ICON) dai un nome ad ogni singolo oggetto, di modo che il programma li possa associare facilmente ad ogni posizione nel secondo fotogramma.

Screen 2

Creazione del 2° fotogramma:

Nel secondo fotogramma puoi realizzare tutte le modifiche che devono verificarsi nel corso dell’animazione. Noi vogliamo una modifica del colore in un tono di colore più scuro ed una modifica di posizione, per simulare una pioggia. .

→ Clicca nella “Galleria di animazione fotogramma” su “Copia”.

Il secondo fotogramma appare esattamente come il primo. Ora puoi spostare, ruotare, colorare o deformare gli oggetti.

Coloriamo i cuoricini di un tono più scuro e spostiamo la serie verso il bordo inferiore dell’immagine.

Unbenannt1asasas

Per vedere come risulterà il tutto, usiamo l’anteprima nella “Galleria di animazione fotogramma”.

L’andamento del colore, così come il movimento dei cuoricini, è stato calcolato automaticamente dal programma e le modifiche vengono ora visualizzate. Con un click sul tasto destro del mouse su “Proprietà fotogramma” puoi impostare ora la durata di visualizzazione dei fotogrammi.

La nostra pioggia di cuoricini è pronta e dobbiamo solo salvarla come file Flash. Se vuoi fare di più, puoi aggiungere altri fotogrammi e creare altre animazioni.

 

Inserimento dell’animazione sul sito web:

Per incorporare l’animazione sul sito web, devi creare un segnaposto sopra l’oggetto sul quale deve essere visualizzata l’animazione.

Siccome vogliamo far piovigginare la pioggia di cuoricini sull’intera pagina del sito, tracciamo un rettangolo che la copra.

Screen 4

Adesso non resta che eseguire ancora i passaggi seguenti:

→ Seleziona l’oggetto

→ Tramite “Extra” > “Proprietà web”, clicca su “Segnaposto”

→ “Sostituisci con Flash” e si apre il file Flash che hai salvato

→ Clicca su “Applica” e “OK”

Screen 5

Adesso sta a te! Dai al tuo sito web un nuovo look in occasione di San Valentino. Non hai ancora un sito web? Non c’è problema! Scarica la versione di prova gratuita e prova a crearlo usando uno dei numerosi modelli per siti web.

Leave a Reply

Your email address will not be published. Required fields are marked *