Diseñp Web Manual

Diseño Web II
CARRERAS PROFESIONALES CIBERTEC

DISEÑO WEB II 3
Í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 29
SEMANA 4 : PC1: Pagina personal con xml y css
SEMANA 5 : Integración de XML, CSS y Flash 41
Unidad de aprendizaje 3: El lenguaje ActionScript 3.0
SEMANA 6 : Manejo de Niveles 53
SEMANA 8 PC2: Pagina personal con enlaces
SEMANA 9 : 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 CARRERAS PROFESIONALES

4

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.

6
RED DE CONTENIDOS
Diseño Web II
El lenguaje El lenguaje El lenguaje

ActionScript XML CSS
3.0
Métodos Propieda Objetos Propie CSS Flash

des Metodos dades CSS
Timer Tween Flash

XML
Audio Video

DISEÑO WEB II 7
UNIDAD DE
APRENDIZAJE
1
SEMANA
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
• 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 Extensible Markup 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 a su alrededor otras que la

complementan y la hacen mucho más grande y con unas posibilidades mucho
mayores. Tiene un papel muy importante en la actualidad ya que permite la
compatibilidad entre sistemas para compartir la información de una manera
segura, fiable y fácil.
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.

DISEÑO WEB II 9
<alumnos>
<alumno>
<codigo>1</codigo>
<nombre>Viviana</nombre>
<edad/>
</alumno>
</alumnos>
• 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.
<alumno>
<codigo>1</codigo>
<nombre>Viviana</nombre>
<edad/>
</alumno>
• Elemento vacío: elemento XML que no contiene elementos secundarios.

Los elementos vacíos se suelen escribir con una sola etiqueta (como
<elemento/>).
<familia />
<gato raza="Persa" nombre="Micifú" />
• 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.
<alumnos>
<alumno/>
</alumnos>
• 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.
<alumno codigo=”1” nombre=”Magna” nota=”20” />
• 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.

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)
<parrafo>Lo siguiente es un ejemplo de HTML.</html>

<ejemplo>
<HTML>
<HEAD><TITLE>Rock & Roll</TITLE></HEAD>
</ejemplo>
<ejemplo>
<![CDATA[
<HTML>
<HEAD><TITLE>Rock & Roll</TITLE></HEAD>
]]>
</ejemplo>
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 "".
<?xml version="1.0"?>



Se pueden introducir comentarios en cualquier lugar de la instancia o del

prólogo, pero nunca dentro de las declaraciones, etiquetas, u otros comentarios.

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:
<?xml version="1.0"?>
<texto>Este documento se adecua a la Especificación XML 1.0.</texto>
Indicación del juego de caracteres utilizados (encoding):
<?xml version="1.0" encoding="ISO-8859-1"?>

<texto> 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 ñ) </texto>
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:
<?xml version="1.0" encoding="ISO-8859-1"?>

<album>
<musica pista="1" duracion="4:05">
<titulo>mujer bonita</ titulo>
<artista>Los Platillos negros</artista>
<genero>Balada</ genero >
<grabado>2006-10-17-08:31</ grabado >
</musica >
<musica pista="2" duracion="3:15">
<titulo>Traidora</ titulo>
<artista>Harry el hermoso</artista>
< genero >Rock</ genero >
<grabado>2007-10-27-10:45</ grabado >
</musica >
</album>
Cada elemento se distingue mediante un conjunto de etiquetas, 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: <titulo>
La etiqueta final, que marca el final del elemento, tiene una barra diagonal
antes del nombre del elemento: </titulo>

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: <grabado/>
es idéntico a este elemento: <titulo></titulo>
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":
<musica duracion="4:19"></musica>
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: <etiquetavacia/>
3. Es sensitivo (mayúsculas y minúsculas), etiquetas correspondientes se

tienen que escribir igual
4. No se pueden intercalar etiquetas: <libro><pagina>Applied

XML<libro>12<pagina>
5. Una “tag” (etiqueta) puede tener atributos cerrados entre comillas:

<nombre estado=“casado” hijos=“3”>Juan</nombre>
6. El nombre de las etiquetas empiezan con una letra, o con uno o más
signos de puntuación: <Nombre> ; <nombre> ; <!Entity> ; <? Ejecuta>
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
<factura id=“cod12-02-123”>
<cliente>
<nombre>Juan</nombre>
<dni>12.344.123</dni>
</cliente>
<pedido>
<producto codigo=“120-e”>Applied XML </producto>
<tipo>libro</tipo>
</pedido>
<costeTotal unidad=“dolares”>24</costeTotal>
</factura>

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

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

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.

