Menu

14 feb 2014

Banner animado en fireworks


Lo primero tras abrir un documento sobre el que trabajar en fireworks, es meterse en el menú ventana y abrir las 3 ventanas: capas, estados y comportamiento.

Tras esto, lo que deberemos hacer es crear la primera imagen de la publicidad (en este caso la palabra hola), la que el usuario verá en primera instancia sin realizar ninguna acción (la imagen puede ser un gif animado).

Después deberemos crear un nuevo estado, donde pondremos la imagen que saldrá como resultado de interactuar con la primera (en este caso adiós), en este nuevo estado no hay ninguna capa creada, si queremos conservar algún elemento del anterior estado deberemos copiar la capa en la que esté.

Una vez hecho esto,  volveremos a ir al estado 1, y colocaremos una caja de acción con la herramienta división en el menú de web, sabiendo que será el desencadenante de la acción. Luego colocaremos otro cuadrado que abarque todo el elemento que queremos que salga en el estado 2.
Una vez puestos los dos cuadrados (que saldrán en una carpeta compartida en todos los estados llamada web)  buscaremos en el centro del primer cuadrado una especie de círculo gris al que deberemos clicar y arrastrar al segundo cuadrado, que a su vez deberemos buscar el circulo gris en su centro y clicar con el botón derecho y buscar la opción de intercambiar imagen.
Dentro del menú de intercambiar imagen aparecerá el nombre del cuadrado y más abajo el estado al que llevara (también tenemos la opción de que lleve a un documento que no se halle dentro del banner)

Deberemos comprobar en la ventana de comportamiento la acción que deberemos realizar para que funcione.

Para comprobar que el banner hace su trabajo nos iremos al menú archivo y nos meteremos en abrir con Firefox (o cualquier buscador web)
Y por ultimo para guardarlo podemos elegir entre .png o .html, para webs.


No hay comentarios: