Recorrer contorno de figura

Hola, tengo un problemilla al cual no le veo solucion. Tengo una serie de figuras (movieclips) los cuales tienen una forma abstracta y que genero a traves del mismo flash...algo asi como dibujando con el pencil tool estas figuras y convirtiendolas a movieclips. De igual forma tengo otro movieclip que hace las veces de algo asi como un puntero, el cual necesito recorra el contorno de dichas figuras devolviendo la posicion x, y sobre las cuales esta pasando. Es decir que que en resumidas cuentas necesito que este puntero recorra el controno de la figura abstracta y me devuelva la posicion que recorre sobre el plano. El problema?...no tengo ni la menor idea de como hacerlo..como le digo al MC puntero que recorra ese contorno?..mas aun..como defino ese contorno para poder ser recorrido?.
Alguien tiene alguna idea de como podria hacer esto?

si, encima del clip dibujas el contorno lo defines como guia y le das a un clip que lo recorra con un enterframe que aroje la posicion
ojo la guia no debe tocasrse mas que al principio y el final

Gracias Fento, tu solucion es buena, pero lastimosamente no es aplicable en mi caso. El problema es que estas "formas" son plantillas de diseño y existen miles, por tal razon queria manejarlas como movieclips, otra razon es que necesito arrastrarlas hasta una zona (Area) predefinida y una vez alli ejecutar su recorrido, por tal razon seria muy tedioso para el usuario no solo arrastrarlas sino ademas tener que trazar el controno, sobre todo porque son amorfas. Me preguntaba si de alguna forma puedo sacar ese contorno del clip para convertirlo en guia, dado que un movieClip no lo puiedo definir como guia.
O alguna otra solucion, como podria llegar a interpretar ese entorno?, o como podria tener un eventoDrag en un patron de guia?.
Gracias de todas formas.

Creo que no podrás hacerlo de otra forma que no sea la que te dijo Fento.

Amí también se me ocurre que publiques los SWF, los conviertas a XML y de ahí sacas las coordenadas de las curvas... xDDD que es casi peor que lo de Fento

Para ese problema puedes usar un algoritnmo de lectura de pixel y definición de bordes.
El camino es el siguiente:
La primera parte es definir los bordes. Utilizando filters conseguir dejarlo a dos colores o a lo menos en dos "fronteras-intervalos" de color suficientemente definidas.
2º parte es efectuar un barrido de lectura por lineas leyendo pixel a pixel (su color) completo tomando los valores donde este cambia significativamente.
3º usar un algoritmo de persecución ( sigue recursivamente valores a las 8 regiones o puntos posibles laterales) y almacenar los valores en el array final.
De ese modo se puede "leer" cualquier area o lineas gruesas no cerradas ( las consideramos areas como hace el truetype).
Como mejora se puede añadir otro de afine de curvas (similar al que usa internamente flash como media de horizontales + verticales) para disminuir y facilitar una vectorización para copiar o rellenar el area definida y permitir dibujarla como guia.
Te aconsejo usar operaciones de matriz por ser más faciles de implementar al caso.
Yo hice años-ha un trabajo similar para patrones de confección en C++ .....buscaré en el baúl si lo necesitas y te atreves a convertirlo.

Muchas gracias Teseo, veo que el camino es largo pero se puede y ese me anima a conseguirlo. Voy a investigar mas la respecto a ver que logro sacar, y si lo tienes en C++ pues venga que ahi miramos como lo convertimos.
Muchas gracias

He resuelto la busqueda de bordes de cualquier figura, texto, jpg, etc... importada y dinámicamente en actionscript puro. He puesto un ejemplo en:

http://www.telecable.es/personales/terepardo1/SWFs/circo%2006.swf


Los dibujos los importo en PNG y el programa crea un array (de objetos puntos) de sus bordes para los efectos.
Se puede simplemente copiar el array que resuelve y pastearlo en otro SWF cualquiera para reproducir las dibujos o efectos con código simplemente , sin que los originales esten en la biblioteca de dicho SWF


