Animare una tenda con Spritely
In questo tutorial spiegherò come ricreare l'effetto del vento su di una tenda, per utilizzarlo poi come sfondo sulla testata di un sito che sto aggiornando. Dosando opportunamente le sfumature del tendaggio, le ombre e l'ondulazione nella parte terminale si riesce a simulare un discreto movimento che nonostante alcune sbavature rende più dinamico il layout della pagina.
Ebbene si, non ho resistito e in questo periodo di ferie e calura sto tentando di aggiornare il mio vecchio sito sulla Legione Romana per portarlo in Drupal sfruttando quanto ho appreso e realizzato negli ultimi mesi. Questa animazione la volevo già inserire nella prima versione che era realizzata in Flash, ma il file SWF finale era troppo pesante e scadente così ho desistito.
Invece Spritely mi ha permesso con pochi passaggi e con due file PNG (realizzati interamente con Inkscape, 9 kB in tutto!) di superare tutti gli ostacoli precedenti. Per prima cosa mi sono munito di carta e penna e ho abbozzato l'animazione. Riporto una parte dello schizzo (la più comprensibile) quindi figuratevi le altre!
Nella bozza si vedono le due parti che costituiranno i rispettivi PNG:
- il tessuto della tenda definito da una sfumatura che si inscurisce o schiarisce a seconda della piegatura rispettivamente verso l'interno o l'esterno;
- la parte terminale dove a predominare è l'ondulazione e l'ombra sullo sfondo (non pianificata inizialmente).
La tenda
Sono partito dal colore dello sfondo originale e dosando il gradiente lineare ho riempito i 4 frame che costituiscono l'animazione vera e propria. Per aver un maggiore controllo li ho ulteriormente divisi a metà, ma solo per una migliore interazione e modellazione con la parte terminale.
DISEGNO QUOTATO | DISEGNO FINITO |
La parte terminale
Questa animazione mi ha impegnato maggiormente, soprattutto la modellazione e la scelta degli effetti, ma il risultato finale ne è valso la pena:
DISEGNO QUOTATO | DISEGNO FINITO |
Questi invece sono i passaggi più significativi con Inkscape:
Disegno dei rettangoli | Assemblaggio | Conversione in bitmap dell'assemblaggio (Modifica --> crea una copia Bitmap); effetto ondulazione sul bitmap (Estensioni --> Bitmap --> Ondulazione...) |
Sovrapposizione con parte del tendaggio superiore | Riconversione in vettoriale (Tracciato --> Vettorizza bitmap - opzione colori) | Aggiunta dell'ombra (Filtri --> Ombre e aloni --> Proietta ombra...) |
Inserimento in Drupal
Senza ripetere quanto descritto nell'articolo Spezza la monotonia con spritely! riporto quanto ho aggiunto in style.css e page.tpl.php.
In style.css
#stage { top: 0px; left: 0px; } .stage { position: absolute; top: 0px; left: 0px; width: 100%; min-width: 100%; height: 100px; overflow: hidden; } #sfondo { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: transparent url(../images/sfondo.png) repeat; } #stage_finale { top: 100px; left: 0px; } .stage_finale { position: absolute; top: 0; left: 0px; width: 100%; min-width: 100%; height: 75px; overflow: hidden; } #finale_sfondo { position: absolute; top: 0; left: 0px; z-index: 1; width: 100px; height: 75px; background: transparent url(../images/parte_dorata.png) repeat; }
In page.tpl.php (l'ho inserito dopo <div id="page-wrapper"><div id="page"> per poter avere lo sfondo a tutta pagina)
<script type="text/javascript"> (function($) { $(document).ready(function() { $('#sfondo').sprite({fps: 1, no_of_frames: 4}); }); })(jQuery); (function($) { $(document).ready(function() { $('#finale_sfondo').sprite({fps: 1, no_of_frames: 4}); }); })(jQuery); </script> <div id="contenitore_spritely"> <div id="stage" class="stage"> <div id="sfondo" class="stage"></div> </div> <div id="stage_finale" class="stage_finale"> <div id="finale_sfondo" class="stage_finale"></div> </div> </div>
Lo si può vedere in funzione direttamente nel sito della Legione Romana e qui sotto (ho riportato solo la parte terminale cambiando il percorso dell'immagine e i descrittori per non avere dei doppioni):
Questo è il codice:
<!-- ######## ANIMAZIONE CON SPRITELY ######## --> <style type="text/css"> #terminale { top: 0px; left: 0px; } .terminale { position: absolute; top: 0; left: 0px; width: 100%; min-width: 100%; height: 75px; overflow: hidden; } #terminale_sfondo { position: absolute; top: 0; left: 0px; z-index: 1; width: 100px; height: 75px; background: transparent url(http://rainnic.altervista.org/sites/default/files/styles/large/public/images/parte_dorata.png) repeat; } </style> <script type="text/javascript"> (function($) { $(document).ready(function() { $('#terminale_sfondo').sprite({fps: 1, no_of_frames: 4}); }); })(jQuery); </script> <div> <div id="terminale" class="terminale"> <div id="terminale_sfondo" class="terminale"></div> </div> </div> <!-- ######## ANIMAZIONE CON SPRITELY ######## -->
Commenti
Grazie per i consigli, in
Grazie per i consigli, in effetti l'avevo realiazzato in economia, temendo di generare due PNG pesanti e lenti da caricare. Quando avrò un po' di tempo realizzerò un unico PNG con una migliore risoluzione e più frame.
Aggiungi un commento