práctica completa en flash – actionscript

bitCoach::Juan Bautista Cascallar Lorenzo::Página 1

Curso: Diseño y Programación en Flash (UNED) – Práctica Completa ::Versión de Flash::Adobe Flash CS3 Professional

::Lenguaje de Programación::ActionScript 2.0

::Técnicas y recursos utilizados::

::Componentes:: Accordion, Button, ProgressBar, RadioButton, ScrollPane, Tree, MediaDisplay,

MediaController, Window, etc.

::Video:: CamStudio (herramienta para grabar la actividad de la pantalla del PC a un archivo .AVI o

.SWF), Importar e implementar video streaming.

::Audio:: Reproducir y controlar música.

::Capas Máscara y Capas Guía::

:: loadMovie:: Fragmentación de la aplicación en varios archivos externos con el fin de reducir peso

y tiempos de carga.

:: Clip de Película (MovieClip)::Crear piezas de animación reutilizables con sus propias líneas de

tiempo.

::XML:: Implementación de archivos XML para la carga de los ítems de los menús de navegación

horizontal y vertical, así como para la carga de los componentes Tree.

::#include:: Cargar ActionScript fuera de la película usando un archivo .as con el fin de reutilizar

bloques de código.

::import:: POO. Separar la funcionalidad que queremos realizar y almacenarla en clases

independientes de forma que podamos instanciar (crear objetos de dicha clase) desde diferentes

sitios.

Introducción El objetivo de esta práctica es aplicar de forma integral los aspectos básicos de flash en una aplicación web,

realizada totalmente en flash, que permite clasificar y acceder a una serie de prácticas resueltas

relacionadas con materias informáticas.


Estructura principal de la Aplicación La aplicación consta de tres áreas principales. En la zona 1 se carga un menú de navegación horizontal

(MNH) a través de cuyos ítems se accede a los bloques de carácter más global de la aplicación (Ofimática,

Programación, Redes,…). En la zona 2 se cargará, según la opción de menú MNH seleccionada, la película

externa correspondiente (loadMovie) a cada sección. Finalmente la zona 3 contiene un bloque o barra

inferior que agrupa una serie de funcionalidades en un clip de película.

1

2

3


Menú de navegación horizontal MNH Los ítems de este menú se cargan a través de un fichero XML (HNav_Menu.xml). De esta forma

actualizando este fichero podremos añadir más secciones al menú. El fichero xml contiene los títulos de los

ítems que formarán el menú así como las rutas a los ficheros .swf externos que se cargarán mediante

loadMovie dependiendo de la opción seleccionada.

HNav_Menu.xml

<?xml version="1.0" encoding="UTF-8"?> <menu> <item titulo="Ofimática" src="Ofimatica/mainmsoffice.swf"/> <item titulo="Programación" src="Programacion/mainprogramacion.swf"/> <item titulo="Redes" src="Redes/mainredes.swf"/> <item titulo="Diseño" src="Diseno/maindiseno.swf"/> </menu>

A continuación se añade el código ActionScript que nos permite cargar y operar con el menú. Básicamente

se carga y se procesa el fichero XML, se posicionan los ítems del menú y en función de la opción de menú

que seleccionemos se cargará el fichero .swf externo correspondiente en el área de visualización

(clip::seccioness_mc). Otras cosas que ocurren al pulsar en una opción del menú es que se posiciona el

segmento o rectángulo gris debajo de la opción seleccionada y se actualiza la información en el recuadro de

texto mostrando el ítem seleccionado.

El código implementa sobre cada ítem del menú, además del evento onPress, los eventos onRollOver y

onRollOut de forma que al situar el cursor del ratón sobre un ítem del menú, el texto se pondrá en negrita

hasta que retiremos el cursor.

