[tutorial] Crear un calendario personalizado en Flash

Takayuki · 06:05 PM

Cuantas veces nos pidio un cliente que hubiera un calendario en su web, para poder añadir citas, eventos, o sus propias noticias? Ademas tambien es un elemento indispensable en todo weblog que se precie, por eso aprenderemos a hacer uno, y ademas aprenderemos a que se señale el dia de hoy, y los dias en los que haya algo marcado. Para ello me basare [solo en una funcion y en la parte grafica] del calendario que hizo en gran maestro TMeister

Vista previa del calendario
Primero explicaremos el objeto Date, pero solo las funciones basicas que utilizaremos, hay dos tipo de funciones, las getXXX y las setXXX, como su nombre indica una recoge los datos y las otra... los "introduce"?? eso es posible? se puede modificar la fecha? Pues si!! es como las ecuaciones con infinitas soluciones que se estudian en matematikas, dependiendo del valores que les des a unas u otras variables el resto toman un valor correspondiente, para explicarlo mejor... digamos que queremos saber el dia en que nacimos, todos tendremos una fecha, por ejemplo el 15 de Enero de 1986, pero en que dia de la semana? Pues metemos esos datos y recogemos que cayo en Miercoles....
Algunas cosillas para tener en cuenta, los meses, al igual que los dias[de la semana] van del 0-11 y del 0-6 respectivamente, empezando estos ultimos por el Domingo [ya que se usa asi en gran parte del mundo]. Asi mismo los años te los devuelve a partir de 1900, es decir, por ejemplo el 2004 es 104, esto tambien tendremos que tenerlo en cuenta.
Cosas que tendremos que CREAR en el escenario [esto tb se podria hacer por codigo AS, pero no merece la pena]

Un cuadro de 7x7 celdillas [en cada celdilla ira un numero, esto es porque la primera fila la usaremos para poner los dias de la semana -Do,Lu,Ma,Mi,Ju,Vi,Sa- y las otras 6 son para los dias del mes]
Yo recomiendo unas celdillas de 22x17, donde la fuente "Verdana" a tamaño 10 y negrita queda bastante bien
Un MC llamado "activo" con un boton "bt" en su interior
Un campo de texto dinamico llamado "tip" con las fuentes Embebidas que utilizaremos como tool_tip para indicar que accion hay tal o cual dia
Un campo de texto con la fuente que utilicemos [en este caso Verdana] embebidas
Otro campo de texto dinamico "mes_txt", donde pondremos el mes en el que estamos [EJ: "Enero 1986"]
Dos botones "sig_mc" y "ant_mc", nos serviran para "navegar" entre los meses

Con todo esto... empecemos:

Code:

 _lockroot = true;
//linea necesaria siempre
/* esto es para que despues muestre el mes en el que estamos */
ma = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", 
      "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
/* creamos el objeto date, al no dar parametros se establece la
    fecha de hoy - guardamos los datos en variables para tener una
    referencia y poder señalar el dia de hoy en el calendario */
hoy = new Date();
diaHoy = hoy.getDate();
mesCurso = mesHoy=hoy.getMonth();
anioCurso = anioHoy=(Number(hoy.getYear())+1900);

Ahora crearemos unas funciones, una hara casillas de dias normales y la otra en vez de casillas hara los botones.

Code:

function hazDia(p, col, label) {
    /* los parametros son, profundidad del mc, color y etiketa del dia */
    //creamos un MC paa dibujar el rectangulo
    var tm_mc = algo.createEmptyMovieClip("tempo"+p, p);
    tm_mc.beginFill(col);
    tm_mc.lineStyle(1, 0xffffff);
    tm_mc.lineTo(0, 0);
    tm_mc.lineTo(0+22, 0);
    tm_mc.lineTo(0+22, 0+17);
    tm_mc.lineTo(0, 0+17);
    tm_mc.lineTo(0, 0);
    // el formato dela fuente que usemos
    format = new TextFormat();
    format.font = "Verdana";
    format.size = 10;
    format.bold = true;
    format.color = 0xFAB4E7;
    //creamos un campo de Texto
    tm_mc.createTextField("label_txt", p+100, 2, 0, 0, 0);
    tm_mc.label_txt.selectable = false;
    tm_mc.label_txt.embedFonts = true;
    //aki es donde marcamos el dia que es
    tm_mc.label_txt.text = label;
    tm_mc.label_txt.autoSize = true;
    tm_mc.label_txt.setTextFormat(format);
    return tm_mc;
}
function hazBoton(p, label, accion, idb) {
    /*muy similar al de hacer dias, profundidad, etiketa del dia, la accion o titulo del mensaje del 
    que hara display, y el idb es la referencia a la entrada del blog de ese dia, por lo demas todo
    mas o menos igual */
    //copiamos el boton
    var tm_mc = activo.duplicateMovieClip("tempo"+p, p);
    format = new TextFormat();
    format.font = "Verdana";
    format.size = 10;
    format.bold = true;
    format.color = 0xFAB4E7;
    tm_mc.createTextField("label_txt", p+100, 2, 0, 0, 0);
    tm_mc.label_txt.selectable = false;
    tm_mc.label_txt.html = true;
    tm_mc.label_txt.text = label;
    tm_mc.label_txt.autoSize = true;
    tm_mc.label_txt.setTextFormat(format);
    //aqui le pones el titulo que saldra al pasar por encima del dia
    tm_mc.accion = accion;
    /*esta funcion es para que haga referencia al blog y buske la entrada, no se explicara en el
    tutorial, pero se muestra como hacerla */
    tm_mc.bt.onRelease = function() {
        this.busca_lycos(idb);
    };
    return tm_mc;
}

