Salta al contenuto principale
Working from scratch, following simplicity

Spritely: esempio pratico in 4 passaggi

Una volta superato lo scoglio dell'installazione di spritely in Drupal (come visto nel precedente articolo) o in qualsiasi sito web, si può iniziare a creare ed inserire animazioni nel layout o nella propria pagina. In questo esempio spiegherò come creare una animazione per un articolo qualsiasi, con però un'amara sorpresa finale.

Per prima cosa bisogna assicurarsi che spritely sia perfettamente integrato e caricato in Drupal 7.x o nella pagina php che dovrà visualizzare le animazioni. Lo si può fare direttamente dal proprio browser cliccando con il tasto destro una qualsiasi porzione della pagina che non contenga grafica o flash e scegliendo il comando del menu a tendina "Sorgenti della pagina" o "visualizzare il sorgente" (a seconda del tipo di browser che si usa il comando può variare ma sempre di sorgente si tratta!).

Ad ogni modo ci devono essere le seguenti due stringhe che caricano jquery e jquery.spritely, nel mio caso sono:

< script type="text/javascript" src="http://rainnic.altervista.org/misc/jquery.js?v=1.4.4"></script>
[...]
 src="http://rainnic.altervista.org/sites/all/themes/rainnic/js/jquery.spritely-0.6.js?m5ii5v">
</script >

Se dovesse mancare spritely (jquery viene caricato in default su Drupal 7) o avere un indirizzo sbagliato bisognerà rivedere l'installazione dal pannello dell'amministratore o come nel mio caso controllare il "sotto_tema_abilitato.info", come spiegato nell'articolo introduttivo (Spezza la monotonia con spritely!).

Attenzione:
Per poter inserire negli articoli di Drupal codice javascript, css e php, bisogna scegliere PHP code nel formato del testo (per abilitarlo basta andare come amministratore in "admin/people/permissions" e spuntare la casella "Usa il formato del testo PHP code")
Evitare di usare le stesse etichette dichiarate nel foglio di stile usato per il proprio tema, altrimenti si animeranno le loro!

I 4 passaggi

Si possono riassumere in:

  1.  creazione dell'immagine PNG con i necessari frame;
  2. codice CSS per posizionamento e caricamento dell'immagine nella pagina;
  3. codice Javascript per l'animazione vera e propria;
  4. codice HTML per l'inserimento nell'articolo.

L'immagine PNG

Il formato PNG permette la trasparenza ed è vettoriale, quindi creando immagini definite da forme geometriche non perde qualità scalandolo e soprattutto è poco ingombrante al contrario del GIF per esempio. Per questo esempio ripropongo una vecchia animazione del mio logo che volevo inserire al posto di quella fissa nelle pagine del sito, poi per fortuna ho desistito, ma non buttando mai via niente è tornata utile per questo articolo. Eccola:

Immagine dimensionata per spritely

 Ho evidenziato le dimensioni dei singoli frame, perché devono essere multipli esatti dell'immagine finale. In questo caso ho 4 frame da 100x125 pixel, quindi l'immagine finale sarà da 400x125px.

Il codice CSS

Le dimensioni dell'immagine servono anche per la scrittura del foglio di stile. Infatti nel primo contenitore chiamato con molta fantasia stage_rainnic inserirò il posizionamento nella pagina e le dimensioni. In questo caso con position: relative lascio che venga visualizzata nel punto esatto dove inserirò il corrispettivo div. Se volessi forzare il suo posizionamento allora dovrei usare position: absolute e fornire le coordinate esatte.

Questo è il codice:

<style type="text/css">
        #stage_rainnic {
            top: 0px;
            left: 0px;
        }
        .stage_rainnic {
            position: relative;
            top: 0px;
            left: 0px;
            width: 400px;
            min-width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #rainnic {
            position: relative;
            top: 0px;
            left: 0px;                     
            
			width: 100px;
			height: 125px;
			
            background: transparent url(http://rainnic.altervista.org/sites/default/files/images/logo_spritely.png) 0 0 no-repeat;
        }
</style>

Ovviamente l'immagine va inserita nella corrispondente directory remota e lo si può fare con un qualsiasi programma FTP.

Il codice Javascript

Per prima cosa bisogna informare l'interprete che si sta per inserire codice Javascript e allora si scriverà:

<script type="text/javascript">

Poi tocca a jQuery ed in questo caso il codice sarà:
        (function($) {
            $(document).ready(function() {

Subito dopo va inserita la stringa per spritely che nel mio caso è la seguente:

                $('#rainnic').delay(0).sprite({fps: 1, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0});

Ovviamente jQuery e spritely permettono moltissimi altri effetti e loro combinazioni, consiglio quindi di leggere la documentazione nel sito di spritely per ulteriori idee ed esempi. Infine si chiude il tutto con:

                         });
        })(jQuery);
</script>

Purtroppo in Drupal le cose si complicano e per inserire un effetto jQuery all'interno di un contenuto, bisognerebbe aggiungere un elemento DOM in questo modo:

<?php
drupal_add_js (
    'codice adattato per l'effetto con jQuery' ,'inline');
?>

L'ho scoperto cercando di capire perché il mio codice non funzionasse a dovere (ma il problema era legato al tema del layout, non a questo plugin) e ho trovato utili informazioni in questo articolo: HOWTO: Add a jQuery effect.

Il codice HTML

A rigore tutti i precedenti codici dovrebbero essere caricati all'interno del tag head della pagina, ma una operazione del genere con Drupal per un solo articolo diventa oltre modo laboriosa, si dovrebbe customizzare un template per una singola pagina, assurdo!

Detto questo il codice è semplicemente questo:

<div id="stage_rainnic" class="stage_rainnic">
     <div id="rainnic" class="stage_rainnic"></div>
</div>

Volendo si può agire sul codice css per aggiungere altre proprietà come l'allineamento, la disposizione, eventuali bordi, etc.

Risultato finale

Codice finale

<!-- ######## ANIMAZIONE CON SPRITELY ######## -->
<style type="text/css">
        #stage_rainnic {
            top: 0px;
            left: 0px;
        }
        .stage_rainnic {
            position: relative;
            top: 0px;
            left: 0px;
            width: 400px;
            min-width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #rainnic {
            position: relative;
            top: 0px;
            left: 0px;                     
            
			width: 100px;
			height: 125px;
			
            background: transparent url(http://rainnic.altervista.org/sites/default/files/images/logo_spritely.png) 0 0 no-repeat;
        }
</style>

<script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('#rainnic').delay(0).sprite({fps: 1, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0}); 
                         });
        })(jQuery);
</script>

<div align="center">
  <div id="stage_rainnic" class="stage_rainnic">
       <div id="rainnic" class="stage_rainnic"></div>
  </div>
</div>
<!-- ######## ANIMAZIONE CON SPRITELY ######## -->

Tutto sembra funzionare a dovere ma per motivi che ancora non riesco a decifrare, ma l'animazione del logo salta due frame e sotto alla sezione dedicata ai commenti, ricompare una porzione di testo dell'articolo... la causa l'ho scoperta, ora si tratta di trovare il codice corretto per far funzionare il tutto. Nell'articolo conclusivo su spritely, spiego l'errore che mi dava tutti questi grattacapi e un altro modo per inserire la stessa animazione usata qui.

Aggiungi un commento

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web ed indirizzi e-mail diventano automaticamente dei link.
  • Linee e paragrafi vanno a capo automaticamente.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Aggiungi un commento

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web ed indirizzi e-mail diventano automaticamente dei link.
  • Linee e paragrafi vanno a capo automaticamente.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Sponsored Links
Pubblicità

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.