Cristalab

Clase de ActionScript 3 para añadir sombras a MovieClips

Por: Zguillez + 14.08.2007

Esta es una sencilla clase de ActionScript 3 que he escrito para añadir y modificar fácilmente sombras a MovieClips.

Lo que hago básicamente es implementar la clase DropShadowFilter para añadirle un filtro de sombra al clip.

Primero de todo crearemos la clase e importaremos los packages que necesitaremos:

Código :

package
{
   import flash.display.Sprite;
   import flash.filters.BitmapFilter;
   import flash.filters.BitmapFilterQuality;
   import flash.filters.DropShadowFilter;
   //------------------------------------------
   public class Sombra extends Sprite
   {
      private var _ruta:Sprite;
      private var _clip:Object;
      //------------------------------------------
      public function Sombra(clip:Object)
      {
         _ruta = clip.parent;
         _clip = clip;
      }
}

Como vemos, la clase la extenderemos de la clase Sprite, y desde el constructor le pasaremos la referencia del MovieClip al que le queremos añadir la sombra.

Crearemos dos funciones privadas, una en la que añadiremos los valores por defecto para el filtro de sombra "iniSombra()"

Código :

private function iniSombra():void
{
   _color = 0x000000;
   _angulo = 45;
   _alfa = 0.7;
   _blurX = 5;
   _blurY = 5;
   _distancia = 5;
   _strength = 0.65;
   _inner = false;
   _knockout = false;
   _calidad = BitmapFilterQuality.HIGH;
}

Y otra función para crear la instancia de la sombra "update()". Aqui creamos la instancia de la clase DropShadowFilter que será la que aplique el filtro al MovieClip

Código :

private function update():void
{
   _filtros = new Array();
   _sombra = new DropShadowFilter(_distancia,_angulo,_color,_alfa,_blurX,_blurY,_strength,_calidad,_inner,_knockout);
   _filtros.push(_sombra);
   _clip.filters = _filtros;
}

Estas dos funciones serán llamadas desde el constructor de la clase

Código :

public function Sombra(clip:Object)
{
   _ruta = clip.parent;
   _clip = clip;
   iniSombra();
   update();
}

Llegados a este punto la clase ya es funcional, pero con valores por defecto. Así que añadiremos unos setters para poder modificar los parámetros del filtro.

Código :

public function set color(color:Number):void
{
   _color = color;
   update();
}

Haremos una función para cada parámetro.

En todas estas funciones haremos una llamada a la función "update()" para que cada vez que modifiquemos un parámetro se actualice el filtro de sombra.

Y listo miau

Para utilizarlo en nuestro .fla sería así:

Código :

import Sombra;
var sombra1:Sombra = new Sombra(logo1);
var sombra2:Sombra = new Sombra(logo2);
var sombra3:Sombra = new Sombra(logo3);
sombra2.blurX = 15;
sombra2.blurY = 15;
sombra2.angulo = 90
sombra2.distancia = 20;
sombra3.alfa = 1
sombra3.color = 0x0066CC
sombra3.blurX = 15;
sombra3.blurY = 15;
sombra3.distancia = 0;

Resultado del ejemplo:


Esta sería la clase completa:

Código :

package
{
   import flash.display.Sprite;
   import flash.filters.BitmapFilter;
   import flash.filters.BitmapFilterQuality;
   import flash.filters.DropShadowFilter;
   //------------------------------------------
   public class Sombra extends Sprite
   {
      private var _ruta:Sprite;
      private var _clip:Object;
      private var _filtros:Array;
      private var _sombra:BitmapFilter;
      private var _color:Number;
      private var _angulo:Number;
      private var _alfa:Number;
      private var _blurX:Number;
      private var _blurY:Number;
      private var _distancia:Number;
      private var _strength:Number;
      private var _inner:Boolean;
      private var _knockout:Boolean;
      private var _calidad:Number;
      //------------------------------------------
      public function Sombra(clip:Object)
      {
         _ruta = clip.parent;
         _clip = clip;
         iniSombra();
         update();
      }
      //------------------------------------------
      private function iniSombra():void
      {
         _color = 0x000000;
         _angulo = 45;
         _alfa = 0.7;
         _blurX = 5;
         _blurY = 5;
         _distancia = 5;
         _strength = 0.65;
         _inner = false;
         _knockout = false;
         _calidad = BitmapFilterQuality.HIGH;
      }
      //------------------------------------------
      private function update():void
      {
         _filtros = new Array();
         _sombra = new DropShadowFilter(_distancia,_angulo,_color,_alfa,_blurX,_blurY,_strength,_calidad,_inner,_knockout);
         _filtros.push(_sombra);
         _clip.filters = _filtros;
      }
      //------------------------------------------
      public function set color(color:Number):void
      {
         _color = color;
         update();
      }
      //------------------------------------------
      public function set angulo(angulo:Number):void
      {
         _angulo = angulo;
         update();
      }
      //------------------------------------------
      public function set alfa(alfa:Number):void
      {
         _alfa = alfa;
         update();
      }
      //------------------------------------------
      public function set blurX(blurX:Number):void
      {
         _blurX = blurX;
         update();
      }
      //------------------------------------------
      public function set blurY(blurY:Number):void
      {
         _blurY = blurY;
         update();
      }
      //------------------------------------------
      public function set distancia(distancia:Number):void
      {
         _distancia = distancia;
         update();
      }
      //------------------------------------------
      public function set strength(strength:Number):void
      {
         _strength = strength;
         update();
      }
      //------------------------------------------
      public function set inner(inner:Boolean):void
      {
         _inner = inner;
         update();
      }
      //------------------------------------------
      public function set knockout(knockout:Boolean):void
      {
         _knockout = knockout;
         update();
      }
      //------------------------------------------
      public function set calidad(calidad:Number):void
      {
         _calidad = calidad;
         update();
      }
      //------------------------------------------
   }
}


Espero que les sea útil miau

Etiquetas actionscript_3

Comentarios | Enviar un comentario
Se ve muy buena, Zguillez. miau
Por: Dano
Muy bien Zguillez! Que sigan los tips y tutos en AS3 Guiño!
Por: Rafeo
excelente Zguillez, añadiendo un poco a tu tip...
si usas movieClip y quieres agregarle algun efecto desde su propia clase, solo cambian algunas cosas y quedaría asi:

Código :


package com.ini4.cine.view{

   import flash.display.MovieClip;
   import flash.filters.BevelFilter;
   import flash.filters.BitmapFilter;
   import flash.filters.BitmapFilterQuality;
   import flash.filters.BitmapFilterType;

   
   public class mc_butaca extends MovieClip {
      public function mc_butaca() {
            var filter:BitmapFilter = getBitmapFilter();
            var myFilters:Array = new Array();
            myFilters.push(filter);
            filters = myFilters;
      }
   private function getBitmapFilter():BitmapFilter {
            var distance:Number       = 4;
            var angleInDegrees:Number = 97;
            var highlightColor:Number = 0xCF0518;
            var highlightAlpha:Number = 0.5;
            var shadowColor:Number    = 0x000000;
            var shadowAlpha:Number    = 0.5;
            var blurX:Number          = 5;
            var blurY:Number          = 5;
            var strength:Number       = 1;
            var quality:Number        = BitmapFilterQuality.LOW;
            var type:String           = BitmapFilterType.INNER;
            var knockout:Boolean      = false;

            return new BevelFilter(distance,
                                   angleInDegrees,
                                   highlightColor,
                                   highlightAlpha,
                                   shadowColor,
                                   shadowAlpha,
                                   blurX,
                                   blurY,
                                   strength,
                                   quality,
                                   type,
                                   knockout);
        }
      //fin clase
   }
   //fin package
}


realmente práctico Guiño
Por: eldervaz
mis respetos Alabanza
Por: penHolder
Para simplificarle la vida a los holgazanes Riendo.Muy buena Zguillez.
Hay gente q tiene alma de developer ah.
Por: carlosczg_blog
Por dios, recien estoy empezando con Actionscript 3.0 y este es uno de los posts mas educativos y utiles que vi. MUCHISIMAS GRACIAS!!
Saludos
Por: Leandro_blog
Exelente Zguillez! Gracias por el TIP!
Por: Kinduff
wow Riendo
Por: Asombro_blog
no lei todo... pero he visto otros tutoriales muy buenos. felicitaciones!!!
Por: Marcel_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.