diseñp web manual

Diseño Web II

2

CARRERAS PROFESIONALES

CIBERTEC

DISEÑO WEB II

3

NDICE Í NDICE Presentación

5

Red de contenidos

6

Unidad de aprendizaje 1: El lenguaje XML SEMANA 1

: Introducción al lenguaje XML

7

SEMANA 2

: Cargar XML

17

Unidad de aprendizaje 2: El lenguaje CSS SEMANA 3

: Estilos CSS

SEMANA 4

:

SEMANA 5

: Integración de XML, CSS y Flash

29

PC1: Pagina personal con xml y css 41

Unidad de aprendizaje 3: El lenguaje ActionScript 3.0 SEMANA 6

: Manejo de Niveles

PC2: Pagina personal con enlaces

SEMANA 8 SEMANA 9

53

: Desarrollo de Aplicaciones web con Flash CS3

69

SEMANA 10 : Metodos de Movieclips

73

SEMANA 11 : La clase Timer

85

SEMANA 12 :

PC3: Web Site de Curso Virtual con animaciones

SEMANA 13 : La clase Tween

93

SEMANA 14 : Sonidos

109

SEMANA 15

Videos

119

SEMANA 16

PC4: Diseño de un juego interactivo

SEMANA 17 : No Hay Clases

CIBERTEC


4


CIBERTEC

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. Brinda a los alumnos un conjunto de herramientas de software como Adobe Flash CS3, CSS y XML, para el diseño de páginas web con aplicaciones multimedia. El manual para el curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las que se desarrollan durante semanas determinadas. En cada una de ellas, hallará los logros, que debe alcanzar al final de la unidad; el tema tratado, el cual será ampliamente desarrollado; y los contenidos, que debe desarrollar, es decir, los subtemas. Por último, encontrará las actividades que deberá desarrollar en cada sesión, 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.0. En primer lugar, se inicia con el programa. Adobe Flash CS3 que permite diseñar páginas web usando el lenguaje ActionScript. Continúa con el lenguaje XML, que junto con ActionScript, brinda al alumno una variedad de herramientas para la estructuración de la información para transformarla y presentarla en una página web. Por ejemplo, se pueden crear galeria de imágenes, noticias dinámicas, etc.

CIBERTEC


6

RED DE CONTENIDOS

Diseño Web II

El lenguaje ActionScript 3.0

Métodos

Propieda des

Timer

Tween

Audio

Video


El lenguaje XML

Objetos Metodos

Propie dades

El lenguaje CSS

CSS

Flash XML

CIBERTEC

Flash CSS

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, 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 • • • •

Estructura XLM Conceptos XML Declaración XML Documentos XML bien formados

ACTIVIDADES PROPUESTAS • •

CIBERTEC

Los alumnos diseñan documentos XML bien formados. Los alumnos diseñan galería de imagenes con XML


8

1. INTRODUCCIÓN A XML XML, sigla en inglés de E xt ensible M arkup Language («lenguaje de marcas ampliable»), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). 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). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades. Algunos de estos lenguajes que usan XML para su definición son XHTML, SVG, MathML. XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas. Se puede usar en bases de datos, editores de texto, hojas de cálculo y casi cualquier cosa imaginable. XML es una tecnología sencilla que tiene complementan y la hacen mucho más grande mayores. Tiene un papel muy importante en compatibilidad entre sistemas para compartir segura, fiable y fácil.

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, Galeria de videos, reproductor de musica y videos, menus dinamicos, noticias dinamicas entre otros.

1.1. 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. Sólamente se permite un elemento raíz. Esta restriccón le es muy útil al parser para asegurarse que el documento está completo.


CIBERTEC

DISEÑO WEB II

9

1 Viviana

•

Elemento: elemento individual de un documento XML, identificado como una etiqueta inicial y una etiqueta final, y el contenido existente entre las etiquetas. Los elementos XML pueden contener texto o elementos de

otro tipo, o pueden estar vacíos.

1 Viviana

•

Elemento vacío: elemento XML que no contiene elementos secundarios. Los elementos vacíos se suelen escribir con una sola etiqueta (como ).

•

Documento: estructura XML individual. Un documento XML puede contener un número arbitrario de elementos (o puede constar únicamente de un elemento vacío); no obstante, debe tener un solo elemento de nivel superior que contenga a todos los demás elementos del documento.

•

Nodo: nombre alternativo para elemento XML.

•

Atributo: valor con nombre asociado con un elemento que se escribe en la etiqueta inicial del elemento con el formato nombreAtributo="valor", en lugar de escribirse como un elemento secundario independiente anidado dentro del elemento.

•

Entidades predefinidas. En XML 1.0, se definen cinco entidades para representar caracteres especiales y que no se interpreten como marcado por el procesador XML. Es decir, que así podemos usar el carácter "<" sin que se interprete como el comienzo de una etiqueta XML, por ejemplo.

CIBERTEC


10

Entidad Caracter & & <

<

>

>

' ' " "

•

Secciones CDATA. Existe otra construcción en XML que permite especificar datos, utilizando cualquier carácter, especial o no, sin que se interprete como marcado XML. La razón de esta construcción llamada CDATA (Character Data) es que a veces es necesario para los autores de documentos XML, poder leerlo facilmente sin tener que descifrar los códigos de entidades. Especialmente cuando son muchas. Como ejemplo, el siguiente (primero usando entidades predefinidas, y luego con un bloque CDATA)

Lo siguiente es un ejemplo de HTML. Rock & Roll Rock & Roll ]]> Como hemos visto, dentro de una sección CDATA podemos poner cualquier cosa, que no será interpretada como algo que no es. Existe empero una excepción, y es la cadena " ]] > " con la que termina el bloque CDATA. Esta cadena no puede utilizarse dentro de una sección CDATA.

•

Comentarios

A veces es conveniente insertar comentarios en el documento XML, que sean ignorados por el procesado de la información y las reproducciones del documento. Los comentarios tienen el mismo formato que los comentarios de HTML. Es decir, comienzan por la cadena "".

Se pueden introducir comentarios en cualquier lugar de la instancia o del prólogo, pero nunca dentro de las declaraciones, etiquetas, u otros comentarios.


CIBERTEC

DISEÑO WEB II

11

1.2. Declaracion XML Los documentos XML pueden, y deberían, 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: Este documento se adecua a la Especificación XML 1.0.

Indicación del juego de caracteres utilizados (encoding): Soporta tildes y la letra ñ. Si no se especifica un juego de caracteres, se sobreentiende que se está utilizando UTF-8 (no acepta tildes ni la letra ñ)

1.3. Estructura de un documento XML Los datos XML se escriben en formato de texto simple, con una sintaxis específica para organizar la información en un formato estructurado. Generalmente, un conjunto individual de datos XML se denomina documento XML. En formato XML, los datos se organizan en elementos (que pueden ser elementos de datos individuales o contenedores para otros elementos) con una estructura jerárquica. Cada documento XML tiene un elemento individual como elemento de nivel superior o principal; dentro de este elemento raíz puede haber un solo elemento de información, aunque es más probable que haya otros elementos, que a su vez contienen otros elementos, etc. Por ejemplo, el siguiente documento XML contiene información sobre un álbum de música:

mujer bonita Los Platillos negros Balada 2006-10-17-08:31 Traidora Harry el hermoso < genero >Rock 2007-10-27-10:45

Cada elemento se distingue mediante un conjunto de etiquetas, constituidas por el nombre del elemento entre corchetes angulares (signos menor que y mayor que). La etiqueta inicial, que indica el principio del elemento, tiene el nombre de elemento: La etiqueta final, que marca el final del elemento, tiene una barra diagonal antes del nombre del elemento:

CIBERTEC


12

Si un elemento no contiene nada, puede escribirse como un elemento vacío (y se representa con una sola etiqueta). En XML, este elemento: es idéntico a este elemento: Además del contenido del elemento entre las etiquetas inicial y final, un elemento también puede incluir otros valores, denominados atributos, que se definen en la etiqueta inicial del elemento. Por ejemplo, este elemento XML define un solo atributo denominado duracion, con valor "4:19": Cada elemento XML tiene contenido, que puede ser un valor individual, uno o más elementos XML, o nada (en el caso de un elemento vacío).

1.4 Escribir documentos XML bien formados Para escribir documentos XML bien formados, hay que seguir unas reglas básicas 1. Sólo puede haber un elemento raíz 2. Toda etiqueta abierta hay que cerrarla: 3. Es sensitivo (mayúsculas y minúsculas), etiquetas correspondientes se tienen que escribir igual 4. No se pueden intercalar etiquetas: Applied XML12 5. Una “tag” (etiqueta) puede tener atributos cerrados entre comillas: Juan 6. El nombre de las etiquetas empiezan con una letra, o con uno o más signos de puntuación: ; ; ; 7. Los comentarios van encerrados entre: Un documento bien formado es aquel documento que cumple con la especificación de XML 1.0, es decir que sea sintácticamente correcto. Ejemplo de un documento XML bien formado Juan 12.344.123 Applied XML libro 24


CIBERTEC

DISEÑO WEB II

13

Actividades

Actividad 1 Diseñe los siguientes documentos xml. Use Dreamweaver o Block de notas

cotizacion.xml

books.xml

CIBERTEC


14

Autoevaluación Diseñe el siguiente documento XML Carlos Perez 4555-7895 Dario Raimon 4555-1235


CIBERTEC

DISEÑO WEB II

15

Resumen

 XML ofrece una forma estándar y cómoda de clasificar datos y facilitar su lectura,

acceso y manipulación. Utiliza una estructura de árbol y una estructura de etiquetas similares a las de HTML.  Un objeto XML puede representar un elemento, atributo, comentario, instrucción de procesamiento o elemento de texto XML.  Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.  http://www.videoaprende.com/?p=86

Aquí hallará un tutorial sobre el uso de xml con as3 y su diferencia con as2.  http://klr20mg.com/2006/07/11/as3-cargando-informacion-externa-xml/

En esta página, hallará un ejercicio paso a paso de xml.

CIBERTEC


16


CIBERTEC

DISEÑO WEB II

17


1 SEMANA

2



TEMARIO •

Cargar XML desde Flash

ACTIVIDADES PROPUESTAS •

CIBERTEC

Los alumnos en una película de Flash, cargan un archivo XML.


18

1. ACTIONSCRIPT CON XML 1.2. Objetos ActionScript 3.0 incluye varias clases que se utilizan para trabajar con información estructurada en formato XML. Las clases principales son:

XML: Representa un solo elemento XML, que puede ser un documento XML con varios elementos secundarios o un elemento con un solo valor en un documento. var datosXml:XML=new XML();

URLRequest : Captura la ubicacion del archivo xml que se va a cargar en formato HTTP. Los objetos instanciados con la clase URLRequest se pasan al metodo load() de un objeto de la clase URLLoader. var ruta:URLRequest=new URLRquest(“archivo.xml”)

URLLoader: Descarga los datos de la dirección URL como texto, datos binarios o variables. Es útil para descargar archives de textos, como por ejemplo archivos 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. Puede ser como texto, datos binarios o variables. docXML.dataFormat=URLLoaderDataFormat.TEXT;

1.2. Eventos Los eventos son sucesos que le ocurren al objeto y que al verificarse el suceso, se llama a una function para realizar un conjunto de acciones. Por ejemplo despues de cargarse un documento xml, es necesario indicar el evento siguiente: objetoLoader.addEventListener(Event.COMPLETE ,completado); Este codigo significa que al completarse la carga del archivo xml, se va a llamar a la function completado, la cual se debe crear en algún lugar del programa.

1.3. Funciones Las funciones son bloques de codigo que realizan tareas especificas y pueden reutilizarse en el programa. Por ejemplo, la siguiente función se ejecuará despues de completarse la carga del archive xml.

function completado (e:Event):void { xml = new XML(e.target.data); trace(xml); } Se usa el evento e:Event para recibir los datos de texto del document xml. Esta recepción se realiza usando la propiedad e.target.data .


CIBERTEC

DISEÑO WEB II

19

2. CARGAR XML En versiones anteriores a ActionScript, cargar un archivo XML se realizaba al invocar el método load() directamente en un objeto XML. En ActioScript 3.0, 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.0 dejando a su eleccion implementar su porpia solucion. El proceso de cargar un archivo XML es muy sencillo. En primer lugar se tiene que hacer que una instancia URLLoader cargue los datos desde el URL. Para decirle al URLLoader que cargue los datos como texto plano, su propiedad dataFormat se debe establecer en DataFormat.TEXT. 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. 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, se debe invocar el método URLLoader. Load() para lanzar el proceso de carga, pasando una instancia URLRequest que apunta al URL del archivo XML. Se puede utilizar la clase URLLoader para cargar datos XML desde una dirección URL. 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. Puede ser incluso un archivo xml grabado en su disco local: var myXML:XML = new XML(); var XML_URL:String = "http://www.example.com/Sample3.xml"; var myXMLURL:URLRequest = new URLRequest(XML_URL); var myLoader:URLLoader = new URLLoader(myXMLURL); myLoader.addEventListener(Event .COMPLETE, xmlLoaded); function xmlLoaded(event:Event):void { myXML = XML(myLoader.data); trace("Data loaded."); }

En el ejemplo siguiente, se puede observar el uso del bloque try…catch en el método completado. Si el archivo XML estuviese mal estructurado, se genera un error TypeError cuando los datos descargados se convierten en una instancia XML. El error lo captura el bloque catch, permitiendole gestionar el error.

import flash.display.*; import flash.events.*; import flash.net.*; import flash.utils.*; var loader:URLLoader=new URLLoader(); loader.dataFormat=URLLoaderDataFormat.TEXT; loader.addEventListener(Event.COMPLETE,completado);

CIBERTEC


20

loader.load(new URLRequest("datosexternos.xml")); function completado(event:Event):void{ try{ var example:XML=new XML(event.target.data); trace(example); }catch(e:TypeError){ trace("No se puede cargar el XML"); trace(e.message); } }

El arhchivo xml se llama datosexternos.xml y tiene la siguiente información: Carlos Perez 4555-7895 Dario Raimon 4555-1235

2. 1. 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. Dado el documento datosexternos.xml, se procederá a realizar la lectura de cada uno de los datos. 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.contacto[0].nombre)

Resultado: Carlos

Para leer e imprimir el atributo tipo del segundo contacto: trace(example.contacto[1].@tipo)

Resultado: amigo

Para leer e imprimir el texto del comentario del primer contacto: trace(example.contacto[0].comentario)


CIBERTEC

DISEÑO WEB II

21

Actividades Actividad 1

En el siguiente código, se carga un archivo xml llamado datos externos.xml y desde flash se leen algunos datos y se imprimen en un cuadro de texto. El documento XML tiene la siguiente informacion: Carlos Perez 4555-7895 Dario Raimon 4555-1235 Existe otra construcción en XML que permite especificar datos, utilizando cualquier carácter, especial o no, sin que se interprete como marcado XML. La razón de esta construcción llamada CDATA (Character Data) es que a veces es necesario para los autores de documentos XML, poder leerlo facilmente sin tener que descifrar los códigos de entidades. Especialmente cuando son muchas. A continuación, el código de Actionscript 3 que carga el XML. Lo pondremos en el primer fotograma de nuestra película Flash. El archivo se grabara con el nombre datosexternosXML.fla: var loader:URLLoader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.TEXT; loader.addEventListener(Event.COMPLETE, onComplete); var request:URLRequest = new URLRequest("datosexternos.xml"); loader.load(request); var test_txt:TextField = new TextField(); test_txt.multiline = true; test_txt.wordWrap = true; test_txt.autoSize = "left"; test_txt.x=15 test_txt.y=15 test_txt.width=300 test_txt.height=350 addChild(test_txt);

CIBERTEC


22

function onComplete(event:Event):void { var myXML:XML = new XML(event.target.data) //test 1 test_txt.text=myXML //test2 test_txt.appendText("\n") for each(var test:XML in myXML..apellido) test_txt.appendText("\napellido: "+test); //test3 test_txt.appendText("\n") test_txt.appendText("\ntipo: "+myXML.contacto[0].@tipo) //test4 test_txt.appendText("\n") for(var i:uint = 0; i
Actividad 2

En el siguiente ejemplo se carga un archivo texto.xml en el Flash y se almacena los datos en tres cuadros de textos llamados código_txt, nombre_txt y titulo_txt. Archivo texto.xml: 123 Jaime Paredes Prof. Cibertec Archivo cargarXMLtextoAS3.fla: var loader:URLLoader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.TEXT; loader.addEventListener(Event.COMPLETE, onComplete); var request:URLRequest = new URLRequest("texto.xml"); loader.load(request); var codigo_txt:TextField=new TextField(); codigo_txt.x=180 codigo_txt.y=50 codigo_txt.width=140 codigo_txt.height=25 codigo_txt.autoSize="right" addChild(codigo_txt); var nombre_txt:TextField=new TextField(); nombre_txt.x=180 nombre_txt.y=80 nombre_txt.width=140


CIBERTEC

DISEÑO WEB II

23

nombre_txt.height=25 nombre_txt.autoSize="right" addChild(nombre_txt); var titulo_txt:TextField=new TextField(); titulo_txt.x=180 titulo_txt.y=110 titulo_txt.width=140 titulo_txt.height=25 titulo_txt.autoSize="right" addChild(titulo_txt); function onComplete (event:Event):void { var myXML:XML = new XML(event.target.data) codigo_txt.text = myXML.elements("codigo"); nombre_txt.text = myXML.elements("nombre"); titulo_txt.text = myXML.elements("titulo"); };

Actividad 3 En este ejemplo se va a cargar un archivo libros.xml en Flash. Luego se va a mostrar todos los elementos del archivo y posteriormente se haran algunos cambios para mostrar solo algunos elementos: El archivo libros.xml Foundation ActionScript Animation: Making Things Move Keith Peters http://tinyurl.com/npuxt Send in the Idiots: Stories from the Other Side of Autism Kamran Nazeer http://tinyurl.com/lo5ts En Flash, el archivo se llama cargarXML1.fla. en el primer fotograma se colocara el siguiente código: var xmlLoader:URLLoader = new URLLoader(); var xmlData:XML = new XML(); xmlLoader.addEventListener(Event.COMPLETE, LoadXML); xmlLoader.load(new URLRequest("libros.xml")); function LoadXML(e:Event):void { xmlData = new XML(e.target.data); trace(xmlData);

CIBERTEC


24

Ahora, reemplace la función LoadXML por estas dos funciones:

function LoadXML(e:Event):void { xmlData = new XML(e.target.data); AnalizarLibro (xmlData); }

function AnalizarLibro (bookInput:XML):void { trace("XML Output"); trace("------------------------"); trace(bookInput); } Observa que ahora tenemos una nueva función AnalizarLibro que tiene un objeto XML como argumento. 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. Para comprobar esto, presionamos Ctrl + Enter y verás la misma sin cambios en los datos del XML que ha visto antes: Sin embargo, si quisiera ver solo a partir del elemento book lo que tiene hacer es añadir una palabra extra a la instruccion trace (bookInput).

function AnalizarLibro (bookInput:XML):void { trace("XML Output"); trace("------------------------"); trace(bookInput.book); } Se cambia el trace solamente de bookinput a bookinput.book donde book representa el nombre del elemento que se quiere mostrar. A continuación cuando ejecutemos nuestro código observaremos los nodos que encajan con el elemento Book Foundation ActionScript Animation: Making Things Move Keith Peters http://tinyurl.com/npuxt Send in the Idiots: Stories from the Other Side of Autism Kamran Nazeer http://tinyurl.com/lo5ts Si se desea mostrar sólo los nombres de todos los autores ubicados dentro de nuestro nodo: book, notara que los nombres de los autores de libros se almacenan en el elemento , por lo que debemos cambiar nuestro trace de bookInput.book a bookInput.book.author

function AnalizarLibro (bookInput:XML):void { trace("XML Output"); trace("------------------------"); trace(bookInput.book.author); }


CIBERTEC

DISEÑO WEB II

25

Cuando se ejecute la película, se observara lo siguiente en la ventana de salida: Keith Peters Kamran Nazeer

Con este cambio que realizamos ahora podrás ver la lista de los autores, pero dicha lista esta rodeada por tags . La razón de esto es que estas traceando el elemento XML en si mismo y no su contenido. Para devolver el contenido de un elemento XML, debes usar la función text()

function AnalizarLibro (bookInput:XML):void { trace("XML Output"); trace("------------------------"); trace(bookInput.Book.author.text()); } Cuando ejecutes la aplicación en esta ocasión, todos los autores se mostraran sin el tag . Lamentablemente, los nombres estarán en una línea con ningún espacio entre ellos. Este es un pequeño efecto secundario que puede ser fácilmente modificado. Una forma de solucionar este problema es mediante el uso de posiciones indexadas para recuperar sólo los valores que nos interesan. Por ejemplo, para recuperar Keith Peters, pasaremos el índice con el valór en 0:

function AnalizarLibro (bookInput:XML):void { trace("XML Output"); trace("------------------------"); trace(bookInput.book.author.text()[0]); } Al ejecutar el código anterior se mostrará Keith Peters como queremos. Sin embargo, si deseas imprimir los nombres de todos los autores, entonces, debes usar el siguiente código: function AnalizarLibro (bookInput:XML):void { trace("XML Output"); trace("------------------------"); for each(var ejem:XML in bookInput.book.author) trace(ejem.text()); }

CIBERTEC


26

Autoevaluación

Diseñe una película de Flash que cargue un XML en un formulario. El archivo XML contiene la siguiente información: Aviso de suspensión [email protected] Su servicio sera suspendido a partir de la f echa [email protected] 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.


CIBERTEC

DISEÑO WEB II

27

Resumen

 En ActioScript 3.0, 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.  Para decirle al URLLoader que cargue los datos como texto plano, su propiedad

dataFormat se debe establecer en DataFormat.TEXT.  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.  Por ultimo, se debe invocar el método URLLoader. Load() para lanzar el proceso

de carga, pasando una instancia URLRequest que apunta al URL del archivo XML.  Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.  http://www.zonaexpertos.com/showthread.php?p=5

Aquí hallará ejercicios para cargar XML en Flash.  http://clipdepelicula.com/cargar-xml-en-flash/

En esta página, hallará un video tutorial para cargar XML en Flash.

CIBERTEC


28


CIBERTEC

DISEÑO WEB II

29


2 SEMANA

3



TEMARIO • •

Estilos CSS Integración de Flash y CSS


CIBERTEC

Los alumnos crean hojas de estilos. Los alumnos integran Flash y CSS en el diseño de animaciones.


30

1. INTRODUCCIÓN A veces desea cambiar el diseño visual de su desarrollo en Flash, sin tener que cambiar los componentes uno a uno. Un trabajo tedioso y que definitivamente le quitaría mucho tiempo si es que no conoce el lenguaje CSS. 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.

2. ESTILOS CSS Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc. quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML. Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez más importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados. Aprender a conocer CSS le dará como resultado un mejor flujo de trabajo, mayor organización de su codigo, menos peso en las páginas, y más flexibilidad a los cambios. Ademas una vez familiarizados con sus capacidades, se dará cuenta de que es más fácil y rápido diseñar con CSS que de la manera antigua.

2.1. Elementos Los tres principales elementos en el desarrollo de CSS son Atributos, Valores y Selectores

2.1.1. Atributos Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.


CIBERTEC

DISEÑO WEB II

31

2.1.2. Valores Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red".

2.1.3. Selectores Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta del documento HTML. Hay tres tipos de selectores: •

•

•

Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre. El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma: .mi_clase.

2.2. La sintaxis Primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar. El siguiente código define estilos para el selector o la etiqueta body: /*CSS sobre selector de etiquetas*/ body { font-family: arial; font-size: 12px; color: black; background-color: #cccccc; } Este tipode selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos. /*CSS sobre selector de identificador*/ #header { background-color: #ff0000; color: #ffffff; font-size: 26px; }

CIBERTEC


32

En este caso, se aplica a la etiqueta con solo colocarle el identificador, como en este ejemplo:
Aqui el contenido

/*CSS sobre selector de clase*/ .mi_clase { margin: 5px; height: 100px; width: 200px; } En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:
Aqui el contenido

2.3. Crear un archivo de estilos CSS El archivo de estilos CSS se puede crear en un archivo de texto simple con extensión css. Tambien, puede usar algunos softwares como Dreamweaver. La ventaja de estos softwares es que la creación y edicion de los archivos css son más rapidos y faciles. El siguiente código define estilos para un parrafo, un titulo, una celda y para toda la página. Debe estar guardado en un archivo de texto con extensión css: P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666; } BODY { background-color : #006600; font-family : arial; color : White; }


CIBERTEC

DISEÑO WEB II

33

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

CIBERTEC


34

3.1. Cargar un documento css Este documento css contiene definicion de formatos para los textos y parrafos que se insertaran en la pelicula de flash. Para cargar un documento css, debe hacer lo siguiente:

//Carga archivo CSS var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest("noticias.css"); loader.addEventListener(Event.COMPLETE, completado); loader.load(req);

Se insertan las etiquetas HTML que recibiran el estilo css. Para ello debe asignar al objeto que recibira la cadena el método htmlText. Si en la hoja de estilos ha definido clases, 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(); sheet.parseCSS(URLLoader(event.target).data); mensaje_txt.styleSheet = sheet; mensaje_txt.htmlText = ""; mensaje_txt.htmlText += "
" + titulo + "
"; mensaje_txt.htmlText += "
" + mensaje + "
Publicado: " + fecha + "
"; }

La estructura de un documento css debe ser la siguiente: .tit{ color:#006633; font-size:12px; text-align:center; } .men{ font-size:10px; } .fec{ color:#ff0000; font-size:10px; }


CIBERTEC

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. En primer lugar, debe crear la hoja de estilos y grabarlo con el nombre miCSS.css. La hoja de estilos css tiene los siguientes estilos definidos:

p{ color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; display: inline; } a:link { color:#3399FF; text-decoration: underline; } a:hover{ color: #999999; text-decoration: none; } .titulo { color:#FF0000; font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; display: block; } .concepto { color:#CC0099; font-style:oblique; font-weight: bold; display: inline; } Después, va a crear una pelicula e insertar un texto dinamico con el nombre txtS. Debe tener un ancho de 450 por 300 de alto. Luego en el primer fotograma de insertar el siguiente código de actionScript 3.0: var ejemploTexto:String = "
Css en Flash CS3
"; ejemploTexto += "
Hojas de estilo Css: ";

CIBERTEC


36

ejemploTexto += "Determinan el estilo y el formato de los elementos a los que se aplican "; ejemploTexto += "como textos, imagenes, etc."; ejemploTexto += "Los enlaces tambien se pueden personalizar -->"; ejemploTexto += "Disney."; ejemploTexto += " Este ejemplo funciona de la misma manera en Flash CS4.
"; var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest("miCSS.css"); loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); loader.load(req);

function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet(); sheet.parseCSS(URLLoader(event.target).data); txtS.styleSheet = sheet; txtS.htmlText = ejemploTexto; }

Actividad 2: Esta actividad es similar a la anterior sola que el texto a formatear se encuentra grabado en un archivo externo llamado textoParaFlash.txt. Este archivo es llamado desde Flash, formateado con un archivo CSS tambien externo llamado miCSS.css e impreso en un texto dinamico llamado tf. El contenido del archivo de texto es el siguiente:
Este es un titulo para flash

Es un parrafo para formatear

Es un segundo parrafo para formatear
enlace

En el primer fotograma de la pelicula, ingrese el siguiente codigo: var tf:TextField = new TextField(); tf.width = stage.stageWidth; tf.height = stage.stageHeight; addChild(tf); var wordList:Array = new Array(); var textLoader:URLLoader = new URLLoader(); textLoader.addEventListener(Event.COMPLETE, textLoaded); var cssLoader:URLLoader = new URLLoader(); var css:StyleSheet = new StyleSheet();


CIBERTEC

DISEÑO WEB II

37

function cssLoaded(e:Event):void { css.parseCSS(e.target.data); tf.styleSheet = css; for(var i:int = 0; i < wordList.length; i++){ tf.htmlText += "
" + wordList[i] + "
"; } } function textLoaded(e:Event):void { wordList = e.target.data.split("\n"); cssLoader.load(new URLRequest("miCSS.css")); cssLoader.addEventListener(Event.COMPLETE, cssLoaded); } textLoader.load(new URLRequest("textoParaFlash.txt"));

CIBERTEC


38

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


CIBERTEC

DISEÑO WEB II

39

Resumen

 CSS es una tecnología desarrollada con el fin de separar la presentacion de la

estructura del HTML.  Aprender a conocer CSS le dará como resultado un mejor flujo de trabajo, mayor organización de su codigo, menos peso en las páginas, y más flexibilidad a los cambios  Un estilo tiene la siguiente estrucutura: Selector { Atributo1=valor; ……. ; AtributoN=valor; }  Para que Flash importe un archivo css, debe usar los siguientes metodos:

var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest("miCSS.css"); loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); loader.load(req);

 Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.  http://www.tutorialized.com/view/tutorial/Loading-External-CSS-In-AS3/36293

Aquí hallará ejercicios paso a paso para adjuntar hojas de estilo a su pelicula.  http://snipplr.com/view/4452/as3-load-external-txt-and-css/

En esta página, hallará un tutorial que explica la integración entre CSS y Flash.

CIBERTEC


40


CIBERTEC

DISEÑO WEB II

41


2 SEMANA

5



TEMARIO •

Integración de XML, CSS y Flash


CIBERTEC

Los alumnos integran XML, CSS y Flash en el diseño de animaciones.


42

1. INTEGRACION DE FLASH, 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 menus cargados dinámicamente desde un archivo xml, los textos de la película, incluyendo los menus, formateados con una hoja de estilos externa. De esa forma, la edicion de los diferentes componentes de la película sera mas facil y eficiente. Como resultado de una buena integración se pueden diseñar una galeria de imágenes, un noticiero dinamico, un menú dinamico, entre muchas más.

Antes de diseñar algunas aplicaciones, se hara un repaso de los principales metodos y propiedades mas usados para diseñar estas aplicaciones.

1.1. Cargar un documento xml Este documento xml puede contener nombres de imágenes, titulos de los menus, listado de noticias, etc. Para cargar un documento xml, debe hacer lo siguiente:

En Flash escribir el siguiente código para cargar el documento xml: var noticias_xml:URLLoader = new URLLoader(); noticias_xml.dataFormat = URLLoaderDataFormat.TEXT; noticias_xml.addEventListener(Event.COMPLETE, onComplete); var request:URLRequest = new URLRequest("noticias.xml"); noticias_xml.load(request); var myXML:XML= new XML(event.target.data);

Para recuperar datos del objeto xml cree la función invocada cuando se descargue (onComplete) y use los metodos y propiedades de XML:


CIBERTEC

DISEÑO WEB II

43

//Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha] fecha=myXML.noticia[_indice].attributes() //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo] titulo=myXML.noticia[_indice].titulo

La estructura de un documento xml debe ser la siguiente:

Nave rusa tripulada se acopla sin problemas … Internacional Moscú (dpa) - La nave rusa Soyuz, con tres tripulantes a bordo, se acopló hoy automáticamente sin problemas a la Estación Espacial Internacional . . . .. nave.jpg Finaliza estado de excepción pero crece descontento Luego de que el presidente de Ecuador, Lucio Gutiérrez, levantara el estado de emergencia decretado en Quito el viernes, las multitudinarias. . . . .. . . .. vaticano.jpg

1.2. Cargar un documento css Este documento css contiene definicion de formatos para los textos y parrafos que se insertaran en la pelicula de flash. Para cargar un documento css, debe hacer lo siguiente:

//Carga archivo CSS var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest("noticias.css"); loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); loader.load(req);

Se insertan las etiquetas HTML que recibiran el estilo css. Para ello debe asignar al objeto que recibira la cadena el método htmlText. Si en la hoja de estilos ha definido clases, lo debe asignar a la etiqueta correspondiente: mensaje_txt.htmlText = ""; mensaje_txt.htmlText += "
" + titulo + "
" + mensaje + "
";

Se crea la funcion invocada despues de la descarga: function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet(); sheet.parseCSS(URLLoader(event.target).data);

CIBERTEC


44

mensaje_txt.styleSheet = sheet; }

La estructura de un documento css debe ser la siguiente: .tit{ color:#006633; font-size:12px; text-align:center; } .men{ font-size:10px; } .fec{ color:#ff0000; font-size:10px; }


CIBERTEC

DISEÑO WEB II

45

Actividades

Ejercicio 1: Noticias dinamicas La siguiente actividad se ha adptado para ActionScript 3.0 de la siguiente direccion: http://www.cristalab.com/tutoriales/lector-de-noticias-xml-en-flash-con-imagenes-c186l/ En el ejemplo tenemos tres noticias. Cuando el archivo de Flash se ejecuta, se carga la primera noticia (titulo, 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). Los textos (titulo y mensaje) y el nombre de la imagen, son recuperados del archivo noticias.xml, seguidamente la imagen es cargada de forma externa (archivos jpg).

1

Interfaz en flash

Crear la interfase de usuario en una capa llamada “elementos”: (dos botones, 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). Es importante asignar a ambos elementos el nombre de instancia: anterior_btn y siguiente_btn

CIBERTEC


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); var loader1:Loader = new Loader() loader1.x=4 loader1.y=32.8 loader1.load(request); addChild(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.0 //Permite caracteres tradicionales como letras con tilde la ñ, etc. System.useCodePage=true //Se declara la variable indice de tipo número (utilizada para referencia la noticia a mostrar) var indice:Number=0; //Carga archivo CSS var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest("noticias.css"); loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); loader.load(req); // Carga archivo XML var noticias_xml:URLLoader = new URLLoader(); noticias_xml.dataFormat = URLLoaderDataFormat.TEXT;


CIBERTEC

DISEÑO WEB II

47

noticias_xml.addEventListener(Event.COMPLETE, onComplete); var request:URLRequest = new URLRequest("noticias.xml"); noticias_xml.load(request); var myXML:XML ; function onComplete(event:Event):void { myXML = new XML(event.target.data) cargarDatos(indice); } function cargarDatos(_indice:Number){ //Se inicializan variables utilizadas para almenar los datos de una noticia var fecha:String; var titulo:String; var mensaje:String; var imagen:String; //Recuperando datos del objeto xml //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha] fecha=myXML.noticia[_indice].attributes() //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo] titulo=myXML.noticia[_indice].titulo //Se accede al segundo hijo de elemento [noticia] y se recupera el valor del primer elemento de [mensaje] mensaje=myXML.noticia[_indice].mensaje //Se accede al último hijo de elemento [noticia] y se recupera el valor del primer elemento de [imagen] imagen=myXML.noticia[_indice].image //Mostrando los datos recuperados en el cuado de texto mensaje_txt y cargando la imagen mensaje_txt.htmlText = ""; mensaje_txt.htmlText += "
" + titulo + "
" + mensaje + "
"; //Cargado la imagen JPG externa en el clip loader con el valor recuperado del objeto xml var request:URLRequest = new URLRequest(imagen); var loader1:Loader = new Loader() loader1.x=4 loader1.y=32.8 loader1.load(request); addChild(loader1); }

siguiente_btn.addEventListener(MouseEvent.CLICK,avanza); anterior_btn.addEventListener(MouseEvent.CLICK,anterior); //Función que permite avanzar a la [noticia] siguiente almacenada en el objeto xml function avanza(event:MouseEvent):void { if(indice<=myXML.length()){//retringue a avanzar solo si hay una [noticia] siguiente

CIBERTEC


48

indice++; //incrementado en uno el indice cargarDatos(indice); //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--; //disminuido en uno el indice cargarDatos(indice); //recuperando y mostrando los datos y la imagen en la pantalla } } function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet(); sheet.parseCSS(URLLoader(event.target).data); mensaje_txt.styleSheet = sheet; }

Ejercicio 2: Galeria de imágenes dinamicas Esta galeria es muy simple. En la interfaz no hay absolutamente ningun elemento visual. Todo lo que se ve en la película se diseña mediante código AS3.

Primero de asegurarse de crear su archivo galeria.xml, el cual debe tener la siguiente estructura:


CIBERTEC

DISEÑO WEB II

49

Luego en Flash cree un archivo con el nombre Archivo galeria.fla el cual debe tener en el primer fotograma de su pelicula, el siguiente codigo en AS3:4

import fl.containers.UILoader; import fl.controls.TileList; import flash.net.URLRequest; import flash.net.URLLoader; import fl.data.DataProvider //Visualizador var ui:UILoader = new UILoader(); ui.setSize(400,300); ui.move(100,25); ui.source = "images/01.jpg"; addChild(ui); //Lista de Fotos var list:TileList = new TileList(); list.setSize(550,120); list.move(25,340) list.columnWidth = 150; list.rowHeight = 100; list.sourceField = "thumb"; addChild(list); //XML var xml:XML; var url:URLRequest = new URLRequest("./xml/galeria.xml"); var loader:URLLoader = new URLLoader(); loader.load(url); //Eventos function Completar(event){ var xml:XML = new XML(loader.data); var dp:DataProvider = new DataProvider(xml); list.dataProvider = dp; } loader.addEventListener(Event.COMPLETE, Completar); function alCambiar(event){ ui.source = list.selectedItem.source; } list.addEventListener(Event.CHANGE, alCambiar);

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.


CIBERTEC

DISEÑO WEB II

51

Resumen

 Para

desarrollar aplicaciones en Flash que integren CSS y XML, debe familiarizarse con los metodos que permiten el acceso a estas tecnologías.  Si desea conectarse con un documento CSS debe conocer bien los métodos URLLoader y URLRequest. Asi como con el gestor de eventos addEventListener.  Para conectarse con un documento XML debe conocer bien los objetos URLLoader, URLLoaderDataFormat, URLRequest y el gestor de eventos addEventListener.  Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas. http://www.clickpopmedia.com/2008/05/14/creating-an-xml-gallery-with-

actionscript-30/ Aquí hallará un tutorial para crear una galeria de imágenes en ActionScript 3.0. 

http://www.prodevtips.com/2008/12/23/menu-and-banner-from-xml-with-as3-

and-flash-cs3/ En esta página, hallará un tutorial para desarrollar banners y menus dinamicos..

CIBERTEC


52


CIBERTEC

DISEÑO WEB II

53


3 SEMANA

6

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 •

Manejo de Niveles


CIBERTEC

Los alumnos diseñan interfaces en flash para paginas web Los alumnos diseñan paginas web con flash


54

1 LISTA DE VISUALIZACION Cada aplicación creada con ActionScript 3.0 tiene una jerarquía de objetos visualizados, conocida como lista de visualización , tal y como se muestra a continuación. La lista de visualización contiene todos los elementos visibles en la aplicación. (Stage)

Tal y como muestra la ilustración, los elementos en pantalla se ubican en uno o varios de los siguientes grupos:

1.1. Objeto Stage El objeto Stage es el contenedor base de los objetos de visualización. Cada aplicación tiene un objeto Stage, 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:


CIBERTEC

DISEÑO WEB II

55

Cada archivo SWF tiene una clase de ActionScript asociada, conocida como la clase principal del archivo SWF. Cuando se abre un archivo SWF en Flash Player o en Adobe AIR, 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.

1.2. Objetos de visualización En ActionScript 3.0, todos los elementos que aparecen en la pantalla de una aplicación son tipos de objetos de visualización. El paquete flash.display incluye una clase DisplayObject. Se trata de una clase base ampliada por diversas otras. Estas distintas clases representan tipos diferentes de objetos de visualización, como formas vectoriales, clips de película o campos de texto, entre otros..

1.3. Contenedores de objetos de visualización Los contenedores de objetos de visualización son tipos especiales de objetos de visualización que, además de tener su propia representación visual, pueden contener objetos secundarios que también sean objetos de visualización. La clase DisplayObjectContainer es una subclase de la clase DisplayObject. Un objeto DisplayObjectContainer puede contener varios objetos de visualización en su lista de elementos secundarios. Por ejemplo, la siguiente ilustración muestra un tipo de objeto DisplayObjectContainer, denominado Sprite, que contiene diversos objetos de visualización:

A. Un objeto SimpleButton. Este tipo de objeto de visualización tiene distintos estados "Arriba", "Abajo" y "Sobre". B. Un objeto Bitmap. En este caso, el objeto Bitmap se cargó de un archivo JPEG externo a través de un objeto Loader. C. Un objeto Shape. El "marco del cuadro" contiene un rectángulo redondeado que se dibuja en ActionScript. Este objeto Shape tiene aplicado un filtro de sombra. D. Un objeto TextField.

CIBERTEC


56

Cuando se habla de los objetos de visualización, también se hace referencia a los objetos DisplayObjectContainer como contenedores de objetos de visualización o simplemente como contenedores. Como se ha comentado previamente, el objeto Stage es un contenedor de objeto de visualización. Aunque todos los objetos de visualización visibles heredan de la clase DisplayObject, el tipo de cada uno de ellos pertenece a una subclase específica de la clase DisplayObject. Por ejemplo, hay una función constructora para la clase Shape o la clase Video, pero no hay ninguna función constructora para la clase DisplayObject.

1.4. Tareas comunes de programación de la visualización Como gran parte de la programación de ActionScript implica crear y manipular elementos visuales, se llevan a cabo numerosas tareas relacionadas con la programación de la visualización. En este capítulo se describen las tareas comunes que se aplican a todos los objetos de visualización: 



      

2

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, incluida la creación de interacción de arrastrar y colocar Cambiar el tamaño de los objetos de visualización, ajustar su escala y girarlos Aplicar modos de mezcla, 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)

LOS CONTENEDORES Hay algo que hay que tener absolutamente claro. No se puede ver algo, si no esta adentro de un contenedor. El único elemento que no necesita de esto, es el escenario. Para agregar un objeto al escenario insertamos el siguiente código: addChild();


CIBERTEC

DISEÑO WEB II

57

Todos los contenedores tienen un método llamado addChild que traducido es “Añadir Niño”. Este es uno de los métodos más importantes en AS3. En el siguiente código vamos a crear un texto y vamos a ver como funciona addChild. var miTexto:TextField = new TextField(); // Creo el campo de texto miTexto.text = "Hola Mundo"; // Escribo lo que quiero que diga Si colocamos este código, no veremos nada en el escenario, porque no lo hemos agregado a ningún contenedor. Ahora lo vamos agregar al contenedor Escenario var miTexto:TextField = new TextField(); // Creo el campo de texto miTexto.text = "Hola Mundo "; // Escribo lo que quiero que diga this.addChild(miTexto);

Si colocamos este código, vemos que en pantalla sale Hola Mundo. Ahora Vamos a meter nuestro texto en un contenedor de tipo Sprite. var miTexto:TextField = new TextField(); miTexto.text = "Hola Mundo"; var miContenedor:Sprite = new Sprite(); // Creamos nuestro contenedor this.addChild(miContenedor); // Agregamos miContenedor.addChild(miTexto); // Agregamos el texto al contenedor

Si colocamos este código veremos que aparece nuestro Hola Mundo en pantalla. Como vemos en este código, hay que agregar también los otros contenedores al escenario, si no hacemos esto, no serán visibles.

2.1. 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.adobe.com/flash/9.0_es/ActionScriptLangRefV3/classsummary.html) 2.1.1. Stage La clase Stage representa el área de dibujo principal. El escenario representa toda el área en la que se muestra el contenido de Flash ® . No es posible obtener acceso al objeto Stage de forma global. Es necesario acceder a él a través de la propiedad stage de una instancia de DisplayObject.

2.1.2. Loader La clase Loader se utiliza para cargar archivos SWF o archivos de imagen (JPG, PNG o GIF). Utilice el método load() para iniciar la carga. El objeto de visualización cargado se añade como elemento secundario del objeto Loader. Este objeto solo puede tener un hijo. El objeto que carga con el método load.

CIBERTEC


58

2.1.3. 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. Un objeto Sprite es similar a un clip de película, pero carece de línea de tiempo. Sprite es una clase base adecuada para objetos que no requieren líneas de tiempo. Por ejemplo, Sprite sería una clase base lógica para componentes de interfaz de usuario (IU) que típicamente no utilizan línea de tiempo. La clase Sprite es una novedad de ActionScript 3.0. Proporciona una alternativa a la funcionalidad de la clase MovieClip, que conserva toda la funcionalidad de versiones anteriores de ActionScript para ofrecer compatibilidad retroactiva. 2.1.4. MovieClip La clase MovieClip hereda de las siguientes clases: Sprite, DisplayObjectContainer, InteractiveObject, DisplayObject y EventDispatcher. A diferencia del objeto Sprite, un objeto MovieClip tiene línea de tiempo. Los métodos de la clase MovieClip proporcionan la misma funcionalidad que las acciones que van dirigidas a clips de película. 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. 2.1.5. 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. La lista de visualización administra todos los objetos mostrados en Flash Player. Utilice la clase DisplayObjectContainer para organizar los objetos de visualización en la lista de visualización. Cada objeto DisplayObjectContainer tiene su propia lista de elementos secundarios para organizar el orden z de los objetos. El orden z es el orden de delante hacia atrás que determina qué objeto se dibuja delante, cuál se dibuja detrás, etc. 2.1.6. DisplayObjectContainer La clase DisplayObject es la clase base de todos los objetos que pueden situarse en la lista de visualización. La lista de visualización administra todos los objetos mostrados en Flash Player. Utilice la clase DisplayObjectContainer para organizar los objetos de visualización en la lista de visualización. Los objetos DisplayObjectContainer pueden tener objetos de visualización secundarios, mientras que otros objetos de visualización, como los objetos Shape y TextField, son nodos "hoja" que sólo tienen elementos principales y del mismo nivel, pero no elementos secundarios. La clase DisplayObject admite funcionalidad básica, como la posición x e y de un objeto, así como propiedades más avanzadas del objeto, como su matriz de transformación.


CIBERTEC

DISEÑO WEB II

59

2.2. La posición de un objeto dentro de un contenedor. Otra de las cosas importantes, es que cada contenedor, tiene una lista de los objetos que le hemos metido adentro. Esta lista tiene tres datos, la posición dentro del contenedor, el tipo de objeto y el nombre. Al código que vimos antes le agregamos un segundo texto y lo colocamos dentro del contenedor sprite var miTexto2:TextField = new TextField(); miTexto2.text = "Chao Mundo"; miTexto2.y = 20; miContenedor.addChild(miTexto); // Agregamos el texto el segundo texto Ahora le agregamos una imagen en un contenedor Loader var carga:Loader = new Loader(); // Creamos el contenedor de carga carga.load(new URLRequest("imagen_Cualquiera.jpg")); // Le damos el archivo a cargar this.addChild(carga); // 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. Colocamos el siguiente código. miContenedor.addChild(cuadro2); // Colocamos el cuadro 2 en el contenedor Si hicimos todo el código anterior, La estructura de nuestra película quedaría así:

Con esta imagen se entiende bien el concepto de profundidad. Los objetos que están mas arriba, de la lista de visualización, aparecerán por delante. Si la imagen del ejemplo fuera muy grande, taparía todo lo demás por que esta en la parte mas alta de la lista.

CIBERTEC


60

3

MÉTODOS Para utilizar un método, debe invocarlo indicando la ruta de destino del nombre de instancia seguida de un punto y, después, el nombre del método y los parámetros, como en las sentencias siguientes: myMovieClip.play(); Pero nada mas hemos visto addChild, y los contenedores tienen otros métodos y propiedades. Hay una propiedad, que nos dicen el número de hijos que tiene un contenedor, o un método que nos permite buscar con el nombre un hijo dentro de un contenedor, o métodos que nos cambiar el orden del índice. En seguida, explicaremos algunos métodos y propiedades utilizados mas frecuentemente.

numChildren: Esta propiedad nos permite saber cuantos hijos tiene un contenedor. En el ejemplo anterior seria. trace(this.numChildren); El resultado seria 3;

getChildAt(): Este método nos dice qué objeto esta ocupando la posición que le indiquemos. miContenedor.getChildAt(1).visible = false; Se desaparece miTexto2

removeChildAt(): Este método saca del contenedor el objeto que le indiquemos. miContenedor.removeChildAt(1); Saca del contenedor miTexto2. Ojo no lo elimina, solo lo saca del contenedor, y al no estar adentro de ningún contenedor no se puede ver. Para eliminarlo se utiliza delete.

getChildByName(): Me busca el objeto que tenga el nombre que yo le diga miContenedor.getChildByName(“Cuadro2” ).x = 200; Me mueve el Cuadro2 horizontalmente hasta la posición 200;

setChildIndex(): Cambia la posicion de un hijo a donde nosotros le indiquemos this.setChildIndex(this.getChildAt(2), 0); Hace que la imagen se vaya al fondo de la película


CIBERTEC

DISEÑO WEB II

61

addChildAt(): Agrega un hijo, 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. 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; var instance:Object = new ClassReference(); instance.x=100 instance.y=100 this.addChild(DisplayObject(instance)); El siguiente código obtiene los nombres de vinculacion de 2 movie clips, 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; var instance:Object = new ClassReference(); instance.x=100 instance.y=100 this.addChildAt(DisplayObject(instance),1); var ClassReference1:Class = getDefinitionByName("marca1") as Class; var instance1:Object = new ClassReference1(); instance1.x=100 instance1.y=100 addChildAt(DisplayObject(instance1),0); El siguiente código crea una instancia de la clase MovieClip llamada mc. Luego, dibuja un rectangulo en el movie clip mc, le asigna sus coordenadas y finalmente lo agrega al escenario var mc:MovieClip = new MovieClip(); mc.graphics.beginFill(0xFF0000); mc.graphics.drawRect(0, 0, 100, 80); mc.graphics.endFill(); mc.x = 80; mc.y = 60; addChild(mc);

El siguiente código inserta una imagen gif en una instancia del objeto Loader llamado loader. Luego, se agrega al escenario. Al hacerse clic sobre el objeto loader, se llama a la función startAnimation quien a su vez llama a la función moveCircle. Esta función se invoca al ejecutarse la línea de tiempo con el evento

CIBERTEC


62

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


CIBERTEC

DISEÑO WEB II

63

Actividades

Ejercicio 1: Por ultimo, se va a crear un código que muestre un menú infinito, usando sólo 7 botones. Para usar el siguiente ejemplo, 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. Conviertan el botón en MovieClip (F8) y asegúrense que el eje de registro sea la esquina superior izquierda. Vinculen el MovieClip a la escena con el nombre classBoton . En la biblioteca, deben asignar nombre de vinculacion al movieClip

Dentro del MovieClip y sobre el botón, generen un campo de texto dinámico cuyo nombre de instancia sea txtBoton. Eliminen cualquier objeto del menú que se encuentre en la escena.

Ahora, esta lista para escribir el siguiente código: var cantidad:int = 7; var ancho:int = 80; var espacio:int = ancho + 20; var limite:int = cantidad * espacio; // Declaramos la variable de velocidad var velocidad:Number; // Definimos la función que asignará la velocidad function fVelocidad( event:Event ):void { velocidad = ( ( stage.stageWidth / 2 ) - stage.mouseX ) / 16; } // Vinculamos la función con la reproducción de la escena stage.addEventListener( Event.ENTER_FRAME, fVelocidad );

CIBERTEC


64

// Definimos la función que desplazará los objetos function fScroll( event:Event ):void { // Asignamos la nueva posición del objeto event.currentTarget.x += velocidad; // Evaluamos si ha salido a la izquierda de la escena if( event.currentTarget.x < - ancho ){ // Pasamos el objeto a la derecha event.currentTarget.x += limite; } // Evaluamos si ha salido del límite derecho if( event.currentTarget.x > limite - ancho ){ // Pasamos el objeto a la izquierda event.currentTarget.x -= limite; } } for( var i:int = 0; i < cantidad; i++ ){ var mcBoton:classBoton = new classBoton(); mcBoton.y = 20; mcBoton.x = ( espacio * i ) + 20; mcBoton.txtBoton.text = “”+(i + 1); mcBoton.txtBoton.mouseEnabled = false; // Vinculamos el objeto con la función mcBoton.addEventListener( Event.ENTER_FRAME, fScroll ); addChild( mcBoton ); }

Ejercicio 2: Diseño de página web con Flash

http://www.flashmo.com/preview/flashmo_161_pink


CIBERTEC

DISEÑO WEB II

65

Ejercicio 3: Diseño de página web con Flash

CIBERTEC


66

Autoevaluación Diseñe la siguiente página web con actionScript 3.0 con los métodos aprendidos en esta semana.

Los archivos que va a necesitar son: Encabezado.swf

Inicio.swf

Animación.swf

Forma.swf


CIBERTEC

DISEÑO WEB II

67

Resumen

 Cada aplicación creada con ActionScript 3.0 tiene una jerarquía de objetos

  



visualizados, conocida como lista de visualización. La lista de visualización contiene todos los elementos visibles en la aplicación. 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.0, todos los elementos que aparecen en la pantalla de una aplicación son tipos de objetos de visualización. Los contenedores de objetos de visualización son tipos especiales de objetos de visualización que, además de tener su propia representación visual, pueden contener objetos secundarios que también sean objetos de visualización. Todos los contenedores tienen un método llamado addChild para agregar objetos de visualizacion


páginas.  www.cristalab.com/tips/el-reemplazo-a-attachmovie-en-actionscript-3-c28368l/

Aquí hallará ejercicios que indican cómo agregar movie clips. 

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/MovieClip. html En esta página, hallará información detallada sobre movie clips.

CIBERTEC


68


CIBERTEC

DISEÑO WEB II

69


3 SEMANA

9



TEMARIO •

Desarrollo de aplicaciones Web con Flash, CSS y XML

ACTIVIDADES PROPUESTAS • • •

CIBERTEC

Los alumnos diseñan una galeria de imagenes. Los alumnos diseñan noticias dinamicas. Los alumnos diseñan un menú dinamico.


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.

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


CIBERTEC

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.mx.mbelatam.com/index.php?art_id=359&categ=351

CIBERTEC


72


CIBERTEC

DISEÑO WEB II

73


2 SEMANA

10



TEMARIO • • • •

Clips de película Métodos Propiedades Gestión de eventos


Los alumnos diseñan animaciones usando métodos, propiedades y eventos de clips de películas

1. CLIPS DE PELICULA

CIBERTEC


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. Un símbolo de clip de película de la biblioteca puede utilizarse varias veces en un documento de Flash; cada vez que se utiliza un clip se lo denomina instancia del clip de película. Para distinguir una instancia de otra, es necesario asignar un nombre a cada instancia. Las instancias de clip de película pueden anidarse unas dentro de otras para crear una jerarquía. Es posible modificar algunas de las características del clip de película. Por ejemplo, cuando está seleccionado, es posible cambiar algunos valores en el inspector de propiedades como, por ejemplo, la coordenada x o la anchura, o realizar algunos ajustes de color como cambiar su valor de transparencia alfa o aplicarle un filtro de sombra. Otras herramientas de Flash permiten realizar más cambios, como utilizar la herramienta Transformación libre para girar el rectángulo. 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. En la programación orientada a objetos de ActionScript, 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. PROPIEDADES DE MOVIE CLIPS Una propiedad representa uno de los elementos de datos que se empaquetan en un objeto. En otras palabras son las caracteristicas que contiene un objeto. Dichas propiedades se han definido en la clase que representa al objeto MovieClip.. La clase MovieClip tiene las siguientes propiedades: • • • •

alpha = Nivel de transparencia. Predeterminado 100 height = Altura en pixeles. width = Anchura en pixeles. name = nulo. Flash le coloca un nombre hasta que nosotros le demos el propio

• • • • • • •

parent = el contenedordonde esta. rotation = Rotación. Predeterminado 0 scaleX = Escala horizontal. Predeterminado 1 scaleY = Escala vertical. Predeterminado 1 visible = Si es visible o no. . Predeterminado true x = Posición en horizontal en pixeles. Predeterminado 0 y = Posición en vertical en pixeles. Predeterminado 0

Hay más propiedades, pero estas son las más importantes. El escenario es un objeto especial, puesto que no puede tener propiedades como alpha o x, y, rotation o parent, entre otras.


CIBERTEC

DISEÑO WEB II

75

A continuación se muestran algunos ejemplos de código ActionScript que utiliza propiedades. Esta línea de código mueve el objeto MovieClip denominado square a la coordenada x = 100 píxeles: square.x = 100; 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.rotation = triangle.rotation; Este código altera la escala horizontal del objeto MovieClip square para hacerlo 1,5 veces más ancho: square.scaleX = 1.5; Observe la estructura común: se utiliza una variable (square, triangle) como nombre del objeto, seguida de un punto (.) y del nombre de la propiedad (x, rotation, scaleX). El punto, denominado operador de punto, se utiliza para indicar el acceso a uno de los elementos secundarios de un objeto.

3. 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, stop, gotoAndPlay, gotoAndStop, etc. En esta semana, se trataran algunos métodos mas complejos que permitirán realizar animaciones mas complejas.

3.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. El clip de película de máscara reproduce todos los fotogramas de su línea de tiempo, igual que un clip de película normal. Puede hacer que el clip de película de máscara se pueda arrastrar, animarlo a lo largo de una guía de movimiento, utilizar formas separadas en una sola máscara o cambiar el tamaño de una máscara de forma dinámica. También puede utilizar ActionScript para activar y desactivar una máscara durante la reproducción de una película. 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. Sólo se pueden utilizar rellenos en un clip de película que se usa como máscara; los trazos se pasan por alto. En el siguiente ejemplo, se ejecuta la funcion moverMask al ejecutarse la línea de tiempo del movie clip mascara_mc. El movie clip img_mc es una imagen de fondo y la mascara es un movie clip circular llamado mascara_mc. La función captura las coordenadas del Mouse y la mascara se alinea con el puntero de tal forma que al mover el Mouse, se mueve también la mascara.

CIBERTEC


76

img_mc.mask=mascara_mc //se asigna una mascara al movie clip img_mc mascara_mc.cacheAsBitmap=true img_mc.cacheAsBitmap=true mascara_mc.addEventListener(Event.ENTER_FRAME, moverMask) function moverMask(e:Event):void { mascara_mc.x=mouseX // se asigna a la mascara la posición x del mouse mascara_mc.y=mouseY // se asigna a la mascara la posición y del mouse }

3.2. hitTestObject El método hitTestObject del objeto MovieClip detecta las colisiones dentro de una película. Comprueba si el objeto ha colisionado con un clip de película y devuelve un valor booleano (true o false). En el siguiente ejemplo se evalúa el contacto entre dos movie clips function controlaContacto(e:Event):void { if(circle_1_mc.hitTestObject(circle_0_mc)) msj_txt.text='si'; else msj_txt.text='no'; } this.addEventListener(Event.ENTER_FRAME,controlaContacto) circle_1_mc.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar); circle_1_mc.addEventListener(MouseEvent.MOUSE_UP,soltar); function arrastrar (m:MouseEvent):void { circle_1_mc.startDrag(true); circle_1_mc.addEventListener(Event.ENTER_FRAME,controlaContacto) } function soltar (m:MouseEvent):void { circle_1_mc.stopDrag(); }

3.3. 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. Los parámetros x e y especifican un punto en el espacio de coordenadas del escenario, 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).


CIBERTEC

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. 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'; }

4. GESTION DE EVENTOS La diferencia principal entre la gestión de eventos en ActionScript 3.0 y en las versiones anteriores radica en que en ActionScript 3.0 hay un único sistema para gestionar eventos, mientras que en las versiones anteriores de ActionScript existían varios. Las versiones de ActionScript anteriores a la 3.0 ofrecen diversas formas de gestionar los eventos: •

•

Controladores de eventos on() que se pueden colocar directamente en instancias de Button y MovieClip. Controladores onClipEvent() que se pueden colocar directamente en instancias de MovieClip.

La técnica para especificar determinadas acciones que deben realizarse como respuesta a eventos concretos se denomina gestión de eventos . Cuando se escribe código ActionScript para llevar a cabo la gestión de eventos, se deben identificar tres elementos importantes: •

•

•

El origen del evento: ¿en qué objeto va a repercutir el evento? Por ejemplo, ¿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 , ya que es el objeto al que Flash Player (donde tiene lugar realmente el evento) destina el evento. El evento: ¿qué va a suceder, a qué se va a responder? Es importante identificar esto porque muchos objetos activan varios eventos. La respuesta: ¿qué pasos hay que llevar a cabo cuando ocurra el evento?

Siempre que se escriba código ActionScript para gestionar eventos, 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


78

{ // Aquí deben incluirse las acciones realizadas en respuesta al evento. }

eventSource.addEventListener(EventType .EVENT_NAME , eventResponse); Este código hace dos cosas. En primer lugar, define una función, que es la forma de especificar las acciones que desean realizarse como respuesta al evento. A continuación, llama al método addEventListener() del objeto de origen, 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. Cada una de estas partes se tratará con mayor detalle. 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. Una función es idéntica a un método excepto en que no está necesariamente asociada a una clase determinada (de hecho, es posible definir un método como una función asociada a una clase determinada). Cuando se crea una función para la gestión de eventos, 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). Especificar un parámetro de una función equivale a declarar una variable, de modo que también hay que indicar el tipo de datos del parámetro. 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. Por último, entre las llaves de apertura y cierre ({ ... }), se escriben las instrucciones que debe llevar a cabo el equipo cuando ocurra el evento. Después de escribir la función de gestión de eventos, es necesario indicar al objeto de origen del evento (el objeto en el que se produce el evento, por ejemplo, el botón) que se desea llamar a la función cuando ocurra el 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 método addEventListener() utiliza dos parámetros: •

•

En primer lugar, el nombre del evento específico al que se desea responder. De nuevo, cada evento se asocia a una clase específica, que tiene a su vez un valor especial predefinido para cada evento (como un nombre exclusivo propio del evento), que debe usarse como primer parámetro. En segundo lugar, el nombre de la función de respuesta al 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.

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. En el siguiente ejemplo, playButton es el nombre de instancia del botón y this es el nombre especial, que significa "el objeto actual": this.stop(); function playMovie(event:MouseEvent):void {


CIBERTEC

DISEÑO WEB II

79

this.play(); } playButton.addEventListener(MouseEvent.CLICK, playMovie);

Detectar que se está escribiendo en un campo de texto . En este ejemplo, 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.text; outputText.text = "You typed: " + pressedKey; } entryText.addEventListener(TextEvent.TEXT_INPUT, updateOutput);

