Documente Academic
Documente Profesional
Documente Cultură
Í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
PRESENTACIÓN
RED DE CONTENIDOS
Diseño Web II
Audio Video
UNIDAD DE
APRENDIZAJE
1
SEMANA
EL LENGUAJE XML
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Estructura XLM
• Conceptos XML
• Declaración XML
• Documentos XML bien formados
ACTIVIDADES PROPUESTAS
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.
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.
<alumnos>
<alumno>
<codigo>1</codigo>
<nombre>Viviana</nombre>
<edad/>
</alumno>
</alumnos>
<alumno>
<codigo>1</codigo>
<nombre>Viviana</nombre>
<edad/>
</alumno>
<familia />
<alumnos>
<alumno/>
</alumnos>
Entidad Caracter
& &
< <
> >
' '
" "
<?xml version="1.0"?>
<!-- Aquí va el tipo de documento -->
<!-- Otro comentario -->
<!-- Ya acabamos -->
<?xml version="1.0"?>
<texto>Este documento se adecua a la Especificación XML 1.0.</texto>
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:
La etiqueta final, que marca el final del elemento, tiene una barra diagonal
antes del nombre del elemento: </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).
6. El nombre de las etiquetas empiezan con una letra, o con uno o más
signos de puntuación: <Nombre> ; <nombre> ; <!Entity> ; <? Ejecuta>
<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>
Actividades
Actividad 1
cotizacion.xml
books.xml
Autoevaluación
<datos>
<contacto id="1" tipo="laboral">
<nombre>Carlos</nombre>
<apellido>Perez</apellido>
<telefono>4555-7895</telefono>
<comentario><![CDATA[Debe más de 1000 pesos a la empresa!]]></comentario>
</contacto>
<contacto id="2" tipo="amigo">
<nombre>Dario</nombre>
<apellido>Raimon</apellido>
<telefono>4555-1235</telefono>
<comentario><![CDATA[Prácticamente un Licenciado!]]></comentario>
</contacto>
</datos>
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.
UNIDAD DE
APRENDIZAJE
1
SEMANA
EL LENGUAJE XML
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
ACTIVIDADES PROPUESTAS
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.
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.
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.
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.
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
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:
function xmlLoaded(event:Event):void
{
myXML = XML(myLoader.data);
trace("Data loaded.");
}
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.utils.*;
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);
}
}
<datos>
<contacto id="1" tipo="laboral">
<nombre>Carlos</nombre>
<apellido>Perez</apellido>
<telefono>4555-7895</telefono>
<comentario><![CDATA[Debe más de 1000 pesos a la
empresa!]]></comentario>
</contacto>
<contacto id="2" tipo="amigo">
<nombre>Dario</nombre>
<apellido>Raimon</apellido>
<telefono>4555-1235</telefono>
<comentario><![CDATA[Prácticamente un Licenciado!]]></comentario>
</contacto>
</datos>
trace(example)
trace(example.contacto[0].comentario)
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.
<datos>
<contacto id=“1″ tipo=“laboral”>
<nombre>Carlos</nombre>
<apellido>Perez</apellido>
<telefono>4555-7895</telefono>
<comentario><![CDATA[Debe más de 1000 pesos a la
empresa!]]></comentario>
</contacto>
<contacto id=“2″ tipo=“amigo”>
<nombre>Dario</nombre>
<apellido>Raimon</apellido>
<telefono>4555-1235</telefono>
<comentario><![CDATA[Prácticamente un Licenciado!]]></comentario>
</contacto>
</datos>
Existe otra construcción en XML que permite especificar datos, utilizando cualquier
carácter, 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:
addChild(test_txt);
function onComplete(event:Event):void {
var myXML:XML = new XML(event.target.data)
//test 1
test_txt.text=myXML
//test2
test_txt.appendText("\n")
for each(var test:XML in myXML..apellido)
test_txt.appendText("\napellido: "+test);
//test3
test_txt.appendText("\n")
test_txt.appendText("\ntipo: "+myXML.contacto[0].@tipo)
//test4
test_txt.appendText("\n")
for(var i:uint = 0; i<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:
nombre_txt.height=25
nombre_txt.autoSize="right"
addChild(nombre_txt);
};
Actividad 3
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>
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
trace(xmlData);
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
AnalizarLibro (xmlData);
}
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).
<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>
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
<author>Keith Peters</author>
<author>Kamran Nazeer</author>
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()
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:
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:
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>
Al hacer clic en el boton cargar se debe visualizar los datos del archivo XML en el
formulario.
Resumen
Se tiene que hacer que una instancia URLLoader cargue los datos desde el URL.
Para decirle al URLLoader que cargue los datos como texto plano, su propiedad
dataFormat se debe establecer en DataFormat.TEXT.
Se tiene que añadir un controlador de evento para el evento COMPLETE para que
reciba notificación cuando los datos se han terminado de descargar.
Por ultimo, se debe invocar el método URLLoader. Load() para lanzar el proceso
de carga, pasando una instancia URLRequest que apunta al URL del archivo XML.
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://www.zonaexpertos.com/showthread.php?p=5
Aquí hallará ejercicios para cargar XML en Flash.
http://clipdepelicula.com/cargar-xml-en-flash/
En esta página, hallará un video tutorial para cargar XML en Flash.
UNIDAD DE
APRENDIZAJE
2
SEMANA
EL LENGUAJE XML
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Estilos CSS
• Integración de Flash y CSS
ACTIVIDADES PROPUESTAS
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.
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
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.
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.
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 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;
}
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
Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se
analizan; los píxeles y los puntos son equivalentes.
Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se
margin-left
analizan; los píxeles y los puntos son equivalentes.
margin- Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se
right analizan; los píxeles y los puntos son equivalentes.
text-align Los valores reconocidos son left, center, right, y justify.
text-
Los valores reconocidos son none y underline.
decoration
Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se
text-indent
analizan; los píxeles y los puntos son equivalentes.
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:
.tit{
color:#006633;
font-size:12px;
text-align:center;
}
.men{
font-size:10px;
}
.fec{
color:#ff0000;
font-size:10px;
}
Actividades
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:
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
loader.load(req);
function onCSSFileLoaded(event:Event):void
{
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(URLLoader(event.target).data);
txtS.styleSheet = sheet;
txtS.htmlText = ejemploTexto;
}
Actividad 2:
<a href='#'>enlace</a>
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"));
Autoevaluación
Diseñe un menú en Flash que se pueda editar el comportamiento de los textos desde
un archivo css
Resumen
Selector {
Atributo1=valor;
……. ;
AtributoN=valor;
}
Para que Flash importe un archivo css, debe usar los siguientes metodos:
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
loader.load(req);
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://www.tutorialized.com/view/tutorial/Loading-External-CSS-In-AS3/36293
Aquí hallará ejercicios paso a paso para adjuntar hojas de estilo a su pelicula.
http://snipplr.com/view/4452/as3-load-external-txt-and-css/
En esta página, hallará un tutorial que explica la integración entre CSS y Flash.
UNIDAD DE
APRENDIZAJE
2
SEMANA
EL LENGUAJE XML
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
ACTIVIDADES PROPUESTAS
Para recuperar datos del objeto xml cree la función invocada cuando se
descargue (onComplete) y use los metodos y propiedades de XML:
<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>
Se insertan las etiquetas HTML que recibiran el estilo css. Para ello debe
asignar al objeto que recibira la cadena el método htmlText. Si en la hoja
de estilos ha definido clases, lo debe asignar a la etiqueta correspondiente:
mensaje_txt.htmlText = "";
mensaje_txt.htmlText += "<p class='tit'>" + titulo + "</p>";
mensaje_txt.htmlText += "<p class='men'>" + mensaje + "</p>";
mensaje_txt.htmlText += "<p class='fec'>Publicado: " + fecha + "</p>";
function onCSSFileLoaded(event:Event):void
{
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(URLLoader(event.target).data);
mensaje_txt.styleSheet = sheet;
}
.tit{
color:#006633;
font-size:12px;
text-align:center;
}
.men{
font-size:10px;
}
.fec{
color:#ff0000;
font-size:10px;
}
Actividades
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):
B) El contenedor de la imagen
La imagen se cargara con código AS3 de la siguiente manera:
Propiedades de instancia:
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;
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
function onCSSFileLoaded(event:Event):void
{
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(URLLoader(event.target).data);
mensaje_txt.styleSheet = sheet;
}
<gal>
<fotos label="01" source="./images/01.jpg" thumb="./thumbnails/01.jpg" />
<fotos label="02" source="./images/02.jpg" thumb="./thumbnails/02.jpg" />
<fotos label="03" source="./images/03.jpg" thumb="./thumbnails/03.jpg" />
Luego en Flash cree un archivo con el nombre Archivo galeria.fla el cual debe tener
en el primer fotograma de su pelicula, el siguiente codigo en AS3:4
import fl.containers.UILoader;
import fl.controls.TileList;
import flash.net.URLRequest;
import flash.net.URLLoader;
import fl.data.DataProvider
//Visualizador
var ui:UILoader = new UILoader();
ui.setSize(400,300);
ui.move(100,25);
ui.source = "images/01.jpg";
addChild(ui);
//Lista de Fotos
var list:TileList = new TileList();
list.setSize(550,120);
list.move(25,340)
list.columnWidth = 150;
list.rowHeight = 100;
list.sourceField = "thumb";
addChild(list);
//XML
var xml:XML;
var url:URLRequest = new URLRequest("./xml/galeria.xml");
var loader:URLLoader = new URLLoader();
loader.load(url);
//Eventos
function Completar(event){
var xml:XML = new XML(loader.data);
var dp:DataProvider = new DataProvider(xml);
list.dataProvider = dp;
}
loader.addEventListener(Event.COMPLETE, Completar);
function alCambiar(event){
ui.source = list.selectedItem.source;
}
list.addEventListener(Event.CHANGE, alCambiar);
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.
Resumen
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://www.clickpopmedia.com/2008/05/14/creating-an-xml-gallery-with-
actionscript-30/
Aquí hallará un tutorial para crear una galeria de imágenes en ActionScript 3.0.
http://www.prodevtips.com/2008/12/23/menu-and-banner-from-xml-with-as3-
and-flash-cs3/
En esta página, hallará un tutorial para desarrollar banners y menus
dinamicos..
UNIDAD DE
APRENDIZAJE
3
SEMANA
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Manejo de Niveles
ACTIVIDADES PROPUESTAS
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)
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.
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.
addChild();
Si colocamos este código, vemos que en pantalla sale Hola Mundo. Ahora Vamos
a meter nuestro texto en un contenedor de tipo Sprite.
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.
(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.
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.
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.
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.
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.
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
setChildIndex():
Cambia la posicion de un hijo a donde nosotros le indiquemos
this.setChildIndex(this.getChildAt(2), 0);
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 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
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
addChild(loader);
function moveCircle(event:Event):void
{
loader.x += 5;
function startAnimation(event:MouseEvent):void
{
loader.addEventListener(Event.ENTER_FRAME, moveCircle);
}
loader.addEventListener(MouseEvent.CLICK, startAnimation);
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:
var cantidad:int = 7;
var ancho:int = 80;
var espacio:int = ancho + 20;
var limite:int = cantidad * espacio;
addChild( mcBoton );
}
http://www.flashmo.com/preview/flashmo_161_pink
Autoevaluación
Diseñe la siguiente página web con actionScript 3.0 con los métodos aprendidos en
esta semana.
Encabezado.swf Inicio.swf
Animación.swf Forma.swf
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
Si desea saber más acerca de estos temas, puede consultar las siguientes
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.
UNIDAD DE
APRENDIZAJE
3
SEMANA
EL LENGUAJE XML
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
ACTIVIDADES PROPUESTAS
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
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
UNIDAD DE
APRENDIZAJE
2
SEMANA
10
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Clips de película
• Métodos
• Propiedades
• Gestión de eventos
ACTIVIDADES PROPUESTAS
1. CLIPS DE PELICULA
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.
■ Propiedades
■ Métodos
■ Eventos
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;
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.
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
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);
3.3. hitTestPoint
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.
• 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.
• La respuesta: ¿qué pasos hay que llevar a cabo cuando ocurra el evento?
function eventResponse(eventObject:EventType):void
{
// 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.
function playMovie(event:MouseEvent):void
{
this.play();
}
playButton.addEventListener(MouseEvent.CLICK, playMovie);
function updateOutput(event:TextEvent):void
{
var pressedKey:String = event.text;
outputText.text = "You typed: " + pressedKey;
}
entryText.addEventListener(TextEvent.TEXT_INPUT, updateOutput);
function gotoAdobeSite(event:MouseEvent):void
{
var adobeURL:URLRequest = new URLRequest("http://www.adobe.com/");
navigateToURL(adobeURL);
}
linkButton.addEventListener(MouseEvent.CLICK, gotoAdobeSite);
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
addChild (textTest);
Actividades
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.
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';
}
this.addEventListener(Event.ENTER_FRAME,controlaContacto)
car.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
car.addEventListener(MouseEvent.MOUSE_UP,soltar);
}
function soltar (m:MouseEvent):void
{
car.stopDrag();
}
9 Seleccione Control > Probar película y arrastre el clip de película car sobre area
para comprobar la detección de colisión.
Siempre que el recuadro de delimitación del coche tenga un punto de intersección
con el recuadro de delimitación del área, el estado es true.
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';
}
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.
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
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.
Si desea saber más acerca de estos temas, puede consultar las siguientes
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.
UNIDAD DE
APRENDIZAJE
3
SEMANA
11
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Contadores
• Acumuladores
• La Clase Timer
ACTIVIDADES PROPUESTAS
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.
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).
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)
El siguiente código agranda el ancho de un movie clip llamado azul cada 2 pixeles
azul. xscale+=2;
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.
//Le añadimos un listener para que vaya registrando cuantas repeticiones lleva
tiempo.addEventListener("timer", timerHandler);
function timerHandler(event:TimerEvent):void {
tiempo.start();
Actividades
El código es el siguiente:
var c:int=0
var z:int=0
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;
msj_txt.transform.colorTransform = myColor;
z=0
}
}
this.addEventListener(Event.ENTER_FRAME,controlaContacto)
car.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
car.addEventListener(MouseEvent.MOUSE_UP,soltar);
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
Autoevaluación
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
Resumen
Los contadores y acumuladores son variables numéricas que permiten .contar una
serie de procesos y acumular valores para obtener puntajes muy utiles a la hora de
diseñar juegos interactivos.
La clase Timer de AS3 tiene una gran ventaja sobre setInterval y es que podemos
indicarle como parametro cuantas veces queremos que ejeute la acción antes de
parar, con lo que no tendremos que eliminar el intervalo con clearInterval().
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://redribera.es/games/jugar_a_396_la-caza-del-pato-en-barco
Aquí hallará un juego creado en Flash.
http://www.redribera.es/formacion/tutoriales/viewfile.html?file=flgame1207-9.xml
En esta página, hallará un tutorial para crea un juego en Flash.
UNIDAD DE
APRENDIZAJE
3
SEMANA
13
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Efecto easing
• La clase Tween
• Filtros
ACTIVIDADES PROPUESTAS
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.
my_mc.x+=(300-my_m.x)*0.5;.
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.
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.*;
Donde:
import fl.transitions.*;
import fl.transitions.easing.*;
stage.frameRate = 31;
import fl.transitions.Tween;
import fl.transitions.easing.*;
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().
• 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:
import flash.filters.DropShadowFilter;
var myFilter:DropShadowFilter = new DropShadowFilter();
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DropShadowFilter;
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;
myDisplayObject.filters = filtersArray;
myDisplayObject.filters = null;
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:
myBitmapData.applyFilter(sourceBitmapData);
Actividades
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.
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");
//Captura del nombre del boton donde se hizo clic para cambiar posicion
//del movie clip foto
function posi (m:MouseEvent):void
{
if(m.currentTarget.name=="instance3")
posX=600;
else if(m.currentTarget.name=="instance5")
posX=300;
else if(m.currentTarget.name=="instance7")
posX=0;
else if(m.currentTarget.name=="instance9")
posX=-300
}
4. Ejecute su película
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.
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());
filtersCopy.push(new DropShadowFilter());
// Aplicar los cambios reasignando la matriz a la propiedad filters.
myDisplayObject.filters = filtersCopy;
}
myDisplayObject.addEventListener(MouseEvent.CLICK, addFilters);
import flash.display.Shape;
import flash.events.TimerEvent;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
import flash.filters.DropShadowFilter;
import flash.filters.GlowFilter;
import flash.filters.GradientBevelFilter;
import flash.utils.Timer;
var count:Number = 1;
var distance:Number = 8;
var angleInDegrees:Number = 225; // opuesto de 45 grados
var colors:Array = [0xFFFFCC, 0xFEFE78, 0x8F8E01];
var alphas:Array = [1, 0, 1];
var ratios:Array = [0, 128, 255];
var blurX:Number = 8;
var blurY:Number = 8;
var strength:Number = 1;
var quality:Number = BitmapFilterQuality.HIGH;
var type:String = BitmapFilterType.INNER;
var knockout:Boolean = false;
cautionLight.graphics.endFill();
function trafficControl(event:TimerEvent):void
{
if (count == 4)
{
count = 1;
}
switch (count)
{
case 1:
stopLight.filters = [innerShadow];
cautionLight.filters = [yellowGlow];
goLight.filters = [innerShadow];
break;
case 2:
stopLight.filters = [redGlow];
cautionLight.filters = [innerShadow];
goLight.filters = [innerShadow];
break;
case 3:
stopLight.filters = [innerShadow];
cautionLight.filters = [innerShadow];
goLight.filters = [greenGlow];
break;
}
count++;
}
Autoevaluación
Resumen
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://www.cristalab.com/tips/movimientos-dinamicos-con-la-clase-tween-en-
actionscript-3-c42258l/
Aquí hallará Movimientos dinámicos con la Clase Tween en ActionScript 3
.
http://www.esedeerre.com/ejemplo/4/48/utilizacion-de-filtros-en-actionscript-30
En esta página, hallará cómo utilizar los 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.
UNIDAD DE
APRENDIZAJE
3
SEMANA
14
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Audio
ACTIVIDADES PROPUESTAS
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.
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.
Evento Descripción
open (Event.OPEN) Se distribuye antes de que se inicie la
operación de carga del sonido.
channel = snd.play(pausePosition);
Actividades
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.
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();
}
Autoevaluación
El siguiente reproductor de audio con Flash debe permitir controlar el flujo del audio de
cada archivo seleccionado.
Resumen
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://jestudio.cl/blog/distintas-maneras-de-crear-un-preloader-as3-parte-1/
Distintas maneras de crear un Preloader con actionscript 3.0.
http://www.republicofcode.com/tutorials/flash/as3sound/
Aquí hallará un tutorial para insertar sonidos con actionscript 3.0.
UNIDAD DE
APRENDIZAJE
3
SEMANA
15
EL LENGUAJE ACTIONSCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
TEMARIO
• Video
• Precargas
• Métodos básicos
• Precarga con componente ProgressBar
• Precarga con código ActionScript
ACTIVIDADES PROPUESTAS
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.
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.
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.
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.
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)
Objeto.getBytesLoaded()
cargados = _root.getBytesLoaded()
Objeto.getBytesTotal()
if (cargados == total) {
//Hacer que se deje de ejecutar esta función llamada cargando
clearInterval(hiloPrecarga);
//Iniciar la película
play();
}
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 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"
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).
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.
Actividades
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();
function asyncErrorHandler(event:AsyncErrorEvent):void
{
// omitir error
}
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();
}
Autoevaluación
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
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.
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas.
http://jestudio.cl/blog/distintas-maneras-de-crear-un-preloader-as3-parte-1/
Distintas maneras de crear un Preloader con actionscript 3.0.
http://www.videoaprende.com/?p=77
Aquí hallará un tutorial para insertar videos con actionscript 3.0.