Flash CS3: creare un effetto Reflex su qualsiasi MovieClip

Mercoledì 4 Giugno, 2008

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:

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

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

  1. Giovedì 05 Giugno, 2008 alle 18:57
    Marco ha detto:

    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!

  2. Giovedì 05 Giugno, 2008 alle 19:05
    Giovambattista Fazioli ha detto:

    @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 :)

  3. Venerdì 13 Giugno, 2008 alle 00:02
    Reflex e ReflexMe: da Classe base a Classe | Undolog.com ha detto:

    [...] 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. Mercoledì 09 Luglio, 2008 alle 16:39
    Linus ha detto:

    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

  5. Giovedì 10 Luglio, 2008 alle 11:17
    Giovambattista Fazioli ha detto:

    @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.

  6. Domenica 03 Agosto, 2008 alle 17:17
    carlitos ha detto:

    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!

  7. Lunedì 04 Agosto, 2008 alle 11:31
    Giovambattista Fazioli ha detto:

    @Carlitos: esattamente cosa ti serve?

Lascia un commento

Puoi utilizzare i seguenti TAG XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>