Styling champs de texte Flash à l'aide CSS - Feuilles de style en cascade
Par Blue_Chi | Flash 8 | ActionScript | Intermédiaire
Feuilles de style en cascade (CSS) est la technologie standard utilisée pour formater la présentation des pages web. Il pourrait également être utilisé pour le style HTML texte formaté en Flash afin que vous puissiez mettre à jour la mise en forme dynamique en éditant votre fichier CSS sans retourner à la source FLA. CSS nous donne aussi plus de contrôle sur la façon dont notre texte est formaté et nous permet de personnaliser notre style d'une manière qui ne sont pas possibles en HTML sur son propre (par exemple. Changer la couleur des liens texte). Le texte affiché dans l'animation Flash suivant est chargé à partir d'un fichier texte externe et sa mise en forme est configuré par un fichier CSS externe. Ce tutoriel vous enseignera comment créer ce genre de film.
Nous allons commencer notre tutoriel en créant le fichier texte, la création du fichier CSS, puis la création d'un film Flash qui utilise les deux.
Création du fichier texte
Nous commencerons par créer le fichier texte qui contiendra notre contenu HTML. Vous pouvez apprendre comment charger du texte externe Flash en consultant notre précédent tutoriel sur ce sujet. Pour ce tutoriel, tout ce que vous avez à faire est de créer un fichier texte nommé MyText.txt et collez le contenu suivant en elle.
Vous devez noter que Flash ne supporte pas toutes les balises HTML. Il est seulement capable d'afficher des balises simples telles que
Création du fichier CSS
Nous allons maintenant créer le fichier CSS qui contiendra nos informations de style, utilisez votre bloc-notes pour créer un fichier nommé monstyle.css. CSS est capable de changer la façon dont une balise HTML se comporte, de sorte que la première partie du code que nous ajoutons modifiera la façon dont la
tag est affichée, nous allons définir la police, la taille et la couleur.
En plus d'être en mesure de changer la façon dont tous les cas d'une certaine étiquette sont affichés, nous pouvons créer des classes spécifiques que nous pourrions mettre en œuvre à certains cas que dans le code. Un nom de classe commence par un point. Nous allons créer une classe de style spécifique pour les paragraphes d'en-tête et pied de page. Ce qui suit passe en dessous de ce que nous avons déjà écrit.
La dernière chose que le style est les liens d'ancrage, nous allons redéfinir le comportement de l'étiquette directement, sans l'utilisation d'une classe, bien que ce soit possible.
Configuration de la scène
Nos deux textes et les fichiers CSS sont maintenant prêts, il est temps de jouer avec Flash. Commencez par créer un nouveau film flash, définissez les dimensions 400x400 pixels, utilisez un fond blanc, et régler la vitesse de lecture à 12 images par seconde. Utilisation de l'outil Texte. créer un grand champ de texte qui remplit la scène. Accédez à l'inspecteur de propriétés et définissez le type de texte dynamique. Définissez le type de ligne à multilignes et vérifiez l'option Rendre HTML. Enfin, assigner l'instance namemyText_txt au champ texte.
Ajoutez le code ActionScript
Cliquez droit sur le seul cadre sur la timeline et sélectionnez Actions pour ouvrir le panneau Actions. notre code sera divisé en deux parties, la première sera une fonction contenant le code pour charger le texte et la deuxième partie chargera le fichier CSS et appliquer le style au champ texte que nous avons sur la scène. On ne va pas habiter sur la première partie que le chargement du texte externe a été couvert dans le tutoriel mentionné précédemment. vous pouvez en apprendre davantage sur les fonctions en lisant notre Introduction à tutoriel Fonctions.
TextLoader fonction () MyData = new LoadVars ();
myData.onLoad = function () myText_txt.html = true;
myText_txt.htmlText = this.myVariable;
>;
myData.load ( "MyText.txt");
>
La deuxième partie va charger le fichier CSS et appliquer le style au champ texte.
var myCSS = new TextField.StyleSheet ();
myCSS.load ( "monstyle.css");
myCSS.onLoad = function () <
myText_txt.styleSheet = myCSS;
TextLoader ();
>;
Le TextField.StyleSheet () est une classe ActionScript qui doit être instancié dans un objet dans l'ordre à contrôler et renvoyé, myCSS est le nom que nous avons choisi pour notre instance de la classe Text.Field.StyleSheet. La deuxième ligne du code charge simplement le fichier CSS, vous devrez fournir l'URL complète à votre fichier CSS ici. La dernière partie du code utilise le gestionnaire d'événements de propriété .onLoad pour commander le film de prendre une action lorsque le fichier CSS est chargé. L'action que nous avons choisi de prendre est d'appliquer la feuille de style à notre champ de texte, puis appeler la fonction TextLoader que nous avons défini à l'étape précédente.
Remarque: Vous devez appliquer le style à votre champ de texte avant de charger tout texte pour que cela fonctionne.
Ca y est, vous pouvez tester votre film pour voir votre texte stylé!
Ceci conclut notre tutoriel, s'il vous plaît ne hésitez pas à poster sur le forum Oman3D si vous avez des questions, vous pouvez consulter notre collection de tutoriel à ce lien.
- Fin du didacticiel