//---------------------------------------------------------------------------- var t=0 Rastro_mc._x = 38; myTextFormat = new TextFormat(); //---------------------------------------------------------------------------- menuXml = new XML(); menuXml.ignoreWhite = true; menuXml.onLoad = function(exito) { if (exito) { menuItem = menuXml.firstChild.childNodes; for (var i = 0; i < menuItem.length; i++) { TITULO = menuItem[i].attributes.titulo; SRC = menuItem[i].attributes.src; posicionar(); }//Fin for }//Fin if }//Fin function menuXml.load("HNav_Menu/HNav_Menu.xml");


//---------------------------------------------------------------------------- posicionar = function():Void{ if(t <= menuItem.length){ this.attachMovie("item_mc", "item_mc"+t, t); switch (t) { case 0: this["item_mc"+t]._x = 10; break; case 1: this["item_mc"+t]._x = 80; break; case 2: this["item_mc"+t]._x = 170; break; default: this["item_mc"+t]._x = 220; }//fin del switch //--- this["item_mc"+t]._y = 15; this["item_mc"+t].pelicula = SRC; this["item_mc"+t].etiqueta_txt.text = TITULO; //--- //BOTONES - ONPRESS this["item_mc"+t].Rectangulo_btn.onPress = function(){ if(this._parent.etiqueta_txt.text == "Ofimática"){ _root.localizacion_txt.text = "Ofimática"; Rastro_mc._x = 38; loadMovie(this._parent.pelicula,_root.secciones_mc); barraProgreso_secciones_mc(); }else if(this._parent.etiqueta_txt.text == "Programación"){ _root.localizacion_txt.text = "Programación"; Rastro_mc._x = 118; loadMovie(this._parent.pelicula,_root.secciones_mc); barraProgreso_secciones_mc(); }else if(this._parent.etiqueta_txt.text == "Redes"){ _root.localizacion_txt.text = "Redes"; Rastro_mc._x = 186; loadMovie(this._parent.pelicula,_root.secciones_mc); barraProgreso_secciones_mc(); }else if(this._parent.etiqueta_txt.text == "Diseño"){ _root.localizacion_txt.text = "Diseño"; Rastro_mc._x = 240; loadMovie(this._parent.pelicula,_root.secciones_mc); barraProgreso_secciones_mc(); } }//Fin function //BOTONES - ONROLLOVER this["item_mc"+t].Rectangulo_btn.onRollOver = function(){ myTextFormat.bold = true; aplicarFormato(this); }//Fin function //BOTONES - ONROLLOUT this["item_mc"+t].Rectangulo_btn.onRollOut = function(){ myTextFormat.bold = false; aplicarFormato(this); }//Fin function t++; }//Fin if }//Fin function posicionaar aplicarFormato = function(p:Button):Void{ if(p._parent.etiqueta_txt.text == "Ofimática"){ p._parent.etiqueta_txt.setTextFormat(myTextFormat); }else if(p._parent.etiqueta_txt.text == "Programación"){ p._parent.etiqueta_txt.setTextFormat(myTextFormat); }else if(p._parent.etiqueta_txt.text == "Redes"){ p._parent.etiqueta_txt.setTextFormat(myTextFormat); }else if(p._parent.etiqueta_txt.text == "Diseño"){ p._parent.etiqueta_txt.setTextFormat(myTextFormat); } }


Bloque Presentación

Nada más iniciar la aplicación (index.swf), se carga el fichero externo presenta.swf en la zona de

visualización (secciones_mc). El bloque de presentación, el cual se ejecutará una única vez al iniciar la

aplicación, incluye tres efectos. En la animación 1 aparece el nombre y apellidos con un efecto máscara. La

animación 2 crea unas pompas de jabón que van ascendiendo y dispersándose por la pantalla. La

animación 3 muestra un logo flash con efecto alpha.

Efecto 1 – Máscara Básicamente el efecto se consigue desplazando mediante ActionScript los clips (rectángulos de color verde)

de las capas máscara en las direcciones indicadas.

1 2

3

presenta.swf


