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
Pour adapter ce tuto à Flash CS4, quelques points sont à noter :
- le scénario n’est plus situé en haut de l’écran mais en bas,
- le modèle ne s’appelle plus “468×60 (banner)” mais “468×60 – Bandeau complet”,
- les dénominations sont modifiées… il ne faut plus utiliser “l’interpolation de mouvement” mais “l’interpolation classique”
- enfin, dans la phrase “se trouve un rectangle de couleur noire avec un point de couleur blanche”, le point en question est désormais noir.
Avec ça… vous êtes parés pour CS3 & CS4 !