Maschere e preload

8 settembre 2006

Mascherare il preload

La comparsa graduale del rettangolo non è molto più originale della barra orizzontale. Usiamo una maschera per migliorare le cose. Una possibilità è quella di creare un preload “a tema”, basandoci sull’argomento trattato dal sito o dall’animazione in flash.

Ad esempio, supponiamo di avere a che fare con un’animazione che mostra grafici e statistiche: potremmo creare un preload con l’aspetto di un grafico!

Creiamo un secondo livello sulla linea temporale e disegniamo delle barre orizzontali a intervalli regolari

Figura 6. “Barre” create sul rettangolo iniziale

È possibile scaricare l’esempio sviluppato fino a questo punto.

Simulando il download il progressivo caricamento fa apparire le barre del grafico. Qualora volessimo visualizzare il riempimento delle barre da sinistra verso destra sarebbe sufficiente modificare il codice in questo modo.

Listato 2. Barre da sinistra a destra

stop();
rapporto = mc._width / 100;
mc._width = 0;
_root.onEnterFrame = function(){
    caricati = this.getBytesLoaded();
    totali = this.getBytesTotal();
    perc = (caricati/totali)*100;
    mc._width = perc*rapporto;
    trace(perc);

    if(perc == 100){
        delete this.onEnterFrame;
        this.gotoAndPlay(2);
    }
}

In questo modo il rettangolo apparirà gradualmente in larghezza, di conseguenza le barre che compongono la maschera sembreranno riempirsi gradualmente. È bastata una semplice modifica al codice per cambiare aspetto al nostro preload!

È possibile scaricare l’esempio sviluppato fino a questo punto.

Al posto delle barre possiamo usare un qualsiasi disegno, ad esempio utilizzando il pennello possiamo creare un tracciato astratto e ottenere un risultato come quello in figura.

Figura 7. Preload con disegno astratto

Preload con disegno astratto

Mascherare con i testi

Un’altra possibilità è quella di sfruttare i testi: supponiamo di voler creare un preload con il nome del nostro sito, che magari è scritto con un font particolare. Sarà sufficiente scrivere sul livello maschera il nome, usando il font desiderato, quindi selezionare il testo scritto e premere due volte Ctrl + B (oppure utilizzare per due volte il comando Break apart dal menu Modify): questo fa si che il testo scritto venga convertito in forme vettoriali e quindi utilizzabili come maschera. I testi infatti non sono nativamente supportati dai livelli maschera, ma convertendoli in vettoriale come descritto si otterrà il risultato voluto.

Figura 8. Preload con maschera testuale

Preload con maschera testuale

È possibile scaricare l’esempio sviluppato fino a questo punto.

Se vuoi aggiornamenti su Maschere e preload inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Maschere e preload

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing