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 불꽃을 만들 어디 이미지 맵 핫스팟에 지정된 지역의 이미지라는 파일을 편집합니다. 이는 해당하는 메뉴로 사용할 수 타겟 또는 조치합니다.

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 또는 플래시 사용자 그렇다면 그들이 같이 구입하는 경우 할인을받을 수있습니다.

Once you get the software installed, click menu 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: 이미지의 크기를 설정할 수있습니다의 해상도를 만들려합니다. 확인을 클릭하면 빈 문서의 크기를 세례를받을 것입니다 당신의 선택 :

이미지

This will serve as your canvas.  To put a text on it click the A icon under the Vector frame: 이것은 귀하의 캔버스를 제공합니다.에 넣을 a 아이콘을 클릭하여 아래의 텍스트가 그것 벡터 구조 :

이미지

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. 커서 때 "메뉴"구글과 야후 팝 - 설정 메뉴가 나타납니다. 후에는 귀하의 작업에 만족를 내보낼 수있습니다 제목과 이미지 파일을이 프로젝트를 완료합니다. 클릭한 파일> 내보내기를 이렇게합니다. 또한, 이 프로젝트를 저장할 수있습니다 형식이어야합니다 그래서 나중에 수정하실 수있습니다.

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 애니메이션 플래시 메뉴를 생성 , how to 하는 방법을 create animated GIFS online 애니메이션 gifs 온라인으로 작성 , 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 피드 or via 또는를 통해 Email 전자 우편 and receive free daily productivity tips. 매일 무료로 생산성을 팁 및 수신합니다.

» Filed Under »밑에 Computer Tips 컴퓨터 팁

장바구니에 맛있는 Save this page 이 페이지를 저장 그것 mixx Stir it up on Mixx 파장이 위에 mixx
reddit Add to Reddit 장바구니에 reddit stumbleupon Stumble this page 이 페이지에 비틀 거림

Related Posts 관련 기사

One Response to “How to create animated menus with Adobe Fireworks” 하나의 대응책을 "메뉴를 만드는 방법을 애니메이션 adobe 불꽃놀이"

      Pingbacks 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. [...] 당신은 열성적인 불꽃놀이와 사용자, 또한 내 다른 게시물을 체크 아웃 애니메이션 메뉴를 만드는 방법에 불꽃합니다. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] 하지 않은 경우 불꽃놀이, dvd 사진을 슬라이드쇼를 만들 수있습니다 [...]을 사용하여이 비스타

      September 8th, 2008 at 5:19 am 2008년 9월 8일에서 오전 5시 19분
    Please post your comments/suggestions! 게시하시기 바랍니다 귀하의 의견 / 제안!