Tutorial Actionscript 3 – How To Google Maps API

domingo, 19 de julio de 2009 miguelMoraleda 3 comentarios

En esta ocacion voy a explicar brevemente como utilizar el API de google Maps.

1.- Lo primero que deben hacer es conseguir una API Key para poder conectarse.
Para solicitar la key deben ir a http://code.google.com/apis/maps/signup.html

En ese sitio, luego de leer y aceptar los terminos y condiciones deben especificar el dominio de su pagina. Para luego obtener su key.

googleMaps

2.- El siguiente paso es descargarse el kit de google con las librerias para actionscript y flex.
El kit lo pueden descargar directamente haciendo click aca
El kit contiene dos archivos .swc, uno para flash y el otro para flex. En este ejemplo yo utilize el de flash.

3.- Con la key y la api ya estamos listos para empezar a trabajar. Lo primero que deben hacer es crear un nuevo proyecto y configurar su Flash IDE para que incluya el archivo .swc de la API. Para hacer eso deben ir a edicion-preferencias-actionscript-actionscript 3 se les abrira una ventana que contiene todos los class path a sus distintas librerias y en la parte para las librerias deben agregar la carpeta que contiene el .swc de la API de google.

4.- Ahora directo al codigo.

1
2
3
4
5
6
7
8
9
10
11
var _map:Map = new Map();
_map.key = "ACA DEBEN PONER SU KEY";
_map.language = "es";
_map.setSize(new Point(stage.stageWidth, stage.stageHeight));
_map.addEventListener(MapEvent.MAP_READY, onMapReady);
_map.y = 50;
addChild(_map);
 
function onMapReady(event:Event):void {
	_map.setCenter(new LatLng(40.736072, -73.992062), 14, MapType.NORMAL_MAP_TYPE);
}

Con estas pocas lineas ya tenemos en nuestra aplicacion conectandose a google maps y mostrando el mapa del mundo.

googleMapsExample

Ojala este pequeño post le sirva a alguien. Cualquier duda, consulta o sugerencia sera bien recibida.

VER EJEMPLO
DESCARGAR EJEMPLO



Categories: Actionscript 3, Flash Tags:

Tutorial actionscript3 – Loading sound and play as loop

viernes, 10 de julio de 2009 miguelMoraleda 2 comentarios

Un ejemplito de como cargar un sonido y reproducirlo en loop para los que estan empezando. El codigo es bastante sencillo asi que no voy a detallar mucho.
La clase SoundChannel sirve para controlar sonidos, tiene el metodo stop() para detener el sonido y usa una clase SoundTransform para controlar parametros como el volumen o el pan.
La clase Sound es para almacenar el archivo en si. la clase te permite cargar un mp3 y ponerle play.
Todo lo que comento de estas clases es muy por encima, son mucho mas complejas que eso. Pero bueno para los que comienzan con esto del actionscript les puede ser de ayuda.

DESCARGAR EJEMPLO

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.URLRequest;
 
	/**
	 * This class load a sound and play it in loop.
	 * @author http://www.miguelmoraleda.com
	 */
	public class Main extends Sprite
	{
		private var soundFactory:Sound;
		private var song:SoundChannel;
 
		public function Main()
		{
			super();
 
			loadSound("sound.mp3");
		}
 
		/**
		 * Load the sound
		 * @param	url
		 */
		private function loadSound(url:String):void
		{
			var request:URLRequest = new URLRequest(url);
            soundFactory = new Sound();
            soundFactory.addEventListener(Event.COMPLETE, completeHandler);
            soundFactory.load(request);
		}
 
		/**
		 * When sound is loaded, play it.
		 * @param	e
		 */
		private function completeHandler(e:Event):void
		{
			soundFactory.removeEventListener(Event.COMPLETE, completeHandler);
			playSound();
		}
 
		/**
		 * Play the sound and add listener to sound complete.
		 */
		private function playSound():void
		{
            song = soundFactory.play();
			song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
		}
 
		/**
		 * when the sound is finish play again.
		 * @param	e
		 */
		private function soundCompleteHandler(e:Event):void
		{
			song.removeEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
			playSound();
		}
	}
}
Categories: Actionscript 3, Flash Tags:

Augmented Reality – levelHead v1.0, 3-cube speedrun

sábado, 23 de mayo de 2009 miguelMoraleda 1 comentario

Simplemente impactante.

Pueden leer mas sobre el proyecto aca:
http://julianoliver.com/levelhead

Categories: Actionscript 3, Flash Tags:

Unity3D Game Development Tool – Example

miércoles, 13 de mayo de 2009 miguelMoraleda 3 comentarios

Unity3D es una relativamente nueva herramienta para desarrollar juegos tanto 3D como 2D. Inicialmente existia solo para Mac, pero hace aproximadamente 2 meses esta liberada la version para Windows. Unity3D nos ofrece la posibilidad de hacer aplicaciones de escritorio, web, para i-phone y hasta para wii. Todo un arcenal el de esta aplicacion, aunque solo podran disfrutarlo los que esten dispuestos a pagar aproximadamente 1500 dolares para la version completa. Por ahora yo solo tengo su version Indie, que es un poco mas limitada pero mas economica (200 dolares). Para el que este interesado en buscar mas informacion al respecto le recomiendo comenzar por el sitio oficial del programa http://unity3d.com/

Por mi parte estuve jugando un poco y esto es lo que salio, una especie de pista free style para un hummer. El ejemplo por sobre todo es bastante precario pero lo importante es que me llevo 2 dias hacerlo. La curva de aprendisaje con unity3d se eleva rapidamente. En el ejemplo se puede conducir el hummer y cambiar la camara con los numeros del 1 al 3.

Para ver el ejemplo es necesario descargarse el player de unity, que de no tenerlo instalado al visitar el ejemplo les mostrara un link para descargarlo.


VER EJEMPLO

hummer
hummer2


Categories: Unity3D Tags:

Tutorial JigLibFlash – How to create basic physics 3d scene.

viernes, 24 de abril de 2009 miguelMoraleda 10 comentarios

Jiglibflash is a open source 3D physics engine with a MIT license (ported from c++ Jiglib). Official Web

Para empezar voy a detallar un poco los conceptos para los que no estan muy interiorisados con el tema. JigLibFlash es un motor de fisica 3D. Esto NO! quiere decir que sea un motor de 3D. JigLib es solo la parte que simula la fisica dentro de una scena3D. Es por esto que primero que todo deben tener un motor de 3D, tal como Papervision3D, Away3D, Sandy, etc. Para este ejemplo voy a utilizar Papersivion3D que es el motor que vengo usando hace ya un tiempo.

Lo primero es configurar la parte 3D, en papervision3D se necesita un viewport, una camara, un render engine y una scena. Para hacer esto facil vamos a extender de la clase BasicView que ya implementa todo este sistema para poder renderear en 3d. La idea de esto es no tener que explicar muchas cosas que son netamente de pv3d y ver directamente lo que a JigLib refiere.
Bueno nuestra clase deberia verse asi. La funcion startRendering() hace que comienze a renderear pv3d, esto hace que la funcion onRenderTick sea llamada en cada frame.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package
{
	import flash.events.Event;
	import org.papervision3d.view.BasicView;
 
	public class Main extends BasicView
	{
		public function Main()
		{
			super(0, 0, true);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event = null):void
		{
			super.onRenderTick(event);
		}
 
	}
 
}

Con esa base ya podemos comenzar a integrar lo necesario para simular la fisica. JibLibFlash trae unas classes plugin para interactuar con cada motor 3d especifico. Dentro de la libreria van a encontrar una clase que se llama Papervision3DPhysics, esta clase encapsula todo lo necesario para que JigLib funcione, ademas de brindarnos algunas funciones para crear objetos de manera sencilla.
Continuando con el ejemplo, vamos agregar una instancia de esta clase.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package
{
	import flash.events.Event;
	import jiglib.plugin.papervision3d.Papervision3DPhysics;
	import org.papervision3d.view.BasicView;
 
	public class Main extends BasicView
	{
		private var _physics:Papervision3DPhysics;
 
		public function Main()
		{
			super(0, 0, true);
 
			initPhysics();
			startRendering();
		}
 
		private function initPhysics():void
		{
			_physics = new Papervision3DPhysics(scene, 7);
		}
 
		override protected function onRenderTick(event:Event = null):void
		{
			_physics.step();
			super.onRenderTick(event);
		}
	}
}

De aca solo dos lineas a destacar (no se para que copio tanto codigo), la creacion de la instancia recibe en el constructor la scena(Scene3d de pv3d) y la velocidad, la velocidad es una constante para toda la libreria. Y la otra linea es fundamental _physics.step(); que debe hacerse en cada frame para ir actualizando todo, es por esto que esta dentro de la funcion onRenderTick y antes del super para que primero actualize todos los valores relacionados a la fisica y luego renderee los objetos.

Con esas pocas lineas tenemos lo necesario para el ejemplo. Ahora solo resta agregar objetos a la scena, para esto la clase Papervision3DPhysics tiene algunas funciones para hacer esto de manera sencilla.

Crear Suelo

1
2
3
4
5
private function createGround():void
{
	var mat:WireframeMaterial = new WireframeMaterial(0xCCCCCC);
	var ground:RigidBody = _physics.createGround(mat, 1000, 0);
}

Crear Cubos

1
2
3
4
5
6
7
8
9
10
private function createBox():void
{
	var materials:MaterialsList = new MaterialsList();
	materials.addMaterial(new WireframeMaterial(0xFF4444), "all");
	var box:RigidBody;
	for (var i:int = 1; i < 5; i++) {
		box = _physics.createCube(materials, 100, 100, 100, 3, 3, 3);
		box.y = 300 * i;
	}
}

Crear Esferas

1
2
3
4
5
6
7
8
9
private function createSphere():void
{
	var ball:RigidBody;
	for (var i:int = 1; i < 4; i++) {
		ball = _physics.createSphere(new WireframeMaterial(0xFF44FF), 50);
		ball.z = -200;
		ball.y = 300 * i;
	}
}

Estas son las 3 posibilidades que nos ofrece la clase Papervision3DPhysics. Tambien es posible crear los objetos de manera mas abstracta pero no voy a tocar ese tema por ahora. Asi concluyo con este tutorial, espero que a alguien le sea de ayuda.

VER EJEMPLO
DESCARGAR ARCHIVOS DEL TUTORIAL

Categories: JigLibFlash Tags:

Google Realese O3D – open-source web API for creating interactive 3D applications in the browser

viernes, 24 de abril de 2009 miguelMoraleda Sin comentarios

O3D es un nuevo API de google para crear aplicaciones 3D interactivas en un browser. Puedes obtener mas informacion y ver mas ejemplos en el siguiente link

Google Code O3D

Categories: etc Tags:

Tutorial actionscript 3 – How to read and save file in Adobe Air

miércoles, 22 de abril de 2009 miguelMoraleda 1 comentario

Este es un sencillo ejemplo de como leer y guardar datos en Air.

DESCARGAR EJEMPLO

Categories: Air, Flash Tags:

Tutorial Actionscript 3 – How to use a webcam on Flash

sábado, 18 de abril de 2009 miguelMoraleda 5 comentarios

Aca les dejo un ejemplo de como usar su camara web con actionscript. Realmente no tiene ninguna ciencia.
Aca el codigo, mas abajo pueden ver y/o descargar el ejemplo

1
2
3
4
5
6
7
8
9
10
//Creo una instancia de video de 640x480
video = new Video(640, 480);
//Obtengo la referencia a la camara
camara = Camera.getCamera();
//setMode configura el width, height y framerate de la camara
camara.setMode(640, 480, 30);
//Atacho la camara al video.
video.attachCamera(camara);
//finalmente agrego el video al scenario
addChild(video);

VER EJEMPLO
DESCARGAR EJEMPLO

Categories: Actionscript 3, Flash Tags:

Facebook game – Football Soccer Challenge

jueves, 9 de abril de 2009 miguelMoraleda 1 comentario

footballsoccerchallenge
Este juego es un projecto personal que desarrolle para un concurso de papervision3d, despues de crearlo me dije a mi mismo, porque no hacerlo un juego real y ponerlo en facebook. El juego consiste en mantener una pelota de futbol en el aire haciendole clicks. Mientras logres mantener la pelota en el aire iran apareciendo bonus los cuales puedes comer con la pelota, existen 3 tipos de bonus: uno que achica la pelota, uno que la patea en cualquier direccion y por ultimo uno que te recupera la gravedad, ya que, la gravedad va aumentando por cada patada que le das a la pelota, lo que hace mas dificil mantenerla en el aire.

Puedes probar en juego en:
http://apps.facebook.com/footballsoccer/

Tus sugerencias o comentarios serian de mucha ayuda.

Categories: Flash, Games Tags:

Actionscript 3 – Papervision3D Interactive Collada, DAE objects.

lunes, 30 de marzo de 2009 miguelMoraleda 5 comentarios

Para los que no saben lo que es un Collada o DAE, los archivos Collada son modelos 3D, exportados a formato xml. Basicamente se define dentro de este xml, cada vertice, mesh, material, etc. de un objeto. Si se estan preguntando para que podria llegar a servir esto, la respuesta es sencilla, para transportar de manera universal los modelos a otras tecnologias, como en este caso es papervision3D, que posee un DAEParser que genera estos modelos en nuestro escenario.

Mas informacion de los archivos Collada en wikipedia

Para lograr que un objeto collada sea interactivo dentro de papervision3D, debemos cumplir con los siguientes requerimientos:

  • Que el viewport sea interactivo…. viewport.interactive = true.
  • Que todos los materiales del collada tambien sean interactivos.
  • Y por ultimo, pero lo mas importante agregar el listener para el InteractiveScene3DEvent en cada uno de los objetos dentro de nuestro collada.

Como en general, si estan trabajando con colladas descargados de por ahi y no creados por ustedes mismos, no sabran que cantidad de subobjetos tenga su collada, y lo mismo para la cantidad de materiales, es por eso que para agregar los listeners yo uso una funcion recursiva que se los agregue a cada child. Para los materiales es un poco mas sencillo, accediendo a la lista de materiales del objetos puedes setearlos a todos como interactivos.

Aca les pongo un ejemplo de como seteo cada material como interactivo:

1
2
3
4
5
6
7
private function setInteractiveMaterials(targetObject:DisplayObject3D, value:Boolean):void
{
	for each(var mat:MaterialObject3D in _targetObject.materials.materialsByName)
	{
		mat.interactive = value;
	}
}

Luego de tener todos los materiales del objeto como interactivos solo resta agregar el listener a cada child. Eso lo hago mediante la siguiente funcion.

1
2
3
4
5
6
7
8
private function addEventListeners(displayObject:DisplayObject3D, eventType:String, listener:Function):void
{
	displayObject.addEventListener(eventType, listener);
 
	for each(var child:DisplayObject3D in displayObject.children) {
		addEventListeners(child, eventType, listener);
	}
}

La llamada a la funcion seria algo asi:

1
addEventListeners(_obj, InteractiveScene3DEvent.OBJECT_PRESS, daePressedHandler);

Realmente no estoy seguro si esta es la mejor manera de hacer eso, cualquier sugerencia y/o comentario sera bien recibido.

VER EJEMPLO
DESCARGAR EJEMPLO PARA CS4
DESCARGAR EJEMPLO PARA CS3

Categories: Papervision3d Tags:
Get Adobe Flash playerPlugin by wpburn.com wordpress themes