How to create animated menus with Adobe Fireworks Comment créer des menus animés avec Adobe feux d'artifice
Posted on September 7, 2008 at 5:38 am Posté le Septembre 7, 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. Feux d'artifice est surtout connu pour sa capacité à créer rapidement des prototypes de DHTML. En vous laissant créer des vecteurs et les bitmaps à la volée, il libère le concepteur de la tâche de passer d'un rédacteur de DHTML pour un bitmap ou d'édition de vecteur. Adobe Fireworks vous permettent de créer des image cartes appelé points chauds sur la zone spécifiée du fichier image que vous modifiez. Ce qui peut donc être utilisé comme un menu avec une URL cible ou de l'action.
The best way to get Fireworks is via its website: La meilleure façon d'obtenir feux d'artifice est par l'intermédiaire de son site Web: www.adobe.com/products/fireworks www.adobe.com / products / feux d'artifice . 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 a souvent des promotions pour les clients qui achètent leur logiciel dans le forfait. Si vous êtes un Photoshop ou Flash utilisateur alors que vous pourriez obtenir un rabais si vous achetez en même temps.
Once you get the software installed, click menu File > New Une fois que vous avez installé le logiciel, cliquez sur le menu Fichier> Nouveau
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: Vous pouvez définir la taille de l'image et la résolution que vous voulez créer. Après avoir cliqué sur OK, vous obtiendrez un document vierge de la taille que vous avez choisi:
This will serve as your canvas. To put a text on it click the A icon under the Vector frame: Cela vous servir de toile. Pour mettre un texte à ce sujet cliquez sur l'icône sous un vecteur cadre:
After that you can start typing in text to the canvas: Après cela, vous pouvez commencer à taper dans le texte de la toile:
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. Dans l'exemple ci-dessus, j'ai tapé sur "Menu" avec la police Arial de taille 21. L'onglet Properties ci-dessous automatiquement à propriétés de texte au moment de l'entrée en mode texte. You can use this to edit the properties of the text selected. Vous pouvez l'utiliser pour modifier les propriétés du texte sélectionné.
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: Pour ajouter une zone cliquable (c'est-à-dire hotspot) sur la zone du texte, cliquez sur le hotspot rectangulaire outil Web dans le cadre du cadre puis faites glisser un rectangle sur la zone autour du "Menu" texte:
It will create a bluish rectangle with a clock icon on the hotspot: Il permettra de créer un rectangle bleu avec une horloge icône sur le point chaud:
If you click the clock icon you will be asked to choose from several options. Si vous cliquez sur l'icône horloge vous sera demandé de choisir parmi plusieurs options. Choose Add Pop-up Menu… Choisissez Ajouter 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: Le Pop-up éditeur de menu à l'écran. Type ici le texte et le lien du menu que vous voulez voir apparaître sous le "Menu" texte:
I typed the search engines and after pressing Next you will see the Appearance tab: J'ai tapé les moteurs de recherche et après avoir appuyé sur Suivant, vous verrez l'onglet Apparence:
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. Ici, vous pouvez définir les couleurs et la police du sous-menu. Le "UP State" est l'apparition lorsque vous n'êtes pas en vol stationnaire pointeur de votre souris sur ce point. "Sur État» sur l'autre, c'est l'état actif lorsque le pointeur de la souris plane au-dessus. La partie inférieure de l'onglet Apparence montre également l'aperçu de la sous-menu pour que vous puissiez voir en temps réel l'apparence de votre police et arrangements de couleur.
After the Appearance tab comes the Advanced tab: Après l'onglet Apparence est l'onglet Avancé:
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. Ici, vous pouvez définir la cellule de remplissage, largeur, hauteur, espacement et vous pouvez également modifier les frontières du menu. Expérience avec des paramètres différents à ces paramètres avancés pour obtenir l'apparence que vous voulez.
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: le dernier onglet est la position onglet que vous pouvez définir lorsque le menu apparaît par rapport au point chaud. Sur l'exemple ci-dessous, j'ai choisi la deuxième option que le menu est situé au bas du hotspot:
After clicking Done , the canvas will appear along with the ghost outline of the pop-up menu: Après avoir cliqué sur Terminé, la toile apparaît ainsi que le fantôme aperçu des pop-up menu:
To preview the output, click File > Preview In Browser : Pour prévisualiser le résultat, cliquez sur Fichier> Aperçu Navigateur:
You should see your browser appear with the generated HTML displaying on it: Vous devriez voir apparaître votre navigateur avec le HTML généré sur l'affichage:
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. Lorsque vous survolez sur "Menu" de Google et Yahoo pop-up menu apparaît. Lorsque vous êtes satisfait de votre travail, vous pouvez exporter le projet dans un complet HTML et images. Il suffit de cliquer sur Fichier> Exporter pour le faire. Aussi, vous pouvez mettre le projet à un format PNG afin que vous puissiez le modifier plus tard.
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. Ce n'est que la capacité de base d'Adobe feux d'artifice, vous pouvez faire beaucoup plus avec son puissant vecteur et bitmap rédacteur en chef et sa capacité à créer des pages Web et des couches très rapidement.
If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to Si vous avez aimé ce tutoriel sur la création de menus animés, vous peut également être intéressés par d'autres articles connexes sur la manière de create animated Flash menus créer des menus animés Flash , how to , Comment create animated GIFS online créer des GIF animés en ligne , and how to , Et comment create an animated avatar créer un avatar animé .
Ben Carigtan writes about computers, technology and how to get the best out of them. Ben Carigtan écrit sur l'informatique, la technologie et comment obtenir le meilleur d'entre eux.
» Filed Under »Classé dans Computer Tips Computer Tips
 Save this page Enregistrer cette page |  Stir it up on Mixx Stir It Up sur Mixx | |
 Add to Reddit Ajouter à Reddit |  Stumble this page Stumble cette page |
Related Posts Postes connexes
- Creating animated Flash banners with SWiSH Max Création de bannières Flash animé avec Max SWiSH
- How to make photo slideshows in Fireworks CS3 Comment faire des diaporamas de photos dans Fireworks CS3
- How to make your own cell phone theme Comment créer votre propre téléphone cellulaire thème
- How to add comments to an Excel Worksheet cell Comment ajouter des commentaires à une cellule Excel
- Picasa Tips - Use Picasa HTML templates to create a unique story of pictures Picasa Conseils - Utiliser Picasa modèles HTML pour créer une histoire unique de photos
One Response to “How to create animated menus with Adobe Fireworks” One Response to "Comment créer des menus animés avec Adobe feux d'artifice"
Pingbacks - How to make photo slideshows in Fireworks CS3 Comment faire des diaporamas de photos dans Fireworks CS3 Says: Indique:
[...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Vous êtes un utilisateur passionné de feux d'artifice, également consulter mon autre post sur la façon de créer des menus animés dans Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Si vous n'avez pas de feux d'artifice, vous pouvez également créer des diaporamas de photos DVD dans Vista en utilisant les [...]
September 8th, 2008 at 5:19 am 8 septembre 2008 à 5:19 am
Please post your comments/suggestions! S’il vous plaît envoyer vos commentaires / suggestions!
[...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [...] Vous êtes un utilisateur passionné de feux d'artifice, également consulter mon autre post sur la façon de créer des menus animés dans Fireworks. If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...] Si vous n'avez pas de feux d'artifice, vous pouvez également créer des diaporamas de photos DVD dans Vista en utilisant les [...]
September 8th, 2008 at 5:19 am 8 septembre 2008 à 5:19 am
