Flash CS5 pour les concepteurs TLF et ActionScript + Win 1 sur 3 copies signées!

Beaucoup de choses ont changé entre la manière dont le texte a été traité dans Flash CS4 et Flash CS5. Nous pensons que le moment est venu de prendre un tabouret, de s'asseoir et d'examiner, en termes très généraux, ce que vous devez savoir sur TLF avant de «connecter» un exercice ou un projet à l'aide d'ActionScript..

Ce qui suit est un exercice de Foundation Flash CS5 For Designers de Tom Green et Tiago Dias.
 
Si vous avez de la chance, participez au concours Activetuts + pour gagner un des 3 exemplaires signés! (Bien sûr, vous pouvez toujours acheter une copie…)

introduction

Avec le nouveau TextLayoutFramework (TLF), du texte se trouve dans ces choses appelées des conteneurs. Ils peuvent être dessinés physiquement sur la scène à l'aide de l'outil Texte et se voir attribuer un nom d'instance ou, comme il est plus courant, créés au moment de l'exécution. Vous savez également que le texte peut être formaté et manipulé à l'aide du panneau Propriétés. La chose intéressante ici est le mot Propriétés. S'il existe une propriété dans le panneau, son équivalent se trouve dans ActionScript. La mauvaise nouvelle est qu’ActionScript est une pierre froide et stupide. Par exemple, il n'a pas la moindre idée de ce qu'est un conteneur tant que vous ne lui demandez pas d'en créer un. Il ne formate pas le texte tant que vous ne lui dites pas quoi faire. Il ne mettra même pas le texte sur la scène jusqu'à ce qu'on lui dise de le faire.

La plupart des projets commenceront avec votre commande à Flash de Configuration() object, qui est utilisé pour indiquer à Flash qu’un conteneur est présent sur la scène et comment gérer le cadre de disposition de texte pour les éléments du conteneur. L’apparence réelle est gérée par le Flux de texte () classe, qui prend ses ordres, pour ainsi dire, de la Configuration() objet.

Naturellement, être stupide, le Configuration() Il faut que l’objet indique exactement comment gérer le texte dans le conteneur. Le format par défaut est défini via une propriété de la classe de configuration appelée textFlowInitialFormat. Pour le changer, vous utilisez simplement le TextlayoutFormat () classe pour définir les polices, les couleurs, l’alignement, etc., puis informer le patron-Configuration ()-que c'est textFlowInitialFormata changé pour ceux que vous avez définis avec TextLayoutFormat ().Le patron l’aura, mais il n’est pas très brillant, vous devez donc lui dire de confier le travail à un autre membre de l’équipe de gestion, le Flux de texte () classe. Cette classe a la responsabilité générale de tout mot dans un conteneur. Être aussi faible que le patron, Flux de texte () faut savoir ce qu'est un paragraphe (ParagraphElement), quelle est la largeur du paragraphe (SpanElement), si des graphiques sont incorporés dans le paragraphe (InLineGraphicElement), si l'un des textes contient des liens (Élément de lien), etc. De plus, il faut savoir quel texte est ajouté au conteneur pour qu'il puisse gérer la longueur de la ligne et ajouter des enfants (addChild) qui contiennent cette mise en forme afin que l'utilisateur puisse réellement la voir.

le Flux de texte () La classe, encore une fois pas très brillante, confiera ensuite le travail à un autre membre de l’équipe de gestion, le IFlowComposer () classe, dont le seul travail est de gérer la disposition et l’affichage du flux de texte dans ou entre les conteneurs. Le compositeur de flux termine le processus en décidant combien de texte va dans un conteneur, puis ajoute les lignes de texte à l'image-objet. Ceci est accompli grâce à l'utilisation du addController () méthode, qui crée un ContainerController () objet dont les paramètres identifient le conteneur et ses propriétés.

La dernière étape habituelle consiste à demander au FlowComposer de mettre à jour les contrôleurs et de placer le texte sur la scène en fonction de la manière dont les autres membres de l’équipe ont informé le groupe. Configuration() objecter comment leur part du projet doit être gérée.

Avec ces informations en main, passons à l'utilisation de TLF dans ActionScript. Nous allons créer une colonne de texte avec ActionScript.


Étape 1: Nouveau document

Ouvrez un nouveau document Flash ActionScript 3.0, renommez le calque 1 en actions, sélectionnez la première image du calque d'actions et ouvrez le panneau Actions..


Étape 2: ActionScript

Cliquez une fois dans la fenêtre de script et entrez les informations suivantes:

var myDummyText: String = "L'introduction de la gamme de produits Adobe CS5 met entre vos mains de puissants outils typographiques, notamment une nouvelle API (Interface de programmation d'application) appelée Type Layout Framework (TLF), ainsi que d'autres outils dans la ligne Adobe. Pour se rapprocher d’un point de confluence avec Flash, le domaine des graphiques animés typographiques sur le Web est sur le point de s’implanter dans un territoire qui reste à explorer. Pour commencer cette exploration, vous devez comprendre quel type est dans Flash et , ce que vous pouvez en faire pour honorer les messagers de communication de votre contenu. ";

Vous avez besoin de texte à ajouter à la scène. Cette chaîne est le troisième paragraphe de ce chapitre. Maintenant que vous avez le texte à entrer dans le conteneur, vous devez charger la classe qui le gérera.


Étape 3: Configuration ()

Appuyez sur la touche Entrée (Windows) ou Retour (Mac) et ajoutez la ligne de code suivante:

 var config: Configuration = nouvelle configuration ();

Comme vous l'avez peut-être remarqué, dès que vous avez créé l'objet Configuration (), Flash a importé la classe.-flashx.textLayout.elements.Configuration -dont la tâche principale est de contrôler le comportement de TLF. Le bloc de code suivant indique à TLF comment le texte apparaîtra sur la scène.


Étape 4: Classe TextLayoutFormat

Appuyez deux fois sur la touche Entrée (Windows) ou Retour (Mac) et entrez les informations suivantes:

 var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; charFormat.paddingLeft = 100; charFormat.paddingTop = 100;

Comme nous l'avons dit précédemment, la classe TextLayoutFormat définit le format du texte d'un conteneur. Les propriétés de cette classe affectent le format et le style du texte d'un conteneur, d'un paragraphe ou même d'une seule ligne de texte. Dans ce cas, nous indiquons à Flash les polices à utiliser, la taille, la couleur, son alignement (notez la majuscule utilisée pour l'alignement) et le remplissage qui le décale des contours du conteneur..

Avant de continuer, vous devez faire quelque chose. Il y a un problème de codage. Faites défiler jusqu'aux instructions d'importation. Si vous voyez cette ligne-import flashx.textLayout.elements.TextAlign;-passez au bloc de code suivant. Sinon, supprimez cette ligne dans le bloc de code que vous venez d'entrer: charFormat.textAlign = TextAlign.LEFT;. Reentre charFormat.textAlign =. Tapez les deux premières lettres de la classe (Te), appuyez sur Ctrl + barre d'espace et l'indicateur de code devrait apparaître. Trouver TextAlign, et double-cliquez dessus. Cela devrait ajouter la déclaration d'importation manquante. Pour préserver votre santé mentale, nous vous fournirons une liste des déclarations d'importation devant apparaître à la fin de chaque exercice. Nous vous suggérons fortement de comparer votre liste d'instructions d'importation à la liste présentée et, s'il vous en manque, de les ajouter à votre code..

Maintenant que vous savez comment le texte sera mis en forme, vous devez indiquer à l'objet Configuration () d'utiliser la mise en forme. Si vous ne le faites pas, il appliquera le paramètre par défaut choisi.


Étape 5: textFlowInitialFormat

Appuyez deux fois sur la touche Entrée (Windows) ou Retour (Mac) et entrez les informations suivantes:

 config.textFlowInitialFormat = charFormat;

Étape 6: Flux de texte ()

Appuyez sur la touche Entrée (Windows) ou Retour (Mac) et entrez le bloc de code suivant:

 var textFlow: TextFlow = new TextFlow (config); var p: ParagraphElement = new ParagraphElement (); var span: SpanElement = new SpanElement (); span.text = myDummyText; p.addChild (span); textFlow.addChild (p);

le Flux de texte () object doit être ici car son travail consiste à gérer tout le texte du conteneur. Le constructeur-TextFlow (config)-indique à TLF qu'il doit utiliser l'objet config créé précédemment pour savoir comment formater le contenu du conteneur et même le conteneur lui-même.
Le prochain constructeur-ParagraphElement ()-indique essentiellement à Flash comment un paragraphe doit être traité. Il n'y en a qu'un ici, donc il n'a pas vraiment besoin d'un paramètre.

La dernière étape consiste à transférer toute la mise en forme et la mise en page dans le conteneur de la scène..


Étape 7: ContainerController

Appuyez sur la touche Entrée (Windows) ou Retour (Mac) et ajoutez ces deux dernières lignes:

 textFlow.flowComposer.addController (new ContainerController (this, 500, 350)); textFlow.flowComposer.updateAllControllers ();

