Construire une boîte HTML ActionScript 3.0 avec prise en charge de XML et CSS

Dans cette page (pour la première page), il n'y aura pas de page précédente. Le lien précédent doit donc être passif et son "href" doit être vide.

Au fait, à voir "<", "&" etc. symbols in htmlbox we should use their codes shown below.

< : < (less than) > :> (supérieur à) &: & (esperluette) ":" (guillemets doubles) ' : '(apostrophe, guillemet simple)

Étape 6 - Ajout de numéros de page aux pages

Lors de l'ajout de numéros de page, il suffit d'utiliser la classe "page" pour "span". La structure des numéros de page dépend de vous. Je leur ai écrit comme ça: "(page 1/3)".

… (page 1/3) 

Et voici mon fichier XML avec une page.

En passant, vous pouvez ajouter des images à vos pages comme indiqué ci-dessous:

Étape 7 - Fichiers de script d'action (classes externes)

Nous avons créé le dossier "keremk" et nous l'utiliserons pour nos classes "XMLLoader" et "CSS".

Nous devons donc commencer nos cours avec:

 package keremk 

Étape 8 - Création de la classe CSS

Nous allons commencer notre classe CSS avec "package keremk ". Son nom de classe sera le même que le nom de fichier "CSS". Remarque: ActionScript est sensible à la casse.. Puisque nous enverrons des événements avec cette classe, cela étendra "EventDispatcher".

 package keremk // CSS est dans le dossier keremk. classe publique CSS s'étend à EventDispatcher // CSS enverra des événements à une fonction publique CSS (): void loader = nouvel URLLoader; // lorsqu'un CSS est créé, un nouveau chargeur sera défini 

Étape 9 - CSS: Importation de classes Flash

 import flash.net.URLLoader; // Nous allons charger le fichier css avec urlloader import flash.net.URLRequest; // et il devrait y avoir une demande de chargement. import flash.text.StyleSheet; // Nous analyserons le fichier css en tant que StyleSheet. import flash.events.SecurityErrorEvent; // Nous allons distribuer les événements, nous devons donc également importer les classes associées. import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher;

Vous pouvez également importer ces classes sur 3 lignes en utilisant "*" pour importer toutes les classes "events" et "net", mais je préfère les importer une par une. Nous n'avons pas besoin de toutes les classes "events" et "net". Si vous préférez écrire moins de code, voici l'équivalent abrégé.

importer flash.events. *; importer flash.net. *; import flash.text.StyleSheet;

Étape 10 - CSS: variables

Nous aurons besoin de seulement deux variables dans cette classe, un URLLoader et une StyleSheet.

private var loader: URLLoader; public var sheet: StyleSheet;

En passant, les variables privées ne sont pas accessibles en dehors de leurs classes. Je vais utiliser "loader" uniquement dans la classe CSS afin de pouvoir le créer en tant que privé. Je vais utiliser "feuille" de la classe principale, donc je dois le créer comme "public" (accessible).

Étape 11 - CSS: Fonction de chargement

Nous utiliserons cette fonction de chargement de notre classe principale, nous devons donc la créer en tant que public. Il faudra une chaîne à charger, ce sera "_req: String"

fonction publique load (_req: String): void // function chargera le fichier qui se trouve chemin. loader.load (new URLRequest (_req)); // chemin doit être transformé en URLRequest pour charger le fichier. loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); // Nous allons écouter 3 événements à transférer dans la classe principale. loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, chargé); 

Étape 12 - CSS: gestionnaires d'événements et répartiteurs

À l'étape 11, nous avons ajouté 3 écouteurs d'événement au chargeur, Erreur de sécurité, Erreur IO et Terminé. L'un d'entre eux sera envoyé par la suite. Lorsque cela se produit, nous devons le transférer dans la classe principale en écoutant et en répartissant. Nous devrions également vérifier s'il y a un problème lors de l'analyse du fichier CSS après l'événement "Complete". Nous allons le vérifier en utilisant "try catch".

