Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en août 2009.
Dans ce tutoriel, nous verrons comment créer un logo qui intègre le masquage de dégradé alpha dans son animation. Je vais expliquer quelques trucs et astuces sur la façon de le faire fonctionner et d'éviter certains problèmes courants.
Tout d’abord, jetons un coup d’œil à ce que nous visons:
Ceci est un tutoriel de niveau débutant au cours duquel je vais expliquer en détail comment créer ce logo et son animation. En cours de route, je mentionnerai quelques mots sur le masquage de dégradé, les images bitmap et les formes au sein de Flash, ainsi que sur le code ActionScript requis. Dans un premier temps, nous aborderons brièvement certaines techniques de Photoshop, mais la plupart des logiciels de retouche d’images devraient suffire..
Commençons!
Assurez-vous de commencer par télécharger les fichiers source. Ouvrez Logo.psd dans le fichier zip.
Vous pouvez également télécharger et installer la police utilisée dans cet exemple, Lubalin Graph Bold. Ceci est facultatif, car lorsque vous ouvrez le fichier, Photoshop vous avertira que la police est manquante. Toutefois, pour cet exercice, vous pouvez toujours suivre parfaitement sans cela..
En ouvrant Logo.psd, vous devriez voir ceci:
Comme vous pouvez le constater, nous avons un calque d’arrière-plan gris et un calque de texte nommé "Texte". Si vous avez la police Lubalin installée, vous pourrez changer le texte en quelque chose de plus personnel, ou vous pourrez changer la police à votre guise. Le calque d'arrière-plan gris est très superficiel et je ne l'ai choisi que pour illustrer le résultat final..
(Vous pouvez ignorer cette étape si vous utilisez Photoshop.)
Ici, je vais expliquer brièvement les styles de calque utilisés dans Photoshop afin que ceux qui souhaitent copier le logo le plus fidèlement possible aient la possibilité de le faire dans leur propre logiciel de traitement d'image. Ce n'est pas important que votre logo se ressemble, cependant.
J'espère que cela vous donnera une idée de la façon de créer quelque chose de similaire. Encore une fois, ce n'est pas important pour comprendre la technique expliquée dans ce tutoriel..
Avant de nous lancer dans Flash, nous pourrions aussi bien faire la dernière chose nécessaire dans Photoshop; c’est créer un contour pour l’effet que nous sommes sur le point de faire. Ne vous inquiétez pas si cela n'a pas encore de sens, vous verrez très vite l'image complète!
Vous devriez vous retrouver avec ceci:
Sélectionnez le calque Outline et appuyez sur "V" pour sélectionner l'outil de déplacement. A l’aide de votre clavier, alignez le contour de sorte qu’il se place parfaitement au-dessus du texte original, comme suit:
Assurez-vous que le contour est entièrement blanc.
Masquer les calques Outline et Background. Allez dans "Enregistrer pour le Web et les périphériques" et enregistrez-le au format PNG. Nommez-le logo.png. Ça devrait ressembler à ça:
Ensuite, masquez le calque Text et ramenez le calque Outline. Enregistrer sous "outline.png". Ça devrait ressembler à ça:
Assurez-vous d’enregistrer PNG en haute qualité et en transparence.!
Démarrez Flash et créez un nouveau fichier AS3. Comme le logo créé dans Photoshop mesure 580 x 170 pixels, nous utiliserons les mêmes dimensions pour notre fichier Flash. Laissez le FPS et la couleur d'arrière-plan tels quels.
Créez et nommez ces couches:
Placez-les dans l'ordre indiqué dans la liste, de sorte que "Actions" se trouve au niveau Z le plus bas et "Shine" au plus haut. Sélectionnez maintenant le calque d'arrière-plan et créez un rectangle couvrant la scène. Définissez une couleur allant du gris foncé (# 222222) au gris clair (#AAAAAA). Utilisez l'outil de transformation de dégradé (touche de raccourci F) pour l'aligner comme suit:
Verrouille le calque de fond car nous ne le changerons plus.
Sélectionnez le calque Logo. Allez dans Fichier> Importer> Importer dans la scène ou appuyez sur Ctrl + R. Sélectionnez le logo.png que vous avez précédemment exporté à partir de Photoshop. L'image devrait être parfaitement alignée dans votre fichier Flash. Vous pouvez également verrouiller le calque Logo.
Sélectionnez le calque Outline et appuyez une nouvelle fois sur Ctrl + R, en important cette fois le contour.png. Cela aussi, devrait être parfaitement aligné. Étant donné que le contour est actuellement sélectionné, le moment est opportun pour appuyer sur F8 et le transformer en MovieClip. Nommez le MovieClip "Outline", puis continuez et insérez un nom d'occurrence de "contour" dans le panneau des propriétés. Vous devriez voir quelque chose de semblable à ceci:
Maintenant, allez dans le panneau Bibliothèque et vérifiez les propriétés de votre logo.png. Personnellement, je choisirais une qualité sans perte, car ce logo est quelque chose qui est susceptible d’être utilisé comme en-tête ou quelque chose de similaire et j’estime que dans ces cas, vous pouvez vous permettre de ne pas lésiner sur la qualité. C’est votre appel, mais c’est sûr que vous aurez le meilleur de la qualité sans perte!
Avoir votre instance de plan sélectionné et ajouter un filtre flou. Définissez-le sur 2 pixels dans les propriétés de flou X et Y, puis choisissez une qualité supérieure. Cela rendra le résultat final beaucoup plus beau.
Notez s'il vous plaît le fait d'ajouter le filtre de flou oblige automatiquement Flash à rendre le contour sous forme de bitmap. Si vous n’ajoutez pas le filtre de flou, cochez au moins la case "Cache en tant que bitmap". Plus à ce sujet à l'étape 10.
Vous pouvez également verrouiller cette couche. En outre, le moment est opportun pour enregistrer votre fichier Flash.!
Sélectionnez le calque Masque, puis l'outil Rectangle. Désélectionnez la couleur de trait si vous en avez une appliquée.
Dessinez un rectangle, faites-le près de 60 pixels de large et 320 pixels de haut. Puis, avec votre forme sélectionnée, allez dans le panneau de couleurs et donnez-lui un dégradé linéaire avec trois points uniformément répartis (par points Je parle des petites poignées qui définissent les couleurs d’un dégradé). Choisissez n'importe quelle couleur pour les points, mais assurez-vous que vous avez celle du milieu à 100% alpha et celle des extérieurs à 0% alpha. Ça devrait ressembler à ça:
Appuyez sur F8 avec la forme sélectionnée et transformez-la en un MovieClip appelé "Masque". Nommez l'instance du masque "theMask". Enfin, faites pivoter le masque de 45 degrés dans le sens des aiguilles d'une montre. Une méthode simple consiste à appuyer d'abord sur Q pour l'outil de transformation, puis à maintenir la touche Maj enfoncée tout en faisant pivoter le bouton de manière à ce qu'il s'emboîte à 45 °..
Passez à l’image 70 du calque Masque de notre scénario principal et appuyez sur F5 pour insérer des images à ce stade. Cliquez avec le bouton droit sur n'importe quelle image précédente et créez une interpolation de mouvement. Maintenez la touche Maj enfoncée, puis faites glisser le masque sur le côté droit de notre scène. Créez également des cadres avec le numéro 70 pour les calques Backround, Logo et Outline. Le masque devrait partir d'ici:
Jusqu'ici:
Comme vous l'avez probablement déjà compris, nous allons utiliser la forme en dégradé alpha des masques pour estomper progressivement les contours. Généralement, lorsque vous avez un masque dans Flash, vous l’avez sur un calque et vous le transformez en calque de masque. Le calque de masque comporte alors des calques "enfants" dont le contenu sera masqué. Maintenant, qu'est-ce qui se passe si nous faisons cela avec notre configuration actuelle? Voici le résultat:
Comme vous pouvez le constater, la transition est loin d’être harmonieuse. Il n'y a aucun comportement de gradient que ce soit.
Pourquoi est-ce alors?
Pour que les dégradés alpha fonctionnent, Flash doit rendre vos objets sous forme de bitmaps, et non de formes. Notre masque actuel est sans aucun doute une forme (même dans un MovieClip) et est rendu tel quel. Cela peut être corrigé de deux manières:
Dans Flash CS4, sélectionnez votre masque. Dans la section Affichage du panneau des propriétés, cochez la case "Cache en tant que bitmap"..
Dans Flash CS3, vous pouvez le trouver directement sous les modes de fusion intitulés "Utiliser la mise en cache des images au moment de l'exécution"..
Mon approche préférée consiste à utiliser ActionScript. Principalement parce qu'en tant que développeur (plus qu'un concepteur), je veux contrôler tous les aspects via le code afin de pouvoir appliquer n'importe quel effet à n'importe quel objet créé dynamiquement. Tout objet qui sous-classe DisplayObject a une propriété booléenne cacheAsBitmap. Donc, dans notre exemple avec l'instance nommée "theMask", c'est simplement:
theMask.cacheAsBitmap = true;
Allez-y, créez une image clé dans le calque Actions et insérez cette ligne de code..
Pour une raison mystérieuse, Flash ne peut pas obtenir l'effet souhaité sans ActionScript. Calques masqués dans la timeline Flash simplement ne pas permettre le masquage de dégradé alpha!
La solution est heureusement très simple:
outline.mask = theMask;
Comme vous pouvez le lire littéralement dans le code, cela définit notre instance "theMask" comme masque de notre instance hiérarchique. Allez-y et mettez-le dans la couche actions.
Veuillez prendre en compte les éléments suivants:
Flash contient un bogue concernant les occurrences de masque et la timeline. J'ai remarqué le bogue dans le scénario hypothétique suivant:
Notre instance de masque s'étend des images 1 à 70. Notre autre élément d'actif (le logo) s'étend jusqu'à l'image 90. Lorsque Flash lit entre les images 71 et 90, l'instance de masque n'est pas sur la scène. Si vous affichez le logo dans un onglet Firefox, par exemple, puis passez à un autre onglet, puis revenez au logo, vous verrez le bogue. Vous le verrez si la lecture se situe entre les images 71 et 90, c’est-à-dire. Le bogue se montrera lorsque le contour apparaîtra et sera démasqué. Lorsque la lecture revient à la première image, elle revient à la normale.
La conclusion que nous pouvons en tirer est que si vous masquez quelque chose avec ActionScript, veillez à garder le masque sur la scène à tout moment pour éviter que l'objet masqué ne se montre tout seul..
Allez-y et testez le film maintenant. Ça devrait ressembler à ça:
L'effet est un peu trop fort, vous pouvez donc réduire le coefficient alpha de l'occurrence de contour à 75% pour un rendu un peu plus subtil..
Pour terminer, nous ajouterons un petit effet de brillance scintillant au logo..
Votre logo devrait maintenant être complet à 99%. Vous voudrez probablement encore ajuster au redémarrage de l'animation en insérant plus d'images après l'animation du masque. Rappelez-vous juste ce que j'ai mentionné plus tôt; Assurez-vous de conserver une instance du masque sur la scène jusqu'à la fin de la boucle d'animation pour éviter le bug d'affichage du masque.!
Nous espérons que, à la fin de ce didacticiel, vous réaliserez avec quelle facilité vous pouvez modifier le logo ou appliquer l’effet à un logo de texte avec un résultat satisfaisant. Essayez d’expérimenter en modifiant l’épaisseur du contour (rappelez-vous? Nous l’avons fait avec une épaisseur de 2 pixels). Il est également facile de modifier le texte, la police et les couleurs. Modifiez les couleurs dans la superposition de couleurs et les traits, ou mieux. expérimenter avec vos propres styles de calque!
Le cœur de l'animation réside dans le contour du dégradé alpha contenu dans la police de caractères. Par conséquent, lorsque vous expérimentez vous-même, essayez d'utiliser un trait ou une bordure extérieure pour conserver cet effet. Bien sûr, tout est permis, tout ce qui est joli à toi est bon!
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua