Efecto lupa en Actionscript 3.0

Etiquetas: BitmapData Bitmap smoothing mask drawCircle

En este ejemplo voy a tratar de explicar como se hace el "Efecto lupa" en Flash, con Actionscript 3.0.

Para simplificar voy a explicar la teoria basándome en una imagen que tengo en un MovieClip el escenario. Por supuesto esto se puede modificar para cargar imágenes externamente o como se necesite.

Los pasos que tenemos que seguir para crear el "efecto lupa" son estos:

-Crear una copia del MovieClip en BitmapData, y ponerla por encima a una escala mayor que el original:

 
//Creo un pantallazo del clip, lo pongo con una escala == zoom
var myBitmapData:BitmapData = new BitmapData(clip.width, clip.height);
myBitmapData.draw(clip);
var bmp:Bitmap = new Bitmap(myBitmapData);
bmp.smoothing = true;
contenedor.addChild(bmp);
contenedor.scaleX =  contenedor.scaleY = zoom;
addChild(contenedor);

-Poner a la copia una máscara circular, de manera que solo se vea el trozo de imágen tapado por la máscara:

 
//Le pongo una mascara del tamaño t al contenedor
mascara.graphics.beginFill(0x000000, 1);
mascara.graphics.drawCircle(0, 0, t);
contenedor.mask = mascara;
addChild(mascara);
 

-Añadimos un evento enterframe. Dentro de la función del evento vamos a mover la máscara siguiendo al ratón, y a recolocar la "copia grande":

 
addEventListener(Event.ENTER_FRAME,renderizar)
 

En la función del evento tenemos que mover la máscara para que siga al ratón, y recolocar la imagen grande para que el trozo que se vé sea el que corresponde a la imagen pequeña. La función es cuestión es esta:

 
private function renderizar(e:Event):void {
    //Calculo el porcentaje que tengo que mover el pantallazo
    var porcentajeX = clip.mouseX / clip.width;
    var porcentajeY = clip.mouseY / clip.height;
    //Recoloco el contenedor
    contenedor.x = -(contenedor.width - clip.width) * porcentajeX
    contenedor.y = -(contenedor.height - clip.height) * porcentajeY
    //Muevo la mascara
    mascara.x = escenario.mouseX;
    mascara.y = escenario.mouseY;
}
 

Adjunto fuentes con todos los materiales, por si queda alguna duda.

Comprobacion de tipos en Actionscript 3.0 con as e is

Etiquetas: as is

En Actionscript 3.0 disponemos de dos operadores para verificar tipos: "as" e "is". Es decir, con estos operadores podemos comprobar, por ejemplo, si un elemento del escenario es de tipo Sprite, o si una variable es de tipo Number.

Para ver como funcionan estos dos operadores voy a utilizar un escenario sobre el que tengo 3 MovieClips de la clase "Cuadrado", que extiende de MovieClip, y 3 MovieClips de la clase "Circulo", que también extiende de MovieClip.

El operador is

Permite comprobar si una variable o expresión forma parte de un tipo de datos. No solo verifica si un objeto es una instancia de la clase especificada, sino también si es una subclase de ella o implementa la misma interfaz.

Por ejemplo, si en el escenario que hemos propuesto ponemos:

 
for(var i:uint = 0; i < numChildren; i++){
	if (getChildAt(i) is DisplayObject) {
		getChildAt(i).alpha = .1
	}
}
 

Obtenemos:

Como vemos, "parpadean" círculos y cuadrados, ya que todos son instancias de clases que heredan de DisplayObject. Sin embargo, si ponemos:

 
for(var i:uint = 0; i < numChildren; i++){
	if (getChildAt(i) is Cuadrado) {
		getChildAt(i).alpha = .1
	}
}
 

vemos que solamente parpadean los cuadrados, ya que los circulos no pertenecen a la misma clase ni heredan de "Cuadrado".

El operador as

También permite comprobar si un elemento es miembro de un tipo de datos. Sin embargo, en lugar de devolver true o false, devuelve el valor de la expresión en lugar de true, y null en lugar de false. Por ejemplo:

 
trace(miCirculo as Circulo) //Devuelve: [object Circulo]
trace(miCirculo as Sprite) //Devuelve: [object Circulo]
trace(miCirculo as Cuadrado) //Devuelve: null
 

Papervision GreatWhite: crear un plano con dos caras

Etiquetas: Plane DisplayObject3D Viewport3D BasicRenderEngine

Existen dos maneras de crear una plano con dos caras en Papervision3D:

-Crear un cubo con una profundidad de 1pixel, y utilizar las caras delantera y trasera como caras del plano.