fonction privée ioError (e: IOErrorEvent): void // en cas d'erreur IO, dispatchEvent (new Event ("CSS_IOError")); // cette ligne distribue le "CSS_IOError".  fonction privée secError (e: SecurityErrorEvent): void // En cas de problème de sécurité, dispatchEvent (nouvel événement ("CSS_SecurityError")); // cette ligne distribue le "CSS_SecurityError".  fonction privée chargée (e: Event): void // Si le chargement du fichier est terminé, essayez // essayez de l'analyser. sheet = new StyleSheet (); sheet.parseCSS (loader.data); dispatchEvent (new Event ("CSS_Loaded")); // Si l'analyse est correcte, cette ligne distribue "CSS_Loaded".  catch (e: Error) dispatchEvent (nouvel événement ("CSS_ParseError")); // Si l'analyse n'est pas OK, cette ligne affiche "CSS_ParseError"

Avec les gestionnaires d'événements et les répartiteurs, notre classe CSS est terminée. Voici le fichier CSS.as complet:

 le paquet keremk import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.events.SecurityErrorEvent; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; Classe publique CSS étend EventDispatcher private var loader: URLLoader; public var sheet: StyleSheet; fonction publique CSS (): void loader = new URLLoader;  fonction publique load (_req: String): void loader.load (nouvelle URLRequest (_req)); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, chargé);  fonction privée ioError (e: IOErrorEvent): void dispatchEvent (new Event ("CSS_IOError"));  fonction privée secError (e: SecurityErrorEvent): void dispatchEvent (new Event ("CSS_SecurityError")));  fonction privée chargée (e: événement): void try sheet = new StyleSheet (); sheet.parseCSS (loader.data); dispatchEvent (new Event ("CSS_Loaded"));  catch (e: Error) dispatchEvent (nouvel événement ("CSS_ParseError")); 

Étape 13 - Création du XMLLoader

Nous allons commencer notre classe XMLLoader avec "package keremk " et elle étendra également "EventDispatcher".

 package keremk // XMLLoader est dans le dossier keremk. Classe publique XMLLoader étend EventDispatcher fonction publique XMLLoader () loader = nouvel URLLoader; // lorsqu'un XMLLoader est créé, un nouveau chargeur est défini. 

Étape 14 - XMLLoader: Importer des classes Flash

Nous aurons besoin des mêmes classes que pour notre CSS sans la classe "StyleSheet". Ils sont comme suit:

 import flash.events.SecurityErrorEvent; // classes d'événement à écouter et à distribuer. import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; import flash.net.URLLoader; // classes Net pour charger des fichiers XML. import flash.net.URLRequest;

Étape 15 - XMLLoader: Variables

Nous aurons maintenant besoin de 5 variables:

 private var loader: URLLoader; // pour charger le fichier XML private var data: XML; // pour stocker les données de fichier XML afin de les analyser. private var i: uint; // compteur à utiliser lors de l'analyse. private var lenXML: uint; // pour vérifier le nombre de pages en XML. public var pages: Array = []; // pour conserver les pages après l'analyse du code XML.

Étape 16 - XMLLoader: Fonction de chargement

La fonction "load" sera la même qu'avec "CSS.load". Nous allons l'utiliser depuis la classe principale et il devrait être public aussi.

fonction publique load (_req: String): void // function chargera le fichier pour lequel le chemin est donné. loader.load (new URLRequest (_req)); // chemin doit être transformé en URLRequest pour charger le fichier. loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); // Nous allons écouter 3 événements à transférer dans la classe principale. loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, chargé); 

Étape 17 - XMLLoader: gestionnaires d’événements et répartiteurs

