Miguel Moraleda

Flash Media Server es un concentrador de aplicaciones basadas en Flash para conectarse a un centro de mensajería en tiempo real Protocolo (RTMP). El servidor puede enviar y recibir datos hacia y desde el usuarios conectados. Los clientes relacionados entre sí pueden hacer llamadas de procedimiento remoto (RPC) en el lado del servidor y el servidor puede llamar a los métodos específicos en los clientes. Tambien nos brinda la posibilidad de trabajar con SharedObject, los que se usan para sincronizar complicadas estructuras de datos y los métodos de llamada remota en varios clientes de una sola vez. Los objetos se transportan a través de un NetConnection utilizando el Formato de mensaje de acción (AMF), que se maneja transparentemente por el servidor y cliente de flash.

Influxis es una empresa especializada en Flash Media Server, ofrece los servicios de hosting, aplicaciones prefabricadas y recursos FMS para los usuarios, lo que hace que trabajar con FMS sea muy sencillo. La empresa me a dado una cuenta de prueba en sus servidores, es por esto que escribo este articulo, para mostrar lo facil que es trabajar con FMS en Influxis.

Las 10 Razones Mas Importantes Para Escoger Influxis (extraidas desde su sitio)

• Expertos en FMS: Influxis es el unico especialista en FMS en el mercado, apoyado por un equipo interno de Expertos y desarrolladores profesionales en Flash.
• Asociados con Adobe: Influxis tiene acceso a la ultima informacion sobre Adobe, a sus programas de beta y esta entre los primeros en ofrecer al mercado nuevos productos FMS.
• Niveles de Tarifas: Influxis ofrece plandes de precios para acomodar todos los niveles: desde experimentos en pequena escala hasta una red completa de servidores dedicados para las aplicaciones mas robustas.
• Aplicaciones predesarrolladas: Influxis ha desarrollado una biblioteca completa de aplicaciones personalizables para su uso. Todas ellas incluyen archivos .FLA, e incorporan URLs para vinculacion simple o puede incrustar el codigo directamente en su sitio web. Tambien puede descargar archivos facilmente y publicarlos a su sitio web. Todo esto disenado para que usted este funcional lo mas rapidamente posible.
• Tambien somos desarrolladores: Nuestro personal esta compuesto por desarrolladores FMS de tiempo completo ? comprendemos. Ofrecemos ayuda con modificaciones menores en sus aplicaciones. Tambien puede encontrar una pletora de recursos disponibles que incluyen Influxis Labs, Preguntas Frecuentes, Foros, Tutoriales, y nuestro personal interno de desarrollo.
• Servicio al Cliente: Influxis se esfuerza por ir mas alla y proveer personal amistoso y competente para ayudarlo ya sea a comenzar o a resolver un problema.
• Facil de usar. Comience inmediatamente: Su cuenta Influxis se activa inmediatamente al inscribirse, y el Asistente de asdministracion de archivos Influxis simplifica la organizacion de sus archivos, la publicacion de nuevas aplicaciones, y ud. tiene control total sobre la configuracion de su cuenta.
• Red mundial: Influxis tiene una red internacional con ubicaciones en EE.UU. y Europa para despliegue y streaming rapido a todas partes del mundo. Tambien podemos integrar nuestra red especializada de Flash Media Interactive Server con cualquier CDN de terceros o con nuestra solucion hibrida FMS/CDN.
• Sin contratos: Servicio mes a mes le provee flexibilidad para proyectos de corto plazo y campanas publicitarias. Tambien estan disponibles tarifas por evento.
• Nuestros clientes confian en nosotros: Nuestros clientes incluyen empresas Fortune 500, universidades de clase mundial, agencias de publicidad, servicios gubernamentales, deportes profesionales, desarrolladores y muchos mas que confian en nosotros para alojar sus aplicacione FMS.

Me gustaria agregar un punto a esta lista, algo que yo valoro mucho de Influxis, esto es que son uno de los mayores patrocinadores en toda la movida de flash, estan presentes si no en todos, en la mayoria de eventos relacionados a este sector.
Bueno todo esto a modo de introduccion, aca les dejo 2 ejemplos con FMS, el primero es una aplicacion pre-construida de las que ofrece Influxis, es un simple chat pero ambientado en una escena en 3D. El segundo ejemplo lo hice yo y es sobre el uso de los SharedObject con FMS, esta es la manera mas sencilla de mantener a los clientes comunicados entre si, son muy utiles y faciles de usar. Actualmente estoy desarrollando una pizarra interactiva, espero poder tenerla pronto.
Como ultimo tema me gustaria comentarles un poco mi experiencia con Influxis, yo de FMS no sabia nada de nada y me resulto muy facil comenzar a trabajar con el. Con el panel de control de Influxis se me hizo muy intuitivo el tema y ademas simplifica mucho algunos temas mas avanzados, tales como el control del server (subir y bajar apps, limitarlas a dominios especificos, etc), tambien es de gran ayuda tener las aplicaciones pre-construidas, ya que es posible descargar los fuentes. Ademas la disposicion del equipo de soporte es notable, es un placer involucrarse con ellos, por lo que esta demas decir que recomiendo Influxis como solucion de hosting para sus proyectos con FMS, tienen precios muy flexibles, por lo que me parece muy a la mano de todos (planes desde 6 dolares mensuales). Miren su sitio web y veran de que hablo.

Pre-Builded App Massiva3D

Ejemplo SharedObject

Deben abrir abrir el ejemplo 2 veces haciendo click en la imagen. Luego dragear los logos y veran como se mueven en ambas ventanas.

Que es HYPE?

HYPE es un nuevo framework desarrollado por Joshua Davis y Branden Hall que tiene como principal objetivo ayudar a los artistas graficos a volver a involucrarse con el codigo, ya que desde actionscript 3 y el enfoque de programacion orientada a objetos, es mucho mas dificil para estos desarrollar aunque sea cosas simples. HYPE brinda un conjunto de clases para el facil y rapido desarrollo de funcionalidades, tales como, sound analysis, object pooling, swarm behaviours, shape layout, grid layout y un extenso etc.
Claramente esto no limita a los programadores a usar HYPE, a mi modo de ver es un gran conjunto de utilidades, facilmente extendible y rehusable.

Descarga e instalacion

Primero que todo, deben descargar la libreria, desde la pagina oficial o directamente desde haciendo click aqui, tambien pueden hacerlo desde el repositorio en github.

Para poder usarlo en nuestros proyectos hay dos formas, la primera que mencionare es el archivo MXP que se lo pueden instalar directamente a su Flash IDE usando “Adobe Extension Manager CS4″, yo la verdad es que no manejo mucho este tema pero esta explicado en la pagina de instalacion. La segunda forma (la que yo uso) es setear el path al source de la libreria en los “source path” del Flash IDE. (edit – preference – actionscript – Actionscript 3.0 settings) y listo, ya pueden usar HYPE en sus proyectos.

Descripcion rapida de algunas clases

• BitmapCanvas: Captura un DisplayObject en un Bitmap, esto nos permite dibujar en el Bitmap muy facilmente.
• FilterRhythm: Aplica un array de filtros a un BitmapData con un ritmo especifico.
• DirectionalVibration: Hace vibrar una propiedad en una direccion dada.
• ColorPool: Permite manejar una lista de colores y colorear objetos con colores al azar desde el listado.
• GridLayout: Permite crear una malla de manera simple.
• ObjectPool: Crea y maneja pools de objetos.
• Oscillator: Oscila una propiedad con una onda especifica.
• ShapeLayout: Permite posicionar objetos en una forma dada.
• SoundAnalyzer: Facil manejo de las frecuencias de sonido.
• Swarm: Permite que lo objetos se muevan hacia un punto.
• MouseFollow: Hace que un objeto dado siga al mouse

Mi primer Ejemplo

DESCARGAR EJEMPLO
VER EJEMPLO FUERA DE ESTA WEB

Links

http://stranskydesign.com/blog/hello-hype-what-is-hype-the-flash-as3-framework/
http://thesven.com/?tag=hype
http://www.georgiefurst.co.uk/blog/?p=254
http://active.tutsplus.com/tutorials/workflow/introduction-to-the-hype-actionscript-3-0-framework/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+Flashtuts+(Activetuts%2B)
Video channel at Vimeo

Este es un tema que me preocupa bastante desde hace algun tiempo, sobre todo cuando hago trabajos freelance, ya que siempre estoy pensando que al mostrar los avances descompilaran el SWF y desapareceran. Bastante paranoico de mi parte pero no esta tan alejado de la realidad (posible). Afortunadamente nunca tuve algun problema al respecto, pero igualmente prefiero estar protegido al respecto. Ademas estos abusos tambien se usan con otros fines tales como el robo de ideas, busqueda de fallas de seguridad o exploits, etc. Tambien es un tema muy importante cuando tu aplicacion reparte premios con valor comercial, ya que es mas tentador aun el tema de conseguir algun beneficio de forma truculenta.

Cualquiera que posea una copia de un descompilador de SWF puede mirar nuestro codigo actionscript. Tipicamente nos protegemos de este abuso agragando licencias al codigo, mecanismos de proteccion de copias y derechos de autor. Sin embargo esto solo nos cubre en el ambito legal. Pero cualquiera puede acceder a tu codigo pasa abusar de el, ya sea para extraer partes, encontrar fallas de seguridad, extraer ideas, etc.

Actionscript es un lenguaje muy facil de descompilar, existen mas de 22 descompiladores hoy en dia. Esto no es una falla de diseño en el lenguaje, es simplemente una realidad de los lenguajes interpretados, tales como Java, .NET, etc.

La encriptacion del SWF (mas bien la ofuscacion del codigo) hace que al descompilar nuestro SWF, el codigo sea confunso y dificil de entender. Cabe mencionar que no es una encriptacion real.

Bueno por ultimo y para no extenderme mas, a pesar de toda la proteccion que nos brinda la ofuscacion del codigo seguimos vulnerables ante la redistribucion ilegal de nuestra aplicacion, cualquiera puede descargar el SWF y publicarlo en otro sitio. Para solucionar esto secureSWF tiene un sistema de proteccion de dominios (la pelicula solo funcionara dentro de los dominios que nosotros especifiquemos) y ademas un loader encriptado (genera un swf aparte que sera el cargador de nuestra pelicula, asigna nombres encriptados al swf y lo desencripta en tiempo de ejecucion haciendo mucho mas complejo el tema de descargar nuestro swf), la gracia de esto ultimo es protegernos de ataques de SWF rippers o grabbers, que van recolectando cuanto SWF encuentran.

secureSWF es una de las mas sofisticadas herramientas para la ofuscacion de Actionscript y es una buena solucion de proteccion para tus aplicaciones creadas con Flash y Flex.
Con secureSWF estaras protegido contra los programas de descompilacion, prevendras la copia y redistribucion ilegal y te ayudara a incrementar la seguridad en tus aplicaciones. Cabe destacar que la interfaz del programa es muy intuitiva, por lo que se hace muy facil empezar a trabajar con el programa. Ademas la documentacion es excelente.

Que hace la encryptacion SWF de secureSWF

Que partes del codigo oculta la ofuscacion de secureSWF

Primeros pasos con secureSWF

Manual secureSWF

Demostracion de secureSWF

Solo a modo de ejemplo cree esta clase bastante sencilla para que vean el resultado de la encriptacion con secureSWF.

Antes

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
 
	public class Main extends Sprite
	{
		private var _draw:Sprite;
 
		public function Main()
		{
			super();
			configStage();
			createDraw();
			testFor();
		}
 
		private function testFor():void
		{
			for (var i:int = 0; i < 10; i++) 
			{
				trace(i);
			}
		}
 
		private function createDraw():void
		{
			_draw = new Sprite();
			addChild(_draw);
			_draw.graphics.beginFill(0xff0000);
			_draw.graphics.drawRect(0, 0, 100, 100);
			_draw.graphics.endFill();
		}
 
		private function configStage():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.quality = StageQuality.BEST;
			stage.align = StageAlign.TOP_LEFT;
		}
	}
}

Despues

package
{
	import flash.display.*;
 
	public class do extends Object
	{
		public function do(  )
		{
			var _local_1:boolen;
			var _local_2 = false<NULL&param2;
			if( _local_2&&_local_1 )
			{
			}
			if( _local_2 )
			{
				this.break();
				if( _local_2 )
				{
					this.if();
					if( _local_2&&_local_2 )
					{
						this. do();
					}
					return;
		}
		private function if(  ):void
		{
			var _local_1:boolen;
			var _local_2 = ^===<-^false++;
			if( _local_1 )
			{
				 case = new Sprite();
				if( _local_2&&this )
				{
				}
				addChild(this. case);
				if( _local_2&&_local_1 )
				{
					this. case.graphics.beginFill(16711680);
					if( _local_1 )
					{
						_local_2 = 0>0;
						drawRect(,this instanceof 0-0,100,100);
						this. case.graphics.endFill();
					}
				}
				return;
		}
		private var  case:Sprite;
		private function break(  ):void
		{
			var _local_1:boolen;
			var _local_2:Object;
			if( _local_2 )
			{
			}
			stage.scaleMode = StageScaleMode.NO_SCALE;
			if( _local_2 )
			{
				stage.quality = StageQuality.BEST;
				if( 0-0||this )
				{
					stage.align = StageAlign.TOP_LEFT;
				}
				return;
		}
		private function  do(  ):void
		{
			var _local_2 = true as param2>=param2;
			var _local_3:boolen;
			var _local_1:int;
			while( _local_1<10 )
			{
			}
			return;
		}
	}
}

Como veran el codigo queda hecho una locura, pero hace exactamente lo mismo que el original. Para este ejemplo, solo use la encriptacion standart, existen otras mas potentes y otras mas suaves. , activando mas protecciones no podia descompilar el ejemplo, ya que el descompilador crasheaba… muy bueno!!!
Bueno con este ejemplo cierro el articulo, espero les haya parecido interesante. Cualquier comentario o duda sera bienvenida.

Auspiciado secureSWF

Evaluar si un punto esta dentro de un poligono es una operacion basica, pero eso yo no lo sabia hasta que bueno, llega el momento en que es necesario. Perdi bastante tiempo investigando al respecto, asi que ahora comparto con ustedes el resultado, por si puede ahorrarle tiempo a alguien. No detallare la explicacion, les dejo un link al ejemplo funcionando, el codigo y la referencia al sitio de donde saque la informacion. Saludos

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
31
32
33
34
35
36
37
38

private function insidePolygon(pointList:Array, p:Point):Boolean
{
	var counter:int = 0;
	var i:int;
	var xinters:Number;
	var p1:PointTest;
	var p2:PointTest;
	var n:int = pointList.length;
 
	p1 = pointList[0];
	for (i = 1; i <= n; i++)
	{
		p2 = pointList[i % n];
		if (p.y > Math.min(p1.y, p2.y))
		{
			if (p.y <= Math.max(p1.y, p2.y))
			{
				if (p.x <= Math.max(p1.x, p2.x))
				{
					if (p1.y != p2.y) {
						xinters = (p.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x;
						if (p1.x == p2.x || p.x <= xinters)
							counter++;
					}
				}
			}
		}
		p1 = p2;
	}
	if (counter % 2 == 0)
	{
		return(false);
	}
	else
	{
		return(true);
	}
}

DEMO
SOURCE
Reference

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.

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.

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

VER EJEMPLO
DESCARGAR EJEMPLO

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();
		}
	}
}

Simplemente impactante.

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

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

El atributo “arguments” lo tenemos dentro de cada funcion. Este atributo es un simple array que contiene los datos que recibio la funcion como parametros.

Tiene dos variables publicas:

callee -> que es una referencia de la funcion llamadora (muy util)
lenght -> el numero de atributos que recibio la funcion.

Aca les paso el codigo de ejemplo que esta en el manual de referencia de adobe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package {
    import flash.display.Sprite;
 
    public class ArgumentsExample extends Sprite {
        public function ArgumentsExample() {
                println("Hello World");
        }
 
        public function println(str:String):void {
            trace(arguments.callee == this.println); // true
            trace(arguments.length);                 // 1
            trace(arguments[0]);                     // Hello World
            trace(str);                                // Hello World
        }
    }
}

La siguiente es una mas de las opciones de actionscript 3, consiste en decirle a una funcion que recibe como parametro un array de largo indeterminado. Esto viene siendo como la sobrecarga de funciones en java, realmente no es tan potente y en cierta medida me parece una construccion un poco fea, porque para sacar los attributos se debe “hardcodear” el orden de los attributos y realizar un switch para realizar distintas acciones dependiendo del numero de parametros que recibio, o su tipo.

private function testDynamicArguments(...args):void
{
	trace("Se recibio: " + args + "numero de argumentos: " + args.length);
 
}