Hacer clic en un botón para navegar a un URL . En este caso, linkButton es el nombre de instancia del botón: function gotoAdobeSite(event:MouseEvent):void { var adobeURL:URLRequest = new URLRequest("http://www.adobe.com/"); navigateToURL(adobeURL); } linkButton.addEventListener(MouseEvent.CLICK, gotoAdobeSite);

En el siguiente ejemplo se ejecuta la función moverMask cuando la cabeza lectora entra en un nuevo fotograma: mascara_mc.addEventListener(Event.ENTER_FRAME , moverMask) function moverMask(e:Event):void { mascara_mc.x=mouseX // se asigna a la mascara la posición x del mouse mascara_mc.y=mouseY // se asigna a la mascara la posición y del mouse }

Detectar que se está presionando una tecla. Un método también muy interesante

a

la

hora de mantener la interacción con el usuario es addEventListener, con el que podemos recibir notificaciones a la ejecución de eventos. Por ejemplo, recibir la tecla que ha sido pulsada: var textTest :TextField; stage.addEventListener (KeyboardEvent.KEY_DOWN, TeclaPulsada); textTest = new Text Field ();

CIBERTEC


80

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


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. 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

Arrastre dos clips de película al escenario y asígneles los nombres de instancia car y area .

2

Cree un cuadro de texto dinámico en el escenario e introduzca msj_txt como nombre de variable en el inspector de propiedades.

3

Presione F9, si el panel Acciones no está abierto.

4

Ingrese el siguiente código en el primer fotograma: function controlaContacto(e:Event):void controlaContacto(e:Event):void{{ if(car.hitTestObject(area)) msj_txt.text='si'; else msj_txt.text='no'; } this.addEventListener(Event.EN this.addEventListener(Event.ENTER_FRAME,controla TER_FRAME,controlaContacto) Contacto) car.addEventListener(MouseE car.addEventListener(MouseEvent.MOUSE_D vent.MOUSE_DOWN,arrastrar); OWN,arrastrar); car.addEventListener(MouseE car.addEventListener(MouseEvent.MOUSE_U vent.MOUSE_UP,soltar); P,soltar); function arrastrar (m:MouseEvent):void (m:MouseEvent):void { car.startDrag(true); car.addEventListener(Event.ENTER car.addEventListener(Event.ENTER_FRAME,controlaC _FRAME,controlaContacto) ontacto)

CIBERTEC


82

} function soltar (m:MouseEvent):void (m:MouseEvent):void { car.stopDrag(); } 9

Seleccione Control > Probar película 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(Eve black_mc.addEventListener(Event.ENTER_FRAME nt.ENTER_FRAME,controllaMou ,controllaMouse); se); function controllaMouse(e:Event):void 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.


CIBERTEC

DISEÑO WEB II

83

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

CIBERTEC


84

Resumen

 Para realizar animaciones con movie clips, debe manipular sus métodos y 







propiedades mediante los eventos que proporciona Flash CS3. El metodo setMask, aplica mascaras a un movie clip y necesita otro objeto movie clip a quien se aplicara la mascara. Debe usar el siguiente código: movie1. mask =movie2. El método hitTestObject evalua si dos objetos movie clips han colisionado. Para ello debe saber los nombres de instancia de los dos movie clips y usar el siguiente código. Movie1. hitTestObject(Movie2) Para modificar las propiedades de un movie clip, se utiliza una variable (square, triangle) como nombre del movie clip, seguida de un punto (.) y del nombre de la propiedad (x, rotation, scaleX). La técnica para especificar determinadas acciones que deben realizarse como respuesta a eventos concretos se denomina gestión de eventos. Los eventos de ActionScript 3.0 se usan de manera diferente a la versión anterior.


páginas.  http://schoolofflash.com/2008/03/tutorial-actionscript-30-masks/

Aquí hallará ejercicios animados con mascaras.  http://www.flashperfection.com/tutorials/Hit-Test-in-Actionscript-3-16576.html

En esta página, hallará algunos ejercicios sobre el método hitTest.


CIBERTEC

DISEÑO WEB II

85


3 SEMANA

11



TEMARIO • • •

Contadores Acumuladores La Clase Timer


CIBERTEC

Los alumnos diseñan juegos interactivos.


86

1 CONTADORES Los contadores son variables numéricas que permiten registrar el número de veces que se realiza un proceso. Este puede ser el numero de veces que se presiona el Mouse, el numero de clic sobre un botón, el numero de veces que se cumple una condición, etc. Con el nuevo evento Stage.mouseLeave, perteneciente a la clase Stage, podemos averiguar cuando el puntero del ratón se mueve fuera de la película de Flash. Lo que nos puede resultar muy útil a la hora de programar nuestras aplicaciones. En este ejemplo controlamos las veces que el cursor se desplaza fuera de la película de flash:

var textTest:TextField; var Contador:int=0; stage.addEventListener(Event.MOUSE_LEAVE, onStageLeave); textTest = new TextField(); addChild(textTest); textTest.text = "FUERA:"; function onStageLeave(event:Event):void{ Contador++; textTest.text = "El mouse ha salido de la pelicula:\n"+ Contador + " veces."; }

2 ACUMULADORES En programación, 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). Un acumulador suele utilizarse para acumular resultados producidos en las iteraciones de un proceso repetitivo o cada vez que se cumplan ciertos criterios. El siguiente código mueve un movie clip llamado rojo hacia la izquierda cada píxel al azar entre 1 y 5: rojo.x-=int(5*Math.random()+1) La palabra int convierte a entero la expresión que esta a la derecha. El siguiente código agranda el ancho de un movie clip llamado azul cada 2 pixeles azul. xscale+=2;

El siguiente código, mueve el movie clip carro de izquierda a derecha de manera indefinida


CIBERTEC

DISEÑO WEB II

87

c=1 ancho=carro._xscale; carro.onEnterFrame=function(){ if(c==1) if(carro._x<=550) carro._x+=15; else{ carro._xscale=-ancho; c=0; } else if(carro._x>=0) carro._x-=15; else{ carro._xscale=ancho; c=1; } }

3

LA CLASE TIMER La clase Timer permite crear objetos que se ejecutan a intervalos especificos. Para utilizarlos sólo hay que crear el objeto, indicar el número de repeticiones que queremos y el intervalo que las separa. Es decir, algo equivalente a lo que se conseguia en AS2 con setTimeout y contadores. //Declaramos la variable que alojará el Timer, siendo // 500 el tiempo en milisegundos entre repeticiones, y 3 el número de ellas var tiempo = new Timer(500,3); //Le añadimos un listener para que vaya registrando cuantas repeticiones lleva tiempo.addEventListener("timer", timerHandler); function timerHandler(event:TimerEvent):void { trace("Repetición: " + event.target.currentCount); trace("Delay: " + event.target.delay); } //Le decimos que comience tiempo.start();

CIBERTEC


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, un movie clip area, un texto dinamico contar_txt y msj_txt. Para el otro movie clip carro no es necesario.

El código es el siguiente: var c:int=0 var z:int=0 var myColor:ColorTransform = msj_txt.transform.colorTransform; function controlaContacto(e:Event):void { if(car.hitTestObject(area)){ if(z==0){ c++; msj_txt.text="entro el amarillo" myColor.color = 0xFF0000; msj_txt.transform.colorTransform = myColor; contar_txt.text=""+c; } z++ } else { msj_txt.text='Libre'; myColor.color = 0x0000ff;


CIBERTEC

DISEÑO WEB II

89

msj_txt.transform.colorTransform = myColor; z=0 } } 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) } function soltar (m:MouseEvent):void { car.stopDrag(); }

Actividad 2: Diseño de un juego Con el Mouse se debe hacer clic sobre cada globo. Se obtiene un punto por cada globo impactado con el Mouse. Cuando se acaben las balas se debe obtener un puntaje final

CIBERTEC


90

Autoevaluación

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


CIBERTEC

DISEÑO WEB II

91

Resumen

 Los contadores y acumuladores son variables numéricas que permiten .contar una

serie de procesos y acumular valores para obtener puntajes muy utiles a la hora de diseñar juegos interactivos.  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, con lo que no tendremos que eliminar el intervalo con clearInterval().  Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.  http://redribera.es/games/jugar_a_396_la-caza-del-pato-en-barco

Aquí hallará un juego creado en Flash.  http://www.redribera.es/formacion/tutoriales/viewfile.html?file=flgame1207-9.xml

En esta página, hallará un tutorial para crea un juego en Flash.

CIBERTEC


92


CIBERTEC

DISEÑO WEB II

93


3 SEMANA

13



TEMARIO • • •

Efecto easing La clase Tween Filtros


CIBERTEC

Los alumnos implementan el efecto easing en las animaciones flash. Los alumnos implementan la clase Tween y filtros en las animaciones flash.


94

1. 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). En realidad este efecto se consigue con una formula matemática: x += (300 - x) * 0.5; Donde 300 es una constante que indica la distancia del movimiento en pixels, x es la propiedad del objeto que se quiere modificar y 0.5 es un factor que indica la velocidad de la desaceleración (easing). Un valor cercano a 1, indica que el efecto de easing es rápido. Un valor cercano a 0, indica que el efecto es lento. En el siguiente ejemplo, 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.x)*0.5;. Si cambia el valor 300 por 600, entonces la distancia o el desplazamiento será más largo para el efecto easing. Si cambia el valor 0.5 por 0.7, la velocidad del efecto aumentará En Action Script 3.0 se han incorporado una serie de Clases que aplican este efecto de manera más rápida y compleja, agregando mayor funcionalidad a las animaciones con efecto easing, es decir aceleración, desaceleración y suavizado.

