Cambios y Coldplay

Hice algunos cambios, ahora se envian pings a Bitcoras.com, Bitadir.com y correctamente a Technorati.com

¿Y que tiene que ver Coldplay?
No mucho, pero hace tiempo habia escuchado la cancion Clocks en version salsa y no tenia idea de donde venia, ya que estaba muy bien hecha.

Porque de algo tiene que vivir Bono Box, junto a sus amigotes planetarios (U2, Maroon 5, Coldplay, Radiohead, Sting, etc..etc)
e hicieron un disco con la banda de Buena Vista Social Club.
En realidad fue el Artists Project Earth que junta algo de arte, musica y entretencion pra salvar el planeta.

De muestra … un llutu

Coldplay – Relojes

Las imagenes perennes (a.k.a. Todo se puede hacer)

Lo que K queria para la pagina en que estamos trabajando era un menu infinito….
Si, tan simple y complejo como un menu infinito.

Despues de buscar casi 100 combinaciones de palabras (scrolling menu, vertical image, image slider, slider scrolling, etc..etc…)
se me ocurrio scrolling image loop, y llegue a este maravilloso tutorial.

 The Infinite Menu (El Menu Infinito)
creado por ilyas usal

Lo que el hizo es un menu infinito, que gira y gira y gira. El objetivo que quiere K es un poco distinto, pero no tanto.
Es crear un scroll horizontal con imagenes, que gire, gire y gire.

Asi que aqui viene el tutorial simplificado de como hacer

Las imagenes perennes
FLA final de Las Imagenes perennes

  1. El Flash
    Crear un archivo flash con el alto y ancho deseado para el menu.
    Partimos creando un cubo con una proporcion de 4×3 (casi todas las imagenes tienen esta proporcion)
    Por ejemplo, si queremos un ancho de 160 = 40×4 pixeles, por lo que el alto de esta imagen sera 40×3 = 120 pixeles.

    Una vez creado, lo convertimos en un Movie Clip (Windows = F8)

    mc_imagen

    Repetimos cuantas veces queramos el recien creado Movie Clip, esto dependiendo de las imagen que queramos mostrar
    Nota: Los numeros estan sobre los Movie Clips, son solo referenciales. Tambien la imagen esta corrida 40 pixeles hacia abajo para ver el espacio seteado.

    Cuadro 4 fuera
    Cuadro 4 fuera.

    Una vez que tenemos eso listo, le ponemos un nombre de instancia a cada elemento, por ejemplo mc_1, mc_2, mc_3 y mc_4
    Esto sera importante para la etapa de cargar una imagen en dichos elementos.

    nombre de instancia
    Nombre de instancia

    Luego convertimos el conjunto en un nuevo Movie Clip.
    Yo le llame mc_compacto.

  2. El Efecto
    La idea del efecto es bastante simple (y claramente no se me ocurrio a mi)
    El clip se mueve de izquierda a derecha, hasta quedar completamente fuera del cuadro. Cuando sucede esto, el clip vuelve a su comienzo, por esto el clip se debe repetir.
    mc_compacto repetido
    mc_compacto repetido

    Nuevamente convertimos a Movia Clip el conjunto.
    Yo lo llame mc_general.

    Y asi, cuando la primera parte salga del cuadro, la segunda estara en la misma posicion que la primera, repetimos el cuadro, y no se notara que nos saltamos a la primera.

  3. La mafia, perdon magia (a.k.a. Actionscript)
    Una vez que tenemos el Movie Clip mc_general con todo dentro (mc_compacto 2 veces), simplemente le hacemos un click para seleccionarlo e incluimos lo siguiente

    Codigo:
     onClipEvent (load)
    {
       velocidad=-5;
       limite=-640;

    }
     onClipEvent (enterFrame)
    {
       _x+=velocidad;
       if (_x < limite) _x=0;
    }


    IMPORTANTE
    Explicacion de algunas cosas en el Actionscript

    limite=-640;

    Como vemos, en la linea 9 es donde ocurre la magia.
    Si el clip llega a los limite (negativo del largo de mc_compacto) volvemos a 0.

    velocidad=-5;

    Con estos podemos definir la velocidad que se mueve, tambien dependera de los FPS que tenga nuestra pelicula.
    Recomiendo 24 fps para la pelicula.

    Actionscript en Flash
    Actionscript en Flash

    Fijense que en la parte de arriba de la imagen dice Action – Movie Clip y abajo mc_general, por lo que esta correctamente seleccionado el

  4. Cargando las imagenes (algo mas de Actionscript)
    Para cargar las imagenes, usaremos un poco de action script simple, sin precarga ni nada muy exotico, mal que mal, las imagenes solo deberian pesar 7KB maximo.
    Utilizaremos las siguientes imagenes
    inf_1inf_3inf_4

    Para esto, tendremos que abrir cada Movie Clip con doble click, para asi editarlo internamente)
    Doble Click -> mc_general
    Doble Click -> mc_compacto

    En el Timeline seleccionamos el unico cuadro que tendremos

    Y incluimos la siguiente accion

    mc_1.loadMovie("http://www.kyl.cl/rapidin/inf_1.jpg");
    mc_2.loadMovie("http://www.kyl.cl/rapidin/inf_2.jpg");
    mc_3.loadMovie("http://www.kyl.cl/rapidin/inf_3.jpg");
    mc_4.loadMovie("http://www.kyl.cl/rapidin/inf_4.jpg");
    stop();

    De esta manera, cuando se carguen los elementos se llamara a su respectiva imagen y cargara en cada elemento que creamos.

  5. El Gran Final

    El Gran Final

