Creare una Maschera sfumata in Flash

- Letture: 3.200

Oggi vedremo come creare una maschera sfumata.

Prima di tutto per realizzare un progetto simile dobbiamo usare una versione di flash 8 o superiore.

  • Cos’è un livello maschera in Flash?

I livelli maschera sono un ottima funzione per produrre effetti tipo riflettore.
Attraverso una maschera, applicata ad un livello, si possono vedere solo certi oggetti dello stage mentre si svolge il filmato.

  • Cos’è che cambia da una maschera normale?

La maschera deve essere effettuata sul livello, applicata tramite actionscript, indicando sia la maschera che l’oggetto mascherato, le quali dovranno essere dei movieclip.

Una cosa molto importante da fare, è di spuntare il check-box “Usa caching bitmap in runtime” nel pannello proprietà.

Vediamo come procedere per creare una maschera sfumata con Flash 8

Per creare questo effetto dovremo utilizzare il metodo setMask, vediamo come funziona:

Questa è la sintassi:

filmato_mc.setMask(mask_mc);

  • filmato_mc: E’ un clip filmato di nome istanza filmato_mc che verà mascherato.
  • mask_mc: E’ un clip filmato di nome istanza mask_mc che verrà usato come maschera.

Quindi tornando all’esempio, filmato_mc potrebbe essere un clip filmato con dentro un’immagine e mask_mc un clip filmato con un’animazione al suo interno, che viene utilizzata come maschera.

Infine per annullare una maschera creata con ActionScript, basterà passare il valore null al metodo setMask() senza incidere sul livello, in questo modo:

filmato_mc.setMask(null);

Scarica il sorgente
Guarda il Tutorial

File e source di Pasavign

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

