How to create animated menus with Adobe Fireworks Como criar menus animados com o Adobe Fireworks
Posted on September 7, 2008 at 5:38 am Postado em 7 de setembro de 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. Fogos é mais conhecido por sua capacidade de criar rápida DHTML protótipos. Ao deixá-lo a criar vetores e bitmaps no mesmo instante, ela liberará o designer da missão de comutação de um editor de DHTML um bitmap ou vetor editor. Adobe Fireworks permitem que você crie imagem mapas chamados "pontos quentes" sobre a área de especificado o arquivo de imagem que você está editando. Este, por sua vez, pode ser usado como um menu com uma meta correspondente URL ou ação.
The best way to get Fireworks is via its website: A melhor maneira de chegar Fireworks é através do seu site: www.adobe.com/products/fireworks www.adobe.com / products / fogos . 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 freqüentemente tem divulgações para clientes que compram seu software em pacotes. Se você é um usuário Flash Photoshop ou então você poderá obter um desconto se você comprá-los juntos.
Once you get the software installed, click menu File > New Depois de obter o software instalado, clique menu Arquivo> Novo
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: Você pode definir o tamanho da imagem ea resolução que deseja criar. Após clicar em OK, você recebe um documento em branco do tamanho que você escolheu:
This will serve as your canvas. To put a text on it click the A icon under the Vector frame: Isto irá servir como seu lona. Para colocar um texto sobre ele clique no ícone no âmbito do Vector Uma moldura:
After that you can start typing in text to the canvas: Depois que você pode começar a digitar no texto para as telas:
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. No exemplo acima, eu digitei "Menu" utilizando a fonte Arial tamanho de 21. A guia Properties abaixo muda automaticamente para Texto propriedades à entrada modo texto. You can use this to edit the properties of the text selected. Você pode usar esse recurso para editar as propriedades do texto selecionado.
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: Para adicionar uma zona clicável (ou seja, hotspot) sobre a superfície do texto, clique na ferramenta rectangular hotspot no âmbito da Web frame, em seguida, arraste um retângulo sobre a área em torno do "Menu" texto:
It will create a bluish rectangle with a clock icon on the hotspot: Ele vai criar um rectângulo azul com um relógio ícone no hotspot:
If you click the clock icon you will be asked to choose from several options. Se você clicar no ícone relógio será solicitado que você escolher várias opções. Choose Add Pop-up Menu… Escolha Adicionar menu pop-up…
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: O menu pop-up editor deve aparecer. Neste tipo de texto, bem como a relação dos itens do menu que você quer que apareça no âmbito do "Menu" texto:
I typed the search engines and after pressing Next you will see the Appearance tab: Eu digitei os mecanismos de pesquisa e depois pressionando seguinte irá ver a guia Aparência:
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. Aqui você pode definir o tipo de letra e as cores do submenu. O "Estado Up" é a aparência quando você não está pairando seu ponteiro do mouse sobre esse item. O "Mais de Estado", por outro lado é o estado ativo quando o ponteiro do mouse paira sobre ele. A parte inferior da guia Aparência também mostra o preview do submenu para que você possa ver em tempo real a aparência do seu tipo de letra e esquemas de cor escolhida.
After the Appearance tab comes the Advanced tab: Após a guia Aparência vem a guia Avançado:
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. Aqui você pode definir a célula estofo, largura, altura, espaçamento e também você pode editar as fronteiras do menu. Experimento com diferentes parâmetros para essas configurações avançadas para obter a aparência que você deseja.
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: o guia é a última posição na guia onde você pode definir onde o menu pop-up aparecerá em relação ao hotspot. Sobre o exemplo abaixo Eu escolhi a segunda opção do menu onde está no fundo do hotspot:
After clicking Done , the canvas will appear along with the ghost outline of the pop-up menu: Feito Após clicar, aparecerá a tela juntamente com o fantasma do esquema no menu pop-up:
To preview the output, click File > Preview In Browser : Para visualizar a saída, clique em Arquivo> Visualizar no navegador:
You should see your browser appear with the generated HTML displaying on it: Você deverá ver o seu navegador aparecer com a exibição HTML gerado por ele:
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 você coloca o rato sobre "Menu" do Google e Yahoo menu pop-up aparecerá. Assim que estiver satisfeito com seu trabalho, você pode exportar o projeto em uma completa arquivos HTML e imagens. Basta clicar em Arquivo> Exportar para fazer isso. Além disso, você pode salvar o projeto para um formato PNG, para que você possa editá-lo posteriormente.
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. Este é apenas o básico capacidade de Adobe Fireworks, você pode fazer muito mais com o seu poderoso editor vetorial e bitmap e sua capacidade para criar páginas da web e camadas muito rapidamente.
If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to Se você gostou deste tutorial sobre como criar menus animados, você também pode estar interessado em outros artigos relacionados como a forma de create animated Flash menus criar animações Flash menus , how to , A forma de create animated GIFS online criar gifs animados on-line , and how to , Bem como a forma de create an animated avatar criar um avatar animado .
Ben Carigtan writes about computers, technology and how to get the best out of them. Ben Carigtan escreve sobre computadores, tecnologia e como obter o melhor das mesmas.
» Filed Under »Arquivado em Computer Tips Computador Dicas
 Save this page Salvar esta página |  Stir it up on Mixx Mexa-se sobre Mixx | |
 Add to Reddit Adicionar a Reddit |  Stumble this page Tropeçar nesta página |
Related Posts Posts relacionados
- Creating animated Flash banners with SWiSH Max Criação de banners com animação Flash SWiSH Max
- How to make your own cell phone theme Como fazer o seu próprio telefone celular tema
- How to add comments to an Excel Worksheet cell Como adicionar comentários a uma célula Excel Worksheet
- Picasa Tips - Use Picasa HTML templates to create a unique story of pictures Dicas Picasa - Use o Picasa templates HTML para criar uma única história de imagens
- Create your own funny comic strips with photos of familes and friends Crie seu próprio engraçado banda desenhada com fotos de familes e amigos
