How to create animated menus with Adobe Fireworks Как создать анимированные меню с Adobe Фейерверк

Posted on September 7, 2008 at 5:38 am Отправлен 7 сентября 2008 года в 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. Фейерверк лучше всего известна своими возможностями для быстрого создания прототипов, DHTML. К Вам создать векторов и изображения на лету, она высвобождает проектировщика задача перехода от DHTML редактор для растровых и векторных редактора. Adobe фейерверков позволит вам создать графические карты называемых "горячих точек" по указанной области графического файла вы редактируете. Это, в свою очередь, могут быть использованы в качестве меню с соответствующей целевой URL или действий.

The best way to get Fireworks is via its website: Лучший способ Фейерверк это через свой веб-сайт: www.adobe.com/products/fireworks www.adobe.com / продуктов / фейерверк . 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 часто Акции для клиентов, которые покупают их программное обеспечение в пакете. Если вы Photoshop или Flash пользователь, то Вы можете получить скидку, если вы покупаете их вместе.

Once you get the software installed, click menu File > New Как только вы получаете программное обеспечение установлено, нажмите кнопку меню File> New

изображение

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: Вы можете установить размер изображения и резолюции, который вы создаете. После нажатия кнопки OK, вы получите пустой документ по размеру, что вы выбрали:

изображение

This will serve as your canvas.  To put a text on it click the A icon under the Vector frame: Это будет служить в качестве холста. Для размещения текста на него нажать иконку под Вектор кадра:

изображение

After that you can start typing in text to the canvas: После этого можно начинать вводить текст на холсте:

изображение

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. В примере выше, я набрал "Меню" с использованием шрифта Arial размером 21. Свойствах на вкладке ниже автоматического изменения свойств текста при входе в текстовом режиме. You can use this to edit the properties of the text selected. Вы можете использовать это для редактирования свойств текста выбрана.

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: Чтобы добавить кликабельный зоне (например, "горячих точек") в области текста, нажмите кнопку "горячих точек" прямоугольный инструмент под веб-кадр затем перетащите прямоугольник по району "Меню" текст:

изображение

It will create a bluish rectangle with a clock icon on the hotspot: Он будет создавать голубовато прямоугольник с часами значок в "горячих точек":

изображение

If you click the clock icon you will be asked to choose from several options. Если вы щелкните значок часов вам будет предложено выбрать один из нескольких вариантов. Choose Add Pop-up Menu… Выберите Добавить Всплывающее меню…

изображение

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: Всплывающее меню редактора должно появиться. Вводите здесь текст и ссылки из пунктов меню вы хотите появляться под "Меню" текст:

изображение

I typed the search engines and after pressing Next you will see the Appearance tab: Я набрал поисковых системах и после нажатия на следующем шаге вы видите на вкладке Внешний вид:

изображение

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. Здесь вы можете настроить цвета и шрифт подменю. "Вверх государство" является внешний вид, когда вы не колеблется вашей мыши над этой пункта. В "За государством", с другой стороны, это активное состояние, когда курсор мыши hovers над ней. В нижней части вкладки Внешний вид также показывает предварительный подменю, чтобы вы могли видеть в режиме реального времени появления выбранного шрифта и цветовых схем.

After the Appearance tab comes the Advanced tab: После появления на вкладке приходит вкладке Дополнительно:

изображение

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: Вы должны увидеть в браузере отображаться с порожденных HTML отображение на нем:

изображение

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. Когда вы курсор, "Меню" Google и Yahoo всплывающем меню появятся. После того как Вы довольны своей работе, вы можете экспортировать проект в полной HTML файлы и изображения. Просто выберите Файл> Экспортировать это сделать. Кроме того, Вы можете сохранить проект PNG формате так что вы можете отредактировать его позже.

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. Это лишь основные возможности Adobe Фейерверки, вы можете сделать гораздо больше, с его мощным векторных и растровых редактора и его возможности для создания веб-страниц и слои очень быстро.

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 создания анимированных Flash меню , how to , Способы create animated GIFS online создавать анимированные GIF ы онлайн , and how to И как create an animated avatar создавать анимированные аватара .

Ben Carigtan writes about computers, technology and how to get the best out of them. Бен Carigtan пишет о компьютерах, технологии и как получить лучший из них.

Enjoyed this post? Понравилась эта должность? Subscribe to Online Tech Tips via Подключение к Интернет через Технология Полезные советы RSS Feed RSS Подача or via или через Email Электронная почта and receive free daily productivity tips. и получать бесплатно в день производительность советы.

» Filed Under », Поданной в соответствии с Computer Tips Компьютерные Советы

Добавить к Delicious Save this page Сохраните эту страницу МИКС она Stir it up on Mixx Тщательно ее на МИКС
Reddit Add to Reddit Добавить к Reddit StumbleUpon Stumble this page Stumble на этой странице

Related Posts Похожие Сообщений

One Response to “How to create animated menus with Adobe Fireworks” Один из ответов на "Как создать анимированные меню с Adobe Фейерверк"

      Pingbacks
    1. How to make photo slideshows in Fireworks CS3 Как сделать фото в слайд-шоу фейерверков CS3 Says: Говорит:

      [...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Вы avid Фейерверк пользователя, а также ознакомиться с моим других посткоммунистических о том, как создавать анимированные меню в фейерверков. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Если у вас нет фейерверков, вы также можете создать слайд-шоу фотографий DVD в Vista, используя [...]

      September 8th, 2008 at 5:19 am 8 сентября 2008 года в 5:19 утра
    Please post your comments/suggestions! Просьба отправить комментарии и предложения!