2. LA CLASE TWEEN La clase Tween permite utilizar ActionScript para mover, 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. La clase Tween también permite especificar diversos métodos de suavizado. "Suavizado" hace referencia a la aceleración o desaceleración gradual durante una animación, que da un aspecto más realista a las animaciones. El paquete fl.transitions.easing ofrece numerosos métodos de suavizado que contienen ecuaciones para esta aceleración y desaceleración, lo que cambia la animación de suavizado en consonancia. Para utilizar los métodos y las propiedades de la clase Tween, 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. Por ejemplo: import fl.transitions.Tween; import fl.transitions.easing.*; var myTween:Tween = new Tween(myObject, "x", Elastic.easeOut, 0, 300, 3, true); Donde:

x es la propiedad que se desea modificar o animar


CIBERTEC

DISEÑO WEB II

95

Elastic.easeOut es la función o tipo de animación con efecto easing. 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

Descripción

métodos

Back

La clase Back define tres funciones de aceleración para la implementación de movimiento con animaciones de ActionScript.

Bounce

La clase Bounce define tres funciones de aceleración para la implementación de movimiento de rebote con animaciones de ActionScript, similar al de una pelota cayendo al suelo y dando rebotes cada vez más pequeños. La clase Elastic define tres funciones de aceleración para la implementación de movimiento con animaciones de ActionScript, donde el movimiento se define por una onda senoidal que decae de manera exponencial. La clase None define funciones de aceleración para implementar movimiento no acelerado con animaciones ActionScript.

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 easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento realizando un control hacia atrás, invertir a continuación la dirección para desplazarse hacia el destino, producir una ligera sobremodulación, invertir de nuevo la dirección y, por último, regresar al destino. El método easeOut() inicia el movimiento desplazándose hacia el destino, produce a continuación una ligera sobremodulación y, por último, invierte la dirección de nuevo hacia el destino. El método easeIn() inicia el movimiento de rebote lentamente y, a continuación, lo acelera conforme se ejecuta. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento de rebote lentamente, acelerarlo y, por último, desacelerarlo. El método easeOut() inicia el movimiento de rebote con rapidez y, a continuación, lo desacelera conforme se ejecuta. El método easeIn() inicia el movimiento lentamente y, a continuación, lo acelera conforme se ejecuta. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento lentamente, acelerarlo y, por último, desacelerarlo. El método easeOut() inicia el movimiento con rapidez y, a continuación, lo desacelera conforme se ejecuta.

Elastic

None

CIBERTEC

Los métodos easeIn(),easeInOut(), easeOut() y easeNone() definen un movimiento constante, sin aceleración.


96

Clase

Descripción

métodos

Regular

La clase Regular define tres funciones de aceleración para la implementación de movimiento acelerado con animaciones de ActionScript.

Strong

La clase Strong define tres funciones de aceleración para la implementación de movimiento con animaciones de ActionScript.

El método easeIn() inicia el movimiento desde la velocidad cero y, a continuación, lo acelera conforme se ejecuta. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento desde una velocidad cero, acelerarlo y, por último, desacelerarlo de vuelta hasta la velocidad cero. El método easeOut() inicia el movimiento con rapidez y, a continuación, lo desacelera hasta la velocidad cero conforme se ejecuta. El método easeIn() inicia el movimiento desde la velocidad cero y, a continuación, lo acelera conforme se ejecuta. El método easeInOut() combina los métodos easeIn() y easeOut() para iniciar el movimiento desde una velocidad cero, acelerarlo y, por último, desacelerarlo de vuelta hasta la velocidad cero. El método easeOut() inicia el movimiento con rapidez y, a continuación, lo desacelera hasta la velocidad cero conforme se ejecuta.

En el siguiente codigo se aplica un efecto de animación a un objeto llamado box: import fl.transitions.*; import fl.transitions.easing.*; stage.frameRate = 31; var box:Sprite = new Sprite(); box.graphics.beginFill(Math.random() * 0xFFFFFF); box.graphics.drawRect(0, 0, 100, 350); box.graphics.endFill(); box.x = 50; box.y = 10; addChild(box); var startValue:Number = box.x; var finishValue:Number = 400; var duration:Number = 3; var myTween:Tween = new Tween(box, "x", Back.easeInOut, startValue, finishValue, duration, true); myTween.looping = true;

En el siguiente código se aplican diferentes animaciones al objeto movie clip llamado rect import fl.transitions.Tween; import fl.transitions.easing.*;


CIBERTEC

DISEÑO WEB II

97

var my_mc1:Tween = new Tween(rect, "x", Strong.easeOut, 0, 80, 3, true); var my_mc2:Tween = new Tween(rect, "y", Strong.easeOut, 100, 153, 3, true); var my_mc3:Tween = new Tween(rect, "alpha", Strong.easeOut, 0, 0.5, 3, true); var my_mc4:Tween = new Tween(rect, "width", Strong.easeOut, rect.width, rect.width + 50, 3, true); var my_mc5:Tween = new Tween(rect, "rotation", Strong.easeOut, 0, 90, 3, true);

3. FILTROS Una de las formas de realzar la apariencia de una aplicación es añadir efectos gráficos sencillos, 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. ActionScript 3.0 incluye nueve filtros que se pueden aplicar a cualquier objeto de visualización o instancia de BitmapData. Entre ellos hay desde filtros básicos, como los de sombra e iluminado, hasta filtros complejos para crear efectos diversos, como los de mapa de desplazamiento y convolución. Los filtros permiten aplicar toda una serie de efectos a los objetos de visualización y mapas de bits, desde las sombras hasta la creación de biseles y desenfoques. Cada filtro se define como una clase, de manera que al aplicar filtros se crean instancias de objetos de filtro, lo que es exactamente igual que crear cualquier otro objeto. Una vez creada una instancia de un objeto de filtro, se puede aplicar fácilmente a un objeto de visualización utilizando la propiedad filters del objeto o, en el caso de un objeto BitmapData, usando el método applyFilter(). 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, como: Iluminado Desenfoque Sombra Nitidez Desplazamiento Detección de bordes Relieve Y muchos otros

ActionScript 3.0 incluye nueve clases de filtros que se pueden aplicar a objetos de visualización y a objetos BitmapData: • • • • •

CIBERTEC

Filtro de Filtro de Filtro de Filtro de Filtro de

biselado (clase BevelFilter) desenfoque (clase BlurFilter) sombra (clase DropShadowFilter) iluminado (clase GlowFilter) bisel degradado (clase GradientBevelFilter)


98

• • • •

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

3.1. Creación de un filtro nuevo 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, DropShadowFilter, se usaría el siguiente código: import flash.filters.DropShadowFilter; flash.filters.DropShadowFilter; var myFilter:DropShadowFilter = new DropShadowFilter(); Aunque no se muestra aquí, el constructor DropShadowFilter() DropShadowFilter() (como todos los constructores de clases de filtros) f iltros) 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; flash.display.Bitmap; import flash.display.BitmapData; flash.display.BitmapData; import flash.filters.DropShadowFilter; flash.filters.DropShadowFilter; // Crear un objeto bitmapData y representarlo en pantalla. var myBitmapData:BitmapData myBitmapData:BitmapData = new BitmapData(100,100,false,0xFFFF3300); var myDisplayObject:Bitmap = new Bitmap(myBitmapData); Bitmap(myBitmapData); addChild(myDisplayObject); // Crear una instancia de DropShadowFilter. var dropShadow:DropShadowFilter = new DropShadowFilter(); // Crear la matriz de ffiltros, iltros, añadiendo el filtro a la matriz pasándolo // como un parámetro al constructor Array(). var filtersArray:Array = new Array(dropShadow); Array(dropShadow); // Asignar la matriz de filtros al objeto de visualización para aplicar // el filtro. myDisplayObject.filters myDisplayObject.filters = filtersArray;


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; flash.filters.BevelFilter; import flash.filters.GlowFilter; 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 visualización para aplicar el filtro. myDisplayObject.filters 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 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, Array(dropShadow, blur); Hace lo mismo que esta otra: var filters:Array = [dropShado [ dropShadow, w, blur];

3.4. Aplicación de un filtro a un un objeto BitmapData Para aplicar un filtro a un objeto BitmapData es necesario utilizar el método applyFilter() del objeto BitmapData: myBitmapData.applyFilter(source myBitmapData.applyFilter(sourceBitmapData); BitmapData); 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


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 rectangulo s de 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_FR foto.addEventListener(Event.ENTER_FRAME,ingresa) AME,ingresa) function ingresa(e:Event){ ingresa(e:Event){ foto.x+=(posX-foto.x)*0.5; } var colores:Array=new colores:Array=new Array("0x00FF00","0x0000FF","0x Array("0x00FF00","0x0000FF","0xff8800","0xffff00"); ff8800","0xffff00");


CIBERTEC

DISEÑO WEB II

101

//crear instancias para los 4 botones, se agregan al //escenario, se cambia color a cada boton y se le asigna los eventos clic for( var i:int=1;i<5;i++){ this["boton"+i]=new btn(); this["boton"+i].x=50*i this["boton"+i].y=150 addChild(this["boton"+i]) var myColor:ColorTransform= this["boton"+i].transform.colorTransform; myColor.color = colores[i-1] this["boton"+i].transform.colorTransform=myColor; this["boton"+i].addEventListener(MouseEvent.CLICK,posi); } //Captura del nombre del boton donde se hizo clic para cambiar posicion //del movie clip foto function posi (m:MouseEvent):void { if(m.currentTarget.name=="instance3") posX=600; else if(m.currentTarget.name=="instance5") posX=300; else if(m.currentTarget.name=="instance7") posX=0; else if(m.currentTarget.name=="instance9") posX=-300 } 4. Ejecute su película

Actividad 2 La clase Tween Con la guía de su profesor diseñe la siguiente página en Flash. Las imágenes y textos serán proporcionados por su profesor.

CIBERTEC


102

Actividad 3 Aplicar múltiples Filtros Si un objeto de visualización tiene uno o más filtros aplicados, no es posible añadir más filtros a la matriz de la propiedad filters. En vez de eso, para añadir filtros o cambiar el conjunto de filtros aplicados, es necesario crear una copia de toda la matriz filters y realizar las modificaciones en esta matriz provisional. A continuación, esa matriz se vuelve a asignar a la propiedad filters del objeto de visualización para que los filtros se apliquen al objeto. Este proceso se muestra en el siguiente código. Inicialmente se aplica un filtro de iluminado al objeto de visualización llamado myDisplayObject; luego, cuando se hace clic en el objeto, se llama a la función addFilters(). Mediante esta función se aplican dos filtros más a myDisplayObject:

import flash.events.MouseEvent; import flash.filters.*; myDisplayObject.filters = [new GlowFilter()]; function addFilters(event:MouseEvent):void { // Hacer una copia de la matriz de filtros. var filtersCopy:Array = myDisplayObject.filters; // Realizar los cambios deseados en los filtros (en este caso, // añadiendo filtros). filtersCopy.push(new BlurFilter());


CIBERTEC

DISEÑO WEB II

103

filtersCopy.push(new DropShadowFilter()); // Aplicar los cambios reasignando la matriz a la propiedad filters. myDisplayObject.filters = filtersCopy; } myDisplayObject.addEventListener(MouseEvent.CLICK, addFilters);

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.*/ import flash.display.Shape; import flash.events.TimerEvent; import flash.filters.BitmapFilterQuality; import flash.filters.BitmapFilterType; import flash.filters.DropShadowFilter; import flash.filters.GlowFilter; import flash.filters.GradientBevelFilter; import flash.utils.Timer; var count:Number = 1; var distance:Number = 8; var angleInDegrees:Number = 225; // opuesto de 45 grados var colors:Array = [0xFFFFCC, 0xFEFE78, 0x8F8E01]; var alphas:Array = [1, 0, 1]; var ratios:Array = [0, 128, 255]; var blurX:Number = 8; var blurY:Number = 8; var strength:Number = 1; var quality:Number = BitmapFilterQuality.HIGH; var type:String = BitmapFilterType.INNER; var knockout:Boolean = false; // Dibujar el fondo del rectángulo para el semáforo. var box:Shape = new Shape(); box.graphics.lineStyle(); box.graphics.beginFill(0xFEFE78); box.graphics.drawRect(100, 50, 90, 200); box.graphics.endFill(); // Dibujar los 3 círculos de las 3 luces. var stopLight:Shape = new Shape(); stopLight.graphics.lineStyle(); stopLight.graphics.beginFill(0xFF0000); stopLight.graphics.drawCircle(145,90,25); stopLight.graphics.endFill(); var cautionLight:Shape = new Shape(); cautionLight.graphics.lineStyle(); cautionLight.graphics.beginFill(0xFF9900); cautionLight.graphics.drawCircle(145,150,25);

CIBERTEC


104

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


CIBERTEC

DISEÑO WEB II

105

goLight.filters = [greenGlow]; break; } count++; } // Crear un temporizador para intercambiar los filtros en intervalos de 3 segundos. var timer:Timer = new Timer(3000, 9); timer.addEventListener(TimerEvent.TIMER, trafficControl); timer.start();

CIBERTEC


106

Autoevaluación Diseñe la siguiente página en Flash Utilice efectos easing para el diseño del menú. También, aplique filtros a las imágenes de la página. Especialmente a las fotos de la parte inferior.

Diseñe un banner con 5 imágenes con efecto de transición de manera repetitiva


CIBERTEC

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, que da un aspecto más realista a las animaciones.  El paquete fl.transitions.easing ofrece numerosos métodos de suavizado que contienen ecuaciones para esta aceleración y desaceleración, lo que cambia la animación de suavizado en consonancia.  Los filtros permiten aplicar toda una serie de efectos a los objetos de visualización y mapas de bits, desde las sombras hasta la creación de biseles y desenfoques. Cada filtro se define como una clase, de manera que al aplicar filtros se crean instancias de objetos de filtro, lo que es exactamente igual que crear cualquier otro objeto. Una vez creada una instancia de un objeto de filtro, se puede aplicar fácilmente a un objeto de visualización utilizando la propiedad filters del objeto o, en el caso de un objeto BitmapData, usando el método applyFilter().  Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas. 

http://www.cristalab.com/tips/movimientos-dinamicos-con-la-clase-tween-en-

actionscript-3-c42258l/ Aquí hallará Movimientos dinámicos con la Clase Tween en ActionScript 3 .  http://www.esedeerre.com/ejemplo/4/48/utilizacion-de-filtros-en-actionscript-30

En esta página, hallará cómo utilizar los f iltros en Actionscript 3.0.  http://jestudio.cl/blog/uso-de-la-clase-tween-en-as3/

En esta página, hallará cómo utilizar la clase Tween en Actionscript 3.0.

CIBERTEC


108


CIBERTEC

DISEÑO WEB II

109


3 SEMANA

14



TEMARIO •

Audio


CIBERTEC

Los alumnos implementan componentes de audio en Flash.


110

1. INTRODUCCIÓN A LA UTILIZACIÓN DE SONIDO Se pueden capturar y codificar audio digital (representaciones informáticas de la información de sonido), que pueden almacenar y recuperar para reproducirlo a través de parlantes. Una de las formas de reproducir sonido es utilizar Adobe Flash Player y ActionScript. Los datos de sonido convertidos a formato digital tienen varias características, como el volumen del sonido y si éste es estéreo o mono. Al reproducir un sonido en ActionScript, también se pueden ajustar estas características (por ejemplo, aumentar su volumen o hacer que parezca proceder de una dirección determinada). Para poder controlar un sonido en ActionScript es necesario tener la información de sonido cargada en Flash Player. Al cargar datos de sonido desde un archivo de sonido externo, se puede iniciar la reproducción del principio del archivo de sonido mientras se cargan los restantes datos. Aunque hay varios formatos de archivo de sonido que se utilizan para codificar audio digital, ActionScript 3.0 y Flash Player admiten archivos de sonido almacenados en formato MP3. No pueden cargar ni reproducir directamente archivos de sonido con otros formatos, como WAV o AIFF.

1.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. ■ Velocidad: cantidad de datos que se codifican o se transmiten en cada segundo de un archivo de sonido. En los archivos MP3, la velocidad suele expresarse en miles de bits por segundo (kbps). Una velocidad superior suele implicar una onda de sonido de mayor calidad. ■ Almacenamiento en búfer: recepción y almacenamiento de los datos de sonido antes de que se reproduzcan. ■ mp3: MPEG-1 Audio Layer 3, o MP3, es un formato de compresión de sonido conocido. ■ Desplazamiento: posición de una señal de audio entre los canales izquierdos y derechos de un campo de sonido estéreo. ■ Pico: punto más alto de una forma de onda. ■ 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. La velocidad de muestra del audio de CD estándar es de 44,1 kHz o 44.100 muestras por segundo. ■ 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. ■ Volumen: intensidad de un sonido. ■ Forma de onda: forma de un gráfico de las distintas amplitudes de una señal de sonido a lo largo del tiempo.


CIBERTEC

DISEÑO WEB II

111

1.2. 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, como Flash Media Server ■

Los datos de sonido se pueden cargar completamente antes de su reproducción, o bien se pueden transmitirse, es decir, se pueden reproducir mientras se están cargando. ActionScript 3.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, como WAV o AIFF. 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. La herramienta de edición de Flash también permite comprimir archivos de sonido incorporados para reducir su tamaño de archivo, aunque esta reducción de tamaño se compensa con una mejor calidad de sonido.

1.3. 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. Una aplicación no puede reutilizar un objeto Sound para cargar más de un sonido. Para cargar un nuevo recurso de sonido, debe crear otro objeto Sound. Si se carga un archivo de sonido pequeño, como un sonido de clic que se asociará a un botón, la aplicación puede crear un nuevo objeto Sound y cargar automáticamente el archivo de sonido, tal como se muestra a continuación: var req:URLRequest = new URLRequest("click.mp3"); var s:Sound = new Sound(req); El constructor Sound() acepta un objeto URLRequest como primer parámetro. Cuando se proporciona un valor del parámetro URLRequest, el nuevo objeto Sound empieza a cargar automáticamente el recurso de sonido especificado. En todos los casos, excepto en los más sencillos, la aplicación debe prestar atención al progreso de carga del sonido y detectar los posibles errores. Por ejemplo, si el sonido del clic tiene un tamaño bastante grande, es posible que no esté completamente cargado cuando el usuario haga clic en el botón que activa dicho sonido. Si se intenta reproducir un sonido no cargado, puede producirse un error en tiempo de ejecución. 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.

CIBERTEC


112

El objeto Sound distribuye varios eventos distintos durante el proceso de carga del sonido. 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. En la tabla siguiente se enumeran los eventos que puede distribuir un objeto Sound.

Evento

Descripción

open (Event.OPEN)

Se distribuye antes de que se inicie la operación de carga del sonido.

progress (ProgressEvent.PROGRESS)

Se distribuye periódicamente durante el proceso de carga del sonido cuando se reciben datos del archivo o del flujo.

id3 (Event.ID3)

Se distribuye cuando hay datos ID3 disponibles para un sonido MP3.

complete (Event.COMPLETE)

Se distribuye cuando se han cargado todos los datos del recurso de sonido.

ioError (IOErrorEvent.IO_ERROR)

Se distribuye cuando no se puede encontrar un archivo de sonido, o bien cuando el proceso de carga se interrumpe antes de que se puedan recibir todos los datos de sonido

1.4. Utilización de sonidos incorporados La utilización de sonidos incorporados, en lugar de cargar sonidos de un archivo externo, 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, los sonidos que se reproducen cuando se hace clic en los botones). Si se incorpora un archivo de sonido en la aplicación, el tamaño del archivo SWF resultante aumenta con el tamaño del archivo de sonido. Es decir, la incorporación de archivos de sonido grandes en la aplicación puede hacer que el tamaño del archivo SWF sea excesivo. 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.

1.4.1. 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. Después se pueden asignar a fotogramas en la línea de tiempo o a los fotogramas de un estado de botón, utilizarlos con Comportamientos o utilizarlos directamente en código ActionScript. En esta sección se describe la manera de utilizar sonidos incorporados en código ActionScript con la herramienta de edición de Flash.


CIBERTEC

DISEÑO WEB II

113

Para incorporar un archivo de sonido en una película Flash, haga lo siguiente: 1. Seleccione Archivo > Importar > Importar a biblioteca y, a continuación, elija un archivo de sonido para importarlo. 2. Haga clic con el botón derecho en el nombre del archivo importado en el panel Biblioteca y seleccione Propiedades. Active la casilla de verificación Exportar para ActionScript. 3. En el campo Clase, escriba el nombre que debe utilizarse al hacer referencia a este sonido incorporado en ActionScript. De manera predeterminada, utilizará el nombre del archivo de sonido de este campo. Si el nombre de archivo incluye un punto, como en “DrumSound.mp3”, debe cambiarlo por otro como “DrumSound”; ActionScript no permite utilizar un punto en un nombre de clase. El campo Clase base debe mostrar flash.media.Sound. 4. Haga clic en Aceptar. 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. Haga clic en Aceptar y continúe. 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, se genera automáticamente una nueva clase que hereda de la clase flash.media.Sound. 5. Para utilizar el sonido incorporado hay que hacer referencia al nombre de clase del sonido en ActionScript. Por ejemplo, el código siguiente empieza creando una nueva instancia de la clase DrumSound generada automáticamente: var drum:DrumSound = new DrumSound(); var channel:SoundChannel = drum.play(); DrumSound es una subclase de la clase flash.media.Sound, por lo que hereda los métodos y las propiedades de la clase Sound, incluido el método play() antes mostrado. 1.4.2. Reproducción de sonidos Para reproducir un sonido cargado sólo hay que llamar al método Sound.play() de un objeto Sound: var snd:Sound = new Sound(new URLRequest("smallSound.mp3")); snd.play(); Al reproducir sonidos con ActionScript 3.0, 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


