Scénarisation et Création Multimédia

Bonjour à tous !

Aujourd’hui nous allons réaliser à l’aide de ce tutoriel, une barre de menu vertical à l’aide d’une feuille de style CSS.
Niveau du tuto : débutant avec quelques notions de dreamweaver.

Logiciel utilisé : Dreamweaver CS3

Tout d’abord, un conseil général, enregistrer régulièrement.

Pour commencer, ouvrez un modèle avec dreamweaver. Peut importe votre modèle, prenez quelques chose de simple, pourquoi pas simplement une page à fond uni avec 3 zones de divisions (Une longue bannière en haut, un zone de contenu au centre et une zone pour le menu sur la gauche).
Ici s’agit d’ailleurs d’une simple page sur fond gris diviser en 4 zones. Une zone pour la marque (ici Levi’s), une zone supérieure pour une bannière (dont nous ne nous occupons pas aujourd’hui, mais vous pourriez pourquoi pas mettre la bannière de Pierre Antoine), un zone de contenu et une zone (à gauche) pour notre menu.

De toutes façons, pour notre tutoriel, nous ne nous occuperons que de la tranche de gauche.

Dans cette tranche, créez un tableau d’une ligne et une seule colonne d’une largeur de 250 pixels (varie selon la largeur de votre menu). Pour créer ce tableau aller dans le menu insertion > Tableau, puis noter 1 colonne, 1 ligne et 250 pixels en largeur (ne pas mettre de largeur de bordure).

Une fois que vous avez créé le tableau, noter votre premier menu. dans mon cas, il s’agira de boutique en ligne. Sélectionner votre texte et cliquez sur liste simple dans la barre d’outils en bas de votre écran.

Retournez ensuite sur votre cellule de tableau et entrez vos autres titres de menu. Pour moi, il s’agit d’actualités, collections et magasin.
Maintenant que vous avez 4 rubriques, il s’agit de créer les pages correspondante à ces rubriques. Allez donc dans Fichier > nouveau… > Page issue d’un modèle. Sélectionnez votre site et le modèle de base que vous avez réalisé.
Créez vos pages, nommez les et n’oubliez pas de les enregistrer dans votre dossier racine. Vous devez ensuite tirer vos liens de chaque menu vers sa page correspondante. Pour cela, sélectionner votre ligne de texte (exemple :  boutique en ligne) puis allez sur la cible à coté de l’ascenseur de lien (en bas à droite de l’écran). Restez cliqué sur la cible et tirez la flèche vers la page que vous désirez.
Répétez l’opération pour chaque rubrique.
Une fois ceci réalisé, vous avez donc un modèle avec 4 rubriques en liste et 4 pages dans votre arborescence, ce qui me donne ceci (désolé pour la qualité de l’image, mais ce qui importe c’est les 4 lignes de titre surlignées en bleu (car il y a un lien) et la présence de mes 4 pages dans mon arborescence en bas à droite) :

À partir de maintenant, nous allons créer une nouvelle feuille de style CSS.
Pour cela appuyer sur nouvelle feuille de style dans votre bare d’outils en haut à droite de l’écran. Il s’agit de l’icone représentant une page avec un + (voir image ci dessous).

Une fenêtre de paramètre apparait alors. Dans type de sélecteur, cochez classe. Nommez votre feuille menugauche (sans espace) et cocher définir dans “nouveau fichier feuille de style”.
Valider, cela ouvre la fenêtre d’enregistrement. Enregistrez le style dans la rubrique page sous le nom que vous souhaitez (ex : menucss).
La fenêtre de modification des styles s’ouvre alors automatiquement.

Dans le menu type, sélectionner la police que vous souhaitez, modifiez sa taille, son épaisseur (J’ai choisi une police arial, une taille 13 et une épaisseur grasse comme indiqué dans la fenêtre ci-dessus).

