[Videotutorial] Probador Virtual con Realidad Aumentada y Detección de Movimiento

Autor: emedesing | En: Videotutoriales | 15207 Visitas

48

8 feb

¡Hola a todos nuevamente!

Hace algún tiempo vengo investigando sobre la librería Ostrich Flash WebCam y en mis inicios logré hacer esto :

Hoy quiero compartir con ustedes cómo lo hice, ya que me inquieta la gente que viene investigando y quemando pestañas en aprender sobre Realidad Aumentada y Detección de Movimiento.

Para ello hice un pequeño tutorial de cómo hacer su propio probador virtual con Realidad Aumentada que espero disfruten:

Dejo el enlace de descarga del ejemplo.

Recuerden que cualquier duda puede ser dejada en los comentarios o en el foro

actionscript, emedesign, flash, nft, ostrich

Sobre el Autor: emedesing

Luis Rodríguez, peruano de 32 años y Diseñador Web especializado en Estándares W3C y con más de 9 años de experiencia en el medio. Intereses enfocados a nuevas tecnologías, particularmente a Realidad Aumentada y Detección de Movimiento. Actualmente trabaja para Beeznest, empresa dedicada al Diseño y Desarrollo de Plataformas Web como Software para Perú y Europa.

48 Comentarios para “[Videotutorial] Probador Virtual con Realidad Aumentada y Detección de Movimiento”

1. Héctor dice:

   febrero 8, 2011 a las 5:51 pm

   Genial aplicación que haz logrado, y gracias por compartir el código con la comunidad.

   Responder
   • emedesing dice:

     febrero 8, 2011 a las 5:54 pm

     Pues como decía en el foro, espero que sirva de base para que hagan cosas grandiosas y agradezcan también a danzen el inventor de la librería “libre” ostrich flash web cam.

     Ya cuando hagan algo con esa librería espero también la compartan

     Responder
     • pepetorres dice:

       febrero 12, 2011 a las 9:50 am

       una pregunta, la toma de tu video es lateral, esto lo pones asi pues el polo no cuadra si la toma la haces frontal. ya manejaste eso?. en otro por experiencia sé que es inestable como lo has manejado, si me permites claro el comenatrio…todo por la mejoria

       Responder
2. daniel d dice:

   febrero 8, 2011 a las 7:10 pm

   Excelente muchisimas gracias, cada dia me interesa mas el tema inclusive quiero hacer una tesis sobre esto pero voy necesitar mucha ayuda espero me la puedas brindar saludos

   Responder
   • emedesing dice:

     febrero 9, 2011 a las 10:18 am

     Pues cuando quieras, estamos para compartir libremente la información , el conocimiento es de la humanidad, no habría pk solo quedárnosla verdad?

     Responder
3. maria antonieta dice:

   febrero 9, 2011 a las 5:07 pm

   Excelente trabajo y tutorial… Gracias…

   Responder
   • emedesing dice:

     febrero 14, 2011 a las 2:16 pm

     de nada ahí estamos para ayudarnos

     Responder
4. Francisco dice:

   febrero 11, 2011 a las 11:27 pm

   Realmente increíble, muchas felicitaciones y gracias por compartir el código, lo estudiaré enseguida!

   Responder
   • emedesing dice:

     febrero 14, 2011 a las 2:16 pm

     paja, si haces cosas divertidas con ello pues espero lo compartas

     Responder
5. jhon dice:

   febrero 13, 2011 a las 9:33 am

   ey men muchas gracias me ha servido mucho..pero tengo una duda..como creo otros botones?…..no tengo mucha experiencia en esto apenas empiezo y me serviria mucho su ayuda..gracias

   Responder
   • emedesing dice:

     febrero 14, 2011 a las 2:17 pm

     Hola pues te puedo decir que si se puede crear cuantos botones quieras, te recomiendo cojas algo de experiencia leyendo e informándote mas sobre as3 eso te ayudara mucho

     Responder
     • jhon dice:

       febrero 14, 2011 a las 2:34 pm

       es la idea….pero lo necesito para el jueves..:Sfinales de la universidad..:$

       Responder
       • emedesing dice:

         febrero 14, 2011 a las 2:36 pm

         Pues si no conoces amenos la base con la que fué hecha no creo que lo tengas para el jueves, pero no es complejo eh, solo cheka el código ubica la línea donde se ha creado el botón y analiza como interactua con lo demás, si ves el primer video que deje aquí estoy usando varios botones, así que si es posible
       • jhon dice:

         febrero 14, 2011 a las 2:41 pm

         es que lo que no ocmprendo es donde esta l boton.??..en el fla no veo ni el boton ni el cursor..:$….yo modifiqué en cursor del archivo fairy…pero con este no e podido por que no los veo..:$
       • emedesing dice:

         febrero 14, 2011 a las 2:42 pm

         Esta en el archivo .as, como digo para entenderlo un poco deberías almenos tener una pequeña base de as3
       • jhon dice:

         febrero 14, 2011 a las 2:47 pm

         ..comprendo…igual me ha ayudado bastante viejo..espero en un futuro no lejano compartir lo aprendido
