Consultoria y Formacion Adobe

Los clickTags son una metodología standard de las compañías que sirven banners (ad servers) para hacer rastreo (tracking) de efectividad de los banners. Aunque los clickTags fueron definidos por Macromedia hace varios años aún hay muchos errores sencillos que afectan el desarrollo de los banners.

En este video tutorial se enseña:

1. la teoría y el funcionamiento básico de los clickTags a través de FlashVars,
2. la implementación de los clickTags,
3. los principales problemas con los que se enfrenta el diseñador a la hora de hacerlo y como solucionarlos.

El video tutorial es impartido por Emmanuel Ulloa Adobe Certified Instructor y Adobe Certified Associate Educator, vive en Costa Rica con su esposa, y trabaja en la empresa digital Arbor como Flash Senior Developer e Instructor del Instituto Cyber U.

A pedido Diego Oscar Romero hago este tip en donde vamos a ver como crear encuestas en AS2 utilizando PHP. Se puede votar una sola vez por número IP, y muestra los resultados en barras de porcentaje.

Parte 1

Parte 2

Parte 3

Descargar archivos del tutorial

Evaluar si un punto esta dentro de un poligono es una operacion basica, pero eso yo no lo sabia. Hasta que llega el momento en que es necesario. Perdí bastante tiempo investigando al respecto, asi que ahora comparto con ustedes el resultado, por si puede ahorrarle tiempo a alguien. No detallaré la explicacion, les dejo un link al ejemplo funcionando, el codigo fuente.

Código para detectar colisiones de un punto sobre un poligono

Código :

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

Descarga el ejemplo

HYPE es un nuevo framework desarrollado por Joshua Davis y Branden Hall que tiene como principal objetivo ayudar a los artistas gráficos a volver a involucrarse con el código, ya que desde actionscript 3, el enfoque de programacion orientada a objetos, es mucho mas difícil de entender que el antiguo as2 y código en la linea de tiempo. HYPE brinda un conjunto de clases para el fácil y rápido 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, fácilmente extendible y rehusable.

Descarga e instalación de HYPE

Primero que todo, deben descargar la libreria, desde la pagina oficial o directamente desde haciendo click aquí, también pueden hacerlo desde el repositorio en github.

Para poder usarlo en nuestros proyectos hay varias formas de configurar en ambiente, la primera que mencionare es el archivo MXP que se lo pueden instalar directamente a su Flash IDE usando "Adobe Extension Manager CS4", si no saben como, pueden dar un vistazo en la pagina de instalacion. Otra forma es setear el path al source de la librería en los "source path" del Flash IDE. (edit - preference - actionscript - Actionscript 3.0 settings), otra manera muy recomendable es incluir el source de la librería dentro de su proyecto, de esta manera es fácil compartir el proyecto con mas gente y este sera compilable desde su carpeta, no serán necesarias configuraciones de librerías externas. Con esto ya pueden usar HYPE en sus proyectos.

Descripción de clases en HYPE

• BitmapCanvas: Captura un DisplayObject en un Bitmap, esto nos permite dibujar en el Bitmap muy fácilmente.
• FilterRhythm: Aplica un array de filtros a un BitmapData con un ritmo especifico.
• DirectionalVibration: Hace vibrar una propiedad en una dirección 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.

Como verán HYPE tiene clases para todo, esta muy bueno para jugar un rato. Cuando se lo descarguen veran que hay una carpeta con ejemplos de todas las clases. Así que no da mucho para explicar la manera de usarlo.

Un primer ejemplo de HYPE

Les dejo un ejemplo de como usar HYPE, este es el resultado, y mas abajo pueden descargar el código.

Descarga el ejemplo o mira más ejemplos en mi sitio web.

Ojala les sirva de algo este dato, yo personalmente se los recomiendo, pueden obtener muy buenos resultados, sin saber mucho de programación.

-
Soy de las personas que odian el cambio, nunca me he sentido conforme con cambiar nada de mi vida, menos las cosas que me hacen feliz y me dan mucho dinero. Ergo cambiar de AS2 a AS3, era según mi definición innecesario. Podría crear lo mismo en AS2, no había razón.

Los años pasaron y AS3 empezó a sonar demasiado fuerte para mi gusto, el foro de AS3 era más movido que el de AS2. Decidí aprender AS3, para ver que onda. Nada más, no cambiaría, solo verlo.

El doloroso arranque

