Diseño Web II

2

CARRERAS PROFESIONALES

CIBERTEC

DISEÑO WEB II

3

ÍNDICE
Presentación Red de contenidos Unidad de aprendizaje 1: El lenguaje XML SEMANA 1 SEMANA 2 : Introducción al lenguaje XML : Cargar XML 7 17 5 6

Unidad de aprendizaje 2: El lenguaje CSS SEMANA 3 SEMANA 4 SEMANA 5 : Estilos CSS : PC1: Pagina personal con xml y css : Integración de XML, CSS y Flash 41 29

Unidad de aprendizaje 3: El lenguaje ActionScript 3.0 SEMANA 6 SEMANA 8 SEMANA 9 : Manejo de Niveles PC2: Pagina personal con enlaces : Desarrollo de Aplicaciones web con Flash CS3 69 73 85 53

SEMANA 10 : Metodos de Movieclips SEMANA 11 : La clase Timer SEMANA 12 : PC3: Web Site de Curso Virtual con animaciones SEMANA 13 : La clase Tween SEMANA 14 : Sonidos SEMANA 15 SEMANA 16 Videos PC4: Diseño de un juego interactivo

93 109 119

SEMANA 17 : No Hay Clases

CIBERTEC

CARRERAS PROFESIONALES

4 CARRERAS PROFESIONALES CIBERTEC .

Continúa con el lenguaje XML. que debe desarrollar. los subtemas. etc. encontrará las actividades que deberá desarrollar en cada sesión. el cual será ampliamente desarrollado. Brinda a los alumnos un conjunto de herramientas de software como Adobe Flash CS3. para el diseño de páginas web con aplicaciones multimedia. CSS y XML. es decir. el tema tratado.DISEÑO WEB II 5 PRESENTACIÓN Diseño Web II es un curso que pertenece a la línea técnica y se dicta en la carrera de Diseño Grafico. las que se desarrollan durante semanas determinadas. CIBERTEC CARRERAS PROFESIONALES . que junto con ActionScript. que le permitirán reforzar lo aprendido en la clase. El curso es eminentemente práctico y consiste en el diseño de páginas web con programación ActionScript 3. que debe alcanzar al final de la unidad. En primer lugar. En cada una de ellas. y los contenidos. se inicia con el programa. Por último. hallará los logros. brinda al alumno una variedad de herramientas para la estructuración de la información para transformarla y presentarla en una página web. noticias dinámicas. Por ejemplo. El manual para el curso ha sido diseñado bajo la modalidad de unidades de aprendizaje. Adobe Flash CS3 que permite diseñar páginas web usando el lenguaje ActionScript.0. se pueden crear galeria de imágenes.

6 RED DE CONTENIDOS Diseño Web II El lenguaje ActionScript 3.0 El lenguaje XML El lenguaje CSS Métodos Propieda des Objetos Metodos Propie dades CSS Flash CSS Timer Tween Flash XML Audio Video CARRERAS PROFESIONALES CIBERTEC .

los alumnos diseñan páginas web con la herramienta Adobe Flash CS3.DISEÑO WEB II 7 UNIDAD DE APRENDIZAJE 1 SEMANA 1 EL LENGUAJE XML LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. estructurando la información con XML para transformarla y presentarla en una pagina web. TEMARIO • • • • Estructura XLM Conceptos XML Declaración XML Documentos XML bien formados ACTIVIDADES PROPUESTAS • Los alumnos diseñan documentos XML bien formados. • Los alumnos diseñan galería de imagenes con XML CIBERTEC CARRERAS PROFESIONALES .

Galeria de videos. Esta restriccón le es muy útil al parser para asegurarse que el documento está completo. reproductor de musica y videos. SVG. menus dinamicos. Tiene un papel muy importante en compatibilidad entre sistemas para compartir segura. Se puede usar en bases de datos. Por lo tanto XML no es realmente un lenguaje en particular.1. noticias dinamicas entre otros. XML no ha nacido sólo para su aplicación en Internet. es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). hojas de cálculo y casi cualquier cosa imaginable. Algunos de estos lenguajes que usan XML para su definición son XHTML. CARRERAS PROFESIONALES CIBERTEC . INTRODUCCIÓN A XML XML. 1. editores de texto.8 1. MathML. sino una manera de definir lenguajes para diferentes necesidades. sino que se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas. Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). a su alrededor otras que la y con unas posibilidades mucho la actualidad ya que permite la la información de una manera En este manual se usará XML para crear Galeria de imagenes. Conceptos y términos importantes Antes de crear documentos XML es necesario revisar algunos conceptos básicos: • Elemento raiz: Es el primer elemento de un documento XML y el ultimo que cierra. XML es una tecnología sencilla que tiene complementan y la hacen mucho más grande mayores. sigla en inglés de Extensible Markup Language («lenguaje de marcas ampliable»). Sólamente se permite un elemento raíz. fiable y fácil.

debe tener un solo elemento de nivel superior que contenga a todos los demás elementos del documento. Los elementos vacíos se suelen escribir con una sola etiqueta (como <elemento/>). <alumno codigo=”1” nombre=”Magna” nota=”20” /> • Entidades predefinidas. Atributo: valor con nombre asociado con un elemento que se escribe en la etiqueta inicial del elemento con el formato nombreAtributo="valor".0. que así podemos usar el carácter "<" sin que se interprete como el comienzo de una etiqueta XML. por ejemplo. o pueden estar vacíos. no obstante. <alumno> <codigo>1</codigo> <nombre>Viviana</nombre> <edad/> </alumno> • Elemento vacío: elemento XML que no contiene elementos secundarios. <familia /> <gato raza="Persa" nombre="Micifú" /> • Documento: estructura XML individual. Es decir. identificado como una etiqueta inicial y una etiqueta final. se definen cinco entidades para representar caracteres especiales y que no se interpreten como marcado por el procesador XML. Los elementos XML pueden contener texto o elementos de otro tipo. y el contenido existente entre las etiquetas. en lugar de escribirse como un elemento secundario independiente anidado dentro del elemento. Un documento XML puede contener un número arbitrario de elementos (o puede constar únicamente de un elemento vacío). En XML 1.DISEÑO WEB II 9 <alumnos> <alumno> <codigo>1</codigo> <nombre>Viviana</nombre> <edad/> </alumno> </alumnos> • Elemento: elemento individual de un documento XML. <alumnos> <alumno/> </alumnos> • • Nodo: nombre alternativo para elemento XML. CIBERTEC CARRERAS PROFESIONALES .

/TITLE>&lt. y es la cadena "]] >" con la que termina el bloque CDATA. y luego con un bloque CDATA) <parrafo>Lo siguiente es un ejemplo de HTML./HEAD> </ejemplo> <ejemplo> <![CDATA[ <HTML> <HEAD><TITLE>Rock & Roll</TITLE></HEAD> ]]> </ejemplo> Como hemos visto.10 Entidad Caracter &amp. pero nunca dentro de las declaraciones. • Comentarios A veces es conveniente insertar comentarios en el documento XML. sin que se interprete como marcado XML.HTML> &lt. CARRERAS PROFESIONALES CIBERTEC . el siguiente (primero usando entidades predefinidas.Ya acabamos --> Se pueden introducir comentarios en cualquier lugar de la instancia o del prólogo. que sean ignorados por el procesado de la información y las reproducciones del documento. dentro de una sección CDATA podemos poner cualquier cosa.Otro comentario --> <!-. Como ejemplo.TITLE>Rock &amp. que no será interpretada como algo que no es. Existe otra construcción en XML que permite especificar datos. " • Secciones CDATA. especial o no. Especialmente cuando son muchas.Aquí va el tipo de documento --> <!-.</html> <ejemplo> &lt. Esta cadena no puede utilizarse dentro de una sección CDATA. etiquetas. La razón de esta construcción llamada CDATA (Character Data) es que a veces es necesario para los autores de documentos XML. <?xml version="1. ' &quot. & &lt. Existe empero una excepción. < > &apos. u otros comentarios. comienzan por la cadena "<!--" y terminan con "-->". Es decir. utilizando cualquier carácter. Los comentarios tienen el mismo formato que los comentarios de HTML.0"?> <!-. &gt. poder leerlo facilmente sin tener que descifrar los códigos de entidades. Roll&lt.HEAD>&lt.

3. un conjunto individual de datos XML se denomina documento XML. y deberían. La etiqueta inicial. el siguiente documento XML contiene información sobre un álbum de música: <?xml version="1. con una sintaxis específica para organizar la información en un formato estructurado. etc. Estructura de un documento XML Los datos XML se escriben en formato de texto simple.0"?> <texto>Este documento se adecua a la Especificación XML 1. que a su vez contienen otros elementos. aunque es más probable que haya otros elementos. Por ejemplo. Si no se especifica un juego de caracteres.0" encoding="ISO-8859-1"?> <album> <musica pista="1" duracion="4:05"> <titulo>mujer bonita</ titulo> <artista>Los Platillos negros</artista> <genero>Balada</ genero > <grabado>2006-10-17-08:31</ grabado > </musica > <musica pista="2" duracion="3:15"> <titulo>Traidora</ titulo> <artista>Harry el hermoso</artista> < genero >Rock</ genero > <grabado>2007-10-27-10:45</ grabado > </musica > </album> Cada elemento se distingue mediante un conjunto de etiquetas. Declaracion XML Los documentos XML pueden. En formato XML. Generalmente.</texto> Indicación del juego de caracteres utilizados (encoding): <?xml version="1.2. tiene una barra diagonal antes del nombre del elemento: </titulo> CIBERTEC CARRERAS PROFESIONALES . tiene el nombre de elemento: <titulo> La etiqueta final.0" encoding="ISO-8859-1"?> <texto> Soporta tildes y la letra ñ. los datos se organizan en elementos (que pueden ser elementos de datos individuales o contenedores para otros elementos) con una estructura jerárquica. comenzar con una declaración XML que indique qué versión de XML se está usando Indicación de la versión del standard XML: <?xml version="1. dentro de este elemento raíz puede haber un solo elemento de información. Cada documento XML tiene un elemento individual como elemento de nivel superior o principal. que marca el final del elemento. se sobreentiende que se está utilizando UTF-8 (no acepta tildes ni la letra ñ) </texto> 1. que indica el principio del elemento.DISEÑO WEB II 11 1.0. constituidas por el nombre del elemento entre corchetes angulares (signos menor que y mayor que).

123</dni> </cliente> <pedido> <producto codigo=“120-e”>Applied XML </producto> <tipo>libro</tipo> </pedido> <costeTotal unidad=“dolares”>24</costeTotal> </factura> CARRERAS PROFESIONALES CIBERTEC . uno o más elementos XML. Es sensitivo (mayúsculas y minúsculas).comentario --> Un documento bien formado es aquel documento que cumple con la especificación de XML 1. Una “tag” (etiqueta) puede tener atributos cerrados entre comillas: <nombre estado=“casado” hijos=“3”>Juan</nombre> 6. No se pueden intercalar etiquetas: <libro><pagina>Applied XML<libro>12<pagina> 5.12 Si un elemento no contiene nada. <!Entity> . El nombre de las etiquetas empiezan con una letra. que puede ser un valor individual. 1. o con uno o más signos de puntuación: <Nombre> . es decir que sea sintácticamente correcto. o nada (en el caso de un elemento vacío). este elemento XML define un solo atributo denominado duracion. un elemento también puede incluir otros valores. este elemento: <grabado/> es idéntico a este elemento: <titulo></titulo> Además del contenido del elemento entre las etiquetas inicial y final. con valor "4:19": <musica duracion="4:19"></musica> Cada elemento XML tiene contenido. puede escribirse como un elemento vacío (y se representa con una sola etiqueta). Por ejemplo. que se definen en la etiqueta inicial del elemento. Los comentarios van encerrados entre: <!-. <nombre> .4 Escribir documentos XML bien formados Para escribir documentos XML bien formados. denominados atributos.0. En XML. Sólo puede haber un elemento raíz 2. Toda etiqueta abierta hay que cerrarla: <etiquetavacia/> 3. hay que seguir unas reglas básicas 1. etiquetas correspondientes se tienen que escribir igual 4.344. Ejemplo de un documento XML bien formado <factura id=“cod12-02-123”> <cliente> <nombre>Juan</nombre> <dni>12. <? Ejecuta> 7.

DISEÑO WEB II 13 Actividades Actividad 1 Diseñe los siguientes documentos xml.xml books. Use Dreamweaver o Block de notas cotizacion.xml CIBERTEC CARRERAS PROFESIONALES .

14 Autoevaluación Diseñe el siguiente documento XML <datos> <contacto id="1" tipo="laboral"> <nombre>Carlos</nombre> <apellido>Perez</apellido> <telefono>4555-7895</telefono> <comentario><![CDATA[Debe más de 1000 pesos a la empresa!]]></comentario> </contacto> <contacto id="2" tipo="amigo"> <nombre>Dario</nombre> <apellido>Raimon</apellido> <telefono>4555-1235</telefono> <comentario><![CDATA[Prácticamente un Licenciado!]]></comentario> </contacto> </datos> CARRERAS PROFESIONALES CIBERTEC .

acceso y manipulación. http://klr20mg. instrucción de procesamiento o elemento de texto XML. puede consultar las siguientes páginas. CIBERTEC CARRERAS PROFESIONALES . atributo. http://www. Utiliza una estructura de árbol y una estructura de etiquetas similares a las de HTML. Un objeto XML puede representar un elemento. hallará un ejercicio paso a paso de xml.com/?p=86 Aquí hallará un tutorial sobre el uso de xml con as3 y su diferencia con as2.com/2006/07/11/as3-cargando-informacion-externa-xml/ En esta página.DISEÑO WEB II 15 Resumen XML ofrece una forma estándar y cómoda de clasificar datos y facilitar su lectura. Si desea saber más acerca de estos temas.videoaprende. comentario.

16 CARRERAS PROFESIONALES CIBERTEC .

TEMARIO • Cargar XML desde Flash ACTIVIDADES PROPUESTAS • Los alumnos en una película de Flash. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. CIBERTEC CARRERAS PROFESIONALES .DISEÑO WEB II 17 UNIDAD DE APRENDIZAJE 1 SEMANA 2 EL LENGUAJE XML LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. estructurando la información con XML para transformarla y presentarla en una pagina web. cargan un archivo XML.

data). ACTIONSCRIPT CON XML 1. se llama a una function para realizar un conjunto de acciones. function completado (e:Event):void { xml = new XML(e. Por ejemplo despues de cargarse un documento xml. para ser usados de manera dinámica en una aplicación de Flash. var docXML:URLLoader:new URLLoader() URLLoaderDataFormat: Indica el tipo de información que se descargara. datos binarios o variables. Este codigo significa que al completarse la carga del archivo xml. Objetos ActionScript 3. Es útil para descargar archives de textos.data.dataFormat=URLLoaderDataFormat.completado). Las clases principales son: XML: Representa un solo elemento XML. Eventos Los eventos son sucesos que le ocurren al objeto y que al verificarse el suceso. Los objetos instanciados con la clase URLRequest se pasan al metodo load() de un objeto de la clase URLLoader. Por ejemplo. Puede ser como texto. trace(xml).18 1. que puede ser un documento XML con varios elementos secundarios o un elemento con un solo valor en un documento.COMPLETE. 1. } Se usa el evento e:Event para recibir los datos de texto del document xml. es necesario indicar el evento siguiente: objetoLoader.addEventListener(Event.2.0 incluye varias clases que se utilizan para trabajar con información estructurada en formato XML. datos binarios o variables. como por ejemplo archivos xml.xml”) URLLoader: Descarga los datos de la dirección URL como texto. 1.target.2.target. var datosXml:XML=new XML(). var ruta:URLRequest=new URLRquest(“archivo. CARRERAS PROFESIONALES CIBERTEC . Esta recepción se realiza usando la propiedad e.TEXT. la cual se debe crear en algún lugar del programa.3. la siguiente función se ejecuará despues de completarse la carga del archive xml. se va a llamar a la function completado. docXML. Funciones Las funciones son bloques de codigo que realizan tareas especificas y pueden reutilizarse en el programa. URLRequest: Captura la ubicacion del archivo xml que se va a cargar en formato HTTP.

").utils. xmlLoaded). var myXMLURL:URLRequest = new URLRequest(XML_URL).TEXT.display. se puede observar el uso del bloque try…catch en el método completado. se genera un error TypeError cuando los datos descargados se convierten en una instancia XML.*. loader. En primer lugar se tiene que hacer que una instancia URLLoader cargue los datos desde el URL.DISEÑO WEB II 19 2. pasando una instancia URLRequest que apunta al URL del archivo XML.completado). En ActioScript 3.0. Se puede utilizar la clase URLLoader para cargar datos XML desde una dirección URL. import flash.COMPLETE. loader.addEventListener(Event . function xmlLoaded(event:Event):void { myXML = XML(myLoader. enviar y cargar datos se ha consolidado en la nueva clase URLLoader y sus clases relacionadas No existen consideraciones especiales para cargar XML en ActioScript 3. CARGAR XML En versiones anteriores a ActionScript. import flash.0 dejando a su eleccion implementar su porpia solucion. var XML_URL:String = "http://www.dataFormat=URLLoaderDataFormat.events. CIBERTEC CARRERAS PROFESIONALES . Para utilizar el código siguiente en las aplicaciones hay que sustituir el valor de XML_URL del ejemplo por una dirección URL válida.TEXT.*. } En el ejemplo siguiente. Load() para lanzar el proceso de carga. se debe invocar el método URLLoader.example. Puede ser incluso un archivo xml grabado en su disco local: var myXML:XML = new XML().net. var loader:URLLoader=new URLLoader(). import flash.COMPLETE.com/Sample3. trace("Data loaded. En el controlador de evento COMPLETE se deberia utilizar una de las tecnicas disponibles para convertir los datos cargados en un objeto XML Por ultimo.*. myLoader. import flash. cargar un archivo XML se realizaba al invocar el método load() directamente en un objeto XML.*. su propiedad dataFormat se debe establecer en DataFormat. El proceso de cargar un archivo XML es muy sencillo.data).xml". Se tiene que añadir un controlador de evento para el evento COMPLETE para que reciba notificación cuando los datos se han terminado de descargar.addEventListener(Event. var myLoader:URLLoader = new URLLoader(myXMLURL). El error lo captura el bloque catch. Si el archivo XML estuviese mal estructurado. Para decirle al URLLoader que cargue los datos como texto plano. permitiendole gestionar el error.

}catch(e:TypeError){ trace("No se puede cargar el XML"). function completado(event:Event):void{ try{ var example:XML=new XML(event.xml")). 1.contacto[0].comentario) CARRERAS PROFESIONALES CIBERTEC . Dado el documento datosexternos.contacto[0].data).message).contacto[1]. se procederá a realizar la lectura de cada uno de los datos.target.@tipo) Resultado: amigo Para leer e imprimir el texto del comentario del primer contacto: trace(example.xml y tiene la siguiente información: <datos> <contacto id="1" tipo="laboral"> <nombre>Carlos</nombre> <apellido>Perez</apellido> <telefono>4555-7895</telefono> <comentario><![CDATA[Debe más de 1000 pesos a la empresa!]]></comentario> </contacto> <contacto id="2" tipo="amigo"> <nombre>Dario</nombre> <apellido>Raimon</apellido> <telefono>4555-1235</telefono> <comentario><![CDATA[Prácticamente un Licenciado!]]></comentario> </contacto> </datos> 2. } } El arhchivo xml se llama datosexternos.nombre) Resultado: Carlos Para leer e imprimir el atributo tipo del segundo contacto: trace(example. Leer un documento XML Una vez cargado un documento XML desde Flash. es necesario realizar la lectura de los textos para mostrarlos en la aplicación diseñada en Flash.xml. trace(example).20 loader.load(new URLRequest("datosexternos. Para leer e imprimir en la ventana de salida de Flash todo el documento xml: trace(example) Para leer e imprimir el primer nombre: trace(example. trace(e.

xml"). test_txt. loader.dataFormat = URLLoaderDataFormat. var test_txt:TextField = new TextField().DISEÑO WEB II 21 Actividades Actividad 1 En el siguiente código. A continuación. se carga un archivo xml llamado datos externos. onComplete). loader.y=15 test_txt.xml y desde flash se leen algunos datos y se imprimen en un cuadro de texto.autoSize = "left".multiline = true. test_txt. especial o no. poder leerlo facilmente sin tener que descifrar los códigos de entidades. La razón de esta construcción llamada CDATA (Character Data) es que a veces es necesario para los autores de documentos XML. El documento XML tiene la siguiente informacion: <datos> <contacto id=“1″ tipo=“laboral”> <nombre>Carlos</nombre> <apellido>Perez</apellido> <telefono>4555-7895</telefono> <comentario><![CDATA[Debe más de 1000 pesos a la empresa!]]></comentario> </contacto> <contacto id=“2″ tipo=“amigo”> <nombre>Dario</nombre> <apellido>Raimon</apellido> <telefono>4555-1235</telefono> <comentario><![CDATA[Prácticamente un Licenciado!]]></comentario> </contacto> </datos> Existe otra construcción en XML que permite especificar datos. utilizando cualquier carácter. var request:URLRequest = new URLRequest("datosexternos. Especialmente cuando son muchas.x=15 test_txt. CIBERTEC CARRERAS PROFESIONALES . El archivo se grabara con el nombre datosexternosXML.TEXT.addEventListener(Event. loader.COMPLETE. el código de Actionscript 3 que carga el XML.load(request).width=300 test_txt.height=350 addChild(test_txt). test_txt. test_txt.fla: var loader:URLLoader = new URLLoader(). sin que se interprete como marcado XML. Lo pondremos en el primer fotograma de nuestra película Flash.wordWrap = true.

x=180 nombre_txt.y=50 codigo_txt.target.appendText("\ncomentario: "+myXML.xml: <elxml> <codigo>123</codigo> <nombre>Jaime Paredes</nombre> <titulo>Prof. i++) test_txt. nombre_txt y titulo_txt. loader.text=myXML //test2 test_txt. Cibertec</titulo> </elxml> Archivo cargarXMLtextoAS3.appendText("\ntipo: "+myXML.apellido) test_txt.comentario) } Actividad 2 En el siguiente ejemplo se carga un archivo texto.length(). onComplete). nombre_txt.appendText("\n") test_txt. i<myXML.contacto[0]. Archivo texto.addEventListener(Event.COMPLETE.y=80 nombre_txt.height=25 codigo_txt. loader.22 function onComplete(event:Event):void { var myXML:XML = new XML(event.appendText("\napellido: "+test). var request:URLRequest = new URLRequest("texto..contacto.dataFormat = URLLoaderDataFormat.@tipo) //test4 test_txt.appendText("\n") for(var i:uint = 0. codigo_txt.width=140 CARRERAS PROFESIONALES CIBERTEC .autoSize="right" addChild(codigo_txt).width=140 codigo_txt. loader.fla: var loader:URLLoader = new URLLoader().xml en el Flash y se almacena los datos en tres cuadros de textos llamados código_txt.x=180 codigo_txt.data) //test 1 test_txt. var codigo_txt:TextField=new TextField(). //test3 test_txt.appendText("\n") for each(var test:XML in myXML.xml").TEXT.load(request). var nombre_txt:TextField=new TextField().contacto[i].

trace(xmlData). xmlLoader.x=180 titulo_txt. titulo_txt. LoadXML).autoSize="right" addChild(nombre_txt). en el primer fotograma se colocara el siguiente código: var xmlLoader:URLLoader = new URLLoader().load(new URLRequest("libros. function LoadXML(e:Event):void { xmlData = new XML(e.text = myXML.autoSize="right" addChild(titulo_txt). function onComplete (event:Event):void { var myXML:XML = new XML(event. CIBERTEC CARRERAS PROFESIONALES . var xmlData:XML = new XML().width=140 titulo_txt. Actividad 3 En este ejemplo se va a cargar un archivo libros.text = myXML. nombre_txt.data) codigo_txt.com/lo5ts</amazonUrl> </book> </books> En Flash. var titulo_txt:TextField=new TextField().com/npuxt</amazonUrl> </book> <book ISBN="1582346194"> <title>Send in the Idiots: Stories from the Other Side of Autism</title> <author>Kamran Nazeer</author> <amazonUrl>http://tinyurl.DISEÑO WEB II 23 nombre_txt.xml")).target.fla. el archivo se llama cargarXML1.elements("codigo").xml en Flash.addEventListener(Event.text = myXML.height=25 nombre_txt.elements("nombre").height=25 titulo_txt. Luego se va a mostrar todos los elementos del archivo y posteriormente se haran algunos cambios para mostrar solo algunos elementos: El archivo libros.data).y=110 titulo_txt.COMPLETE. titulo_txt.elements("titulo").xml <books> <book ISBN="1590595181"> <title>Foundation ActionScript Animation: Making Things Move</title> <author>Keith Peters</author> <amazonUrl>http://tinyurl. xmlLoader. }.target.

reemplace la función LoadXML por estas dos funciones: function LoadXML(e:Event):void { xmlData = new XML(e. trace(bookInput. notara que los nombres de los autores de libros se almacenan en el elemento <author>. si quisiera ver solo a partir del elemento book lo que tiene hacer es añadir una palabra extra a la instruccion trace (bookInput). trace("------------------------").data).book donde book representa el nombre del elemento que se quiere mostrar. } function AnalizarLibro (bookInput:XML):void { trace("XML Output"). trace("------------------------"). presionamos Ctrl + Enter y verás la misma sin cambios en los datos del XML que ha visto antes: Sin embargo.24 Ahora. La función LoadXML también ha sido modificada con el trace anteriormente declarado el cual sustituye con un llamamiento al método ParseBooks con nuestro objeto XML xmlData enviado como argumento. } Observa que ahora tenemos una nueva función AnalizarLibro que tiene un objeto XML como argumento. trace("------------------------"). por lo que debemos cambiar nuestro trace de bookInput. AnalizarLibro (xmlData).book.book).author function AnalizarLibro (bookInput:XML):void { trace("XML Output"). A continuación cuando ejecutemos nuestro código observaremos los nodos que encajan con el elemento Book <book ISBN="1590595181"> <title>Foundation ActionScript Animation: Making Things Move</title> <author>Keith Peters</author> <amazonUrl>http://tinyurl.target. trace(bookInput). Para comprobar esto.author).book.com/npuxt</amazonUrl> </book> <book ISBN="1582346194"> <title>Send in the Idiots: Stories from the Other Side of Autism</title> <author>Kamran Nazeer</author> <amazonUrl>http://tinyurl. } CARRERAS PROFESIONALES CIBERTEC . } Se cambia el trace solamente de bookinput a bookinput.book a bookInput. trace(bookInput.com/lo5ts</amazonUrl> </book> Si se desea mostrar sólo los nombres de todos los autores ubicados dentro de nuestro nodo: book. function AnalizarLibro (bookInput:XML):void { trace("XML Output").

La razón de esto es que estas traceando el elemento XML en si mismo y no su contenido.Book. Este es un pequeño efecto secundario que puede ser fácilmente modificado. } CIBERTEC CARRERAS PROFESIONALES . Una forma de solucionar este problema es mediante el uso de posiciones indexadas para recuperar sólo los valores que nos interesan.text()[0]).author) trace(ejem. los nombres estarán en una línea con ningún espacio entre ellos. para recuperar Keith Peters. se observara lo siguiente en la ventana de salida: <author>Keith Peters</author> <author>Kamran Nazeer</author> Con este cambio que realizamos ahora podrás ver la lista de los autores.book. Lamentablemente. trace(bookInput. for each(var ejem:XML in bookInput. trace("------------------------"). } Al ejecutar el código anterior se mostrará Keith Peters como queremos.book. pero dicha lista esta rodeada por tags <author>. trace(bookInput.author. trace("------------------------"). entonces. todos los autores se mostraran sin el tag <author>.author. si deseas imprimir los nombres de todos los autores. Sin embargo. Por ejemplo.text()).DISEÑO WEB II 25 Cuando se ejecute la película. debes usar la función text() function AnalizarLibro (bookInput:XML):void { trace("XML Output"). Para devolver el contenido de un elemento XML. debes usar el siguiente código: function AnalizarLibro (bookInput:XML):void { trace("XML Output"). } Cuando ejecutes la aplicación en esta ocasión.text()). pasaremos el índice con el valór en 0: function AnalizarLibro (bookInput:XML):void { trace("XML Output"). trace("------------------------").

com</correo> <cuerpo>Su servicio sera suspendido a partir de la fecha</cuerpo> <remitente>servicios@empresa. CARRERAS PROFESIONALES CIBERTEC . El archivo XML contiene la siguiente información: <mensaje> <asunto>Aviso de suspensión</asunto> <correo>webmaster@cristalab.com</remitente> </mensaje> El diseño del formulario en flash es el siguiente: Al hacer clic en el boton cargar se debe visualizar los datos del archivo XML en el formulario.26 Autoevaluación Diseñe una película de Flash que cargue un XML en un formulario.

Por ultimo. Para decirle al URLLoader que cargue los datos como texto plano.com/showthread.0. hallará un video tutorial para cargar XML en Flash.DISEÑO WEB II 27 Resumen En ActioScript 3. http://www. puede consultar las siguientes páginas. se debe invocar el método URLLoader.TEXT. Si desea saber más acerca de estos temas. Se tiene que añadir un controlador de evento para el evento COMPLETE para que reciba notificación cuando los datos se han terminado de descargar.com/cargar-xml-en-flash/ En esta página. enviar y cargar datos se ha consolidado en la nueva clase URLLoader y sus clases relacionadas Se tiene que hacer que una instancia URLLoader cargue los datos desde el URL. CIBERTEC CARRERAS PROFESIONALES . Load() para lanzar el proceso de carga.php?p=5 Aquí hallará ejercicios para cargar XML en Flash. su propiedad dataFormat se debe establecer en DataFormat. pasando una instancia URLRequest que apunta al URL del archivo XML. http://clipdepelicula.zonaexpertos.

28 CARRERAS PROFESIONALES CIBERTEC .

DISEÑO WEB II 29 UNIDAD DE APRENDIZAJE 2 SEMANA 3 EL LENGUAJE XML LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. TEMARIO • Estilos CSS • Integración de Flash y CSS ACTIVIDADES PROPUESTAS • Los alumnos crean hojas de estilos. • Los alumnos integran Flash y CSS en el diseño de animaciones. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. estructurando la información con XML para transformarla y presentarla en una pagina web. CIBERTEC CARRERAS PROFESIONALES .

margenes. ESTILOS CSS Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada). tipos de letra. por ejemplo. Valores y Selectores 2. color de fondo. Atributos Son las palabras que usaremos para indicar cual estilo queremos modificar. mayor organización de su codigo. INTRODUCCIÓN A veces desea cambiar el diseño visual de su desarrollo en Flash.1. se dará cuenta de que es más fácil y rápido diseñar con CSS que de la manera antigua. Aprender a conocer CSS le dará como resultado un mejor flujo de trabajo. color del texto. si queremos cambiar el tipo de letra. usamos el atributo "font". tamaño. separada completamente de la estructura del HTML. el atributo "background". si es el fondo. y más flexibilidad a los cambios. Un trabajo tedioso y que definitivamente le quitaría mucho tiempo si es que no conoce el lenguaje CSS. ha venido haciendose cada vez más importante entre los diseñadores.30 1. Este lenguaje desarrollado por la W3C. Funciona aplicando reglas de estilo a los elementos HTML. menos peso en las páginas. 2. El propósito de esta seccion es que se pueda controlar la apariencia grafica de un sitio hecho en flash editando tan solo un archivo CSS. sin tener que cambiar los componentes uno a uno. Elementos Los tres principales elementos en el desarrollo de CSS son Atributos. etc. quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web. 2. etc. Ademas una vez familiarizados con sus capacidades. gracias a la facilidad de uso y a los optimos y flexibles resultados. entre las que incluyen. posicion de los elementos.1.1. CARRERAS PROFESIONALES CIBERTEC . es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML.

2. color: black." seguido del nombre que le queramos poner a la clase. o la propiedad que le daremos. Valores Son para definir como vamos a modificar el atributo. font-size: 26px. si queremos que un tipo de letra sea rojo. } CIBERTEC CARRERAS PROFESIONALES . El tercer selector es el de clase. usamos el atributo "font" y el valor "red". las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos. luego se abre una llave "{" y se empiezan a colocar los atributos. Se pueden definir tantos atributos con sus respectivos valores como se desee. font-size: 12px. Por ejemplo. 2. se escribe en el documento CSS comenzando con un punto ". En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar. background-color: #cccccc.2. se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. /*CSS sobre selector de identificador*/ #header { background-color: #ff0000. al final de todo se cierra el estilo para el selector con el cierre de llave "}".1. Selectores Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos. separandolos con un espacio o un salto de linea. si queremos definir un estilo para toda la pagina. seguidos de dos puntos ":" y luego el valor seguido de punto y coma ". de esta forma: . Los selectores de identificador. Hay tres tipos de selectores: • • • Los selectores de etiquetas HTML.3.". debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML. se usan para aplicar estilos solo a las etiquetas identificadas con un nombre. La sintaxis Primero se coloca el selector. } Este tipode selector no requiere de aplicación en el documento HTML.DISEÑO WEB II 31 2. El siguiente código define estilos para el selector o la etiqueta body: /*CSS sobre selector de etiquetas*/ body { font-family: arial.mi_clase.1.2. color: #ffffff.

Ejemplo: <div class="mi_clase">Aqui el contenido</div> 2. text-align : center. } BODY { background-color : #006600. font-family : arial. una celda y para toda la página. } En los selectores de clase. Tambien. text-decoration : underline.mi_clase { margin: 5px. se aplica a la etiqueta con solo colocarle el identificador. color : White. como en este ejemplo: <div id="header">Aqui el contenido</div> /*CSS sobre selector de clase*/ . } TD { font-size : 10pt. La ventaja de estos softwares es que la creación y edicion de los archivos css son más rapidos y faciles. font-family : arial.32 En este caso. puede usar algunos softwares como Dreamweaver. un titulo.3. background-color : Teal. background-color : 666666.helvetica. font-family : verdana. } CARRERAS PROFESIONALES CIBERTEC .arial. } H1 { font-size : 36pt. height: 100px. font-family : verdana. El siguiente código define estilos para un parrafo. width: 200px.arial. Crear un archivo de estilos CSS El archivo de estilos CSS se puede crear en un archivo de texto simple con extensión css. usamos el atributo "class" en las etiquetas HTML para darles el estilo. font-weight : normal. text-align : center. Debe estar guardado en un archivo de texto con extensión css: P { font-size : 12pt.

Hay disponibles las siguientes conversiones de fuentes: mono se convierte en _typewriter. pt) no se analizan.DISEÑO WEB II 33 3. margin. Es asi que se puede lograr texto más amigable para el usuario con un formateo de texto como el de una página HTML. Propiedad Uso y valores admitidos CSS Sólo se admiten valores de color hexadecimales. no admiten el ajuste entre caracteres. Las unidades (px. pt) no se font-size analizan. pt) no se margin-left analizan. right text-align Los valores reconocidos son left.Sólo se utiliza la parte numérica del valor. de esta forma se puede formatear contenido dentro de un campo de texto con las reglas que haya establecido en una hoja de estilos. No se admiten los color nombres de los colores (como blue). los píxeles y los puntos son equivalentes. Se puede utilizar cualquier nombre de familia de fuentes. Los valores reconocidos son true y false. El siguiente cuadro muestra las propiedades soportadas. separadas por comas. spacing Sólo se utiliza la parte numérica del valor. el problema radica en que Flash soporte solo un puñado de propiedades. Las unidades (px. estos archivos SWF pueden reproducirse en versiones no Windows de Flash Player y se aplica el ajuste entre caracteres. los píxeles y los puntos son equivalentes. los píxeles y los puntos son equivalentes. Algunas fuentes. right. en orden descendente de conveniencia. Los colores se escriben en el siguiente formato: #FF0000. INTEGRACION DE FLASH Y CSS A partir de la versión MX. Sin embargo. decoration Sólo se utiliza la parte numérica del valor. Un valor negativo condensa el espacio entre caracteres. center. los píxeles y los puntos son equivalentes. La cantidad de espacio distribuido uniformemente entre caracteres. CIBERTEC CARRERAS PROFESIONALES . pt) no se text-indent analizan. La propiedad de ajuste entre kerning caracteres sólo puede utilizarse en archivos SWF creados en Windows. los píxeles y los puntos son equivalentes. Sólo se utiliza la parte numérica del valor. Sólo se utiliza la parte numérica del valor. Las unidades (px. pt) no se analizan. sans-serif se convierte en _sans y serif se convierte en _serif. Sin embargo. Las unidades (px. Si especifica un nombre de fuente genérico. Lista de fuentes que se deben utilizar. como Courier New. font-style Los valores reconocidos son normal y italic.. Flash introdujo el soporte para CSS. y justify. Las unidades (px. El ajuste entre caracteres sólo se admite en las fuentes incorporadas. font-weight Los valores reconocidos son normal y bold. no en archivos SWF creados en Macintosh. textLos valores reconocidos son none y underline. El valor especifica el número de píxeles que se añaden después de cada carácter letterdurante el avance. block y none. se font-family convertirá a una fuente de dispositivo adecuada.. display Los valores admitidos son inline.

} .1. text-align:center.tit{ color:#006633.htmlText += "<p class='tit'>" + titulo + "</p>".target). } . Si en la hoja de estilos ha definido clases. loader. Para ello debe asignar al objeto que recibira la cadena el método htmlText.men{ font-size:10px.34 3.htmlText += "<p class='fec'>Publicado: " + fecha + "</p>".fec{ color:#ff0000. lo debe asignar a la etiqueta correspondiente: Se crea la funcion invocada despues de la descarga: function completado (event:Event):void { var sheet:StyleSheet = new StyleSheet().htmlText += "<p class='men'>" + mensaje + "</p>". font-size:12px. sheet.addEventListener(Event.parseCSS(URLLoader(event. mensaje_txt. } CARRERAS PROFESIONALES CIBERTEC . debe hacer lo siguiente: //Carga archivo CSS var loader:URLLoader = new URLLoader(). Se insertan las etiquetas HTML que recibiran el estilo css.COMPLETE. mensaje_txt. mensaje_txt.css"). Cargar un documento css Este documento css contiene definicion de formatos para los textos y parrafos que se insertaran en la pelicula de flash. loader. mensaje_txt. var req:URLRequest = new URLRequest("noticias.htmlText = "". } La estructura de un documento css debe ser la siguiente: . completado). font-size:10px.load(req). mensaje_txt.data).styleSheet = sheet. Para cargar un documento css.

titulo { color:#FF0000. CIBERTEC CARRERAS PROFESIONALES . Luego en el primer fotograma de insertar el siguiente código de actionScript 3. Debe tener un ancho de 450 por 300 de alto. va a crear una pelicula e insertar un texto dinamico con el nombre txtS. display: inline. display: block. debe crear la hoja de estilos y grabarlo con el nombre miCSS.css.Helvetica. text-decoration: underline. text-decoration: none. En primer lugar.concepto { color:#CC0099. font-weight: bold. font-family: Arial. font-size: 18px. } a:link { color:#3399FF.0: var ejemploTexto:String = "<p class='titulo'>Css en Flash CS3 </p>". La hoja de estilos css tiene los siguientes estilos definidos: p{ color: #000000. display: inline. } Después.sans-serif.DISEÑO WEB II 35 Actividades Actividad 1: Aplicar estilos CSS a una película Flash En esta actividad se va a aplicar estilos a los textos de una película de Flash.sans-serif. font-weight: bold. font-family: Arial. font-style:oblique. font-size: 12px.Helvetica. } a:hover{ color: #999999. } . ejemploTexto += "<p><span class='concepto'>Hojas de estilo Css: </span>". } .

textLoaded). imagenes. var wordList:Array = new Array(). Este archivo es llamado desde Flash. addChild(tf). var textLoader:URLLoader = new URLLoader(). textLoader.load(req).width = stage.target). ejemploTexto += " Este ejemplo funciona de la misma manera en Flash CS4.addEventListener(Event.styleSheet = sheet.css e impreso en un texto dinamico llamado tf.parseCSS(URLLoader(event. etc. El contenido del archivo de texto es el siguiente: <h1>Este es un titulo para flash</h1> <p>Es un parrafo para formatear</p> <p>Es un segundo parrafo para formatear</p> <a href='#'>enlace</a> En el primer fotograma de la pelicula. tf.height = stage. function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet(). var cssLoader:URLLoader = new URLLoader(). loader.stageWidth.htmlText = ejemploTexto. txtS.".disney.". } Actividad 2: Esta actividad es similar a la anterior sola que el texto a formatear se encuentra grabado en un archivo externo llamado textoParaFlash.css"). CARRERAS PROFESIONALES CIBERTEC . sheet. loader.com'>Disney</a>. var req:URLRequest = new URLRequest("miCSS.txt. txtS.36 ejemploTexto += "Determinan el estilo y el formato de los elementos a los que se aplican ". ejemploTexto += "Los enlaces tambien se pueden personalizar -->".data). ejemploTexto += "<a href='http://www.COMPLETE. ingrese el siguiente codigo: var tf:TextField = new TextField().</p>". var loader:URLLoader = new URLLoader().stageHeight. ejemploTexto += "como textos. formateado con un archivo CSS tambien externo llamado miCSS. var css:StyleSheet = new StyleSheet().COMPLETE. tf. onCSSFileLoaded).addEventListener(Event.

DISEÑO WEB II 37 function cssLoaded(e:Event):void { css.COMPLETE.styleSheet = css.length.parseCSS(e. CIBERTEC CARRERAS PROFESIONALES .txt")). for(var i:int = 0. i++){ tf. } textLoader.load(new URLRequest("textoParaFlash.target. i < wordList. cssLoaded). } } function textLoaded(e:Event):void { wordList = e.css")).load(new URLRequest("miCSS.split("\n"). cssLoader.addEventListener(Event.htmlText += "<h4>" + wordList[i] + "</h4>".data). cssLoader. tf.data.target.

38 Autoevaluación Diseñe un menú en Flash que se pueda editar el comportamiento de los textos desde un archivo css CARRERAS PROFESIONALES CIBERTEC .

y más flexibilidad a los cambios Un estilo tiene la siguiente estrucutura: Selector { Atributo1=valor. debe usar los siguientes metodos: var loader:URLLoader = new URLLoader(). . menos peso en las páginas. ……. loader. Si desea saber más acerca de estos temas.com/view/4452/as3-load-external-txt-and-css/ En esta página. var req:URLRequest = new URLRequest("miCSS.tutorialized. AtributoN=valor. http://www. loader. http://snipplr.COMPLETE. puede consultar las siguientes páginas.load(req). CIBERTEC CARRERAS PROFESIONALES .addEventListener(Event. mayor organización de su codigo. hallará un tutorial que explica la integración entre CSS y Flash.com/view/tutorial/Loading-External-CSS-In-AS3/36293 Aquí hallará ejercicios paso a paso para adjuntar hojas de estilo a su pelicula.css").DISEÑO WEB II 39 Resumen CSS es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. onCSSFileLoaded). } Para que Flash importe un archivo css. Aprender a conocer CSS le dará como resultado un mejor flujo de trabajo.

40 CARRERAS PROFESIONALES CIBERTEC .

CIBERTEC CARRERAS PROFESIONALES .DISEÑO WEB II 41 UNIDAD DE APRENDIZAJE 2 SEMANA 5 EL LENGUAJE XML LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. CSS y Flash en el diseño de animaciones. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. estructurando la información con XML para transformarla y presentarla en una pagina web. CSS y Flash ACTIVIDADES PROPUESTAS • Los alumnos integran XML. TEMARIO • Integración de XML.

incluyendo los menus. listado de noticias.1. se hara un repaso de los principales metodos y propiedades mas usados para diseñar estas aplicaciones. la edicion de los diferentes componentes de la película sera mas facil y eficiente. entre muchas más. Como resultado de una buena integración se pueden diseñar una galeria de imágenes.data). formateados con una hoja de estilos externa.target. var request:URLRequest = new URLRequest("noticias. Para cargar un documento xml. INTEGRACION DE FLASH.COMPLETE. un noticiero dinamico.load(request). var myXML:XML= new XML(event. los menus cargados dinámicamente desde un archivo xml. Antes de diseñar algunas aplicaciones. De esa forma. XML Y CSS La integración consiste en diseñar una película de Flash con carga de imágenes de un archivo xml. los textos de la película. Cargar un documento xml Este documento xml puede contener nombres de imágenes. titulos de los menus.dataFormat = URLLoaderDataFormat.42 1. noticias_xml. onComplete). 1. un menú dinamico. Para recuperar datos del objeto xml cree la función invocada cuando se descargue (onComplete) y use los metodos y propiedades de XML: CARRERAS PROFESIONALES CIBERTEC .TEXT. noticias_xml. noticias_xml. etc.xml"). debe hacer lo siguiente: En Flash escribir el siguiente código para cargar el documento xml: var noticias_xml:URLLoader = new URLLoader().addEventListener(Event.

. . Para cargar un documento css.2. var req:URLRequest = new URLRequest("noticias. . loader. Lucio Gutiérrez. mensaje_txt.attributes() //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo] titulo=myXML. CIBERTEC CARRERAS PROFESIONALES . mensaje_txt. Para ello debe asignar al objeto que recibira la cadena el método htmlText. . .titulo La estructura de un documento xml debe ser la siguiente: <noticias> <noticia fecha="14/04/2005"> <titulo>Nave rusa tripulada se acopla sin problemas … Internacional</titulo> <mensaje>Moscú (dpa) . lo debe asignar a la etiqueta correspondiente: mensaje_txt.La nave rusa Soyuz.. .noticia[_indice].htmlText += "<p class='fec'>Publicado: " + fecha + "</p>". Cargar un documento css Este documento css contiene definicion de formatos para los textos y parrafos que se insertaran en la pelicula de flash. las multitudinarias. Se insertan las etiquetas HTML que recibiran el estilo css. debe hacer lo siguiente: //Carga archivo CSS var loader:URLLoader = new URLLoader(). levantara el estado de emergencia decretado en Quito el viernes.parseCSS(URLLoader(event.COMPLETE.css"). </mensaje> <image>vaticano.target). </mensaje> <image>nave.htmlText += "<p class='men'>" + mensaje + "</p>". se acopló hoy automáticamente sin problemas a la Estación Espacial Internacional ..addEventListener(Event..load(req). loader. .htmlText += "<p class='tit'>" + titulo + "</p>". .noticia[_indice]. con tres tripulantes a bordo. Si en la hoja de estilos ha definido clases.jpg</image> </noticia> </noticias> 1.data).DISEÑO WEB II 43 //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha] fecha=myXML. . mensaje_txt. sheet. .htmlText = "". onCSSFileLoaded). Se crea la funcion invocada despues de la descarga: function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet().jpg</image> </noticia> <noticia fecha="25/02/2005"> <titulo>Finaliza estado de excepción pero crece descontento</titulo> <mensaje>Luego de que el presidente de Ecuador.

44 mensaje_txt. font-size:10px. } La estructura de un documento css debe ser la siguiente: .men{ font-size:10px.styleSheet = sheet. } CARRERAS PROFESIONALES CIBERTEC .fec{ color:#ff0000.tit{ color:#006633. text-align:center. } . font-size:12px. } .

DISEÑO WEB II 45 Actividades Ejercicio 1: Noticias dinamicas La siguiente actividad se ha adptado para ActionScript 3. un texto estatico y un texto dinamico): A) Botones de navegación: son utilizados para navegar por las noticias cargadas desde el documento xml (son dos copias de una instancia y una de ellas reflejada). Los textos (titulo y mensaje) y el nombre de la imagen. Es importante asignar a ambos elementos el nombre de instancia: anterior_btn y siguiente_btn CIBERTEC CARRERAS PROFESIONALES . 1 Interfaz en flash Crear la interfase de usuario en una capa llamada “elementos”: (dos botones.cristalab.com/tutoriales/lector-de-noticias-xml-en-flash-con-imagenes-c186l/ En el ejemplo tenemos tres noticias. seguidamente la imagen es cargada de forma externa (archivos jpg).xml. Cuando el archivo de Flash se ejecuta. se carga la primera noticia (titulo.0 de la siguiente direccion: http://www. son recuperados del archivo noticias. mensaje e imagen) y posteriormente podemos pasar a la siguiente y/o anterior haciendo uso de los botones ubicados en la parte superior (flechas de color verde).

css"). onCSSFileLoaded).x=4 loader1. var req:URLRequest = new URLRequest("noticias.y=32. var loader1:Loader = new Loader() loader1. // Carga archivo XML var noticias_xml:URLLoader = new URLLoader().0 //Permite caracteres tradicionales como letras con tilde la ñ. addChild(loader1).46 Propiedades de instancias de los botones: B) El contenedor de la imagen La imagen se cargara con código AS3 de la siguiente manera: var request:URLRequest = new URLRequest(imagen). System.load(request). CARRERAS PROFESIONALES CIBERTEC . loader.dataFormat = URLLoaderDataFormat.8 loader1. C) Cuadro de Texto dinámico: es utilizado para mostrar el titulo y resumen de la noticia previamente formateada: Propiedades de instancia: 2 Codigo en ActionScript 3. //Carga archivo CSS var loader:URLLoader = new URLLoader(). noticias_xml.TEXT. etc.addEventListener(Event. loader.load(req).useCodePage=true //Se declara la variable indice de tipo número (utilizada para referencia la noticia a mostrar) var indice:Number=0.COMPLETE.

var titulo:String.noticia[_indice].addEventListener(MouseEvent.htmlText += "<p class='tit'>" + titulo + "</p>".htmlText = "". var request:URLRequest = new URLRequest("noticias.image //Mostrando los datos recuperados en el cuado de texto mensaje_txt y cargando la imagen mensaje_txt.COMPLETE.avanza).noticia[_indice].data) cargarDatos(indice).load(request).titulo //Se accede al segundo hijo de elemento [noticia] y se recupera el valor del primer elemento de [mensaje] mensaje=myXML. //Cargado la imagen JPG externa en el clip loader con el valor recuperado del objeto xml var request:URLRequest = new URLRequest(imagen). var myXML:XML . //Recuperando datos del objeto xml //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha] fecha=myXML.8 loader1.attributes() //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo] titulo=myXML.noticia[_indice].length()){//retringue a avanzar solo si hay una [noticia] siguiente CIBERTEC CARRERAS PROFESIONALES .xml"). mensaje_txt.mensaje //Se accede al último hijo de elemento [noticia] y se recupera el valor del primer elemento de [imagen] imagen=myXML.x=4 loader1.htmlText += "<p class='fec'>Publicado: " + fecha + "</p>".CLICK.anterior). //Función que permite avanzar a la [noticia] siguiente almacenada en el objeto xml function avanza(event:MouseEvent):void { if(indice<=myXML.htmlText += "<p class='men'>" + mensaje + "</p>".DISEÑO WEB II 47 noticias_xml. mensaje_txt.addEventListener(MouseEvent. } function cargarDatos(_indice:Number){ //Se inicializan variables utilizadas para almenar los datos de una noticia var fecha:String.noticia[_indice]. var mensaje:String.load(request). var imagen:String. var loader1:Loader = new Loader() loader1. anterior_btn. function onComplete(event:Event):void { myXML = new XML(event.target. mensaje_txt. } siguiente_btn.y=32. onComplete). noticias_xml.CLICK. addChild(loader1).addEventListener(Event.

jpg" /> <fotos label="02" source=". //incrementado en uno el indice cargarDatos(indice). el cual debe tener la siguiente estructura: <gal> <fotos label="01" source=".jpg" thumb=". En la interfaz no hay absolutamente ningun elemento visual. //disminuido en uno el indice cargarDatos(indice).jpg" /> <fotos label="03" source="./images/01. Todo lo que se ve en la película se diseña mediante código AS3.jpg" thumb=".styleSheet = sheet.jpg" /> CARRERAS PROFESIONALES CIBERTEC . sheet. Primero de asegurarse de crear su archivo galeria.parseCSS(URLLoader(event./thumbnails/03. //recuperando y mostrando los datos y la imagen en la pantalla } } function anterior(event:MouseEvent):void { if(indice>0){//retringue a avanzar solo si hay una [noticia] siguiente indice--.target).jpg" thumb=". //recuperando y mostrando los datos y la imagen en la pantalla } } function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet(). mensaje_txt./images/03. } Ejercicio 2: Galeria de imágenes dinamicas Esta galeria es muy simple./thumbnails/01./thumbnails/02.data)./images/02.xml.48 indice++.

jpg" thumb=".setSize(550.source = "images/01.jpg" /> <fotos label="06" source=".data.COMPLETE.data).300).addEventListener(Event./thumbnails/06.CHANGE. var url:URLRequest = new URLRequest(". Completar). alCambiar).net.xml").move(25./images/06.columnWidth = 150./images/04.controls. addChild(ui).move(100. ui. import flash.120). import flash./thumbnails/05.addEventListener(Event. list. function alCambiar(event){ ui.TileList. var dp:DataProvider = new DataProvider(xml). } list.fla el cual debe tener en el primer fotograma de su pelicula.containers.jpg" /> <fotos label="05" source="./xml/galeria. list. //Lista de Fotos var list:TileList = new TileList().dataProvider = dp./thumbnails/04. import fl.UILoader.URLRequest. //Eventos function Completar(event){ var xml:XML = new XML(loader. list.net. ui.source = list. list. addChild(list).load(url). list. el siguiente codigo en AS3:4 import fl.jpg" /> </gal> Luego en Flash cree un archivo con el nombre Archivo galeria.jpg".setSize(400.DataProvider //Visualizador var ui:UILoader = new UILoader(). var loader:URLLoader = new URLLoader().sourceField = "thumb"./images/05.DISEÑO WEB II 49 <fotos label="04" source=". CIBERTEC CARRERAS PROFESIONALES . ui.selectedItem. //XML var xml:XML.25).jpg" thumb=".rowHeight = 100. loader.jpg" thumb=".source.340) list. import fl. } loader.URLLoader.

CARRERAS PROFESIONALES CIBERTEC .50 Autoevaluación Diseñe un menú dinamico en Flash cuyo texto se pueda modificar de un archivo xml y cuyo formato se pueda modificar de un archivo css.

. Si desea conectarse con un documento CSS debe conocer bien los métodos URLLoader y URLRequest. URLLoaderDataFormat. puede consultar las siguientes páginas. Asi como con el gestor de eventos addEventListener. URLRequest y el gestor de eventos addEventListener.com/2008/12/23/menu-and-banner-from-xml-with-as3and-flash-cs3/ En esta página. debe familiarizarse con los metodos que permiten el acceso a estas tecnologías.0.com/2008/05/14/creating-an-xml-gallery-withactionscript-30/ Aquí hallará un tutorial para crear una galeria de imágenes en ActionScript 3.DISEÑO WEB II 51 Resumen Para desarrollar aplicaciones en Flash que integren CSS y XML.prodevtips. CIBERTEC CARRERAS PROFESIONALES . hallará un tutorial para desarrollar banners y menus dinamicos. http://www. http://www. Si desea saber más acerca de estos temas.clickpopmedia. Para conectarse con un documento XML debe conocer bien los objetos URLLoader.

52 CARRERAS PROFESIONALES CIBERTEC .

usando el lenguaje ActionScript.DISEÑO WEB II 53 UNIDAD DE APRENDIZAJE 3 SEMANA 6 EL LENGUAJE ACTIONSCRIPT LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. para integrar recursos interactivos o proyectos multimedia. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. TEMARIO • Manejo de Niveles ACTIVIDADES PROPUESTAS • Los alumnos diseñan interfaces en flash para paginas web • Los alumnos diseñan paginas web con flash CIBERTEC CARRERAS PROFESIONALES .

1. conocida como lista de visualización. tal y como se muestra a continuación. (Stage) Tal y como muestra la ilustración. La lista de visualización contiene todos los elementos visibles en la aplicación.0 tiene una jerarquía de objetos visualizados. los elementos en pantalla se ubican en uno o varios de los siguientes grupos: 1.54 1 LISTA DE VISUALIZACION Cada aplicación creada con ActionScript 3. que contiene todos los objetos de visualización en pantalla. El objeto Stage es el contenedor de nivel superior y se encuentra arriba del todo en la jerarquía de la lista de visualización: CARRERAS PROFESIONALES CIBERTEC . Cada aplicación tiene un objeto Stage. Objeto Stage El objeto Stage es el contenedor base de los objetos de visualización.

la siguiente ilustración muestra un tipo de objeto DisplayObjectContainer. denominado Sprite.2. El "marco del cuadro" contiene un rectángulo redondeado que se dibuja en ActionScript. El paquete flash. que contiene diversos objetos de visualización: A.display incluye una clase DisplayObject. todos los elementos que aparecen en la pantalla de una aplicación son tipos de objetos de visualización. 1. Objetos de visualización En ActionScript 3.. Un objeto Bitmap. La clase DisplayObjectContainer es una subclase de la clase DisplayObject. B. como formas vectoriales.0. entre otros. CIBERTEC CARRERAS PROFESIONALES . Por ejemplo. Este objeto Shape tiene aplicado un filtro de sombra. Se trata de una clase base ampliada por diversas otras. Un objeto TextField. pueden contener objetos secundarios que también sean objetos de visualización. Este tipo de objeto de visualización tiene distintos estados "Arriba". Un objeto SimpleButton. "Abajo" y "Sobre". clips de película o campos de texto. además de tener su propia representación visual. D.DISEÑO WEB II 55 Cada archivo SWF tiene una clase de ActionScript asociada. Contenedores de objetos de visualización Los contenedores de objetos de visualización son tipos especiales de objetos de visualización que. Cuando se abre un archivo SWF en Flash Player o en Adobe AIR. conocida como la clase principal del archivo SWF. Estas distintas clases representan tipos diferentes de objetos de visualización. 1. Flash Player o AIR llama a la función constructora de dicha clase y la instancia que se crea (que es siempre un tipo de objeto de visualización) se añade como elemento secundario del objeto Stage. el objeto Bitmap se cargó de un archivo JPEG externo a través de un objeto Loader. En este caso. C. Un objeto DisplayObjectContainer puede contener varios objetos de visualización en su lista de elementos secundarios.3. Un objeto Shape.

El único elemento que no necesita de esto. se llevan a cabo numerosas tareas relacionadas con la programación de la visualización. Como se ha comentado previamente. CARRERAS PROFESIONALES CIBERTEC . hay una función constructora para la clase Shape o la clase Video. En este capítulo se describen las tareas comunes que se aplican a todos los objetos de visualización: Trabajo con la lista de visualización y los contenedores de objetos de visualización Añadir objetos de visualización a la lista de visualización Quitar objetos de la lista de visualización Mover objetos entre contenedores de visualización Mover objetos delante o detrás de otros objetos Trabajo con el escenario Definir la velocidad de fotogramas Controlar el ajuste de escala del escenario Trabajo con el modo de pantalla completa Gestionar eventos de objetos de visualización Colocar objetos de visualización.4. 1. Aunque todos los objetos de visualización visibles heredan de la clase DisplayObject. Tareas comunes de programación de la visualización Como gran parte de la programación de ActionScript implica crear y manipular elementos visuales. pero no hay ninguna función constructora para la clase DisplayObject. el tipo de cada uno de ellos pertenece a una subclase específica de la clase DisplayObject. incluida la creación de interacción de arrastrar y colocar Cambiar el tamaño de los objetos de visualización. Para agregar un objeto al escenario insertamos el siguiente código: addChild(). ajustar su escala y girarlos Aplicar modos de mezcla. si no esta adentro de un contenedor.56 Cuando se habla de los objetos de visualización. No se puede ver algo. es el escenario. el objeto Stage es un contenedor de objeto de visualización. también se hace referencia a los objetos DisplayObjectContainer como contenedores de objetos de visualización o simplemente como contenedores. Por ejemplo. transformaciones de color y transparencia a los objetos de visualización Enmascarar objetos de visualización Animar objetos de visualización Cargar contenido de visualización externo (como archivos SWF o imágenes) 2 LOS CONTENEDORES Hay algo que hay que tener absolutamente claro.

Ahora Vamos a meter nuestro texto en un contenedor de tipo Sprite. Si colocamos este código. CIBERTEC CARRERAS PROFESIONALES .0_es/ActionScriptLangRefV3/classsummary. Loader La clase Loader se utiliza para cargar archivos SWF o archivos de imagen (JPG. El escenario representa toda el área en la que se muestra el contenido de Flash®. no veremos nada en el escenario. vemos que en pantalla sale Hola Mundo.html) 2. var miTexto:TextField = new TextField(). 2.text = "Hola Mundo". // Escribo lo que quiero que diga this. // Creamos nuestro contenedor this. // Agregamos miContenedor.addChild(miTexto). En el siguiente código vamos a crear un texto y vamos a ver como funciona addChild.DISEÑO WEB II 57 Todos los contenedores tienen un método llamado addChild que traducido es “Añadir Niño”. porque no lo hemos agregado a ningún contenedor.1. El objeto que carga con el método load.text = "Hola Mundo ".addChild(miTexto). Es necesario acceder a él a través de la propiedad stage de una instancia de DisplayObject. // Agregamos el texto al contenedor Si colocamos este código veremos que aparece nuestro Hola Mundo en pantalla.addChild(miContenedor). // Creo el campo de texto miTexto. miTexto. Como vemos en este código. si no hacemos esto.1. var miContenedor:Sprite = new Sprite(). PNG o GIF). Tipos de contenedores Para saber todas las características de cada tipo de contenedor lo mejor es ir a la referencia de Adobe: (http://livedocs.com/flash/9. El objeto de visualización cargado se añade como elemento secundario del objeto Loader. // Escribo lo que quiero que diga Si colocamos este código. no serán visibles. Stage La clase Stage representa el área de dibujo principal.1.2.1. Utilice el método load() para iniciar la carga. var miTexto:TextField = new TextField(). 2.text = "Hola Mundo". Este objeto solo puede tener un hijo. Este es uno de los métodos más importantes en AS3. // Creo el campo de texto miTexto.adobe. No es posible obtener acceso al objeto Stage de forma global. Ahora lo vamos agregar al contenedor Escenario var miTexto:TextField = new TextField(). hay que agregar también los otros contenedores al escenario.

pero carece de línea de tiempo. Proporciona una alternativa a la funcionalidad de la clase MovieClip.3. que conserva toda la funcionalidad de versiones anteriores de ActionScript para ofrecer compatibilidad retroactiva. DisplayObjectContainer. InteractiveObject. Por ejemplo. pero no elementos secundarios. como los objetos Shape y TextField. mientras que otros objetos de visualización.6. Cada objeto DisplayObjectContainer tiene su propia lista de elementos secundarios para organizar el orden z de los objetos. DisplayObject y EventDispatcher. así como propiedades más avanzadas del objeto.0. cuál se dibuja detrás. Sprite sería una clase base lógica para componentes de interfaz de usuario (IU) que típicamente no utilizan línea de tiempo. CARRERAS PROFESIONALES CIBERTEC . 2. DisplayObjectContainer La clase DisplayObjectContainer es la clase base de todos los objetos que pueden actuar como contenedores de objetos de visualización en la lista de visualización. etc. La clase DisplayObject admite funcionalidad básica.1. como la posición x e y de un objeto. Los objetos DisplayObjectContainer pueden tener objetos de visualización secundarios. Utilice la clase DisplayObjectContainer para organizar los objetos de visualización en la lista de visualización. 2. A diferencia del objeto Sprite. El orden z es el orden de delante hacia atrás que determina qué objeto se dibuja delante.1. como su matriz de transformación. 2. Sprite La clase Sprite es un elemento constituyente básico de la lista de visualización: un nodo de la lista de visualización que puede mostrar gráficos y también contener elementos secundarios. Sprite es una clase base adecuada para objetos que no requieren líneas de tiempo. DisplayObjectContainer La clase DisplayObject es la clase base de todos los objetos que pueden situarse en la lista de visualización. Los métodos de la clase MovieClip proporcionan la misma funcionalidad que las acciones que van dirigidas a clips de película. La lista de visualización administra todos los objetos mostrados en Flash Player.4. Utilice la clase DisplayObjectContainer para organizar los objetos de visualización en la lista de visualización. son nodos "hoja" que sólo tienen elementos principales y del mismo nivel.1.58 2. Un objeto Sprite es similar a un clip de película. un objeto MovieClip tiene línea de tiempo.5. La lista de visualización administra todos los objetos mostrados en Flash Player. MovieClip La clase MovieClip hereda de las siguientes clases: Sprite. También existen métodos adicionales que carecen de acciones equivalentes en el cuadro de herramientas Acciones del panel Acciones en la herramienta de edición de Flash. La clase Sprite es una novedad de ActionScript 3.1.

La estructura de nuestra película quedaría así: Con esta imagen se entiende bien el concepto de profundidad. es que cada contenedor. aparecerán por delante. tiene una lista de los objetos que le hemos metido adentro. // Creamos el contenedor de carga carga.addChild(miTexto).2. Esta lista tiene tres datos. // Agregamos el contenedor a la escena Después creamos de manera grafica dos cuadros y con F8 los convertimos en MovieClip y de nombre de instancia les ponemos cuadro1 y cuadro2.text = "Chao Mundo".jpg")). el tipo de objeto y el nombre. CIBERTEC CARRERAS PROFESIONALES . Los objetos que están mas arriba.addChild(cuadro2). taparía todo lo demás por que esta en la parte mas alta de la lista.addChild(carga). miContenedor. // Agregamos el texto el segundo texto Ahora le agregamos una imagen en un contenedor Loader var carga:Loader = new Loader(). miContenedor. miTexto2. Si la imagen del ejemplo fuera muy grande.y = 20. la posición dentro del contenedor. // Colocamos el cuadro 2 en el contenedor Si hicimos todo el código anterior. // Le damos el archivo a cargar this. miTexto2. de la lista de visualización. Al código que vimos antes le agregamos un segundo texto y lo colocamos dentro del contenedor sprite var miTexto2:TextField = new TextField().load(new URLRequest("imagen_Cualquiera. Otra de las cosas importantes. Colocamos el siguiente código.DISEÑO WEB II 59 2. La posición de un objeto dentro de un contenedor.

solo lo saca del contenedor. y al no estar adentro de ningún contenedor no se puede ver. 0).setChildIndex(this. Se desaparece miTexto2 removeChildAt(): Este método saca del contenedor el objeto que le indiquemos. el nombre del método y los parámetros.visible = false. o un método que nos permite buscar con el nombre un hijo dentro de un contenedor. como en las sentencias siguientes: myMovieClip. Hace que la imagen se vaya al fondo de la película CARRERAS PROFESIONALES CIBERTEC . trace(this. En seguida. getChildByName(): Me busca el objeto que tenga el nombre que yo le diga miContenedor. Hay una propiedad.numChildren).getChildAt(2). Para eliminarlo se utiliza delete. setChildIndex(): Cambia la posicion de un hijo a donde nosotros le indiquemos this.60 3 MÉTODOS Para utilizar un método. Pero nada mas hemos visto addChild. numChildren: Esta propiedad nos permite saber cuantos hijos tiene un contenedor. después. debe invocarlo indicando la ruta de destino del nombre de instancia seguida de un punto y. miContenedor. En el ejemplo anterior seria. Me mueve el Cuadro2 horizontalmente hasta la posición 200. miContenedor. que nos dicen el número de hijos que tiene un contenedor.x = 200. o métodos que nos cambiar el orden del índice. explicaremos algunos métodos y propiedades utilizados mas frecuentemente.getChildByName(“Cuadro2” ). y los contenedores tienen otros métodos y propiedades.removeChildAt(1). getChildAt(): Este método nos dice qué objeto esta ocupando la posición que le indiquemos. Ojo no lo elimina. El resultado seria 3.play(). Saca del contenedor miTexto2.getChildAt(1).

se agrega al escenario. mc.1).x=100 instance.x=100 instance1. mc. var instance1:Object = new ClassReference1(). Luego. 0.beginFill(0xFF0000). instance.x=100 instance. lo asigna a los objetos instante e instance1 y luego lo agrega al escenario a diferentes niveles de profundidad (capas) var ClassReference:Class = getDefinitionByName("marca") as Class.addChild(DisplayObject(instance)). var ClassReference1:Class = getDefinitionByName("marca1") as Class. Al hacerse clic sobre el objeto loader. mc. var instance:Object = new ClassReference().y=100 this. se llama a la función startAnimation quien a su vez llama a la función moveCircle.y=100 addChildAt(DisplayObject(instance1).DISEÑO WEB II 61 addChildAt(): Agrega un hijo. El siguiente código obtiene los nombres de vinculacion de 2 movie clips. instance.y = 60. El siguiente código crea una instancia de la clase MovieClip llamada mc. Luego. 80). addChild(mc). mc. instance1. var instance:Object = new ClassReference(). pero nosotros le decimos en que lugar addChildAt(3) getChildIndex(): Nos dice en que posición esta un hijo Veamos algunos ejemplos para aplicar los métodos que hemos tratado en esta semana: El siguiente código captura el nombre de vinculación del movie clip que se encuentra en la biblioteca con el nombre marca.y=100 this.drawRect(0.graphics. El siguiente código inserta una imagen gif en una instancia del objeto Loader llamado loader. Le asigna a un objeto y lo agrega al escenario en las posiciones x=100 e y=100 var ClassReference:Class = getDefinitionByName("marca") as Class. Esta función se invoca al ejecutarse la línea de tiempo con el evento CIBERTEC CARRERAS PROFESIONALES . le asigna sus coordenadas y finalmente lo agrega al escenario var mc:MovieClip = new MovieClip(). dibuja un rectangulo en el movie clip mc.addChildAt(DisplayObject(instance).x = 80. 100.graphics.endFill(). mc.0).graphics.

addChild(loader).gif"). moveCircle).x += 5.ENTER_FRAME. Cuando la imagen contenida en el objeto loader llega a la coordenada x igual a 350.ENTER_FRAME.x=0 loader. } loader.load(request). startAnimation). var request:URLRequest = new URLRequest("carro amarillo.removeEventListener(Event. function moveCircle(event:Event):void { loader.addEventListener(Event. moveCircle). var loader:Loader = new Loader() loader.CLICK. if (loader. } } function startAnimation(event:MouseEvent):void { loader.y=0 loader.addEventListener(MouseEvent. se detiene la línea de tiempo del objeto loader. CARRERAS PROFESIONALES CIBERTEC .x >= 350) { loader.62 EnterFrame.

primero debe hacer lo siguiente: • • • • Generen una escena de 480 x 120 pixeles Generen un botón de 80 pixeles de ancho por 80 de alto. // Declaramos la variable de velocidad var velocidad:Number. esta lista para escribir el siguiente código: var cantidad:int = 7. En la biblioteca. generen un campo de texto dinámico cuyo nombre de instancia sea txtBoton. se va a crear un código que muestre un menú infinito. // Definimos la función que asignará la velocidad function fVelocidad( event:Event ):void { velocidad = ( ( stage. CIBERTEC CARRERAS PROFESIONALES .stageWidth / 2 ) . usando sólo 7 botones. var espacio:int = ancho + 20.mouseX ) / 16. } // Vinculamos la función con la reproducción de la escena stage. fVelocidad ). var ancho:int = 80. var limite:int = cantidad * espacio. deben asignar nombre de vinculacion al movieClip • • Dentro del MovieClip y sobre el botón.stage.ENTER_FRAME. Conviertan el botón en MovieClip (F8) y asegúrense que el eje de registro sea la esquina superior izquierda. Ahora. Eliminen cualquier objeto del menú que se encuentre en la escena. Vinculen el MovieClip a la escena con el nombre classBoton. Para usar el siguiente ejemplo.addEventListener( Event.DISEÑO WEB II 63 Actividades Ejercicio 1: Por ultimo.

mcBoton.ancho ){ // Pasamos el objeto a la derecha event.currentTarget. addChild( mcBoton ).x += velocidad. i < cantidad.txtBoton.text = “”+(i + 1).x = ( espacio * i ) + 20. mcBoton.x < . mcBoton.flashmo. i++ ){ var mcBoton:classBoton = new classBoton(). fScroll ).currentTarget. } Ejercicio 2: Diseño de página web con Flash http://www.addEventListener( Event.currentTarget.mouseEnabled = false. // Vinculamos el objeto con la función mcBoton.currentTarget.txtBoton. mcBoton.y = 20. } } for( var i:int = 0.x -= limite.x += limite.currentTarget.x > limite .64 // Definimos la función que desplazará los objetos function fScroll( event:Event ):void { // Asignamos la nueva posición del objeto event.ENTER_FRAME.ancho ){ // Pasamos el objeto a la izquierda event.com/preview/flashmo_161_pink CARRERAS PROFESIONALES CIBERTEC . // Evaluamos si ha salido a la izquierda de la escena if( event. } // Evaluamos si ha salido del límite derecho if( event.

DISEÑO WEB II 65 Ejercicio 3: Diseño de página web con Flash CIBERTEC CARRERAS PROFESIONALES .

swf Forma. Los archivos que va a necesitar son: Encabezado.66 Autoevaluación Diseñe la siguiente página web con actionScript 3.0 con los métodos aprendidos en esta semana.swf Inicio.swf CARRERAS PROFESIONALES CIBERTEC .swf Animación.

hallará información detallada sobre movie clips. http://livedocs. Los contenedores de objetos de visualización son tipos especiales de objetos de visualización que. CIBERTEC CARRERAS PROFESIONALES . todos los elementos que aparecen en la pantalla de una aplicación son tipos de objetos de visualización.cristalab. conocida como lista de visualización.adobe.0.com/flash/9. La lista de visualización contiene todos los elementos visibles en la aplicación. www. html En esta página. puede consultar las siguientes páginas.DISEÑO WEB II 67 Resumen Cada aplicación creada con ActionScript 3.0/ActionScriptLangRefV3/flash/display/MovieClip.0 tiene una jerarquía de objetos visualizados. Todos los contenedores tienen un método llamado addChild para agregar objetos de visualizacion Si desea saber más acerca de estos temas. además de tener su propia representación visual. pueden contener objetos secundarios que también sean objetos de visualización.com/tips/el-reemplazo-a-attachmovie-en-actionscript-3-c28368l/ Aquí hallará ejercicios que indican cómo agregar movie clips. El objeto Stage es el contenedor de nivel superior y se encuentra arriba del todo en la jerarquía de la lista de visualización: En ActionScript 3.

68 CARRERAS PROFESIONALES CIBERTEC .

• Los alumnos diseñan noticias dinamicas. • Los alumnos diseñan un menú dinamico. CSS y XML ACTIVIDADES PROPUESTAS • Los alumnos diseñan una galeria de imagenes.DISEÑO WEB II 69 UNIDAD DE APRENDIZAJE 3 SEMANA 9 EL LENGUAJE XML LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. estructurando la información con XML para transformarla y presentarla en una pagina web. TEMARIO • Desarrollo de aplicaciones Web con Flash. CIBERTEC CARRERAS PROFESIONALES .

2 NOTICIAS DINAMICAS Diseñe la siguiente galeria de imágenes usando XML. Las imágenes se deben cargar después de hacer clic en los botones CARRERAS PROFESIONALES CIBERTEC .70 1 GALERIA DE IMAGENES Diseñe la siguiente galeria de imágenes usando XML. Las imágenes se deben cargar después de hacer clic en los botones de los costados de la pantalla o en cualquiera de las imágenes de la parte inferior.

mbelatam.mx.DISEÑO WEB II 71 3 MENÚ DINÁMICO Diseñe un menú dinamico de acuerdo al modelo que se encuentra en la siguiente direccion URL: http://www.php?art_id=359&categ=351 CIBERTEC CARRERAS PROFESIONALES .com/index.

72 CARRERAS PROFESIONALES CIBERTEC .

para integrar recursos interactivos o proyectos multimedia. propiedades y eventos de clips de películas 1. usando el lenguaje ActionScript. TEMARIO • • • • Clips de película Métodos Propiedades Gestión de eventos ACTIVIDADES PROPUESTAS • Los alumnos diseñan animaciones usando métodos.DISEÑO WEB II 73 UNIDAD DE APRENDIZAJE 2 SEMANA 10 EL LENGUAJE ACTIONSCRIPT LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. CLIPS DE PELICULA CIBERTEC CARRERAS PROFESIONALES .

name = nulo. • rotation = Rotación. Predeterminado 1 • visible = Si es visible o no. pero estas son las más importantes. PROPIEDADES DE MOVIE CLIPS Una propiedad representa uno de los elementos de datos que se empaquetan en un objeto. Las instancias de clip de película pueden anidarse unas dentro de otras para crear una jerarquía.74 Un clip de película (movie clip) es una mini película de Adobe Flash CS3: tiene su propia línea de tiempo y sus propiedades. Es posible modificar algunas de las características del clip de película. Para distinguir una instancia de otra. • • • • CARRERAS PROFESIONALES CIBERTEC . Dichas propiedades se han definido en la clase que representa al objeto MovieClip.. es posible cambiar algunos valores en el inspector de propiedades como. rotation o parent. Por ejemplo. En la programación orientada a objetos de ActionScript. Predeterminado 0 • scaleX = Escala horizontal. entre otras. Predeterminado 100 height = Altura en pixeles. En otras palabras son las caracteristicas que contiene un objeto. Flash le coloca un nombre hasta que nosotros le demos el propio • parent = el contenedordonde esta. cada vez que se utiliza un clip se lo denomina instancia del clip de película. es necesario asignar un nombre a cada instancia. o realizar algunos ajustes de color como cambiar su valor de transparencia alfa o aplicarle un filtro de sombra. puesto que no puede tener propiedades como alpha o x. . La clase MovieClip tiene las siguientes propiedades: alpha = Nivel de transparencia. Predeterminado 0 • y = Posición en vertical en pixeles. y. como utilizar la herramienta Transformación libre para girar el rectángulo. Predeterminado true • x = Posición en horizontal en pixeles. Otras herramientas de Flash permiten realizar más cambios. Predeterminado 1 • scaleY = Escala vertical. width = Anchura en pixeles. Un símbolo de clip de película de la biblioteca puede utilizarse varias veces en un documento de Flash. por ejemplo. hay tres tipos de características que puede contener cualquier clase u objeto MovieClip: ■ Propiedades ■ Métodos ■ Eventos Estos elementos se utilizan conjuntamente para administrar los elementos de datos que utiliza el programa y para decidir qué acciones deben llevarse a cabo y en qué orden 2. cuando está seleccionado. Todas estas acciones para modificar un símbolo de clip de película en el entorno de edición de Flash también se pueden realizar en ActionScript cambiando los elementos de datos que se agrupan en un único paquete denominado objeto MovieClip. El escenario es un objeto especial. la coordenada x o la anchura. Predeterminado 0 Hay más propiedades.

gotoAndPlay. se trataran algunos métodos mas complejos que permitirán realizar animaciones mas complejas. animarlo a lo largo de una guía de movimiento. También puede utilizar ActionScript para activar y desactivar una máscara durante la reproducción de una película. El clip de película de máscara reproduce todos los fotogramas de su línea de tiempo. utilizar formas separadas en una sola máscara o cambiar el tamaño de una máscara de forma dinámica. En el siguiente ejemplo.DISEÑO WEB II 75 A continuación se muestran algunos ejemplos de código ActionScript que utiliza propiedades. igual que un clip de película normal. Sólo se pueden utilizar rellenos en un clip de película que se usa como máscara. stop. El punto.scaleX = 1. etc.5 veces más ancho: square.5. los trazos se pasan por alto. 3. seguida de un punto (. triangle) como nombre del objeto.rotation = triangle. MÉTODOS DE MOVIE CLIPS Un método es una acción que puede llevar a cabo un objeto movie clip. En la semana anterior se han explicado algunos métodos de reproducción como play. No puede utilizar una máscara para enmascarar otra máscara ni establecer la propiedad _alpha de un clip de película de máscara. se ejecuta la funcion moverMask al ejecutarse la línea de tiempo del movie clip mascara_mc. Observe la estructura común: se utiliza una variable (square.1 mask() Puede utilizar un clip de película como una máscara para crear un agujero a través del cual se ve el contenido de otro clip de película. Esta línea de código mueve el objeto MovieClip denominado square a la coordenada x = 100 píxeles: square. 3.) y del nombre de la propiedad (x. scaleX). CIBERTEC CARRERAS PROFESIONALES . El movie clip img_mc es una imagen de fondo y la mascara es un movie clip circular llamado mascara_mc. Este código utiliza la propiedad rotation para que el objeto MovieClip square gire de forma correspondiente a la rotación del objeto MovieClip triangle: square. En esta semana. Puede hacer que el clip de película de máscara se pueda arrastrar.x = 100. La función captura las coordenadas del Mouse y la mascara se alinea con el puntero de tal forma que al mover el Mouse. denominado operador de punto. rotation. gotoAndStop.rotation. se utiliza para indicar el acceso a uno de los elementos secundarios de un objeto. se mueve también la mascara. Este código altera la escala horizontal del objeto MovieClip square para hacerlo 1.

moverMask) function moverMask(e:Event):void { mascara_mc. } 3.MOUSE_UP. En el siguiente ejemplo se evalúa el contacto entre dos movie clips function controlaContacto(e:Event):void { if(circle_1_mc. circle_1_mc. circle_1_mc. Comprueba si el objeto ha colisionado con un clip de película y devuelve un valor booleano (true o false).MOUSE_DOWN.text='no'. else msj_txt.76 img_mc.stopDrag().soltar).ENTER_FRAME.ENTER_FRAME. } this.x=mouseX // se asigna a la mascara la posición x del mouse mascara_mc. Los parámetros x e y especifican un punto en el espacio de coordenadas del escenario.3.text='si'. hitTestObject El método hitTestObject del objeto MovieClip detecta las colisiones dentro de una película.hitTestObject(circle_0_mc)) msj_txt.arrastrar).cacheAsBitmap=true mascara_mc.startDrag(true).controlaContacto) circle_1_mc.y=mouseY // se asigna a la mascara la posición y del mouse } 3.addEventListener(MouseEvent. hitTestPoint Evalúa el objeto de visualización para comprobar si se solapa o presenta un punto de intersección con el punto especificado por los parámetros x e y.cacheAsBitmap=true img_mc. CARRERAS PROFESIONALES CIBERTEC .2. function arrastrar (m:MouseEvent):void { circle_1_mc.ENTER_FRAME.addEventListener(Event.addEventListener(Event.addEventListener(MouseEvent.mask=mascara_mc //se asigna una mascara al movie clip img_mc mascara_mc.addEventListener(Event.controlaContacto) } function soltar (m:MouseEvent):void { circle_1_mc. no el contenedor del objeto de visualización que contiene el objeto de visualización (a no ser que el contenedor del objeto de visualización sea el escenario).

GESTION DE EVENTOS La diferencia principal entre la gestión de eventos en ActionScript 3.mouseY. black_mc. La técnica para especificar determinadas acciones que deben realizarse como respuesta a eventos concretos se denomina gestión de eventos.controllaMouse). ¿en qué botón se hará clic o qué objeto Loader está cargando la imagen? El origen del evento también se denomina objetivo del evento. Cuando se escribe código ActionScript para llevar a cabo la gestión de eventos.text='si'.addEventListener(Event. else msj_txt.hitTestPoint(mouseX. a qué se va a responder? Es importante identificar esto porque muchos objetos activan varios eventos.0 ofrecen diversas formas de gestionar los eventos: • Controladores de eventos on() que se pueden colocar directamente en instancias de Button y MovieClip. Las versiones de ActionScript anteriores a la 3.text='no'. el código debe incluir estos tres elementos y debe seguir esta estructura básica (los elementos en negrita son marcadores de posición que hay que completar en cada caso concreto): function eventResponse(eventObject:EventType):void CIBERTEC CARRERAS PROFESIONALES . se deben identificar tres elementos importantes: • El origen del evento: ¿en qué objeto va a repercutir el evento? Por ejemplo.0 y en las versiones anteriores radica en que en ActionScript 3.true)) msj_txt.ENTER_FRAME.DISEÑO WEB II 77 En el siguiente ejemplo se evalúa si el puntero del Mouse hace contacto con los pixeles de un movie clip llamado black_mc. ya que es el objeto al que Flash Player (donde tiene lugar realmente el evento) destina el evento. } 4. • El evento: ¿qué va a suceder. mientras que en las versiones anteriores de ActionScript existían varios.0 hay un único sistema para gestionar eventos. • La respuesta: ¿qué pasos hay que llevar a cabo cuando ocurra el evento? Siempre que se escriba código ActionScript para gestionar eventos. function controllaMouse(e:Event):void { if(black_mc. • Controladores onClipEvent() que se pueden colocar directamente en instancias de MovieClip.

el nombre de la función de respuesta al evento. function playMovie(event:MouseEvent):void { CARRERAS PROFESIONALES CIBERTEC . que debe usarse como primer parámetro. playButton es el nombre de instancia del botón y this es el nombre especial. es necesario indicar al objeto de origen del evento (el objeto en el que se produce el evento. A continuación se ofrecen más ejemplos concretos de eventos para proporcionar una idea de algunos de los elementos comunes de los eventos y de las posibles variaciones disponibles cuando se escribe código de gestión de eventos: Hacer clic en un botón para iniciar la reproducción del clip de película actual. A continuación. es posible definir un método como una función asociada a una clase determinada). de modo que también hay que indicar el tipo de datos del parámetro. que significa "el objeto actual": this. De nuevo. Una función es idéntica a un método excepto en que no está necesariamente asociada a una clase determinada (de hecho. Cuando se crea una función para la gestión de eventos.EVENT_NAME. se escriben las instrucciones que debe llevar a cabo el equipo cuando ocurra el evento.78 { // Aquí deben incluirse las acciones realizadas en respuesta al evento. Para ello es necesario llamar al método addEventListener() de dicho objeto (todos los objetos que tienen eventos también tienen un método addEventListener()). el nombre del evento específico al que se desea responder.. Una función proporciona un modo de agrupar acciones con un único nombre que viene a ser un nombre de método abreviado para llevar a cabo las acciones. entre las llaves de apertura y cierre ({ . Por último. • En segundo lugar. que es la forma de especificar las acciones que desean realizarse como respuesta al evento. llama al método addEventListener() del objeto de origen.. por ejemplo. se debe elegir el nombre de la función (denominada eventResponse en este caso) y se debe especificar además un parámetro (denominado eventObject en este ejemplo). el botón) que se desea llamar a la función cuando ocurra el evento.stop(). Hay una clase de ActionScript definida para cada evento y el tipo de datos que se especifica para el parámetro de función es siempre la clase asociada con el evento específico al que se desea responder. En primer lugar. } eventSource. }). El método addEventListener() utiliza dos parámetros: • En primer lugar. Cada una de estas partes se tratará con mayor detalle. Especificar un parámetro de una función equivale a declarar una variable. cada evento se asocia a una clase específica. En el siguiente ejemplo. que tiene a su vez un valor especial predefinido para cada evento (como un nombre exclusivo propio del evento). Este código hace dos cosas.addEventListener(EventType. eventResponse). Después de escribir la función de gestión de eventos. básicamente "suscribiendo" la función al evento especificado de modo que se lleven a cabo las acciones de la función cuando ocurra el evento. Hay que tener en cuenta que el nombre de una función debe escribirse sin paréntesis cuando se pasa como un parámetro. define una función.

ENTER_FRAME. Por ejemplo. con el que podemos recibir notificaciones a la ejecución de eventos. updateOutput).DISEÑO WEB II 79 this. recibir la tecla que ha sido pulsada: var textTest :TextField. En este caso.KEY_DOWN. stage. textTest = new Text Field ().TEXT_INPUT.addEventListener(TextEvent.addEventListener(Event. playMovie). Detectar que se está escribiendo en un campo de texto. moverMask) function moverMask(e:Event):void { mascara_mc. navigateToURL(adobeURL).adobe. } entryText.y=mouseY // se asigna a la mascara la posición y del mouse } Detectar que se está presionando una tecla. TeclaPulsada). Hacer clic en un botón para navegar a un URL. entryText es un campo de introducción de texto y outputText es un campo de texto dinámico: function updateOutput(event:TextEvent):void { var pressedKey:String = event. linkButton es el nombre de instancia del botón: function gotoAdobeSite(event:MouseEvent):void { var adobeURL:URLRequest = new URLRequest("http://www. } linkButton.CLICK. En el siguiente ejemplo se ejecuta la función moverMask cuando la cabeza lectora entra en un nuevo fotograma: mascara_mc.CLICK.text = "You typed: " + pressedKey.addEventListener (KeyboardEvent. CIBERTEC CARRERAS PROFESIONALES .addEventListener(MouseEvent. outputText.x=mouseX // se asigna a la mascara la posición x del mouse mascara_mc.text.com/").addEventListener(MouseEvent. gotoAdobeSite). } playButton. Un método también muy interesante a la hora de mantener la interacción con el usuario es addEventListener.play(). En este ejemplo.

80

addChild (textTest); textTest.text = "HAS PULSADO:"; function TeclaPulsada (tecla:KeyboardEvent): void{ textTest.text = "HAS PULSADO:\n"+tecla.keyCode; }

CARRERAS PROFESIONALES

CIBERTEC

DISEÑO WEB II

81

Actividades
Ejercicio 1: Detectar colisión entre dos movie clips Para probar la colisión, arrastre el clip de película del coche para que entre en contacto con el clip de película del área de estacionamiento. El resultado del método hitTest se devuelve en el campo de texto.

En los siguientes procedimientos, se muestra cómo se detecta la colisión mediante el ejemplo del coche. 1 2 3 4 Arrastre dos clips de película al escenario y asígneles los nombres de instancia car y area. Cree un cuadro de texto dinámico en el escenario e introduzca msj_txt como nombre de variable en el inspector de propiedades. Presione F9, si el panel Acciones no está abierto. Ingrese el siguiente código en el primer fotograma: function controlaContacto(e:Event):void{ if(car.hitTestObject(area)) msj_txt.text='si'; else msj_txt.text='no'; } this.addEventListener(Event.ENTER_FRAME,controlaContacto) car.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar); car.addEventListener(MouseEvent.MOUSE_UP,soltar); function arrastrar (m:MouseEvent):void { car.startDrag(true); car.addEventListener(Event.ENTER_FRAME,controlaContacto)

CIBERTEC

CARRERAS PROFESIONALES

82

} function soltar (m:MouseEvent):void { car.stopDrag(); } 9 Seleccione Control > Probar película y arrastre el clip de película car sobre area para comprobar la detección de colisión. Siempre que el recuadro de delimitación del coche tenga un punto de intersección con el recuadro de delimitación del área, el estado es true.

Ejercicio 2: Detectar colisión entre un movie clip y un punto del escenario Para realizar una detección de colisión entre un clip de película y un punto del escenario, haga lo siguiente: 1 Cree un cuadro de texto dinámico en el escenario e introduzca msj_txt como nombre de instancia en el inspector de propiedades. 2. Cree un movie clip con nombre de instancia black_mc 3. Seleccione el primer fotograma. 4 Presione F9 si no está abierto aún el panel de acciones. 5 En el editor de scripts escriba el siguiente código: black_mc.addEventListener(Event.ENTER_FRAME,controllaMouse); function controllaMouse(e:Event):void { if(black_mc.hitTestPoint(mouseX,mouseY,true)) msj_txt.text='si'; else msj_txt.text='no'; } 6 Ejecute la pelicula y mueva el ratón sobre el clip de película para comprobar la colisión. Mueva el cursor sobre el movie clip black_mc para comprobar la colisión. El resultado del método hitTestPoint se devuelve en el campo de texto. El valor true se visualiza siempre que el ratón se encuentre sobre un píxel que no es transparente.

CARRERAS PROFESIONALES

CIBERTEC

DISEÑO WEB II 83 Autoevaluación Detección de colisiones Para probar la colisión. debe mostrar un mensaje en el texto Meta indicando que llegó a la meta el carro respectivo. También. El primero que entre en contacto con el clip de película del área de la meta. haga clic en el botón Go para que los coches empiecen a correr. coloque otro botón para reiniciar la animación CIBERTEC CARRERAS PROFESIONALES . El mensaje puede ser “Llegó el carro rojo” o “Llegó el carro amarillo”. Solo debe mostrarse un solo mensaje de quien llegó primero.

Si desea saber más acerca de estos temas. debe manipular sus métodos y propiedades mediante los eventos que proporciona Flash CS3.html En esta página. http://schoolofflash. scaleX).) y del nombre de la propiedad (x. rotation. CARRERAS PROFESIONALES CIBERTEC . http://www.hitTestObject(Movie2) Para modificar las propiedades de un movie clip. Para ello debe saber los nombres de instancia de los dos movie clips y usar el siguiente código. seguida de un punto (. Los eventos de ActionScript 3. El método hitTestObject evalua si dos objetos movie clips han colisionado.com/2008/03/tutorial-actionscript-30-masks/ Aquí hallará ejercicios animados con mascaras. Debe usar el siguiente código: movie1.84 Resumen Para realizar animaciones con movie clips. aplica mascaras a un movie clip y necesita otro objeto movie clip a quien se aplicara la mascara. hallará algunos ejercicios sobre el método hitTest. Movie1. puede consultar las siguientes páginas.mask=movie2. El metodo setMask. triangle) como nombre del movie clip. La técnica para especificar determinadas acciones que deben realizarse como respuesta a eventos concretos se denomina gestión de eventos.com/tutorials/Hit-Test-in-Actionscript-3-16576.0 se usan de manera diferente a la versión anterior.flashperfection. se utiliza una variable (square.

usando el lenguaje ActionScript.DISEÑO WEB II 85 UNIDAD DE APRENDIZAJE 3 SEMANA 11 EL LENGUAJE ACTIONSCRIPT LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. TEMARIO • Contadores • Acumuladores • La Clase Timer ACTIVIDADES PROPUESTAS • Los alumnos diseñan juegos interactivos. para integrar recursos interactivos o proyectos multimedia. CIBERTEC CARRERAS PROFESIONALES .

Con el nuevo evento Stage. el numero de clic sobre un botón. xscale+=2. El siguiente código. En este ejemplo controlamos las veces que el cursor se desplaza fuera de la película de flash: var textTest:TextField.86 1 CONTADORES Los contadores son variables numéricas que permiten registrar el número de veces que se realiza un proceso. Lo que nos puede resultar muy útil a la hora de programar nuestras aplicaciones. podemos averiguar cuando el puntero del ratón se mueve fuera de la película de Flash. var Contador:int=0. textTest. textTest = new TextField().random()+1) La palabra int convierte a entero la expresión que esta a la derecha.MOUSE_LEAVE.mouseLeave. El siguiente código agranda el ancho de un movie clip llamado azul cada 2 pixeles azul. onStageLeave). el numero de veces que se cumple una condición. function onStageLeave(event:Event):void{ Contador++.text = "El mouse ha salido de la pelicula:\n"+ Contador + " veces.". se llama acumulador a una variable cuyo valor se incrementa o decrementa en un valor que no tiene por qué ser fijo (en cada iteración de un proceso repetitivo). El siguiente código mueve un movie clip llamado rojo hacia la izquierda cada píxel al azar entre 1 y 5: rojo. Un acumulador suele utilizarse para acumular resultados producidos en las iteraciones de un proceso repetitivo o cada vez que se cumplan ciertos criterios.text = "FUERA:". stage. etc.addEventListener(Event.x-=int(5*Math. textTest. } 2 ACUMULADORES En programación. mueve el movie clip carro de izquierda a derecha de manera indefinida CARRERAS PROFESIONALES CIBERTEC . addChild(textTest). perteneciente a la clase Stage. Este puede ser el numero de veces que se presiona el Mouse.

} //Le decimos que comience tiempo. c=0._xscale=ancho. trace("Delay: " + event. Para utilizarlos sólo hay que crear el objeto._xscale=-ancho. else{ carro._xscale. c=1. Es decir._x>=0) carro.start().target. carro. function timerHandler(event:TimerEvent):void { trace("Repetición: " + event.addEventListener("timer".target. } else if(carro._x-=15.3). //Declaramos la variable que alojará el Timer. timerHandler)._x<=550) carro.currentCount)._x+=15. CIBERTEC CARRERAS PROFESIONALES . } } 3 LA CLASE TIMER La clase Timer permite crear objetos que se ejecutan a intervalos especificos. y 3 el número de ellas var tiempo = new Timer(500. else{ carro. siendo // 500 el tiempo en milisegundos entre repeticiones. algo equivalente a lo que se conseguia en AS2 con setTimeout y contadores. //Le añadimos un listener para que vaya registrando cuantas repeticiones lleva tiempo.DISEÑO WEB II 87 c=1 ancho=carro.onEnterFrame=function(){ if(c==1) if(carro.delay). indicar el número de repeticiones que queremos y el intervalo que las separa.

text='Libre'.transform.text="entro el amarillo" myColor. un movie clip area. msj_txt. un texto dinamico contar_txt y msj_txt.color = 0x0000ff.hitTestObject(area)){ if(z==0){ c++.color = 0xFF0000. contar_txt. msj_txt.88 Actividades Actividad 1: Colisión de dos movie clips con contador En la siguiente actividad se evalúa cuantas veces un movie clip se arrastra al área de estacionamiento y se va registrando el número de veces que un movie clip entra en el área. En el escenario debe haber instanciado los siguientes objetos: un movie clip car.text=""+c.colorTransform.colorTransform = myColor. function controlaContacto(e:Event):void { if(car. Para el otro movie clip carro no es necesario. myColor. El código es el siguiente: var c:int=0 var z:int=0 var myColor:ColorTransform = msj_txt. } z++ } else { msj_txt.transform. CARRERAS PROFESIONALES CIBERTEC .

DISEÑO WEB II 89 msj_txt.stopDrag().addEventListener(Event.addEventListener(MouseEvent. car.ENTER_FRAME.controlaContacto) } function soltar (m:MouseEvent):void { car.MOUSE_DOWN. Se obtiene un punto por cada globo impactado con el Mouse.colorTransform = myColor. } Actividad 2: Diseño de un juego Con el Mouse se debe hacer clic sobre cada globo. Cuando se acaben las balas se debe obtener un puntaje final CIBERTEC CARRERAS PROFESIONALES .startDrag(true).controlaContacto) car.ENTER_FRAME.addEventListener(MouseEvent.soltar). z=0 } } this.addEventListener(Event.transform.arrastrar). car.MOUSE_UP. function arrastrar (m:MouseEvent):void { car.

html?file=flgame0308-1. De lo contrario.xml#1. se disminuirá el puntaje CARRERAS PROFESIONALES CIBERTEC .es/formacion/tutoriales/viewfile. Se Irán acumulando puntaje cada vez que le dispara al blanco.90 Autoevaluación Diseñe un juego de acuerdo con las pautas indicadas en la siguiente direccion: http://redribera.1 El juego consiste en hacer tiros al blanco.

http://redribera.DISEÑO WEB II 91 Resumen Los contadores y acumuladores son variables numéricas que permiten .es/games/jugar_a_396_la-caza-del-pato-en-barco Aquí hallará un juego creado en Flash.contar una serie de procesos y acumular valores para obtener puntajes muy utiles a la hora de diseñar juegos interactivos.redribera. puede consultar las siguientes páginas.es/formacion/tutoriales/viewfile.xml En esta página. Si desea saber más acerca de estos temas. CIBERTEC CARRERAS PROFESIONALES . con lo que no tendremos que eliminar el intervalo con clearInterval(). http://www.html?file=flgame1207-9. hallará un tutorial para crea un juego en Flash. La clase Timer de AS3 tiene una gran ventaja sobre setInterval y es que podemos indicarle como parametro cuantas veces queremos que ejeute la acción antes de parar.

92 CARRERAS PROFESIONALES CIBERTEC .

DISEÑO WEB II 93 UNIDAD DE APRENDIZAJE 3 SEMANA 13 EL LENGUAJE ACTIONSCRIPT LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. usando el lenguaje ActionScript. para integrar recursos interactivos o proyectos multimedia. • Los alumnos implementan la clase Tween y filtros en las animaciones flash. CIBERTEC CARRERAS PROFESIONALES . TEMARIO • Efecto easing • La clase Tween • Filtros ACTIVIDADES PROPUESTAS • Los alumnos implementan el efecto easing en las animaciones flash. los alumnos diseñan páginas web con la herramienta Adobe Flash CS3.

var myTween:Tween = new Tween(myObject. el movieClip de la película se trasladará a la derecha con un efecto de easing en una distancia de 300 pixels sobre el escenario my_mc.x+=(300-my_m. lo que cambia la animación de suavizado en consonancia. que da un aspecto más realista a las animaciones.5. x es la propiedad del objeto que se quiere modificar y 0.transitions. entonces la distancia o el desplazamiento será más largo para el efecto easing. La clase Tween también permite especificar diversos métodos de suavizado.*. "x".5 por 0.x) * 0. la velocidad del efecto aumentará En Action Script 3.. 0.Tween.7. use el operador new con la función constructora para crear una instancia de la clase y especifique un método de aceleración como parámetro. indica que el efecto es lento.easing ofrece numerosos métodos de suavizado que contienen ecuaciones para esta aceleración y desaceleración. es decir aceleración.94 1. "Suavizado" hace referencia a la aceleración o desaceleración gradual durante una animación.5. Donde: x es la propiedad que se desea modificar o animar CARRERAS PROFESIONALES CIBERTEC . LA CLASE TWEEN La clase Tween permite utilizar ActionScript para mover. Elastic. En realidad este efecto se consigue con una formula matemática: x += (300 . Un valor cercano a 0. 300. desaceleración y suavizado.0 se han incorporado una serie de Clases que aplican este efecto de manera más rápida y compleja. Un valor cercano a 1.easeOut.x)*0. Para utilizar los métodos y las propiedades de la clase Tween. cambiar el tamaño y desvanecer clips de película especificando una propiedad del clip de película de destino para animar durante un número de fotogramas o segundos. Donde 300 es una constante que indica la distancia del movimiento en pixels.transitions. En el siguiente ejemplo.transitions. 2.easing. true).5 es un factor que indica la velocidad de la desaceleración (easing). Por ejemplo: import fl. 3. import fl. Si cambia el valor 0. agregando mayor funcionalidad a las animaciones con efecto easing. El paquete fl. indica que el efecto de easing es rápido. EL EFECTO EASING El efecto easing consiste en animar un objeto a una velocidad que cada vez va disminuyendo obteniendo un efecto de desaceleración (easing). Si cambia el valor 300 por 600.

movimiento se define por El método easeOut() inicia el movimiento una onda senoidal que con rapidez y. desacelerarlo. produce a continuación una ligera sobremodulación y. acelerarlo y. regresar al destino. invertir a continuación la dirección para desplazarse hacia el destino. una pelota cayendo al El método easeOut() inicia el movimiento suelo y dando rebotes de rebote con rapidez y. similar al de acelerarlo y. producir una ligera sobremodulación. a continuación. funciones de aceleración easeOut() y easeNone() definen un para implementar movimiento constante. donde el por último. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento realizando un control hacia atrás. por último.easeOut es la función o tipo de animación con efecto easing. Bounce Elastic None métodos El método easeIn() inicia el movimiento realizando un control hacia atrás para después invertir la dirección y desplazarse hacia el destino a continuación. El método easeOut() inicia el movimiento desplazándose hacia el destino. a continuación.easeInOut(). ActionScript. La clase None define Los métodos easeIn(). sin aceleración.DISEÑO WEB II 95 Elastic. CIBERTEC CARRERAS PROFESIONALES . Más adelante se detallan las diferentes alternativas para este parámetro 0 es el valor inicial de la propiedad x 300 es el valor final de la propiedad x 3 es la duración del movimiento true indica si la duración es en segundos Clase Back Descripción La clase Back define tres funciones de aceleración para la implementación de movimiento con animaciones de ActionScript. por último. invierte la dirección de nuevo hacia el destino. a continuación. ActionScript. lo cada vez más pequeños. desacelera conforme se ejecuta. implementación de El método easeInOut() combina los movimiento con métodos easeIn() y easeOut() para iniciar animaciones de el movimiento lentamente. por último. a continuación. lo aceleración para la acelera conforme se ejecuta. lo decae de manera desacelera conforme se ejecuta. exponencial. La clase Bounce define El método easeIn() inicia el movimiento de tres funciones de rebote lentamente y. implementación de El método easeInOut() combina los movimiento de rebote con métodos easeIn() y easeOut() para iniciar animaciones de el movimiento de rebote lentamente. invertir de nuevo la dirección y. desacelerarlo. lo acelera aceleración para la conforme se ejecuta. La clase Elastic define El método easeIn() inicia el movimiento tres funciones de lentamente y. movimiento no acelerado con animaciones ActionScript.

box. a continuación. 0. a continuación. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento desde una velocidad cero. addChild(box). import fl. box.graphics.*.graphics. El método easeIn() inicia el movimiento desde la velocidad cero y. métodos El método easeIn() inicia el movimiento desde la velocidad cero y. por último. box. desacelerarlo de vuelta hasta la velocidad cero. acelerarlo y. duration. El método easeOut() inicia el movimiento con rapidez y.beginFill(Math. "x".looping = true. El método easeOut() inicia el movimiento con rapidez y. var finishValue:Number = 400. box.frameRate = 31.random() * 0xFFFFFF). por último. lo desacelera hasta la velocidad cero conforme se ejecuta. import fl. box.easing. var box:Sprite = new Sprite(). acelerarlo y.x = 50. Strong La clase Strong define tres funciones de aceleración para la implementación de movimiento con animaciones de ActionScript. stage. Back.easeInOut.drawRect(0.easing. lo desacelera hasta la velocidad cero conforme se ejecuta. desacelerarlo de vuelta hasta la velocidad cero. 350).endFill().96 Clase Descripción Regular La clase Regular define tres funciones de aceleración para la implementación de movimiento acelerado con animaciones de ActionScript. true). myTween.transitions. startValue. var startValue:Number = box.*. CARRERAS PROFESIONALES CIBERTEC . var duration:Number = 3. var myTween:Tween = new Tween(box. 100. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento desde una velocidad cero. En el siguiente codigo se aplica un efecto de animación a un objeto llamado box: import fl.Tween. a continuación.transitions. lo acelera conforme se ejecuta. a continuación. finishValue.transitions.*.y = 10.graphics. En el siguiente código se aplican diferentes animaciones al objeto movie clip llamado rect import fl.transitions.x. lo acelera conforme se ejecuta.

0. FILTROS Una de las formas de realzar la apariencia de una aplicación es añadir efectos gráficos sencillos. Strong.easeOut.easeOut.0 incluye nueve clases de filtros que se pueden aplicar a objetos de visualización y a objetos BitmapData: • • • • • Filtro de biselado (clase BevelFilter) Filtro de desenfoque (clase BlurFilter) Filtro de sombra (clase DropShadowFilter) Filtro de iluminado (clase GlowFilter) Filtro de bisel degradado (clase GradientBevelFilter) CIBERTEC CARRERAS PROFESIONALES . true). "y". "x". lo que es exactamente igual que crear cualquier otro objeto. se puede aplicar fácilmente a un objeto de visualización utilizando la propiedad filters del objeto o. true). true).easeOut. var my_mc5:Tween = new Tween(rect.width. 0. var my_mc2:Tween = new Tween(rect. true). 3. Cada filtro se define como una clase. Entre ellos hay desde filtros básicos. Una vez creada una instancia de un objeto de filtro. 0. como: Iluminado Desenfoque Sombra Nitidez Desplazamiento Detección de bordes Relieve Y muchos otros ActionScript 3. Strong. true). como los de sombra e iluminado. hasta filtros complejos para crear efectos diversos. como proyectar una sombra tras una foto para lograr una ilusión de tridimensionalidad o un brillo en torno a un botón con objeto de mostrar que se encuentra activo. Los filtros permiten aplicar toda una serie de efectos a los objetos de visualización y mapas de bits. en el caso de un objeto BitmapData. var my_mc3:Tween = new Tween(rect. 100. Strong. rect. desde las sombras hasta la creación de biseles y desenfoques. 3. "alpha". ActionScript 3. 153. "width". 3. 90. 3.width + 50. 80.5. 3.DISEÑO WEB II 97 var my_mc1:Tween = new Tween(rect. Strong. var my_mc4:Tween = new Tween(rect. Strong. 0. 3. de manera que al aplicar filtros se crean instancias de objetos de filtro.easeOut.easeOut. A continuación se enumera una serie de tareas que se suelen realizar mediante los filtros de ActionScript: • • • • • • • • • • • • • Crear un filtro Aplicar un filtro a un objeto de visualización Aplicar un filtro a los datos de imagen de una instancia de BitmapData Eliminar filtros de un objeto Crear diversos efectos de filtro. usando el método applyFilter(). rect.0 incluye nueve filtros que se pueden aplicar a cualquier objeto de visualización o instancia de BitmapData. "rotation". como los de mapa de desplazamiento y convolución.

98

• • • •

Filtro de iluminado degradado (clase GradientGlowFilter) Filtro de matriz de colores (clase ColorMatrixFilter) Filtro de convolución (clase ConvolutionFilter) Filtro de mapa de desplazamiento (clase DisplacementMapFilter)

3.1. Creación de un filtro nuevo
Para crear un nuevo objeto de filtro, basta con llamar al método constructor de la clase de filtro seleccionada. Por ejemplo, para crear un nuevo objeto DropShadowFilter, se usaría el siguiente código: import flash.filters.DropShadowFilter; var myFilter:DropShadowFilter = new DropShadowFilter(); Aunque no se muestra aquí, el constructor DropShadowFilter() (como todos los constructores de clases de filtros) acepta varios parámetros opcionales que se pueden utilizar para personalizar la apariencia del efecto de filtro.

3.2. Aplicación de un filtro
Una vez construido un objeto de filtro, es posible aplicarlo a un objeto de visualización o a un objeto BitmapData; la forma de aplicarlo depende del objeto al que se vaya a aplicar. Los efectos de filtro se aplican a los objetos de visualización mediante la propiedad filters. Dicha propiedad filters de los objetos de visualización es una instancia de Array cuyos elementos son los objetos de filtro aplicados al objeto de visualización. Para aplicar un único filtro a un objeto de visualización, se debe crear la instancia de filtro, añadirla a una instancia de Array y asignar ese objeto Array a la propiedad filters del objeto de visualización: import flash.display.Bitmap; import flash.display.BitmapData; import flash.filters.DropShadowFilter; // Crear un objeto bitmapData y representarlo en pantalla. var myBitmapData:BitmapData = new BitmapData(100,100,false,0xFFFF3300); var myDisplayObject:Bitmap = new Bitmap(myBitmapData); addChild(myDisplayObject); // Crear una instancia de DropShadowFilter. var dropShadow:DropShadowFilter = new DropShadowFilter(); // Crear la matriz de filtros, añadiendo el filtro a la matriz pasándolo // como un parámetro al constructor Array(). var filtersArray:Array = new Array(dropShadow); // Asignar la matriz de filtros al objeto de visualización para aplicar // el filtro. myDisplayObject.filters = filtersArray;

CARRERAS PROFESIONALES

CIBERTEC

DISEÑO WEB II

99

Si se desea asignar varios filtros al objeto, basta con añadir todos los filtros a la instancia de Array antes de asignarla a la propiedad filters. Se pueden añadir varios objetos a un elemento Array pasándolos como parámetros a su constructor. Por ejemplo, el siguiente código aplica un filtro de bisel y otro de iluminado al objeto de visualización creado con anterioridad: import flash.filters.BevelFilter; import flash.filters.GlowFilter; // Crear los filtros y añadirlos a una matriz. var bevel:BevelFilter = new BevelFilter(); var glow:GlowFilter = new GlowFilter(); var filtersArray:Array = new Array(bevel, glow); // Asignar la matriz de filtros al objeto de visualización para aplicar el filtro. myDisplayObject.filters = filtersArray;

3.3. Eliminación de filtros de un objeto de visualización
Eliminar todos los filtros de un objeto de visualización es tan sencillo como asignar un valor nulo a la propiedad filters: myDisplayObject.filters = null; Si se han aplicado varios filtros a un objeto y se desea eliminar solamente uno de ellos, es necesario seguir una serie de pasos para cambiar la matriz de la propiedad filters. NOTA Es posible crear la matriz que contiene los filtros utilizando el constructor new Array() (según se muestra en los ejemplos anteriores) o se puede emplear la sintaxis literal de Array, encerrando los filtros entre corchetes, []. Por ejemplo, esta línea de código: var filters:Array = new Array(dropShadow, blur); Hace lo mismo que esta otra: var filters:Array = [dropShadow, blur];

3.4. Aplicación de un filtro a un objeto BitmapData
Para aplicar un filtro a un objeto BitmapData es necesario utilizar el método applyFilter() del objeto BitmapData: myBitmapData.applyFilter(sourceBitmapData); El método applyFilter() aplica un filtro a un objeto BitmapData de origen, dando lugar a una nueva imagen filtrada. Este método no modifica la imagen original. En vez de eso, el resultado de la aplicación del filtro a la imagen original se almacena en la instancia de BitmapData en la que se llama al método applyFilter().

CIBERTEC

CARRERAS PROFESIONALES

100

Actividades
Ejercicio 1: Crear un sistema de menús con efectos easing Esta aplicación consiste en crear un sistema de menús con efectos easing. Cuando hace clic en uno de los botones aparecerá la imagen adecuada y opcionalmente con un enlace a otra escena.

A continuación se indicará un procedimiento para aplicar el efecto easing en el diseño de un menú. 1. Cree una pelicula nueva de 300x200pixeles 2. Inserte un movie clip con dos capas. La primera, con cuatro rectangulos de 300x100pixeles. La segunda, con cuatro textos según el modelo mostrado abajo.

El punto de registro debe estar al centro del movieclip. Asignele un nombre de clase llamado fotos. 3. Inserte una capa llamada acciones. Presione la tecla F9 para activar el panel de acciones e inserte el siguiente codigo: var foto:fotos; foto=new fotos(); foto.x=100 foto.y=50 addChild(foto) var posX:int=0 foto.addEventListener(Event.ENTER_FRAME,ingresa) function ingresa(e:Event){ foto.x+=(posX-foto.x)*0.5; } var colores:Array=new Array("0x00FF00","0x0000FF","0xff8800","0xffff00");

CARRERAS PROFESIONALES

CIBERTEC

i++){ this["boton"+i]=new btn().currentTarget. CIBERTEC CARRERAS PROFESIONALES . Ejecute su película Actividad 2 La clase Tween Con la guía de su profesor diseñe la siguiente página en Flash. myColor. this["boton"+i].x=50*i this["boton"+i].name=="instance9") posX=-300 } 4.currentTarget.transform. Las imágenes y textos serán proporcionados por su profesor.CLICK. se agregan al //escenario.color = colores[i-1] this["boton"+i]. this["boton"+i].name=="instance7") posX=0. else if(m.colorTransform=myColor. else if(m.currentTarget.colorTransform. se cambia color a cada boton y se le asigna los eventos clic for( var i:int=1.DISEÑO WEB II 101 //crear instancias para los 4 botones.name=="instance5") posX=300.addEventListener(MouseEvent.name=="instance3") posX=600. } //Captura del nombre del boton donde se hizo clic para cambiar posicion //del movie clip foto function posi (m:MouseEvent):void { if(m.posi).currentTarget.i<5. else if(m.y=150 addChild(this["boton"+i]) var myColor:ColorTransform= this["boton"+i].transform.

se llama a la función addFilters().MouseEvent. // añadiendo filtros).*. Mediante esta función se aplican dos filtros más a myDisplayObject: import flash. Este proceso se muestra en el siguiente código. En vez de eso. esa matriz se vuelve a asignar a la propiedad filters del objeto de visualización para que los filtros se apliquen al objeto. myDisplayObject.push(new BlurFilter()). es necesario crear una copia de toda la matriz filters y realizar las modificaciones en esta matriz provisional. function addFilters(event:MouseEvent):void { // Hacer una copia de la matriz de filtros.events. para añadir filtros o cambiar el conjunto de filtros aplicados.filters. A continuación. luego.filters. cuando se hace clic en el objeto.102 Actividad 3 Aplicar múltiples Filtros Si un objeto de visualización tiene uno o más filtros aplicados.filters = [new GlowFilter()]. var filtersCopy:Array = myDisplayObject. filtersCopy. CARRERAS PROFESIONALES CIBERTEC . // Realizar los cambios deseados en los filtros (en este caso. no es posible añadir más filtros a la matriz de la propiedad filters. Inicialmente se aplica un filtro de iluminado al objeto de visualización llamado myDisplayObject. import flash.

graphics.25). 0x8F8E01]. 200).endFill(). var alphas:Array = [1. import flash. 1]. 0.GlowFilter. } myDisplayObject. box.graphics.graphics. var knockout:Boolean = false.filters.DISEÑO WEB II 103 filtersCopy.graphics. var quality:Number = BitmapFilterQuality. cautionLight. // Dibujar los 3 círculos de las 3 luces.150. import flash. var box:Shape = new Shape().filters.lineStyle(). Actividad 4 Ejemplo: combinación de filtros básicos: Semáforo En el siguiente ejemplo de código se utilizan varios filtros básicos combinados con un temporizador para crear una simulación animada de la acción repetitiva de un semáforo. cautionLight.graphics.display.beginFill(0xFEFE78).graphics. myDisplayObject. stopLight.beginFill(0xFF0000).drawCircle(145.DropShadowFilter. var count:Number = 1. var strength:Number = 1. var cautionLight:Shape = new Shape().graphics. 128.filters. var ratios:Array = [0.*/ import flash.addEventListener(MouseEvent.drawCircle(145. 90. 0xFEFE78.90. box. var angleInDegrees:Number = 225.HIGH.endFill(). box. // Dibujar el fondo del rectángulo para el semáforo.graphics.filters = filtersCopy.GradientBevelFilter. // opuesto de 45 grados var colors:Array = [0xFFFFCC. stopLight.25).utils.drawRect(100.lineStyle(). stopLight.beginFill(0xFF9900). cautionLight. addFilters).lineStyle().graphics. var blurY:Number = 8. import flash.graphics. stopLight. 255]. var distance:Number = 8.events. CIBERTEC CARRERAS PROFESIONALES . import flash.filters. import flash.graphics.Timer. import flash.TimerEvent. var stopLight:Shape = new Shape().Shape. // Aplicar los cambios reasignando la matriz a la propiedad filters.BitmapFilterQuality. box. var blurX:Number = 8. var type:String = BitmapFilterType. 50.push(new DropShadowFilter()).filters.CLICK. import flash.BitmapFilterType.INNER.