16

DISEÑO WEB II 17
UNIDAD DE
APRENDIZAJE
1
SEMANA
EL LENGUAJE XML

TEMARIO
• Cargar XML desde Flash
• 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.

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);

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:
<datos>
<contacto id="1" tipo="laboral">
<comentario><![CDATA[Debe más de 1000 pesos a la
empresa!]]></comentario>
</contacto>
<contacto id="2" tipo="amigo">
</contacto>
</datos>
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)

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:
<datos>
<contacto id=“1″ tipo=“laboral”>
<comentario><![CDATA[Debe más de 1000 pesos a la
empresa!]]></comentario>
</contacto>
<contacto id=“2″ tipo=“amigo”>
</contacto>
</datos>
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);

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("\ntipo: "+myXML.contacto[0].@tipo)
//test4
for(var i:uint = 0; i<myXML.contacto.length(); i++)
test_txt.appendText("\ncomentario: "+myXML.contacto[i].comentario)
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:
<elxml>
<codigo>123</codigo>
<nombre>Jaime Paredes</nombre>
<titulo>Prof. Cibertec</titulo>
</elxml>
Archivo cargarXMLtextoAS3.fla:

loader.dataFormat = URLLoaderDataFormat.TEXT;
loader.addEventListener(Event.COMPLETE, onComplete);
var request:URLRequest = new URLRequest("texto.xml");
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

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
<books>
<book ISBN="1590595181">
<title>Foundation ActionScript Animation: Making Things Move</title>
<author>Keith Peters</author>
<amazonUrl>http://tinyurl.com/npuxt</amazonUrl>
</book>
<book ISBN="1582346194">
<title>Send in the Idiots: Stories from the Other Side of Autism</title>
<author>Kamran Nazeer</author>
<amazonUrl>http://tinyurl.com/lo5ts</amazonUrl>
</book>
</books>
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);

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

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
<book ISBN="1590595181">
<title>Foundation ActionScript Animation: Making Things Move</title>
<amazonUrl>http://tinyurl.com/npuxt</amazonUrl>
</book>
<book ISBN="1582346194">
<title>Send in the Idiots: Stories from the Other Side of Autism</title>
<amazonUrl>http://tinyurl.com/lo5ts</amazonUrl>
</book>
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 <author>, por lo que debemos cambiar nuestro trace de bookInput.book a
bookInput.book.author

trace("------------------------");
trace(bookInput.book.author);
}

DISEÑO WEB II 25
Cuando se ejecute la película, se observara lo siguiente en la ventana de salida:
Con este cambio que realizamos ahora podrás ver la lista de los autores, pero dicha
lista esta rodeada por tags <author>. 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()

trace("------------------------");
trace(bookInput.Book.author.text());
}
Cuando ejecutes la aplicación en esta ocasión, todos los autores se mostraran sin el
tag <author>. 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:

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:

trace("------------------------");
for each(var ejem:XML in bookInput.book.author)
trace(ejem.text());
}

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:
<mensaje>
<asunto>Aviso de suspensión</asunto>
<correo>webmaster@cristalab.com</correo>
<cuerpo>Su servicio sera suspendido a partir de la fecha</cuerpo>
<remitente>servicios@empresa.com</remitente>
</mensaje>
El diseño del formulario en flash es el siguiente:
Al hacer clic en el boton cargar se debe visualizar los datos del archivo XML en el
formulario.

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

28

DISEÑO WEB II 29
UNIDAD DE
APRENDIZAJE
2
SEMANA
EL LENGUAJE XML

TEMARIO
• Estilos CSS
• Integración de Flash y CSS
• 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.

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 <body> 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;
}

32
En este caso, se aplica a la etiqueta con solo colocarle el identificador, como

