Hoe te om geanimeerde menu's met het Vuurwerk van de Adobe te creëren

Gepost op 7 September, 2008 in 5:38 am

Het vuurwerk is bekendst voor zijn vermogen om snelle prototypen te creëren DHTML. Door u tot vectoren leiden en bitmaps te laten tijdens de vlucht, het omhoog de ontwerper van de taak bevrijdt om van een redacteur DHTML op bitmap over te schakelen of vectorredacteur. Het Vuurwerk van de adobe laat u beeldkaarten creëren genoemd hotspots op het gespecificeerde gebied van het beelddossier u uitgeeft. Dit kan beurtelings als menu met een overeenkomstig doel URL of actie worden gebruikt.

De beste manier om Vuurwerk te krijgen is via zijn website: www.adobe.com/products/fireworks. De adobe heeft vaak promos voor klanten die hun software in pakket kopen. Als u een gebruiker van Photoshop of van de Flits toen bent zou u een korting kunnen krijgen als u hen samen koopt.

Zodra u de software geïnstalleerde krijgt, klik menu Dossier > Nieuw

U kunt de grootte van het beeld en de resolutie plaatsen u wilt tot stand brengen. Na het klikken O.K. zult u een leeg document van die grootte krijgen u koos:

Dit zal als uw canvas dienen. Om een tekst op het te zetten klik A pictogram onder het Vectorkader:

Na dat kunt u beginnen in tekst aan het canvas te typen:

In het voorbeeld hierboven, typte ik „Menu“ gebruikend font Arial van grootte 21. Het lusje van Eigenschappen verandert hieronder automatisch in de eigenschappen van de Tekst op het ingaan van tekstwijze. U kunt dit gebruiken om de eigenschappen van de geselecteerde tekst uit te geven.

Om een clickable streek toe te voegen (d.w.z. hotspot) op het gebied van de tekst, klik het rechthoekige hotspot hulpmiddel onder het kader van het Web dan sleep een rechthoek op het gebied rond de tekst van het „Menu“:

Het zal tot een blauwachtige rechthoek met een klokpictogram op hotspot leiden:

Als u het klokpictogram klikt zal u worden gevraagd om van verscheidene opties te kiezen. Kies Voeg Pop-up Menu toe…

De Pop-up menuredacteur zou moeten verschijnen. typ hier de tekst en de verbinding van de menupunten u in het kader van de tekst van het „Menu“ wilt verschijnen:

Ik typte de onderzoeksmotoren en na het drukken daarna zult u het lusje van de Verschijning zien:

Hier kunt u de kleuren en font van submenu plaatsen. De „omhoog Staat“ is de verschijning wanneer u niet hangt uw muiswijzer over dat punt. „Over Staat“ enerzijds is de actieve staat wanneer de muiswijzer over het hangt. Het lagere deel van het lusje van de Verschijning toont ook de voorproef van submenu zodat kunt u echt zien - tijd de verschijning van uw gekozen font en kleurenschema's.

Na de Verschijning komt het lusje het Geavanceerde lusje:

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.

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:

After clicking Done, the canvas will appear along with the ghost outline of the pop-up menu:

To preview the output, click File > Preview In Browser:

You should see your browser appear with the generated HTML displaying on it:

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.

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.

If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to create animated Flash menus, how to create animated GIFS online, and how to create an animated avatar.

Ben Carigtan writes about computers, technology and how to get the best out of them.

Enjoyed this post? Subscribe to Online Tech Tips via RSS Feed or via Email and receive free daily productivity tips.

» Filed Under Computer Tips

Save this page	Stir it up on Mixx
Add to Reddit	Stumble this page

One Response to “How to create animated menus with Adobe Fireworks”

How to make photo slideshows in Fireworks CS3 Says:

[...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...]
September 8th, 2008 at 5:19 am