// Añadir los gráficos a la lista de visualización. 30.filters = [gradientBevel]. goLight.endFill(). 30. addChild(goLight).filters = [innerShadow]. box. var innerShadow:DropShadowFilter = new DropShadowFilter(5. 1.filters = [innerShadow]. 1.graphics. 1. goLight. false. break.graphics.25). cautionLight.filters = [greenGlow].210.filters = [innerShadow]. ratios. cautionLight. false).lineStyle(). knockout). blurX. 1. // Aplicar un bisel degradado al rectángulo del semáforo. amarilla/roja apagadas).graphics. var yellowGlow:GlowFilter = new GlowFilter(0xFF9900. 0. 1. 30. goLight. 3. 1.drawCircle(145.beginFill(0x00CC00). blurY. case 2: stopLight. quality.filters = [yellowGlow]. 1. strength. false). angleInDegrees. false). cautionLight. function trafficControl(event:TimerEvent):void { if (count == 4) { count = 1. var gradientBevel:GradientBevelFilter = new GradientBevelFilter(distance. 1. 45. addChild(stopLight). CARRERAS PROFESIONALES CIBERTEC . 1. // Intercambiar los filtros basándose en el valor del contador. stopLight.filters = [innerShadow].endFill(). } switch (count) { case 1: stopLight. addChild(box).filters = [innerShadow]. false. 1.graphics. alphas. break. false.104 cautionLight. var goLight:Shape = new Shape().filters = [innerShadow]. 0. 30. case 3: stopLight. addChild(cautionLight). true. var redGlow:GlowFilter = new GlowFilter(0xFF0000. goLight. goLight. 3. goLight. var greenGlow:GlowFilter = new GlowFilter(0x00CC00. type. false).filters = [redGlow]. 30. 30. goLight. cautionLight. colors. // Crear la sombra interior (para las luces apagadas) y la // iluminación (para las luces encendidas).graphics. 1.filters = [innerShadow]. // Definir el estado inicial de las luces (verde encendida.filters = [innerShadow].5.

CIBERTEC CARRERAS PROFESIONALES .DISEÑO WEB II 105 goLight. } count++. timer. trafficControl). timer.TIMER. break. } // Crear un temporizador para intercambiar los filtros en intervalos de 3 segundos. var timer:Timer = new Timer(3000.start().addEventListener(TimerEvent. 9).filters = [greenGlow].

aplique filtros a las imágenes de la página. Diseñe un banner con 5 imágenes con efecto de transición de manera repetitiva CARRERAS PROFESIONALES CIBERTEC . Especialmente a las fotos de la parte inferior. También.106 Autoevaluación Diseñe la siguiente página en Flash Utilice efectos easing para el diseño del menú.

en el caso de un objeto BitmapData. hallará cómo utilizar los filtros en Actionscript 3. http://www.cl/blog/uso-de-la-clase-tween-en-as3/ En esta página. Si desea saber más acerca de estos temas. Los filtros permiten aplicar toda una serie de efectos a los objetos de visualización y mapas de bits.com/tips/movimientos-dinamicos-con-la-clase-tween-enactionscript-3-c42258l/ Aquí hallará Movimientos dinámicos con la Clase Tween en ActionScript 3 . puede consultar las siguientes páginas.esedeerre. desde las sombras hasta la creación de biseles y desenfoques.0.transitions. lo que cambia la animación de suavizado en consonancia. de manera que al aplicar filtros se crean instancias de objetos de filtro. http://jestudio. usando el método applyFilter().cristalab. Una vez creada una instancia de un objeto de filtro. http://www. lo que es exactamente igual que crear cualquier otro objeto. se puede aplicar fácilmente a un objeto de visualización utilizando la propiedad filters del objeto o.com/ejemplo/4/48/utilizacion-de-filtros-en-actionscript-30 En esta página.DISEÑO WEB II 107 Resumen La clase Tween permite especificar diversos métodos de suavizado para aplicar aceleración o desaceleración gradual durante una animación. Cada filtro se define como una clase. El paquete fl.easing ofrece numerosos métodos de suavizado que contienen ecuaciones para esta aceleración y desaceleración.0. hallará cómo utilizar la clase Tween en Actionscript 3. que da un aspecto más realista a las animaciones. CIBERTEC CARRERAS PROFESIONALES .

