How to create animated menus with Adobe Fireworks Cómo crear menús animados con Macromedia Fireworks

Posted on September 7, 2008 at 5:38 am Publicado el 7 de septiembre de 2008 a 5:38 am

Fireworks is best known for its capability to create rapid DHTML prototypes.  By letting you create vectors and bitmaps on the fly, it frees up the designer of the task of switching from a DHTML editor to a bitmap or vector editor.  Adobe Fireworks let you create image maps called hotspots on the specified area of the image file you are editing.  This in turn can be used as a menu with a corresponding target URL or action. Fireworks es mejor conocido por su capacidad para crear prototipos rápidos DHTML. Al que le permite crear mapas de bits y vectores sobre la marcha, se libera el diseñador de la tarea de pasar de una DHTML a un editor de mapas de bits o vectores editor. Fireworks Adobe le permiten crear mapas de imagen llamados puntos calientes en la zona concreta del archivo de imagen que está editando. Esto, a su vez puede ser utilizado como un menú con la correspondiente URL de destino o de acción.

The best way to get Fireworks is via its website: La mejor forma de fuegos artificiales es a través de su página web: www.adobe.com/products/fireworks www.adobe.com / products / fuegos artificiales . Adobe frequently has promos for customers who buy their software in package.  If you are a Photoshop or Flash user then you might get a discount if you buy them together. Adobe ha frecuentemente promociones para los clientes que compren su software en paquete. Si usted es un Photoshop, Flash o usuario, entonces usted podría obtener un descuento si se compran juntos.

Once you get the software installed, click menu File > New Una vez que el software instalado, haga clic en el menú Archivo> Nuevo

imagen

You can set the size of the image and the resolution you want to create.  After clicking OK you will get a blank document of that size you chose: Puede establecer el tamaño de la imagen y la resolución que desea crear. Después de hacer clic en Aceptar usted recibirá un documento en blanco de ese tamaño que ha seleccionado:

imagen

This will serve as your canvas.  To put a text on it click the A icon under the Vector frame: Esto servirá como su lienzo. Para poner un texto en que haga clic en el icono bajo el marco de vectores:

imagen

After that you can start typing in text to the canvas: Después de eso puedes empezar a escribir texto en el lienzo:

imagen

In the example above, I typed “Menu” using the Arial font of size 21.  The Properties tab below automatically changes to Text properties upon entering text mode. En el ejemplo anterior, escrito "Menú" utilizando el tipo de letra Arial tamaño de 21. La ficha Propiedades a continuación cambia automáticamente a propiedades de texto al entrar en modo texto. You can use this to edit the properties of the text selected. Usted puede utilizar este para editar las propiedades del texto seleccionado.

To add a clickable zone (ie hotspot)  on the area of the text, click the rectangular hotspot tool under the Web frame then drag a rectangle on the area around the “Menu” text: Para añadir una zona de hacer clic (es decir, hotspot) en el área del texto, haga clic en el hotspot herramienta rectangular bajo el marco de la web a continuación, arrastre un rectángulo sobre la zona que rodea el "Menú" texto:

imagen

It will create a bluish rectangle with a clock icon on the hotspot: Se creará un rectángulo azul con un icono de reloj en el punto de acceso:

imagen

If you click the clock icon you will be asked to choose from several options. Si hace clic en el icono de reloj se le pedirá que elegir entre varias opciones. Choose Add Pop-up Menu… Elija Añadir menú emergente…

imagen

The Pop-up menu editor should appear.  type here the text and the link of the menu items you want to appear under the “Menu” text: El Pop-up menu editor debería aparecer. Escriba aquí el texto y el enlace de los elementos de menú que desea que aparezca en el marco del "Menú" texto:

imagen

I typed the search engines and after pressing Next you will see the Appearance tab: I mecanografiadas los motores de búsqueda y después de pulsar Siguiente, verá la ficha Apariencia:

imagen

Here you can set the colors and the font of the submenu.  The “Up State” is the appearance when you are not hovering  your mouse pointer over that item.  The “Over State” on the other hand is the active state when the mouse pointer hovers over it.  The lower part of the Appearance tab also shows the preview of the submenu so you can see real time the appearance of your chosen font and color schemes. Aquí puede ajustar los colores y la fuente del submenú. La "Hasta Estado", es la aparición cuando usted no está suspendido el puntero del ratón sobre ese tema. La "A lo largo de Estado" por otro lado es el estado activo cuando el puntero del ratón levita del mismo. La parte inferior de la ficha Apariencia también muestra la vista previa del submenú para que pueda ver en tiempo real la apariencia de la fuente de su elección y esquemas de color.

