Share
Il n’est pas surprenant que vous puissiez utiliser le texte TLF comme bouton pour lancer un événement dans votre film. Par exemple, vous pourriez avoir un bloc de texte sur la scène qui parle d'une visite à Times Square à New York et lorsque l'utilisateur clique sur la phrase Times Square, une photo apparaît sur la scène. Dans cet exemple, vous allez cliquer sur du texte et une étoile jaune que vous créerez sur la scène commence à tourner..
Ce qui suit est un exercice de Foundation Flash CS5 For Designers de Tom Green et Tiago Dias.Ouvrez un nouveau document Flash ActionScript 3.0 et enregistrez-le sous le nom TLF_eventLink_AS.fla. Changez le nom du calque 1 en étoile et ajoutez un nouveau calque nommé actions.
Cliquez une fois dans la première image de la couche étoile. Cliquez et maintenez l'outil Rectangle de votre barre d'outils, puis sélectionnez l'outil Polystar..
Dans le panneau Propriétés, tournez les propriétés Remplissage et Contour vers le bas, puis définissez la valeur Contour sur Aucune et la valeur Remplissage sur Jaune (# FFFF00)..
Tournez les paramètres d’outil vers le bas, puis cliquez sur le bouton Options pour ouvrir la boîte de dialogue correspondante, illustrée à la Figure 6-26. Sélectionnez Étoile dans la liste déroulante Style et entrez 5 pour le nombre de côtés. Cliquez sur OK pour fermer la boîte de dialogue..
Utilisez l'outil PolyStar pour créer des étoiles.
Dessinez une étoile quelque part dans la moitié inférieure de la scène, convertissez-la en un clip nommé Star, définissez son point d'alignement sur Centre et, dans le panneau Propriétés, attribuez au clip Star le nom d'instance de starMC..
Cliquez sur la première image des calques d'actions et ouvrez le panneau Actions. Lorsque le panneau s'ouvre, cliquez une fois sur le volet Script et entrez le bloc de code suivant:
var containerSprite: Sprite = new Sprite (); this.addChild (containerSprite); containerSprite.x = 25 containerSprite.y = 50;
Un Sprite est un clip virtuel sans scénario. Nous commençons par créer un Sprite nommé containerSprite, qui sera utilisé pour contenir le texte. La raison pour laquelle nous en avons besoin est qu’il y aura une certaine interactivité. Ce Sprite est placé à 25 pixels du bord gauche de la scène et à 50 pixels du haut..
Appuyez deux fois sur la touche Entrée (Windows) ou Retour (Mac) et entrez le code suivant:
var conteneur: ContainerController = new ContainerController (containerSprite, 400, 300);var config: Configuration = nouvelle configuration (); var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0X000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat;
Rien de nouveau ici. Le conteneur pour le texte est créé avec le Configuration() objet, et la mise en forme du texte à placer dans le conteneur est créée.
Appuyez deux fois sur la touche Entrée (Windows) ou Retour (Mac) et entrez les informations suivantes:
var textFlow: TextFlow = new TextFlow (); var p: ParagraphElement = new ParagraphElement (); p.linkHoverFormat = color: 0XFF0000; p.linkNormalFormat = couleur: 0x0000FF, textDecoration: TextDecoration.NONE;
Les deux dernières lignes sont nouvelles et leur but est de vous permettre de changer la couleur d'un mot ou d'un groupe de mots lorsque l'utilisateur les survole. La propriété linkHoverFormat appartient à la classe TextFormat et est utilisée pour indiquer à Flash la couleur que le texte identifié comme lien sera lorsque la souris le survolera. Dans ce cas, la couleur passera au rouge.
Comme vous l'avez peut-être deviné, la deuxième ligne indique à Flash quelle couleur doit être le lien lorsque la souris s'éteint. Dans ce cas, il sera bleu. Naturellement, les liens sont traditionnellement soulignés. Pour supprimer le soulignement, utilisez la constante NONE, qui fait partie de la classe TextDecoration. Si vous voulez le soulignement, ce serait TextDecoration.UNDERLINE.
La prochaine étape du processus consiste à indiquer à Flash quoi faire lorsque le texte en couleur est cliqué..
Appuyez deux fois sur la touche Entrée (Windows) ou Retour (Mac) et entrez les informations suivantes:
lien var: LinkElement = new LinkElement (); link.addEventListener (FlowElementMouseEvent.CLICK, linkClicked);
Il n'y a bien sûr rien à cliquer. Traitons ce problème.
Appuyez plusieurs fois sur la touche Entrée (Windows) ou Retour (Mac) et ajoutez les éléments suivants:
var linkSpan: SpanElement = new SpanElement (); linkSpan.text = "Cliquez ici"; link.addChild (linkSpan); var span: SpanElement = new SpanElement (); span.text = "pour voir votre étoile tourner sur la scène"; p.addChild (lien); p.addChild (span);
La prochaine étape consiste à insérer le texte dans le conteneur.
Appuyez sur la touche Entrée (Windows) ou Retour (Mac) et ajoutez les éléments suivants:
textFlow.addChild (p); textFlow.flowComposer.addController (conteneur); textFlow.flowComposer.updateAllControllers ();
Le dernier bit de code est la fonction qui fait tourner l'étoile lorsque l'utilisateur clique sur le texte. Entrez les informations suivantes:
fonction linkClicked (evt: FlowElementMouseEvent): void evt.preventDefault (); var tween: Tween = new Tween (starMC, "rotation", Elastic.easeOut, 0, 180, 2, vrai);
La première ligne de code indique à Flash d’ignorer les paramètres par défaut concernant la souris et le texte du conteneur..
La magie se passe dans cette deuxième ligne. Les paramètres indiquent à la classe Tween de travailler avec la propriété rotation de l’étoile (starMC) et d’appliquer un astuceOut à l’étoile une fois la rotation terminée. Naturellement, Flash, étant stupide, il faut savoir que la rotation commence par l’étoile à 0 degré et qu’elle doit effectuer une rotation de 180 degrés. Il le fait deux fois et utilise les secondes comme mesure du temps.
Cliquez sur le bouton Vérifier la syntaxe lors de votre premier parcours dans le code à la recherche d'erreurs. S'il n'y en a pas, votre ordinateur va ding. Si des erreurs sont trouvées, elles seront affichées dans le panneau Compilateur. L'erreur la plus courante sera l'orthographe ou une déclaration d'importation manquante..
Voici un conseil rapide. Si une classe ne s'affiche pas comme une importation, le panneau Compilateur vous indiquera que la propriété n'est pas définie. Sélectionnez la classe dans le code où elle apparaît et supprimez le texte. Tapez les deux premières lettres de la classe et appuyez sur Ctrl + barre d'espace. La classe apparaîtra dans l'indicateur de code obtenu. Double-cliquez sur la classe pour la rajouter dans le code. Cela crée également l'instruction d'importation manquante..
Le texte est coloré. Lorsque vous cliquez sur la souris, l'étoile tourne. Une version complète de ce fichier est fournie avec le téléchargement source..
Voici les instructions d'importation pour cet exercice:
import flash.display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.LinkElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.events.FlowElementMouseEvent; import fl.transitions.Tween; import flashx.textLayout.formats.TextDecoration; import fl.transitions.easing.Elastic; import flashx.textLayout.formats.TextAlign;
Apprécié cela? Vouloir plus? Vous pouvez toujours acheter une copie de FriendsOfEd…
Accentsconagua