Comunidad de diseño web y desarrollo en internet

Dibujar linea diagonal

Citar            
MensajeEscrito el 11 Sep 2008 03:06 pm
Hola,

Quería hacer un fondo con lineas diagonales, acá el ejemplo. Y investigando, he visto que se puede hacer de una forma (sin ralentizar la cpu), haciendo un bucle de un dibujo de punto diagonales.

El bucle tendría que ser infinito (visto que seria ver el fondo en pantalla completa, en cualquier resolución).

No se dibujar por AS y no le había visto utilidad hasta ahora, y tampoco he usado bucle.

Gracias de antemanos, saludos.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Sep 2008 04:46 pm
Dibujar por AS es una de las mejores cosas que tiene flash, cuando quieres crear contenido dinámico al que le envías valores y te dibuje depende de lo que le envías, así no tienes que cargar tu flash de bitmaps o Movies y después es muy fácil variar el contenido, ya que solo debes cambiar variables.

Bueno como bien dices lo que quieres se resuelve con ciclos y dibujando, pero además es mejor utilizar BitmapData para alijerar la memoria del flash player, esto puede ser una solución:

Pensé hacerte un ejemplillo rápido para que entendieras y pensé que lo podría hacer en un minuto y resulta que me ha llevado más tiempo de la cuenta hacerlo, pero bueno ya me queda aquí para cuando desee utilizarlo

El ejemplo está compuesto de una función y un prototype, la primera para hacer el background completo y la segunda dibuja un cuadrito con las medidas y el color que le especifiquemos.

Código ActionScript :

import flash.display.BitmapData;
import flash.geom.Matrix;

//---Función de dibujar el background
function drawBackground(cara:Number, steps:Number, color:Number):Void {

   //---Crear el contenedor
   var back:MovieClip = this.createEmptyMovieClip("back", this.getNextHighestDepth());

   //---Dibujar la primera sección
   var seccion:MovieClip = back.createEmptyMovieClip("seccion", back.getNextHighestDepth());
   seccion.cacheAsBitmap = true;
   var cant:Number = steps + 1;
   
   //---Posicion en las X inicial
   var posX:Number = 0;
   
   var cuadro:MovieClip;

   for (var i:Number = 0; i < cant; i++) {

      cuadro = seccion.createEmptyMovieClip("cuadro" + i, seccion.getNextHighestDepth());
      cuadro.cacheAsBitmap = true;
      cuadro.drawCuadro(cara, color);

      cuadro._x = posX;
      cuadro._y = i * cara;
      
      posX -= cara;
      
      if(posX < 0){
         
         posX = (cant - 1) * cara;
         
      }


   }
   
   //---Cantidad de secciones en alto y ancho
   var totalW:Number = Math.ceil(Stage.width / seccion._width);
   var totalH:Number = Math.ceil(Stage.height / seccion._height);
   
   //---Crear las copias de la sección
   var myBitmap:BitmapData = new BitmapData(Stage.width, Stage.height, true, 0x000000);;
   var myMatrix:Matrix;
   
   for (var i:Number = 1; i <= totalH; i++) {

      for (var j:Number = 1; j <= totalW; j++) {
         
         myMatrix = new Matrix(1, 0, 0, 1, (j - 1) * seccion._width, (i - 1) * seccion._height);
         
         myBitmap.draw(seccion, myMatrix);
         
      }
   }
   
   back.attachBitmap(myBitmap, back.getNextHighestDepth());
}

//---Prototype de dibujar un cuadro
MovieClip.prototype.drawCuadro = function(cara:Number, color:Number):Void  {

   with (this) {

      beginFill(color,100);
      moveTo(0,0);
      lineTo(cara,0);
      lineTo(cara,cara);
      lineTo(0,cara);
      lineTo(0,0);
      endFill();

   }
};


Después se llama a la función de esta manera:

Código ActionScript :

drawBackground(cara:Number, espacio:Number, color:Number);


Donde cara va a ser el tamaño de las caras de los cuadros que compondrán el background.
Espacios es un número que controla el espacio que tendrá un cuadro de otro tomando como medidas el cuadro en si.
Y color es el color que tendrá cada cuadro.

El ejemplo que pones en la imagen me parece que es de cuadros de 1 píxel con una separación de tres y color negro, pues se debería llamar de la siguiente forma:

Código ActionScript :

drawBackground(1, 3, 0x000000);


