Esta serie de 10 tips que iré publicando, está dedicada a la conversión y descomposición de imágenes, clips y textos en elementos sencillos que podamos manipular con actionscript.
Con estos scripts conseguiremos varios objetivos básicos:
Vectorizar una imagen: Convirtiéndola primero en una serie (array) de puntos por color, forma independiente y posición.
Detectar sus bordes: Para poder convertirlos en equivalentes a GUIAS de movimiento útiles dinámicamente.
Comprimir y descomprimir: Pudiendo salvar no la imagen, -que podemos no incluir en el trabajo final- sino un fichero con sus datos vectorizados (puntos, rectas y curvas) y utilizable como imagen vectorizada, secuenciada y con mucho menos peso.
Tomando una imagen de la biblioteca (también la podremos importar y exportar como vector más adelante) efectuamos una búsqueda de su bordes de color y su presentación como dibujo dinámico.
Existen 2 modos básicos de representar el efecto de dibujo: mediante la copia del pixel getPixel()/setPixel() y rellenado de zonas de color floodFill() o como líneas continuas moveTo/lineTo y relleno de un contorno cerrado beginFill().
En el ejemplo usamos las dos maneras pudiendo cambiar entre los 2 modos dinámicamente. Podemos usar esta técnica con una imagen pero no obtendremos buenos resultados con un MovieClip por motivos del suavizado y alineación. Los MC los trataremos aparte cuando tratemos la adaptación de paletas de color.
Tampoco salvamos los datos, simplemente los representamos directamente con lo cual el código es poco complejo y muy rápido, y tampoco (pues no es necesario aquí) optimizamos la vectorización para convertir secuencias de puntos en rectas y curvas definidas como haremos posteriormente.
PARTE I: Dibujando bordes de una imagen:
Nota: El escalado de SWF para colocarlo aquí hace que se pierda nitidez en la representación, recomiendo descargar el .fla (86Kb) para estudiarlo y observarlo mejor.
Simplemente alucinante , buen trabajo Teseo . Le echaré un vistazo al codigo fuente del fla
Queria plantearte una pregunta, he observado que los bordes de las imagenes una vez redibujadas aparecen un poco toscos en imagen vectorial, ¿existiria algun modo de redondearlos mediante actinscript? ya se que es demasiado pedir pero no obligo a contestar a nadie
Ya estoy esperando los restantes tips, de verdad parecen muy interesantes. Por:Lightwave
Metal_Storm: Si, existe una/varias maneras, y la formas de aplicación las explico en otro tip de la serie ya que los tres primeros son de presentación para que los que deseen puedan empezar a destripar el código. Luego voy explicando detalladamente cada proceso. Es similar a la optimización de curvas de Flash, con alguna variaciones específicas. Originalmente esas rutinas las colocaba en C embebido y ahora las he pasado a AS2, pues para estos casos no tienen problemas de velocidad de proceso. También es importante usar adecuadas técnicas de suavizado. Baste citar un parrafo del tip 4: " Para que puedan actuar como guía de movimiento, el detector sigue valores enteros de pixel por lo cual sus bordes pueden aparecer algo dentados según escalas. ...Trataremos ahora la forma de guia con valores no enteros y el suavizado con filtros....Este script nos convierte los bordes en lineas y curvas en lugar de series de puntos... Vamos poco a poco. Por:Teseo
Gracias teseo por la respuesta y sobretodo por la rapidez, me ha quedado todo muy claro el resultado final será fascinante seguro.
Pues nada tocará esperar a los siguientes, mientras jugaremos un poco con el codigo.... Mouahahaha Por:Lightwave
Teseo eso esta durisimo, yo voy a estar esperando por los tips de los que hablaste para aprender de ustedes que son bastante buenos en esto...
Gracias a personas como ustedes que son unos verdaderos maestros en el tema hay tantas personas como yo inspirados en hacer y aprender cosas como estas. Por:Lord_Spyros_blog
La verdad Teseo que eres un groso un y ensima nos das asta los .fla no tengo mas que palabras de gratitud, eh aprendido vastante gracias ati Por:CarlosRuminott
Un fenómeno, gracias por compartir cosas así Por:Nicolás_blog
Realmente bueno el Tip. Esperamos con ansia el resto de la "serie" Por:MorphX_blog
No maaaa... que poca, señor Teseo, cuando creemos que ha llegado a su limite, nos sorprende con algo completamente nuevo. insisto, no tiene pacto con algun ser que no es de este planeta??? ya, suelte su secreto. jajaja, no la verdad es que es sorprendete lo que usted puede hacer en flash. Gracias por compartilo, insisto. Por:Señor Oz_blog
una pregunta el de la foto eres tu??? Por:CarlosRuminott
El fla esta en flash mx 2004? es que aun no consigo el 8 Por:Victor-Nael
Saludos, puedes poner el flash para la versión MX 2004, quiero testear, pues tengo algunos planos de mi ciudad a ver si se pueden utilizar para obtener una imagen vectorial... Por:Luis V_blog
eres un crack!!!! Por:suso_blog
hola, he estado probando con el ejemplo flA de cambiar a imagen y redibujar otra, sin embargo no lo he condeguido, nose si es porque este tip està incompleto para poder aprender a hacerlo.
Saludos y gracias de antemano Por:nighty_blog
Hola por favor podrias colocar el documento original o la pagina de internet que usaste como guia para realizar este fla.? no importa si esta en ingles o aleman gracias. Por:Greg_House
Greg_House dijo:
Hola por favor podrias colocar el documento original o la pagina de internet que usaste como guia para realizar este fla.? no importa si esta en ingles o aleman gracias.
Qué qué???
No, no use ninguna página como guía, y ESTE es el documento original. Es más, puedes buscar por ahí lo que quieras, no hay nada ni parecido.
, buen trabajo Teseo 
. Le echaré un vistazo al codigo fuente del fla 
pero no obligo a contestar a nadie 
el resultado final será fascinante seguro.
y ensima nos das asta los .fla no tengo mas que palabras de gratitud, eh aprendido vastante gracias ati 
A L U C I N A N T E
