Google Analytics el popular servicio de Google para hacer el seguimiento de visitas a una web, tiene entre las muchas características la de poder hacer seguimiento de visitas de archivos flash, en esta ocasión haremos una revisión de la manera de implementarla en nuestras paginas flash.
Que necesitamos?
Lo primero, es tener una cuenta de Google Analytics e instalar el código de seguimiento en nuestro sitio web, puedes registrarte de forma gratuita en http://www.google.com/analytics/. El siguiente paso es instalar el código de seguimiento en nuestras paginas, para ello se nos da un código javascript que se debe colocar en nuestro HTML justo antes del tag
Como Funciona?
Una vez instalado nuestro código de seguimiento, esto hará que todas las paginas a las que se accedan queden registradas. Adicionalmente a esto hay una función llamada urchinTracker que viene incluida en este código que hemos añadido. Esta función puede recibir un parámetro de texto el cual se guardará en el registro de visitas.
Entonces, por ejemplo accedemos a un archivo ejemplo.zip, podríamos pasar el nombre de este archivo como parámetro a la función y esto hara que se registre, esto lo hacemos con el siguiente código:
javascript:urchinTracker('/ejemplo.zip');
De la misma forma podríamos hacer cuando se accede a un SWF, para ello se necesita llamar la función urchinTracker, la cual es un javascript entonces utilizaremos la función getURL de flash.
Implementación
Típicamente cuando se desarrolla sitios enteramente hechos en flash las llamadas a las diferentes secciones se hace cargando el MovieClip de la sección, esta llamada se hace desde un botón, por ejemplo si se tiene que llamar a la sección productos se hace de la forma:
btproductos.onPress = function(){
loadMovie("productos.swf");
}
Entonces si deseamos hacer el seguimiento en Google Analytics se debe llamar a la función urchinTracker de la siguiente forma:
Sencillo, cierto?. Solo una linea adicional y ya tenemos registradas las visitas a cada sección flash. Ahora no necesariamente se tiene que pasar a la función urchinTracker el nombre exacto del SWF que llamamos si no puede ser una palabra que describa la sección a la que se accede por ejemplo: productos, servicios, etc. Todo esto de acuerdo a como queremos que aparezca en nuestro registro de visitas.
Típicamente cuando uno crea efectos de movimiento en ActionScript estos son lineales, es decir los objetos se mueven con velocidad constante, en esta ocasión haremos el movimiento pero con efecto de desaceleración o Easing que consiste en mover un objeto con la velocidad que va disminuyendo conforme se acerca al punto donde debe llegar.
Cargando Flash
Preparando los elementos
Como primer paso creamos dos MovieClips, uno llamado btplay que lo utilizaremos para llamar al efecto de movimiento y el segundo llamado ball que es el movieclip que moveremos. Creamos el evento para el botón btplay.
btplay.onPress = function(){
easingClip();
}
Implementando el efecto Easing
El siguiente paso es crear la función easingClip que hará efecto para el movimiento deseado, donde primero se definen las variables que contendrán la posición inicial y la posición final. El siguiente paso es colocar el movie en la posición inicial.
Pero como se hace el calculo para obtener estos valores de las posiciones? Calculamos la distancia que hay entre la posición actual del movie al punto final y movemos el movie en la mitad de la distancia, luego volvemos a hacer el mismo calculo y así sucesivamente con lo cual nos iremos acercando en espacios mas pequeños a medida que nos acercamos al final con lo cual logramos el efecto de desaceleración.
Seguidamente creamos un onEnterFrame que nos permita efectuar nuestro calculo repetidamente, dentro de este onEnterFrame cambiamos el valor de la propiedad _x del movie para ir posicionando cada vez mas cerca del punto final.
function easingClip(){
var xini:Number = 10;
var xfin:Number = 275;
clip._x = xini;
clip.onEnterFrame = function(){
clip._x += (xfin-clip._x)/2;
}
}
Cambiando la aceleración
En el ejemplo hemos movido el objeto en la mitad de la distancia que le faltaba para llegar al punto final, pero tambien podemos moverlo en la tercera, cuarta, quinta... parte de la distancia con ello estariamos logrando cambiar la aceleración. Entonces podemos guardar en una variable este valor.
function easingClip(){
var xini:Number = 10;
var xfin:Number = 275;
clip._x = xini;
clip.onEnterFrame = function(){
clip._x += (xfin-clip._x)/8;
}
}
Finalizando
Finalmente calculamos la posición actual del movie para verificar que llego al punto final y eliminamos el onEnterFrame que de otra forma se quedaría ejecutandose. Uniendo todo el código tenemos nuestro efecto easing.
btplay.onPress = function(){
easingClip();
}
function easingClip(){
var xini:Number = 10;
var xfin:Number = 275;
clip._x = xini;
clip.onEnterFrame = function(){
clip._x += (xfin-clip._x)/8;
if(xfin - clip._x <0.001){
delete clip.onEnterFrame;
}
}
}
En nuestro ejemplo hemos hecho el movimiento solo en el eje X, podemos hacerlo tambien en el eje Y con lo cual ya nuestro movie se moveria en cualquier dirección.
ActionScript 3 como lenguaje de programación esta reestructurando la forma de escritura de código, lo cual conlleva a programar en otra forma lógica comparada con AS2. En esta ocasión hablaremos de los cambios que se han hecho a los MovieClips el cual es uno de los elementos esenciales de Flash.
Creando MovieClips
El primer paso para la creación es importar las clases necesarias para el manejo de MovieClips, esta clase se encuentra en el paquete flash.display, para nuestro ejemplo además importaremos las clases para realizar gráficos.
import flash.display.MovieClip;
import flash.display.Graphics;
El siguiente paso es crear una variable del tipo MovieClip, aquí viene una de las diferencias, por defecto cuando uno crea un MovieClip hay que asignarle a que nivel pertenece, para ello utilizamos una nueva función addChild. En nuestro ejemplo le decimos que el movie que hemos creado lo colocamos en el root (this). Luego de ello lo posicionamos utilizando las coordenadas x e y (Antes era _x e _y).
var movie:MovieClip = newMovieClip();
this.addChild(movie);
movie.x = 50;
movie.y = 20;
Dibujando en el MovieClip
Ahora que tenemos el MovieClip creado, dibujamos sobre el una forma, para ello utilizamos la clase graphics que tiene un conjunto de funciones para realizar trazados de formas. Existen varias formas en nuestro caso crearemos un cuadro con esquinas redondeadas utilizando drawRoundRect.
Agregando Interactividad
Otra de las diferencias que encontramos ahora es que ya no podemos agregar interactividad utilizando onRollOver, onRollOut, onPress, etc. Ahora tendremos que utilizar los eventos, esto utilizando addEventListener. Para ello debemos importar el paquete manejador de eventos flash.events.MouseEvent, el cual trae los siguiente detectores: CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_OUT, MOUSE_OVER, entre otros.
Para cada evento diferente creamos un detector el cual llama a una funcion que debemos definirla, por ejemplo para cuando se hacer MOUSE_OVER nosotros definimos que debe llamarse a una funcion con nombre myRollOver la cual luego implementamos el cual cual cambia el alpha del movie al 50% (Otro cambio ahora la transparencia se maneja de 0 a 1).
Finalizando
Unimos todas la partes de nuestro código para conseguir nuestro ejemplo completo de creaciòn de MovieClips con AS3.