Lo que debes hacer es que cuando cambies la pantalla de resolución borras el clip del background y vuelves a llamar a la función y se volverá a dibujar con las nuevas medidas de la pantalla.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 11 Sep 2008 05:23 pm
IM-PRE-SIO-NAN-TE! Probado y funciona. Suponía que el código iba a ser complicado (lo he entendido), pero sería incapaz de empezar de zero, con lo fácil que es usar la herramienta "lapiz" del flash!

Lo que acabo de probar y no funciona, es el color (Brillo, Tinta, Alpha..) o la mezcla (Oscureser, Solapar..) al MC.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Sep 2008 06:15 pm
La heramienta lápiz es fácil de utilizar, pero si te dijera que me crearas ahora 10 backgrounds diferentes con diferentes variables, lo harías en 1 minuto, sin embargo dibujarlo con la herramienta lápiz no sería nada fácil y aparte no quedaría visualmente tan perfecto.

No entiendo a que te refieres con esto:


Lo que acabo de probar y no funciona, es el color (Brillo, Tinta, Alpha..) o la mezcla (Oscureser, Solapar..) al MC.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 11 Sep 2008 07:24 pm
A ver, tengo este fondo y quiero "vectorizarlo" para usar como fondo flash. De momento, este es mi resultado

Como veras, el fondo original, sus lineas no son tan negras, porque he usado la opacidad de la capa.

Otra cosa, en el experimento, si cargas el index o lo redimensionas, la CPU ralentiza (y sin presumir de maquina) y no creo que sea mi máquina.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Sep 2008 09:28 am
Bueno, puedes a la hora de dibujar, darle un alpha al dibujo:

Código ActionScript :

beginFill(color, alpha);


Y es que veo que lo que estás haciéndo es un background de la página completa, pensé que era más pequeño, pues sí, esto consumirá mucho, ya que tiene que dibujar miles y miles de bitmapData, para el caso que quieres es mejor importar una imagen pequeña de 50 x 50 px más o menos y repetirla por la pantalla hasta qe conforme el background, te consumirá menos.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 14 Sep 2008 06:23 pm
Aquí esta la prueba con un .png (40x40) en bucle. Funcionar, funciona, pero si redimensiono la ventana, ya no se redimensiona el fondo, que es lo que no furula?

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noscale";

var totalW:Number = Stage.height/40; 
var totalH:Number = Stage.width/40; 

function fondoDot() {
   for (var i:Number = 0; i <= totalH; i++) { 
   
     for (var j:Number = 0; j <= totalW; j++) { 
      this.attachMovie("dot", "clip" + i + "_mc", this.getNextHighestDepth(), {_x:(i * 40), _y:(j * 40)}); 
     } 
   } 
}

function escalaFondo() {
   fondoDot();   
}
//-----------------------
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Sep 2008 09:13 pm
Trata de borrar el fondo antes de crearlo y calcular las medidas de la pantalla dentro de la función, si no se queda con las del principio:

Código ActionScript :

Stage.align = "TL";
Stage.scaleMode = "noscale";

function fondoDot():Void {

   var totalW:Number = Stage.height/40;
   var totalH:Number = Stage.width/40;
   
   //---Borrar el fondo si existe
   if (this.fondo) {

      this.fondo.removeMovieClip();

   }
   
   //---Crear el fondo
   var fondo:MovieClip = this.createEmptyMovieClip("fondo", this.getNextHighestDepth());

   for (var i:Number = 0; i<=totalH; i++) {

      for (var j:Number = 0; j<=totalW; j++) {
         fondo.attachMovie("dot","clip"+i+"_mc",fondo.getNextHighestDepth(),{_x:(i*40), _y:(j*40)});
      }
   }
}

var listener:Object = new Object();
Stage.addListener(listener);
listener.onResize = function():Void  {

   fondoDot();

};
fondoDot();

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 15 Sep 2008 10:13 am
Va estupendo. Ahora si quiero usar bitmapdata para el fondo, hago esto?

importo:

Código ActionScript :

import flash.display.BitmapData;


y añado en el bucle:

Código ActionScript :

clip+i+_mc.cacheAsBitmap = true; 


Pero claro, tampoco quiero abusar del bitmapdata, para este caso, vale la pena usarlo?

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Sep 2008 10:18 am
No vale la pena, estoy seguro que ahora ya no sufre tu procesador.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 15 Sep 2008 06:27 pm
Así al vuelo, 2 cosas:

