Cree un libro de visitas dinámico con XML y ActionScript 3.0

Los libros de visitas son una gran cosa para mejorar la experiencia en línea que reciben sus espectadores. La capacidad del espectador para hablar con usted y con otras personas, responder a las preguntas que ha planteado, comentar sobre su trabajo o simplemente para socializar significa que un libro de visitas es una necesidad para la mayoría de los sitios web. Veamos cómo podemos construir nuestro propio libro de visitas con ActionsScript 3.0, XML y PHP..


Introducción

Hay dos formas principales en las que puedo pensar para alimentar un libro de visitas; la base de datos MYSQL más comúnmente utilizada, o el tipo XML menos común. Ambos confían en que las secuencias de comandos del lado del servidor funcionen; sin embargo, la ventaja que veo al usar la versión XML es el simple hecho de que no tiene que preocuparse de si su host admite MYSQL y tampoco tiene que programar en 3 versiones diferentes. idiomas Entonces, ¿qué obtendrás al leer este tutorial? Te oigo preguntar?

  • Aprenderás a programar en ActionScript 3.0 (lo que me tomó mucho tiempo para aprender ...)
  • Aprenderá cómo obtener datos de un archivo XML y convertirlos en matrices para trabajar dentro de Flash.
  • Aprenderá cómo usar estos arreglos para completar el campo de texto..
  • Aprenderás a programar botones y una barra de desplazamiento..
  • Finalmente, también aprenderá cómo convertir texto en xml y enviarlo a un archivo php donde se escribirá en el archivo xml..

¡Bastante boca llena! Empecemos.

Paso 1 - Comenzando

Ya debería saber cómo abrir el flash, o al menos espero que lo haga ... Puede configurar el flash como lo desee, no hay requisitos específicos para la velocidad de fotogramas o las dimensiones del escenario, sin embargo, asegúrese de haberlo configurado en "Action Script 3.0 ". Si quieres seguir adelante y copiarme palabra por palabra, te mostraré cómo está configurado el mío (qué bueno).

Paso 2 - Estilizar

Como puedes ver en la imagen de abajo, ¡tengo habilidades creativas fantásticas! Este es el punto en el que diseñamos el libro de visitas o nos mudamos a la era moderna, una computadora o un teléfono para invitados. Estoy seguro de que harás un mejor trabajo para hacer que el tuyo se vea más profesional que el mío, pero solo para aquellos que son nuevos en Flash, rápidamente analizaré cómo creé mi diseño único.

Seleccione la "herramienta Rectángulo", haga clic en "Propiedades", establezca "Trazo" en "3" y el "Radio de esquina" en "10". Luego haga clic y arrastre para crear su rectángulo. Haga otro más pequeño encima de eso en un color diferente, aquí es donde se mostrarán los mensajes. Seleccione la nueva forma y presione "F8" para convertirla en un Clip de película. Luego, vaya a "Filtro" y aplique una "Sombra". Luego dibuja otro rectángulo hacia el lado; aquí es donde irán los campos de entrada.

Paso 3 - Cargando el XML

¡Así que nos aventuramos en lo desconocido por primera vez! Comience creando un nuevo archivo con la extensión ".xml". Luego dentro de eso escribe lo siguiente:

  

Guarde el archivo como "messages.xml" en la misma carpeta que su archivo flash. Ahora, de vuelta en flash, cree una nueva Capa llamada "Acciones" y presione "F9" para abrir el "Panel de Acciones". Será mucho más beneficioso para usted si escribe el código que le entrego a mano en lugar de copiarlo y pegarlo, así que escriba a mano:

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

Este bit de código está configurando una variable llamada "urlRequest" que mantiene la ruta de acceso a nuestro archivo ".xml". Luego crea otra variable llamada "urlLoader" que se usará para cargar nuestro archivo. El "addEventListener" le dice a flash que espere hasta que el "url" se haya cargado antes de ejecutar la función "fileLoaded". La última línea simplemente le dice al "urlLoader" que cargue "urlRequest", que es nuestro archivo ".xml".

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

Estas líneas crean una nueva variable llamada "myXML" que almacenará todos los datos de nuestro archivo ".xml". Luego le dice a la variable que "ignoreWhitespace" que no hace mucho, pero ayuda con la validación. La última línea crea una variable llamada "xmlList" que almacenará los mensajes y la información que extraeremos en matrices.

Paso 4 - Arreglos

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

Este bit de código está configurando los arreglos que contendrán todos los datos. Por ahora, sería mejor mantener el tuyo igual que el mío para que no recibas ningún error más adelante. Debe tener en cuenta que "Completo" es lo que he usado para representar el mensaje largo que el usuario escribe..

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

Esta es la función "fileLoaded" que se llama cuando se ha cargado el archivo ".xml". En la función le damos a la variable "myXML" los datos del archivo ".xml". Luego le damos a "xmlList" los datos eliminados de "myXML", que es todo excepto el titular de "mensajes" que escribimos anteriormente. Obviamente, no hay nada más aparte de eso, por lo que "xmlList" estará vacío.

 para (var i: int = 0; i 

Esta es la parte principal de la función. Recorre los datos almacenados en "xmlList" y los coloca en diferentes arreglos. El código comienza con un bucle "for", que dice: mientras que la variable "i" es más pequeña que "xmlList.length () ', ejecute este código." XmlList.length () "será la cantidad de personas que hayan enviado mensajes. , entonces si es igual a 5, este código se ejecutará 5 veces.

Luego, para cada atributo (nombre, título, fecha y mensaje) creamos una "Variable de cadena" igual al atributo correspondiente dentro de la "xmlList". La primera vez que se ejecuta el código, siempre que haya algunas entradas, "i" será igual a 1 y "xmlName" será igual a cada nombre que aparezca primero en "xmlList". La segunda vez que pase, "i" será igual a 2 y "xmlName" será igual a cada nombre que sea segundo en "xmlList".

Lo que sucede entonces es que cada una de las variables se agrega a las matrices. El valor de "xmlName" se agregará a "arrayName" mediante el método ".push". Esto significa que a medida que se ejecuta el código, todos los nombres que están almacenados en "xmlList" se agregan a la matriz. Lo mismo se aplica para título, fecha y completo..

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

Esta es la parte final de la función. Indica que si "i" es igual a la cantidad total de entradas - 1, ejecute la función "updateText".

Paso 5 - Mostrando los mensajes

Ahora, después de esa ardua pieza de codificación, llegamos a algo un poco más fácil, dice ...

En una nueva capa llamada "TextBox" use la "Herramienta de texto" para crear un campo de "Texto de entrada" sobre el rectángulo más claro. Asegúrese de seleccionar el cuadro "Procesar texto como HTML" en "Propiedades> Carácter" y dele un "Nombre de instancia" de "mensajeTexto".

Regrese a la ventana de acciones y debajo de todo el código escriba lo siguiente:

 messageText.htmlText = "¡Sé el primero en publicar!"; var máximo Mensajes: Número = 5; var currentMessages: Number = 0; function updateText () messageText.htmlText = "";

La primera línea es en caso de que nadie haya escrito nada. La variable "maximumMessages" es la cantidad de mensajes que queremos que se muestren al mismo tiempo. Los "mensajes actuales" es el último mensaje que se ha mostrado en el campo de texto. Luego comenzamos la función que se llama después de que se hayan creado las matrices. Lo primero que hace esto es borrar el campo de texto ya que no siempre queremos que ese mensaje esté en la parte superior.

 para (var i = currentMessages; iNombre: "+ arrayName [i]); messageText.htmlText + = ("Título: "+ arrayTitle [i]); messageText.htmlText + = ("Fecha: "+ arrayDate [i]); messageText.htmlText + = ("Mensaje: "+ arrayFull [i]); messageText.htmlText + = (" ... "); currentMessages = i;

Este es otro bucle "para". Esta vez lo estamos utilizando para rellenar el campo "messageText". Aquí estamos configurando "i" para que sea igual a "mensajes actuales", que en este momento es igual a 0. Luego, si "i" es menor que "mensajes máximos" que es igual a 5, ejecutamos este código. Por lo tanto, se ejecutará 5 veces.

La primera vez que se ejecute, agregará "Name:" a "messsageText" y luego el nombre que se encuentre en la matriz arrayName en el lugar de "i" que será igual a 0. Lo hará para el título, la fecha y el número completo antes Terminando con una línea de puntos para separar los mensajes. La segunda vez que se ejecuta, "i" será una mayor, por lo que agregará más texto con resultados después del primer conjunto en las matrices. Al final configuramos "currentMessages" para que sea igual a "i".

Paso 6 - Componentes

En este punto, probablemente te irá bien si no tienes dolor de cabeza. Así que hagamos algo fácil. Vaya a "Ventana> Componentes" y de la lista arrastre dos "Botones" y uno "UIScrollBar". Colóquelos así:

Luego vaya a "Ventana> Inspector de componentes" y, con el botón izquierdo seleccionado, haga clic en la "etiqueta" y cámbiele el nombre a "Anterior". Con el botón a la derecha, renómbrelo como "Siguiente". Luego defina el nombre de instancia del botón "Anterior" como "prevBt", el botón "Siguiente" como "nextBt" y el nombre de instancia de "UIScrollBar" como "scroller".

Ahora, bajo el "currentMessage = i;" código de escritura escribe lo siguiente:

 scroller.scrollTarget = messageText;

Esto le dice a "UIScrollBar" que actúe como un desplazador para "messageText", en caso de que haya demasiadas palabras para caber en el espacio designado. Ahora debemos verificar si se están presionando los botones, por lo que debajo de todo el código escriba:

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

Esto agrega un oyente para ver si el cursor del mouse se ha soltado sobre los botones (si se han presionado) y si lo han hecho, el oyente llama a una función que escribiremos en el siguiente paso..

Paso 7 - Codificando los botones

Si se ha presionado el botón "Siguiente", queremos que el "mensaje de texto" elimine el contenido y cargue los siguientes mensajes. Si se presiona el botón "Anterior" queremos que cargue los mensajes anteriores. En la parte inferior de todo el código escriba:

 function nextFunc (event: MouseEvent) messageText.htmlText = ""; mensajes máximos + = 5; updateText (); prevBt.enabled = true; 

Esta es la función "Siguiente". Cuando se activa, borra el campo de texto, agrega 5 a "maximumMessages", ejecuta la función "updateText" y habilita el botón "Anterior". Al agregar 5 a "maximumMessages" y ejecutar la función "updateText", carga los siguientes 5 mensajes en el cuadro de texto porque ahora, "maximumMessages" es igual a 10 y "currentMessage" es igual a 5 desde la última vez que la función corrió. Por lo tanto, esta vez el campo de texto mostrará los siguientes 5 mensajes en los arreglos.

 function prevFunc (event: MouseEvent) messageText.htmlText = ""; máximo mensajes = 5; currentMessages- = 10; nextBt.enabled = true; updateText (); si (mensajes actuales)<=5)  prevBt.enabled=false;  

Esta es la función para el botón "Anterior". Esto nuevamente borra el campo de texto, también resta "maximumMessages" por 5 y "currentMessages" por 10. Esto es para que cuando se ejecute la función "updateText", muestre las 5 entradas anteriores. También habilita el botón "Siguiente". Si "currentMessage" es menor o igual a 5, el botón "Anterior" se desactiva para que el usuario no pueda mostrar información falsa; no hay mensajes por debajo de 0.

Justo debajo de "function updateText () " escriba:

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

El primer "si" está verificando si el número total de mensajes es menor o igual al máximo. Si este es el caso, estamos mostrando la última entrada y no queremos que el usuario pueda hacer clic en el botón "Siguiente", por lo que lo deshabilitamos. También hace que "mensajes máximos" sea igual a la cantidad total de mensajes para que no mostremos información innecesaria adicional.

El segundo "si" es verificar si hemos entrado en números negativos. Si lo tenemos, vuelve al inicio por defecto y muestra las primeras 5 entradas. También después de este código:

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

agregue lo siguiente:

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

Esto está comprobando si hay más de 5 entradas. Si hay, entonces habilitamos el botón "Siguiente". Recuerde que es 4 porque "i" comienza en 0 no 1. Finalmente, en la parte superior, ingrese lo siguiente:

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

Esto está deshabilitando ambos botones..

Paso 8 - Primera Prueba

Bien, abre tu archivo ".xml" y escribe:

  Chris Hola  esto es muy complicado = - ( 

Escríbalo entre la etiqueta que escribimos anteriormente, por lo que todo el archivo ".xml" solo debe contener:

   Chris Hola  esto es muy complicado = - (  

Guarde el ".xml", luego pruebe el archivo flash y debería ver esto:

Paso 9 - Enviar cajas

Ahora que tenemos la primera parte trabajando, sin interrupciones, pasemos a la segunda sección.

Es hora de crear el área que el usuario completa para enviar un mensaje. Use la "Herramienta de texto" y cree 4 "Campos de texto estático" que digan "Publicar un mensaje", "Nombre:", "Título:" y "Mensaje:".

Luego cree 3 "Campos de texto de entrada" y ponga uno al lado de cada elemento que desee completar. Asegúrese de que el cuadro de entrada "Mensaje:" sea más grande que los demás..

Seleccione el campo de texto donde el usuario ingresará su nombre y le dará un "Nombre de instancia" de "inputName". Haga esto para los cuadros de título y mensaje, dando a sus nombres de instancia "inputTitle" y "inputFull". En todos mis tres cuadros, he seleccionado los cuadros "Seleccionable" y "Mostrar borde alrededor del texto". Luego, abra el panel "Componentes" nuevamente y arrastre otro botón. Esta vez, abra el panel "Inspector de componentes" y cambie su "etiqueta" a "Enviar" y su "habilitado" a falso. Dale un nombre de instancia de "submitBt".

Paso 10 - Configuración de variables

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

Coloque este código debajo de todos los demás códigos. Esto significa que cada uno de los "Campos de entrada" que creamos en el paso anterior están en blanco. También está creando una variable para cada elemento y especificándola como una "Cadena" con el valor de nada.

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

Coloque esta función después de todo el código. Esta función está comprobando que todos los "Campos de entrada" contienen texto. "! =" significa que no es igual y "&&" está diciendo "y". Así que la función está diciendo: si todos los "Campos de entrada" no están en blanco (lo que significa que el usuario los ha completado), habilite el botón "submitBt". Ahora necesitamos poder llamar a esta función todo el tiempo, por lo que necesitamos otro oyente.

 addEventListener (Event.ENTER_FRAME, onEnterFrame);

Esto significa que cada vez que se introduce el flash en el cuadro (que para mí es 30 veces por segundo), llame a la función "onEnterFrame".

Paso 11 - Fecha

Ahora que el botón de enviar está activo, debemos verificar si se ha hecho clic, por lo que necesitamos otro oyente.

 submitBt.addEventListener (MouseEvent.MOUSE_UP, sendData);

Cuando se libere, este oyente llamará a la función "sendData", por lo que ahora necesitamos escribir la función.

 function sendData (evento: MouseEvent): void var dateToday: Date = new Date (); var thismonth: uint = dateToday.getMonth (); var mes: Array = new Array ('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre ','Diciembre'); var dateStr: String = (dateToday.getDate () + "" + month [thismonth] + "" + dateToday.getFullYear ());

La primera línea está abriendo la función. Luego establecemos "dateToday" como una variable y si inmediatamente rastro "dateToday" se mostraría "Viernes 5 de mayo 10:07:32 GMT + 0100 2009".

La siguiente línea establece la variable "thismonth" como el número que es igual al mes actual almacenado dentro de "dataToday" Como estamos actualmente en mayo, que es el 5to mes, si rastreara "thismonth" respondería 4, porque comienza en 0, no en 1. Luego creamos una nueva matriz, almacenando todos los meses en orden. Luego, el "dateStr" almacenará la fecha final que se mostrará en el libro de visitas..

"dateToday.getDate ()" extrae el número entero del día actual, por lo que para el quinto día, extraerá 5. Luego colocamos el valor de la matriz "month" que es igual a "thismonth", por lo que intercambia un número para una cadena del mes. Luego, "getFullYear ()" extrae el año actual en formato de 4 dígitos. Así que si ahora rastreamos "dateStr" obtenemos "5 de mayo de 2009".

Paso 12 - Creando nuevo XML

Ahora que el usuario ha presionado enviar, necesitamos transformar los detalles en formato xml para que puedan escribirse en el archivo ".xml".

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

Esto está convirtiendo las variables que definimos anteriormente para igualar lo que el usuario ha ingresado en los cuadros.

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

Este pedazo de código de enormes proporciones está creando una nueva variable llamada "newItem" que almacenará datos xml. Luego lo configuramos para que sea igual a una cadena con formato xml. Comenzamos la cadena con "", que contendrá todos los detalles para el usuario. Luego colocamos las variables Nombre, Título, Fecha y Completa que creamos anteriormente, cerrándolas con"".

 myXML.appendChild (newItem);

Ahora estamos usando "appendChild" para agregar un "newItem" al "myXML" que almacena toda la información del archivo xml.

Paso 13 - Enviando el XML.

Ahora que "myXML" se actualiza con el nuevo mensaje que necesitamos enviar a php.

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

Aquí estamos creando una nueva variable llamada "solicitud" que contiene la ubicación de nuestro archivo php. Aún no hemos creado este archivo, pero puedo decirle cómo lo llamaremos (¡afortunadamente, usted!). Lo guardaremos en la misma carpeta que todos nuestros archivos y lo llamaremos "messages.php". La siguiente línea le dice a la "solicitud" que está enviando la información dentro de "myXML". Luego le estamos diciendo que estos datos están en formato "XML" y que estamos usando "publicar" para enviar los datos..

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

Ahora estamos creando un nuevo "cargador" para manejar el envío de los datos, como antes cuando recibíamos los datos. Agregamos un escucha para verificar si los datos han sido enviados y, de ser así, activa la función "loaderDone".

Paso 14 - Actualizar Flash.

Antes de pasar a php hay una última cosa que debemos hacer dentro de flash:

 function loaderDone (evt: Event): void arrayName = []; arrayTitle = []; arrayDate = []; arrayFull = []; inputName.text = ""; inputTitle.text = ""; inputFull.text = ""; submitBt.enabled = false; máximo mensajes = 5; currentMessages = 0; messageText.htmlText = ""; urlLoader.load (urlRequest); 

Esta función es borrar los arreglos, borrar los campos de texto de entrada y borrar los mensajes del cuadro de mensaje. También le dice a "urlLoader" que vuelva a cargar el archivo xml. Esto activará el libro de visitas para volver al inicio, volver a cargar el archivo xml que tiene nuestra nueva entrada, rellenar los arreglos y mostrar los primeros 5 mensajes una vez más..

Paso 15 - Pasando a PHP

Ahora que hemos terminado en flash guárdalo y publica la nueva versión. Abre un nuevo archivo php llamado "messages.php".

 

Este código crea la variable "xml" y le asigna el valor de los datos que se han enviado desde flash. Luego crea la variable "archivo" que almacena la ubicación del archivo xml. "fopen" le dice a php que abra el archivo, "fwrite" luego usa "file" para escribir el contenido de la variable "xml" en él. "fclose" luego cierra el archivo xml con el nuevo mensaje guardado de manera segura, listo para ser leído por el libro de visitas flash una vez más.

Conclusión

Finalmente, cargue los archivos en su servidor! Recuerde que estos no funcionarán en su disco duro a menos que tenga instalado php. Localice el libro de visitas y vea si funciona, ¡espero que lo haga! Gracias por tu tiempo, espero que hayas aprendido algo útil.!