Comencé como todos, desde www.google.com y www.cristalab.com. Leí y leí como loco antes de ponerme con mi primera línea, molesté a Freddie, Gerson y algunos más en el foro para sacarme dudas existenciales. El puto AS3 me cambiaba todo, modelo de eventos, forma de programar, cargar, etc. Maldita sea! Creí que sería insufrible. Un botón ahora era:

Del tutorial básico de botones y eventos en Actionscript 3 de Cristalab.

Luego la cosa se complicaba en el terreno de la programación orientada a objetos en AS3, DocumentClass, etc. Estuve 3 días mirando a mi alrededor toda esta información, hasta que decidí hacer un proyecto por mi mismo.

El primer proyecto en Actionscript 3: Wow!

Simplemente wow, no lo podía creer. En segundos tenía montado mi escenario, estaba todo ordenado. Comencemos a hablar del maravilloso modelo de carga. Este loadMovie con esteroides. Ahora si tenía mucha lógica cargar cosas en Flash, es un sueño. Todo bajo un mismo modelo, prolijo, sin problemas de niveles. Simplemente cargo, trato la info según lo cargado y lo añado al DisplayObject. Easy!

Luego me encontré con el Document Class, que maravilloso. Nada de código en el primer keyframe o idioteces. Ahora puedo tener el código no esencial bien prolijo en mi Document Class. Eso hace que sea coherente usar clases.

¡Y ni hablar de la comunicación entre clases! El modelo de eventos es genial, un poco de entusiasmo en la programación y tienes un método fácil de comunicar eventos sin usar demasiados recursos.

AS3 mejoró mi manejo de proyectos

Además del orden implícito en todo esto, empiezas a obligatoriamente encapsular todo, mantener todo muy ordenado. Eso lleva a reutilizar como perros. Cada Clase que crean les ayuda luego, no más líos con ese mismo problema a futuro. Uno termina siendo casi fanático, teniendo su carpeta de clases para proyectos, llena de maravillosas cosas que podemos hacer solo haciendo new algo();

En definitiva, realmente chicos, les recomiendo abandonen AS2, conozcan AS3 y no podrán dar una vuelta atrás. Desarrollarán más eficiente, serán más practico para ustedes y más reutilizable. Solo anímense y verán!

A petición de un usuario hice este pequeño prototype todavía sujeto a arreglos y optimizaciones. Lo que hace principalmente es llenar un TextField con un texto específico pero con un efecto de aleatoriedad. Para utilizarlo se debe hacer de la manera siguiente:

Código :

//---Prototype de rellenar el texto
TextField.prototype.fillRandomText = function(theText:String, cantidad:Number, veces:Number):Void{
   
   //---Decalaración de variable
   var txt:TextField = this;
   var secFin:Number = 0;
   var rand:String;
   var sum:Number = 0;
   var avance:Number = 0;
   
   //---Funcuión de crear caracteres aleatorios
   var randomChar:Function = function (numero:Number):String{
      
      var sum:Number = 0;
      var rand:Number;
      var randChar:String;
      var chars:String = "";
      
      while(sum < numero){
         
         rand = Math.round(Math.random() * 94 + 33);
         randChar = String.fromCharCode(rand);
         
         chars += randChar;      
         sum++;
         
      }
      
      return chars;
      
   }
   
   //---Función de rellenar
   var fillChars:Function = function():Void{
      
      //---Asignar el texto
      rand = theText.slice(0, secFin) + randomChar(avance - secFin);      
      txt.text = rand;
      
      //---Detener el intervalo
      if(secFin >= theText.length){
            
         clearInterval(intervalo);
            
      }
      
      avance += (avance < theText.length) ? cantidad : 0;
      
      sum++;
      
      if(sum == veces){
         
         sum = 0;
         secFin += cantidad;
         
      }
      
   }
   
   //---Hacer el setInterval
   var intervalo:Number = setInterval(fillChars, 10);   
   
}

Su uso:

Código :

TextField.fillRandomText(frase:String, incremento:Number, veces:Number);

Donde frase es el texto que se va a insertar.
incremento es cada cuantos caracteres se va a ir deteniendo el efecto.
y veces es el número de caracteres aleatorios que se generarán antes de poner el carácter que le corresponde.

Un ejemplo sencillo es este, en un documento nuevo de 30fps, pegar el prototype en el primer frame y crear un TextField con nombre de instancia "campo", al tener hecho esto situar en el frame donde se encuentra el TextField:

Código :

campo.fillRandomText("Prueba de texto aleatorio", 1, 5);

Si alguien puede aportar más a este proto, variarlo u optimizarlo más, será bienvenida su propuesta, el resultado nos servirá a todos.