-Crear un contenedor DisplayObject3D, y meter dentro dos planos. El plano "b" debe tener una profundidad de 1 y una rotatión de -180º.

El segundo método es el que me parece más cómodo, ya que gestionar los materiales con un cubo es más engorroso que con un plano. Un ejemplo de plano con dos caras podrías ser:

 
contenedor = new DisplayObject3D();
var planoA = new Plane(new MovieAssetMaterial("CaraA"), 400, 400, 4, 4);
var planoB = new Plane(new MovieAssetMaterial("CaraB"), 400, 400, 4, 4);
planoB.z = 1;
planoB.rotationY = -180;
contenedor.addChild(planoA);
contenedor.addChild(planoB);
escena.addChild(contenedor);
 

AS3Dmod: utilización básica con Papervision

Etiquetas: Bend ModifierStack Phase LibraryPv3d viewport3D BasicRenderEngine Plane

AS3Dmod es una libreria de modificadores para objetos 3D. Actualmente AS3Dmod dispone de 7 modificadores (doblar, deformar...) que funcionan con Papervision3D, Away3D, Sandy3D y Alternativa3D. Aunque hay muy poca documentación (sobre todo en castellano), es bastante fácil de utilizar. Los pasos para poder utilizarla son los siguientes:

-Descargar AS3Dmod:

-Saber utilizar alguno de los 4 motores 3D compatibles. Puedes ver tutoriales de Papervision3D y Away3D en esta misma página.

-Una vez tenemos nuestra escena 3D en alguno de los motores, creamos una instancia de ModifierStack. El "modifier stack" es un link entre el objeto que queremos modificar y los modificadores:

mstack = new ModifierStack(new LibraryPv3d(), plano);

Podemos ver como se pasan como parámetro un objeto indicando la librería que vamos a utilizar (en este caso Papervision), y el objeto que vamos a modificar (un plano).

-Ahora necesitamos crear un modificador, y añadirlo a mstack. Para el ejemplo he utilizado "Bend", que recibe como parámetros la fuerza y el lugar donde se aplica:

 
bend = new Bend(0, 1);

mstack.addModifier(bend); 

-Por último, cada vez que se haga un cambio en el modificardor, debemos aplicarlo (algo asi como ordenar que se renderice):

mstack.apply();

Para este ejemplo he utilizado una clase de AS3Dmod que se llama Phase. Esta clase sirve para crear una animación tipo seno. Es decir, nosotros incrementamos su valor, y ella controla de que siempre esté entre -1 y 1. Es decir, si incrementamos su valor en 0.5 en cada fotograma, cuando llegue a 1 volverá sobre sus pasos hasta valer -1, y viceversa.

Este es el código completo comentado:

Materiales interactivos en Papervision GreatWhite, parte II

Etiquetas: Viewport3D BasicRenderEngine interactive animated MovieAssetMaterial

En Papervision greatWhite podemos añadir eventos a los elementos 3D .

Otra opción es crear los elementos 3D a partir de MovieClips interactivos que tienen asociados eventos. Por ejemplo, tenemos un MovieClip con tres botones dentro, y creamos una esfera con ese MovieClip como material. Para que se respeten los eventos de ese clip al convertirlo en material3D, debemos configurar los siguientes parámetros:

-al crear la instancia de Viewport3D debemos especificar que es interactivo:

 
//los parametros son: (ancho,alto,autoEscalar,interactivo) 
viewport = new Viewport3D(400,400,false,true);
 

-al crear el material debemos especificar que es interactivo y animado:

//los parametros son: (ID de linkage,transparente,animado)
var material:MovieAssetMaterial = new MovieAssetMaterial("MenuPPV",true,true);
material.interactive = true;

Tras el salto, el código completo y la demo.

Crear modelos 3D Collada para Papervision en Google Sketchup

Etiquetas: DAE load Viewport3D BasicRenderEngine Camera3D

Google Sketchup es uno de los programas mas sencillos de modelado 3D. Además la versión gratuita es bastante completa, y más que suficiente para hacer modelos sencillos.

Una vez hemos descargado Google Sketchup y hecho el primer modelo, tenemos que seguir los siguientes pasos:

-Exportar el modelo como Google Earth 4. Esto creará un archivo .kmz

-Renombrar el archivo .kmz a .zip.

-Descomprimir el archivo y buscar dentro el .dae y las texturas (si las hay).

Tras el salto, el 3D en movimiento y el código para cargar el modelo.

Utilizar materiales interactivos en Papervision GreatWhite

Etiquetas: InteractiveScene3DEvent BasicRenderEngine Viewport3D displayObject3D

Para utilizar eventos de ratón sobre objetos en Papervision GreatWhite, tenemos que hacer tres cosas:

-Crear un objeto Viewport3D con el atributo interactive = true

-Crear un objeto y poner el atributo interactive de su material = true

-Añadir los eventos al objeto

El código comentado, tras el salto.

Prueba de Line3d en Papervision GreatWhite

Etiquetas: Lines3D addNewLine Line3D BasicRenderEngine Viewport3D

Hace tiempo que le tenia echado el ojo, asi que hace un rato me he puesto y me ha sorprendido lo fácil que es utilizar esta clase. Veo mucho potencial, a ver si me instalo la CS4 y hago un ejemplo de CS4 + la nueva función extract de FP10. Aquí dejo el fuente por si le ayuda a alguien:

Utilizar clases con Actionscript 3.0: Parte I

Etiquetas: class import extends MovieClip TextField

Ha pasado año y medio desde que salió Flash CS3 con el "nuevo" Actionscript 3.0, el 1 de Noviembre sale CS4 con algunas nuevas clases del lenguaje, y todavía muchos diseñadores (y algunos desarrolladores) se muestran reacios a dar el salto a AS3.

Personalmente creo que ese "miedo" al AS3 se perdería con un par de charlas sobre el lenguaje, y dando pistas sobre como se hacen los "basicos" (programar un botón, una carga externa, etc). Luego ya es cuestión de trastear y ver como un poco de organización en los desarrollos (que antes era "optativa", pero ahora está casi impuesta) puede ahorrarnos horas de correcciones y muchos quebraderos de cabeza.

Este tutorial va a ser el primero de una serie en la que intentaré explicar como se hacen los "básicos" en AS3.

En Actionscript 3.0 no podemos programar "encima de los objetos" como hacíamos en Actionscript 2.0. Es decir, que ya no existe eso de crear un botón y poner encima:

 
on(release){  
	trace("Me has pulsado");    
}
 

Ahora tenemos que crear el botón, ponerle un nombre en el panel de propiedades, y añadirle los eventos desde la linea de tiempo o desde un fichero .as externo.
La opción recomendada es trabajar con clases, asi que en este tutorial muestro como asociar un documento .fla con una clase principal.
Lo primero es crear un archivo Flash (Actionscript 3.0). Ahora tenemos que asociar el documento a la clase que haremos luego. En este caso la he llamado "Main". Este nombre tenemos que ponerlo en el campo "Clase de documento" del panel de propiedades:

Después creamos un campo de texto en el escenario y le ponemos el nombre "Texto_txt". Es este ejemplo vamos a hacer que desde la clase Main se ponga un texto en ese campo. Una vez que tenemos el fla preparado, lo guardamos en una carpeta.

Ahora vamos a crear la clase Main. Creamos un Archivo de Actionscript, y lo guardamos con el nombre "Main.as" en la misma carpeta que el fla. Es importante saber que le nombre del archivo tiene que ser el mismo que el nombre de la clase. En el fichero tenemos que escribir este código:

 
package {
 
	import flash.display.MovieClip;
 
	public class Main extends MovieClip {
 
		import flash.text.TextField;
 
		public function Main():void {
 
			Texto_txt.text = "Texto con clase";
 
		}
	}
}
 