After the Appearance tab comes the Advanced tab: Después de la aparición ficha viene la ficha Opciones avanzadas:

imagen

Here you can set the cell padding, width, height, spacing and also you can edit the borders of the menu.  Experiment with different parameters to these advanced settings to get the look that you want. Aquí se puede establecer la célula de relleno, ancho, alto, espaciamiento de los nacimientos y también puede editar las fronteras del menú. Experimente con diferentes parámetros para estas configuraciones avanzadas para obtener la apariencia que usted desea.

the last tab is the Position tab wherein you can set where the pop up menu will appear relative to the hotspot.  On the example below I chose the second option wherein the menu is at the bottom of the hotspot: la última ficha es la posición ficha donde se puede establecer que el menú emergente aparecerá en relación con el punto de acceso. En el siguiente ejemplo he elegido la segunda opción en la que el menú está en la parte inferior del hotspot:

imagen

After clicking Done , the canvas will appear along with the ghost outline of the pop-up menu: Después de hacer clic en Hecho, el lienzo se publicará junto con el fantasma de esquema en el menú emergente:

imagen

To preview the output, click File > Preview In Browser : Para obtener una vista previa de salida, haga clic en Archivo> Vista previa en navegador:

imagen

You should see your browser appear with the generated HTML displaying on it: Usted debe ir a ver a su navegador aparecen con la generada en HTML que muestra que:

imagen

When you hover over “Menu” the Google and Yahoo pop-up menu will appear.  After you are satisfied with your work, you can export the project into a complete HTML and images files.  Just click File > Export to do this.  Also, you can save the project to a PNG format so you can edit it later. Cuando le señalan con el cursor "Menú" de Google y Yahoo menú emergente aparecerá. Después de que usted esté satisfecho con su trabajo, usted puede exportar el proyecto en un completo HTML y archivos de imágenes. Basta con hacer clic en Archivo> Exportar para hacer esto. Por otra parte, puede guardar el proyecto a un formato PNG para que puedas editar más tarde.

This is only the basic capability of Adobe Fireworks, you can do a lot more with its powerful vector and bitmap editor and its capability to create web pages and layers very quickly. Esta es sólo la capacidad básica de Adobe Fireworks, puede hacer mucho más con su potente vector y editor de mapa de bits y su capacidad para crear páginas web y capas con gran rapidez.

If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to Si te gusto este tutorial sobre la creación de menús animados, usted también podría estar interesado en otros artículos conexos como la forma de create animated Flash menus crear menús animados en Flash , how to , Cómo create animated GIFS online crear GIFs animados en línea , and how to , Y cómo create an animated avatar crear un avatar animado .

Ben Carigtan writes about computers, technology and how to get the best out of them. Ben Carigtan escribe sobre computadoras, tecnología y cómo obtener lo mejor de ellos.

Enjoyed this post? Disfrutado de esta entrada? Subscribe to Online Tech Tips via Suscríbase en línea a través de Consejos técnicos RSS Feed RSS Feed or via oa través de Email Correo electrónico and receive free daily productivity tips. y recibir diaria gratuita productividad consejos.

» Filed Under »Presentadas en virtud de Computer Tips Computer Tips

Agregar a Delicious Save this page Guarda esta página Mixx, Stir it up on Mixx Revuelva hasta que en Mixx
Reddit Add to Reddit Añadir a Reddit StumbleUpon Stumble this page Tropiezo esta página

Related Posts Puestos relacionados

One Response to “How to create animated menus with Adobe Fireworks” Una Respuesta a "Cómo crear menús animados con Adobe Fireworks"

      Pingbacks
    1. How to make photo slideshows in Fireworks CS3 ¿Cómo se puede realizar pases de diapositivas en Fireworks CS3 Says: Dice:

      [...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Usted es un ávido usuario de Fireworks, también salir antes de mi otro post sobre cómo crear menús animados en Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Si no dispone de fuegos artificiales, también puede crear DVD de fotos en presentaciones de diapositivas usando la Vista [...]

      September 8th, 2008 at 5:19 am 8 de septiembre de 2008 a 5:19 am
    Please post your comments/suggestions! Por favor envie sus comentarios o sugerencias!