Flash CS3: creare un effetto Reflex su qualsiasi MovieClip

Sfruttando una notevole caratteristica di Actionscript 3.0 (vedi Actionscript 3.0: tutto con l’operatore new) ho creato una classe ReflexMe in grado di generare un effetto “riflessione” su un qualsiasi MovieClip presente in libreria.

Loading Flash Player...

Il sorgente fa parte del pacchetto undolibrary – presente su GoogleCode – ma se volete potete scaricare il singolo file ReflexMe.as.


Utilizzo

Scaricate il file ReflexMe.as e posizionatelo nella cartella del vostro filmato .fla. Selezionate nella libreria il MovieClip a cui volete applicare l’effetto reflex e aprite la finestra delle proprietà simbolo. Nella sezione Concatenamento inserite ReflexMe nel campo Classe base:

Proprietà MovieClip

A questo punto, provando il filmato, il MovieClip selezionato avrà l’effetto reflex. Se al MovieClip date un nome di istanza potrente anche regolare alcuni parametri come:

  • reflexOffset – distanza del riflesso
  • gradientOffset – l’estenzione del gradiente riflesso
  • alphaOffset – il canale alpha del riflesso
  • gradientRadial – tipo di riflesso: radiale o lineare

Note

La classe ReflexMe.as è scritta come classe base per estendere un qualsiasi MovieClip. La sua semplicità è tale e disarmante che potete riaddatarla anche come codice “spurio” da utilizzare da codice, invece che dall’IDE Flash. Tutto l’effetto è generato dalle poche (tolti i commenti) righe di codice che seguono:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// preservo le dimesioni orginali del MovieClip
__oWidth                  = this.width;
__oHeight                 = this.height;
// creo una BitmapData delle dimesioni del
// MovieClip a cui voglio applicare l'effetto reflex
__bmpd                    = new BitmapData( this.width, this.height, true, 0x000000);
// copio il MovieClip sulla BitmapData
__bmpd.draw( this );
// creo un oggetto Bitmap per la visualizzazione
// questo sarà il nostro effetto reflex
__bmp                     = new Bitmap( __bmpd );
// lo visualizzo
addChild( __bmp );
// lo ruoto di 180 gradi: lo inverto
__bmp.scaleY              = -1;
// lo posiziono alla base del MovieClip oroginale
// il x 2 sull'altezza è necessario a casua della
// rotazione che ha spostato l'origine degli assi
__bmp.y                   = __oHeight*2 + __reflexOffset;
// cache come bitmap: necessario per mascherare dopo
// con effetto gradiente e alpha channel
__bmp.cacheAsBitmap       = true;
// creo una maschera
__mask                    = new Shape();
// cache come bitmap: necessario per mascherare dopo
// con effetto gradiente e alpha channel
__mask.cacheAsBitmap      = true;
// posiziono anch'essa sopra l'immagine riflessa
__mask.y                  = __oHeight + __reflexOffset;
// creo una matrice per il gradiente
__matrix                  = new Matrix();
// creo il gradiente delle stesse dimensione del
// MovieClip originale
__matrix.createGradientBox(__oWidth, __oHeight, Math.PI/2);
with( __mask.graphics ) {
    clear();
    beginGradientFill( GradientType.LINEAR, [0x000000,0x000000], [__alphaOffset, 0], [0, __gradientOffset], __matrix);
    drawRect(0, 0, __oWidth, __oHeight);
    endFill();
}
addChild( __mask );
// imposto maschera
__bmp.mask                = __mask;