Creo que es más sencillo y más rápido hacer esto:
1._ Crear un bitMap con las funciones de dibujo de AS2 o importar un dibujo cualquiera (miBitMap).
2._ Rellenar el fondo creando un MC vacio (MiMC) en nivel negativo y con la instrucción:
MovieClip.beginBitmapFill(bmp:BitmapData, [matrix:Matrix], [repeat:Boolean], [smoothing:Boolean])
en este caso: MiMC.(miBitMap, new Matrix(), true, true)

Nota: Para el tamaño y posición usaremos la Matrix que creamos con valores o variables adecuadas. Podemos hacer el centrado automático al cambio del escenario si colocamos las instrucciones en una función de Stage.onResize

Son 5 lineas + el motivo de relleno (o colección de motivos) si se usa la API de dibujo.

Montadlo y posteadlo, si necesitais algo....pues preguntad aquí mismo.

Otras cosas:
Para poner un MovieClip en cache (y en este caso suele ser bueno hacerlo) no es necesario tener importada la clase BitmapData.
Cargar en el mismo nivel siempre, evita tener que borrar el clip anterior que va a ser sustituido; por eso mejor usar un nivel negativo fijo que this.getNextHighestDepth() (para un fondo total).

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 16 Sep 2008 09:33 am
@mrxispas, te puedo asegurar que los consejos de Teseo te ayudarán mucho.
@Teseo, admiro tu habilidad con los Bitmaps, de veras, es un trabajo admirable lo que logras. Saludos.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 17 Sep 2008 07:41 pm
No tengo muy claro los pasos a seguir.
El bitmap (o el dibujo hecho con AS2) lo importo desde la biblioteca? o lo coloco en el escenario?
Tampoco tengo claro el orden del código.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Sep 2008 08:31 am
Bueno puedes leerlo de la biblioteca o puedes crearlo como mismo hicimos al principio.
Siguiendo las indicaciones de Teseo debe quedar algo como esto:

Suponiendo que está en la biblioteca linkeado como "imagen"

Código ActionScript :

Stage.align = "TL"; 
Stage.scaleMode = "noscale";
import flash.display.BitmapData;

var myBitmap:BitmapData = BitmapData.loadBitmap("imagen");
 
function fondoDot():Void { 
 
   var totalW:Number = Stage.width; 
   var totalH:Number = Stage.height;
   
   var fondo:MovieClip = this.createEmptyMovieClip("fondo", -10);
   fondo.cacheAsBitmap = true;
   
   with(fondo){
      
      beginBitmapFill(myBitmap, new Matrix(), true, false);
      moveTo(0, 0);
      lineTo(totalW, 0);
      lineTo(totalW, totalH);
      lineTo(0, totalH);
      lineTo(0, 0);
      endFill();
      
   }
    
   
} 
 
var listener:Object = new Object(); 
Stage.addListener(listener); 
listener.onResize = function():Void  { 
 
   fondoDot(); 
 
};
fondoDot();


Solo falta que Teseo lo revise, ya que no tengo mucha habilidad con los bitMaps, y modifique cualquier cosa para mejorarlo.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 18 Sep 2008 09:46 pm
A base a mis conocimientos, prefiero usar un bitmap que dibujar el fondo (lo siento, pero aun no me hago a la idea de dibujar programando).

En el código que haz puesto usar las variables que de el ancho y el alto para dibujar, pero que defino para importar desde la biblioteca? vamos, como sería con un bitmap, en vez de un trazo en AS?

De todos modos, muchas gracias a ustedes dos, porque estoy aprendiendo muchísimo.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Sep 2008 06:47 am
Perdonar, pero al meterme con el tema e ir añadiendo cosas, y cosas.... he acabado con convertirlo en un potente generador de backgrounds de todo tipo y manera. Creo que lo afinaré un poco y lo pondré como tip.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 19 Sep 2008 11:58 am
vamos, como sería con un bitmap, en vez de un trazo en AS?

El ejemplo que te he puesto, funciona si tienes un Bitmap en la bilbioteca linkeado para AS como "imagen"

Suponiendo que está en la biblioteca linkeado como "imagen"

Pero como bien ha dicho Teseo, si esperas un poco, obtendrás un potente generador de backgrounds.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 19 Sep 2008 06:22 pm
Vale gracias a los dos y el futuro tip a generado este thread :p

Continuaré el trabajo sin fondo de momento, a la espera del tip.

saludos,