108 CARRERAS PROFESIONALES CIBERTEC .

los alumnos diseñan páginas web con la herramienta Adobe Flash CS3. para integrar recursos interactivos o proyectos multimedia. TEMARIO • Audio ACTIVIDADES PROPUESTAS • Los alumnos implementan componentes de audio en Flash.DISEÑO WEB II 109 UNIDAD DE APRENDIZAJE 3 SEMANA 14 EL LENGUAJE ACTIONSCRIPT LOGRO DE LA UNIDAD DE APRENDIZAJE • Al término de la unidad. CIBERTEC CARRERAS PROFESIONALES . usando el lenguaje ActionScript.

■ Forma de onda: forma de un gráfico de las distintas amplitudes de una señal de sonido a lo largo del tiempo. No pueden cargar ni reproducir directamente archivos de sonido con otros formatos. como WAV o AIFF. ■ Velocidad de muestra: define el número de muestras por segundo que se toman de una señal de audio analógica para crear una señal digital.110 1. 1. Al cargar datos de sonido desde un archivo de sonido externo. Una de las formas de reproducir sonido es utilizar Adobe Flash Player y ActionScript. ■ Transmisión de flujo: proceso de reproducir el principio de un archivo de sonido o de vídeo mientras se descargan los datos restantes desde un servidor. En los archivos MP3. Una velocidad superior suele implicar una onda de sonido de mayor calidad. ■ Desplazamiento: posición de una señal de audio entre los canales izquierdos y derechos de un campo de sonido estéreo. se puede iniciar la reproducción del principio del archivo de sonido mientras se cargan los restantes datos. ■ mp3: MPEG-1 Audio Layer 3. Al reproducir un sonido en ActionScript. como el volumen del sonido y si éste es estéreo o mono.0 y Flash Player admiten archivos de sonido almacenados en formato MP3. Para poder controlar un sonido en ActionScript es necesario tener la información de sonido cargada en Flash Player. es un formato de compresión de sonido conocido.1 Conceptos y términos importantes La siguiente lista de referencia contiene términos importantes que se utilizan en este capítulo: ■ Amplitud: distancia de un punto de la forma de onda del sonido desde la línea cero o de equilibrio. la velocidad suele expresarse en miles de bits por segundo (kbps).1 kHz o 44. ActionScript 3. Los datos de sonido convertidos a formato digital tienen varias características. ■ Pico: punto más alto de una forma de onda. ■ Volumen: intensidad de un sonido. La velocidad de muestra del audio de CD estándar es de 44. ■ Velocidad: cantidad de datos que se codifican o se transmiten en cada segundo de un archivo de sonido. CARRERAS PROFESIONALES CIBERTEC . INTRODUCCIÓN A LA UTILIZACIÓN DE SONIDO Se pueden capturar y codificar audio digital (representaciones informáticas de la información de sonido). también se pueden ajustar estas características (por ejemplo. o MP3. ■ Almacenamiento en búfer: recepción y almacenamiento de los datos de sonido antes de que se reproduzcan. aumentar su volumen o hacer que parezca proceder de una dirección determinada).100 muestras por segundo. Aunque hay varios formatos de archivo de sonido que se utilizan para codificar audio digital. que pueden almacenar y recuperar para reproducirlo a través de parlantes.