Con todo esto viene lo mas facil, hacer el calendario!, esta claro que podriamos ahaerlo a mano pero meter todos y cada uno de los meses....haremos una funcion qu epueda ser llamada cuantas veces queramos, solo pasandole el mes y el año que lo dibuje ella solita

Code:

function meses(m, a) {
    //eliminamos anteriores botones si hubiera
    for (k=0; k<32; k++) {
        _root["tempo"+k].removeMovieClip();
    }
    algo.removeMovieClip();
    /*kreamos un mc para dobujar dentro, asi solo tendremos que borrar el mc y no todos los
    cuadraditos dibujados */
    _root.createEmptyMovieClip("algo", 999);
    delete elmes;
    /* al pasarle parametro al objeto date, situa la fecha en ese mes y año, los parametros son
    año,mes,dia,horas,minutos,...etc etc, tambien se podria haber hecho con las funciones setYear y
    setMonth del objeto Date, pero asi resulta mas comodo */
    elmes = new Date(a, m);
    //recogemos el mes que queremos ver
    mesCurso = elmes.getMonth();
    //lo mismo con el año
    anioCurso = (Number(elmes.getYear())+1900);
    //ponemos el display en pantalla
    mes_txt.text = ma[mesCurso]+" "+anioCurso;
    /*esto nos dira en que fila esta, la fila 0 es la de Do,Lu,Ma,Mi;ju;vi;sa */
    encol = 1;
    //un bucle para que cree los dias
    for (d=1; d<=31; d++) {
        //hoyToca, es para ver si hay boton o no
        hoyToca = 0;
        //usamos el setDate, para el numero del mes
        elmes.setDate(d);
        /*esto es curioso, tenemos que comprobar si son de el mismo mes, ya que un dia 31 en
        septiembre [inexistente], lo admite como dia 1 de octubre*/
        if (elmes.getMonth() == mesCurso) {
            /*miramos en nuestro array de acciones por si hay algun dia que concuerde */
            for (k=0; k<dias_activos.length; k++) {
                manejo = new Array();
                manejo = dias_activos[k].split("/");
                if (manejo[0] == d && manejo[1] == (Number(mesCurso)+1)
                     && manejo[2] == anioCurso) {
                    //si es afirmativo guardamos los datos      
                    hoyToca = d;
                    enDia = k;
                }
            }
            /*si hoyToca es mayor de cero indica que hay una accion y por lo tanto un botn....
             lo llamaremos pues*/
            if (hoyToca>0) {
                dia = hazBoton(d, d, acciones[enDia], idblog[enDia]);
            } else {
                /*en caso contrario es un dia normal, comprobaremos si se trata de hoy,
                comprobando dia, mes y año*/
                if (d == diaHoy && mesCurso == mesHoy && anioCurso == anioHoy) {
                    dia = hazDia(d, "0x950964", d);
                } else {
                    dia = hazDia(d, "0xF25BD5", d);
                }
            }
            dia._x = 22*elmes.getDay();
            dia._y = 17*encol;
            /*si getDay [devuelve los dias de la semana es 6, indica que llega al fin de una
            semana, sumaremos a encol para pasar a la linea siguiente */
            if (elmes.getDay()>=6) {
                encol++;
            }
        }
    }
}

Por ultimo solo nos faltan las acciones de los botones pertinentes para navegar entre los meses y como no, inicializar nuestro calendario

Code:

ant_mc.onRelease = function() {
    if (mesCurso>0) {
        meses(--mesCurso, anioCurso);
    } else {
        mesCurso = 11;
        meses(mesCurso, --anioCurso);
    }
};
sig_mc.onRelease = function() {
    if (mesCurso<11) {
        meses(++mesCurso, anioCurso);
    } else {
        mesCurso = 0;
        meses(mesCurso, ++anioCurso);
    }
};
meses(mesHoy, anioHoy);

No creo que tenga que explicarlo, solo dire que para los dias tiene que estar en el "dias_activos" de esta forma 04/09/2004, es decir, dd/mm/aaaa, estar atentos a sumar 1900 cuando recojamos el año, y a sumar 1 cuando comprobemos, ya que para nosotros septiembre es el mes 9, para flash el 8 [todo esto ya esta en el script] Finalmente os pondre el codigo [pero no comentare] el de la acciones de los botones, es sencillo, solo tendras que copiarlo en el MC "activo"

Code:

bt.onRollOver = function() {
    _root.tip.autoSize = "left";
    _root.tip.text = accion;
    _root.tip._x = Math.round(-_root.tip._width-1);
    _root.tip._y = _root._ymouse-20;
};
bt.onRollOut = function() {
    _root.tip._y = -300;
};

Ejemplo ON-LINE - dentro de mi BLOG- Mucha gente me pregunta como mete datos en el calendario, fue algo que se me olvido explicar (con detenimiento) pero basicamente tendreis 3 Arrays ....
dias_activos (con las fechas en formato dd/mm/aaaa), acciones(el titulo de la noticia) y idblo (el identificador en la DB). Con un ejemplo quedara mas claro

Code:

 dias_activos = ["01/01/2005","15/01/2005","31/03/2005"];
acciones = ["Feliz Año Nuevo","El dia de mi cumpleaños","Mañana me suben el ADSL"];
idblog = [3,5,6];

Evidentemente "Feliz Año Nuevo" se corresponde al post del 01/01/2005 y al identificador 3 de la DB.

mcrfansweb

woo...muy bueno!...los probe y a la primera no me salio haha...pero ia lo solucione ^^

muy bueno , trae mas tutos en Flash ^^