Nous avons ajouté 3 écouteurs d'événements au chargeur, Erreur de sécurité, Erreur d'E / S et Terminé. L'un d'entre eux sera envoyé par la suite. Lorsque cela se produit, nous devons le transférer dans la classe principale en écoutant et en répartissant. Nous devrions également vérifier s'il y a un problème lors de l'analyse du fichier XML après l'événement "Complete". Deux événements différents peuvent être envoyés: "XML_Loaded" ou "XML_ParseError". Nous allons le vérifier en utilisant "try catch".

 fonction privée ioError (e: IOErrorEvent): void // en cas d'erreur IO, dispatchEvent (nouvel événement ("XML_IOError")); // cette ligne distribue le "XML_IOError".  fonction privée secError (e: SecurityErrorEvent): void // En cas de problème de sécurité, dispatchEvent (new Event ("XML_SecurityError")); // cette ligne distribue le "XML_SecurityError".  fonction privée chargée (e: Event): void // Si le chargement du fichier est terminé, essayez // essayez de l'analyser. data = new XML (loader.data); // prend les données XML dans "data" lenXML = data.children (). length (); // vérifie le nombre de pages pour (i = 0; i < lenXML; i++) //parses XML data to array pages.push(data.children()[i]);  dispatchEvent(new Event("XML_Loaded"));//if parsing the XML is OK, dispatch "XML_Loaded".  catch (e:Error)  dispatchEvent(new Event("XML_ParseError"));//if something is wrong with XML data, this line dispatches "XML_ParseError".  

Avec les gestionnaires et les répartiteurs, notre classe XMLLoader est terminée. Voici le XMLLoader fini:

package keremk import flash.events.SecurityErrorEvent; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; import flash.net.URLLoader; import flash.net.URLRequest; Classe publique XMLLoader étend EventDispatcher private var loader: URLLoader; données var privées: XML; private var i: uint; var privé lenXML: uint; pages publiques var: Array = []; fonction publique XMLLoader () loader = new URLLoader;  fonction publique load (_req: String): void loader.load (nouvelle URLRequest (_req)); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, chargé);  fonction privée ioError (e: Event): void dispatchEvent (new Event ("XML_IOError"));  fonction privée secError (e: Event): void dispatchEvent (new Event ("XML_SecurityError"));  fonction privée chargée (e: Event): void try data = new XML (loader.data); lenXML = data.children (). length (); pour (i = 0; i < lenXML; i++)  pages.push(data.children()[i]);  dispatchEvent(new Event("XML_Loaded"));  catch (e:Error)  dispatchEvent(new Event("XML_ParseError"));    

Étape 18 - Création de la classe principale

Puisque la classe Main sera dans le dossier racine de notre projet, nous allons commencer à l'écrire avec "package ". Cela étendra "sprite" et nous commencerons notre code dans la fonction "Main":

 package // point d'entrée pour les importations. public class Main étend Sprite // point d'entrée pour vars. public function Main (): void // point d’entrée pour les codes.  // point d'entrée pour des fonctions supplémentaires. 

Étape 19 - Principal: Importation de classes Flash

 import flash.display.Sprite; // La classe principale étendra "Sprite" .Alors, nous aurons besoin de la classe "Sprite". import flash.display.StageAlign; // Nous aurons besoin de "StageAlign" pour aligner le stade. import flash.display.StageScaleMode; // nous aurons besoin de "StageScaleMode" pour gérer le mode d'échelle de l'étape. import flash.events.Event; // Nous aurons besoin de la classe "Event" pour utiliser les événements que nous avons créés dans les classes "XMLLoader" et "CSS". import flash.events.TextEvent; // Nous aurons besoin de "TextEvent" pour utiliser les liens de page dans "htmlText". import flash.text.TextField; // Nous allons créer un "TextField" pour afficher les pages html et y ajouter notre css avec "TextFormat". import flash.text.TextFormat; import keremk.CSS; // Et dans cette classe "Main", nous utiliserons nos classes "CSS" et "XMLloader" que nous avons créées précédemment. importer keremk.XMLLoader;

Étape 20 - Principal: Variables

 private var xml: XMLLoader; // ceci contiendra nos données XML private var css: CSS; // ceci contiendra notre champ var de données StyleSheet: TextField; // nous l'utilisons pour afficher nos pages html private var cssBool: Boolean = false; // ces deux booléens nous diront si nos fichiers CSS et XML sont chargés private var xmlBool: Boolean = false; private var stgW: Number = stage.stageWidth; // ces deux vont vérifier la hauteur et la largeur de la scène. private var stgH: Number = stage.stageHeight; // De cette façon, nous pouvons modifier la largeur et la hauteur de notre HtmlBox à partir d'un fichier html. private var pageNum: int = 0; // ceci définira la page affichée dans HtmlBox. (L'index de tableau commençant à 0, pageNum vaut 0) private var boxBorder: Sprite; // ce sera la bordure de notre HtmlBox. Nous pouvons activer la bordure de TextField mais de cette façon nous pouvons gérer les marges.

Étape 21 - Principal: Fonction principale

La fonction principale sera exécutée automatiquement au démarrage de HtmlBox. Nous devons donc écrire nos codes de démarrage dans cette fonction.

public function Main (): void stage.align = StageAlign.TOP_LEFT; // Ces deux lignes sont facultatives. Je préférerais que la scène reste en haut à gauche et non calibrée. stage.scaleMode = StageScaleMode.NO_SCALE; boxBorder = new Sprite (); // Ceci est notre bordure de htmlbox. Fondamentalement, c'est un rectangle non rempli. Et nous allons créer un nouveau Sprite pour le dessiner. boxBorder.graphics.lineStyle (2, 0xC0C0C0, 1); // épaisseur = 2px, couleur = 0xC0C0C0 (gris), alpha = 1 (100%). Vous pouvez modifier ces valeurs à votre guise. boxBorder.graphics.drawRect (5, 5, stgW - 10, stgH - 10); // margin = 5. Il s’agit de la distance entre la frontière et la scène. addChild (boxBorder); // après avoir créé et dessiné notre frontière, nous devons l'ajouter à la scène. field = new TextField (); // Nous allons créer un nouveau TextField pour afficher les pages HTML. addChild (field); // comme il y a beaucoup de propriétés à définir, nous allons ajouter le champ à la scène en premier. with (field) // après avoir ajouté le "champ" à stage, nous pouvons utiliser "with" pour définir ses propriétés. x = 10; // J'ai défini x et y comme 10 pour créer un espace de 5 pixels entre le champ et la bordure. y = 10; width = stgW-20; // Et la largeur doit être stgW-20. Parce que, si nous voulons créer une distance de 10 pixels entre le champ et la scène, la largeur du champ doit être inférieure à 20 pixels (10 pixels de la gauche + 10 pixels de la droite) à la largeur de la scène. height = stgH-20; // Et nous devrions calculer la hauteur comme la largeur. multiline = true; // le champ doit être multiligne. Parce que nos textes html sont multilignes. selectable = false; // Si vous voulez que votre texte soit sélectionnable, vous pouvez le remplacer par "true". wordWrap = true; // Sans "wordWrap", nos paragraphes seront des lignes simples. condenseWhite = true; // Il s'agit d'une propriété importante qui améliore l'aspect de notre texte. Sans cela, il y aura plus d'espaces partout dans le texte HTML.  // Après avoir créé notre bordure et notre champ de texte, nous pouvons charger nos fichiers. xml = new XMLLoader (); // Nous allons créer un nouveau XMLLoader xml.load ("source.xml"); // et charger notre fichier XML. // Nous devons écouter les événements pour savoir quoi faire ensuite. xml.addEventListener ("XML_Loaded", xmlDone); // Si nous capturons "XML_Loaded", nous allons continuer à créer HtmlBox. xml.addEventListener ("XML_IOError", error); // Je ne créerai qu'une seule fonction pour toutes les erreurs. xml.addEventListener ("XML_SecurityError", erreur); // Ainsi, tous les événements d'erreur iront à cette fonction "erreur" xml.addEventListener ("XML_ParseError", erreur); css = new CSS (); // Nous allons créer un nouveau CSS css.load ("styles.css"); // et charger notre fichier CSS. // les événements css sont à peu près les mêmes avec les événements xml. css.addEventListener ("CSS_Loaded", cssDone); // Si nous capturons "CSS_Loaded", nous allons continuer à créer HtmlBox. css.addEventListener ("CSS_IOError", error); // Et tous les événements d'erreur vont également à la fonction "error". css.addEventListener ("CSS_SecurityError", erreur); css.addEventListener ("CSS_ParseError", erreur); 