nombre01_mc.setMask(mask_nombre01_mc); nombre02_mc.setMask(mask_nombre02_mc); apellido01_mc.setMask(mask_apellido01_mc); apellido02_mc.setMask(mask_apellido02_mc); i = 5; _root.onEnterFrame = function (){ if(mask_nombre01_mc._y < (-38)){ mask_nombre01_mc._y = mask_nombre01_mc._y + i; } if(mask_nombre02_mc._x < 10){ mask_nombre02_mc._x = mask_nombre02_mc._x + i; } if(mask_apellido01_mc._y < (-13)){ mask_apellido01_mc._y = mask_apellido01_mc._y + i; } if(mask_apellido02_mc._x < 100){ mask_apellido02_mc._x = mask_apellido02_mc._x + i; } }

Efecto 2 – Pompas de jabón

Básicamente se crean un número de burbujas determinado por maxGlobos, en este caso 100 llamando

cada 30 milisegundos (setInterval) a la función creaGlobo(). En el cuerpo de esta función se implementa la

funcionalidad para crear un duplicado del clip de película que representa la pompa de jabón

(duplicateMovieClip) y configurar aleatoriamente el desplazamiento y tamaño de la burbuja mediante las

propiedades del clip _x (coordenada x del clip), _y (coordenada y del clip), _xscale (escala horizontal) y

_yscale (escala vertical).

maxGlobos = 100; // Máximo de Globos que se crean. nivel = 1; //Llama a la función "creaGlobo" cada 30 milisegundos. otroGlobo = setInterval(creaGlobo,30); //--Función que crea una burbuja----------------------- function creaGlobo() { nivel++; nivelglobon++; duplicateMovieClip (globo, "globo"+nivel, nivel); u= random(80); w = random(150); sx = random(120)+35; setProperty ("globo"+nivel, _x,250+w); setProperty ("globo"+nivel, _y,400+u); setProperty ("globo"+nivel, _xscale,sx); setProperty ("globo"+nivel, _yscale,sx); if(nivel == maxGlobos){ //Elimina el setInterval para que no siga llamando a la función "creaGlobo". clearInterval(otroGlobo); } }

Efecto 3 – Logo flash con efecto alpha