21 Commenti

  1. @floppy ciao non riesco a capire se la tua domanda sia provocatoria o meno comunque ecco l’elenco dei tutorials flash per ora sul blog, fatti da me a grande richiesta:

    Apertura di una popup da Flash
    Banner Random in Flash
    Classe Key
    Classe Sound();
    Classe Tween
    ComboBox Flash
    Creare pulsanti Web 2.0 con Flash 8
    Dynamic Gallery con miniature scorrevoli
    duplicateMovieClip – Duplicare oggetti
    Flash con sfondo trasparente
    Flash e Database MySQL
    Flash e Lightbox
    Flash Overlay: Scrivere sull’HTML
    FLVplayer dinamico con playlist
    FLVPlayer Dinamico Liquido
    Galleria dinamica v1 in Flash
    Google in Flash
    Intercettare Inattività dell’USER
    iPodPlayer in Flash: Nuova versione
    iPodPlayer – Riproduttore Mp3
    LoadMovie in coordinate dinamiche
    _lockroot: a cosa serve? Come funziona?
    Mini Player Mp3 in Flash
    Newsletter: Gestione in Flash
    News verticali dinamiche in Flash
    PageFlip e LightBox
    Preloading Flash stile Windows Vista
    Quiz in flash
    Seguire il mouse con effetto decellerato
    Stage Resize – Resize automatico
    Trascinare un oggetto
    Pulsante trasparente

    Non ho messo il link perchè non mi sembrava il caso di perdere tempo…

  2. Julius > Sinceramente penso che sei 1 persona che davvero le sa le cose, infatti, non è la prima volta che su “richiesta” mi aiuti a risolvere 1 problema!

    E per la maskera sfumata! davvero 1 cosa utile! Grazie anche per aver uppato il sorgente!

  3. Pingback: Don’t Break My Ball: Scegli il vincitore! « JuliusDesign

  4. Microcipcip

    Ciao, ho un problema con questo tutorial. Ho provato a ricrearlo usando immagini differenti, però quando clicco sul pulsante l’immagine che appre non è sfumata! Come maschera ho usato un cerchio con gradiente radiale, il gradiente ha l’opacità settata a 0% nel bordo esterno, ma continuo a vedere l’immagine senza la sfocatura. Sai dirmi perchè?. Grazie in anticipo.

  5. ciao,
    magari hai gia risposto, ma non ho trovato nulla per ora.
    ho lavorato sul sorgente, ma se voglio usare la stessa maschera per nascondere altre immagini oltre la prima?
    quando lo faccio non sembra piu funzionare e vedo la maschera colorata…
    grazie
    ilaria

  6. pero , in flash mx 6.0 , non il checkbox “Usa caching bitmap in runtime”

    come posso fare (Senza scaricare la versione nuova) a farlo ?

  7. Pierpaolo

    Ciao, vorrei imparare a fare questo tipo di maschera, ma devo ammettere che nonostante non sia solo alle basi e il tutorial è spiegato bene, non riesco a realizzarla, mi daresti una mano con le specifiche passo passo da fare???
    con un elenco numerato su cosa fare in ordine, grazie

  8. CIAO JULIUS…COME FACCIO A DIRE ALLALBERO CHE DEVE USCIRE SENZA IL PULSANTE??
    MI SERVE CHE APPENA PARTE IL MOVIE ESCE FUORI…

  9. @SARA: Ciao sara!

    Livello Layer6 primo frame sostituisci tutto con

    this.onLoad = function() {
    this.tree.setMask(this.mask);
    this.mask.play();
    };

  10. Ciao a tutti sono nuovo e alle primissime armi, ma vorrei creare una banner dove al posto dell’albero devo far crescere una casa ho provota con le guide presenti nel sito e cercando in internet ma non sono riuscito a fare niente. mi sapete indicare una guida passo passo per ottenere questo effetto?

    grazie mille

  11. Resta un mistero per uno che di script non capisce una mazza come si fa a:

    1) rendere invisibile l’albero già dal primo frame, ovvero a farlo comparire da zero;

    2) come avviare l’animazione in automatico senza bisogno del click sul pulsante.

    Qualcuno può aiutarmi?

  12. Roger ha scritto:

    this.onLoad = function() {
    this.tree.setMask(this.mask);
    this.mask.play();
    };

    ———–

    Pur applicando la modifica che hai proposto a Sara l’albero si vede ugualmente per una frazione di secondo (ovvero al primo frame).

    Sto cercando di utilizzare questo trucco come transizione a tendina tra una clip e l’altra ma per fare questo la timeline deve essere inserita in una altra timeline dov’è presente una clip precedente.

    Così facendo avviene una cosa molto strana, ovvero che prima che la maschera faccia l’effetto previsto la si vede passare una volta con il suo colore originale nascondendo la scena.

    C’è un modo per risolvere questo baco?

  13. Ancora non mi è chiara una cosa..questo valore qui:

    filmato_mc.setMask(null);

    che si serve per bloccare l’actionscript, dove devo metterlo se volgio che la mia sfumatura mi parta in automatico indipendentemente dal pulsante?

  14. ilaria ha scritto:

    ciao,
    magari hai gia risposto, ma non ho trovato nulla per ora.
    ho lavorato sul sorgente, ma se voglio usare la stessa maschera per nascondere altre immagini oltre la prima?
    quando lo faccio non sembra piu funzionare e vedo la maschera colorata…
    grazie
    ilaria

    ma in questa situazione:
    this.onLoad = function() {
    this.tree.setMask(this.mask);
    this.mask.play();
    };

    che ho cambiato con
    this.onLoad = function() {
    this.tree2.setMask(this.mask2);
    this.mask2.play();
    };
    cambiando anche il nome istanza alla maschera e al mc…
    ma la maschera non viene applicata… cosa sbaglio!?
    Ho lo stesso problema…

  15. Ciao!
    ho scaricato il sorgente, e attivato la maschera togliendo il pulsante. Ho bisogno però di un filmato in loop, però quando ricomincia la maschera non funziona più…

    Come si fa’?
    Grazie mille per il tutorial!

  16. Ciao e complimenti innanzitutto x il tuo blog!
    Conosco pochissimo Flash ed avrei bisogno di un aiutino sempre se puoi.
    Mi chiamo Simone ed avrei la necessità di creare una “X” che compaia, stile spray.., sopra alcuni video che faccio scorrere in una semplicissima animazione che ho fatto in Flash8. Puoi darmi una mano?.. grazie mille.

Commenti