Share
La première fois que j'ai utilisé Flash, c'était il y a environ 13 ans. C'était la version 3 et Flash a été salué comme le nouvel outil d'animation vectoriel sophistiqué qui allait bientôt conquérir le monde de la conception Web. Au fil des ans, Flash est devenu un outil de développement d'applications complet à part entière, bourré de bonté ActionScript..
Ce que beaucoup de gens semblent oublier cependant, c'est combien Flash est toujours un outil du concepteur, nous permettant de créer des illustrations et des animations à la manière démodée du dessin et du déplacement..
Tutoriel republiéToutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en mai 2011.
Commençons par ce que quiconque commencerait par Flash (ou par toute application de conception): le dessin. Qu'il s'agisse de dessiner des formes régulières ou de tracer des lignes, le dessin est l'une des actions les plus fondamentales de Flash. Cependant, ce qui rend Flash unique, c'est la façon dont il gère les formes. Il se comporte très différemment des autres outils de dessin vectoriel et est soit aimé, soit détesté par beaucoup. Bien entendu, la séparation de chaque partie d'un objet à des fins d'édition indépendante présente des avantages et des inconvénients. Voyons quelques petites choses bizarres faites par Flash et comment les utiliser à notre meilleur avantage..
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.
En règle générale, lorsque vous dessinez une forme régulière (un rectangle ou une ellipse) dans Flash, un patch est créé avec les propriétés de remplissage et de contour sélectionnées. Vous pouvez ensuite sélectionner le remplissage et / ou le trait individuellement et modifier leurs propriétés. Dans Flash CS3, Adobe a introduit ce qu’ils appellent des outils de forme «primitifs». Contrairement aux outils de forme par défaut, qui séparent le trait du remplissage, ils créent une forme sélectionnable et modifiable dans son ensemble..
Bien que cela puisse être un changement irritant pour les concepteurs Flash expérimentés, il apporte un niveau de contrôle inégalé dans Flash avant cette version. Vous pouvez soudainement modifier numériquement les propriétés de l'objet via le panneau de propriétés, ajouter des coins arrondis et convertir des cercles en secteurs avec une précision de virgule décimale. Il y a très peu de raisons de revenir aux outils de forme traditionnels une fois que vous avez utilisé les primitifs. Pourtant, de nombreux concepteurs que je connais continuent à travailler à l'ancienne. Une partie du problème pourrait être la décision stupéfiante d’Adobe de conserver les formes simples comme outils par défaut, en enterrant les primitives dans une liste déroulante dans la barre d’outils..
Essayons d'utiliser les formes primitives dans un scénario réel où l'utilisation des outils de forme traditionnels se serait révélée être un exercice d'arrachage de cheveux. Supposons que vous souhaitiez créer un graphique à secteurs précis à l'aide de nombres réels - parts de marché des systèmes d'exploitation mobiles en 2010, par exemple.
Une fois que nous avons les pourcentages (qui totalisent 100), nous multiplierons chacun avec 3,6 pour les égaler avec le total 360 degrés dans un cercle. Ensuite, il suffit de coller six cercles les uns sur les autres et d’affecter les angles de début et de fin appropriés à chacun d’entre eux en fonction de nos calculs. Voir le calcul dans le tableau ci-dessous, ainsi que les propriétés de l’une des tartes, pour une meilleure idée.
De par leur nature même, les objets en Flash sont librement modifiables. Vous pouvez sélectionner le remplissage ou le contour d'une forme, le faire glisser et cela affectera toutes les autres formes de cette zone tant qu'elles se trouvent sur le même plan. Cependant, que se passe-t-il lorsque vous sélectionnez et / ou faites glisser un élément dépend de ce que vous cliquez et où? Regardons les différentes possibilités:
Essayons d'appliquer ces connaissances pour créer facilement des lignes complexes ondulées - en utilisant des lignes droites en zigzag. Commencez par dessiner des lignes droites pour définir la taille et la forme approximatives de la vague. Assurez-vous que la ligne n'est pas sélectionnée. Ensuite, cliquez et faites glisser chaque segment de ligne pour créer une courbe pour la vague. Enfin, sélectionnez les angles et déplacez-les vers le haut ou le bas jusqu'à ce qu'ils s'emboîtent pour que la courbe soit transparente des deux côtés..
Pour une raison bien connue d'Adobe, ils n'ont jamais résolu le problème inhérent au rendu des angles arrondis dans Flash. Si le contour d'un rectangle arrondi est un nombre impair (1, 3, 5, etc.), les artefacts tendent à être ternis dans les coins, ce qui rend l'image floue. Un hack typique que j’ai utilisé et que j’ai vu être utilisé est de s’assurer que les contours des rectangles arrondis sont toujours 2, 4, 6 ou un nombre pair. Cela ne fonctionne toujours pas si votre forme est sur une coordonnée sous-pixel - les coordonnées x ou y sont en décimales (2.6, 4.12, 98.57, etc.) - mais c'est un problème plus facile à résoudre.
Mais que se passe-t-il si j'ai besoin que le contour soit un seul pixel? Une solution de contournement que j'ai récemment trouvée et que j'utilise beaucoup depuis est la suivante:
Bien que cette technique devrait fonctionner dans la plupart des cas, elle n’est pas sans écueils. Cela ne sert à rien, par exemple, dans les situations où un objet doit être translucide. La réduction de l'alpha du rectangle de remplissage affichera uniquement une plus grande partie de la couleur de contour du rectangle situé en arrière. Un hack pour le contourner serait de casser les deux rectangles (les convertir en formes régulières).
Vous pouvez également envisager d'utiliser des repères de trait pour vous guider lorsque vous tracez des traits sur la scène..
Qui n'aime pas les dégradés? Les designs de nos jours sont assez incomplets sans au moins un soupçon de dégradé pour lui donner une sensation réaliste et souvent contemporaine. Le problème avec la façon dont Flash gère les formes, c’est que chaque élément autonome est une forme et possède ses propres propriétés. Vous ne pouvez pas appliquer de dégradés à des groupes d'objets et il n'y a aucun moyen de "connecter" deux formes disparates. Que se passe-t-il alors lorsque vous avez besoin d'un dégradé couvrant plusieurs objets - prononcez tous les mots dans un logotype personnalisé?
Eh bien, "Lock Fill" à la rescousse. Lorsque vous utilisez l'outil "Pot de peinture", vous verrez une icône au bas de la palette d'outils avec un dégradé et un verrou. Sélectionnez les formes que vous devez remplir, cliquez sur l'icône "Verrouiller le remplissage", sélectionnez un dégradé dans la palette de couleurs de remplissage et cliquez dans l'une des formes sélectionnées. Ne vous inquiétez pas si vous ne voyez pas tout le dégradé appliqué. Plus souvent qu'autrement, le remplissage verrouillé s'étend au-delà des formes sélectionnées et vous devez utiliser l'outil de transformation du dégradé pour redimensionner le dégradé à votre guise..
Cette technique n’est cependant pas sans problèmes. Voici quelques points à retenir lorsque vous utilisez des remplissages verrouillés:
Flash est livré avec un ensemble de styles de trait par défaut (solide, pointillé, pointillé, déchiqueté, pointillé et hachuré), ce qui fonctionne bien dans la plupart des cas. Pour les situations où vous avez besoin de plus de contrôle sur le trait, il existe un éditeur de traits très puissant, livré avec Flash. Pour vraiment commencer à jouer avec vos traits, cliquez sur l'icône de modification en regard de la liste "Style" dans le panneau "Propriétés" du trait sélectionné..
Supposons que vous ayez besoin d'une ligne en pointillé, mais que les tirets sont actuellement beaucoup trop proches dans le style par défaut 'Dashed'. Dans le panneau "Editer le trait", incrémentez simplement le nombre dans le second champ de saisie à côté de "Tiret" jusqu'à obtenir l'effet souhaité. Et pendant que vous y êtes, cochez la case "Sharp corners". Si vous avez déjà été dérangé par les coins étranges que vous obtenez avec la ligne pointillée par défaut dans Flash, cela résout le problème..
Voici d'autres astuces utiles pour optimiser votre flux de travail lorsque vous utilisez des formes dans Flash..
1. Tracez une ligne où vous avez besoin de la division.
2. Ajustez l’épaisseur de la ligne en fonction de l’espace requis entre les divisions.
3. Assurez-vous que la ligne est sélectionnée. puis allez dans 'Modify> Shapes' dans la barre de menu et sélectionnez 'Convert Lines to Fills'.
4. Supprimer la ligne.
Et c'est un résumé de la première partie de cette série sur les meilleures pratiques Flash pour les concepteurs. J'espère que ces conseils vous aideront à améliorer et optimiser votre flux de travail en Flash sur le long terme. N'hésitez pas à partager vos propres astuces et meilleures pratiques dans la section commentaires. Je serai de retour avec la prochaine partie de cette série avec des conseils sur la façon de gérer votre texte et vos symboles dans Flash.
Accentsconagua