Comunidad de diseño web y desarrollo en internet online

Clase para usar cualquier Imagen de fondo en ActionScript 3

Citar            
MensajeEscrito el 05 Ene 2009 08:35 pm
Esta clase la tenía escrita para crear un fondo de mosaico a partir de una imagen de la biblioteca, de forma similar aar a lo que se puede hacer con background:url() en CSS. Así esta usará ajustará la imagen del fondo cuando el stage la requiera.

Su uso es muy sencillo, ya que solo debes identificar una imagen con el nombre de clase Pattern, como se muestra en la siguiente imagen:


Bitmap Properties


Esta es la clase:

Código ActionScript :

package
{
import flash.display.*;
import flash.events.*;
import flash.display.Sprite;
import flash.geom.Matrix;
//
dynamic public class AddPattern extends MovieClip
{
private var maxWidth:Number;
private var maxHeight:Number;
private var Bitmap:BitmapData;
private var RadialGradient:Sprite;
private var BackGround:Sprite;
//
public function AddPattern() : void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Bitmap = new Pattern(0, 0);
//
BackGround = new Sprite();
addChild(BackGround);
//
RadialGradient = new Sprite();
RadialGradient.graphics.beginGradientFill(GradientType.RADIAL,[0x000000,0x000000],[0,.5],[0,255],new Matrix().createGradientBox(stage.stageWidth,stage.stageHeight,0,0,0));
RadialGradient.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
addChild(RadialGradient);
//
maxWidth = stage.stageWidth - 1;
maxHeight = stage.stageHeight - 1;
//
stage.addEventListener(Event.RESIZE, fillStage);
stage.addEventListener(Event.ADDED, fillStage);
}
//
public function fillStage(event:Event) : void
{
if (stage != null)
{
if((stage.stageWidth > maxWidth) || (stage.stageHeight > maxHeight))
{
with (BackGround)
{
graphics.beginBitmapFill(Bitmap, null, true, true);
//
if(stage.stageWidth > maxWidth){maxWidth = stage.stageWidth;}
if(stage.stageHeight > maxHeight){maxHeight = stage.stageHeight;}
//
graphics.drawRect(0, 0, maxWidth, maxHeight);
graphics.endFill();
}
}
updateRadialFilter();
}
}
//
public function updateRadialFilter() : void
{
RadialGradient.width = stage.stageWidth;
RadialGradient.height = stage.stageHeight;
}
}
}


Y aquí hay un ejemplo de su uso, que como verás, también es sensible a un cambio de tamaño en la ventana del navegador, expandiéndose y manteniéndose a pantalla completa.

Finalmente recomendaría que se considere el tamaño de una imagen al vincularla ya que cuanto más pequeña sea esta, mayor sera el esfuerzo que hará procesador para duplicarla hacerla ajustar al tamaño completo de la pantalla.

Por M@U

BOFH

6210 de clabLevel

34 tutoriales
5 articulos

Genero:Masculino   Héroes Bastard Operators From Hell Editores



Ultima edición por M@U el 06 Ene 2009 07:41 pm, editado 3 veces

Bate jubilado de Cristalab

firefox
Citar            
MensajeEscrito el 05 Ene 2009 09:53 pm
Por cierto. Los que tengan una CPU "Delicada" que vigilen con el ejemplo U_U

Si empiezas a redimensionar la ventana, se te sube el uso de CPU por las nubes. Creo que Flash debería soportar trabajar con la tarjeta gráfica de forma opcional o si empieza a sobrecargar la CPU principal.

Por Bleend

Claber

3385 de clabLevel

10 tutoriales
4 articulos

Genero:Masculino   Héroes

Barcelona

firefox
Citar            
MensajeEscrito el 06 Ene 2009 03:57 am
Primero que nada, he logrado un par de grandes cambios a favor acerca de esta clase.

Primero, cuando Bleend, Zah y un poco Zguillez me ayudaron a checar que tanto procesador se tragaba el ejemplo al jugar como acordeonistas maníacos con el tamaño de la ventana, ambos estuvieron de acuerdo en que era una cifra notable. En mi caso, con FireFox el uso del CPU se disparaba temporalmente hasta un 47-68% por un par de segundos y luego se estabilizaba.
    Esto me hizo cuestionarme mucho sobre que era el causante de tal fallo, y como podría solucionarlo... Por fortuna me ayudo a optimizar la Clase (mas adelante).
