Share
Dans ce didacticiel, vous allez convertir votre texte pour lui donner un effet de verre, en utilisant des filtres dans Flash. Cette technique fonctionne également sur les graphiques vectoriels. Nous y parviendrons avec une méthode assez simple pour superposer plusieurs couches avec différents effets..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler. Ceci est un fichier swf et le texte ci-dessous est sélectionnable, alors allez-y, sélectionnez le texte en verre pour afficher un surlignage semblable à du verre:
Ouvrez votre version de Flash et ouvrez un nouveau fichier Flash. La version ActionScript n'a pas d'importance pour ce tutoriel, car il n'y a pas de code. Dans votre fichier, placez un champ de texte sur la scène. Pour ce faire, cliquez sur le bouton de texte (T) dans le menu Outils et faites glisser un rectangle sur la scène, comme indiqué dans l'image ci-dessous:
Une fois dessiné, vous pouvez entrer votre texte dans le champ et définir ses propriétés en conséquence. L'effet de verre est plus évident sur les polices plus grandes et plus audacieuses, c'est pourquoi j'ai choisi Elephant ici, mais vous pouvez choisir la police de votre choix. Cliquez sur le bouton Sélectionnable pour que le texte puisse être sélectionné dans le fichier SWF final. La couleur de la police n'a pas d'importance ici
Si vous le souhaitez, vous voudrez peut-être voir comment l'effet fonctionne sur les graphiques vectoriels. Je vais donc simplement dessiner un petit graphique à l'aide de l'outil de dessin Flash de base. Notez que l'effet de verre ne prendra pas en compte les contours ou les couleurs, de sorte que de vieux graphiques unis d'une seule couleur suffisent pour le moment. Une fois terminé avec les étapes 1 et 2, vous aurez quelque chose comme ceci sur votre scène:
Vous pouvez également importer des graphiques vectoriels sur une surface Flash, mais notez que les différences de couleur ne sont pas détectées par cet effet..
Nous allons maintenant créer notre premier symbole. Sélectionnez votre texte et tous les graphiques vectoriels (vous pouvez le faire en faisant glisser un rectangle autour de tout). Avec tout ce qui est sélectionné, faites un clic droit et cliquez sur "Convertir en symbole" comme indiqué ci-dessous:
Nommez votre symbole comme bon vous semble et définissez son type sur Movie Clip; Je l'ai nommé comme "gtext". Ainsi, lorsque vous cliquez sur fenêtre et ouvrez la fenêtre de la bibliothèque, vous pouvez afficher un élément nommé gtext dedans là. A partir de là, je me référerai à ce symbole en tant que "gtext". Ce sera un bon point pour sauvegarder votre travail.
Encore une fois, cliquez avec le bouton droit sur le symbole gtext nouvellement créé et convertissez-le en symbole. Nous faisons cela afin de créer un autre film conteneur.
Nous allons maintenant avoir un symbole de verre, dans lequel nous avons un symbole de texte. Ces deux symboles sont visibles dans la bibliothèque.
Double-cliquez maintenant sur le symbole du verre pour l'afficher en mode édition. Toutes les étapes restantes seront effectuées dans ce symbole en verre.
Double-cliquez sur l'icône en forme de carré bleu à côté du symbole en verre dans le panneau de la bibliothèque (Fenêtre> Bibliothèque). Cela ouvrira le symbole du verre en mode édition. Nous avons une couche nommée couche 1 dans cette fenêtre. Ajoutez un nouveau calque en cliquant sur le bouton Nouveau calque situé dans le coin inférieur gauche de la fenêtre de la timeline. Cliquez et maintenez le bouton de la souris sur le nouveau calque pour commencer à le faire glisser, puis faites glisser ce nouveau calque en dessous de notre calque 1. Renommez le nouveau calque en "arrière-plan" en double-cliquant sur le nom du calque..
Vous voudrez peut-être masquer ou verrouiller le calque 1 pour pouvoir modifier facilement le calque d'arrière-plan. Cliquez sur le point situé sous l'icône œillet / cadenas dans la chronologie pour le faire. Sélectionnez maintenant le calque d'arrière-plan dans le scénario, puis cliquez sur l'outil Rectangle dans le panneau Outils. définissez le contour sur null et colorez en bleu dans le panneau Propriétés, comme indiqué dans l'image ci-dessous. J'ai également sélectionné l'arrondi de coins pour améliorer l'aspect de mon rectangle.
POINTE: Vous pouvez également utiliser une image pour le fond ici, au lieu d'un remplissage simple.
Lors de la modification du symbole de verre, dans le panneau Montage, cliquez trois fois sur le bouton Nouveau calque pour créer trois nouveaux calques. Vous avez maintenant cinq couches: la couche d’arrière-plan, la couche 1 et trois nouvelles couches. Renommez la couche 1 en biseau2 et les autres nouvelles couches à ombre, contour, biseau1, et biseau2 comme indiqué ci-dessous (vous pouvez renommer les calques en double-cliquant sur leur nom).
Dans le panneau Propriétés, notez les coordonnées x et y de gtext déjà mis sur scène qui est maintenant biseau2 couche à x = 75 et y = 10 pour mon dessin.
Ensuite, verrouillez tous les calques sauf celui sur lequel vous travaillez (en cliquant sur le point situé sous le verrou dans la fenêtre de montage) pour vous assurer de ne pas déplacer les éléments par accident. Vous pouvez également masquer quelques couches en cliquant sur le point situé sous l'œil dans la fenêtre de montage. Sélectionner biseau2 couche, ouvrez le panneau de la bibliothèque et faites glisser gtext sur scène.
Une fois placé sur scène, cliquez sur le nouveau gtext symbole pour le sélectionner et définir ses positions x et y dans le panneau Propriétés> onglet position de la même manière que dans le calque précédent, qui était à x = 75 et y = 10 pour mon film.
Une fois le positionnement terminé, verrouillez le calque actuel pour qu'il ne soit pas modifié accidentellement.
Répétez les deux étapes ci-dessus (Etape 6 et Etape 7) pour les deux couches restantes. Ainsi, à la fin, chacune des quatre couches aura le même élément placé aux mêmes coordonnées. L'image ci-dessous montre qu'en spécifiant les coordonnées exactement dans la boîte de propriétés, nous n'avons pas de bords qui se chevauchent.
Verrouillez et masquez tous les calques (en cliquant sur les points situés sous l’œil et le verrou de la chronologie), déverrouillez et affichez uniquement le ombre couche. Sélectionnez le gtext symbole sur cette couche et ouvrez le panneau Propriétés. Dans les propriétés, développez l'onglet "filtres" s'il est réduit. Dans le coin inférieur gauche, il y a un bouton Ajouter un filtre; cliquez dessus et sélectionnez le filtre Bevel.
Ajustez les paramètres de biseau sur Flou = 20px, Force = 80%, Angle = 90 °, Distance = 10px et cochez la case en regard de Knockout. Si vous souhaitez appliquer le réglage sur une échelle plus petite, avec un texte plus petit, vous pouvez modifier les propriétés de flou et de distance en proportion, mais généralement, un flou inférieur à 10 px ne convient pas..
Verrouillez et masquez tous les autres calques, déverrouillez et affichez uniquement le calque de contour. Sélectionnez le gtext symbole sur cette couche, ouvrez l’onglet Filtres du panneau Propriétés et ajoutez un filtre luminescent. Définissez les propriétés du filtre de luminescence sur Blur = 2px, Strength = 50%; définir la couleur sur blanc et vérifier les options Inner et Knockout. Ceci est montré dans l'image ci-dessous et vous pouvez voir le contour résultant ainsi.
Verrouillez et masquez tous les autres calques, déverrouillez et affichez uniquement le calque de contour. Sélectionnez le gtext symbole sur cette couche, ouvrez l’onglet Filtres du panneau Propriétés et ajoutez un autre filtre Bevel. Définissez les propriétés du filtre de biseau sur Blur = 2px, Angle sur 69 °, Distance sur 1px et cochez la case Knockout. Ceci est démontré dans l'image ci-dessous.
Verrouillez et cachez tous les autres calques, déverrouillez et affichez uniquement le contour couche. Sélectionnez le gtext symbole sur cette couche, ouvrez l’onglet Filtres du panneau Propriétés et ajoutez un filtre Bevel supplémentaire. Définissez les propriétés du filtre de biseau sur Blur = 6px, Strength = 45%, Angle sur 45 °, Distance sur 2px et cochez à nouveau l'option Désactiver. Ceci est montré dans l'image ci-dessous.
Sélectionnez le gtext instance de symbole dans ombre couche, verrouillez toutes les autres couches pour qu’elles ne soient pas perturbées. Dans le panneau Propriétés, sélectionnez l'onglet Filtres et ajoutez un filtre Ombre en plus du biseau existant. Réglez le flou sur 0px, la force sur 150%, l'angle à n'importe quelle valeur en fonction de l'endroit où vous souhaitez placer le soleil et la distance (essayez entre 10px et 20px). Les réglages et le résultat final sont visibles dans l'image ci-dessous.
Révélez toutes les couches et testez votre film en Flash, le résultat final sera similaire à celui présenté ci-dessous..
Le film n'a pas l'air trop impressionnant avec seulement ce texte. Changeons un peu le texte; allez dans Fenêtre> Bibliothèque et double-cliquez sur l'icône à côté du gtext symbole pour le modifier dans le volet de visualisation. À vous maintenant de modifier les éléments de ce symbole. Par exemple, vous pouvez ajouter de nouveaux champs de texte avec différentes tailles de police, ajouter plus de graphiques ou d’animations. J'ai un peu joué avec gtext et ajouté quelques éléments, notamment des polices différentes, des rectangles, des graphiques animés avec des formes différentes, une ligne pointillée épaisse et quelques graphiques avec une valeur alpha de 50%. Voici ce que j'ai sur la planche à dessin au sein de gtext symbole.
Le résultat final peut être vu en exportant le fichier SWF:
Nous pouvons modifier le degré de réflexion visible sur le verre à volonté. Déverrouiller le ombre calque et verrouille tous les autres calques. Sélectionnez le gtext sur ce calque et cliquez sur l'onglet "Effet de couleur" dans le panneau Propriétés. Sélectionner Luminosité dans le menu déroulant et changez le montant à environ -30; Cela réduira la quantité de réflexion de la surface du verre. L'image suivante montre l'effet avant et après de le faire:
Ah, mais la lumière du soleil est jaune, pas blanche. Nous pouvons changer la couleur de la lumière de réflexion en modifiant les paramètres de filtre pour ombre couche. Annulez le changement de luminosité de l’étape précédente en modifiant le style dans Effet de couleur sur aucun. Garder le gtext sur ombre calque sélectionné comme à cette étape, puis sélectionnez l'onglet Filtre, modifiez la couleur de surbrillance du filtre de biseau en jaune et définissez le paramètre Alpha sur 60%.
Pour changer la couleur du verre, commencez par sélectionner à nouveau le filtre Bevel dans la liste. ombre couche comme à l'étape précédente. Cette fois, au lieu de changer la surbrillance, modifiez la propriété Ombre pour sélectionner votre couleur. Pour un effet de couleur optimal, faites correspondre les couleurs Highlight et Shadow avec une bonne variation de teinte: avec un surlignage jaune, je peux choisir n'importe quelle teinte de jaune, orange, verte ou même rouge sans que mon verre ne semble pas réaliste. Une fois encore, définissez la valeur Alpha, comme dans l'étape précédente, à quelque chose proche de 50% en fonction de votre couleur. J'ai choisi 50% de rouge ici.
POINTE: vous voudrez peut-être aussi changer la couleur de l'ombre et l'arrière-plan pour qu'ils correspondent à ces paramètres.
Nous avons donc maintenant deux symboles dans notre bibliothèque. L'un est le verre symbole et autre est le gtext symbole. Le symbole de verre peut être modifié pour modifier les propriétés du verre, tandis que le symbole de texte peut être modifié pour modifier le contenu à vitrifier. Vous pouvez faire glisser le symbole de verre dans n'importe quelle animation Flash de votre choix pour réutiliser cet effet et modifier le contenu du texte en conséquence. En bref, vous avez sous la main un composant de vitrification agréable et pratique. Je vous recommanderais de jouer avec les paramètres et de désactiver les calques ou d'ajouter de nouveaux calques pour voir comment personnaliser davantage ce verre..
Pourquoi ne pas vous essayer à la création d’un script JSFL capable d’ajouter automatiquement l’effet Glassify à l’un de vos symboles vectoriels en un seul clic?
Accentsconagua