logo_flash_mc.onEnterFrame = function() { if(this._alpha < 70){ this._alpha += 2; }else { // eliminamos el loop delete this.onEnterFrame; } }


Sección “Ofimática”

Los contenidos de la sección de “Ofimática” están organizados y accesibles mediante un menú vertical

creado a partir de una instancia del componente Accordion 1. La ventaja de este componente, configurado

como menú, es que nos permite mostrar u ocultar grupos de ítems en secciones pinchando en la pestaña

correspondiente. Para añadir los ítems de menú a cada sección se han creado e incorporado botones

(componentes tipo Button), de forma que accederemos a los distintos contenidos pinchando (evento

onPress) en cada uno de ellos. Por ejemplo, cuando pinchamos en el botón "WRITER - Procesador de

textos" iremos al fotograma etiquetado como “writer”, mediante gotoAndStop("writer"), que visualiza el

contenido asociado. Lo mismo para los demás ítems del menú. El contenido se carga en un componente de

tipo ScrollPane, por ejemplo, objSP01.contentPath = "writer_mc".

if(!objSP01){

this.createClassObject(mx.containers.ScrollPane, "objSP01", 1);

}

objSP01.move(209.3, 0);

objSP01.setSize(530, 425);

objSP01.contentPath = "writer_mc";

mainmsoffice.swf

1

2


Menú de tipo Acordeón import mx.core.View; import mx.controls.Label; import mx.controls.Button; if(objSP01){ objSP01.removeMovieClip(); } /*======================================================================= MENÚ ACCORDION =======================================================================*/ stop(); _global.acc = true; if(acc==true){ menu_acc.setSize(200, 300); menu_acc.move(0,0); //PRIMER BLOQUE //---------------------------------------------------------------------- menu_acc.createChild(View, "seccion1", {label:"OpenOffice"}); //Sección 1 - Item 1 menu_acc.seccion1.createChild(Button, "s1_boton1", {_x:0, _y:0}); with(menu_acc.seccion1.s1_boton1){ label = "WRITER - Procesador de textos"; setSize(198,30); } menu_acc.seccion1.s1_boton1.onPress = function () { _root.localizacion_txt.text = "Ofimática -> OpenOffice -> Writer"; gotoAndStop("writer"); } //Sección 1 - Item 2 menu_acc.seccion1.createChild(Button, "s1_boton2", {_x:0, _y:30}); menu_acc.seccion1.s1_boton2.label = "DRAW - Dibujo"; menu_acc.seccion1.s1_boton2.setSize(198,30); menu_acc.seccion1.s1_boton2.onPress = function () { _root.localizacion_txt.text = "Ofimática -> OpenOffice -> Draw"; gotoAndStop("draw"); } //Sección 1 - Item 3 menu_acc.seccion1.createChild(Button, "s1_boton3", {_x:0, _y:60}); menu_acc.seccion1.s1_boton3.label = "IMPRESS - Presentaciones"; menu_acc.seccion1.s1_boton3.setSize(198,30); menu_acc.seccion1.s1_boton3.onPress = function () { _root.localizacion_txt.text = "Ofimática -> OpenOffice -> Impress"; gotoAndStop("impress"); } //Sección 1 - Item 4 menu_acc.seccion1.createChild(Button, "s1_boton4", {_x:0, _y:90}); menu_acc.seccion1.s1_boton4.label = "CALC - Hoja de Cálculo"; menu_acc.seccion1.s1_boton4.setSize(198,30); menu_acc.seccion1.s1_boton4.onPress = function () { _root.localizacion_txt.text = "Ofimática -> OpenOffice -> Calc"; gotoAndStop("calc"); } //Sección 1 - Item 5 menu_acc.seccion1.createChild(Button, "s1_boton5", {_x:0, _y:120}); menu_acc.seccion1.s1_boton5.label = "BASE - Base de Datos"; menu_acc.seccion1.s1_boton5.setSize(198,30); menu_acc.seccion1.s1_boton5.onPress = function () { _root.localizacion_txt.text = "Ofimática -> OpenOffice -> Base"; gotoAndStop("base"); }


//SEGUNDO BLOQUE //---------------------------------------------------------------------- menu_acc.createChild(View, "seccion2", {label:"Microsoft Office"}); //Sección 2 - Item 1 menu_acc.seccion2.createChild(Button, "s2_boton1", {_x:0, _y:0}); with(menu_acc.seccion2.s2_boton1){ label = "WORD - Procesador de textos"; setSize(198,30); } menu_acc.seccion2.s2_boton1.onPress = function () { _root.texto.text="WORD"; _root.localizacion_txt.text = "Ofimática -> MS Office -> Word"; gotoAndStop("word"); } //Sección 2 - Item 2 menu_acc.seccion2.createChild(Button, "s2_boton2", {_x:0, _y:30}); menu_acc.seccion2.s2_boton2.label = "ACCESS - Base de Datos"; menu_acc.seccion2.s2_boton2.setSize(198,30); menu_acc.seccion2.s2_boton2.onPress = function () { _root.texto.text="ACCESS"; _root.localizacion_txt.text = "Ofimática -> MS Office -> Access"; gotoAndStop("access"); } //Sección 2 - Item 3 menu_acc.seccion2.createChild(Button, "s2_boton3", {_x:0, _y:60}); menu_acc.seccion2.s2_boton3.label = "EXCEL - Hoja de Cálculo"; menu_acc.seccion2.s2_boton3.setSize(198,30); menu_acc.seccion2.s2_boton3.onPress = function () { _root.texto.text="EXCEL"; _root.localizacion_txt.text = "Ofimática -> MS Office -> Excel"; gotoAndStop("excel"); } //Sección 2 - Item 4 menu_acc.seccion2.createChild(Button, "s2_boton4", {_x:0, _y:90}); menu_acc.seccion2.s2_boton4.label = "POWERPOINT - Presentaciones"; menu_acc.seccion2.s2_boton4.setSize(198,30); menu_acc.seccion2.s2_boton4.onPress = function () { _root.texto.text="POWERPOINT"; _root.localizacion_txt.text = "Ofimática -> MS Office -> PowerPoint"; gotoAndStop("powerpoint"); } //--------------------------------------------------------------------------- // Crear un objeto detector nuevo. var menu_accListener:Object = new Object(); menu_accListener.change = function() { // Asignar etiqueta de panel secundario a la variable. var selectedChild_str:String = menu_acc.selectedChild.label; // Llevar a cabo acciones según el elemento secundario seleccionado. switch (selectedChild_str) { case "OpenOffice": //trace("Has seleccionado la opción1"); _root.localizacion_txt.text = "Ofimática -> OpenOffice"; gotoAndStop("openoffice"); break; case "Microsoft Office": //trace("Has seleccionado la opción2"); _root.localizacion_txt.text = "Ofimática -> MS Office"; gotoAndStop("msoffice"); break; } } menu_acc.addEventListener("change", menu_accListener); acc=false; } //---------------------------------------------------------------------------


Árbol de contenido – Componente Tree 2

Para la organización de contenidos en una estructura de tipo árbol donde se pueden contraer y expandir

secciones, se ha configurado un componente de tipo Tree que se carga mediante un fichero XML.

import mx.controls.Tree; this.createClassObject(mx.controls.Tree, "mnuTreeWriter", 1); mnuTreeWriter.setSize(0,0); //Cargamos el XML xmlTree = new XML(); xmlTree.ignoreWhite = true; xmlTree.onLoad = function(success) { if (success) { //Propiedades mnuTreeWriter.setSize(365, 190); mnuTreeWriter._x = 13; mnuTreeWriter._y = 145; //ESTILOS DEL COMPONENTE mnuTreeWriter.vScrollPolicy = "auto"; // use "on", "off" or "auto" mnuTreeWriter.setStyle("openEasing", mx.transitions.easing.Back.easeOut); mnuTreeWriter.setStyle("borderStyle","none"); mnuTreeWriter.setStyle("themeColor","haloOrange"); //Llenamos el menu mnuTreeWriter.dataProvider = xmlTree; //Eventos mnuTreeWriter.addEventListener("change", alSeleccionar); } } xmlTree.load("Ofimatica/OpenOffice/arbolWriter.xml"); alSeleccionar = new Object(); alSeleccionar.change = function(evento) { var seleccion = evento.target.selectedNode; //Si es una carpeta... if (mnuTreeWriter.getIsBranch(seleccion)){ //La cerramos si esta abierta if (mnuTreeWriter.getIsOpen(seleccion)){ mnuTreeWriter.setIsOpen(seleccion, false, true); } //La abrimos si esta cerrada else{ mnuTreeWriter.setIsOpen(seleccion, true, true); } } //Si es un vínculo... else{ getURL(seleccion.attributes.dirurl, "_blank"); } }

2


arbolWriter.xml <?xml version="1.0" encoding="UTF-8"?> <nodo label = "Introducción a OpenOffice Writer" > <nodo label = "Práctica 1 - Título de la práctica 01 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 2 - Título de la práctica 02 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 3 - Título de la práctica 03 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Ingreso y edición de texto" > <nodo label = "Práctica 4 - Título de la práctica 04 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 5 - Título de la práctica 05 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 6 - Título de la práctica 06 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Formateo de texto" > <nodo label = "Práctica 7 - Título de la práctica 07 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 8 - Título de la práctica 08 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 9 - Título de la práctica 09 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Manejo de Imágenes en el texto" > <nodo label = "Práctica 10 - Título de la práctica 10 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 11 - Título de la práctica 11 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 12 - Título de la práctica 12 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Configuración de página e impresión de texto" > <nodo label = "Práctica 13 - Título de la práctica 13 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 14 - Título de la práctica 14 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 15 - Título de la práctica 15 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Uso de Tablas" > <nodo label = "Práctica 16 - Título de la práctica 16 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 17 - Título de la práctica 17 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 18 - Título de la práctica 18 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Combinar correspondencia" > <nodo label = "Práctica 19 - Título de la práctica 19 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 20 - Título de la práctica 20 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 21 - Título de la práctica 21 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo> <nodo label = "Configuración de OpenOffice Writer" > <nodo label = "Práctica 22 - Título de la práctica 22 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 23 - Título de la práctica 23 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> <nodo label = "Práctica 24 - Título de la práctica 24 (tipo fichero: pdf)" dirurl="Ofimatica/OpenOffice/practXXwriter.pdf" /> </nodo>


Efecto mostrar imagen (cuadricular-descuadricular) 3

En la mayor parte de las áreas no hay contenido disponible y en algunas de estas áreas se ha incluido una

animación donde una imagen va apareciendo “pixel a pixel” (en realidad cuadrito a cuadrito) hasta que se

muestre por completo.

arrayCuadritos = new Array(); function cuadricular(){ h = 0; v = 1; for(cont=0;cont<1995;cont++){ arrayCuadritos[cont] = this.cuadro_mc.duplicateMovieClip("cuadrito"+cont, cont); if((cont%95) == 0){ h = 0; v++; } arrayCuadritos[cont]._x = 5 * h; arrayCuadritos[cont]._y = 5 * v; h++; } } cuadricular(); bandear = true; function descuadricular(){ longitud = arrayCuadritos.length; posicion = Math.floor (Math.random () * longitud); if(longitud > 0){ arrayCuadritos[posicion].removeMovieClip(); arrayCuadritos.splice(posicion,1); //trace(arrayCuadritos.length); }else{ clearInterval(intervalId); } } intervalId = setInterval(this, "descuadricular", 1);

3


Bloque o barra de Navegación Inferior (Zona 3) La zona 3 contiene un bloque o barra inferior que agrupa una serie de funcionalidades agrupadas en un clip

de película.

Estos dos botones permiten mostrar u ocultar la barra de iconos inferior. on(press){ _root.barraInferior_mc._visible = false; }

Pinchando en este botón regresamos al “Home” de la aplicación independientemente de la

sección en la que nos encontremos en cada momento.

on(press){ _root.gotoAndStop(1);

loadMovie("Ofimatica/mainmsoffice.swf", _root.secciones_mc); _root.mnuHorizontal_mc.Rastro_mc._x = 38; _root.localizacion_txt.text = "Ofimática"; }

Pinchando en este botón podremos leer este informe técnico en formato pdf en una ventana

nueva del navegador.

on(press){

getURL("informe_tecnico.pdf",_blank);

}

Pinchando en este botón podemos visualizar y escuchar en una ventana de tipo PopUp

(componente Window), la reproducción de un video, en modo Streaming (el video se reproduce a media

que se va descargando), creado en principio con el programa CamStudio (formato .avi) y luego importado

a flash donde se realiza una codificación/compresión a formato .flv (flash video).

on(press){ import mx.containers.Window; import mx.managers.PopUpManager; var ventana_video:MovieClip = PopUpManager.createPopUp(_root, Window, true, {_x:-500,contentPath:"videoExplicativo/video_explicativo.swf"}); //--- Cuando se completa la carga del PopUp --- alCrear = Object(); alCrear.complete = function(evento){ ventana_video.setSize(600,620); ventana_video._h ventana_video._x = 10; ventana_video._y = 10; ventana_video.closeButton = true; ventana_video.title = "VIDEO - FUNCIONAMIENTO DE LA APLICACIÓN"; } ventana_video.addEventListener("complete", alCrear); //--- Cuando hacemos clic en el botón para cerrar el PopUp --- alCerrar = Object(); alCerrar.click = function(evento){ evento.target.deletePopUp(); } ventana_video.addEventListener("click", alCerrar); }


Como interfaz de video se ha utilizado el skin ArcticExternalAll.

Pinchando en este botón accedemos a una zona donde se incluirán todo tipo de recursos web

como direcciones ULR, videotutoriales YouTube, página oficiales de ayuda online, Blogs de Expertos, Wikis

temáticas, …, que sirvan de consulta para una mejor comprensión de las prácticas resueltas pertenecientes

a cada una de las categorías.


Accedemos a los recursos web de cada categoría a través de botones de opción (componentes

RadioButton), agrupados bajo el mismo nombre groupName::radioGrupoWebgrafia. Dependiendo de la

opción que seleccionemos se visualizará en un componente de tipo ScrollPane el clip de pelicula

correspondiente con los contenidos.

/** - Componente RadioButton en la biblioteca - Componente ScrollPane en la biblioteca */ objSP02.contentPath = "ofimatica_mc"; // Crea objeto detector. var rbListener:Object = new Object(); rbListener.click = function(evt_obj:Object){ cad_opcion = evt_obj.target.selection; cad_opcion = substring(cad_opcion,22); if(cad_opcion == 'ofimatica_rb'){ objSP02.contentPath = "ofimatica_mc"; } if(cad_opcion == 'programacion_rb'){ objSP02.contentPath = "programacion_mc"; } if(cad_opcion == 'redes_rb'){ objSP02.contentPath = "redes_mc"; } if(cad_opcion == 'diseno_rb'){ objSP02.contentPath = "diseno_mc"; } } // Añadir detector. radioGrupoWebgrafia.addEventListener("click", rbListener);

En este caso se reproduce y controla un archivo de audio .mp3 mediante la configuración de

los componentes MediaDisplay:: miReproductor y MediaController:: miControlador.

//La ruta al archivo que deseamos reproducir miReproductor.contentPath = "musica_fondo.mp3"; //asociamos el reproductor al controlador miReproductor.associateController(miControlador); //Expandimos los controles miControlador.controllerPolicy = "on"; miControlador._width = 140; miControlador._height = 35; miControlador._x = 390; miControlador._y = 3.4;


Barra de Progreso (componente ProgressBar) Se ha asociado a la zona principal de visualización de contenidos (clip::secciones_mc) una barra de

progreso para que muestre el progreso de carga de contenido sobre todo cuando el contenido es de gran

tamaño y pueda retrasar la ejecución de la aplicación. Para probar el funcionamiento de la barra de

progreso se ha simulado una descarga a 56K(4.7 KB/s).

El bloque de código asociado a la barra de progreso se ha almacenado en un archivo .as de forma que

pueda incluirse desde cualquier ubicación mediante #include.

#include "FLA_includes/barraProgreso.as"

barraProgreso_secciones_mc(); _global.barraProgreso_secciones_mc = function():Void{ //Atacheamos el componente attachMovie("ProgressBar", "barraProgreso", 1); //Propiedades barraProgreso._x = 322; barraProgreso._y = 480; barraProgreso.mode = "polled"; barraProgreso.source = _root.secciones_mc; //Listener para cuando esta cargando el archivo swf externo en el movieClip secciones_mc var bpListener:Object = new Object(); bpListener.progress = function(evento) { barraProgreso.setProgress(getBytesLoaded, getBytesTotal); } //Listener para cuando se acaba de cargar el archivo swf externo. bpListener.complete = function(evento) { removeMovieClip(barraProgreso); } //Eventos barraProgreso.addEventListener("progress", bpListener ); //Mientras carga. barraProgreso.addEventListener("complete", bpListener ); //Al terminar la carga. }

práctica completa en flash – actionscript

Education