6. Francisco dice:

   febrero 13, 2011 a las 4:09 pm

   Me quedo con una duda Luis, porque se ve tan pixelado siempre?

   Responder
   • emedesing dice:

     febrero 14, 2011 a las 2:20 pm

     se ve pixeleado por la calidad del video (esto fué solucionado en la actualización de la librería ostrich flash web cam que la puedes descargar de la página de dan zen), otro detalle como el video esta pixeleado por su calidad , pues si te das cuenta tambien sucede que el video esta sobre el contenedor esto lo solucionas colocando el video debajo del contenedor, te dejo un artículo que hice al respecto

     http://emedesing.wordpress.com/2010/09/10/colocar-un-objeto-delante-de-otro-as3/

     Responder
     • Francisco dice:

       febrero 14, 2011 a las 6:41 pm

       Tienes toda la razón, funciona muy bien, ahora mucho mejor porque no se pixela tanto, ahora lo que me tiene un poco colgado es porque se me ve tan transparente, con la versión anterior se apreciaban de manera sólida, ahora se ven transparentes, revisé y no encuentro porque.

       Responder
       • emedesing dice:

         febrero 14, 2011 a las 6:43 pm

         Que se ve transparente?, el video o el contenedor de las imagenes, si es el contenedor como te decía lo tienes que colocar delante del video y no detrás
7. jhonD dice:

   febrero 14, 2011 a las 2:49 pm

   ..comprendo…igual me ha ayudado bastante viejo..espero en un futuro no lejano compartir lo aprendido,..

   Responder
8. Renzo dice:

   febrero 21, 2011 a las 3:35 pm

   muchachos me quede antes de crear el movieclip, por el minuto 3:55 del tutorial. no se que procedimiento hace, pero aparece “saving” y después de tener varios frames aparece solo uno.
   Les agradeceria muchisimo la ayuda.

   Responder
9. Ernesto dice:

   marzo 23, 2011 a las 11:46 am

   Hola emedesing, estoy por probar el demo que hiciste, yo estaba en eso mismo del probador virtual, pero los resultados eran muy inestables, veré como lo resuelves. Un saludo para todos.

   Responder
10. Juan dice:

    abril 4, 2011 a las 2:04 pm

    Interesante el tutorial que preparaste; y se vería mucho mejor, si quitas la bolita negra para que los efectos sean notorios solo con el cambio de botones.
    Saludos

    Responder
11. Jesús dice:

    abril 18, 2011 a las 1:32 am

    Hola amigo =), me interesa muchoo tu proyectooo… espero y me puedas ayudar con unas dudas que tengo.. Cómo puedo agregar otro botón en dicha pelicula aparte del q viene por defecto veo q tienes varios borones con diferentes opciones …Por favor me podrias dar una pista de cómo agregaste más botones?? Estoy muy interesadooo ..Bueno hermano te agradezco te antemano y espero q verdaderamente puedas decirm te lo agradeceria mucho =)…Nos vemos y que Dios te bendiga

    Responder
12. Jesús dice:

    abril 18, 2011 a las 7:51 pm

    Tengo bases de AS3 y ya he revisado las líneas de código donde se crea el botón declaré otra variable con otro nombre tmb de tipo OstrichButton pro al parecer la la libreria no me reconoce la segunda variable del botón y me manda un error a la hora de hacer onOver en la pelicula por favor no quiero q me digas sólo dame algunas pistas de cómo crearlo.. es decir… se tiene q e3ditar la libreria en alguna instancia? o cómo se debe declara el segundo botón, en vdd te lo agradeceria mucho…

    Responder
