Share
Pour la plupart des débutants, le concept de symboles dans Flash peut être assez déroutant. J'ai connu assez de designers qui, même après avoir travaillé avec Flash pendant des années, ne savent pas du tout comment utiliser les symboles dans leur travail. Regardons de plus près les symboles et le texte.
Bienvenue dans la deuxième partie de notre série de conseils éclair et de meilleures pratiques pour les concepteurs. Dans la première partie, nous nous sommes penchés sur le dessin, qui est généralement la première chose à prendre en compte lors du démarrage avec Flash. Une fois que vous avez maîtrisé les outils de création, vous ne tardez pas à vous rendre compte que les formes elles-mêmes sont plutôt inutiles. Bien sûr, vous pouvez appliquer des couleurs et des traits et les manipuler comme vous le souhaitez, mais vous êtes probablement là pour faire bouger les choses. Et la meilleure façon de commencer est de convertir les formes en symboles.
Le texte est un autre aspect essentiel de la conception Flash que nous allons aborder aujourd’hui. Au fil des ans, la capacité de Flash à créer et à restituer du texte a fait d’énormes progrès. Je me souviens encore du temps où il n'y avait pas de paramètre "anti-alias pour l'animation" et où l'idée de disposer de blocs de texte était tout simplement un cauchemar. Tout est fini maintenant et avec la possibilité d'appliquer des filtres directement au texte, la procédure est beaucoup moins pénible à présent. Aujourd'hui, l'outil texte de Flash permet beaucoup de choses. Nous allons regarder quelques astuces.
Bien que cet article ait été écrit pour Flash Professional CS5, la plupart des astuces devraient fonctionner correctement dans les versions antérieures. Je vais essayer de souligner chaque fois que quelque chose est très spécifique à la dernière version de Flash.
Pour commencer, il existe trois types de symboles que vous pouvez créer dans Flash: graphique, bouton et clip. Bien que les noms doivent être assez explicites, la différence entre les trois n’est pas toujours évidente. S'il vous plaît supporter avec moi si cela semble trop basique, mais je connais beaucoup de concepteurs Flash qui ne savent pas tout à fait ce que c'est. Alors, voici:
Remarque: Vous pouvez définir le comportement d'une instance de n'importe quel symbole individuellement. Vous avez placé un clip sur la scène mais vous ne voulez pas l'animer? Il suffit de sélectionner l'instance et de modifier le comportement dans le panneau "Propriétés".
Les modes de fusion apportent l'une des fonctions les plus appréciées des applications de retouche d'image à l'espace de travail vectoriel de Flash. Comme Photoshop, Fireworks, Illustrator et autres, vous pouvez modifier l'aspect des éléments en les superposant et en choisissant différents modes de transparence. Par exemple, vous souhaiterez peut-être assombrir une partie d'un objet en fonction de son contenu, ou peut-être l'éclaircir. Une méthode courante consiste à utiliser une image de logo raster importée avec un arrière-plan blanc que vous souhaitez montrer. Changez simplement le mode de fusion en "Multiplier" dans la section "Affichage" du panneau Propriétés..
Notez que les modes de fusion ne peuvent être appliqués qu'aux symboles de clip et de bouton. Pour en savoir plus sur les modes de fusion dans Flash Checkout.
Disons que vous avez besoin d'un fond en bois réaliste pour votre conception. Il existe des tonnes de textures gratuites disponibles, mais un problème commun est qu'elles ont toutes tendance à paraître plates. Maintenant, si vous essayez de recréer un dessus de table, il doit y avoir un semblant de source lumineuse de l’un des côtés, n’est-ce pas? Essayons de recréer cet effet dans Flash en utilisant les modes de fusion..
L’une des premières choses que l’on apprend sur l’animation dans Flash est de savoir comment faire fondre les choses. Et la technique par défaut consiste à modifier la valeur "Alpha" d'un symbole. Mais il y a beaucoup plus que les autres éléments de cette liste déroulante, connus ensemble comme effets de couleur.
Bien que l’alpha semble être le meilleur moyen d’affiner et d’extraire des éléments, ce n’est pas toujours l’option la plus appropriée. Par exemple, si votre symbole est un dessin avec un tas de formes qui se chevauchent, Alpha réduit la transparence de chaque forme individuellement, ce qui crée des artefacts dans les états semi-transparents. Dans de tels cas, si votre illustration est sur un fond blanc, la modification des valeurs de luminosité fonctionne beaucoup mieux pour obtenir l'effet de fondu. Si l'arrière-plan est d'une autre couleur unie, vous pouvez également utiliser Teinte et remplir l'illustration avec la couleur d'arrière-plan. Malheureusement, si l'arrière-plan est un dégradé, un motif ou autre chose, votre seule option est d'entrer dans le symbole, de séparer toutes les formes et tous les groupes et de les placer sur un seul calque pour créer un objet..
Notez que contrairement aux modes de fusion, les effets de couleur peuvent être appliqués à n’importe quel symbole - clips vidéo, boutons et graphiques..
Lors de la conception d'interfaces dans Photoshop ou Fireworks, une technique que j'utilise très souvent consiste à créer un élément d'interface de base, tel qu'un bouton, et à en faire varier les couleurs à l'aide des filtres Teinte-Saturation. Récemment, j'ai trouvé un moyen de faire quelque chose de similaire en Flash. L'idée est de créer un seul symbole neutre, puis d'utiliser les effets de couleur avancés pour en créer des variations..
Pour commencer, créez un symbole avec les dégradés, les rehauts, les ombres et les superpositions souhaités. Vous pouvez le faire dans n'importe quelle couleur, mais j'ai tendance à préférer les nuances de gris. Le résultat est donc un bouton aussi mat, plastique ou n’importe quel style, mais en gris. Ensuite, placez quelques occurrences du symbole sur la scène. Il vous suffit ensuite de sélectionner une occurrence, d'appliquer l'effet de couleur "Avancé" et de commencer à vous amuser avec les valeurs de couleur RVB. Si vous avez du mal à bien faire les choses, vous pouvez notamment sélectionner Teinte, choisir la couleur dont vous avez besoin, puis aller dans le panneau Options avancées pour la modifier à votre guise. Rincer et répéter pour les autres symboles.
Pendant très longtemps, les concepteurs Flash ont été bloqués avec les outils de création de vecteurs strictement Flash. Les ombres douces et les flous de mouvement sont des éléments que vous avez regroupés à l’aide de dégradés délicats ou d’images raster importées de Photoshop. Puis vint les filtres dans Flash 8 et tout a changé. Aujourd'hui, pratiquement tout effet élégant est possible directement dans Flash avec un contrôle correct sur tous les aspects du filtre. Voyons comment utiliser les filtres pour ajouter du jazz à vos créations..
Bien sûr, il existe des ombres portées lorsque vous souhaitez qu'un élément se démarque de l'arrière-plan ou le différencie simplement de tout ce qui l'entoure. Mais dans les cas où une simple ombre portée ne suffit pas, vous pouvez jouer avec la décroissance pour ajouter un peu plus de style. Une façon de faire est de créer une copie de votre forme et de la modifier pour obtenir la courbure dont vous avez besoin. Puis convertissez-le en symbole, ajoutez un effet de couleur à 100% de teinte noire et un flou gaussien. Ensuite, ajustez simplement la valeur alpha pour obtenir l’ombre dont vous avez besoin. Découvrez quelques exemples ci-dessous.
N'oubliez pas de définir la qualité sur «Elevée» chaque fois que vous utilisez un filtre. L'effet est beaucoup mieux. Cela me compense totalement de savoir pourquoi «Bas» est défini comme paramètre de qualité par défaut. J'ai utilisé des filtres dans des animations sérieusement complexes et l'impact sur les performances est à peine perceptible.
En ce qui concerne le gros texte, l’effet typographique est très populaire. Avec la possibilité d'ajouter plusieurs filtres du même type (quelque chose que même Photoshop n'a pas encore), l'effet Letterpress est assez facile à réaliser dans Flash. Tout ce que vous avez à faire est simplement d’ajouter deux filtres d’ombre portée, l’un avec une ombre blanche de 1px à 90 degrés et un noir à 270 degrés. Découvrez l'image ci-dessous pour tous les détails.
Une autre fonctionnalité introduite dans Flash 8 est la mise à l’échelle en 9 découpes, qui permet de redimensionner un objet sans en affecter certaines parties. Le meilleur exemple où cela fonctionne est les rectangles arrondis. Si vous avez tous essayé de créer des rectangles arrondis, puis de les redimensionner, vous savez que les coins ont tendance à se déformer si la mise à l'échelle n'est pas proportionnelle. La mise à l'échelle en 9 découpes résout ce problème. Voyons comment.
Voici comment ça fonctionne. J'ai étiqueté chacune des 9 sections que nous avons maintenant, divisées par les lignes pointillées. Lorsque vous revenez sur la scène et redimensionnez l'objet, proportionnellement ou non, A, C, E & G ne seront pas redimensionnés du tout. Ils conserveront leur taille et leur forme. B & F n'échelonne qu'horizontalement, tandis que D & H n'échelle que verticalement. Ainsi, quoi que vous fassiez, le rectangle arrondi conserve sa personnalité fondamentale. Cette technique peut faire des merveilles lorsque vous avez besoin de plusieurs éléments similaires de différentes tailles, comme des boutons, des popups ou des bulles..
Notez que la mise à l'échelle en 9 découpes ne fonctionnera pas dans tous les contextes. Si votre illustration présente des formes complexes ou des angles très arrondis avec des reflets courbes, voire des motifs de remplissage, la mise à l'échelle peut ne pas être cohérente..
S'il y avait une plainte à propos de Flash qui dominait tout le reste dans le passé, c'était la façon dont Flash gérait le texte. Dans les anciennes versions, en particulier avant la prise de contrôle d'Adobe, le rendu du texte dans Flash était nul, pour le dire gentiment. À tel point qu'il avait ignoré toute une industrie artisanale de polices de pixels conçues pour contourner l'incapacité de Flash de rendre le texte de petite taille de manière fluide. Heureusement, avec l'ajout d'un anti-alias pour la lisibilité, les choses sont devenues beaucoup plus supportables. Le seul conseil que je donne à tous ceux qui ont déjà eu quelque chose à voir avec Flash est d'éviter tout ce qui est "anti-alias pour la lisibilité" comme une peste. En fait, je ne sais même plus pourquoi ils ont cette option puisque le rendu du texte dans le lecteur a été suffisamment optimisé pour rendre le texte "lisible" de manière fluide dans tous les scénarios..
Le Text Layout Framework (ou TLF), l'API de haut niveau d'Adobe pour le nouveau moteur de texte Flash introduit dans Flash Player 10, est un phénomène très nouveau et potentiellement révolutionnaire. À partir de la version CS5, vous avez le choix le bloc de texte est "Texte classique" ou "Texte TLF". Je sais, comme s'il n'y avait déjà pas trop de choix à faire, non!? Eh bien, bien que TLF soit clairement l’avenir du texte dans Flash, il n’est pas compatible avec les anciennes versions de Flash Player ou avec AS2 et ses versions antérieures. Donc, si vous voulez une compatibilité ascendante, Classic Text est votre meilleur choix..
TLF ajoute en gros un ensemble de fonctionnalités à du bon vieux texte en Flash. Vous souhaitez garder un contrôle étroit sur le texte principal et le suivi de votre texte? Besoin d'une orientation verticale pour le texte? Que diriez-vous de plusieurs colonnes? Heck, avez-vous juste besoin que votre texte s'affiche correctement dans une langue indienne (ou la plupart des scripts non-latins, d'ailleurs)? TLF est la réponse. Il y a beaucoup trop d'options pour modifier le rendu d'un bloc de texte TLF, bien plus que ce que nous pouvons couvrir ici. Je dirais allez-y et jouez un peu avec elle. Rappelez-vous simplement que cela ne fait pas trop longtemps - ni dans l'outil de création ni dans le lecteur - et que son fonctionnement actuel ne va pas sans problèmes..
Voici quelques astuces rapides et les meilleures pratiques suggérées pour tirer le meilleur parti des outils de texte de Flash:
Et c'est comme ça que vous faites les symboles et le texte dans Flash. Bien entendu, ils sont bien plus nombreux que ceux que nous avons abordés, mais notre objectif était de rassembler certains des meilleurs conseils et meilleures pratiques pour travailler avec des symboles et du texte. N'hésitez pas à ajouter vos propres astuces et raccourcis dans la section commentaires. Ou contester tout ce que j'ai dit. Je serai le premier à reconnaître que je ne sais pas tout ce qu'il y a à savoir sur Flash. Tout ce qui est nouveau ou différent est toujours le bienvenu..
La prochaine fois, nous aborderons les fonctionnalités principales et le point de vente unique de Flash: l’animation. Restez à l'écoute!
Accentsconagua