P.D.: As you wish

A Dormir…

Ya, termine de hacer lo que iba a hacer…
Se me olvido que el otro dia iba a escribir un tutorial de cosas Flash, pero se me reinicio el compuador y todo ese escandalo.

Yap, mejor a dormir
MUKA!
Ojala descanse mi hermosa.
(me habia hecho un jugo y nime lo tome…chuta que ando trabajoso)

AA…las fotos, se las voy a mandar al mail altiro
MUKA!
(no se para que le pongo tantos tags a esta cosa…jejeje…si no dice nada)

Deteccion Automatica de Flash Player

En varios lados encontre información de como usar la autodeteccción del reproductor Flash, para que cuando uno haga una aplicacion quede andando bien y no como me esta pasando

Hice una aplicacion y ni me acorde de la deteccion, asi que cualquier que lo vea con Flash 7, no ve nada.
(de ahi pongo la aplicacion, porque aun no es publica)

Asi que ..a investigar se ha dicho

Flash Player Detection Kit
http://www.adobe.com/products/flashplayer/download/detection_kit/

Mejor una guia simple de como usar este especifico, existen otros, pero la verdad, prefiero irme a la segura nomas.

1.- Baja y descomprime el archivo http://download.macromedia.com/pub/flash/detection_kit/detectionkit.zip, el tutorial esta hecho basado en la version Flash Player Detection Kit 1.5, asi que cualquier nueva version, simplemente dejen un mensaje en este post y lo reviso de ahi para actualizar este mensaje.

2.- En la carpeta existe un subdirectoio llamado Express Installation, ese vamos a usar.

3.- Abre el archivo playerProductInstall.html con algun editor de Texto o de HTML, la idea es que se vea el codigo de la fuente, asi que si usas Dreamweaver debes ponerlo en Code o Codigo

4.- Busca la siguiente instruccion (linea 10 hasta linea 16)


// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;

El var requiredMajorVersion = 8; es la version del Flash que seria necesaria para ver el Flash creado.
Todo esta listo para usarlo con Flash 8, asi que por ahora no hay problemas (Hasta ahora he visto pocas paginas que usen Flash 9 o Flex 2)

5.- Adecuar el script a nuestro Flash, asi que a buscar (linea 60 a linea 73)

    AC_FL_RunContent(
            "src", "example",
            "width", "550",
            "height", "200",
            "align", "middle",
            "id", "detectionExample",
            "quality", "high",
            "bgcolor", "#FFFFFF",
            "name", "detectionExample",
            "allowScriptAccess","sameDomain",
            "type", "application/x-shockwave-flash",
            ‘codebase’, ‘http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab’,
            "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );

Lo mas importante de cambiar es  "src", "example""width", "550" y "height", "200", ya que estos son los que cambian segun tengamos nuestra pelicula, obviamente con el nombre del archivo que unos quieres, por ejemplo quedaria

"src", "productos",

 NO HAY que incluir el .swf, directamente el nombre, y despues los tamaños del archivo.
En mi caso uso FlashVars, asi que la instruccion completa queria

    AC_FL_RunContent(
            "src", "productos",
            "FlashVars", "llamar="+$id+"",
            "width", "565",
            "height", "450",
            "align", "middle",
            "id", "detectionExample",
            "quality", "high",
            "bgcolor", "#FFFFFF",
            "name", "detectionExample",
            "allowScriptAccess","sameDomain",
            "type", "application/x-shockwave-flash",
            ‘codebase’, ‘http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab’,
            "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );

En rojo las instrucciones que cambia y en rosado la que agregue tomando como ejemplo una instruccion que viene mas arriba.

6.- Subir los siguientes archivos que estan en el directorio

AC_OETags.js
playerProductInstall.as
playerProductInstall.html
playerProductInstall.swf
playerProductInstallCallback.as

Ahora, siemplemente visitamos la URL donde lo subimos o la local donde esta.
El archivo playerProductInstall.html le podemos cambiar el nombre.

¿Más información?

moock fpi
Antiguo sistema de deteccion de Flash, ahora ya no se actaliza mas, ya que el mismo autor encuentra que el
Flash Player Detection Kit es mejor.
http://www.moock.org/webdesign/flash/detection/moockfpi/

Cristalab: Instalación del Flash Player Detection Kit
Cristallab siempre entrega tips super utiles y simples, pesro al parecer este ultimo esta basado en una version
mas antigua del asi que no me sirvio de mucho en realidad, solo para descubrir que existia uno oficial de Adobe
(Adobe, el del Acrobat, compro Macromedia y todos sus productos, para los que no lo sabian)
http://www.cristalab.com/tips/21428/instalacion-del-flash-player-detection-kit

Macromedia Flash Detection Kit
La pagina oficial del detector de Flash
http://www.adobe.com/products/flashplayer/download/detection_kit/

Ya, ahora sigo trabajando en la segunda cosa que tenia que hacer hoy
(aunque me acabo de dar cuenta de que eran 3 cosas las que tenia que hacer hoy, pero una puede esperar)