Agregar Audio en Realidad Aumentada con ActionScript 3 y Flex Builder

Hola Aumentados!!! El dia de hoy quiero compartir con ustedes un codigo de para agregar Audio en Realidad Aumentada con ActionScript 3 y Flex Builder Premium.

Por estos dias es un poco dificil encontrar librerias que nos permitan hacer realidad aumentada de manera gratuita y de manera rapida y facil (Sobre todo facil).

Cuando aparecieron las librerias para moviles todo se torno mas complejo para aquellos que sabian poco o nada de programacion y cada vez se hizo mas dificil de encontrar tutoriales simples para seguir y conseguir nuestra propia aplicacion. (Siempre pense que era muy engorroso instalar una app en nuestro movil Android o IOS y ademas de eso tener que utilizar un marcador – si quieres conocer una libreria para pc y moviles te invito a ver post anterior AQUI)

Pero a lo que vinimos aca fue a integrar audio a una aplicacion simple de realidad aumentada utilizando una libreria algo antigua (FLARMANAGER) pero que todavia nos permite hacer AR y asi dar nuestros primeros pasos.

El codigo es el siguiente y lo explicare paso a paso:

Antes que nada pueden seguir cualquiera de mis videotutoriales anteriores para aprender a configurar y tener todo listo en Flex Builder para hacer que este codigo y tutorial funcione correctamente.

package
{

//cuando copien y peguen este codigo es posible que deban borrar los comentarios – Inician con //

//Realiamos los import para nuestra aplicacion utilizando Flarmanager
import com.transmote.flar.FLARManager;
import com.transmote.flar.marker.FLARMarker;
import com.transmote.flar.marker.FLARMarkerEvent;
import com.transmote.flar.utils.geom.FLARPVGeomUtils;
import flash.display.Sprite;
import flash.events.Event;
import org.libspark.flartoolkit.support.pv3d.FLARCamera3D;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.DAE;
import org.papervision3d.render.LazyRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

//Utilizamos los import propios de flash para utilizar la utilidad de Audio
import flash.media.Sound;
import flash.net.URLRequest;
import flash.media.SoundChannel;

//Creamos nuestro SWF en el cual se visualizara nuestra aplicacion
[SWF(width=’640′, height=’480′, backgroundColor=’#000000′, frameRate=’40’)]

//creamos las clases y variables que utilizaremos
public class Audio extends Sprite {
private var flarManager:FLARManager;

private var scene3D:Scene3D;
private var camera3D:FLARCamera3D;
private var viewport3D:Viewport3D;
private var renderEngine:LazyRenderEngine;
private var pointLight3D:PointLight3D;

private var marker0:FLARMarker;
private var modelUNOContainer:DisplayObject3D;

//Funcion publica la cual contiene nuestro archivo flarconfig.xml y las acciones de nuestro marcador
public function Audio () {
this.flarManager = new FLARManager(“flarConfig.xml”);
this.addChild(Sprite(this.flarManager.flarSource));
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);
this.flarManager.addEventListener(Event.INIT, this.onFlarManagerInited);
}

//Funcion para inicializar y llamar Flarmanager
private function onFlarManagerInited (evt:Event) :void {
this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);
this.scene3D = new Scene3D();
this.camera3D = new FLARCamera3D(this.flarManager.cameraParams);
this.viewport3D = new Viewport3D(this.stage.stageWidth, this.stage.stageHeight);
this.addChild(this.viewport3D);
this.renderEngine = new LazyRenderEngine(this.scene3D, this.camera3D, this.viewport3D);

this.pointLight3D = new PointLight3D();
this.pointLight3D.x = 1000;
this.pointLight3D.y = 1000;
this.pointLight3D.z = -1000;

//Creacion de nuestro modelo 3D que en este caso se llama Automovil.dae – Ustedes pondran el nombre de su modelo con extension .dae
var UNO:DAE = new DAE();
UNO.load(“Automovil.dae“);
UNO.rotationX = 90;
UNO.scale = 2.5;
this.modelUNOContainer = new DisplayObject3D;
this.modelUNOContainer.addChild(UNO);
this.modelUNOContainer.visible = false;
this.scene3D.addChild(this.modelUNOContainer);
this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
}

//Creamos la funcion que contiene (Cuando nuestro marcador es agregado a la pantalla activandose el audio y mostrando nuestro modelo – deberan cambiar el nombre al audio formato .mp3 que ustedes deseen.)
private function onMarkerAdded (evt:FLARMarkerEvent) :void {
this.modelUNOContainer.visible=true;
this.marker0 = evt.marker;
var MySound:Sound;
var channel:SoundChannel;
MySound = new Sound();
MySound.load(new URLRequest(“Motor.mp3“));
channel =MySound.play(0, 1);
}

//Funcion para cuando nuestro marcador es movido o actualizado en pantalla, asi podremos moverlo a nuestro gusto por la pantalla
private function onMarkerUpdated (evt:FLARMarkerEvent) :void {
this.modelUNOContainer.visible=true;
this.marker0 = evt.marker;
}

//Funcion para cuando nuestro marcador es eliminado o no reconocido en pantalla por la camara web – El modelo y el audio desaparecen.
private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
this.modelUNOContainer.visible=false;
this.marker0 = null;
}

//Funcion de renderizacion y caso if de cuando nuestro marcador es agregado y cargado en nuestra aplicacion
private function onEnterFrame (evt:Event) :void {
if (this.marker0) {
this.modelUNOContainer.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.marker0.transformMatrix);}
this.renderEngine.render();
}
}
}

Para realizar este tutorial les recomiendo vean mis antiguos tutoriales, de esta manera podran hacer correr esta aplicacion en cuestion de minutos y sin mucha dificultada. Si tienen preguntas recuerden que pueden escribirme en la caja de comentarios o escribirme en la fan page de facebook

 

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *