How to create animated menus with Adobe Fireworks Come creare menu animati con Adobe Fuochi d'artificio

Posted on September 7, 2008 at 5:38 am Pubblicato il 7 settembre, 2008 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. Fuochi d'artificio è più conosciuto per la sua capacità di creare prototipi rapidi DHTML. Facendo si crea vettori e bitmap al volo, è di liberare il progettista del compito di passare da un redattore di DHTML una bitmap o editore vettoriale. Fireworks Adobe consentono di creare mappe immagine chiamati hotspot sulla specifica area il file di immagine che si sta modificando. Ciò, a sua volta può essere usato come un menu con un corrispondente URL di destinazione o di azione.

The best way to get Fireworks is via its website: Il modo migliore per ottenere Fuochi d'artificio è attraverso il sito web: www.adobe.com/products/fireworks www.adobe.com / products / fuochi d'artificio . 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 spesso promozioni per i clienti che acquistano il loro software nel pacchetto. Se sei un Photoshop o Flash utente quindi si potrebbe ottenere uno sconto se si acquistano insieme.

Once you get the software installed, click menu File > New Una volta installato il software, fare clic su menu File> Nuovo

immagine

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: È possibile impostare la dimensione dell'immagine e la risoluzione che si desidera creare. Dopo aver fatto clic su OK, vedrete un documento vuoto di dimensioni che hai scelto:

immagine

This will serve as your canvas.  To put a text on it click the A icon under the Vector frame: Questo servirà come il tuo tela. Per mettere un testo su di esso cliccate sul icona sotto il telaio Vector:

immagine

After that you can start typing in text to the canvas: Dopo di che potete iniziare a digitare il testo con la tela:

immagine

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. Nell'esempio precedente, ho digitato "Menu" utilizzando il carattere Arial di dimensione 21. La scheda Proprietà di seguito automaticamente modifiche al Testo proprietà al momento in cui entrano in modalità testo. You can use this to edit the properties of the text selected. È possibile utilizzare questo per modificare le proprietà del testo selezionato.

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: Per aggiungere una zona cliccabile (vale a dire hotspot) sullo spazio di testo, fare clic sul rettangolare hotspot strumento nel quadro del Web telaio quindi trascinare un rettangolo sulla zona intorno al "Menu" testo:

immagine

It will create a bluish rectangle with a clock icon on the hotspot: Si creerà un bluastra rettangolo con un orologio sulla barra delle applicazioni di hotspot:

immagine

If you click the clock icon you will be asked to choose from several options. Se si sceglie l'orologio icona vi verrà chiesto di scegliere tra diverse opzioni. Choose Add Pop-up Menu… Scegliere Aggiungi menu pop-up…

immagine

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: Il menu pop-up editor dovrebbe apparire. Digitare qui il testo e il link del menu di elementi che si desidera visualizzare sotto "Menu" testo:

immagine

I typed the search engines and after pressing Next you will see the Appearance tab: Ho digitato i motori di ricerca e dopo aver premuto Avanti vedrete la scheda Aspetto:

immagine

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. Qui è possibile impostare i colori e il carattere del sottomenu. La "Fino Stato" è l'aspetto quando non si è hovering il puntatore del mouse su tale voce. Il "Nel corso di Stato" d'altra parte è stato l'attiva quando il puntatore del mouse si adagia su di esso. La parte inferiore della scheda Aspetto mostra anche l'anteprima del sottomenu, in modo da poter vedere in tempo reale l'aspetto della vostra scelta font e schemi di colore.

After the Appearance tab comes the Advanced tab: Dopo la scheda viene la scheda Avanzate:

immagine

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. Qui è possibile impostare la cella imbottitura, larghezza, altezza, e anche la spaziatura è possibile modificare i confini del menu. Sperimentare con diversi parametri per queste impostazioni avanzate per ottenere l'aspetto desiderato.

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: l'ultima scheda è la posizione in cui scheda è possibile impostare in cui il pop up menu relativi ai hotspot. Sulla esempio riportato di seguito ho scelto la seconda opzione in cui il menu è in fondo la hotspot:

immagine

After clicking Done , the canvas will appear along with the ghost outline of the pop-up menu: Dopo aver fatto clic su Fatto, la tela viene visualizzato con il fantasma di delineare il menu pop-up:

immagine

To preview the output, click File > Preview In Browser : Per visualizzare in anteprima l'output, fare clic su File> Preview in Browser:

immagine

You should see your browser appear with the generated HTML displaying on it: Si dovrebbe vedere comparire il tuo browser con l'HTML generato la visualizzazione su di esso:

immagine

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. Quando si hover su "Menu" di Google e Yahoo menu pop-up apparirà. Quando si è soddisfatti con il vostro lavoro, è possibile esportare il progetto in un completo HTML e file di immagini. Basta fare clic su File> Esporta per farlo. Inoltre, è possibile salvare il progetto a un formato PNG in modo che tu possa modificare in un secondo momento.

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. Questa è soltanto la capacità di base di Adobe Fuochi d'artificio, si può fare molto di più con la sua potente vettore e bitmap editor e la sua capacità di creare pagine web e strati molto rapidamente.

If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to Se ti è piaciuto questo tutorial sulla creazione di menu animati, anche voi potrebbero essere interessati in altri articoli correlati come come create animated Flash menus creare menu animato Flash , how to , Come create animated GIFS online gif animate creare online , and how to , E come create an animated avatar creare un avatar animato .

Ben Carigtan writes about computers, technology and how to get the best out of them. Ben Carigtan scrive di computer, la tecnologia e come ottenere il meglio dal loro.

Enjoyed this post? Goduto di questo post? Subscribe to Online Tech Tips via Iscriviti a tecnologia on-line tramite Suggerimenti RSS Feed RSS Feed or via o via Email E-mail and receive free daily productivity tips. e ricevere gratuitamente suggerimenti produttività quotidiana.

» Filed Under »Archiviato in Computer Tips Suggerimenti per computer

Aggiungi ai Delicious Save this page Salva questa pagina Mixx è Stir it up on Mixx Stir it up a Mixx
Reddit Add to Reddit Aggiungi ai Reddit Stumbleupon Stumble this page Inciampare questa pagina

Related Posts Posti connessi

One Response to “How to create animated menus with Adobe Fireworks” Una risposta a "Come creare menu animati con Adobe Fuochi d'artificio"

      Pingbacks
    1. How to make photo slideshows in Fireworks CS3 Come fare slideshow di foto in Fireworks CS3 Says: Dice:

      [...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Sei un utente appassionato di fuochi d'artificio, di controllare anche il mio post su come creare menu animato in Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Se non si dispone di fuochi d'artificio, è possibile anche creare slideshow di foto di DVD in Vista utilizzando il [...]

      September 8th, 2008 at 5:19 am 8 settembre 2008, 5:19 am
    Please post your comments/suggestions! Vi preghiamo di inviare i vostri commenti / suggerimenti!