mp3"). si el sonido del clic tiene un tamaño bastante grande. La herramienta de edición de Flash también permite comprimir archivos de sonido incorporados para reducir su tamaño de archivo. o bien se pueden transmitirse. Adobe Flash CS3 Professional permite importar archivos de sonido WAV o AIFF e incorporarlos en los archivos SWF de la aplicación con formato MP3. el nuevo objeto Sound empieza a cargar automáticamente el recurso de sonido especificado. como un sonido de clic que se asociará a un botón. CIBERTEC CARRERAS PROFESIONALES . excepto en los más sencillos. 1.0 y Flash Player admiten archivos de sonido que se almacenan en formato MP3. No pueden cargar ni reproducir directamente archivos de sonido con otros formatos. Por ejemplo. debe crear otro objeto Sound. la aplicación puede crear un nuevo objeto Sound y cargar automáticamente el archivo de sonido. es decir. Aspectos básicos de la arquitectura de sonido Las aplicaciones pueden cargar datos de sonido de cuatro orígenes principales: ■ Archivos de sonido externos cargados en tiempo de ejecución ■ Recursos de sonido incorporados en el archivo SWF de la aplicación ■ Datos de sonido de un micrófono conectado al sistema del usuario ■ Datos de sonido transmitidos desde un servidor multimedia remoto. Carga de archivos de sonido externos Cada instancia de la clase Sound existe para cargar y activar la reproducción de un recurso de sonido específico. aunque esta reducción de tamaño se compensa con una mejor calidad de sonido. Si se intenta reproducir un sonido no cargado. Resulta más seguro esperar a que se cargue totalmente el sonido antes de permitir que los usuarios realicen acciones que puedan iniciar la reproducción de sonidos.3. la aplicación debe prestar atención al progreso de carga del sonido y detectar los posibles errores. es posible que no esté completamente cargado cuando el usuario haga clic en el botón que activa dicho sonido.DISEÑO WEB II 111 1. En todos los casos. como Flash Media Server Los datos de sonido se pueden cargar completamente antes de su reproducción. se pueden reproducir mientras se están cargando. El constructor Sound() acepta un objeto URLRequest como primer parámetro. Cuando se proporciona un valor del parámetro URLRequest. Si se carga un archivo de sonido pequeño. como WAV o AIFF. puede producirse un error en tiempo de ejecución.2. tal como se muestra a continuación: var req:URLRequest = new URLRequest("click. Para cargar un nuevo recurso de sonido. Una aplicación no puede reutilizar un objeto Sound para cargar más de un sonido. var s:Sound = new Sound(req). ActionScript 3.

