Construire un livre d'or dynamique avec XML et ActionScript 3.0

Les livres d'or sont une excellente chose pour améliorer l'expérience en ligne de vos téléspectateurs. La possibilité pour le téléspectateur de vous parler et de parler à d’autres personnes, de répondre aux questions que vous avez posées, de commenter votre travail ou tout simplement de socialiser signifie qu’un livre d’or est indispensable pour la plupart des sites Web. Voyons comment créer notre propre livre d'or avec ActionsScript 3.0, XML et PHP.


introduction

Je peux penser à deux manières principales d’alimenter un livre d’or; la base de données MYSQL la plus utilisée, ou le type XML le moins commun. Ils utilisent tous deux des scripts côté serveur pour fonctionner. Cependant, l’avantage de la version XML est que vous n'avez pas à vous soucier de savoir si votre hôte prend en charge MYSQL et vous n'avez pas non plus à programmer 3 versions différentes. langues. Alors, que gagnerez-vous à la lecture de ce tutoriel? Je vous entends demander?

  • Vous apprendrez à programmer dans ActionScript 3.0 (ce qui m'a pris longtemps à apprendre…)
  • Vous apprendrez à extraire des données d'un fichier XML et à les convertir en tableaux pour fonctionner dans Flash..
  • Vous apprendrez à utiliser ces tableaux pour renseigner le champ de texte..
  • Vous apprendrez à programmer des boutons et une barre de défilement.
  • Enfin, vous apprendrez également à convertir du texte en XML et l'envoyer dans un fichier php où il sera écrit dans le fichier XML..

Tout à fait une bouche pleine! Commençons.

Étape 1 - Mise en route

Vous devez déjà savoir comment ouvrir le flash, ou du moins j'espère le faire… Vous pouvez configurer le flash comme bon vous semble, il n'y a pas d'exigences spécifiques pour la fréquence d'images ou les dimensions de la scène, mais assurez-vous de l'avoir défini sur "Action Script". 3,0 ". Si vous voulez aller de l'avant et me copier mot à mot, je vais vous montrer comment le mien est mis en place (c'est gentil).

Étape 2 - Styliser

Comme vous pouvez le constater sur l'image ci-dessous, j'ai un talent créatif fantastique! C’est à ce moment-là que nous concevons le livre d’invités ou, à l’avenir, un ordinateur ou un téléphone invité. Je suis sûr que vous ferez un meilleur travail pour rendre le vôtre plus professionnel que le mien, mais pour ceux qui débutent en flash, je vais rapidement vous expliquer comment j'ai créé mon design unique..

Sélectionnez l'outil "Rectangle", cliquez sur "Propriétés", définissez le "Trait" sur "3" et le "Rayon du coin" sur "10". Puis cliquez et faites glisser pour créer votre rectangle. Faites-en un autre plus petit dans une couleur différente, c'est ici que les messages seront affichés. Sélectionnez la nouvelle forme et appuyez sur "F8" pour la convertir en clip. Ensuite, allez dans "Filtre" et appliquez une "Ombre portée". Ensuite, tracez un autre rectangle sur le côté; c'est là que les champs de saisie iront.

Étape 3 - Chargement du XML

Nous nous aventurons donc pour la première fois dans l'inconnu! Commencez par créer un nouveau fichier avec l'extension ".xml". Ensuite, à l'intérieur, écrivez ceci:

  

Enregistrez le fichier sous "messages.xml" dans le même dossier que votre fichier flash. Maintenant, de retour en flash, créez un nouveau calque appelé "Actions" et appuyez sur "F9" pour faire apparaître le "Panneau Actions". Ce sera beaucoup plus bénéfique pour vous si vous tapez le code que je vous donne à la main plutôt que de le copier et le coller, donc tapez à la main:

 var urlRequest: URLRequest = new URLRequest ("messages.xml"); var urlLoader: URLLoader = new URLLoader (); urlLoader.addEventListener (Event.COMPLETE, fileLoaded); urlLoader.load (urlRequest);

Ce bit de code établit une variable appelée "urlRequest" qui contient le chemin d'accès à notre fichier ".xml". Il crée ensuite une autre variable appelée "urlLoader" qui sera utilisée pour charger notre fichier. "AddEventListener" indique à Flash d'attendre que "l'URL" ait été chargé avant d'exécuter la fonction "fileLoaded". La dernière ligne dit simplement à "urlLoader" de charger "urlRequest" qui est notre fichier ".xml".

 var myXML: XML = new XML (); myXML.ignoreWhitespace = true; var xmlList: XMLList;

Ces lignes créent une nouvelle variable appelée "myXML" qui stockera toutes les données de notre fichier ".xml". Il indique ensuite à la variable "ignoreWhitespace", ce qui ne fait pas grand chose, mais cela aide à la validation. La dernière ligne crée une variable appelée "xmlList" qui stockera les messages et les informations que nous extrairons dans des tableaux.

Étape 4 - Tableaux

 var arrayName: Array = new Array (); var arrayTitle: Array = new Array (); var arrayDate: Array = new Array (); var arrayFull: Array = new Array ();

Ce bit de code établit les tableaux qui contiendront toutes les données. Pour le moment, il serait préférable de garder le vôtre identique au mien afin d'éviter toute erreur plus tard. Vous devez noter que "Full" est ce que j’utilise pour représenter le long message que l’utilisateur écrit..

 function fileLoaded (event: Event): void myXML = XML (event.target.data); xmlList = myXML.children ();

C'est la fonction "fileLoaded" qui est appelée lorsque le fichier ".xml" a été chargé. Dans la fonction, nous donnons à la variable "myXML" les données du fichier ".xml". Nous donnons ensuite à "xmlList" les données extraites de "myXML", qui sont tout sauf le détenteur "messages" que nous avons écrit précédemment. De toute évidence, il n'y a rien d'autre à part cela, donc "xmlList" sera vide.

 pour (var i: int = 0; i 

C'est la partie principale de la fonction. Il parcourt les données stockées dans "xmlList" et les place dans différents tableaux. Le code commence par une boucle "pour", qui indique: alors que la variable "i" est inférieure à "xmlList.length () ', exécutez ce code." XmlList.length () "correspond au nombre de personnes ayant envoyé des messages. , donc s'il est égal à 5, ce code sera exécuté 5 fois.

Ensuite, pour chaque attribut (nom, titre, date et message), nous créons une "variable de chaîne" égale à l'attribut correspondant dans la "xmlList". La première fois que le code est exécuté, à condition qu'il y ait quelques entrées, "i" sera égal à 1 et "xmlName" sera égal à celui de chaque nom figurant en premier dans "xmlList". La deuxième fois qu'il passe, "i" sera égal à 2 et "xmlName" sera égal à quel que soit le nom est le deuxième dans "xmlList".

Ce qui se passe alors, c'est que chacune des variables est ajoutée aux tableaux. La valeur de "xmlName" sera ajoutée à "arrayName" par la méthode ".push". Cela signifie qu'à mesure que le code est exécuté, tous les noms stockés dans "xmlList" sont ajoutés au tableau. La même chose s'applique pour le titre, la date et le plein.

 if (i == xmlList.length () - 1) updateText (); 

Ceci est la partie finale de la fonction. Il indique que si "i" est jamais égal au nombre total d'entrées - 1, exécutez la fonction "updateText".

Étape 5 - Affichage des messages

Maintenant, après ce morceau de codage exténuant, nous arrivons à quelque chose d'un peu plus facile, dit-il…

Sur un nouveau calque appelé "textBox", utilisez "l'outil Texte" pour créer un champ "Texte de saisie" sur le rectangle plus clair. Assurez-vous de sélectionner la case "Rendre le texte en HTML" sous "Propriétés> Caractère" et de lui donner un "Nom d'instance" de "messageText"..

Retournez à la fenêtre des actions et sous tout le code, tapez ce qui suit:

 messageText.htmlText = "Soyez le premier à poster!"; var maximumMessages: Number = 5; var currentMessages: Number = 0; function updateText () messageText.htmlText = "";

La première ligne est celle où personne n'a rien écrit. La variable "maximumMessages" est la quantité de messages que nous voulons afficher en même temps. "CurrentMessages" est le dernier message qui a été affiché dans le champ de texte. Ensuite, nous démarrons la fonction qui est appelée après la création des tableaux. La première chose à faire est de vider le champ de texte car nous ne voulons pas toujours que ce message soit au sommet..

 pour (var i = currentMessages; iPrénom: "+ arrayName [i]); messageText.htmlText + = ("Titre: "+ arrayTitle [i]); messageText.htmlText + = ("Rendez-vous amoureux: "+ arrayDate [i]); messageText.htmlText + = ("Message: "+ arrayFull [i]); messageText.htmlText + = ("… "); currentMessages = i;

Ceci est une autre boucle "pour". Cette fois, nous l’utilisons pour renseigner le champ "messageText". Ici, nous fixons "i" à "currentMessages", ce qui pour le moment est égal à 0. Si "i" est inférieur à "maximumMessages", égal à 5, nous exécutons ce code. Il courra donc 5 fois.

La première fois qu'il s'exécutera, il ajoutera "Nom:" à "messsageText", puis le nom figurant dans le tableau arrayName à la place de "i", qui sera égal à 0. Il le fera pour le titre, la date et complet avant se terminant par une ligne de points pour séparer les messages. La deuxième fois, "i" en sera un, ce qui ajoutera plus de texte avec les résultats après le premier ensemble dans les tableaux. A la fin, nous définissons "currentMessages" sur "i".

Étape 6 - Composants

À ce stade, vous vous en tirez probablement bien si vous n’avez pas mal à la tête. Alors faisons quelque chose de facile. Allez dans "Fenêtre> Composants" et faites glisser deux "Boutons" et un "UIScrollBar" dans la liste. Positionnez les comme ceci:

Ensuite, allez dans "Fenêtre> Inspecteur de composants" et avec le bouton gauche sélectionné, cliquez sur "étiquette" et renommez-le "Précédent". Avec le bouton à droite, renommez-le "Suivant". Définissez ensuite le nom d'occurrence du bouton "Précédent" comme "prevBt", le bouton "Suivant" comme "nextBt" et le nom d'instance "UIScrollBar" comme "scroller"..

Maintenant, sous le "currentMessage = i;" morceau de code écrire ce qui suit:

 scroller.scrollTarget = messageText;

Cela indique à "UIScrollBar" d'agir en tant que scroller pour "messageText", au cas où il y aurait trop de mots pour tenir dans l'espace désigné. Nous devons maintenant vérifier si les boutons sont enfoncés, écrivez donc sous tout le code:

 nextBt.addEventListener (MouseEvent.MOUSE_UP, nextFunc); prevBt.addEventListener (MouseEvent.MOUSE_UP, prevFunc);

Cela ajoute un écouteur pour voir si le curseur de la souris a été relâché sur les boutons (s’ils ont été enfoncés) et s’ils le font, il appelle une fonction que nous écrirons à l’étape suivante..

Étape 7 - Codage des boutons

Si vous avez appuyé sur le bouton "Suivant", nous souhaitons que le "messageTexte" supprime son contenu et charge les messages suivants. Si vous appuyez sur le bouton "Précédent", nous souhaitons charger les messages précédents. Au bas de tout le code, écrivez:

 function nextFunc (event: MouseEvent) messageText.htmlText = ""; maximumMessages + = 5; updateText (); prevBt.enabled = true; 

C'est la fonction "Suivant". Lorsqu'il est déclenché, il efface le champ de texte, ajoute 5 à "maximumMessages", exécute la fonction "updateText" et active le bouton "Précédent". En ajoutant 5 à "maximumMessages" et en exécutant la fonction "updateText", il charge les 5 prochains messages dans la zone de texte car maintenant, "maximumMessages" est égal à 10 et "currentMessage" est toujours égal à 5 ​​à partir de la dernière fois que la fonction a couru. Par conséquent, cette fois, le champ de texte affichera les 5 prochains messages dans les tableaux..

 fonction prevFunc (event: MouseEvent) messageText.htmlText = ""; maximumMessages- = 5; currentMessages- = 10; nextBt.enabled = true; updateText (); if (currentMessages<=5)  prevBt.enabled=false;  

C'est la fonction du bouton "Précédent". Cela efface à nouveau le champ de texte, il soustrait également "maximumMessages" de 5 et "currentMessages" de 10. Ceci permet à la fonction "updateText" d'afficher les 5 entrées précédentes. Il active également le bouton "Suivant". Si "currentMessage" est inférieur ou égal à 5, le bouton "Précédent" est désactivé afin que l'utilisateur ne puisse pas afficher de fausses informations. il n'y a pas de message inférieur à 0.

Juste sous "function updateText () ", écrivez:

 if (nom_ array.length <= maximumMessages)  maximumMessages = arrayName.length; nextBt.enabled = false;  if (currentMessages < 0)  currentMessages = 0; maximumMessages = 5; nextBt.enabled = true; 

Le premier "if" vérifie si le nombre total de messages est inférieur ou égal au maximum. Si tel est le cas, nous affichons la dernière entrée et ne souhaitons pas que l'utilisateur puisse cliquer sur le bouton "Suivant". Nous la désactivons donc. Cela fait aussi que "maximumMessages" est égal à la quantité totale de messages afin que nous n'affichions pas d'informations inutiles supplémentaires.

Le second "if" vérifie si nous sommes entrés dans des nombres moins. Si c'est le cas, il revient par défaut au début et affiche les 5 premières entrées. Aussi après ce code:

 if (i == xmlList.length () - 1) updateText (); 

ajoutez ce qui suit:

 if (i> 4) nextBt.enabled = true; 

Ceci vérifie s'il y a plus de 5 entrées. Si c'est le cas, nous activons le bouton "Suivant". Rappelez-vous qu'il s'agit de 4 car "i" commence à 0 et non à 1. Enfin, en haut, entrez les informations suivantes:

 nextBt.enabled = false; prevBt.enabled = false;

Ceci désactive les deux boutons.

Étape 8 - Premier test

Ok, ouvrez votre fichier ".xml" et tapez:

  Chris Bonjour 7ème c'est très compliqué = - ( 

Tapez-le entre les balises que nous avons écrites plus tôt, de sorte que l'ensemble du fichier ".xml" ne contienne que:

   Chris Bonjour 7ème c'est très compliqué = - (  

Enregistrez le ".xml", puis testez le fichier flash et vous devriez voir ceci:

Étape 9 - Soumettre des boîtes

Maintenant que la première partie fonctionne, sans pause, passons à la deuxième partie.

Il est temps de créer la zone que l'utilisateur remplit pour envoyer un message. Utilisez l'outil "Texte" et créez 4 "Champs de texte statique" disant "Publier un message", "Nom:", "Titre:" et "Message:"..

Créez ensuite 3 "Champs de saisie de texte" et placez-en un à côté de chaque élément à renseigner. Assurez-vous que la zone de saisie "Message:" est plus grande que les autres..

Sélectionnez le champ de texte dans lequel l'utilisateur entrera son nom et attribuez-lui un "Nom d'instance" ou "NomEntrée". Faites cela pour le titre et les boîtes de message, en donnant leurs noms d'instance "inputTitle" et "inputFull". Sur mes trois cases, j'ai sélectionné les cases "Sélectionnable" et "Afficher la bordure autour du texte". Ensuite, ouvrez à nouveau le panneau "Composants" et faites glisser un autre bouton. Cette fois, ouvrez le panneau "Inspecteur de composants" et remplacez son "étiquette" par "Soumettre" et son "activé" par faux. Donnez-lui un nom d'instance "submitBt".

Étape 10 - Configuration des variables

 inputName.text = ""; var newName: String = ""; inputTitle.text = ""; var newTitle: String = ""; inputFull.text = ""; var newFull: String = "";

Placez ce code sous tous vos autres codes. Cela signifie que chacun des "champs de saisie" créés à l'étape précédente est vide. C'est aussi créer une variable pour chaque élément et le spécifier en tant que "chaîne" avec la valeur rien.

 function onEnterFrame (ev: Event): void if (inputName.text! = "" && inputTitle.text! = "" && inputFull.text! = "") submitBt.enabled = true; 

Placez cette fonction après tout le code. Cette fonction vérifie que tous les "champs de saisie" contiennent du texte. "! =" signifie n'est pas égal et "&&" dit "et". Donc, la fonction dit: si tous les "champs de saisie" ne sont pas vides (ce qui signifie que l'utilisateur les a renseignés), activez le bouton "submitBt". Maintenant, nous devons pouvoir appeler cette fonction tout le temps, nous avons donc besoin d'un autre auditeur..

 addEventListener (Event.ENTER_FRAME, onEnterFrame);

Cela signifie que chaque fois que Flash entre dans le cadre (ce qui pour moi est 30 fois par seconde), appelez la fonction "onEnterFrame".

Étape 11 - Date

Maintenant que le bouton d'envoi est actif, nous devons vérifier s'il a été cliqué. Nous avons donc besoin d'un autre écouteur..

 submitBt.addEventListener (MouseEvent.MOUSE_UP, sendData);

Une fois libéré, cet écouteur appellera la fonction "sendData", nous devons donc maintenant écrire la fonction.

 function sendData (event: MouseEvent): void var dateToday: Date = new Date (); var thismonth: uint = dateToday.getMonth (); var month: Array = new Array ('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Septembre' ','Décembre'); var dateStr: String = (dateToday.getDate () + "" + mois [thismonth] + "" + dateToday.getFullYear ());

La première ligne ouvre la fonction. Nous avons ensuite défini "dateToday" en tant que variable et si je trace ensuite immédiatement "dateToday", le message "Fri May 5 10:07:32 GMT + 0100 2009".

La ligne suivante définit la variable "thismonth" comme le nombre égal au mois en cours stocké dans "dataToday" Comme nous sommes actuellement en mai, qui est le cinquième mois, si je suivais "thismonth", la réponse serait 4, car commence à 0, pas 1. Nous créons ensuite un nouveau tableau, stockant tous les mois dans l'ordre. Puis le "dateStr" va stocker la date finale qui sera affichée sur le livre d'or.

"dateToday.getDate ()" extrait l'entier du jour actuel, donc pour le 5, il en extraira 5. Ensuite, nous insérons la valeur du tableau "month" qui est égal à "thismonth", de sorte qu'il permute un nombre pour une chaîne du mois. Ensuite, "getFullYear ()" extrait l'année en cours au format à 4 chiffres. Donc, si nous traçons maintenant "dateStr", nous obtenons le "5 mai 2009".

Étape 12 - Créer un nouveau XML

Maintenant que l'utilisateur a cliqué sur Envoyer, nous devons transformer les détails au format XML pour pouvoir les écrire dans le fichier ".xml"..

 newName = inputName.text; newTitle = inputTitle.text; newFull = inputFull.text;

C'est en tournant les variables que nous avons définies précédemment pour égaler ce que l'utilisateur a entré dans les cases.

 var newItem: XML = XML (""+ newName +""+ newTitle +""+ dateStr +""+ newFull +"");

Ce morceau de code intimidant crée une nouvelle variable appelée "newItem" qui va stocker des données XML. Nous le configurons ensuite pour qu'il corresponde à une chaîne au format XML. Nous commençons la chaîne avec ""qui va contenir tous les détails pour l'utilisateur. Nous insérons ensuite les variables Nom, Titre, Date et Complet que nous avons créées auparavant, en le fermant avec"".

 myXML.appendChild (newItem);

Nous utilisons maintenant "appendChild" pour ajouter un "newItem" au "myXML" qui stocke toutes les informations du fichier xml.

Étape 13 - Envoi du XML.

Maintenant que "myXML" est mis à jour avec le nouveau message, nous devons l'envoyer à php.

 var request: URLRequest = new URLRequest ("messages.php"); request.data = myXML; request.contentType = "text / xml"; request.method = URLRequestMethod.POST;

Ici, nous créons une nouvelle variable appelée "request" qui contient l’emplacement de notre fichier php. Nous n'avons pas encore créé ce fichier, mais je peux vous dire comment nous l'appellerons (chanceux!). Nous allons l'enregistrer dans le même dossier que tous nos fichiers et l'appeler "messages.php". La ligne suivante indique à la "demande" qu'elle envoie les informations contenues dans "myXML". Nous lui disons alors que ces données sont au format "XML" et que nous utilisons "post" pour les envoyer..

 var loader: URLLoader = new URLLoader (); loader.load (demande); loader.addEventListener (Event.COMPLETE, loaderDone); 

Nous créons maintenant un nouveau "chargeur" ​​pour gérer l'envoi des données, comme précédemment. Nous ajoutons un écouteur pour vérifier si les données ont été envoyées et si oui, il déclenche la fonction "loaderDone".

Étape 14 - Actualiser le flash.

Avant de passer à php, il y a une dernière chose à faire dans flash:

 function loaderDone (evt: Event): void Nom de tableau = []; arrayTitle = []; arrayDate = []; arrayFull = []; inputName.text = ""; inputTitle.text = ""; inputFull.text = ""; submitBt.enabled = false; maximumMessages = 5; currentMessages = 0; messageText.htmlText = ""; urlLoader.load (urlRequest); 

Cette fonction efface les tableaux, efface les champs de texte de saisie et efface les messages de la boîte de message. Il dit également à "urlLoader" de recharger le fichier XML. Cela déclenchera ensuite le retour du livre d'or au début, rechargera le fichier xml contenant notre nouvelle entrée, remplira les tableaux et affichera à nouveau les 5 premiers messages..

Étape 15 - Passer à PHP

Maintenant que nous avons terminé en flash, sauvegardez-le et publiez la nouvelle version. Ouvrez un nouveau fichier php appelé "messages.php".

 

Ce code crée la variable "xml" et lui attribue la valeur des données envoyées par flash. Il crée ensuite la variable "fichier" qui stocke l'emplacement du fichier XML. "fopen" indique à php d'ouvrir le fichier, "fwrite" utilise ensuite "fichier" pour écrire le contenu de la variable "xml". "fclose" ferme ensuite le fichier XML avec le nouveau message stocké en toute sécurité, prêt à être lu à nouveau par le livre d'or flash.

Conclusion

Enfin, téléchargez les fichiers sur votre serveur! Rappelez-vous que cela ne fonctionnera pas sur votre disque dur à moins que php ne soit installé. Localisez le livre d'or et voyez si cela fonctionne, espérons-le! Merci pour votre temps, j'espère que vous avez appris quelque chose d'utile!