13. Jesús Ramírez Nava dice:

    abril 22, 2011 a las 11:55 pm

    Muchas gracias luis =) jeje Solo se tiene que declarar otra varible similar a como la q está ahi… private var myButton2:OstrichButton; y despues agregar sus escuchadores

    declarar primero asi:

    myButton2 = new OstrichButton (myCursor, button2);
    donde button2 es un boton agregado a la pelicula ya sea dibujado por codigo o por diseño…(si es por diseño se debe definir a la hora de crear el clip en una clase para AS3)

    myButton2.addEventListener(MOTION_OVER, onOver);
    y asi tmb para los tres eventos es decir MOTION_OUT, y MOTION_HOLD..

    Responder
    • Tyler dice:

      julio 5, 2011 a las 7:23 pm

      amigo….hice lo q tu dices arriba, reviamente declaré las variables…pero mi película en flash se cicla y no permite mostrar incluso el botón original…podrías mostrarme de que forma dibujaste el segundo botón???

      Responder
      • Tyler dice:

        julio 5, 2011 a las 7:25 pm

        el error se situa en la sentencia addChild

        Responder
        • Jesús dice:

          julio 6, 2011 a las 9:47 am

          Para cada escuchador de cada boton se tiene q nombrar de forma diferente la funcion, es decir si el primer escuchador de myButtton es:
          myButtton.addEventListener(MOTION_OVER, onOver);
          (MOTION_out, onOut) y asi para los tres
          entonces las funciones del segundo boton seria por ejemplo así:
          myButton2.addEventListener(MOTION_OVER,onOver2); y asi para los tres eventos; se te cicla porq tiene declaradas las mismas funciones para diferente boton entonces flash no sabe a que boton asignarle esa funcion

          Espero y te haya servido, cualquier cosaa aqui estamos… Saludos desde Misantla, Veracruz, Mexico.
    • Tyler dice:

      julio 6, 2011 a las 3:28 pm

      ok, lo haré de esa manera, muchísimas gracias por tu tiempo!!!!, todo sea por el desarrollo de software. Saludos desde Colima!

      Responder
    • Tyler dice:

      julio 7, 2011 a las 7:20 pm

      Jesus, perdón por mi insistencia, gracias a tu ayuda ahora he avanzado más en mi aplicación, para retroceder un fotograma utilizo prevFreame(). No marca ningún error y corre perfecto, solo que no retrocede al momento de colocarme en el botón, no funciona…alguna idea?
      gracias,

      Responder
      • Jesús dice:

        julio 8, 2011 a las 1:44 am

        Claro hermano primero q nada es un gusto ser apoyo, mi e-mail es jesus_reki@hotmail.es.
        Yo enfrenté el mismo problema que tú, y tal vez esto te sirva, simplemente debes cambiar esa sentencia hasta arriba de tu función, ejemplo:
        Supongamos que tienes

        function onOver (e:Event){
        e.target.boton2.alpha = .8;
        prendas.prevFrame();
        }

        lo unico q tendrias hacer es: ponerlo así:
        function onOver (e:Event) {
        prendas.prevFrame();
        e.target.boton2.alpha = .8;
        }
        En realidad no sé el motivo del porq pero ami me funcionó, si no es esa tu duda o no te la supe resolver claramente, no dudes en agregarme bro… que ami tambien me gustaria establecer comunicación con futuros desarrolladores. Espero tu respuesta para q me digas como va tu aplicación hermano.

        Responder
        • Tyler dice:

          julio 8, 2011 a las 6:08 pm

          muchísimas gracias amigo!! ahora funciona a la perfección, tan solo unos pocos detalles de diseño y estará lista!!
          Se te agradece de sobremanera!.. igual te agrego al msn para futuros contactos.
14. Raquel dice:

    abril 28, 2011 a las 12:44 pm

    Si os interesa la información sobre realidad aumentada os invito a que echéis un vistazo a las nuevas aplicaciones que están saliendo relacionadas con ésta tecnología.

    Un saludo,

    Raquel

    http://blog.fraileyblanco.com/2011/04/la-puesta-en-practica-%E2%80%93-realidad-aumentada-del-papel-al-hipermedia/

    Responder
