Suggerimento Canvas o SVG primi passi nella creazione

[Icarus8]

Salve a tutti,
sto realizzando un sito internet (mio personale quindi ci posso sbattere per tutto il tempo necessario); premetto che l'ultimo sito che ho creato e vecchio di due anni, con le validazioni w3c per html e css e delle stupidissime animazioni in flash, ma in due anni sono cambiate così tante cose... ho letto un paio di articoli e ho fatto fatica a capire come muovermi
.
Ma passiamo ai fatti

Materiale disponibile
4 Figure Vettoriali a tinta unica non molto complesse realizzate in illustrator

Cosa vorrei realizzare

un intro animata, sfondo pagina nera, le figure appaiono una alla volta con attributo "fade_in" quando tutte le figure sono disposte metto un effetto flash (tipo lampo) e un'inversione del colore, le figure diventano nere e lo sfondo bianco; appara un'ultima immagine vettoriale con fade_in che scorre da sinistra verso destra e il tutto si ferma in questa possizione.

Niente flash vorrei che questa cosa si vedesse o a breve si potesse vedere su iPhone - iPad e affini e anche perchè da quello che ho letto con Canvas di HTML5 o SVG posso realizzare questa animazione. Preferirei che la grafica rimanesse in qualche modo vettoriale e il DIV (chiamiamolo così) e tutto il suo contenuto grafico si ridimensionasse automaticamente a schermo intero (non devono apparire barre di scorrimento e vorrei che comunque occupasse la maggior parte dello schermo) il ridimensionamento da parte dell'utente, con zoom e robe del genere non deve avere alcun effetto.
Mi piacerebbe capire il meccanismo e anche la vostra opinione sul metodo da utilizzare, niente codice prefatto, mi piacerebbe arrivare a capire completamente cosa e come fare.

Grazie a todos
saluti Dario

[Myaku]

qui non parliamo di codice, vediamo se quello che chiedi si può fare via html5 ed eventualmente che limiti ci sono a livello di compatibilità crossbrowser.
ti sposto

[fcaldera]

se devi mantenere per forza il formato vettoriale devi usare per forza svg e javascript e sinceramente non ho idea dell'ordine di grandezza del tempo necessario per fare animazioni svg (mai fatte)

se non è così necessario mantenere il formato vettoriale, se hai voglia di perdere (relativamente) poco tempo suggerisco di usare le animazioni di jQuery da mettere in sequenza altrimenti se non ti interessa il supporto di IE e hai tempo di sperimentare potresti considerare le animazioni/transizioni in puro CSS

[Icarus8]

Scusate per l'errore di categoria :P

Per la questione tempo, è a mio favore, il lavoro è per me stesso quindi ci posso investire tutto il tempo e le risorse che ho a disposizione.

Il vettoriale non è un must, ma da grafico stampatore so che se un tizio aprisse il mio sito su uno schermo 50pollici (ricordo che vorrei che l'animazione si espandesse sempre a schermo intero) l'unico modo per non spixellare tutto e il vettoriale, almeno per la grafica stampata, se così non fosse per il web correggetemi pure.

L'idea di Canvas e HTML5 mi stimola molto, mi piace sperimentare.

e mi sono dimenticato di scrivere una cosa molto importante, al momento non sono in grado di esportare la mia forma vettoriale disegnata in illustrator CS5 per inserirla dentro una pagina web

Mi piacerebbe avere una discreta compatibilità, ma il punto più importante e vedere questa animazione su iOS

qualsiasi guida che mi aiuti a essere meno ignorante durante questo confronto di idee e ben accetta

[morocarlo]

Hai pensato di utilizzare qualcosa come adobe EDGE? E' ancora in beta ma qualche animazione di base riesci a farla facilmente.

[Icarus8]

ho preso qualche plug-in che da i'llustrato con vettori semplici mi salva direttamente codice HTML pronto da inserire dentro il tag Canvas, quindi già so fare apparire le immagine in una pagina html nella posizione che deisdero.

Edge non lo conosco ma ora mi informo un po e vediamo che fa.

Nel frattempo ho una domanda posso inserire 4 tag canvas all'interno di un canvas più grande?

Domanda il codice esportato è una serie di coordinate per le linee che formano la mia shape, ma sono dei punti specifici, c'è qualche modo per applicargli un resize automatico a seconda della risoluzione dello computer sul quale è visualizzato? perchè vorrei che l'animazione si vedesse sempre a schermo intero

[Icarus8]

Adobe Adge anche se ancora molto limitato, sembra fare il lavoro richiesto.
la grafica rimane vettoriale, viene ridisegnata live ad ogni ingrandimento.
Ho qualche problema con il resize e align. qual'è il tag in HTML5 per allineare al centro? se aggiungo l'attributo al tag canvas non ottengo nessun risultato. width e eight 100% non sembrano funzionare qualche suggerimento?

[morocarlo]

l'align se non erro è stato deprecato, usa float..

Per width e height prova a controllare meglio, in alternativa potresti creare 2-3 versioni e poi mostrare la migliore in base alla dimensione dello schermo, si può fare con l'html5

[Icarus8]

ragazzi nell'html ho

<body>
<div class="animation"></div>
</body>

collegato al CSS

body
{
background-color:#000000;
margin:0; padding:0;
}

.animation
{
background-color:#ffffff;
height:80px; width:80px;
margin:5px;
}

come do al DIV heigh e widht con resize automatico per essere grande quando tutta la finestra, ovviamente se rimpicciolisco la finestra si rimpicciolisce in scala anche il div senza fa apparire scroll bar e deve stare centrato verticalmente e orizzontalmente.

Dentro questo poi vorrei inserire il Tag canvas con l'animazione.

[morocarlo]

height:100%;
width:100%;
margin: auto;