Cliquer ensuite sur l’onglet arrière plan.
Vous avez la possibilité d’insérer de la couleur ou une image d’arrière plan (pour créer des boutons sous un fond en dégradé par exemple ou avec des motifs). Ici nous sélectionnons simplement une couleur pour que cela soit bien visible.
(Le rendu final sera bien évidemment extrêmement laid voir il pourrait vous piquer les yeux, mais c’est pour bien distinguer les possibilités des feuilles de styles.)
Cliquer ensuite sur OK.
Une fois ceci réalisé, sélectionner votre liste (boutique en ligne, collections..) puis ajouter votre style (cliquer sur l’ascenseur style au bas de votre écran).

Une fois la feuille de style menugauche appliquée à votre rubrique, allez dans votre menu CSS et sélectionner menugauche avant de créer une nouvelle feuille de style comme sur l’image :
Cette fois-ci, dans votre fenêtre de paramètre, vous cocherez Avancé dans votre type de sélecteur et cette feuille sera défini dans la nouvelle feuille que vous avez créé tout à l’heure (menucss si vous avez fait comme dans l’exemple). Nommez la : .menugauche ul

Les propriétés de style s’ouvre à nouveau.
Allez dans liste. Dans le premier ascenseur (type) sélectionnez aucune puis allez dans le menu bloc et remplissez le comme sur l’image (attention à cocher ou décocher les cases idem pour tous).

Une fois les informations entrées, cliquez sur OK.

À ce stade, le .menugauche ul est toujours sélectionné. Créez donc de nouveau un style CSS exactement comme ci-dessus (cliquez sur la feuille avec un + dans le menu CSS).
Conservez les mêmes paramètres que précédemment mais nommez votre style : .menugauche li a

La fenêtre de propriétés du style s’ouvre. Vous allez ici définir les divisions de la liste qui deviendrons vos boutons.
Vous pouvez donc grossir la police, la rendre plus épaisse ou changer sa couleur selon vos envies.
Dans ce cas, je l’ai légèrement épaissi, augmenté de taille et coloré en rouge (très moche mais facilement lisible pour l’exemple). De plus, j’ai cochez aucune décoration.
Sur votre fenêtre de propriétés, allez ensuite sur bloc et dans le dernier ascenseur (afficher) sélectionner bloc (pour que chaque titre devienne un bloc à part entière).
Allez ensuite sur boite et remplissez comme sur l’image :

Attention à décocher correctement Idem pour tous.

À ce stade, voici à quoi ressemble ma page :
Mon fond est blanc, mes textes rouges, et j’ai bien 4 divisions qui correspondent à mes 4 titres.

Nous allons encore créer un nouveau style CSS comme précédemment (cliquez sur la page avec le + dans le menu CSS).

Cochez à nouveau Avancer dans le type de sélecteur et définissez votre style une nouvelle fois sur votre feuille de style enregistrée (menucss). Nommez le :

.menugauche li a:hover

Cette feuille de style vous permet de changer votre menu au passage de la souris.
Les propriétés de style sont donc ouvertes. Vous pouvez changer la couleur de texte en noir par exemple. Nous pouvons aussi changer la couleur d’arrière plan en rouge pour bien voir les possibilités de roll-hover.

Cliquez sur valider, enregistrez votre travail puis allez faire un aperçu dans le navigateur.

Vous pouvez constater que vos liens sont valides et que le roll-hover a bien lieu lorsque vous passez votre souris sur le bouton.
Comme je vous l’avez dit, les couleurs et le fond sont horriblement moche, cependant, en quelques clics vous pouvez maintenant modifier vos boutons en modifiant vos style CSS. Par exemple si je trouve que le blanc d’arrière plan ne me convient pas (et j’espère qu’il ne vous convient pas), je sélectionne mon style .menugauche dans le menu CSS et je clic sur le petit crayon en bas du menu pour le modifier. Je peux modifier ma couleur et mettre la même que mon fond. Mes bouton conservent le rool-hover et leur couleur, mais il n’y a plus de fond.
Je peux aussi modifier mon lien grâce au style .menugauche li a. Je modifie ma couleur, ma police (pour importer une police, cliquez sur modifier ma liste de police dans l’ascenseur police) et ma taille comme sur l’écran.

Voici le résultat en 4 clics :

En modifiant votre style .menugauche li a, vous modifier votre lien.
En modifiant votre style .menugauche li a:hover, vous modifier votre roll-hover.