pd: no habia visto el atachado "imagen", ahora va perfecto.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Sep 2008 03:47 pm
Vuelvo a sacar el tema porque no consigo que el fondo sea realmente el fondo por culpa de getNextHighestDepth().

Por cierto, al final estoy usando el siguiente código:

Código ActionScript :

Stage.align = "TL"; 
Stage.scaleMode = "noscale"; 
 
function fondoDot():Void { 
 
   var totalW:Number = Stage.height/40; 
   var totalH:Number = Stage.width/40; 
    
   //---Borrar el fondo si existe 
   if (this.fondo) { 
 
      this.fondo.removeMovieClip(); 
 
   } 
    
   //---Crear el fondo 
   var fondo:MovieClip = this.createEmptyMovieClip("fondo", this.getNextHighestDepth()); 
 
   for (var i:Number = 0; i<=totalH; i++) { 
 
      for (var j:Number = 0; j<=totalW; j++) { 
         fondo.attachMovie("dot","clip"+i+"_mc",fondo.getNextHighestDepth(),{_x:(i*40), _y:(j*40)}); 
      } 
   } 
} 
 
var listener:Object = new Object(); 
Stage.addListener(listener); 
listener.onResize = function():Void  { 
 
   fondoDot(); 
 
}; 
fondoDot(); 


Y claro, usando esta forma la profundidad del fondo es positiva, y oculta las demás capas.
Intente usar la variable del bucle, para asignarle su profundidad, pero no funciona o al menos no funciona a todos.

Código ActionScript :

   for (var i:Number = 0; i<=totalH; i++) { 
 
      for (var j:Number = 0; j<=totalW; j++) { 
         fondo.attachMovie("dot","clip"+i+"_mc",i++,{_x:(i*40), _y:(j*40)}); 
      } 
   } 

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Sep 2008 06:33 am

Teseo escribió:

Creo que lo afinaré un poco y lo pondré como tip.
Wow ! Y yo que creía que Teseo odiaba los Tips, no creí leerlo, y espero verlo pronto.
(y)

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 27 Sep 2008 05:13 pm
Está utilizando el código viejo, utiliza el último con la optimización recomendada por Teseo:

elchininet escribió:

Bueno puedes leerlo de la biblioteca o puedes crearlo como mismo hicimos al principio.
Siguiendo las indicaciones de Teseo debe quedar algo como esto:

Suponiendo que está en la biblioteca linkeado como "imagen"

Código ActionScript :

Stage.align = "TL"; 
Stage.scaleMode = "noscale";
import flash.display.BitmapData;

var myBitmap:BitmapData = BitmapData.loadBitmap("imagen");
 
function fondoDot():Void { 
 
   var totalW:Number = Stage.width; 
   var totalH:Number = Stage.height;
   
   var fondo:MovieClip = this.createEmptyMovieClip("fondo", -10);
   fondo.cacheAsBitmap = true;
   
   with(fondo){
      
      beginBitmapFill(myBitmap, new Matrix(), true, false);
      moveTo(0, 0);
      lineTo(totalW, 0);
      lineTo(totalW, totalH);
      lineTo(0, totalH);
      lineTo(0, 0);
      endFill();
      
   }
    
   
} 
 
var listener:Object = new Object(); 
Stage.addListener(listener); 
listener.onResize = function():Void  { 
 
   fondoDot(); 
 
};
fondoDot();


Solo falta que Teseo lo revise, ya que no tengo mucha habilidad con los bitMaps, y modifique cualquier cosa para mejorarlo.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 28 Sep 2008 04:34 pm
El caso es que el nuevo código no me funciona. Tengo el patron en la biblioteca exportado como AS (imagen), pruebo la película y nada.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Sep 2008 04:58 pm
Estás seguro que el patrón es un Bitmap exportado para action script como imagen?
No estarás exportando un MovieClip en vez de una imagen?

El ejemplo que te he puesto, funciona si tienes un Bitmap en la bilbioteca linkeado para AS como "imagen"

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox
Citar            
MensajeEscrito el 28 Sep 2008 06:29 pm
Pues si, era eso, tenia un MC como patrón. Pero siguo peleándome con la profundidad del fondo. Creo una capa encima del código pero aún así el fondo se superpone.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Sep 2008 06:44 pm
Para eso ponle una profundidad bien baja:

Código ActionScript :

var fondo:MovieClip = this.createEmptyMovieClip("fondo", -20000);

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

 

España

firefox

   Página 1 de 1

 

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