Galería de imágenes FLASH

Galería realizada 100% en FLASH, la galería ofrece una forma agradable e interactiva de visualizar fotografías, imágenes, gráficos, cuadros digitales. Por su diseño puede adaptarse a prácticamente cualquier interés (educativo, cultural, artístico, etc.) Una mirada rápida de la galería se puede apreciar en la siguiente imagen que ha sido tomada del DEMO el cuál junto con los fuentes, está ubicado en la parte inferior. Galería de imágenes FLASH

Esta galería con las dimensiones originales (W 766 px, H 580 px), te recomendamos no añadir más de 30 fotografías digitales. Por otra parte podrás cambiar el fondo de la animación si es necesario para acoplarla a tu sitio web, en este ejemplo lo tienes en negro (#000000), pues combina con todo.

Como ustedes saben, los fuentes dicen más que mil palabras, así que como en todos los manuales, en el inferior pueden descargarlo,

Sin embargo, realizaremos un poco más de comentarios sobre la galería
La utilidad de seguro es cambiar las imágenes y/o añadir nuevas, para lo cuál debemos seleccionar la capa imagenes y seleccionar el segundo fotograma, como se indica en el gráfico



Si ingresan al demo podrán fijarse que son 2 los efectos principales al seleccionar una imagen, es decir; al seleccionar una de las miniaturas ocurren 2 cosas, con el clic se mantiene fija la imagen actual mientras la animación va mostrando la imagen que hemos seleccionado, si estamos en la imagen1 y seleccionamos la misma imagen 1 es posible que el efecto no se note, pero si estamos en la imagen1 y seleccionamos la imagen 2, ocurre que la imagen1 se mantiene fija mientras aparece la segunda imagen lo cuál crea lo agradable de la animación.

Es importante considerar la transición que efectúan las imágenes porque de no tenerlo en cuenta, en los cambios que realicemos a los fuentes no podremos tener el efecto deseado.
Mostrado en gráficos, lo que debemos hacer es lo siguiente:

Después de ingresar en el segundo fotograma de la capa imagenes, se mostrará una capa de nombre imagenes2 a través de la cual personalizaremos la galería. En el primer fotograma de la capa imagenes2 se encuentran para el caso de este manual las 4 imagenes que se animan, y en el segundo fotograma de la misma capa están las imágenes que sirven para el efecto de transición que en realidad son las mismas anteriores.



Para realizar los cambios y personalizar la galería con nuestras imágenes, fotos o gráficos, debemos realizar los cambios en los imágenes que están en los 2 fotogramas.

Ingresando al primer fotograma, encontrarán un aspecto similar al siguiente:



Cada uno de los fotogramas indicados en la imagen anterior representará una fotografía, gráfico o imagen que ustedes deseen mostrar, de este modo para cambiar las imágenes primero las importamos a la librería dando File -> Import -> Import to Library y las reemplazamos por las existentes.

Posterior a eso, y siguiendo en análisis que estamos realizando, en el segundo fotograma procedemos de forma exactamente igual

Pueden si lo desean agregar música a su galería, lo que sin lugar a duda mejorará la presentación, pero no debemos olvidar que el peso del archivo resultante también ira creciendo.

En el demo a continuación podrán visualizar la galería en funcionamiento.

Retornar al INICIO        Visualizar DEMO        Descargar Fuentes

Clic en en enlace: Clic aquí

Efecto hoja en botones FLASH

La utilización de flash en los sitios WEB casi siempre proveerá de una interfaz más animada, sin embargo está directamente relacionado el peso del archivo flash con la carga del sitio. En el caso de nuestros botones con efecto hoja hemos tratado de diseñarlos lo más liviano posible sin embargo obligadamente cargaremos nuestro al menos un poco nuestro sitio

La ventaja frente a esto es que cada vez el ancho de banda que nos otorgan nuestros ISP's es mayor y el archivo flash se hace casi imperceptible.

En este caso utilizaremos netamente:
• Adobe Flash CS3 Professional

En el Workspace por defecto debemos crear 3 capas con 1 frame cada una. La capa clave es la 1, sin embargo mencionamos a continuación que función cumplen las otras capas.

En la capa 3 tenemos el fondo en donde se mostrarán los botones, se podrá cambiar o quitar el fondo de acuerdo a nuestras necesidades, en la parte inferior están los fuentes listos a descargar.

En la capa 2 nos sirve para añadir un mensaje que en el caso del ejemplo hace referencia a "Capacitación en Seguridad y TICS - CAYTICS", como lo supondrán también pueden modificar el mensaje o borrarlo al momento de aplicarlo en sus sitios. Ahora, si creen que este manual o alguno de los publicados en CAYTICS ha sido de su utilidad podrían enlazarnos desde sus sitios.

En la capa 1 están las animaciones de cada botón. Tenemos 10 capas pero 7 botones, esto es así porque las capas adicionales sirven para lineas, trazos, etc. Vamos a visualizar una de las capas dado que esto se repetirá para todos los botones que deseemos añadir.

Para uno de los botones tenemos la siguiente estructura:



Es necesario que descarguen los fuentes para poder evidenciar la estructura que tiene los botones junto con la funcionalidad que ofrecen, con el análisis de los fuentes será mucho más clara la redacción que aquí se realiza. Cada uno de los botones se enlaca a un URL en una ventana nueva. Para el caso del botón que revisamos el código es el siguiente:

onClipEvent (load)
{
    num = 1;
    this.ti1.gotoAndStop(num);
    this.ti2.gotoAndStop(num);
}
on (rollOver)
{
    this.gotoAndPlay("s1");
    this.swapDepths(_root.maxdepth + 1);
}
on (rollOut)
{
    this.gotoAndPlay("s2");
}
on (release)
{
     _root.animation = 0;
     _root.link_prev = _root.link;
     _parent["item" + _root.link].gotoAndPlay("s2");
     _root.link = num;
     _root.play();
     _root.getURL("http://www.caytics.com.ec/", "_blank");
}


Los botones tienen la siguiente apariencia con sin fondo:



Con fondo negro como se encuentra el DEMO, los botones tienen la siguiente apariencia, les recomiendo visualizarlo:



Retornar al INICIO        Visualizar DEMO        Descargar Fuentes       

También te recomendados

Galería de Imágenes en FLASH

Clic en en enlace: Clic aquí

Reportes PHP con FLASH

Introducir componentes flash para los diversos reportes que elaboremos nos ayudará a poder plasmar de forma precisa y sin un análisis tedioso el contenido del mismo. Es de lo más desagradable tener que analizar reportes donde todo se muestra sin orden y sin un componente gráfico que de forma inmediata indique al receptor lo que tratamos de mostrar. Por otra parte a un nivel gerencial es muy inadecuado utilizar reportes que no expresen !nada!.

Un ejemplo de lo comentado es la imagen a continuación:



Este tipo de reportes oculta información sensible para un nivel gerencial y no ayuda a la toma de decisiones.

FusionCharts es una herramienta que ayuda a crear gráficos interactivos para aplicaciones web empresariales, es el líder de la industria de reportes.

Con este componente potencializaremos nuestro sitio, proveeremos una interfaz atractiva y principalmente guiaremos a la toma de decisiones a través de reportes profesionales.



Otro ejemplo de la utilización de este componente, lo visualizamos a continuación. Evidentemente no tiene punto de comparación con el reporte visto líneas arriba.



Que buscamos ?

• Crear un ambiente gráfico que nos ayuda a crear gráficos, medidores, etc., manejados por datos para sus aplicaciones en la web.
• Mostrar reportes que sean fáciles de entenderlos, dinámicos y en lo posible den vida a nuestras aplicaciones.
• Apoyar a la toma de decisiones.

Retornar al INICIO        Visualizar DEMO        Descargar Fuentes

Clic en en enlace: Clic aquí