Nous pourrions aussi créer de nouveaux styles de liens qui correspondraient au liens visités ou actifs. À approfondir dans un autre tutoriel.

Voila, ce tutoriel est terminé, si vous avez réussi à tenir jusqu’au bout, vous savez maintenant créer une liste et des menus. Les feuilles de styles sont simples d’utilisation et très malléables. À partir d’ici, beaucoup d’effets simples sont possible. À vous d’adapter votre menu à votre site. J’ai essayé de prendre un exemple simple pour que vous puissiez mieux maitriser le tutoriel.

Bonne chance pour vos sites.

Bien le bonjour.

Aujourd’hui est consacré à la création d’une bannière animée via le logiciel Adobe Flash.

Public visé : débutant

Notre volonté, ici, est de concevoir une bannière animée qui puisse répondre entièrement à nos critères de beauté (aussi exigeants soit-ils). Bien évidemment, nous n’allons pas créer la meilleure bannière flash de tous les temps, mais découvrir ce logiciel avec un petit exercice simple et utile.

Logiciel utilisé : Adobe Flash CS3

OS utilisé pour le tutoriel : MacOSX

(Avis aux utilisateurs de Windows : remplacez ⌘ par Ctrl pour les raccourcis clavier)

___

Pour commencer, démarrez ledit logiciel. Créez un nouveau document (⌘+N ou Fichier>Nouveau…), allez dans Modèles, et choisissez le modèle de votre choix. Ici, vous prendrez le modèle 468×60 (banner).

Enregistrez sans plus attendre votre futur travail ! (Nom de votre choix, emplacement de votre choix, et validez le message d’erreur de compatibilité avec les versions antérieures)

Définissez une couleur de fond. Pour cela, rien de plus simple, faites un ⌘+J ou Modifications>Document…, ou encore il est possible d’avoir déjà les propriétés du document en bas de l’écran. Cliquez sur le bouton Arrière-Plan, et choisissez la couleur de votre choix.

Si vous êtes comme moi, des maniaques du travail sauvegardé, n’hésitez pas, un ⌘+S après chaque modification apportée sur le document vous détendra considérablement.

Créez un bloc texte et écrivez par exemple “Les ours sont nos amis”. Choisissez la couleur du texte (via le petit pot de peinture à gauche dans la barre d’outils, ou en bas de votre écran), sa casse, son format, etc.

Exemple en Tahoma, 20, et gras (le petit cadre bleu étant le cadre de sélection) :

Quel beau texte, n’est-ce pas ? Il le sera d’autant plus lorsque vous l’aurez animé !

Sachant qu’une animation flash par défaut fait défiler 12 images par seconde, il faut laisser l’image ou le texte environ 2 secondes pour qu’ils soient bien lus.

Pour des raisons de facilité, nous arrondirons à 25 images pour 2 secondes (ou autrement dit, 25 frames par seconde) et nos principales animations ne prendront que 10 frames par seconde.

Référez-vous maintenant à la partie supérieure de votre écran, En dessous du 1 (normalement surligné de rose), se trouve un rectangle de couleur noire avec un point de couleur blanche. Cliquez sur le point blanc, et tout en maintenant la touche Alt, faites le glisser jusqu’à la zone grisée en dessous du 10, qui correspond à la frame 10. À nouveau, faites glisser le point vers les frames 35 (10+25 pour les 2 secondes comme expliqué plus haut) et 45. Vous avez donc découpé trois zones qui seront la phase d’apparition du texte, la phase de lecture du texte, et la phase de disparition de celui-ci.

Cliquez sur le point de la frame 1, et déplacez le texte où bon vous semble en dehors de la zone, de manière à définir un point de départ pour son animation.

Exemple à gauche :

Faites un Clique-droit entre les deux points des frames 1 et 10, et choisissez “Créez une interpolation de mouvement”.

Et voilà, l’animation de l’arrivée du texte sur votre bannière est créée. Faites de même en cliquant dans un premier temps sur le point au frame 45, déplacez le texte où bon vous semble, Clique-droit entre la frame 35 et la frame 45, “Créez une interpolation de mouvement”. Votre texte sait maintenant quel trajet il va effectuer.