La palabra package es la que abre siempre los documentos de clase. Puede ir seguido de la ruta hasta el archivo, pero eso ya lo veremos otro día. En la segunda linea vemos un import de la clase MovieClip. La clase asociada al stage, hereda las propiedades de la clase MovieClip, por lo que tenemos que importar esta clase antes de usarla en la tercera linea:

 
  public class Main extends MovieClip {
 

En esta linea estamos diciendo que vamos a crear la clase Main (que es el nombre que hemos puesto al archivo y en el panel de propiedades) , y que para esta clase vamos a utilizar como base la clase MovieClip. La siguiente linea:

 
import flash.text.TextField;
 

importa la clase TextField. En este ejemplo vamos a utilizar un campo de texto, por lo que antes de usarlo debemos "explicarle" a flash qué es un campo de texto importando la clase correspondiente (que es lo mismo que hacemos en la segunda linea con el MovieClip).

La siguiente linea

 
public function Main():void {
 

es la que crea la llamada función constructora de la clase. Esta función tiene que existir siempre, y tener el mismo nombre que la clase. La función constructora se ejecuta siempre que creamos un nuevo objeto de esa clase. Puede recibir parámetros, pero eso ya lo veremos más adelante. La última linea no tiene misterio, le decimos que ponga un texto en el campo que habíamos creado.

En resumen, hemos creado una clase asociada al escenario, que tiene que extender la clase MovieClip. Además la clase, la función constructora, y el archivo .as tienen que llamarse igual.

Ahora sólo falta publicar el fla para ver el campo con el texto.

Para cualquier duda podéis utilizar el formulario de contacto.

Imágenes ASCII con la clase asciify para Actionscript 3.0

Etiquetas: asciify TextFormat

Pierluigi Pesenti, autor del blog Oaxoa ha hecho una clase en Actionscript 3.0 para crear gráficos ascii a partir de clips de película. Se puede ver la documentación de la clase y descargar el .as de aquí.

Materiales animados en Papervision 1.7

Etiquetas: Scene3D FreeCamera3D MovieAssetMaterial animated oneSide renderCamera

Para hacer materiales animados en Papervison 1.7, usamos el atributo animated de los materiales. Este código muestra como hacer un plano animado a partir de una animación de la biblioteca, vinculada con el nombre "Animacion".

Guardar imágenes en AS3 con PNGEncoder y Base64

Etiquetas: PNGEncoder Base64 BitmapData Rectangle encodeByteArray

Para guardar una imagen en AS2 habia que almacenar los colores de todos sus pixels, y mandar una cadena de texto con los valores a un fichero en el servidor para que creara la imagen. Esto era viable para imágenes relativamente pequeñas, ya que tanto Flash como el servidor tardaban mucho en procesar los datos. Con AS3 han surgido varias clases que aprovechan el potencial de la clase ByteArray y optimizan el flujo de datos Flash/servidor. En este ejemplo utilizo las clases PNGEncoder y Base64 para guardar un dibujo hecho en flash y guardarlo en el servidor como PNG. El tamaño de la imagen es de 400x400, y el proceso no dura más de 2 seg.

Este es el código:

Papervision 2.0a Greatwhite: Sombras

Etiquetas: Viewport3D BasicRenderEngine PointLight3D ViewPort3D GouraudMaterial

Una de las novedades de la versión alpha de Papervision son las sombras. Para poder crear efectos de luz, debemos crear un objeto de tipo PointLight3D, y utilizar materiales especiales en los objetos (en este caso u material de tipo GouraudMaterial). El resto es igual que en una plantilla normal de PPV3D.

Puedes verlo a pantalla completa aquí

Papervision 2.0: GreatWhite.Plantilla básica

Etiquetas: Viewport3D BasicRenderEngine Scene3D Camera3D MovieMaterial MaterialList DisplayObject Viewport3D Vertex3D

Hace tiempo que está disponible la versión 2.0a de Papervision, bajo el nombre de Greatwhite. Hay algunos cambios respecto a la versión anterior, y ya han empezado a surgir tutoriales donde se explica como utilizar las nuevas clases y como se recomienda dividir los bloques de código. Esta es una plantilla básica de Papervision 2.0. En este caso creo un cubo y creo sobre él un efecto de "fluidez". Para que funcione hay que tener descargadas las clases de Papervision 2.0a, y haber indicado a Flash donde están guardadas.

Puedes verlo a pantalla completa aquí

Crear reflejos por medio de Actionscript 3.0

Etiquetas: BitmapData Bitmap draw cachaAsBitmap createGradientBox beginGradientFill

Esta función recibe como parámetro un MovieClip y crea su reflejo. Para ello se copia la imagen del mc en un Bitmap y después de le aplica como máscara un degradado. Para modificar el reflejo se puede jugar con los valores de alphas y ratios con los que se crea el degradado.

FOAM parte I: Hola Mundo

Etiquetas: Foam useMouseDragger solverIterations addGlobalForceGenerator RigidBody addElement INFINITE_MASS createRectangle

FOAM es un motor de físicas escrito es Actionscript 3.0. Ha sido liberado este mes (Noviembre de 2007) por Drew F. Cummins bajo licencia MIT. Se puede bajar de aquí:

http://blog.generalrelativity.org/

Además ya está disponible la documentación aquí:

http://lab.generalrelativity.org/foam/docs/

En las primeras pruebas que he hecho, he podido ver que es igual de fácil que aprender que el APE, y algunas diferencias que postearé cuando tenga un mayor control de ambos. De momento, este es mi primer ejemplo, hecho a partir de uno colgado en la página del autor.

Tipos de materiales en Papervision 1.5

Etiquetas: MovieScene3D Cube MaterialsList WireframeMaterial MovieMaterial MovieAssetMaterial BitmapAssetMaterial ColorMaterial BitmapFileMaterial renderCamera

Este ejemplo muestra como crear un cubo con 6 tipos diferentes de materiales en Papervision (AS3). He utilizado los más básicos, en la wiki de Papervision se puede encontrar un listado completo con los materiales disponibles.