Manejar todos los botones, el combo de fuentes y mezclar efectos para ver algunas posibilidades.

Nota: al montar efectos combinados en el ejemplo, a veces carga de nuevo, o se despista y tarda un poquito. Esto es normal pues está sin afinar, aunque en la versión de busqueda pura es realmente rapidísimo.

muy interesante, podrias postear el codigo?

Lo estoy "limpiando" y añadiendo algunas cosillas más entre ellas el dibujo de un BMP/JPG cargado dinámicamente a todo color mediante disminución de la paleta. En cuanto acabe, lo posteo pues es solo actionscript.
Todos esos efectos no se pueden conseguir sino es con la detección de bordes. Si se os ocurren algunas ideas para hacer otros efectos con este sistema agredecería que las posteaseis y a ver si la puedo, o podemos entre todos, añadir. Gracias.

Muy interesante de verdad.

Super bueno está eso!!!!!!!
Cuando puedas muestra algo.....

Bueno, aquí esta una beta que pongo como ejemplo.
Ayudas para mejorarlo, dudas o cometarios, por favor.


- Reproduce el borde de cualquier figura, con la paleta de Flash
USO:
- Dibujar cualquier figura con las herramientas de flash, o importar
un archivo permitido por Flash,(el ejemplo acepta transparencias)
- Importarlo en vinculación attach como "ejemplo".

Notas:
Está concebido para almacenar datos en un Array exportable para
usar en otro SWF sin que sea necesario importar luego la imagen original.
La function dibujar() aclara de forma implícita el camino para ello.
Para ello se pueden usar varios métodos que no son objeto del ejemplo.
El array es : st y es una colección de puntos en tres dimensiones del Array
st[color][forma][puntos] * En este ejemplo, aunque se puede utilizar otro sistema
de almacenamiento de cadena mucho más reducido y con optimización de lineas.
Solo interpreta colores de la paleta SWF asi que imágenes con otros colores
deberan ser tratadas (con el Flash u otros programas externos) antes de importarlos.
Puede ocurrir que si la imagen es muy "pesada" el render pida detener script
decir no hasta que termine de calcular la figura. Eso es debido precisamente a que
está diseñado para encontrar los bordes y DESPUES dibujar y no hacerlo simultaneamente
es decir, ir calculando y dibujando.
Si existen el el dibujo lineas simples, las lee de ida y vuelta pues está concebido
el script para hacer de guia de otros MC´s , API de dibujo o como borde de relleno y
por lo tanto ha de ser una figura cerrada con origen=final.
Es totalmente dinámico.
ejemplo en:
http://www.telecable.es/personales/terepardo1/SWFs/buscabordes_beta%200.html
(tarda un poco por la causa citada)

Código :

// CONTORNOS DE FIGURAS EN COLOR by TESEO 

import flash.geom.Point;
import flash.geom.Rectangle;
import flash.display.BitmapData;

ROJO = 0xffff0000; NEGRO =-16777216; NOTRANS=0xff000000;
pt=[]; z=[]; cl=[]; st=[]; sx=[]; a1=0; ac=0; clr=[];
c_a1=0; c_g=0; c_ac=0; grueso=0; 
p=new Array (1,1,1,0,-1,-1,-1,0,-1,0,1,1,1,0,-1,-1,6,0,0,2,2,4,4,6);
for (d=0 ; d<8 ; d++){pt[d] = new Point (p[d], p[d+8]); z[d]=p[d+16]};
mc2 = createEmptyMovieClip("mc2", this.getNextHighestDepth());
mc0=attachMovie("ejemplo","mc0",100);
mc0._visible=false;
RM=new Rectangle(0, 0,mc0._width ,mc0._height);RS=RM;
marco=new BitmapData(mc0._width,mc0._height,true,0);
//mc = this.createEmptyMovieClip("mc",99 );//no necesario , solo para ver en debug
//mc.attachBitmap(marco, 100);//no necesario , solo para ver en debug
marco.draw(mc0);
marco.threshold(marco,RM,new Point(0,0),"<",NOTRANS,0,NOTRANS,true);
do{RM=buscaColores(RM);} while (RM);
// si quitamos -1  a length también pasamos el borde total (pasa el 0)
for ( ac=0 ; ac< clr.length-1 ; ac++){ pasaColor(clr[ac]);}
marco.dispose();marco2.dispose();// liberar la memoria de los bitmap de ayuda
dibujar();
clearInterval(ID);
ID=setInterval (this, "dibujar",5);

