Por: scx7 + Otros tutoriales de scx7 + 12 de Diciembre del 2005
Muchas veces cuando creamos un sitio web para un cliente este (en la mayoría de los casos) se preguntará si su página está siendo visitada o no?, esto se complica un poco cuando la página está hecha completamente en flash, sin embargo esto es imprescindible para la toma de decisiones con respecto a la publicidad de la página, sino ¿cómo sabemos si la publicidad actual está funcionando?. Y el poner un enlace a uno de esos servicios estadísticos, como que interfieren en nuestros diseños y además se pierde la experiencia del usuario al abrirse un página nueva ajena a nuestro sitio web. Pero no se preocupen para eso está cristalab ;)
En este tutorial explicaré cómo realizar estadísticas de visitas usando Flash Remoting, si no sabes de lo que estoy hablando por favor lee esto primero antes de continuar:
Primero la base de datos, en este caso las visitas se irán registrando por semanas, meses y años.
Nota: La conección a la base se realiza con el servicio consultor, sí la misma que hizo Freddie®
<?php //Clase de conexión simple y consulta a base de datos "Consultor" // Devuelve un recordset de una consulta a Flash // Facilmente extensible usando programación orientada a objetos // Freddie® - http://www.cristalab.com/ class Consultor{ function Consultor(){ $this->methodTable = array( "consulta" =>array ( "description" => "Devuelve un objeto RecordSet a Flash de una consulta pasada por parametro", "access" => "remote", "arguments" => array("sql") ) ); } function consulta($sql){ /* Los datos de la base de datos MySQl El nombre de usuario, el password de acceso y obviamente el nombre de la base de datos CAMBIALOS!!! a los tuyos del servidor o no funcionara */ $cons_user = "root"; $cons_pass = ""; $cons_db = "BASE_DE_DATOS"; //Conecta a la base de datos $dbh=mysql_connect("localhost",$cons_user,$cons_pass) or die ('Error conectandose a la base de datos por: ' . mysql_error()); //Selecciona la base de datos mysql_select_db ($cons_db); //Guarda el resultado de la consulta en un identificador (Puntero) $resultado=mysql_query($sql,$dbh); mysql_close($dbh); //Retorna lo obtenido return $resultado; } } ?>
La misma clase conexion
import mx.remoting.NetServices; import mx.remoting.Connection; import mx.remoting.RecordSet; import mx.remoting.NetServiceProxy; dynamic class Conexion { private var conn:Connection; private var serv:NetServiceProxy; private var servSend:NetServiceProxy; private var padre; public var onConsulta:Function; function Conexion() { NetServices.setDefaultGatewayUrl("http://localhost/remoting/gateway.php"); conn = NetServices.createGatewayConnection(); } private function errorAMF(data) { trace("AMFPHP Error"); trace("En la linea "+data.line); trace("Nivel del error: "+data.level); trace("------------------------------"); trace(data.description); padre.traceObj(data); } public function consulta(SQL:String) { trace("Consultando"); var envio:Object = new Object(); envio.padre = this; envio.onStatus = this.errorAMF; envio.consulta_Result = function(data) { var rs:RecordSet = data; this.padre.onConsulta(rs); }; servSend = conn.getService("Consultor", envio); servSend.consulta(SQL); } function traceObj(obj) { trace("TrazandoObjeto"); for (var i in obj) { trace("\\t"+i+"->"+obj[i]); } } }
En flash creamos un texto dinámico con nombre de instancia "visitas_txt" y con Flash Remoting en la librería, ponemos el siguiente codigo en un keyframe
//inicializamos los contadores para las semanas
semana1 = semana2 = semana3 = semana4 = 0;
//preparamos las fechas
mes = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
miFecha = new Date();
hoy = miFecha.getDate();
//loadVars para el registro a la base de datos
receive_lv = new LoadVars();
sender_lv = new LoadVars();
//conectamos con el servicio de consultas
import Conexion;
import mx.remoting.RecordSet;
var db:Conexion = new Conexion();
db.consulta("SELECT * FROM estadisticas"); //consultamos la tabla estadisticas
db.onConsulta = function(rs) {
max=rs.getLength();
if (max > 0){ // entra si hay algun registro en la base
suma = 0;
for (i=1;i<=max;i++){ // contamos todas las visitas registradas
suma += Number(rs.getItemAt(max-i).week1)+Number(rs.getItemAt(max-i).week2)+Number(rs.getItemAt(max-i).week3)+Number(rs.getItemAt(max-i).week4);
}
var str:String = new String(suma+1);
var mtr:Array = str.split("");
visitas_txt.text = mtr.join(" "); //esto es para separar los números
codigo = rs.getItemAt(max-1).codigo;
lastyear = rs.getItemAt(max-1).year;
lastmonth = rs.getItemAt(max-1).month;
lastday = rs.getItemAt(max-1).day;
newmonth = 0;
}else{ // si no hay registro se toman los datos de la máquina del usuario
lastyear = miFecha.getFullYear();
lastmonth = mes[miFecha.getMonth()];
lastday = hoy;
codigo = newmonth = 1;
}
semana1 = rs.getItemAt(max-1).week1;
semana2 = rs.getItemAt(max-1).week2;
semana3 = rs.getItemAt(max-1).week3;
semana4 = rs.getItemAt(max-1).week4;
if (hoy == 1){ // si es un nuevo mes, comprobamos si es así
if (lastmonth == mes[(miFecha.getMonth())-1]){
lastday = newmonth = 1;
semana1 = semana2 = semana3 = semana4 = 0;
codigo++;
if (lastmonth == "Diciembre"){ //si el último mes fue diciembre, entonces hoy es año nuevo :)
lastyear = miFecha.getFullYear();
}
lastmonth = mes[miFecha.getMonth()]
}
}else{ //si no es un nuevo mes, etonces vemos si es un nuevo día
lastday = hoy;
}
if (hoy >= 1 && hoy <= 7){
semana1++;
}else if(hoy >= 8 && hoy <= 14){
semana2++;
}else if (hoy >= 15 && hoy <= 21){
semana3++;
}else if (hoy >= 22 && hoy <= 31){
semana4++;
}
sender_lv.year = lastyear;
sender_lv.month = lastmonth;
sender_lv.day = lastday;
sender_lv.week1 = semana1;
sender_lv.week2 = semana2;
sender_lv.week3 = semana3;
sender_lv.week4 = semana4;
sender_lv.isnew = newmonth; // true || false :: ¿es un nuevo mes o no?
sender_lv.code = codigo;
sender_lv.sendAndLoad("pathvisitor.php", receive_lv, "POST");
receive_lv.onLoad = function() {
trace("NUEVA VISITA REGISTRADA");
}
}
Pasamos los valores de flash para ingresar o modificar la tabla estadísticas en nuestra base de datos, según sea el caso
<?php
$connection = mysql_connect("localhost", "root", "") or die ('Acceso negado a la base');
$db = mysql_select_db("BASE_DE_DATOS") or die ("Base de datos no valida");
$code = $_POST['code'];
$year = $_POST['year'];
$month = $_POST['month'];
$day = $_POST['day'];
$week1 = $_POST['week1'];
$week2 = $_POST['week2'];
$week3 = $_POST['week3'];
$week4 = $_POST['week4'];
$isnew = $_POST['isnew'];
if ($isnew==1){
$Query = "INSERT into estadisticas (`codigo`, `year`, `month`, `day`, `week1`, `week2`, `week3`, `week4`) values ('$code', '$year', '$month', '$day', '$week1', '$week2', '$week3', '$week4')";
$insertar = mysql_query($Query) or die ("no inserto");
}else{
$sql = "UPDATE estadisticas SET week1 = '$week1', week2 = '$week2', week3='$week3', week4='$week4', day='$day' WHERE codigo = $code";
$result = mysql_query($sql);
}
?>
En archivo cubos3D.as creamos las funciones para dibujar los cubos
//creamos los movieClips para los cubos
function crearcubos(){
var d:Number=60;
for (l=1;l<=4;l++)
this.createEmptyMovieClip("superior"+l, d+l);
d +=5;
for (l=1;l<=4;l++)
this.createEmptyMovieClip("lateral"+l, d+l);
d +=5;
for (l=1;l<=4;l++)
this.createEmptyMovieClip("frente"+l, d+l);
}
//cubos3D([posición en x inicial],[posición en y inicial], [valor1], [valor2], [valor3], [valor4]);
function cubos3D(x,yy,y,b,g,w){
//Inicializamos los colores de cada división
colorF1 = 0x999996; //color frontal
colorL1 = 0x666666; //color lateral
colorS1 = 0xDDDDDD; //color de la parte superior
colorF2 = 0xA5BC4E;
colorL2 = 0x738336;
colorS2 = 0xC2CB83;
colorF3 = 0x1B95D9;
colorL3 = 0x126897;
colorS3 = 0x62C0FF;
colorF4 = 0xE48701;
colorL4 = 0x9F5E00;
colorS4 = 0xFEB341;
//creamos los dichosos cubos, con los parametros recogidos
//Primero creamos los mc de la parte superior de los cubos
with (this.superior1) {
lineStyle(1, colorS1, 100);
moveTo(x+18, yy-y-13);
beginFill(colorS1, 100)
lineTo(x+71, yy-y-13); //linea superior
lineTo(x+54, yy-y); //linea derecha
lineTo(x, yy-y); //linea inferior
lineTo(x+18, yy-y-13); //linea izquierda
}
if (b > 0){ // condicionamos para que solo se creen los mc necesarios
with (this.superior2) {
lineStyle(1, colorS2, 100);
moveTo(x+18, yy-y-13-b);
beginFill(colorS2, 100)
lineTo(x+71, yy-y-13-b); //linea superior
lineTo(x+54, yy-y-b); //linea derecha
lineTo(x, yy-y-b); //linea inferior
lineTo(x+18, yy-y-13-b); //linea izquierda
}
}
if (g > 0){
with (this.superior3) {
lineStyle(1, colorS3, 100);
moveTo(x+18, yy-y-13-b-g);
beginFill(colorS3, 100)
lineTo(x+71, yy-y-13-b-g); //linea superior
lineTo(x+54, yy-y-b-g); //linea derecha
lineTo(x, yy-y-b-g); //linea inferior
lineTo(x+18, yy-y-13-b-g); //linea izquierda
}
}
if (w > 0){
with (this.superior4) {
lineStyle(1, colorS4, 100);
moveTo(x+18, yy-y-13-b-g-w);
beginFill(colorS4, 100)
lineTo(x+71, yy-y-13-b-g-w); //linea superior
lineTo(x+54, yy-y-b-g-w); //linea derecha
lineTo(x, yy-y-b-g-w); //linea inferior
lineTo(x+18, yy-y-13-b-g-w); //linea izquierda
}
}
//seguimos con la parte lateral de cada cubo
with (this.lateral1) {
lineStyle(1, colorL1, 100);
moveTo(x+54, yy-y);
beginFill(colorL1, 100)
lineTo(x+71, yy-y-13); //linea superior
lineTo(x+71, yy-13); //linea derecha
lineTo(x+54, yy); //linea inferior
lineTo(x+54, yy-y); //linea izquierda
}
if (b > 0){
with (this.lateral2) {
lineStyle(1, colorL2, 100);
moveTo(x+54, yy-y-b);
beginFill(colorL2, 100)
lineTo(x+71, yy-y-13-b); //linea superior
lineTo(x+71, yy-13-y); //linea derecha
lineTo(x+54, yy-y); //linea inferior
lineTo(x+54, yy-y-b); //linea izquierda
}
}
if (g > 0){
with (this.lateral3) {
lineStyle(1, colorL3, 100);
moveTo(x+54, yy-y-b-g);
beginFill(colorL3, 100)
lineTo(x+71, yy-y-13-b-g); //linea superior
lineTo(x+71, yy-13-y-b); //linea derecha
lineTo(x+54, yy-y-b); //linea inferior
lineTo(x+54, yy-y-b-g); //linea izquierda
}
}
if (w > 0){
with (this.lateral4) {
lineStyle(1, colorL4, 100);
moveTo(x+54, yy-y-b-g-w);
beginFill(colorL4, 100)
lineTo(x+71, yy-y-13-b-g-w); //linea superior
lineTo(x+71, yy-13-y-b-g); //linea derecha
lineTo(x+54, yy-y-b-g); //linea inferior
lineTo(x+54, yy-y-b-g-w); //linea izquierda
}
}
//Y finalmente la parte frontal
with (this.frente1) {
lineStyle(1, colorF1, 100);
moveTo(x, yy-y);
beginFill(colorF1, 100)
lineTo(x+53, yy-y); //linea superior
lineTo(x+53, yy); //linea derecha
lineTo(x, yy); //linea inferior
lineTo(x, yy-y); //linea izquierda
}
if (b > 0){
with (this.frente2) {
lineStyle(1, colorF2, 100);
moveTo(x, yy-y-b);
beginFill(colorF2, 100)
lineTo(x+53, yy-y-b); //linea superior
lineTo(x+53, yy-y); //linea derecha
lineTo(x, yy-y); //linea inferior
lineTo(x, yy-y-b); //linea izquierda
}
}
if (g > 0){
with (this.frente3) {
lineStyle(1, colorF3, 100);
moveTo(x, yy-y-b-g);
beginFill(colorF3, 100)
lineTo(x+53, yy-y-b-g); //linea superior
lineTo(x+53, yy-y-b); //linea derecha
lineTo(x, yy-y-b); //linea inferior
lineTo(x, yy-y-b-g); //linea izquierda
}
}
if (w > 0){
with (this.frente4) {
lineStyle(1, colorF4, 100);
moveTo(x, yy-y-b-g-w);
beginFill(colorF4, 100)
lineTo(x+53, yy-y-b-g-w); //linea superior
lineTo(x+53, yy-y-b-g); //linea derecha
lineTo(x, yy-y-b-g); //linea inferior
lineTo(x, yy-y-b-g-w); //linea izquierda
}
}
}
Creamos el swf para presentar el gráfico estadístico. Debemos tener Flash Remoting en la librería
Nombres de instancia (de arriba a abajo y de izquierda a derecha respectivamente): año_txt, count6_txt, count5_txt, count4_txt, count3_txt, count2_txt, count1_txt, mes1_txt, mes2_txt, mes3_txt, mes4_txt, prev_btn, next_btn
import mx.remoting.RecordSet;
#include "cubos3D.as"
this.next_btn.enabled = false;
this.prev_btn.enabled = false;
this.next_btn._alpha = 50;
this.prev_btn._alpha = 50;
// coordenadas de inicio en x, y (de la posición de inicio del último cubo)
y0 = 252;
xx = 273;
zz = 2.035; //sale de la altura de la tabla menos la altura de un cuadrante y dividido para 100 (243.5-40)/100
bots = 0;
function kogiendo(cc,gx){
crearcubos();
var db:Conexion = new Conexion();
var w1:Array = new Array();
var w2:Array = new Array();
var w3:Array = new Array();
var w4:Array = new Array();
var month:Array = new Array();
var T:Array = new Array();
mes1_txt.text = mes2_txt.text = mes3_txt.text = mes4_txt.text = " ";
db.consulta("SELECT * FROM estadisticas"); //recogemos los datos de la DB
db.onConsulta = function(rs) {
long = rs.getLength()-cc;
año_txt.text = rs.getItemAt(long-1).year;
for (i=1;i<=long;i++){
month[i] = rs.getItemAt(long-i).month;
w1[i] = rs.getItemAt(long-i).week1;
w2[i] = rs.getItemAt(long-i).week2;
w3[i] = rs.getItemAt(long-i).week3;
w4[i] = rs.getItemAt(long-i).week4;
T[i] = Number(w1[i])+Number(w2[i])+Number(w3[i])+Number(w4[i]);
}
if (long > 4){ // condicionales para los botones y los meses
nCube=4;
prev_btn.enabled = true;
prev_btn._alpha = 100;
mes1_txt.text = month[4];
mes2_txt.text = month[3];
mes3_txt.text = month[2];
mes4_txt.text = month[1];
}else{
if (long == 3){ //condicionamos para que no muestre datos que no hay
gx -= 70;
nCube=3;
mes1_txt.text = month[3]; // metemos los meses
mes2_txt.text = month[2];
mes3_txt.text = month[1];
}else if (long == 2){
gx -= 140;
nCube=2;
mes1_txt.text = month[2];
mes2_txt.text = month[1];
}else if (long == 1){
gx -= 210;
nCube=1;
mes1_txt.text = month[1];
}else{
nCube=4;
mes1_txt.text = month[4];
mes2_txt.text = month[3];
mes3_txt.text = month[2];
mes4_txt.text = month[1];
}
prev_btn.enabled = false;
prev_btn._alpha = 50;
}
if (cc == 0){
next_btn.enabled = false;
next_btn._alpha = 50;
}else{
next_btn.enabled = true;
next_btn._alpha = 100;
}
// buscamos el dato mayor en la DB (la semana en la que hubo más visitas)
kk = 1;
for (i=2;i<=4;i++){
if (T[kk] < T[i]){
kk = i;
}
}
// lo dividimos para los 5 cuadrantes que tenemos
mxy = T[kk]/5;
//mxy = Math.round(mxy); //redondeamos el dato
nums = mxy;
//metemos las referencias
count2_txt.text = nums;
nums += mxy;
count3_txt.text = nums;
nums += mxy;
count4_txt.text = nums;
nums += mxy;
count5_txt.text = nums;
nums += mxy;
count6_txt.text = nums;
for (i=1;i<=nCube;i++){
w1[i] = (((w1[i]*100)/T[kk])*zz); //pequeña formula para hacerlos proporcionales
w2[i] = (((w2[i]*100)/T[kk])*zz);
w3[i] = (((w3[i]*100)/T[kk])*zz);
w4[i] = (((w4[i]*100)/T[kk])*zz);
//cubos3D([posición inicio X],[posicion inicio Y],[semana1],[semana2],[semana3],[semana4]);
cubos3D(gx,y0,w1[i],w2[i],w3[i],w4[i]);
gx -= 70; //le bajamos a la posición en x (es decir se grafíca desde el último cubo al primero)
}
}
}
kogiendo(bots,xx);
//kogiendo([4 meses más/menos],[posición X]);
this.next_btn.onRelease = function(){
bots -= 4;
kogiendo(bots,xx);
}
this.prev_btn.onRelease = function(){
bots += 4;
kogiendo(bots,xx);
}
Luego nos quedará algo así:
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros