How to create animated menus with Adobe Fireworks So erstellen Sie animierte Menüs mit Adobe Fireworks
Posted on September 7, 2008 at 5:38 am Gesendet am 7. September 2008 um 5:38
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. Feuerwerk ist am besten bekannt für seine Fähigkeit zur raschen Schaffung von DHTML-Prototypen. Durch die Vermietung von Ihnen erstellten Vektoren und Bitmaps on-the-fly, bis es frei, dem Designer der Aufgabe der Wechsel von einem DHTML-Editor zu einer Bitmap-oder Vektor-Editor. Adobe Fireworks können Sie erstellen Image Maps genannte Hotspots in den angegebenen Bereich des Bildes Datei, die Sie bearbeiten. Dies wiederum kann als ein Menü mit einer entsprechenden Ziel-URL oder die Aktion.
The best way to get Fireworks is via its website: Der beste Weg, um Fireworks ist über die Internetseite der Gesellschaft: www.adobe.com/products/fireworks www.adobe.com / products / Feuerwerk . 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 hat häufig promos, für die Kunden kaufen ihre Software im Paket. Wenn Sie ein Photoshop oder Flash-Nutzer könnten dann bekommen Sie einen Rabatt, wenn Sie kaufen sie zusammen.
Once you get the software installed, click menu File > New Sobald Sie die Software installiert haben, klicken Sie im Menü Datei> Neu
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: Sie können die Größe des Bildes und der Entschließung Sie erstellen möchten. Nach einem Klick auf OK erhalten Sie ein leeres Dokument über das von Ihnen gewählte Größe:
This will serve as your canvas. To put a text on it click the A icon under the Vector frame: Diese dienen als Leinwand. Um einen Text über ihn klicken Sie auf die A-Symbol unter dem Vector-Rahmen:
After that you can start typing in text to the canvas: Danach kann beginnen Sie mit der Eingabe in Textform auf der Leinwand:
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. Im obigen Beispiel habe ich getippt "Menü" mit der Schriftart Arial der Größe 21. Die Registerkarte Eigenschaften unter automatisch Änderungen an Text-Eigenschaften beim Betreten Text-Modus. You can use this to edit the properties of the text selected. Sie können diese zu bearbeiten Sie die Eigenschaften des Textes ausgewählt.
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: So fügen Sie ein anklickbares Zone (dh Hotspot) auf dem Gebiet des Textes, klicken Sie auf den rechteckigen Hotspot-Tool unter der Web-Frame, dann ziehen Sie ein Rechteck auf dem Gebiet rund um den "Menü"-Text:
It will create a bluish rectangle with a clock icon on the hotspot: Es wird ein bläulich Rechteck mit einer Uhr-Symbol auf den Hotspot:
If you click the clock icon you will be asked to choose from several options. Wenn Sie auf die Uhr-Symbol werden Sie aufgefordert, wählen Sie aus mehreren Optionen. Choose Add Pop-up Menu… Wählen Sie Add Pop-up-Menü…
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: Die Pop-up-Menü-Editor erscheinen soll. Art hier den Text und den Link zu den Menüpunkten Sie wollen unter dem "Menü"-Text:
I typed the search engines and after pressing Next you will see the Appearance tab: Ich tippte die Suchmaschinen und nach dem Drücken von Weiter sehen Sie die Registerkarte Darstellung:
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. Hier können Sie die Farben und die Schrift von dem Untermenü aus. "UP State" ist das Aussehen, wenn Sie nicht Ihren Mauszeiger Mauszeiger über das Element. Die "Over State" auf der anderen Seite ist der aktive Zustand, wenn sich der Mauszeiger schwebt über ihm. Der untere Teil der Registerkarte zeigt auch die Vorschau auf das Untermenü, so dass Sie sehen können, Echtzeit über das Erscheinungsbild der von Ihnen gewählten Schriftart und Farbschemata.
After the Appearance tab comes the Advanced tab: Nach der Registerkarte "Darstellung" kommt die Registerkarte "Erweitert":
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. Hier können Sie die Zelle padding, Breite, Höhe, Abstand und auch Sie können die Grenzen des Menüs. Experimentieren Sie mit unterschiedlichen Parametern zu diesen erweiterten Einstellungen, um das Aussehen, die Sie wollen.
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: die letzte Registerkarte ist die Registerkarte Position dadurch können Sie festlegen, wo der Pop-up-Menü erscheint im Vergleich zu den Hotspot. Auf dem Beispiel unten Ich wählte die zweite Option in das Menü am unteren Rand des Hotspot:
After clicking Done , the canvas will appear along with the ghost outline of the pop-up menu: Nach dem Klick auf "Done", der Leinwand erscheint zusammen mit dem Gespenst Überblick über die Pop-up-Menü:
To preview the output, click File > Preview In Browser : Um eine Vorschau der Ausgang, klicken Sie auf Datei> Vorschau Im Browser:
You should see your browser appear with the generated HTML displaying on it: Sie sollten Ihrem Browser angezeigt werden mit dem generierten HTML-Anzeige auf:
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. Wenn Sie schweben über "Menü" der Google und Yahoo Pop-up-Menü wird angezeigt. Nachdem Sie sind zufrieden mit Ihrer Arbeit, können Sie das Projekt in eine komplette HTML-Dateien und Bilder. Klicken Sie einfach Datei> Export, dies zu tun. Auch, Sie können das Projekt auf eine PNG-Format, also können Sie sie später bearbeiten.
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. Dies ist nur die grundlegende Fähigkeit von Adobe Fireworks, können Sie sehr viel mehr mit seiner leistungsfähigen Vektor-und Bitmap-Editor und seine Fähigkeit zur Schaffung von Web-Seiten und Schichten sehr schnell.
If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to Wenn Sie gerne dieses Tutorial zur Erstellung von animierten Menüs, Sie könnten auch daran interessiert sein, andere damit zusammenhängende Gegenstände, wie zB wie man auf create animated Flash menus Erzeugung von animierten Flash-Menüs , how to , Wie man create animated GIFS online Erzeugung von animierten GIFs online , and how to , Und wie man create an animated avatar Eröffnen Sie ein animiertes avatar .
Ben Carigtan writes about computers, technology and how to get the best out of them. Ben Carigtan schreibt über Computer, Technologie und wie Sie das Beste aus ihnen.
» Filed Under »Abgelegt unter Computer Tips Computer-Tipps
 Save this page Speichern Sie diese Seite |  Stir it up on Mixx Stir It Up auf Mixx | |
 Add to Reddit Add to reddit |  Stumble this page Stumble dieser Seite |