function buscaColores(RM){
      for (j=0 ; j< RM.height ; j++){
      for (i=0; i< RM.width ; i++){
         PT = new Point(RM.x+i,RM.y+j);
         clr[ac]= marco.getPixel32(PT.x,PT.y)//+
         if((clr[ac]+1)%51==0){ // los colores de la paleta básica de flash.
            marco.threshold(marco,RS,new Point(0, 0),"==",clr[ac],0);
            RM = marco.getColorBoundsRect(NOTRANS,0,false);//reducir la busqueda
            ac++;
            return (RM);
         }
      }
   }
}

function pasaColor(color){  //pasar 0 para el contorno total no transparente
   marco2=new BitmapData(mc0._width, mc0._height,true,0);
   marco=new BitmapData(mc0._width+2,mc0._height+2,true,0);
   marco2.draw(mc0);
   marco.copyPixels(marco2,new Rectangle(0,0,mc0._width,mc0._height),new Point(1,1),true);
   RO=new Rectangle(0, 0,marco.width ,marco.height);
   //mc = this.createEmptyMovieClip("mc",99 );//no necesario , solo para ver en debug
   //mc.attachBitmap(marco, 100);//no necesario , solo para ver en debug
   RT=RO; st[ac]=[]; tp=[]; a1=0; //clr[ac]=color;
   color==0 ? marco.threshold(marco,RO,new Point(0,0),"!=",0,NEGRO)
            : marco.threshold(marco,RO,new Point(0,0),"!=",color,0);
   color!=0 ? marco.threshold(marco,RO,new Point(0,0),"==",color,NEGRO): null;
   RO = marco.getColorBoundsRect(NEGRO,0,false);// reducir la busqueda de color
   do{RO=buscaBordes(RO);} while (RO);
   for(var g= 0 ; g< a1; g++){tp[g]=st[ac][g][0].x;}
   sx[ac] = tp.sort(-8); //ordenar para dibujar cada color de izquierda a derecha
   return (st);
}
function buscaBordes(RO){
   flag=1;
   if(RO.isEmpty()){
      marco.floodFill(0,0,ROJO);
      marco.threshold(marco, RT, new Point(0, 0), "==",0,NEGRO);
      marco.threshold(marco, RT, new Point(0, 0), "!=",NEGRO,0);
      RO = marco.getColorBoundsRect(NEGRO,0,false)//reduce area de busqueda
      if(RO.isEmpty()){return false}
   }
   else (RO = bordes(RO));
   return (RO);
}

function bordes(RO){
   for ( j=0 ; j<  RO.height ; j++){
      for ( i=0; i< RO.width ; i++){
         PT = new Point(RO.x+i,RO.y+j);
         if(marco.getPixel32(PT.x,PT.y)== NEGRO){
            PO=PT; st[ac][a1]=[];
            st[ac][a1].push(PT);// almacena 1er punto de cada borde y al bucle
            do {bucle(PT,flag)}
               while(!(PO.equals(PT)))
            for (var ii=0 ; ii< st[ac][a1].length ; ii++){
               marco.floodFill(st[ac][a1][ii].x,st[ac][a1][ii].y,ROJO);//solo para lineas de 1 pixel
               marco.setPixel32(st[ac][a1][ii].x,st[ac][a1][ii].y,ROJO);//solo para lineas de 1 pixel
            }
            RO = marco.getColorBoundsRect(ROJO,NEGRO);//reduce area de busqueda
            a1++;
            return(RO); 
         }
      }
   }
   RO = marco.getColorBoundsRect(0,ROJO);
   return(RO); 
}

