FlashVortex | Animaciones Flash gratis para tu web.
Hola!
En esta oportunidad les traigo un tutorial bien explicado, se trata del sitio
FlashVortex.com.
Con
FlashVortex podremos crear varios tipos de animaciones en flash para tu web:
Menus, Textos, Banners, Botones y Relojes en flash.
En este tutorial aprenderan a crear cada una de estas animaciones para que las coloquen en sus webs.
Menus.
Hacemos click en la pestaña menus y seleccionamos el menu de nuestra preferencia.
Ahora tenemos que editar el menu.
Paso 1 - Coloca el texto de los botones y los links.
Texto de los botones: En esta parte debemos colocar el texto o el titulo de los botones que llevara el menu, si queremos agregar una categoria con sub-paginas colocamos un guion (-) antes del titulo. Se debe dejar una linea de espacio entre cada texto.
Links: Aqui debemos colocar las url de los links del menu, los cuales se abriran al darle click al titulo o texto del boton.
Links emergentes: Esta parte la debemos dejar en blanco, a menos que quieras que los links se abran en otra ventana y no en la misma donde se encuentra el menu.
Paso 2- Elejir y editar el tema de tu menu.
Elejir el tema: Este paso lo podemos suprimir si el tema que posee el menu actualmente es el de tu preferencia, si quieres ver otros temas haz click en el boton View All (Ver Todos) y seleccionas el nuevo tema.
Ajustar el matiz del tema: Esta opción es para aumentar la intensidad de los colores en el menu, recomiendo dejar esto en 0 porque si le asignamos un valor le cambiara los tonos de los colores al menu.
Tema de la ventana.
Alineación del texto del titulo: Con esta opción podremos cambiar la alineación del texto que esta en el titulo de la ventana, se puede colocar a la izquierda, en el centro o a la derecha.
Color del texto del titulo: Aqui se puede cambiar el color del texto del titulo de la ventana.
Tema principal del botón.
Alineación del texto: Aqui podremos cambiar la alineación del texto de los botones: izquierda, centrado o derecha.
Color del texto en estado inicial: En esta parte podemos cambiar el color del texto de los botones que se ve inicialmente.
Color del texto al pasar el mouse: Aqui se puede cambiar el color del texto que aparece al pasar el mouse sobre el botón.
Color del texto de estado: Esta opción no es muy importante, se puede suprimir y dejarlo en blanco, sirve para cambiar el color del texto de estado del mouse.
Tema del sub botón.
Posee las mismas opciones de el tema principal del botón por lo cual no hace falta mencionarlo nuevamente. Con estas opciones podremos editar la apariencia del Sub botón que puede funcionar como Sub-pagina de una categoria.
Paso 3 - Editar las opciones del diseño del menu.
Relleno del menu completo: Con esta opción podemos elejir el tamaño del relleno del menu, recomiendo dejarlo en 2 pixeles.
Diseño de los botones principales.
Ancho de los botones principales: Aqui podemos elejir el ancho de los botones en pixeles.
Espacio vertical entre los botones: Con esta opción podremos modificar el espacio de separación entre cada botón.
Diseño de los Sub Menus.
Ancho de los Sub Menus: Aqui podemos modificar el ancho que tendran los botones de los Sub Menus.
Espacio vertical entre los Sub Menus: Este es el espacio que hay entre cada botón de un Sub Menu.
Relleno de arriba de los Sub Menus: Con esta opción podemos elejir el relleno de la parte de arriba de los Sub Menus.
Relleno de la izquierda de los Sub Menus: En esta parte se puede modificar el relleno de los Sub Menus en la parte izquierda.
Animación de los Sub Menus.
Velocidad de los Sub Menus: Con esta opción podremos elejir la velocidad de los Sub Menus.
Dinámica de los Sub Menus: Aqui podemos elejir el efecto que tendra el Sub Menu.
Paso 4 - Editar las opciones de la ventana.
Marco de la ventana de visualización: Esta opción nos permite desactivar o activar el marco de la ventana, recomiendo tenerlo activado.
Titulo de la ventana: Aqui podemos colocar el titulo de la ventana del menu.
Color de Fondo: Aqui podemos seleccionar el color de fondo que tendra la ventana antes de cargarse.
Luego de editar todo el menu hacemos click en
Generate Animation, esperamos a que cargue la pagina, copiamos el codigo y lo pegamos donde queramos que aparesca.
Resultado:
Nota: Tenga en cuenta que estos pasos son para crear menus verticales, para crear menus horizontales se deben editar otras opciones similares a las explicadas anteriormente.
Textos.
Vamos a la pestaña de Texts (Textos) y seleccionamos el de nuestra preferencia.
Ahora vamos a editar nuestro texto.
Paso 1 - Colocar los Textos.
Palabras para mostrar: En esta parte colocamos los textos que se mostraran, debemos dejar 1 linea de espacio entre cada texto.
Fuente del texto: Aqui podemos cambiar la fuente del texto.
Color del texto: Aqui podemos elejir el color que tendra el texto.
Tamaño del Texto: Aqui podemos seleccionar el tamaño del texto.
Espacio entre los caracteres: Con esta opción elejimos el espacio entre los caracteres del texto.
Paso 2 - Diseño del texto.
Posición del texto: Aqui podemos elejir la posición del texto.
Margen izquierdo: Aqui se puede elejir el margen izquierdo.
Margen derecho: Aqui se puede elejir el margen derecho.
Margen de arriba: Aqui se puede elejir el margen de arriba.
Margen de abajo: Aqui se puede elejir el margen de abajo.
Paso 3 - Propiedades de la animación.
Muestra de retraso: Aqui se puede elejir el tiempo de retraso que tendra cada texto antes de mostrarse cada etiqueta.
Tiempo de muestra: Con esta opción se puede elejir el tiempo que tardara mostrandose el texto, debe ser menor a la muestra de retraso.
Reiniciar la animación: Aqui podemos seleccionar si queremos que se reprodusca nuevamente la animación o los textos despues de que terminen de mostrarse.
Retraso de caracter: Aqui podemos elejir el retraso para llevar a cabo antes de presentar cada uno de los caracteres con la animación.
Retraso del resplandor: Aqui se puede elejir el retraso que tendra cada resplandor.
Paso 4 - Opciones misceláneas.
Fondo de la pelicula: Con esta opción se puede elejir el fondo que se vera antes de comenzar la animación.
Cuando tengamos todas estas opciones modificadas a nuestra preferencia hacemos click en Generate Animation, copiamos el codigo y lo pegamos donde queremos que aparesca.
Resultado:
Banners.
Primero hacemos click en la pestaña
Banners y seleccionamos el de nuestra preferencia.
Ahora vamos a editarlo.
Paso 1 - Primera linea de la edición del texto.
Primera linea de texto: En esta parte colocamos el texto que aparecera de primero.
Color del texto: Aqui elejimos el color de nuestro texto.
Tamaño del texto: Aqui se elije el tamaño del texto.
Haci sucesivamente vamos colocando el texto, elijiendo el color y el tamaño del texto hasta llegar al paso 5 configuraciones generales.
Paso 5 - Configuraciones generales.
Pagina que aparecera al hacer click: En esta parte debemos colocar la pagina de destino, es decir la pagina a donde llevara el banner al hacer click en el. Es necesario colocar la url completa:
http://www.tuweb.es.tl
Cuando este todo listo hacemos click en
Generate Animation, copiamos el codigo y lo colocamos donde querramos.
Resultado:
Nota: Esta explicación es para crear algunos estilos de banners, existen otros estilos que tienen opciones diferentes pero similares, se pueden guiar por la explicación anterior.
Botones.
Seleccionamos en el menu buttons (botones) y elejimos el de nuestra preferencia.
Ahora vamos a editar el botón.
Paso 1 - Colocar la etiqueta del texto.
Texto: Aqui escribimos el texto del botón.
Fuente del texto: Aqui elejimos la fuente del texto.
Paso 2 - Colocar el link.
Link: Aqui colocamos el link a donde llevara el botón al hacer click sobre el.
Paso 3 - Elejir los colores.
Color normal: Aqui podemos elejir el color normal que tendra el botón a simple vista.
Color al pasar el mouse: Como el nombre lo indica, aqui debemos seleccionar el color que aparecera al pasar el mouse sobre el botón.
Color de abajo: Hace combinación con el color al pasar el mouse y produce un buen efecto en el botón.
Fondo de la animación: Aqui elejimos el fondo del botón, recomiendo colocarlo del mismo color del fondo de la web donde estara para que haga combinación.
Paso 4 - Opciones misceláneas.
Velocidad de la animación: En esta parte elejimos la velocidad de la animación. Puede ser de 0 hasta 120.
Cuando esten listos todos los cambios hacemos click en
Generate Animation, copiamos el codigo y lo pegamos en nuestro sitio.
Resultado:
Nota: Esta explicación es para crear un estilo de botón, para crear otros estilos se deben seguir otros pasos, pero similares.
Relojes.
Hacemos click en Cloks (relojes) y seleccionamos el de nuestra preferencia.
Ahora vamos a editar el reloj.
Paso 1 - Seleccionar y editar el efecto del texto.
Efecto del texto: Aqui seleccionamos el efecto que tendra el texto.
Color del borde del texto: Aqui seleccionamos el color del borde del texto.
Gradiente del texto interno: Aqui elejimos los colores del gradiente o degradado del texto.
Mostrar el efecto de reflexión: Aqui elejimos si queremos mostrar o no el efecto de reflexión del texto.
Tamaño del texto: Aqui seleccionamos el tamaño que tendra el texto.
Fuente del texto: Aqui seleccionamos la fuente del texto.
Paso 2 - Editar las opciones misceláneas del reloj.
Usar formato am/pm: Aqui elejimos si queremos usar el formato de hora am y pm.
Color de fondo: Aqui seleccionamos elcolor de fondo del reloj.
Margen horizontal: Aqui elejimos los margenes horizontales, es decir el margen izquierdo y el derecho del reloj.
Cuando tengamos todas las opciones editadas hacemos click en
Generate Animation, copiamos el codigo y lo pegamos donde queremos que aparesca el reloj.
Resultado:
Nota: Esta explicación es para crear algunos relojes, existen otros relojes que se crean de otra manera pero siguiendo pasos similares a los explicados.
Listo! Ya puedes comenzar a hacer uso de este increible y util sitio para crear animaciones en Flash gratis.
Para revomer la publicidad de
FlashVortex solo debemos registrarnos en el servicio. Pero atención, para poder registarnos debemos pagar la membresia de premium.
Todos los pasos fueron traducidos del ingles al español con la ayuda de
Google traductor y la interpretación de
Team-AyudaMaster.
Espero que les sirva de ayuda el tutorial!
Saludos!
El Equipo de
Team-AyudaMaster.