114

Para realizar estas operaciones durante la reproducción deben utilizarse las clases SoundChannel, SoundMixer y SoundTransform. La clase SoundChannel controla la reproducción de un solo sonido. La propiedad SoundChannel.position puede considerarse como una cabeza lectora, que indica el punto actual en los datos de sonido que se están reproduciendo. Cuando una aplicación llama al método Sound.play(), se crea una nueva instancia de la clase SoundChannel para controlar la reproducción. La aplicación puede reproducir un sonido desde una posición de inicio específica, pasando dicha posición en milisegundos como el parámetro startTime del método Sound.play(). 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.play(). Cuando se llama al método Sound.play() con los parámetros startTime y loops, el sonido se reproduce de forma repetida desde el mismo punto de inicio cada vez, tal como se muestra en el código siguiente: var snd:Sound = new Sound(new URLRequest("repeatingSound.mp3")); snd.play(1000, 3); En este ejemplo, el sonido se reproduce desde un punto un segundo después del inicio del sonido, tres veces seguidas.

1.4.3. Pausa y reanudación de un sonido Si la aplicación reproduce sonidos largos, como canciones o emisiones podcast, es recomendable dejar que los usuarios pausen y reanuden la reproducción de dichos sonidos. Durante la reproducción en ActionScript un sonido no se puede pausar; sólo se puede detener. Sin embargo, un sonido puede reproducirse desde cualquier punto. 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. Por ejemplo, supongamos que el código carga y reproduce un archivo de sonido como este: var snd:Sound = new Sound(new URLRequest("bigSound.mp3")); var channel:SoundChannel = snd.play(); Mientras se reproduce el sonido, la propiedad SoundChannel.position indica el punto del archivo de sonido que se está reproduciendo en ese momento. La aplicación puede almacenar el valor de posición


CIBERTEC

DISEÑO WEB II

115

antes de detener la reproducción del sonido, como se indica a continuación: var pausePosition:int = channel.position; channel.stop(); Para reanudar la reproducción del sonido desde el mismo punto en que se detuvo, hay que pasar el valor de la posición almacenado anteriormente. channel = snd.play(pausePosition);

CIBERTEC


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, el código de ejemplo crea un nuevo objeto Sound sin asignarle un valor inicial para el parámetro URLRequest. A continuación, detecta el evento Event.COMPLETE del objeto Sound, que provoca la ejecución del método onSoundLoaded() cuando se cargan todos los datos de sonido. Después, llama al método Sound.load() con un nuevo valor URLRequest para el archivo de sonido. El método onSoundLoaded() se ejecuta cuando se completa la carga de sonido. La propiedad de destino del objeto Event es una referencia al objeto Sound. La llamada al método play() del objeto Sound inicia la reproducción de sonido.

import flash.events.Event; import flash.media.Sound; import flash.net.URLRequest; var s:Sound = new Sound(); s.addEventListener(Event.COMPLETE, onSoundLoaded); var req:URLRequest = new URLRequest("ritter rost.mp3"); s.load(req); function onSoundLoaded(event:Event):void { var localSound:Sound = event.target as Sound; localSound.play(); }


CIBERTEC

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.

CIBERTEC


118

Resumen

 ActionScript 3.0 y Flash Player admiten archivos de sonido almacenados en

formato MP3. No pueden cargar ni reproducir directamente archivos de sonido con otros formatos, como WAV o AIFF  Una aplicación no puede reutilizar un objeto Sound para cargar más de un sonido. Para cargar un nuevo recurso de sonido, debe crear otro objeto Sound.  Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.  http://jestudio.cl/blog/distintas-maneras-de-crear-un-preloader-as3-parte-1/

Distintas maneras de crear un Preloader con actionscript 3.0.  http://www.republicofcode.com/tutorials/flash/as3sound/

Aquí hallará un tutorial para insertar sonidos con actionscript 3.0.


CIBERTEC

DISEÑO WEB II

119


3 SEMANA

15



TEMARIO • •

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

• • •

ACTIVIDADES PROPUESTAS • • •

CIBERTEC

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.


120

1. INTRODUCCIÓN INTRODUCCIÓN A LA UTILIZACIÓN UTILIZACIÓN DE VÍDEO 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, 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 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: 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 tr ansmisió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 ■


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 técnica conocida 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 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


122

fotogramas del vídeo en 21 fps. Esta opción permite un mejor control del vídeo que el vídeo incorporado, para garantizar una reproducción del vídeo sin problemas. Asimismo, permite reproducir archivos FLV a distintas velocidades de fotogramas sin necesidad de alterar el contenido de Flash existente. ■ Con archivos FLV externos no es preciso interrumpir la reproducción de los documentos de Flash mientras se carga el archivo de vídeo. A veces, los archivos de vídeo importados pueden interrumpir la reproducción de un documento para realizar ciertas funciones, como acceder a una unidad de CD-ROM. Los archivos FLV pueden realizar funciones independientemente del documento de Flash, por lo que no interrumpen su reproducción. ■ La rotulación de contenido de vídeo es más fácil con los archivos FLV externos, ya que se puede acceder a los metadatos del vídeo mediante controladores de eventos.

1.3. Carga de archivos de vídeo La carga de vídeos con las clases NetStream y NetConnection es un proceso de varios pasos: 1. El primer paso consiste en crear un objeto NetConnection. 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(), si se conecta a un archivo FLV local que no utiliza un servidor como Adobe Flash Media Server 2 o Adobe Flex. var nc:NetConnection = new NetConnection(); nc.connect(null); 2. 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. El siguiente fragmento conecta un objeto NetStream a la instancia de NetConnection especificada y carga un archivo FLV denominado video.flv en el mismo directorio que el archivo SWF: var ns:NetStream = new NetStream(nc); ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler); ns.play("video.flv"); function asyncErrorHandler(event:AsyncErrorEvent):void { // omitir error } 3. 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. A continuación, se puede añadir el objeto Video a la lista de visualización con el método addChild(), tal como se muestra en el fragmento siguiente: var vid:Video = new Video(); vid.attachNetStream(ns); addChild(vid);


CIBERTEC

DISEÑO WEB II

123

Tras introducir el código anterior, Flash Player intentará cargar el archivo de vídeo video.flv en el mismo directorio que el archivo SWF.

2. PRECARGAS Las precargas son animaciones que van mostrando porcentaje de carga, 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. En esta sesion, se trabajaran las precargas de dos maneras. Una es, usando puro codigo de actionScript, y la otra es, usando los componentes preloader y loader respectivamente. Antes de empezar es necesario conocer algunos conceptos básicos para realizar precargas de cualquier manera.

2.1. 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.1. El metodo Math.floor() Este método retorna la parte entera del parámetro que recibe (numero decimal). Su sintaxis es la siguiente: Math.floor(x) Donde x es el numero decimal que usará para obtener la parte entera. Por ejemplo, el siguiente código retorna el valor 12: Math.floor(12.9)

2.1.2. El método getBytesLoaded() Este método retorna el número de bytes que se está cargando de una película, sonido o imagen. Su sintaxis es la siguiente. Objeto.getBytesLoaded() Por ejemplo, el siguiente código retorna el número de bytes que se están cargando de la película principal cargados = _root.getBytesLoaded()

2.1.3. El método getBytesTotal() Este método retorna el número de bytes que contiene una película, sonido o imagen. Su sintaxis es la siguiente. Objeto.getBytesTotal()

CIBERTEC


124

2.1.4. El método setIntervall() Este método llama a una función, método u objeto a intervalos periódicos mientras se ejecuta un archivo swf. La sintaxis es la siguiente: var nombreVariable=setInterval(functionName, interval) Donde nombreVariable es el nombre de una variable que representa a la función functionName. functionName es el nombre de la función que se va a ejecutar el método setInterval. 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, 1);

2.1.5. 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, se ejecuta la película. if (cargados == total) { //Hacer que se deje de ejecutar esta función llamada cargando clearInterval(hiloPrecarga); //Iniciar la película play(); }

2.2. Precarga Con Codigo Actionscript Con los conceptos aprendidos en la sección anterior, se puede insertar una precarga usando solo códigos de actionScript con la ayuda de algunos símbolos movieclips. El procedimiento es el siguiente: 1. Cree una nueva película en Flash 2. Cree un movieClip con una barra que se anime con interpolación por forma con una duración de 100 fotogramas. Asigne el nombre de instancia barra_mc 3. Inserte en la misma escena, un texto dinámico con el nombre de instancia porcentaje_txt. Asígnele el texto 100%


CIBERTEC

DISEÑO WEB II

125

4. Importe un video, una imagen o un sonido en la segunda escena y conviértalo en movieClip

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

CIBERTEC


126

La función setInterval nos servirá para que la función "cargando" se ejecute cada 1 milisegundo. Así, 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.3. Precarga Con El Componente Progressbar Una barra de progreso le permite mostrar el avance de la carga del contenido de un video, sonido o imagen. Esto es una información básica importante para los usuarios cuando se interactúa con una aplicación. Adobe Flash tiene un panel de componentes que permiten, entre otras cosas, insertar barras de progreso (progressBar) e imágenes de carga (Loader). En esta sección usaremos dos componentes: el progressBar y el Loader. Existen varios modos de usar el componente ProgressBar. Se establece el modo con el parámetro mode

Los modos mas usados son el "event" y el "polled". Estos modos usan el parametro source para especificar el proceso de carga que emite los métodos progress y complete (modo event), o expone los métodos getBytesLoaded y getBytesTotalS (modo polled).

2.3.1. Parámetros del componente progressBar Cuando se instancia un componente progressBar, es necesario indicar los parámetros siguientes:

mode El modo de operar del componente progress bar. Este valor puedes ser cualquiera de los siguientes: event, polled, o manual. El valor por defecto es event.

source Es el nombre de instancia del componente Loader que contiene un objeto imagen, video o sonido.


CIBERTEC

DISEÑO WEB II

127

direction La direccion hacia la cual se dirige el relleno de la barra. Este valor puede ser right o left; el valor por defecto es right.

label Es un texto que indica el proceso de carga. Este parámetro es una cadena con el formato "%1 out of %2 loaded (%3%%)"; %1 es una variable que contiene el numero de bytes cargados actualmente, %2 es una variable para el total de bytes cargados, y %3 es una variable para el porcentaje del contenido cargado. Los caracteres "%%" son variables que representan al signo "%".

labelPlacement Es la posición de la etiqueta en relación con la barra de progreso. Este parámetro puede tener uno de los siguientes valores: top, bottom, left, right, center. El valor por defecto es bottom.

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. Si coloca 1024, el número indicará kilobytes cargados.

CIBERTEC


128

Actividades

Ejercicio 1: Agregar un preloader con código stop(); var porcentaje:Number; var texto:TextField=new TextField; var barra:Sprite=new Sprite(); var color:int=0x000000; barra.x=stage.stageWidth/2-50; barra.y=stage.stageHeight/2-10; addChild(barra) addChild(texto); this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, car); function car(e:ProgressEvent){ porcentaje=(e.bytesLoaded/e.bytesTotal)*100 barra.graphics.clear(); barra.graphics.beginFill(color); barra.graphics.drawRect(0,0,porcentaje,20); texto.x=barra.x+barra.width; texto.y=barra.y; texto.text=String(Math.round(porcentaje))+"%" if(e.bytesLoaded==e.bytesTotal){ play();

Ejercicio 2: Agregar un componente ProgressBar a una película El siguiente procedimiento explica como agregar un componente ProgressBar a una película. En este ejemplo, la barra de progreso es usado en modo event. En el modo event, el contenido de la carga emite los eventos progress y complete que la barra de progreso usa para mostrar el avance de la carga. El componente Loader emite estos eventos. 1. Arrastre un componente ProgressBar al escenario 2. En el panel de Properties haga lo siguiente: i. Ingrese el nombre de instancia pBar ii. Seleccione el modo event 3. Arrastre un componente Loader al escenario 4. En el panel de Properties, ingrese el nombre de instancia loader 5. Seleccione la barra de progreso pBar en el escenario, y en el panel Properties, ingrese el nombre loader en el parámetro source. 6. Seleccione el frame 1, presione F9 y escriba el siguiente codigo en el panel de acciones: loader.autoLoad=false loader.content=”nombre del archivo de video o sonido” pBar.source=loader loader.load()


CIBERTEC

DISEÑO WEB II

129

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

CIBERTEC


130

Autoevaluación Diseño de video player dinámico con Precarga. 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. Este video player tiene controladores de video en la parte inferior


CIBERTEC

diseñp web manual

Recommend Documents

Este es un titulo para flash

" + wordList[i] + "