function bucle(punto,flag2){
   for (var k= flag2 ; k < 8+flag2 ; k++){
      PT=punto.add (pt[k%8]);
      if(marco.getPixel32(PT.x,PT.y)== NEGRO){
         st[ac][a1].push(PT);// almacena todos siguientes puntos de cada forma
         flag = z[k%8];
         return;
      }
   }
}

function dibujar(){
   for(var j = 0 ; j < 10 ; j++){ //para dibujar 10 puntos en cada llamada de setInterval
      if(c_ac < ac){
         if(c_a1 < sx[c_ac].length){
            if(c_g < st[c_ac][sx[c_ac][c_a1]].length-1 ){
               mc2.lineStyle(grueso, clr[c_ac], 100);
               c0=st[c_ac][sx[c_ac][c_a1]][c_g]; c1=st[c_ac][sx[c_ac][c_a1]][c_g+1];
               mc2.moveTo(c0.x,c0.y ); mc2.lineTo(c1.x,c1.y);
               c_g++;
               }
            else{
               c_a1++;
               c_g=0;
            }
         }
         else{
            c_ac++;
            c_a1=0;
            c_g=0;
         }
      }
      if(c_ac >= ac){
         mc0._visible= true  // para ver el MC al terminar
         mc0._x=200;
         clearInterval(ID); 
         return;
      }
   }
}

mmmm.... muy interesante... ya lo estoy analizando.... aunke noté que ocupamos muuuucho CPU.... [ o fue mi imaginación?... errr mejor sigo analizando ]




Saludos

Donde obtengo la clase?
(estoy curioseando esta interesante sugerencia...pero no tengo la clase para probarlo...)

Gracias.

Cuando el render termina:
do{RM=buscaColores(RM);} while (RM);
en lugar de llamar a la función de dibujar() y eliminando su control setInterval , podemos tomar los arrays st y clr. poniendo una instrucción de envio del Array o guardado.

Estos arrays dibujara las formas al ejecutarlo desde otro SWF con un "trazador" similar a la función dibujar de este script.
clr -----> contiene la lista de colores con indices asociados a
st[] ----->cada forma de ese color
st[][] ------> los puntos de cada forma

Como digo la forma de almacenamiento no es la optima. son objetos punto.
Lo que creo acertado es una cadena pura de este modo:
letra C sigue el dato color hasta encontrar M que indica nuevo punto inicial de forma y siguientes hasta nueva C o M
los puntos se almacenan como referencia al anterior menos los que siguen a M o iniciales que se referencian por salto.
Basicamente es el array p del script. Dado un punto , el siguiente es uno de los 8 de su alrededor luego se almacena ese valor de 0 a 7.
seria algo asi:
ejemplo: (cuadrado rojo de lado 5 colocado a 51 ,-23 y 2 lineas en azul a 45º a 12,25 y 7 puntos y otra pendiente 1/3 de 10 puntos en -10,74)
cadena = "C0xffff00M51,-23,1111333335555577777C0xff0000ffM12,25,0000004444444M-10,74,1101110115545554555"
que se podría comprimir un poco mas con algoritmos simples de repeticion de series y mas punteros.
Esa cadena entrega el dibujo.
en el ejemplo que subí:
http://www.telecable.es/personales/terepardo1/SWFs/circo%2006.swf
hay 6 dibujos en el boton dibujar con ese método.

Bueno, como veo que parece necesario al ejemplo y como bien dice LA_GATA, voy a hacer un compilador de cadena con el decompilador asociado y los posteo.

Nota: Por cierto, LA_GATA tengo construida la clase extend para bordes-guia dinámicos, pero no con este sistema, que es mejor que uno con el uso de colorMatrixFilter. Esto es solo un caso de desarrollo de nucleo. Pero no lo había citado en el post Quién te lo dijo?

creo que este tema daria para un muy buen tutorial.

para mi es muy interesante.

SIII...quiero un tutorial...

TESEO...me lo dijo la forma de programación...no es obvio?
La forma de la programación es una huella que denuncia al autor. Me lo dijo Sherlock. ...=^,^=

Se me ocurrió una locura...

Digo yo...supongamos que se coloca la figura origen en una capa, y la figura destino (son las mismas pero en posiciones diferentes) en otra capa pero enmascarada (o sea estan en capas diferentes).
De la máscara, hacemos un clip pequeño con el punto de origen sobre la figura origen, pero con una superficie de enmarcaramiento sobre la ubicación de la figura destino, y al mover el mouse sobre la figura origen se cambia el tamaño de la máscara al ancho y alto, desde la ubicación fija de la máscara (punto donde está ubicada la figura incial, pequeña que está sobre la figura destino) hasta el lugar donde esté el mouse, como la superficie real de esa máscara esta sobre la figura destino......no parecerá que se está reproductiendo la figura que recorre el mouse y realidad lo que estaría pasando es que se "abre" una máscara que revela una figura que ya está abajo de la máscara?

No sé si se entendió....

TESEO qué opinás, funcionará?

Algo parecido a dibujar una moneda en un papel repasando con el lápiz?
lapiz=mouse ; relieve de moneda = máscara ; moneda = figura origen ; papel = figura destino.
Claro que funcionará. Lo meteré en el SWF de ejemplos, que acabará llenándose!!
Ya he incluido otro efecto más: un laser trazador.

http://www.telecable.es/personales/terepardo1/SWFs/circo%2006.swf

Y pensado en añadir otros 2 efectos que pasarÁn a ser aplicaciones independientes:
Un TRAZADOR DE MAPAS:
Se carga un BMP( u otro tipo) del mapa con sus regiones en colores y.......devuelve un Array de cada región como movieClip independiente.
Un HANDWRITER (escritor a mano):
Se define la fuente, se pone el texto y lo va escribiendo dinámicamente. Añadiendo el tipo de linea o relleno que se desee.
Pongo 2 ejemplos de dibujo dinámico (son solo 10 lineas de código) a partir 3 puntos que definen una curva eje:

http://www.telecable.es/personales/terepardo1/SWFs/bezier-motor%2001.swf
http://www.telecable.es/personales/terepardo1/SWFs/bezier-motor%2002.swf

Nota: disminuir el tamaño de la ventana del navegador y darle al refresh para verlos actuar correctamente.
Esto lleva una función realmente liosa como es la de definir trazos que se cruzan ( pero ya lo tenía resuelto!!).

En cuanto al tutorial, posiblemente diera para más de uno sobre temas que no he visto mucho (o nada) por ahí:
La paletta ( como hacer una paleta y como encontrar la paleta óptima para una imagen)
Tratamiento de Bitmaps. ( y una verdadera función maga: la reforma del blendMode )
Algoritmos de Busqueda de límites y la Voronin diferencial.
Detector de Rasgos y paso a función vectorial.

Cúal hacemos primero?

Tratamiento de blendMode!...y todo lo que está abajo!
A raiz de esto...también me puse a pensar eso del mapa....jejeje...estamos sintonizados.
Estan buenísmos los ejemplos.

wow, muy interesante, si señ[email protected] impaciente por ver los tutoriales y poder incarle los dientes !!

genial teseo

MARAVILLOSO!

Parece realmente interesante; lamentablemente... no entiendo nada.

Voto por tener pronto un buen tuto

con tu permiso te seo, se me hace muy interesante lo paso a un solo hilo a aportes