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.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por jutxob el 14 de Junio de 2007
Por Lightwave el 14 de Junio de 2007
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
Ya estoy esperando los restantes tips, de verdad parecen muy interesantes.
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 Lightwave el 14 de Junio de 2007
Pues nada tocará esperar a los siguientes, mientras jugaremos un poco con el codigo.... Mouahahaha
Por Lord_Spyros el 14 de Junio de 2007
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 Nicolás el 15 de Junio de 2007
Por MorphX el 15 de Junio de 2007
Por Señor Oz el 15 de Junio de 2007
Gracias por compartilo, insisto.
Por Rocky el 16 de Junio de 2007
Rocky_blog :
Por Luis V el 20 de Junio de 2007
Por suso el 19 de Julio de 2007
Por nighty el 21 de Septiembre de 2007
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 Greg_ el 06 de Febrero de 2008
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.
....bueno , existe este pequeño ejemplo http://www.cristalab.com/foros/viewtopic.php?t=51692
que dejé incompleto y aplicado a textos que usa parte de las rutinas que creé para el aquí expuesto.
Por Greg_House el 29 de Mayo de 2008
Por Peke_ el 18 de Junio de 2008
Aun así, me gustaria saber si se puedo hacer con ActionScrip algo similar a lo que uno hace al separar la imagen presionando Ctrl+F8.
Saludos y muchas gracias.
Por catherine_liz23 el 02 de Abril de 2009
Por MILLER el 12 de Febrero de 2010
Por Pedro Angel el 06 de Octubre de 2010
Por LINUXTRO el 01 de Noviembre de 2010
El fin es ponerle una accion a cada parte que detecte cerrada y poderla cambiar de color con una paleta.
Saludos.
Por charlydd el 08 de Abril de 2011