17 commenti a: “Flash CS3: creare un effetto Reflex su qualsiasi MovieClip”

  1. 05 giu, 2008 Marco:

    ciao ho provato ha utilizzare questa classe ma mi da degli errori.

    ti dico il procedimento che ho fatto, cosi magari mi puoi dire se, e dove sbaglio.

    -creo un nuono documento in as3,
    -disegno un semplice quadrato, e lo trasformo in movieclip;
    -nella libreria tasto destro sul simbolo, nella sezione Concatenamento inserisco ReflexMe nel campo Classe base;
    -logicamente ho salvato il file fla nella stessa cartella dove si trova ReflexMe.as

    però mi da questi errori:
    -errore 1017 impossibile trovare la definizione della classe base ReflexMe;
    -5000: La classe ‘ReflexMe’ deve essere una sottoclasse di ‘flash.display.MovieClip’ perché è collegata a un simbolo di libreria di quel tipo;
    -5001: Il nome del pacchetto ‘undolibrary.sfx’ non riflette la posizione del file. Modificare il nome della definizione del pacchetto all’interno del file o spostare il file. C:\Documents and Settings\Utente\Desktop\ReflexMe.as

    dove sbaglio? cosa devo fare??
    ti ringrazio in anticipo.
    ciao!

    RispondiQuota
  2. 05 giu, 2008 Giovambattista Fazioli:

    @Marco: se usi il file ReflexMe.as al di fuori della libreria undolibrary devi modificare il “namespace” del package. All’inizio del file trovi “package undolibrary.sfx”, elimina il namespace “undolibrary.sfx”, in pratica lascia solo “package {” – con la graffa :)

    RispondiQuota
  3. 13 giu, 2008 Reflex e ReflexMe: da Classe base a Classe | Undolog.com:

    [...] post Flash CS3: creare un effetto Reflex su qualsiasi MovieClip avevamo visto com’è possibile scrivere una classe, che estende un MovieClip, per collegarla a [...]

  4. 09 lug, 2008 Linus:

    Complimenti per il sito web meraviglioso. Volevo sapere se ho dato un nome istanza al mio movieclip come posso accedere alle proprietà reflexOffset etc.
    Grazie

    RispondiQuota
  5. 10 lug, 2008 Giovambattista Fazioli:

    @Linus: puoi utilizzare miaistanza.reflexOffset per accedere a tutte le proprietà. Quando usi la classe Reflex estendi, di fatto, le caratteristiche del MovieClip base. Questo significa che il MovieClip ottiene tutte le proprietà e i metodi della classe Reflex.

    RispondiQuota
  6. 03 ago, 2008 carlitos:

    Ciao a tutti quelli che stanno leggendo il mio messaggio. Volevo chiedere a qualcuno di voi, se mi insegnaste come creare i sottomenu su flash cs3. Io ho cercato su internet, ma non so come si faccia. Per favore mi potreste aiutare? Il mio contatto è: sicilianofolle@hotmail.it
    attendo in molti grazie!

    RispondiQuota
  7. 04 ago, 2008 Giovambattista Fazioli:

    @Carlitos: esattamente cosa ti serve?

    RispondiQuota
  8. 08 mar, 2010 alberto:

    @Giovambattista Fazioli:
    1017: Impossibile trovare la definizione della classe base Reflex.
    5000: La classe ‘ReflexMe’ deve essere una sottoclasse di ‘flash.display.MovieClip’ perché è collegata a un simbolo di libreria di quel tipo.
    sono gli errori nel tentativo help please
    grazie alberto

    RispondiQuota
  9. 08 mar, 2010 Giovambattista Fazioli:

    @alberto: devi posizionare la classe Reflex (il punto .as) nella stessa cartella del tuo .fla

    RispondiQuota
  10. 08 mar, 2010 alberto:

    @Giovambattista Fazioli: ovviamente era gia posizionato nella stessa cartella del mio fla.

    RispondiQuota
  11. 08 mar, 2010 Giovambattista Fazioli:

    @alberto: modifica l’inizio della classe:

    1
    package undolibrary.sfx {

    in semplicemente:

    1
    package {
    RispondiQuota
  12. 08 mar, 2010 alberto:

    @Giovambattista Fazioli: l avevo gia fatto risultato uguale

    RispondiQuota
  13. 21 ago, 2011 Luca:

    Sono nella stessa situazione di alberto… non funziona!!

    RispondiQuota
  14. 21 ago, 2011 Luca:

    Cioè, se vedi il codice reflexMe.as che hai postato non c’è scritto quais nulla dentro
    Secondo me hai sbagliato a scrivere l’articolo

    RispondiQuota
  15. 30 ago, 2011 Giovambattista Fazioli:

    @Luca: no, il codice e l’articolo non sono sbagliati. Il problema è nell’inclusione della libreria undolibrary. Leggere qui per dettagli

    RispondiQuota
  16. 30 ago, 2011 Luca:

    vabbè, tu avevi detto che bastava scaricare il reflexMe.as

    cmq nel frattempo ho trovato un’altra classe che crea l’effetto riflesso e funziona egregiamente anche con MC animati

    RispondiQuota
  17. 31 ago, 2011 Giovambattista Fazioli:

    @Luca: poteva essere frainteso effettivamente. In realtà questa classe si basa (cioè vuole) sulla libreria undolibrary. Se già installata si può scaricare solo il file indicato, altrimenti se scarichi l’ultima versione trovi tutto nel pacchetto.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA