ActionScript 3 | Motion.com.mx

Categor�a: ActionScript 3
Algunos datos utiles antes de empezar con Red5
Categoría: ActionScript 3, Flash, Guadalajara, Mexico, Server Side, rtmp | Fecha: 01.09.2010 | Leer : link
He conocido a varias personas a travez de emails, foros y chats que en algun momento me pidieron ayuda para usar red5, muchas de las dudas no eran pequeñas sino que realmente me pedían que los guiara paso a paso por todo el proceso de creación de aplicaciones multiusuario obviamente tuve que negarme pero los entiendo, recuerdo que iniciar con red5 no es nada sencillo es un mundo de conceptos, tecnologias y apis que conocer.

Con la intención de ayudar a todas esas personas que estan batallando con red5 aqui menciono algunos datos importantes del estado actual de red5 ya que pienso que antes de iniciar el proceso de aprendizaje en esta tecnología lo importantes es saber si cumple con las necesidades o espectativas de los programadores o de los proyectos a desarrollar.
- Red5 actualmente puede hacer streaming de video en formato flv
- Puede hacer streaming de h.264 pero es inestable (creo que tiene problemas cuando se hace seek)
- Los shared object funcionan genial
- La cantidad maxima de usuarios que red5 puede soportar es definida por las características de la maquina en la que se ejecuta (procesador, memoria, ancho de banda)
- Red5 requiere los permisos necesarios para utilizar el puerto tcp 1935 (abrir y recibir conexiones)
- Opcionalmente red5 puede usar RTMPS, RTMPT (tunnel)
- Red5 puede correr a la par de apache u otros servidores
- Es open source
- Eclipse es el IDE mas usado para java y funciona muy bien para desarrollo red5
- Sirve para crear aplicaciones multiusuario
- Funciona en Win, linux, solaris y unix ya que esta hecho en java
Desventajas :
- La curva de aprendizaje es muy larga
- Tiene bugs y aun no llega a la version 1.0
- El uso de proxy de algunas redes bloquean el RTMP sobre el puerto 1935
- Hay que saber de OOP , java y as3 para programar con red5
- La creacion de un ambiente de pruebas es bastante dificil de lograr para los principiantes
- Existen mejores opciones por un costo reducido
- Generalmente red5 requiere de un servidor dedicado (no es posible instalarlo en un hosting normal)
- La creacion de aplicaciones es a base de prueba y error, el proceso de reiniciar red5 para modificar una app hace muy tardado el proceso de debugging
- Relativamente existen muy pocos programadores para tecnologias como red5 o servidores multiusuario, por esta razon es dificil conseguir ayuda y dar mantenimiento a una aplicacion generalmente depende de un solo programador lo que representa un riesgo para las agencias de desarrollo
Yo soy un gran fan de red5 de hecho mas que de FMS, he trabajado con este servidor en mas de 20 proyectos los cuales todos resultaron muy interesantes y con gran aceptación, siempre he pensado que el futuro del internet son los sistemas en tiempo real, lamentablemente en México me he topado con una gran barrera en la que las agencias y empresas no quieren experimentar con tecnologías nuevas o emergentes, en cambio solo quieren hacer lo que los lideres en tecnología o marketing digital realizan, siempre un paso detras de los lideres.

El mejor consejo que puedo dar es considerar las desventajas que un proyecto open source puede tener, en algunos casos ahorrarse dinero resulta en perdidas mayores, insisto soy fan de red5 y creo que funciona genial pero no lo recomiendo para principiantes a menos que esten dispuestos y tengan el tiempo para aprenderlo.

Algunos demos que he realizado:

http://minichat.motion.com.mx/

http://motion.com.mx/chat3d/

http://motion.com.mx/tests/
A note about when not to use sharedobjects
Categoría: ActionScript 3, Flash, Server Side, rtmp | Fecha: 29.08.2010 | Leer : link
This post is more like a personal note that i will like to share with other FMS or red5 developers about when in my opinion is better to use direct messages instead of sharedobjects.

I was required to create a project where a client has to be aware about other users status and be able to invite only one user to a private chat so i tried to create a main sharedobject and each of its properties to be identified by an userID and each of these properties own an array of data (privateMessage, status, etc..), this looked like a good solution to share users status but using this single sharedobject to send an receive chat messages didnt worked mainly for 2 reasons:
- the messages should be privated for only 2 users but my main shared object was created to be public since “it shares its data” to all clients
- and second and most important it was sending unnecesary data to all the clients (all that private messages not destinated to them)
And not to mention that developing AS3 code using that code structure was giving me a lot of problems wich i was trying to work around.

So after getting away from the project for some time i came with the solution very simple and obvious :
- Only use shared objects when you try to share data massively (at least 3 clients connected per shared object)
- For cases where only 2 clients comunicate should use direct messages calling server methods
Why not create sharedobjects on the fly for cases where there are only 2 clients ? well in my experience using red5 it is kind of problematic because first some of the 2 clients should order the server to create the shared object then the server should order both clients to connect to that sharedobject and then the communication is stablished but trying to connect to a newly created shared object in red5 sometimes didnt worked for some of my 2 clients, somehow red5 was creating 2 SO’s with same name so i recommend at least for now to use direct server method calls like nc.call(“sendMessageToFriend”,responder,remoteUserId).

Hope this make sense to other red5 developers .
Galeria de fotos con facebook connect
Categoría: ActionScript 3, Flash, General, Guadalajara, Mexico, facebook | Fecha: 30.06.2010 | Leer : link

Aqui esta el link a la nueva galeria de fotos para que vean sus fotos con estilo :

Galeria de fotos tipo pollaroid con facebook

Para modificar el orden en el que las fotos aparecen se debe trazar una linea sobre cualquier parte de la aplicacion .

Aun me falta agregarle funcionalidad pero es un demo inicial de lo que podemos hacer en motion.mx espero les guste y que lo compartan con sus amigos de facebook.

Visualiza tus fotos de facebook con esta galeria
Gráfica de barras multiples
Categoría: ActionScript, ActionScript 3, General, Uncategorized | Fecha: 24.03.2010 | Leer : link

Este es un experimento que se me ocurrio ayer , es una clase para generar una barra de X tamaño dividida en un numero variable de segmentos que representan datos , lo interesante es que esta clase calcula sola el tamaño de cada segmento haciendo una sumatoria de todos los datos y calculando el porcentaje de tamaño de cada uno de los segmentos todo esto con el plus de usar Tweener para hacer transiciones de tamaños .

Utilizando varias barras se puede crear rapidamente una grafica que obtenga datos en tiempo real consumiendo algun servicio como wsdl o rtmp.

Aqui pueden descargar el codigo y para ver un demo hagan click en la imagen.

grafica de barras multiples para datos en tiempo real
Desarrollando con video en vivo
Categoría: ActionScript 3, Flash, General, Guadalajara, Mexico, Server Side | Fecha: 09.02.2010 | Leer : link

Es extraño que no haya mencionado que me gusta mucho el desarrollo de aplicaciones en tiempo real, generalmente dedico 2 o 3 horas de mi tiempo libre cada semana a crear una nueva aplicación que utilice video en vivo o interacción multiusuario.

En este momento desarrollo tres aplicaciones que espero publicar pronto.

La primera aplicacion es un videochat que permitira al usuario ver la webcam en vivo de los demás usuarios y como inovación permitira ver lo que un usuario dijo o hizo hasta 5 minutos antes basicamente como un rewind del video en vivo (a esta tecnología le llaman DVR functionality).

La segunda aplicación es un “desktop sharing” o “screen sharing” , con este sistema es posible publicar lo que sucede en la pantalla de un usuario a internet de esta forma usuarios remotos serán capaces de abrir un sitio web y visualizar la pantalla del expositor remotamente usando video de alta calidad, puede ser usado en sistemas e-learning o conferencias a travez de internet.

La tercera aplicacion esta mas relacionada en mejorar la calidad de video en vivo utilizando tecnicas de optimizacion y de encoding de video que permitiran a mis otras aplicaciones publicar o visualizar video de alta calidad (High Definition) .

El mayor reto en las 3 aplicaciones es mantener costos relativamente bajos debido a que cualquiera de estos sistemas funcione se necesitan grandes cantidades de recursos en linea , tecnologías un tanto costosas y los tiempos de desarrollo son mayores a los normales, aun asi creo que he mantenido los costos de desarrollo en un nivel aceptable utilizando tecnologías open source y optimizando recursos.

Si alguien necesita contactarme mi email es contactomotion.com.mx , este email solo es para contacto con clientes , si necesitan ayuda sobre como programar algo utilicen los comentarios de los posts donde intentare responderles u otros usuarios lo harán.
Conciencia Ecológica
Categoría: ActionScript, ActionScript 2, ActionScript 3, Uncategorized | Fecha: 23.01.2010 | Leer : link

Me tope con dos links interesantes a favor de la ecologia , el primero es un video y el segundo es un blog a favor de los animales . Vale la pena verlos.

Hago este post para contribuir a la difusion de la causa .

http://www.youtube.com/watch?v=jqxENMKaeCU

http://www.cuestionderespeto.com/
ajustar tamaño simetricamente (resize constrains proportions)
Categoría: ActionScript, ActionScript 3, Flash, General, Mexico | Fecha: 17.08.2009 | Leer : link

Necesitaba crear una funcion para ajustar dinamicamente el tamaño de un movieclip y tenia que ser muy al estilo Drag&Drop asi que cree este codigo para hacerlo , aun tiene algunos problemitas como pueden ver en el ejemplo pero en general da la idea clara de como hacer el resize y creo que es una aproximacion diferente a muchos de los ejemplos que hay en internet.

CODIGO :

var clickX
var clickY

resizer.addEventListener(MouseEvent.MOUSE_DOWN , onResizerPress )

function onResizerPress (e:MouseEvent) {
clickX = this.x + this.width – this.parent.mouseX
clickY = this.y + this.height – this.parent.mouseY
this.parent.setChildIndex( this , this.parent.numChildren-1);
addEventListener(Event.ENTER_FRAME ,    onResizerFrame )
resizer.addEventListener(MouseEvent.MOUSE_UP , onResizerRelease )
this.parent.stage.addEventListener(MouseEvent.MOUSE_UP , onResizerRelease )
}

function onResizerRelease (e:MouseEvent) {
if( hasEventListener(Event.ENTER_FRAME) ){
  removeEventListener(Event.ENTER_FRAME , onResizerFrame )
}
if( resizer.hasEventListener(MouseEvent.MOUSE_UP ) ){
   resizer.addEventListener(MouseEvent.MOUSE_UP ,onResizerRelease )
}
if( this.parent.stage.hasEventListener(MouseEvent.MOUSE_UP ) ){
   this.parent.stage.removeEventListener(MouseEvent.MOUSE_UP , onResizerRelease )
}
}
function onResizerFrame (e:Event) {

var w   = this.parent.mouseX – this.x + clickX
var h   = this.parent.mouseY – this.y + clickY

width = w
scaleY = scaleX

}

El codigo va dentro de un movieclip y dentro del movieclip debe existir otro movieclip llamada “resizer” , espero convertir a una clase este codigo pero lo dejo pendiente por ahora.

EJEMPLO:
Nuevo chat 3d en español (hecho con papervision3d)
Categoría: 3d, ActionScript, ActionScript 3, Flash, General, Guadalajara, Mexico, PaperVision 3d | Fecha: 25.07.2009 | Leer : 6
Por fin tuve tiempo de trabajar un poco en proyectos personales y logre terminar este chat que habia estado trabajando desde hace un buen rato.

Algunas de las caracteristicas de este chat :
- Posibilidad de seleccionar nickname y avatar
- Controles de avatar con las flechas del teclado
- Interaccion en tiempo real con otros usuarios de internet
- 2 posibles posiciones para la camara, angulo de tercera persona y angulo panoramico (tecla control)
- mensajes de texto dentro del ambiente 3d
- desarrollado con papervision3d
- desarrollado con red5
- fisicas basicas dentro de un ambiente 3d (friccion, aceleracion, limites, easings, masa, inercia)
- Iconos creados por www.tutorial9.net
- librerias utilizadas:Tweener, papervision3d, SWFProfiler y framework motion.com.mx
- posibilidad de agregar el numero que sea de bots (personajes simulados)
- posibilidad de definir paredes y techo
- posibilidad de permitir a los avatares moverse dentro del espacio 3d (es posible volar pero lo limito a 2 dimensiones por el momento para evitar mareos )
Planeo agregar mi componente socialis (invitador de amigos)

y tal vez investigar la integracion con la api de facebook para usar fotos de personas en lugar de avatares.

Los veo en el chat !!

www.motion.com.mx/chat3d/
scan object properties in AS2
Categoría: ActionScript 3, Uncategorized | Fecha: 20.07.2009 | Leer : link

this is a snippet (movie clip prototype) wich allows to scan an object and trace each of its properties and methods :

MovieClip.prototype.traceo = traceo
function traceo (msg, obj) {
var prefix = “\t myProject ->”
trace(prefix + msg);
if(obj !=undefined){
trace(“********************************************”);
var spacer = “\t”
trace(spacer+msg);

for (var p in obj) {
trace(spacer +spacer + p + ” -> ” + obj[p]);
if ( typeof obj[p] == “object”) {
for (var r in obj[p]) {
trace(spacer +spacer + spacer + r + ” -> ” + obj[p][r]);
if ( typeof obj[p][r] == “object”) {
for (var r in obj[p][r][q]) {
trace(spacer +spacer +spacer + spacer + q + ” -> ” + obj[p][r][q]);
}
}
}
}
}
trace(“********************************************”);
}
}

usage :

//inside any movieclip
var clients:Object = {p1:1,p2:2, p3:”string”,p4:{pp1:1,pp2:2}}
traceo (“scanning object clients”, clients);
obtener la extension del nombre de un archivo
Categoría: ActionScript, ActionScript 3, Flash, General | Fecha: 20.07.2009 | Leer : link

Este es un snippet de codigo que se me ocurrio hace poco para obtener la extension del nombre de un archivo :

var nombreDelArchivo:String = “foto_1.jpg”;
var pedazos:Array = nombreDelArchivo.split(“.”);
var extension:String = pedazos[pedazos.length-1]; //extension tendra el valor “jpg”