Étape 22 - Principal: Fonction "erreur"

Puisque toutes les erreurs vont à la fonction "erreur", nous devons les organiser avec "commutateur de cas". Nous allons vérifier quelle erreur s'est produite et écrire le texte requis dans "champ". Dans cette étape, je ne montrerai que deux erreurs. Vous verrez toutes les erreurs dans la classe principale terminée à l'étape 25.

 erreur de fonction privée (e: événement): void commutateur (e.type) // nous vérifierons le type de l'erreur qui s'est produite, cas "XML_IOError": // si l'erreur est "XML_IOError", nous écrirons le Texte requis sur "XML_IOError" dans "champ". field.htmlText = '

 XML IO ERROR
Veuillez contrôler votre chemin XML!
'break; // Si error est "XML_IOError", nous interrompons l'opération et arrêtons le "switch case". case "XML_SecurityError": field.htmlText = '

 XML SECURITY ERROR
Veuillez contrôler vos fichiers de politique!
' Pause; 

Étape 23 - Principale: "Terminé" Fonctions

Nous allons créer trois fonctions "Terminé". "xmlDone", "cssDone" et "allDone". "xmlDone" et "cssDone" seront exécutés une fois nos fichiers chargés correctement et ils informeront "allDone". Lorsque les fichiers css et xml sont chargés avec succès, "allDone" ajoute la feuille de style à "field" et écrit la première page.

 fonction privée cssDone (e: Event): void cssBool = true; // nous allons rendre cssBool "true". Parce que le fichier CSS est chargé avec succès. allDone (); // Et exécutez allDone.  fonction privée xmlDone (e: Event): void xmlBool = true; // nous ferons xmlBool "true". Parce que le fichier XML est chargé avec succès. allDone (); // Et exécutez allDone.  fonction privée allDone (): void if (cssBool && xmlBool) // si les fichiers css et xml ont été chargés avec succès, field.styleSheet = css.sheet; // nous allons définir nos styles sur "field". field.htmlText = xml.pages [pageNum]; // nous écrirons la première page dans le champ. addEventListener (TextEvent.LINK, textEvent); // Et nous ajouterons un écouteur d'événements pour les événements de liens qui seront distribués par htmlText. 

Étape 24 - Principal: Fonction "textEvent"

Dans cette fonction, nous allons vérifier les textes d'événement "next" et "prev".

 fonction privée textEvent (e: TextEvent): void if (e.text == "next") // Si le lien "next" est cliqué, ++ pageNum; // nous augmenterons le champ pageNum.htmlText = xml .pages [pageNum]; // et écrivez la nouvelle page dans "champ".  if (e.text == "prev") // Si le lien "prev" est cliqué, --pageNum; // nous allons réduire le champ pageNum.htmlText = xml.pages [pageNum]; // et écrire la nouvelle page à "champ". 

Étape 25 - Principal: Terminé

Voici la classe principale finie:

 package import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.TextEvent; import flash.text.TextField; import flash.text.TextFormat; importer keremk.CSS; importer keremk.XMLLoader; classe publique Main étend Sprite private var xml: XMLLoader; private var css: CSS; champ var privé: TextField; private var cssBool: Boolean = false; private var xmlBool: Boolean = false; private var stgW: Number = stage.stageWidth; private var stgH: Number = stage.stageHeight; var privée PageNum: int = 0; var privéBorder: Sprite; fonction publique Main (): void stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; boxBorder = new Sprite (); boxBorder.graphics.lineStyle (2, 0xC0C0C0, 1); boxBorder.graphics.drawRect (5, 5, stgW - 10, stgH - 10); addChild (boxBorder); field = new TextField (); addChild (champ); avec (champ) x = 10; y = 10; width = stgW-20; hauteur = stgH-20; multiline = true; sélectionnable = faux; wordWrap = true; condenseWhite = true;  xml = new XMLLoader (); xml.load ("source.xml"); xml.addEventListener ("XML_Loaded", xmlDone); xml.addEventListener ("XML_IOError", erreur); xml.addEventListener ("XML_SecurityError", erreur); xml.addEventListener ("XML_ParseError", erreur); css = new CSS (); css.load ("styles.css"); css.addEventListener ("CSS_Loaded", cssDone); css.addEventListener ("CSS_IOError", erreur); css.addEventListener ("CSS_SecurityError", erreur); css.addEventListener ("CSS_ParseError", erreur);  erreur de fonction privée (e: événement): void commutateur (type e) case "XML_IOError": field.htmlText = '

 XML IO ERROR
Veuillez contrôler votre chemin XML!
' Pause; case "XML_SecurityError": field.htmlText = '

 XML SECURITY ERROR
Veuillez contrôler vos fichiers de politique!
' Pause; case "XML_ParseError": field.htmlText = '

 XML PARSE ERROR
Veuillez déboguer votre fichier XML!
' Pause; case "CSS_IOError": field.htmlText = '

 CSS IO ERROR
Veuillez contrôler votre chemin CSS!
' Pause; case "CSS_SecurityError": field.htmlText = '

 CSS SECURITY ERROR
Veuillez contrôler vos fichiers de politique!
' Pause; case "CSS_ParseError": field.htmlText = '

 CSS PARSE ERROR
Veuillez déboguer votre fichier CSS!
' Pause;  fonction privée cssDone (e: Event): void cssBool = true; terminé();  fonction privée xmlDone (e: Event): void xmlBool = true; terminé();  fonction privée allDone (): void if (cssBool && xmlBool) field.styleSheet = css.sheet; field.htmlText = xml.pages [pageNum]; addEventListener (TextEvent.LINK, textEvent);  fonction privée textEvent (e: TextEvent): void if (e.text == "next") ++ pageNum; field.htmlText = xml.pages [pageNum];  if (e.text == "prev") --pageNum; field.htmlText = xml.pages [pageNum]; 

Étape 26 - Compiler dans FlashDevelop

Nous avons fini d'écrire notre code, il est maintenant temps de le compiler. Si vous avez créé votre projet dans FlashDevelop, il vous suffit de cliquer sur "F5" pour le vérifier et sur "F8" pour construire le projet. Avant cela, vous voudrez peut-être modifier vos paramètres de sortie. Pour ce faire, allez dans Projet> Propriétés…

Dans le panneau des propriétés, vous pouvez modifier:

• "Cible" -> version de Flash Player
• "Fichier de sortie" -> Nom et chemin du fichier de sortie (Notre chemin du fichier de sortie est "bin /")
• "Dimensions" -> Largeur et hauteur du fichier de sortie
• "Couleur de fond" -> Couleur de fond du fichier de sortie (j'ai utilisé du noir "# 000000")
• "Framerate" -> Framerate du fichier de sortie (comme il n'y a pas de frame dans notre projet, j'ai utilisé 30fps par défaut.)
• "Test de la vidéo" -> Comment lire une vidéo de test en appuyant sur "F5"

Après l'opération "Build Project", vous pouvez utiliser le dossier htmlBox du dossier bin. Si vous envisagez de le déplacer dans un autre dossier, vous devez déplacer les fichiers "htmlBox.swf", "source.xml" et "styles.css" dans le même dossier. Si vous prévoyez d'utilise