en este ejemplo:
<div id="header">Aqui el contenido</div>
/*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:
<div class="mi_clase">Aqui el contenido</div>
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;
}

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
letter-
durante el avance. Un valor negativo condensa el espacio entre caracteres.
spacing
margin-left
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.
text-
Los valores reconocidos son none y underline.
decoration
text-indent

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 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 += "<p class='tit'>" + titulo + "</p>";
mensaje_txt.htmlText += "<p class='men'>" + mensaje + "</p>";
mensaje_txt.htmlText += "<p class='fec'>Publicado: " + fecha + "</p>";
}
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;
}

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 = "<p class='titulo'>Css en Flash CS3 </p>";

ejemploTexto += "<p><span class='concepto'>Hojas de estilo Css: </span>";

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 += "<a href='http://www.disney.com'>Disney</a>.";
ejemploTexto += " Este ejemplo funciona de la misma manera en Flash CS4.</p>";

var req:URLRequest = new URLRequest("miCSS.css");
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
loader.load(req);
function onCSSFileLoaded(event:Event):void
{
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:
<h1>Este es un titulo para flash</h1>

<p>Es un parrafo para formatear</p>
<p>Es un segundo parrafo para formatear</p>
<a href='#'>enlace</a>
En el primer fotograma de la pelicula, 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();

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 += "<h4>" + wordList[i] + "</h4>";
}
}
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"));

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

DISEÑO WEB II 39
Resumen
CSS es una tecnología desarrollada con el fin de separar la presentacion de la

estructura del HTML.
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 req:URLRequest = new URLRequest("miCSS.css");
loader.load(req);
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.

40

DISEÑO WEB II 41
UNIDAD DE
APRENDIZAJE
2
SEMANA
EL LENGUAJE XML

TEMARIO
• Integración de XML, CSS y Flash
• 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:

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:
<noticias>
<noticia fecha="14/04/2005">
<titulo>Nave rusa tripulada se acopla sin problemas … Internacional</titulo>
<mensaje>Moscú (dpa) - La nave rusa Soyuz, con tres tripulantes a bordo, se
acopló hoy automáticamente sin problemas a la Estación Espacial Internacional . . .
..
</mensaje>
<image>nave.jpg</image>
</noticia>
<noticia fecha="25/02/2005">
<titulo>Finaliza estado de excepción pero crece descontento</titulo>
<mensaje>Luego de que el presidente de Ecuador, Lucio Gutiérrez, levantara
el estado de emergencia decretado en Quito el viernes, las multitudinarias. . . . .. . .
..
</mensaje>
<image>vaticano.jpg</image>
</noticia>
</noticias>
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

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:
{

44
}
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;
}

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

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

loader.load(req);
// Carga archivo XML

var noticias_xml:URLLoader = new URLLoader();
noticias_xml.dataFormat = URLLoaderDataFormat.TEXT;

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

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
}
}
{
}
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:
<gal>
<fotos label="01" source="./images/01.jpg" thumb="./thumbnails/01.jpg" />

DISEÑO WEB II 49

</gal>
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");
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);

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.

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

52

DISEÑO WEB II 53
UNIDAD DE
APRENDIZAJE
3
SEMANA
EL LENGUAJE ACTIONSCRIPT

Adobe Flash CS3, usando el lenguaje ActionScript, para integrar recursos
interactivos o proyectos multimedia.
TEMARIO
• Manejo de Niveles
• 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:

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.

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:
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)
2 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();

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/class-
summary.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.

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.

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.

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

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

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
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);

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 );

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

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

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

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.

68

DISEÑO WEB II 69
UNIDAD DE
APRENDIZAJE
3
SEMANA
EL LENGUAJE XML

TEMARIO
• Desarrollo de aplicaciones Web con Flash, CSS y XML
• 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

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

72

DISEÑO WEB II 73
UNIDAD DE
APRENDIZAJE
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

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.

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.

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

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

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
{

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 ();

80
addChild (textTest);
textTest.text = "HAS PULSADO:";
function TeclaPulsada (tecla:KeyboardEvent): void{

textTest.text = "HAS PULSADO:\n"+tecla.keyCode;
}

DISEÑO WEB II 81
Actividades
Ejercicio 1: Detectar colisión entre dos movie clips
Para probar la colisión, arrastre el clip de película del coche para que entre en
contacto con el clip de película del área de estacionamiento. El resultado del método
hitTest se devuelve en el campo de texto.
En los siguientes procedimientos, se muestra cómo se detecta la colisión mediante el

ejemplo del coche.
1 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{
if(car.hitTestObject(area))
msj_txt.text='si';
else
msj_txt.text='no';
}
car.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
car.addEventListener(MouseEvent.MOUSE_UP,soltar);

{
car.startDrag(true);
car.addEventListener(Event.ENTER_FRAME,controlaContacto)

82
}
{
car.stopDrag();
}
9 Seleccione Control > Probar película y arrastre el clip de película car sobre area
para comprobar la detección de colisión.
Siempre que el recuadro de delimitación del coche tenga un punto de intersección
con el recuadro de delimitación del área, el estado es true.
Ejercicio 2: Detectar colisión entre un movie clip y un punto del escenario
Para realizar una detección de colisión entre un clip de película y un punto del
escenario, haga lo siguiente:
1 Cree un cuadro de texto dinámico en el escenario e introduzca msj_txt como
nombre de instancia en el inspector de propiedades.
2. Cree un movie clip con nombre de instancia black_mc
3. Seleccione el primer fotograma.
4 Presione F9 si no está abierto aún el panel de acciones.
5 En el editor de scripts escriba el siguiente código:
black_mc.addEventListener(Event.ENTER_FRAME,controllaMouse);
function controllaMouse(e:Event):void
{
if(black_mc.hitTestPoint(mouseX,mouseY,true))
msj_txt.text='si';
else
msj_txt.text='no';
}
6 Ejecute la pelicula y mueva el ratón sobre el clip de película para comprobar la

colisión.
Mueva el cursor sobre el movie clip black_mc para comprobar la colisión. El resultado
del método hitTestPoint se devuelve en el campo de texto. El valor true se visualiza
siempre que el ratón se encuentre sobre un píxel que no es transparente.

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

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.

DISEÑO WEB II 85
UNIDAD DE
APRENDIZAJE
3
SEMANA
11

TEMARIO
• Contadores
• Acumuladores
• La Clase Timer
• 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

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();

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;

DISEÑO WEB II 89
msj_txt.transform.colorTransform = myColor;
z=0
}
}
car.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
car.addEventListener(MouseEvent.MOUSE_UP,soltar);

{
car.startDrag(true);
car.addEventListener(Event.ENTER_FRAME,controlaContacto)
}
{
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

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

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

92

DISEÑO WEB II 93
UNIDAD DE
APRENDIZAJE
3
SEMANA
13

TEMARIO
• Efecto easing
• La clase Tween
• Filtros
• 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

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 El método easeIn() inicia el movimiento
funciones de aceleración realizando un control hacia atrás para
para la implementación después invertir la dirección y desplazarse
de movimiento con hacia el destino a continuación.
animaciones de El método easeInOut() combina los
ActionScript. 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.
Bounce La clase Bounce define El método easeIn() inicia el movimiento de
tres funciones de rebote lentamente y, a continuación, lo
aceleración para la acelera conforme se ejecuta.
implementación de El método easeInOut() combina los
movimiento de rebote con métodos easeIn() y easeOut() para iniciar
animaciones de el movimiento de rebote lentamente,
ActionScript, similar al de acelerarlo y, por último, desacelerarlo.
una pelota cayendo al El método easeOut() inicia el movimiento
suelo y dando rebotes de rebote con rapidez y, a continuación, lo
cada vez más pequeños. desacelera conforme se ejecuta.
Elastic La clase Elastic define El método easeIn() inicia el movimiento
tres funciones de lentamente y, a continuación, lo acelera
aceleración para la conforme se ejecuta.
movimiento con métodos easeIn() y easeOut() para iniciar
animaciones de el movimiento lentamente, acelerarlo y,
ActionScript, donde el por último, desacelerarlo.
movimiento se define por El método easeOut() inicia el movimiento
una onda senoidal que con rapidez y, a continuación, lo
decae de manera desacelera conforme se ejecuta.
exponencial.
None La clase None define Los métodos easeIn(),easeInOut(),
funciones de aceleración easeOut() y easeNone() definen un
para implementar movimiento constante, sin aceleración.
movimiento no acelerado
con animaciones
ActionScript.

96
Clase Descripción métodos

Regular La clase Regular define El método easeIn() inicia el movimiento
tres funciones de desde la velocidad cero y, a continuación,
aceleración para la lo acelera conforme se ejecuta.
movimiento acelerado métodos easeIn() y easeOut() para iniciar
con animaciones de el movimiento desde una velocidad cero,
ActionScript. acelerarlo y, por último, desacelerarlo de
vuelta hasta la velocidad cero.
con rapidez y, a continuación, lo
desacelera hasta la velocidad cero
conforme se ejecuta.
Strong La clase Strong define El método easeIn() inicia el movimiento
tres funciones de desde la velocidad cero y, a continuación,
aceleración para la lo acelera conforme se ejecuta.
movimiento con métodos easeIn() y easeOut() para iniciar
animaciones de el movimiento desde una velocidad cero,
ActionScript. acelerarlo y, por último, desacelerarlo de
vuelta hasta la velocidad cero.
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.*;
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;

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:
• Filtro de biselado (clase BevelFilter)

• Filtro de desenfoque (clase BlurFilter)
• Filtro de sombra (clase DropShadowFilter)
• Filtro de iluminado (clase GlowFilter)
• Filtro de bisel degradado (clase GradientBevelFilter)

98
• Filtro de iluminado degradado (clase GradientGlowFilter)

• Filtro de matriz de colores (clase ColorMatrixFilter)
• Filtro de convolución (clase ConvolutionFilter)
• Filtro de mapa de desplazamiento (clase DisplacementMapFilter)
3.1. Creación de un filtro nuevo

Para crear un nuevo objeto de filtro, basta con llamar al método constructor
de la clase de filtro seleccionada. Por ejemplo, para crear un nuevo objeto
DropShadowFilter, se usaría el siguiente código:
import flash.filters.DropShadowFilter;
var myFilter:DropShadowFilter = new DropShadowFilter();
Aunque no se muestra aquí, el constructor DropShadowFilter() (como todos

los constructores de clases de filtros) acepta varios parámetros opcionales
que se pueden utilizar para personalizar la apariencia del efecto de filtro.
3.2. Aplicación de un filtro

Una vez construido un objeto de filtro, es posible aplicarlo a un objeto de
visualización o a un objeto BitmapData; la forma de aplicarlo depende del
objeto al que se vaya a aplicar.
Los efectos de filtro se aplican a los objetos de visualización mediante la

propiedad filters. Dicha propiedad filters de los objetos de visualización es
una instancia de Array cuyos elementos son los objetos de filtro aplicados al
objeto de visualización. Para aplicar un único filtro a un objeto de
visualización, se debe crear la instancia de filtro, añadirla a una instancia de
Array y asignar ese objeto Array a la propiedad filters del objeto de
visualización:
import flash.display.Bitmap;
import flash.display.BitmapData;
// Crear un objeto bitmapData y representarlo en pantalla.

var myBitmapData:BitmapData = new
BitmapData(100,100,false,0xFFFF3300);
var myDisplayObject:Bitmap = new Bitmap(myBitmapData);
addChild(myDisplayObject);
// Crear una instancia de DropShadowFilter.

var dropShadow:DropShadowFilter = new DropShadowFilter();
// Crear la matriz de filtros, añadiendo el filtro a la matriz pasándolo

// como un parámetro al constructor Array().
var filtersArray:Array = new Array(dropShadow);
// Asignar la matriz de filtros al objeto de visualización para aplicar

// el filtro.
myDisplayObject.filters = filtersArray;

DISEÑO WEB II 99
Si se desea asignar varios filtros al objeto, basta con añadir todos los filtros
a la instancia de Array antes de asignarla a la propiedad filters. Se pueden
añadir varios objetos a un elemento Array pasándolos como parámetros a su
constructor. Por ejemplo, el siguiente código aplica un filtro de bisel y otro de
iluminado al objeto de visualización creado con anterioridad:
import flash.filters.BevelFilter;
import flash.filters.GlowFilter;
// Crear los filtros y añadirlos a una matriz.

var bevel:BevelFilter = new BevelFilter();
var glow:GlowFilter = new GlowFilter();
var filtersArray:Array = new Array(bevel, glow);
// Asignar la matriz de filtros al objeto de visualización para aplicar el filtro.
myDisplayObject.filters = filtersArray;
3.3. Eliminación de filtros de un objeto de visualización

Eliminar todos los filtros de un objeto de visualización es tan sencillo como
asignar un valor nulo a la propiedad filters:
myDisplayObject.filters = null;
Si se han aplicado varios filtros a un objeto y se desea eliminar solamente

uno de ellos, es necesario seguir una serie de pasos para cambiar la matriz
de la propiedad filters.
NOTA
Es posible crear la matriz que contiene los filtros utilizando el constructor
new Array() (según se muestra en los ejemplos anteriores) o se puede
emplear la sintaxis literal de Array, encerrando los filtros entre corchetes, [].
Por ejemplo, esta línea de código:
var filters:Array = new Array(dropShadow, blur);
Hace lo mismo que esta otra:
var filters:Array = [dropShadow, blur];
3.4. Aplicación de un filtro a un objeto BitmapData

Para aplicar un filtro a un objeto BitmapData es necesario utilizar el método
applyFilter() del objeto BitmapData:
myBitmapData.applyFilter(sourceBitmapData);
El método applyFilter() aplica un filtro a un objeto BitmapData de origen,

dando lugar a una nueva imagen filtrada. Este método no modifica la imagen
original. En vez de eso, el resultado de la aplicación del filtro a la imagen
original se almacena en la instancia de BitmapData en la que se llama al
método applyFilter().

100
Actividades
Ejercicio 1: Crear un sistema de menús con efectos easing
Esta aplicación consiste en crear un sistema de menús con efectos easing. Cuando
hace clic en uno de los botones aparecerá la imagen adecuada y opcionalmente con
un enlace a otra escena.
A continuación se indicará un procedimiento para aplicar el efecto easing en el diseño

de un menú.
1. Cree una pelicula nueva de 300x200pixeles

2. Inserte un movie clip con dos capas. La primera, con cuatro rectangulos de
300x100pixeles. La segunda, con cuatro textos según el modelo mostrado abajo.
El punto de registro debe estar al centro del movieclip. Asignele un nombre de clase
llamado fotos.
3. Inserte una capa llamada acciones. Presione la tecla F9 para activar el panel de
acciones e inserte el siguiente codigo:
var foto:fotos;
foto=new fotos();
foto.x=100
foto.y=50
addChild(foto)
var posX:int=0
foto.addEventListener(Event.ENTER_FRAME,ingresa)
function ingresa(e:Event){
foto.x+=(posX-foto.x)*0.5;
}
var colores:Array=new Array("0x00FF00","0x0000FF","0xff8800","0xffff00");

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;
posX=0;
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.

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());

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

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:
cautionLight.filters = [yellowGlow];
goLight.filters = [innerShadow];
break;
case 2:
stopLight.filters = [redGlow];
goLight.filters = [innerShadow];
break;
case 3:

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();

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

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().
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 filtros 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.

108

DISEÑO WEB II 109
UNIDAD DE
APRENDIZAJE
3
SEMANA
14

TEMARIO
• Audio
• 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.

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.

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 Se distribuye periódicamente durante el

(ProgressEvent.PROGRESS) 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 Se distribuye cuando no se puede

(IOErrorEvent.IO_ERROR) 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.

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

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

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);

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();
}

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.

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

DISEÑO WEB II 119
UNIDAD DE
APRENDIZAJE
3
SEMANA
15

TEMARIO
• Video
• Precargas
• Métodos básicos
• Precarga con componente ProgressBar
• Precarga con código ActionScript
• 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 A LA UTILIZACIÓN DE VÍDEO

Una de las funciones importantes de Adobe Flash Player radica en la capacidad
de mostrar y manipular información de vídeo con ActionScript de la misma forma
que se puede manipular otros contenidos visuales, como las imágenes, las
animaciones, el texto, etc.
Cuando se crea Flash Video (FLV) en Adobe Flash CS3 Professional, se cuenta
con la opción de seleccionar un aspecto para el vídeo, entre los que se incluyen
los controles de reproducción habituales. No obstante, no hay motivo por el que
se deba limitar a las opciones disponibles.
Con ActionScript, se obtiene un control preciso de la carga, la reproducción y el

control de la reproducción de vídeo; es decir, se podría crear un aspecto de vídeo
personalizado o utilizar el vídeo de una forma menos típica si se desea.
La utilización de vídeo en ActionScript implica trabajar con una combinación de

varias clases:
■ Clase Video: el cuadro de contenido de vídeo real en el escenario es una

instancia de la clase Video. La clase Video es un objeto de visualización, de
manera que se puede manipular con las mismas técnicas que se aplican a otros
objetos similares, como el ajuste de la posición, la aplicación de transformaciones,
la aplicación de filtros y modos de mezcla, etc.
■ Clase NetStream: cuando se carga un archivo de vídeo que controlará
ActionScript, se utiliza una instancia de NetStream para representar el origen del
contenido de vídeo (en este caso, un flujo de datos de vídeo). La utilización de la
instancia de NetStream también implica utilizar un objeto NetConnection, que es
la conexión al archivo de vídeo, al igual que el túnel con el que se alimentan los
datos de vídeo.
■ Clase Camera: cuando se utilizan datos de vídeo procedentes de una cámara
conectada al ordenador del usuario, una instancia de Camera representa el origen
del contenido de vídeo (la cámara del usuario y los datos de vídeo que
proporciona).
Cuando se carga vídeo externo, se puede cargar el archivo desde un servidor

Web estándar para obtener una reproducción de descarga progresiva, o bien se
puede trabajar con un flujo de vídeo transmitido por un servidor especializado
como Macromedia® Flash® Media Server de Adobe.
1.1. Conceptos y términos importantes
La siguiente lista de referencia contiene términos importantes que se utilizan

en esta sección:
■ Punto de referencia: marcador que se puede colocar en un instante de

tiempo específico en un archivo de vídeo; por ejemplo, funciona como
un marcador para buscar ese instante o proporcionar datos adicionales
asociados a dicho momento.
■ Codificación: proceso de convertir datos de vídeo en un formato a otro
formato; por ejemplo, convertir un vídeo de origen de alta resolución a
un formato adecuado para la transmisión por Internet.
■ Fotograma: segmento individual de información de vídeo; cada
fotograma es como una imagen estática que representa una instantánea

DISEÑO WEB II 121
de un momento en el tiempo. Si se reproducen fotogramas de forma

secuencial a alta velocidad, se crea la ilusión del movimiento.
■ Fotograma clave: fotograma de vídeo que contiene información
completa del fotograma. El resto de fotogramas que siguen a un
fotograma clave sólo contienen información sobre cómo difieren del
fotograma clave, en lugar de incluir información relativa al fotograma
completo.
■ Metadatos: información sobre un archivo de vídeo que se puede
incorporar en el archivo de vídeo y recuperarse cuando se haya cargado
el vídeo.
■ Descarga progresiva: cuando se transmite un archivo de vídeo desde
un servidor Web estándar, los datos de vídeo se cargan mediante la
descarga progresiva, es decir, la información de vídeo se carga de
forma secuencial. Esto presenta la ventaja de que el vídeo puede
empezar a reproducirse antes de que se haya descargado todo el
archivo; sin embargo, impide poder saltar a una parte del vídeo que no
se haya cargado aún.
■ Transmisión de flujo: como alternativa a la descarga progresiva, se
puede utilizar un servidor de vídeo especial para emitir vídeo por
Internet mediante la técnica conocida como transmisión de flujo (a
veces denominada “transmisión de flujo verdadera”). Con la transmisión
de flujo, el ordenador del espectador nunca descarga el vídeo completo
a la vez. Para acelerar los tiempos de descarga, el ordenador sólo
necesita, en cualquier momento, una parte de la información de vídeo
total. Puesto que un servidor especial controla la transmisión del
contenido de vídeo, se puede acceder en todo momento a cualquier
parte del vídeo, en lugar de tener que esperar a que se descargue antes
de acceder a él.
1.2. Aspectos básicos del formato Flash Video (FLV)
El formato del archivo FLV contiene datos de audio y vídeo codificados para
publicar mediante Flash Player. Por ejemplo, si se dispone de un archivo de
vídeo de QuickTime o Windows Media, se utiliza un codificador (como Flash
8 Video Encoder o Sorenson™ Squeeze) para convertirlo en un archivo FLV.
Se pueden crear archivos FLV importando vídeo a la herramienta de edición

de Flash y exportándolo como archivo FLV. Se puede utilizar el complemento
de exportación de FLV para exportar archivos FLV de aplicaciones de edición
de vídeo compatibles.
La utilización de archivos FLV externos ofrece algunas posibilidades que no

están disponibles al utilizar vídeo importado:
■ Pueden utilizarse clips de vídeo más largos en documentos de Flash

sin que ello ralentice la reproducción. Los archivos FLV externos se
reproducen utilizando la memoria caché, de modo que los archivos
grandes se almacenan en partes pequeñas y se accede a ellos de
forma dinámica; además, requieren menos memoria que los archivos de
vídeo incorporados.
■ Un archivo FLV externo puede tener una velocidad de fotogramas
distinta a la del documento de Flash en el que se reproduce. Por
ejemplo, se puede establecer la velocidad de fotogramas del documento
de Flash en 30 fotogramas por segundo (fps) y la velocidad de

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);

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()

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%

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

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.

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.

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()

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.

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

DISEÑO WEB II 131
Resumen
El formato del archivo FLV contiene datos de audio y vídeo codificados para
publicar mediante Flash Placer
Se pueden crear archivos FLV importando vídeo a la herramienta de edición de
Flash y exportándolo como archivo FLV
La utilización de archivos FLV externos ofrece algunas posibilidades que no están
disponibles al utilizar vídeo importado
Preloader es el cargador de una página web. El que normalmente indica el
porcentaje de la carga o la cantidad de bites cargados.
Se puede insertar mediante el componente ProgressBar o mediante código
ActionScript 3.0
Para manipular el objeto de precarga especialmente si lo va a hacer con código es
necesario que conozca algunos métodos básicos como Math.floor(),
getBytesTotal(),getBytesLoaded(), entre otros.
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.videoaprende.com/?p=77
Aquí hallará un tutorial para insertar videos con actionscript 3.0.

Diseñp Web Manual

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseñp Web Manual

Cargado por

Copyright:

Formatos disponibles

Diseño Web II

CARRERAS PROFESIONALES CIBERTEC

CIBERTEC CARRERAS PROFESIONALES

CARRERAS PROFESIONALES CIBERTEC

Diseño Web II es un curso que pertenece a la línea técnica y se dicta en la

El manual para el curso ha sido diseñado bajo la modalidad de unidades de

El curso es eminentemente práctico y consiste en el diseño de páginas web con

CIBERTEC CARRERAS PROFESIONALES

El lenguaje El lenguaje El lenguaje

Métodos Propieda Objetos Propie CSS Flash

Timer Tween Flash

CARRERAS PROFESIONALES CIBERTEC

• Al término de la unidad, los alumnos diseñan páginas web con la herramienta

• Los alumnos diseñan documentos XML bien formados.

CIBERTEC CARRERAS PROFESIONALES

XML es una tecnología sencilla que tiene a su alrededor otras que la

1.1. Conceptos y términos importantes

Antes de crear documentos XML es necesario revisar algunos conceptos

• Elemento raiz: Es el primer elemento de un documento XML y el ultimo

CARRERAS PROFESIONALES CIBERTEC

• Elemento: elemento individual de un documento XML, identificado como

• Elemento vacío: elemento XML que no contiene elementos secundarios.

<gato raza="Persa" nombre="Micifú" />

• Documento: estructura XML individual. Un documento XML puede

• Nodo: nombre alternativo para elemento XML.

• Atributo: valor con nombre asociado con un elemento que se escribe en

<alumno codigo=”1” nombre=”Magna” nota=”20” />

• Entidades predefinidas. En XML 1.0, se definen cinco entidades para

CIBERTEC CARRERAS PROFESIONALES

• Secciones CDATA. Existe otra construcción en XML que permite

Como ejemplo, el siguiente (primero usando entidades predefinidas, y

<parrafo>Lo siguiente es un ejemplo de HTML.</html>

Como hemos visto, dentro de una sección CDATA podemos poner

• Comentarios A veces es conveniente insertar comentarios en el

Se pueden introducir comentarios en cualquier lugar de la instancia o del

CARRERAS PROFESIONALES CIBERTEC

1.2. Declaracion XML

Indicación de la versión del standard XML:

Indicación del juego de caracteres utilizados (encoding):

<?xml version="1.0" encoding="ISO-8859-1"?>

1.3. Estructura de un documento XML

<?xml version="1.0" encoding="ISO-8859-1"?>

Cada elemento se distingue mediante un conjunto de etiquetas, constituidas

CIBERTEC CARRERAS PROFESIONALES

Si un elemento no contiene nada, puede escribirse como un elemento vacío

1.4 Escribir documentos XML bien formados

1. Sólo puede haber un elemento raíz

2. Toda etiqueta abierta hay que cerrarla: <etiquetavacia/>

3. Es sensitivo (mayúsculas y minúsculas), etiquetas correspondientes se

4. No se pueden intercalar etiquetas: <libro><pagina>Applied

5. Una “tag” (etiqueta) puede tener atributos cerrados entre comillas:

7. Los comentarios van encerrados entre:

Un documento bien formado es aquel documento que cumple con la

Ejemplo de un documento XML bien formado

CARRERAS PROFESIONALES CIBERTEC

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

CIBERTEC CARRERAS PROFESIONALES

Diseñe el siguiente documento XML

CARRERAS PROFESIONALES CIBERTEC

CIBERTEC CARRERAS PROFESIONALES

CARRERAS PROFESIONALES CIBERTEC

• Al término de la unidad, los alumnos diseñan páginas web con la herramienta

• Cargar XML desde Flash

/CSS sobre selector de etiquetas/

/CSS sobre selector de identificador/