Ahora, jamas me puse a probar una diferencia real entre el procesador que ocupaba mi ejemplo y el procesador que ocupa FireFox al cambiar el tamaño de la ventana como un acordeonista maníaco. Grata sorpresa me llevo cuando descubro que con cualquier pestaña abierta YA se come un buen trozo de procesador, sin importar de que este dentro de esta.

Mi Conclusión: El procesador se dispara a los altos cielos (60%) cuando cambias el tamaño de brutal manera la ventana por acción y culpa misma de FireFox y NO por el reescalado que ejecuta el Listener en mi clase. Como sea, ajuste el Listener de la clase para que cargue la BitmapData únicamente cuando el tamaño de esta es inferior a la que el stage exige.

Código ActionScript :

package
{
   import flash.display.*;
   import flash.events.*;
   import flash.display.Sprite;
   import flash.geom.Matrix;
   //
   dynamic public class AddPattern extends MovieClip
   {
      private var maxWidth:Number;
      private var maxHeight:Number;
      private var Bitmap:BitmapData;
      private var RadialGradient:Sprite;
      private var BackGround:Sprite;
      //
      public function AddPattern() : void
      {
         stage.scaleMode = StageScaleMode.NO_SCALE;
         stage.align = StageAlign.TOP_LEFT;
         Bitmap = new Pattern(0, 0);
         //
         BackGround = new Sprite();
         addChild(BackGround);
         //
         RadialGradient = new Sprite();
         RadialGradient.graphics.beginGradientFill(GradientType.RADIAL,[0x000000,0x000000],[0,.5],[0,255],new Matrix().createGradientBox(stage.stageWidth,stage.stageHeight,0,0,0));  
         RadialGradient.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
         addChild(RadialGradient);
         //
         maxWidth = stage.stageWidth - 1;
         maxHeight = stage.stageHeight - 1;
         //
         stage.addEventListener(Event.RESIZE, fillStage);
         stage.addEventListener(Event.ADDED, fillStage);
         return;
      }
      //
      public function fillStage(event:Event) : void
      {
         var evt:* = event;
         if (stage != null)
         {
            if((stage.stageWidth > maxWidth) || (stage.stageHeight > maxHeight))
               {
                  var a:* = BackGround;
                  with (BackGround)
                  {
                     graphics.beginBitmapFill(Bitmap, null, true, true);
                     //
                     if(stage.stageWidth > maxWidth){maxWidth = stage.stageWidth;}
                     if(stage.stageHeight > maxHeight){maxHeight = stage.stageHeight;}
                     //
                     graphics.drawRect(0, 0, maxWidth, maxHeight);
                     graphics.endFill();
                  }
               }
         updateRadialFilter();
         }
      return;
      }
      //
      public function updateRadialFilter() : void
      {
         RadialGradient.width = stage.stageWidth;
         RadialGradient.height = stage.stageHeight;
         return;
      }
   }
}

Por M@U

BOFH

6210 de clabLevel

34 tutoriales
5 articulos

Genero:Masculino   Héroes Bastard Operators From Hell Editores

Bate jubilado de Cristalab

firefox
Citar            
MensajeEscrito el 08 Ago 2009 07:54 am
¿Esto a la final pasó a portada?

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 08 Ago 2009 08:13 am

Freddie escribió:

¿Esto a la final pasó a portada?
Aqui. Por cierto, quiero modificar drasticamente el tip ya que puli la clase a grado que ya ni se parece... Y de hecho, no se en que estaba pensando aquel día, ya que si te fijas bien ni siquiera es una clase realmente, sino un archivo as externo.
:(

Por M@U

BOFH

6210 de clabLevel

34 tutoriales
5 articulos

Genero:Masculino   Héroes Bastard Operators From Hell Editores

Bate jubilado de Cristalab

chrome
Citar            
MensajeEscrito el 08 Ago 2009 08:56 am
Pues cambiala, eres un editor para eso.

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 08 Ago 2009 06:38 pm

Freddie escribió:

Pues cambiala, eres un editor para eso.
Ooh, bueno. Pensé que debía pedir permiso para cambiar de tal manera el contenido de un tip. Luz verde, ando en ello.

Por M@U

BOFH

6210 de clabLevel

34 tutoriales
5 articulos

Genero:Masculino   Héroes Bastard Operators From Hell Editores

Bate jubilado de Cristalab

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.