Related Posts Verwandte Beiträge
- Creating animated Flash banners with SWiSH Max Erstellen von animierten Flash-Banner mit SWiSH max
- How to make photo slideshows in Fireworks CS3 So können Sie Foto-Diashows in Fireworks CS3
- How to make your own cell phone theme So können Sie Ihre eigenen Handy Thema
- How to add comments to an Excel Worksheet cell Wie sein, um Kommentare zu einem Excel-Arbeitsblatt-Zelle
- Picasa Tips - Use Picasa HTML templates to create a unique story of pictures Picasa-Tipps - Verwenden Sie Picasa HTML-Templates zu erstellen, eine einzigartige Geschichte von Bildern
One Response to “How to create animated menus with Adobe Fireworks” One Response to "Wie erstelle animierte Menüs mit Adobe Fireworks"
Pingbacks - How to make photo slideshows in Fireworks CS3 So können Sie Foto-Diashows in Fireworks CS3 Says: Sagt:
[...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Sie sind ein begeisterter Fireworks-Benutzer sind, finden Sie auch meine anderen Post auf, wie Sie animierte Menüs in Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Wenn Sie nicht über Feuerwerk, Sie können auch DVD-Fotos Diashows in Vista mit dem [...]
September 8th, 2008 at 5:19 am 8. September 2008 um 5:19
Please post your comments/suggestions! Bitte senden Sie ihre Kommentare und Vorschläge!
[...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Sie sind ein begeisterter Fireworks-Benutzer sind, finden Sie auch meine anderen Post auf, wie Sie animierte Menüs in Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Wenn Sie nicht über Feuerwerk, Sie können auch DVD-Fotos Diashows in Vista mit dem [...]
September 8th, 2008 at 5:19 am 8. September 2008 um 5:19