los sonidos que se reproducen cuando se hace clic en los botones). En la tabla siguiente se enumeran los eventos que puede distribuir un objeto Sound. Si se incorpora un archivo de sonido en la aplicación.PROGRESS) id3 (Event. Se distribuye cuando se han cargado todos los datos del recurso de sonido. resulta útil para sonidos de pequeño tamaño que se emplean como indicadores en la interfaz de usuario de la aplicación (por ejemplo. Utilización de sonidos incorporados La utilización de sonidos incorporados.112 El objeto Sound distribuye varios eventos distintos durante el proceso de carga del sonido. Se distribuye periódicamente durante el proceso de carga del sonido cuando se reciben datos del archivo o del flujo. utilizarlos con Comportamientos o utilizarlos directamente en código ActionScript.4.4.COMPLETE) ioError (IOErrorEvent. el tamaño del archivo SWF resultante aumenta con el tamaño del archivo de sonido. Después se pueden asignar a fotogramas en la línea de tiempo o a los fotogramas de un estado de botón. en lugar de cargar sonidos de un archivo externo. o bien cuando el proceso de carga se interrumpe antes de que se puedan recibir todos los datos de sonido progress (ProgressEvent.IO_ERROR) 1. 1. CARRERAS PROFESIONALES CIBERTEC .1. Se distribuye cuando no se puede encontrar un archivo de sonido.OPEN) Descripción Se distribuye antes de que se inicie la operación de carga del sonido. Es decir. Evento open (Event. El método preciso de incorporar un archivo de sonido en el archivo SWF de la aplicación varía de un entorno de desarrollo a otro. La aplicación puede detectar estos eventos para hacer un seguimiento del progreso de carga y asegurarse de que el sonido se carga por completo antes de reproducirse. Se distribuye cuando hay datos ID3 disponibles para un sonido MP3.ID3) complete (Event. Utilización de un archivo de sonido incorporado en Flash La herramienta de edición de Flash permite importar sonidos en varios formatos de sonido y almacenarlos como símbolos en la Biblioteca. la incorporación de archivos de sonido grandes en la aplicación puede hacer que el tamaño del archivo SWF sea excesivo. En esta sección se describe la manera de utilizar sonidos incorporados en código ActionScript con la herramienta de edición de Flash.

Seleccione Archivo > Importar > Importar a biblioteca y.mp3”.mp3")). el código siguiente empieza creando una nueva instancia de la clase DrumSound generada automáticamente: var drum:DrumSound = new DrumSound().media. En el campo Clase. a continuación. var channel:SoundChannel = drum.play(). 2. De manera predeterminada.Sound. se pueden realizar las operaciones siguientes: ■ Reproducir un sonido desde una posición de inicio específica ■ Pausar un sonido y reanudar la reproducción desde la misma posición posteriormente ■ Saber exactamente cuándo termina de reproducirse un sonido ■ Hacer un seguimiento del progreso de la reproducción de un sonido ■ Cambiar el volumen o el desplazamiento cuando se reproduce un sonido CIBERTEC CARRERAS PROFESIONALES . utilizará el nombre del archivo de sonido de este campo. Haga clic con el botón derecho en el nombre del archivo importado en el panel Biblioteca y seleccione Propiedades. haga lo siguiente: 1.media. 4. incluido el método play() antes mostrado. El campo Clase base debe mostrar flash. ActionScript no permite utilizar un punto en un nombre de clase. por lo que hereda los métodos y las propiedades de la clase Sound.media.4. debe cambiarlo por otro como “DrumSound”.0.play() de un objeto Sound: var snd:Sound = new Sound(new URLRequest("smallSound. Para utilizar el sonido incorporado hay que hacer referencia al nombre de clase del sonido en ActionScript. elija un archivo de sonido para importarlo. Si el nombre de archivo incluye un punto.2. Haga clic en Aceptar.DISEÑO WEB II 113 Para incorporar un archivo de sonido en una película Flash. Es posible que vea un cuadro de mensaje que indique que no se encontró una definición para esta clase en la ruta de clases. Si se introduce una clase cuyo nombre no coincide con el de ninguna de las clases de la ruta de clases de la aplicación.Sound. Haga clic en Aceptar y continúe. 5. Por ejemplo. 3. como en “DrumSound. se genera automáticamente una nueva clase que hereda de la clase flash.Sound. snd. Reproducción de sonidos Para reproducir un sonido cargado sólo hay que llamar al método Sound. escriba el nombre que debe utilizarse al hacer referencia a este sonido incorporado en ActionScript. 1. DrumSound es una subclase de la clase flash. Al reproducir sonidos con ActionScript 3. Active la casilla de verificación Exportar para ActionScript.play().

supongamos que el código carga y reproduce un archivo de sonido como este: var snd:Sound = new Sound(new URLRequest("bigSound. Se puede registrar la posición del sonido en el momento en que se detuvo y volver a reproducir el sonido desde dicha posición posteriormente. snd.play().play(1000.3. sólo se puede detener. Pausa y reanudación de un sonido Si la aplicación reproduce sonidos largos.play(). como canciones o emisiones podcast. La clase SoundChannel controla la reproducción de un solo sonido. 3). el sonido se reproduce de forma repetida desde el mismo punto de inicio cada vez. la propiedad SoundChannel.play().play(). pasando dicha posición en milisegundos como el parámetro startTime del método Sound. que indica el punto actual en los datos de sonido que se están reproduciendo. 1. Mientras se reproduce el sonido. La aplicación puede reproducir un sonido desde una posición de inicio específica. En este ejemplo. Por ejemplo. es recomendable dejar que los usuarios pausen y reanuden la reproducción de dichos sonidos. Cuando se llama al método Sound.4.mp3")). tres veces seguidas. Durante la reproducción en ActionScript un sonido no se puede pausar. También puede especificar un número fijo de veces que se repetirá el sonido en una sucesión rápida pasando un valor numérico en el parámetro loops del método Sound.position indica el punto del archivo de sonido que se está reproduciendo en ese momento. un sonido puede reproducirse desde cualquier punto. el sonido se reproduce desde un punto un segundo después del inicio del sonido. Cuando una aplicación llama al método Sound.mp3")). se crea una nueva instancia de la clase SoundChannel para controlar la reproducción. tal como se muestra en el código siguiente: var snd:Sound = new Sound(new URLRequest("repeatingSound.position puede considerarse como una cabeza lectora.play() con los parámetros startTime y loops. var channel:SoundChannel = snd. La propiedad SoundChannel.114 Para realizar estas operaciones durante la reproducción deben utilizarse las clases SoundChannel. SoundMixer y SoundTransform. Sin embargo. La aplicación puede almacenar el valor de posición CARRERAS PROFESIONALES CIBERTEC .

channel = snd. CIBERTEC CARRERAS PROFESIONALES .DISEÑO WEB II 115 antes de detener la reproducción del sonido. Para reanudar la reproducción del sonido desde el mismo punto en que se detuvo. como se indica a continuación: var pausePosition:int = channel. hay que pasar el valor de la posición almacenado anteriormente.play(pausePosition). channel.position.stop().

s.Sound. llama al método Sound.events. } CARRERAS PROFESIONALES CIBERTEC . Después.COMPLETE del objeto Sound. detecta el evento Event.load() con un nuevo valor URLRequest para el archivo de sonido.load(req). function onSoundLoaded(event:Event):void { var localSound:Sound = event. import flash.Event.116 Actividades Ejercicio 1: Agregar un preloader con código Actividad 3 Cargar y ejecutar un sonido de fondo en la película En primer lugar. La llamada al método play() del objeto Sound inicia la reproducción de sonido.play().URLRequest. El método onSoundLoaded() se ejecuta cuando se completa la carga de sonido.addEventListener(Event.media. import flash.target as Sound. var req:URLRequest = new URLRequest("ritter rost. s. que provoca la ejecución del método onSoundLoaded() cuando se cargan todos los datos de sonido.mp3"). A continuación.net. localSound. onSoundLoaded). var s:Sound = new Sound(). import flash.COMPLETE. el código de ejemplo crea un nuevo objeto Sound sin asignarle un valor inicial para el parámetro URLRequest. La propiedad de destino del objeto Event es una referencia al objeto Sound.

CIBERTEC CARRERAS PROFESIONALES .DISEÑO WEB II 117 Autoevaluación Diseño de Audio player dinámico con Precarga. El siguiente reproductor de audio con Flash debe permitir controlar el flujo del audio de cada archivo seleccionado.

com/tutorials/flash/as3sound/ Aquí hallará un tutorial para insertar sonidos con actionscript 3. debe crear otro objeto Sound. puede consultar las siguientes páginas.cl/blog/distintas-maneras-de-crear-un-preloader-as3-parte-1/ Distintas maneras de crear un Preloader con actionscript 3.republicofcode. como WAV o AIFF Una aplicación no puede reutilizar un objeto Sound para cargar más de un sonido. CARRERAS PROFESIONALES CIBERTEC .0.0 y Flash Player admiten archivos de sonido almacenados en formato MP3. No pueden cargar ni reproducir directamente archivos de sonido con otros formatos.0. Para cargar un nuevo recurso de sonido. http://www.118 Resumen ActionScript 3. http://jestudio. Si desea saber más acerca de estos temas.

DISEÑO WEB II

119

UNIDAD DE APRENDIZAJE

3
SEMANA

15
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
• Al término de la unidad, los alumnos diseñan páginas web con la herramienta Adobe Flash CS3, usando el lenguaje ActionScript, para integrar recursos interactivos o proyectos multimedia.

TEMARIO
• Video • Precargas • Métodos básicos • Precarga con componente ProgressBar • Precarga con código ActionScript

ACTIVIDADES PROPUESTAS
• Los alumnos implementan componentes de video en Flash. • Los alumnos implementan una precarga con el componente ProgressBar. • Los alumnos implementan una precarga con código ActionScript.

CIBERTEC

CARRERAS PROFESIONALES

120

1. INTRODUCCIÓN A LA UTILIZACIÓN DE VÍDEO
Una de las funciones importantes de Adobe Flash Player radica en la capacidad de mostrar y manipular información de vídeo con ActionScript de la misma forma que se puede manipular otros contenidos visuales, como las imágenes, las animaciones, el texto, etc. Cuando se crea Flash Video (FLV) en Adobe Flash CS3 Professional, se cuenta con la opción de seleccionar un aspecto para el vídeo, entre los que se incluyen los controles de reproducción habituales. No obstante, no hay motivo por el que se deba limitar a las opciones disponibles. Con ActionScript, se obtiene un control preciso de la carga, la reproducción y el control de la reproducción de vídeo; es decir, se podría crear un aspecto de vídeo personalizado o utilizar el vídeo de una forma menos típica si se desea. La utilización de vídeo en ActionScript implica trabajar con una combinación de varias clases: ■ Clase Video: el cuadro de contenido de vídeo real en el escenario es una instancia de la clase Video. La clase Video es un objeto de visualización, de manera que se puede manipular con las mismas técnicas que se aplican a otros objetos similares, como el ajuste de la posición, la aplicación de transformaciones, la aplicación de filtros y modos de mezcla, etc. ■ Clase NetStream: cuando se carga un archivo de vídeo que controlará ActionScript, se utiliza una instancia de NetStream para representar el origen del contenido de vídeo (en este caso, un flujo de datos de vídeo). La utilización de la instancia de NetStream también implica utilizar un objeto NetConnection, que es la conexión al archivo de vídeo, al igual que el túnel con el que se alimentan los datos de vídeo. ■ Clase Camera: cuando se utilizan datos de vídeo procedentes de una cámara conectada al ordenador del usuario, una instancia de Camera representa el origen del contenido de vídeo (la cámara del usuario y los datos de vídeo que proporciona). Cuando se carga vídeo externo, se puede cargar el archivo desde un servidor Web estándar para obtener una reproducción de descarga progresiva, o bien se puede trabajar con un flujo de vídeo transmitido por un servidor especializado como Macromedia® Flash® Media Server de Adobe.

1.1. Conceptos y términos importantes
La siguiente lista de referencia contiene términos importantes que se utilizan en esta sección: ■ Punto de referencia: marcador que se puede colocar en un instante de tiempo específico en un archivo de vídeo; por ejemplo, funciona como un marcador para buscar ese instante o proporcionar datos adicionales asociados a dicho momento. ■ Codificación: proceso de convertir datos de vídeo en un formato a otro formato; por ejemplo, convertir un vídeo de origen de alta resolución a un formato adecuado para la transmisión por Internet. ■ Fotograma: segmento individual de información de vídeo; cada fotograma es como una imagen estática que representa una instantánea

CARRERAS PROFESIONALES

CIBERTEC

DISEÑO WEB II

121

de un momento en el tiempo. Si se reproducen fotogramas de forma secuencial a alta velocidad, se crea la ilusión del movimiento. ■ Fotograma clave: fotograma de vídeo que contiene información completa del fotograma. El resto de fotogramas que siguen a un fotograma clave sólo contienen información sobre cómo difieren del fotograma clave, en lugar de incluir información relativa al fotograma completo. ■ Metadatos: información sobre un archivo de vídeo que se puede incorporar en el archivo de vídeo y recuperarse cuando se haya cargado el vídeo. ■ Descarga progresiva: cuando se transmite un archivo de vídeo desde un servidor Web estándar, los datos de vídeo se cargan mediante la descarga progresiva, es decir, la información de vídeo se carga de forma secuencial. Esto presenta la ventaja de que el vídeo puede empezar a reproducirse antes de que se haya descargado todo el archivo; sin embargo, impide poder saltar a una parte del vídeo que no se haya cargado aún. ■ Transmisión de flujo: como alternativa a la descarga progresiva, se puede utilizar un servidor de vídeo especial para emitir vídeo por Internet mediante la técnica conocida como transmisión de flujo (a veces denominada “transmisión de flujo verdadera”). Con la transmisión de flujo, el ordenador del espectador nunca descarga el vídeo completo a la vez. Para acelerar los tiempos de descarga, el ordenador sólo necesita, en cualquier momento, una parte de la información de vídeo total. Puesto que un servidor especial controla la transmisión del contenido de vídeo, se puede acceder en todo momento a cualquier parte del vídeo, en lugar de tener que esperar a que se descargue antes de acceder a él.

1.2. Aspectos básicos del formato Flash Video (FLV)
El formato del archivo FLV contiene datos de audio y vídeo codificados para publicar mediante Flash Player. Por ejemplo, si se dispone de un archivo de vídeo de QuickTime o Windows Media, se utiliza un codificador (como Flash 8 Video Encoder o Sorenson™ Squeeze) para convertirlo en un archivo FLV. Se pueden crear archivos FLV importando vídeo a la herramienta de edición de Flash y exportándolo como archivo FLV. Se puede utilizar el complemento de exportación de FLV para exportar archivos FLV de aplicaciones de edición de vídeo compatibles. La utilización de archivos FLV externos ofrece algunas posibilidades que no están disponibles al utilizar vídeo importado: ■ Pueden utilizarse clips de vídeo más largos en documentos de Flash sin que ello ralentice la reproducción. Los archivos FLV externos se reproducen utilizando la memoria caché, de modo que los archivos grandes se almacenan en partes pequeñas y se accede a ellos de forma dinámica; además, requieren menos memoria que los archivos de vídeo incorporados. ■ Un archivo FLV externo puede tener una velocidad de fotogramas distinta a la del documento de Flash en el que se reproduce. Por ejemplo, se puede establecer la velocidad de fotogramas del documento de Flash en 30 fotogramas por segundo (fps) y la velocidad de

CIBERTEC

CARRERAS PROFESIONALES

ya que se puede acceder a los metadatos del vídeo mediante controladores de eventos. El tercer paso consiste en crear un nuevo objeto Video y asociar el objeto NetStream creado anteriormente con el método attachNetStream() de la clase Video. por lo que no interrumpen su reproducción.122 fotogramas del vídeo en 21 fps. A veces. Esta opción permite un mejor control del vídeo que el vídeo incorporado. se puede añadir el objeto Video a la lista de visualización con el método addChild().attachNetStream(ns).flv en el mismo directorio que el archivo SWF: var ns:NetStream = new NetStream(nc). permite reproducir archivos FLV a distintas velocidades de fotogramas sin necesidad de alterar el contenido de Flash existente. Asimismo. 1.3. para garantizar una reproducción del vídeo sin problemas. var nc:NetConnection = new NetConnection(). los archivos de vídeo importados pueden interrumpir la reproducción de un documento para realizar ciertas funciones. El primer paso consiste en crear un objeto NetConnection.connect(null). ns. addChild(vid). ns. asyncErrorHandler). Los archivos FLV pueden realizar funciones independientemente del documento de Flash. nc. El siguiente fragmento conecta un objeto NetStream a la instancia de NetConnection especificada y carga un archivo FLV denominado video. como acceder a una unidad de CD-ROM. El segundo paso es crear un objeto NetStream que adopte un objeto NetConnection como parámetro y especificar el archivo FLV que se desea cargar. function asyncErrorHandler(event:AsyncErrorEvent):void { // omitir error } 3. CARRERAS PROFESIONALES CIBERTEC . La clase NetConnection permite reproducir archivos FLV transmitidos desde una dirección HTTP o una unidad local pasando el valor null al método connect(). A continuación.addEventListener(AsyncErrorEvent.ASYNC_ERROR. vid.flv"). Carga de archivos de vídeo La carga de vídeos con las clases NetStream y NetConnection es un proceso de varios pasos: 1. si se conecta a un archivo FLV local que no utiliza un servidor como Adobe Flash Media Server 2 o Adobe Flex. ■ La rotulación de contenido de vídeo es más fácil con los archivos FLV externos. 2. tal como se muestra en el fragmento siguiente: var vid:Video = new Video().play("video. ■ Con archivos FLV externos no es preciso interrumpir la reproducción de los documentos de Flash mientras se carga el archivo de vídeo.

El metodo Math. se trabajaran las precargas de dos maneras. PRECARGAS Las precargas son animaciones que van mostrando porcentaje de carga. Una es. y la otra es. Objeto. Por ejemplo.flv en el mismo directorio que el archivo SWF.1.floor(x) Donde x es el numero decimal que usará para obtener la parte entera.3. Su sintaxis es la siguiente. Métodos Básicos Para manipular el objeto de precarga especialmente si lo va a hacer con código es necesario que conozca algunos métodos: 2.1. sonido o imagen.9) 2.getBytesLoaded() 2. el siguiente código retorna el número de bytes que se están cargando de la película principal cargados = _root. Flash Player intentará cargar el archivo de vídeo video.2.DISEÑO WEB II 123 Tras introducir el código anterior. 2. el siguiente código retorna el valor 12: Math. En esta sesion. Su sintaxis es la siguiente. El método getBytesTotal() Este método retorna el número de bytes que contiene una película.floor() Este método retorna la parte entera del parámetro que recibe (numero decimal).1. barra de avance de carga y cálculo de otros datos útiles como cantidad de bytes cargados y cantidad completa de bytes que componen la película.1.getBytesLoaded() Por ejemplo.1. sonido o imagen. usando los componentes preloader y loader respectivamente. Antes de empezar es necesario conocer algunos conceptos básicos para realizar precargas de cualquier manera.getBytesTotal() CIBERTEC CARRERAS PROFESIONALES . Su sintaxis es la siguiente: Math. El método getBytesLoaded() Este método retorna el número de bytes que se está cargando de una película. usando puro codigo de actionScript. Objeto. 2.floor(12.

if (cargados == total) { //Hacer que se deje de ejecutar esta función llamada cargando clearInterval(hiloPrecarga). Precarga Con Codigo Actionscript Con los conceptos aprendidos en la sección anterior.5. Cree una nueva película en Flash 2. Inserte en la misma escena. se puede insertar una precarga usando solo códigos de actionScript con la ayuda de algunos símbolos movieclips. Asígnele el texto 100% CARRERAS PROFESIONALES CIBERTEC . 1). //Iniciar la película play().4. interval) Donde nombreVariable es el nombre de una variable que representa a la función functionName. Asigne el nombre de instancia barra_mc 3. El procedimiento es el siguiente: 1. un texto dinámico con el nombre de instancia porcentaje_txt. La sintaxis es la siguiente: var nombreVariable=setInterval(functionName.1. } 2.2. se ejecuta la película. 2. método u objeto a intervalos periódicos mientras se ejecuta un archivo swf.124 2. setInterval es el tiempo expresado en milisegundos entre las llamadas a la función functionName El siguiente código llama a la función cargando cada milisegundo var hiloPrecarga = setInterval(cargando. functionName es el nombre de la función que se va a ejecutar el método setInterval.1. El método setIntervall() Este método llama a una función. Cree un movieClip con una barra que se anime con interpolación por forma con una duración de 100 fotogramas. El método clearIntervall() Este método elimina la llamada a una función con el método setInterval() El siguiente código detiene la ejecución de la función cargando cuando los bytes cargados son iguales a los bytes totales de la película y luego.

total = this. if (cargados == total) { clearInterval(hiloPrecarga).getBytesTotal(). porcentaje. Mediante una regla de tres simple se obtiene el porcentaje cargado y se redondea el valor con la función Math. presione F9 y asigne el siguiente código: function cargando() { var total. 7. play().DISEÑO WEB II 125 4. 1). se deja de ejecutar la función cargando y se inicia la película CIBERTEC CARRERAS PROFESIONALES .floor Se asigna al campo de texto porcentaje_txt el porcentaje cargado. Importe un video. porcentaje_txt. cargados = this. cargados. porcentaje = Math. En el primer fotograma de la primera escena.getBytesLoaded(). } } var hiloPrecarga = setInterval(cargando.floor((cargados*100)/total). cargados y porcentaje para almacenar el total de bytes que tiene el video. Mueve la barra de carga al frame correspondiente al porcentaje Si la cantidad de bytes cargados es igual a la cantidad total de bytes.text = porcentaje+" %". stop(). los bytes que se van cargando y el porcentaje de avance del proceso de precarga.gotoAndStop(porcentaje). una imagen o un sonido en la segunda escena y conviértalo en movieClip 5. En el primer fotograma de la segunda escena. Ejecute la película La función de precarga "cargando" se ejecutará todo el tiempo hasta que haya cargado totalmente la película. barra_mc. Se declaran las siguientes variables: total. presione F9 y asigne la acción stop() 6.

El valor por defecto es event. o manual.1. sonido o imagen. Este valor puedes ser cualquiera de los siguientes: event. Se establece el modo con el parámetro mode Los modos mas usados son el "event" y el "polled". polled. CARRERAS PROFESIONALES CIBERTEC . es necesario indicar los parámetros siguientes: mode El modo de operar del componente progress bar. nuestra función revisara constantemente la cantidad de bytes descargados y sólo iniciará la película hasta que la descarga termine La variable "hiloPrecarga" nos servirá para saber que esta corriendo nuestra función y frenar su ejecución cada milisegundo por medio de "clearInterval" La acción stop() evita que inicie la película 2. o expone los métodos getBytesLoaded y getBytesTotalS (modo polled). Estos modos usan el parametro source para especificar el proceso de carga que emite los métodos progress y complete (modo event). insertar barras de progreso (progressBar) e imágenes de carga (Loader).126 La función setInterval nos servirá para que la función "cargando" se ejecute cada 1 milisegundo. En esta sección usaremos dos componentes: el progressBar y el Loader. Así. Parámetros del componente progressBar Cuando se instancia un componente progressBar.3. 2.3. Adobe Flash tiene un panel de componentes que permiten. video o sonido. Esto es una información básica importante para los usuarios cuando se interactúa con una aplicación. entre otras cosas. Precarga Con El Componente Progressbar Una barra de progreso le permite mostrar el avance de la carga del contenido de un video. source Es el nombre de instancia del componente Loader que contiene un objeto imagen. Existen varios modos de usar el componente ProgressBar.

label Es un texto que indica el proceso de carga. left. center. y %3 es una variable para el porcentaje del contenido cargado. Los caracteres "%%" son variables que representan al signo "%". El valor por defecto es bottom. labelPlacement Es la posición de la etiqueta en relación con la barra de progreso. el valor por defecto es right. %1 es una variable que contiene el numero de bytes cargados actualmente. Este parámetro puede tener uno de los siguientes valores: top. conversion Es un numero para dividir las variables %1 and %2 antes de ser mostrados en el parámetro label. El valor por defecto es uno. Este valor puede ser right o left. Si coloca 1024. el número indicará kilobytes cargados. right.DISEÑO WEB II 127 direction La direccion hacia la cual se dirige el relleno de la barra. bottom. Este parámetro es una cadena con el formato "%1 out of %2 loaded (%3%%)". %2 es una variable para el total de bytes cargados. CIBERTEC CARRERAS PROFESIONALES .

beginFill(color).20). texto. barra. Arrastre un componente ProgressBar al escenario 2.graphics. Seleccione la barra de progreso pBar en el escenario. presione F9 y escriba el siguiente codigo en el panel de acciones: loader.autoLoad=false loader.load() CARRERAS PROFESIONALES CIBERTEC . ingrese el nombre loader en el parámetro source.y=stage. el contenido de la carga emite los eventos progress y complete que la barra de progreso usa para mostrar el avance de la carga. En el modo event.drawRect(0. En el panel de Properties.x+barra. var color:int=0x000000. texto.stageWidth/2-50. y en el panel Properties.bytesTotal){ play(). addChild(barra) addChild(texto).x=barra.y=barra. function car(e:ProgressEvent){ porcentaje=(e. texto.bytesLoaded/e. Ejercicio 2: Agregar un componente ProgressBar a una película El siguiente procedimiento explica como agregar un componente ProgressBar a una película. 6.graphics. El componente Loader emite estos eventos.loaderInfo.text=String(Math. var texto:TextField=new TextField.128 Actividades Ejercicio 1: Agregar un preloader con código stop(). Seleccione el modo event 3.content=”nombre del archivo de video o sonido” pBar. barra. this.addEventListener(ProgressEvent.y. Seleccione el frame 1. En el panel de Properties haga lo siguiente: i. car). barra.x=stage.stageHeight/2-10. Ingrese el nombre de instancia pBar ii.0.round(porcentaje))+"%" if(e.bytesLoaded==e. la barra de progreso es usado en modo event.porcentaje. ingrese el nombre de instancia loader 5.source=loader loader. barra. Arrastre un componente Loader al escenario 4.graphics.clear(). var porcentaje:Number.PROGRESS.width.bytesTotal)*100 barra. 1. En este ejemplo. var barra:Sprite=new Sprite().

ASYNC_ERROR.addEventListener(MouseEvent. stopBtn y togglePauseBtn): var nc:NetConnection = new NetConnection(). nc.seek(0).addEventListener(MouseEvent. pauseHandler). var ns:NetStream = new NetStream(nc). pauseBtn.CLICK. } Si se hace clic en la instancia de botón pauseBtn. } function togglePauseHandler(event:MouseEvent):void { ns. Si el vídeo ya está en pausa. playBtn. CIBERTEC CARRERAS PROFESIONALES .connect(null). playBtn.flv"). function asyncErrorHandler(event:AsyncErrorEvent):void { // omitir error } var vid:Video = new Video(). asyncErrorHandler). vid. togglePauseHandler).addEventListener(MouseEvent. cree un nuevo documento y añada cuatro instancias de botón al espacio de trabajo (pauseBtn. hacer clic en este botón no tendrá ningún efecto. Si se hace clic en el botón playBtn. el botón no tendrá ningún efecto si el vídeo ya estaba en reproducción. se reanuda la reproducción de vídeo si ésta estaba en pausa anteriormente. ns. ns. ejecutar y controlar un video En el ejemplo siguiente se demuestra cómo controlar un vídeo mediante diferentes botones. playHandler).addEventListener(AsyncErrorEvent. function pauseHandler(event:MouseEvent):void { ns.resume(). ns.CLICK. ns.pause().addEventListener(MouseEvent.CLICK. stopBtn. addChild(vid). } function playHandler(event:MouseEvent):void { ns. el archivo de vídeo quedará en pausa.pause(). stopHandler). togglePauseBtn.play("video.togglePause().attachNetStream(ns).CLICK.DISEÑO WEB II 129 Actividad 3 Cargar. } function stopHandler(event:MouseEvent):void { // pausar el flujo y desplazar la cabeza lectora al // principio del flujo. Para ejecutar el siguiente ejemplo. de lo contrario.

El siguiente video player consiste en hacer clic en los botones de los videos de la parte derecha para que se reproduzca el video en la parte izquierda.130 Autoevaluación Diseño de video player dinámico con Precarga. Este video player tiene controladores de video en la parte inferior CARRERAS PROFESIONALES CIBERTEC .

0 Para manipular el objeto de precarga especialmente si lo va a hacer con código es necesario que conozca algunos métodos básicos como Math. http://jestudio.0.com/?p=77 Aquí hallará un tutorial para insertar videos con actionscript 3. getBytesTotal().cl/blog/distintas-maneras-de-crear-un-preloader-as3-parte-1/ Distintas maneras de crear un Preloader con actionscript 3.videoaprende. CIBERTEC CARRERAS PROFESIONALES . Si desea saber más acerca de estos temas. http://www. entre otros. puede consultar las siguientes páginas.DISEÑO WEB II 131 Resumen El formato del archivo FLV contiene datos de audio y vídeo codificados para publicar mediante Flash Placer Se pueden crear archivos FLV importando vídeo a la herramienta de edición de Flash y exportándolo como archivo FLV La utilización de archivos FLV externos ofrece algunas posibilidades que no están disponibles al utilizar vídeo importado Preloader es el cargador de una página web. Se puede insertar mediante el componente ProgressBar o mediante código ActionScript 3.0.getBytesLoaded().floor(). El que normalmente indica el porcentaje de la carga o la cantidad de bites cargados.