Share
Nous allons voir comment afficher du texte au format HTML chargé à partir de XML, stylé à partir d'une feuille de style CSS externe avec des polices chargées à l'exécution. Nous allons également maîtriser le placement d'image en ligne via le code HTML
Il est certainement facile de conserver tous les actifs directement dans le fichier source Flash lui-même, et cela peut parfois être la meilleure solution. Cependant, il existe de bonnes raisons de séparer autant de contenu que possible de votre document Flash, ou même de garder votre source Flash uniquement composée uniquement d'ActionScript..
Étant donné que nous allons utiliser divers actifs, il est utile de configurer une structure de répertoires de fichiers bien organisée. Tout d'abord, nous créons un répertoire de projet "HTMLTextBlock". Dans ce cadre, ajoutez un dossier "source" et un dossier "deploy". Dans déployer, notre fichier SWF sera situé au niveau supérieur avec des dossiers pour chaque type de contenu. Dans cette démonstration, nous allons créer un fichier SWF qui charge les polices, CSS, XML et une image. Le dossier source contiendra tous nos fichiers .fla et .as, que nous créerons plus tard. Pour le moment, votre répertoire de projet devrait ressembler à ceci:
Avant d’intégrer des polices sur votre site Web, il est important de connaître les licences de polices. Ce n’est pas parce que vous avez une police installée, même si vous avez les droits d’utiliser pour l’impression, que vous avez l’autorisation de l’utiliser en ligne. Pour plus d'informations sur les licences de polices, consultez cet article Themeforest..
Dans ce tutoriel, nous allons utiliser deux polices, une pour le titre et une pour le corps du texte. Le répertoire de polices de Google est un bon endroit pour trouver des polices open source de haute qualité. Vous ne pouvez pas télécharger les fichiers de polices directement à partir de là, mais vous pouvez les trouver facilement avec une recherche sur le Web. Font Squirrel et Typekit sont deux autres excellentes ressources pour les polices de haute qualité..
Lorsque vous choisissez une police de titre, recherchez un style qui exprime la personnalité de votre conception. Pour le corps du texte, la lisibilité est très importante, utilisez donc une police qui s’affiche correctement dans les petites tailles. Assurez-vous également de choisir une famille de polices avec des caractères gras, italiques et gras italiques. Pour ce didacticiel, nous utiliserons la police Lobster de Pablo Impallari pour les titres et la famille de polices Droid Serif de Steve Matteson pour les paragraphes..
Des recherches rapides en ligne indiquent où nous pouvons télécharger la police Lobster et la famille de polices Droid Serif. Dans notre la source répertoire, créer un nouveau dossier "polices téléchargées" et y placer les fichiers de polices.
Activez les polices sur votre système. Ouvrez deux nouveaux documents Flash ActionScript 3.0, un pour chaque police, et enregistrez-les sur le la source annuaire. Nous allons commencer par la police de titre. Dans le panneau Bibliothèque, sélectionnez "Nouvelle police…" et dans le menu Famille liste déroulante, sélectionnez Homard 1.4. Sous le nom, tapez "Homard". Pour Gammes de caractères, vérifier Tout. Remarque: si vous utilisez une police pour laquelle vous savez que vous n'utiliserez pas certains caractères, vous pouvez choisir d'incorporer un sous-ensemble de glyphes à partir de la police, ce qui diminue la taille du fichier SWF..
Ensuite, accédez à l'onglet ActionScript. Sous Lien, sélectionner Exporter pour ActionScript. Quand tu fais, Exporter au cadre 1 sera vérifié, et le Classe et Classe de base les identifiants seront renseignés. Cliquez sur Terminé. Si vous recevez un avertissement indiquant que la définition de la classe n'a pas été trouvée, ignorez-la..
Ensuite, dans le panneau Paramètres de publication, décochez la case HTML case à cocher et, dans la Flash champ, cible le les polices dossier dans le déployer répertoire en entrant "… /deploy/fonts/Lobster.swf". C’est tout ce qui est nécessaire pour intégrer une police dans un fichier SWF..
Cependant, si nous voulons pouvoir charger le fichier SWF dans un autre fichier SWF et utiliser ses polices incorporées au moment de l'exécution, nous devons enregistrer la police. Donc, dans le panneau Actions, nous devons ajouter un code de ligne à l'image 1 du scénario:
Font.registerFont (Homard);
Notre police sera désormais disponible dans tous les documents Flash chargés dans le fichier SWF. Nous pourrions avoir terminé ici, mais nous voulons vérifier notre travail et, plus important encore, obtenir le nom de famille de police correct à utiliser dans notre code CSS. Ajouter un peu plus de code.
Accentsconagua
var embeddedFonts: Array = Font.enumerateFonts (false); pour chaque (var police: Font dans embeddedFonts) trace ("Font Embedded:" + font.fontName); Exécutez Publier l'aperçu et nous verrons le message ci-dessous dans le journal de sortie. Prenez note du nom de la police. Nous en aurons besoin plus tard.
Police incorporée: Lobster 1.4 Police incorporée: Lobster 1.4
Vous pourriez vous demander pourquoi nous voyons deux déclarations de trace. Cela est dû à registerFont () méthode incorporant la police une seconde fois.
Font.registerFont (DroidSerifRegular); Font.registerFont (DroidSerifBold); Font.registerFont (DroidSerifItalic); Font.registerFont (DroidSerifBoldItalic); var embeddedFonts: Array = Font.enumerateFonts (false); pour chaque (var police: Font dans embeddedFonts) trace ("Font Embedded:" + font.fontName + "" + font.fontStyle); Ensuite, nous allons créer un fichier SWF pour la copie de corps. Cette fois, nous intégrons quatre polices, une pour chaque style. Dans notre deuxième document Flash, à nouveau dans le panneau Bibliothèque, sélectionnez Nouvelle police… Dans le menu déroulant Famille, sélectionnez Droid Serif et, pour Style, sélectionnez Normal. Tapez "DroidSerifRegular" dans le champ Nom et n'oubliez pas de définir Exporter pour ActionScript. Répétez ensuite les mêmes étapes pour les plages de caractères et l'onglet ActionScript. Répétez cette procédure pour les faces en gras gras, italique et italique. Dans le panneau des actions, nous utiliserons un code similaire à celui utilisé pour la police Lobster..
Exécuter l'aperçu de publication. Cette fois, nous verrons des messages de trace pour chacun des styles de police Droid Serif. Si vous en voyez moins de huit, vérifiez les paramètres de police dans le panneau Bibliothèque, car l'une des faces de la police n'est pas en cours d'intégration. Encore une fois, notez le nom de la police dans le journal de sortie..
Police incorporée: Droid Serif normal Police incorporée: Droid Serif bold Police incorporée: Droid Serif italic Police incorporée: Droid Serif boldItalic Police incorporée: Droid Serif italic Police incorporée: Droid Serif bold Police incorporée: Droid Serif regular Police incorporée: Droid Serif boldItalic
Maintenant, publiez la police Droid Serif sur "… /deploy/fonts/DroidSerif.swf" et nous devrions maintenant avoir deux fichiers SWF de polices., Homard.swf et DroidSerif.swf, dans le déployer / polices annuaire.
Le prochain élément que nous allons créer est un fichier XML. Le XML sera composé d'un élément: un bloc de texte au format HTML, composé d'un titre et d'un paragraphe construit avec le balisage HTML standard.
Pour que Flash puisse lire le code HTML sous la forme d'une entité d'élément XML, il doit être contenu dans un wrapper CDATA. CDATA est utilisé dans les documents XML pour indiquer qu'une section de contenu doit être analysée en tant que données de caractère au lieu de balisage..
TextField formaté au format HTML redimensionnable avec incorporation de polices d'exécution et style CSS Voici un exemple de champ de texte contenant une image en ligne. Le texte a été chargé à partir d'un fichier XML et est stylé avec une feuille de style css externe. La famille de polices Droid Serif, référencée par le css, a été chargée à l'exécution. Les styles disponibles pour Droid Serif sont audacieux, italique et gras italique. Droid Serif a été créé par Steve Matteson. La police de titre, Lobster, a été créée par Pablo Impallari.
]]>
Enregistrez ce fichier sous le nom "content.xml" dans le répertoire. xml dossier dans le déployer annuaire
Maintenant, nous allons créer CSS pour styler le HTML. En regardant notre HTML, nous pouvons voir que nous devons créer un style pour h1, p et une. Le texte entre les balises bold et italic (b et je) sera automatiquement nommé puisque ces styles sont présents dans notre famille de polices de paragraphe. Notez que vous ne devez pas oublier que Flash ne prend en charge qu'un sous-ensemble de propriétés CSS. reportez-vous au manuel de référence ActionScript 3.0 pour plus de détails..
Il est particulièrement important de cibler le nom de famille de police correct dans le fichier CSS. Veillez à utiliser le nom de police affiché dans le journal de sortie lorsque nous avons publié les documents relatifs aux polices (Homard 1.4 et Droid Serif).
h1 font-family: Lobster 1.4; taille de police: 24; couleur: # 990033; p font-family: Droid Serif; taille de police: 14; couleur: # 333333; menant: 4; a color: # 000000; texte-décoration: souligné;
Enregistrez ce fichier sous "styles.css" dans le répertoire css dossier dans le déployer annuaire
Créez un nouveau fichier Flash et enregistrez-le sous le nom "HTMLTextBlockExample.fla" dans le répertoire. la source annuaire. Dans le panneau Paramètres de publication, ciblez notre déployer dossier. Pour HTML, utilisez "… /deploy/index.html" au lieu du nom par défaut. Créez un nouveau fichier .as - "HTMLTextBlockExample.as" - qui deviendra la classe de document (reportez-vous à cette astuce pour en savoir plus sur les classes de document).
package import flash.display.MovieClip; Classe publique HTMLTextBlockExample étend MovieClip fonction publique HTMLTextBlockExample (): void
Nous allons ensuite charger les fichiers SWF de polices que nous avons créés dans notre document Flash. Créons deux variables. On sera un Tableau des chaînes d'URL pour chaque police SWF, et l'autre sera un int cela gardera une trace du nombre de polices chargées. Ensuite, nous allons créer différentes méthodes pour gérer le chargement.
package import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLRequest; Classe publique HTMLTextBlockExample étend MovieClip polices var publiques: Tableau / * de chaîne * / = ["polices / DroidSerif.swf", "polices / Lobster.swf"]; public var fontsLoaded: int = 0; fonction publique HTMLTextBlockExample (): void loadFonts (); function privée loadFonts (): void pour chaque (var fontURL: String dans les polices) var fontLoader: Loader = new Loader (); fontLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, onFontLoaded); fontLoader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onFontLoadError); fontLoader.load (new URLRequest (fontURL)); fonction privée onFontLoadError (event: IOErrorEvent): void trace ("ERREUR: impossible de trouver la police" + event.target.loaderURL); fonction privée onFontLoaded (event: Event): void fontsLoaded ++; if (fontsLoaded == fonts.length) onFontsLoadComplete (); fonction privée onFontsLoadComplete (): void trace (fonts.length + "les polices ont été chargées"); Exécuter l'aperçu de publication et vérifier que les deux polices sont chargées.
Le chargement des fichiers XML et CSS sera un processus similaire au chargement des polices. Tout d'abord, nous devons importer de nouvelles classes.
import flash.net.URLLoader; import flash.text.StyleSheet;
Nous allons également créer un nouveau Feuille de style variable qui contiendra les propriétés de style analysées à partir du fichier css.
public var textStyleSheet: StyleSheet;
Maintenant, nous ajoutons les méthodes de chargement des actifs.
fonction privée onFontsLoadComplete (): void trace (fonts.length + "les polices ont été chargées"); loadCSS (); fonction privée loadCSS (): void var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onCSSLoadComplete); loader.load (new URLRequest ("css / styles.css")); fonction privée onCSSLoadComplete (event: Event): void textStyleSheet = new StyleSheet (); textStyleSheet.parseCSS (event.target.data); loadXML (); fonction privée loadXML (): void var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onXMLLoadComplete); loader.load (new URLRequest ("xml / content.xml")); fonction privée onXMLLoadComplete (événement: événement): void trace (XML (événement.target.data) .toXMLString ()); Exécutez Publier Aperçu et vous verrez le XML imprimé dans le journal de sortie.
L'affichage de texte au format HTML est quelque chose que vous pouvez souvent faire, alors créons une classe que nous pourrons utiliser encore et encore. Ouvrez un nouveau fichier ActionScript et enregistrez-le sous le nom "HTMLTextBlock.as" dans le répertoire. la source annuaire.
package import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; Classe publique HTMLTextBlock étend Sprite // Largeur de htmlTextField. La valeur par défaut est 550 pixels. public var blockWidth: int = 550; // StyleSheet pour le htmlTextField. public var textStyleSheet: StyleSheet = new StyleSheet (); // contient le texte au format HTML. private var htmlTextField: TextField = new TextField (); fonction publique HTMLTextBlock () htmlTextField.embedFonts = true; htmlTextField.wordWrap = true; htmlTextField.multiline = true; htmlTextField.condenseWhite = true; htmlTextField.antiAliasType = AntiAliasType.ADVANCED; addChild (htmlTextField); fonction publique setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText;
Comme vous pouvez le constater, notre classe a trois variables. La variable privée htmlTextField contiendra du texte au format HTML. La variable publique blockWidth contrôle la largeur de htmlTextField, et textStyleSheet contient le style CSS qui est appliqué à htmlTextField. Dans le constructeur, nous définissons des propriétés pour htmlTextField et l'ajouter à la liste d'affichage. Enfin, nous créons setHTML () pour mettre du texte au format HTML dans htmlTextField.
Maintenant que nous avons une classe personnalisée pour afficher du texte HTML, utilisons-la. Commencez par modifier onXMLLoadComplete () d'envoyer des données XML sous forme de chaîne à une nouvelle méthode qui utilisera HTMLTextBlock pour afficher le HTML.
fonction privée onXMLLoadComplete (event: Event): void // extrait le xml des données cible de l'événement var xml: XML = XML (event.target.data); // convertit le xml en chaîne var xmlString: String = xml; // envoie une chaîne xml à la méthode displayHTML displayHTML (xmlString); fonction privée displayHTML (htmlText: String): void var htmlTextBlock: HTMLTextBlock = new HTMLTextBlock (); // définit la largeur et le style htmlTextBlock.blockWidth = 420; htmlTextBlock.textStyleSheet = textStyleSheet; // envoie la chaîne html à la classe HTMLTextBlock htmlTextBlock.setHTML (htmlText); // définit la position et ajoute à l'étape htmlTextBlock.x = 20; htmlTextBlock.y = 10; addChild (htmlTextBlock);
Le résultat:
Ensuite, nous allons ajouter une image à notre bloc de texte. Vous pouvez utiliser l’image dans les fichiers sources de ce tutoriel ou créer votre propre.
Ouvrir content.xml, et au début du paragraphe, utilisez un code HTML de base
TextField formaté au format HTML redimensionnable avec incorporation de polices d'exécution et style CSS ]]>
Voici un exemple de champ de texte contenant une image en ligne. Le texte a été chargé à partir d'un fichier XML et est stylé avec une feuille de style css externe. La famille de polices Droid Serif, référencée par le css, a été chargée à l'exécution. Les styles disponibles pour Droid Serif sont audacieux, italique et gras italique. Droid Serif a été créé par Steve Matteson. La police de titre Lobster a été créée par Pablo Impallari
Maintenant, le SWF va regarder ceci:
L'alignement de l'image et du texte ne semble pas encore tout à fait correct. Nous allons améliorer cela dans les étapes à venir.
Dans le didacticiel, nous allons écrire des méthodes qui ciblent l'image en ligne. Pour ce faire, nous devons ajouter un identifiant attribuer à notre balise d’image incorporée pouvant être référencée dans ActionScript. Ouvrir content.xml et mettre à jour le
]]>
Afin d’ajuster l’alignement de l’image, nous devons changer sa X et y valeurs. Cependant, nous devons le faire une fois l’image ajoutée et le texte refondu. Pour ce faire, nous allons ajouter un écouteur d'événement au HTMLTextBlock classe.
D'abord, importez quelques classes supplémentaires:
import flash.display.DisplayObject; import flash.display.Loader; import flash.events.Event;
Ensuite, mettez à jour le setHTML () méthode et créer un gestionnaire d'événements pour quand htmlTextField est redimensionné.
fonction publique setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") en tant que Loader; if (loader) // ajoute un écouteur d'événements pour le redimensionnement de htmlTextField en ajoutant l'image htmlTextField.addEventListener (Event.CHANGE, onImageAdded); // sinon, il n'y a pas de référence d'image, donc ne faites rien function privée onImageAdded (event: Event): void // accéder à l'image à partir de la référence d'image dans le champ de texte var loader: Loader = htmlTextField.getImageReference ("image") en tant que chargeur; image var: DisplayObject = loader.content; Remarquez comment l'image ne s'aligne pas correctement avec le texte? En effet, Flash ajoute automatiquement les espacements horizontal et vertical autour de l'image. Nous pouvons ajuster la quantité d'espacement en réglant la hspace et vspace attributs dans le
]]>
En regardant le fichier SWF, l'image est maintenant bien alignée dans le paragraphe, mais le texte est trop proche de l'image..
On dirait que nous avons besoin d'espacement après tout. Mettez à jour les attributs de balise d'image pour hspace = "5" vspace = "2". Cela nous donne un meilleur espacement, mais encore une fois, l'image ne sera pas alignée sur le bord gauche du paragraphe. Nous pouvons résoudre ce problème en modifiant le X valeur de l'image en onImageAdded ().
fonction privée onImageAdded (event: Event): void // accéder à l'image à partir de la référence d'image dans le champ de texte var loader: Loader = htmlTextField.getImageReference ("image") en tant que Loader; image var: DisplayObject = loader.content; // ajuste la position x de l'image pour décaler hspace image.x - = 5; 
L'image est bien alignée, mais le paragraphe semble un peu trop proche du titre. Si nous travaillions sur une page HTML, nous pourrions ajuster le remplissage ou la marge de la page. p ou h1 balises, mais malheureusement, Flash ne prend en charge aucun style CSS pour l’alignement vertical entre les paragraphes. La meilleure solution que nous ayons est de créer un nouveau style CSS uniquement pour l’espacement des lignes. S'ouvrir styles.css et ajoutez le style suivant:
br6 taille de la police: 6;
Mettre à jour content.xml avec un vide br6 balise de style.
]]>
Et maintenant, l'espacement des lignes entre le titre et l'alignement des paragraphes a été subtilement amélioré.
Ouvrez le fichier SWF, puis cliquez et faites glisser vers le bas tout en sélectionnant le texte. Vous remarquerez peut-être quelque chose d'inhabituel. La ligne supérieure de notre titre a disparu. Si vous le faites glisser vers le haut, il réapparaîtra. Sur les machines Windows, vous pouvez constater le même effet si vous survolez le texte et faites défiler la molette de la souris dans un navigateur..
Pour résoudre ce problème, grâce au blog Destroy Today, vous devez désactiver la réduction de la taille automatique une fois que le texte à l'intérieur a été modifié. Tout d'abord, mettez à jour le setHTML () méthode, puis onImageAdded ().
fonction publique setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") en tant que Loader; if (loader) // ajoute un écouteur d'événements pour le redimensionnement de htmlTextField en ajoutant l'image htmlTextField.addEventListener (Event.CHANGE, onImageAdded); else // il n'y a pas de référence d'image, alors désactivez la taille automatique htmlTextField.autoSize = TextFieldAutoSize.NONE; fonction privée onImageAdded (event: Event): void // accéder à l'image à partir de la référence de l'image dans le champ de texte var loader: Loader = htmlTextField.getImageReference ("image") as Loader; image var: DisplayObject = loader.content; // ajuste la position x de l'image pour décaler hspace image.x - = 5; // désactive l'autosize htmlTextField.autoSize = TextFieldAutoSize.NONE; Republiez, et vous verrez que notre correction de bogue a créé un nouveau problème.
Maintenant, la hauteur du champ de texte n'est pas assez grande pour afficher tout le texte et les deux lignes du bas ne sont pas visibles. Nous allons résoudre ce problème dans notre prochaine étape.
Pour que tout le texte soit visible, nous devons augmenter la hauteur de HTMLTextField. Si nous augmentons simplement la hauteur de 50 pixels après l’ajout de l’image, le problème est résolu.
htmlTextField.height + = 50;
Cependant, cette solution ne semble pas appropriée. Et si nous utilisions une image de taille différente? Différentes polices ou styles? Le meilleur moyen de résoudre le problème consiste à ajuster la hauteur de manière dynamique, en fonction des valeurs utilisées par Flash pour déterminer la hauteur. La tactique évidente serait d'utiliser le hauteur du texte paramètre. Essayons.
htmlTextField.height = htmlTextField.textHeight;
C'est mieux, mais la ligne de fond du texte est toujours masquée. En effectuant des recherches (par exemple, cet article de blog), nous pouvons constater que deux valeurs doivent être ajoutées à la hauteur. L'un est le plus élevé de premier plan valeur des styles de texte que nous utilisons. Dans ce cas, ce serait 4 (du p style). L'autre valeur est htmlTextField.maxScrollV. Si nous ajoutons le total de ces valeurs, plus un réglage de sécurité de 2 pixels, à la hauteur, HTMLTextField sera correctement dimensionné, quels que soient les polices, le style ou les images utilisés. Au lieu de faire cela dans onImageAdded (), créer une nouvelle fonction pour verrouiller la hauteur du bloc de texte.
fonction privée onImageAdded (event: Event): void // accéder à l'image à partir de la référence d'image dans le champ de texte var loader: Loader = htmlTextField.getImageReference ("image") en tant que Loader; image var: DisplayObject = loader.content; // ajuste la position x de l'image pour décaler hspace image.x - = 5; // verrouille la hauteur du champ de texte pour empêcher le défilement d'un bug lockHeight (); private function lockHeight (): void // désactive la taille automatique htmlTextField.autoSize = TextFieldAutoSize.NONE; htmlTextField.height = htmlTextField.textHeight; // obtient le réglage de la hauteur // d'abord, parcourez les styles StyleSheet pour obtenir la valeur de début la plus élevée var mostLeading: int = 0; pour chaque (var style: String dans textStyleSheet.styleNames) var lead: int = int (textStyleSheet.getStyle (style) .leading); si (plus élevé < leading) highestLeading = leading; // now, get the value of the height adjustment var heightAdjust:int = htmlTextField.maxScrollV + highestLeading + 2; htmlTextField.height += heightAdjust; le setHTML () Cette méthode doit également être mise à jour. Lorsqu'aucune image en ligne n'est chargée dans le bloc de texte, la hauteur doit être verrouillée.
fonction publique setHTML (htmlText: String): void htmlTextField.autoSize = TextFieldAutoSize.LEFT; htmlTextField.width = blockWidth; htmlTextField.styleSheet = textStyleSheet; htmlTextField.htmlText = htmlText; var loader: Loader = htmlTextField.getImageReference ("image") en tant que Loader; if (loader) // ajoute un écouteur d'événements pour le redimensionnement de htmlTextField en ajoutant l'image htmlTextField.addEventListener (Event.CHANGE, onImageAdded); else // il n'y a pas de référence d'image, verrouille la hauteur du champ de texte lockHeight (); Avec ces derniers ajustements, tout le texte est maintenant visible et ne défilera pas.
Notre dernière tâche dans ce didacticiel consistera à ajouter un lien de texte qui redimensionne le bloc de texte. Pour cela, il faut d’abord ajouter le lien vers le texte HTML dans le content.xml fichier.
TextField formaté au format HTML redimensionnable avec incorporation de polices d'exécution et style CSS
Nous pouvons ajouter des événements aux liens de texte. Par exemple, augmenter ou diminuer la largeur du champ de texte.
]]>
Dans notre HTMLTextBlock classe, ajoutez un écouteur d'événements pour détecter le clic sur un lien de texte. Tout d'abord, importez le TextEvent classe.
import flash.events.TextEvent;
Dans le constructeur, ajoutez l'écouteur d'événement.
htmlTextField.addEventListener (TextEvent.LINK, textLinkHandler);
Maintenant, créez la méthode du gestionnaire d'événements.
fonction privée textLinkHandler (event: TextEvent): void trace (event.text);
Exécutez l'aperçu de publication. En cliquant sur les liens d’événement texte, vous verrez soit augmentationWidth ou diminutionWidth dans le journal de sortie.
Créer une nouvelle méthode qui changera la largeur de htmlTextField.
fonction privée changeWidth (newWidth: int): void blockWidth = newWidth; // déverrouille la hauteur du champ de texte htmlTextField.autoSize = TextFieldAutoSize.LEFT; // change la largeur htmlTextField.width = blockWidth; // re-verrouille la hauteur lockHeight ();
Mettre à jour le gestionnaire de liens de texte à appeler changeWidth ().
fonction privée textLinkHandler (event: TextEvent): void if (event.text == "augmenterWidth") changeWidth (blockWidth + 10); if (event.text == "diminutionWidth") changeWidth (blockWidth - 10);
En cliquant sur les liens de texte augmenter / dimin