La première ligne ajoute le ContainerController et indique à Flash que le conteneur géré est le DisplayObject actuel (ce), qui est actuellement la scène, et de définir ses dimensions à 500 pixels de large par 350 pixels de haut.


Étape 8: test

Enregistrez le projet et testez le film. Le texte, comme indiqué ci-dessous, apparaît à l'aide des instructions de formatage que vous avez définies..

Instructions d'importation pour cet exercice

Voici les instructions d'importation pour cet exercice:

 import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.container.ContainerController;

Utilisation d'ActionScript pour créer et formater le conteneur et son texte

Bien que cette tâche de codage puisse, au début, sembler être un processus plutôt compliqué, nous pouvons l’assurer que ce n’est pas le cas; cela deviendra presque une seconde nature lorsque vous commencerez à utiliser ActionScript pour lire du texte dans les conteneurs.

Avec l'introduction du format de disposition du texte, votre capacité à créer du texte, à le formater, à le placer dans des colonnes et à le manipuler de manière générale à l'aide d'ActionScript a considérablement élargi vos possibilités créatives. Avant de vous enthousiasmer à ce sujet, vous devez savoir que le mot Cadre y a-t-il une raison.

Tout objet texte TLF que vous créez reposera sur une bibliothèque ActionScript TLF spécifique, également appelée bibliothèque partagée d'exécution (RSL). Lorsque vous travaillez sur la scène dans l'interface Flash, Flash fournit la bibliothèque. Ce n'est pas le cas lorsque vous publiez le fichier SWF et le placez dans une page Web. Il doit être disponible, tout comme Flash Player, sur la machine de l'utilisateur. Lorsque le fichier SWF est chargé, il est à la recherche de la bibliothèque à trois endroits:

  • L'ordinateur local: Flash Player recherche une copie de la bibliothèque sur la machine locale sur laquelle il est en train de jouer. Si ce n'est pas là, il se dirige vers Adobe.com.
  • Adobe.com: Si aucune copie locale n'est disponible, Flash Player interroge les serveurs d'Adobe pour obtenir une copie de la bibliothèque. La bibliothèque, comme le plug-in Flash Player, ne doit être téléchargée qu'une fois par ordinateur. Après cela, tous les fichiers SWF ultérieurs qui seront lus sur le même ordinateur utiliseront la copie précédemment téléchargée de la bibliothèque. Si, pour une raison quelconque, il ne peut pas le récupérer ici, il regardera dans le dossier contenant le fichier SWF..
  • Dans le dossier contenant le fichier SWF: Si les serveurs Adobe ne sont pas disponibles pour une raison quelconque, Flash Player recherche la bibliothèque dans le répertoire du serveur Web où réside le fichier SWF. Pour fournir ce niveau supplémentaire de sauvegarde, téléchargez manuellement le fichier de bibliothèque sur le serveur Web avec votre fichier SWF. Nous fournissons plus d’informations sur la procédure à suivre au chapitre 15..

    Lorsque vous publiez un fichier SWF utilisant du texte TLF, Flash crée un fichier supplémentaire nommé textLayout_X.X.X.XXX.swz (où les X sont remplacés par le numéro de version) en regard de votre fichier SWF. Vous pouvez éventuellement choisir de télécharger ce fichier sur votre serveur Web avec votre fichier SWF. Cela permet dans de rares cas où les serveurs d'Adobe ne sont pas disponibles pour une raison quelconque. Si vous ouvrez le fichier dans lequel vous avez enregistré cet exercice, vous verrez à la fois le fichier SWF et, comme le montre la figure 6-25, le fichier SWZ..

Le fichier .swz contient la structure de disposition de texte.


Le cadeau!

Nous organisons ce cadeau un peu différemment depuis qu'Adam d’Aetuts + a poussé Wildfire à mon chemin… Wildfire est un brillant constructeur de promotions et fait de la participation aux concours un jeu d'enfant! Si vous souhaitez avoir une chance de gagner l'un des trois exemplaires signés de "Foundation Flash CS5 for Designers", entrez simplement!

Comment puis-je entrer?

  1. Envoyez un tweet depuis la page d'entrée. Pour chaque abonné Twitter qui entre par votre lien, vous obtenez une entrée supplémentaire..
  2. Remplissez vos coordonnées une fois que vous l'avez fait. C'est tout!

Les trois gagnants seront annoncés le lundi 6 septembre. Bonne chance!