15. LeoNardo dice:

    junio 3, 2011 a las 2:49 pm

    Hola Luis, excelente su blog Loko, tambien soy un apasionado de la programacion, enamorado del flash y action script, hasta ahora me estoy metiendo en esto de la realidad aumentada, gracias a Dios di con su blog buenisimo… El Perú es increible yo vivi por alla, yo tambien tengo un blog pero de referencias ahi lo comparto http://www.guarnicom.com/blog/

    Saludos…

    Responder
16. Miguel dice:

    julio 25, 2011 a las 8:08 pm

    Me parece muy interesante este tema de realidad aumentada y actualmente realizo un trabajo sobre esto, desafortunadamente no tengo muchos conocimientos en Action script , por favor necesito saber como colocar otro botón , de antemano gracias por la ayuda que me puedan prestar

    Responder
17. Lucas dice:

    septiembre 28, 2011 a las 4:20 pm

    Hola, muy bueno lo tuyo la verdad que me sirvio mucho, pero te queria preguntar, tuve un problema, el cursor me sige mucho el movimiento de la cara en vez de las manos, no importa cuanto mueva las manos se queda en la cabeza, es como que quiere ir para las manos pero vuelve a la cabeza, tenes alguna idea de como solucionar esto? o al menos de por que lo hace… muchas gracias

    Responder
18. Lucas dice:

    septiembre 28, 2011 a las 4:20 pm

    Hola, muy bueno lo tuyo la verdad que me sirvio mucho, pero te queria preguntar, tuve un problema, el cursor me sige mucho el movimiento de la cara en vez de las manos, no importa cuanto mueva las manos se queda en la cabeza, es como que quiere ir para las manos pero vuelve a la cabeza, tenes alguna idea de como solucionar esto? o al menos de por que lo hace. espero tu respuesta, muchas gracias por el aporte =D

    Responder
19. maricela dice:

    octubre 3, 2011 a las 11:26 pm

    al abrir el samplebutton.fla me sale formato inesperado porque????

    Responder
    • Lucas dice:

      octubre 11, 2011 a las 4:41 am

      a mi tambien, debe estar dañado, te recomiendo que lo hagas directamente con el videotutorial puesto y te va a salir

      Responder
20. Rodrigo dice:

    octubre 10, 2011 a las 10:55 pm

    lá, sou novato nessa area, estudo design de produto
    e achei muito interessante realidade aumentada.
    sou do Brasil, estou com umas duvidas, como sei pouco
    de actionscript não estou conseguindo acrescentar mais botões !
    como eu faço?
    outra pergunta é como troco a imagem do botao quadrado para outra figura?
    SE ALGUEM PUDER ME AJUDAR!
    muito obrigado desde já amigos!!!

    Responder
21. Daniela dice:

    noviembre 2, 2011 a las 9:09 pm

    hola, necesito una ayuda..lo que pasa es que realice una experiencia de realidad aumentada con el programa Buildar, y quisiera saber cómo puedo hacer para publicar o subir dicha experiencia de realidad aumentada en una pagina web; de tal forma que el usuario pueda realizar la misma experiencia al colocar frente a la webcam el marcador.

    Gracias!!

    Responder
    • ZoiX dice:

      noviembre 5, 2011 a las 11:23 am

      Creo que BuildAR no te deja hacer eso. Sin embargo puedes empezar con los videotutoriales de Aumentality y lograr hacerlo por otro medio que no sea BuildAR.

      Responder
22. Gustavo dice:

    enero 24, 2012 a las 4:30 pm

    Gracias hermano. Esto me sirve muchísimo para una investigación que estoy haciendo sobre RA. Por favor te pido q nos avises sobre novedades. Saludos cordiales

    Responder
    • ZoiX dice:

      enero 25, 2012 a las 10:32 pm

      Gustavo, puedes suscribirte por correo o por RSS

      Responder
23. edison dice:

    febrero 4, 2012 a las 12:44 pm

    Luis me tramo quisiera preguntar que camara utilizas para que se vea muy bien la realidad aumentada, uso la del portatil pero ve muy prixelado muchas gracias.

    Responder
24. morgan dice:

    febrero 7, 2012 a las 10:34 am

    muy bueno

    Responder