⌘+S !

Si vous cliquez sur les frames 3, 4 ou 41, etc. vous remarquerez que le texte suit un déplacement automatisé. Si vous voulez voir de vos yeux vus cette animation, cliquez sur la frame 1 et appuyez sur la touche Entrée.

_

Bien, vous savez désormais comment animer un texte. Mais le plus intéressant reste d’y ajouter une image. Et pour cela, il vous faut choisir au préalable une image que vous aurez enregistrée sur votre ordinateur.

Pour que votre image soit parfaite pensez à rendre grâce à notre Dieu de la retouche d’image : Adobe Photoshop !

Google Images est votre ami pour des images à usage personnel. D’autres sites proposent des images libres de droits ou pouvant être achetées en ligne.

Importez cette image via Fichier>Importer>Importer dans la Bibliothèque…

Elle se trouve maintenant dans la bibliothèque située à droite de votre écran. Si tel n’est pas le cas, faites un magnifique ⌘+L ou Fenêtre>Bibliothèque depuis le Menu.

Créez un nouveau calque sur la table chronologique.

Et faites glisser la photo de la bibliothèque sur la zone de travail. Il se peut que l’image soit trop grande, réduisez-la grâce au Clique-droit>Transformer librement.

Maintenir la touche Shift lors de la réduction de l’image peut s’avérer utile pour éviter qu’elle ne se déforme.

Si besoin, un petit ⌘+ ou ⌘- peut vous aider à y voir plus clair dans ce redimensionnement d’image. Pensez à revenir à 100% au niveau de l’affichage !

Comme vous l’aurez compris, seul ce qui apparaît sur la bannière sera visible sur le rendu final. Attention donc au placement des images !

Pour faire chevaucher les deux animations, vous allez faire démarrer la seconde avant que l’autre ne se termine. Ainsi, cliquez dans la zone du second calque (que vous aurez pris la peine de renommer, cela va de soi) à la frame 25, ensuite un petit Clique-droit>Insérer une image clé.

Le problème ici est que votre image apparaît aussi au début de l’animation du texte, chose que vous ne voulez pas (je vous assure, vous ne le voulez pas !). Cliquez donc n’importe où dans la zone avant le point d’image-clé que vous venez de créer et supprimez.

Maintenant, même histoire qu’en ce qui concernait le texte : Cliquez glissez en maintenant la touche Alt 10 frames plus loin, puis 25, et enfin 10.

De même que pour le texte, sur le 1er point (ici à la frame 25) et sur le dernier point (frame 70), placez votre image où vous voulez, créez une interpolation de mouvement entre les frames 25 et 35, 60 et 70.

Cliquez au début, touche Entrée et admirez l’avancée de votre travail.

Soyez fous, et ajoutez un dernier petit texte pour fignoler votre bannière.

Insérez un nouveau calque, et créez une ou plusieurs nouvelle(s) zone(s) de texte. Écrivez ce que vous voulez et faites comme précédemment selon vos souhaits d’arrivée du texte en fonction de l’animation texte-image déjà créée.

Dans l’exemple, deux calques de texte ont été ajoutés à la suite de l’animation. L’effet d’arrivée décalé et de sortie commune est une astuce loin d’être compliquée : il faut juste faire en sorte que les deux animations de sortie se fassent en même temps.

Une dernière fois, par plaisir et néanmoins pour la vérification, revenez au début et relancez l’animation.

⌘+S !

Si le résultat vous convient, il ne vous reste plus qu’à l’exporter. Alt+Shift+⌘+S (raccourci type qui fera plaisir aux fervents utilisateurs de Windows) ou tout simplement Fichier>Exporter>Exporter l’animation…

Sélectionnez le format Gif animé.

Changez les paramètres colorimétriques de Standard à 256. Ne changez rien d’autre, et validez.

Votre bannière est terminée ! Félicitations !

• Certaines images ont subi les aléas du redimensionnement par WordPress, merci d’éviter d’en tenir compte.

Sources : www.noshade.net