Curso: Diseño y Programación en Flash (UNED) – Práctica Completa::Versión de Flash::Adobe Flash CS3 Professional::Lenguaje...
Estructura principal de la AplicaciónLa aplicación consta de tres áreas principales. En la zona 1 se carga un menú de nave...
Menú de navegación horizontal MNHLos ítems de este menú se cargan a través de un fichero XML (HNav_Menu.xml). De esta form...
//----------------------------------------------------------------------------posicionar = function():Void{       if(t <= ...
Bloque PresentaciónNada más iniciar la aplicación (index.swf), se carga el fichero externo presenta.swf en la zona devisua...
nombre01_mc.setMask(mask_nombre01_mc);nombre02_mc.setMask(mask_nombre02_mc);apellido01_mc.setMask(mask_apellido01_mc);apel...
Sección “Ofimática”Los contenidos de la sección de “Ofimática” están organizados y accesibles mediante un menú verticalcre...
Menú de tipo Acordeónimport mx.core.View;import mx.controls.Label;import mx.controls.Button;if(objSP01){       objSP01.rem...
//SEGUNDO BLOQUE       //----------------------------------------------------------------------       menu_acc.createChild...
Árbol de contenido – Componente Tree 2Para la organización de contenidos en una estructura de tipo árbol donde se pueden c...
arbolWriter.xml<?xml version="1.0" encoding="UTF-8"?><nodo label = "Introducción a OpenOffice Writer" >        <nodo label...
Efecto mostrar imagen (cuadricular-descuadricular) 3En la mayor parte de las áreas no hay contenido disponible y en alguna...
Bloque o barra de Navegación Inferior (Zona 3)La zona 3 contiene un bloque o barra inferior que agrupa una serie de funcio...
Como interfaz de video se ha utilizado el skin ArcticExternalAll.         Pinchando en este botón accedemos a una zona don...
Accedemos a los recursos web de cada categoría a través de botones de opción (componentesRadioButton), agrupados bajo el m...
Barra de Progreso (componente ProgressBar)Se ha asociado a la zona principal de visualización de contenidos (clip::seccion...
Próxima SlideShare
Cargando en…5
×

Práctica Completa en Flash – ActionScript

3.245 visualizaciones

Publicado el

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(ActionScript), que permite clasificar y acceder a una serie de prácticas resueltas relacionadas con materias informáticas. En esta práctica se utilizan componentes (Accordion, Button, ProgressBar, RadioButton, ScrollPane, Tree, MediaDisplay, MediaController, Window,…), loadMovie, #include (.as), import (class), clips de película, audio y video, capas máscara y guía, etc.

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
3.245
En SlideShare
0
De insertados
0
Número de insertados
737
Acciones
Compartido
0
Descargas
79
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Práctica Completa en Flash – ActionScript

  1. 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ónEl 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 resueltasrelacionadas con materias informáticas. bitCoach::Juan Bautista Cascallar Lorenzo::Página 1
  2. 2. Estructura principal de la AplicaciónLa 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ículaexterna correspondiente (loadMovie) a cada sección. Finalmente la zona 3 contiene un bloque o barrainferior que agrupa una serie de funcionalidades en un clip de película. 1 2 3 bitCoach::Juan Bautista Cascallar Lorenzo::Página 2
  3. 3. Menú de navegación horizontal MNHLos ítems de este menú se cargan a través de un fichero XML (HNav_Menu.xml). De esta formaactualizando 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 medianteloadMovie 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ásicamentese 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 elsegmento o rectángulo gris debajo de la opción seleccionada y se actualiza la información en el recuadro detexto mostrando el ítem seleccionado.El código implementa sobre cada ítem del menú, además del evento onPress, los eventos onRollOver yonRollOut de forma que al situar el cursor del ratón sobre un ítem del menú, el texto se pondrá en negritahasta que retiremos el cursor.//----------------------------------------------------------------------------var t=0Rastro_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 functionmenuXml.load("HNav_Menu/HNav_Menu.xml"); bitCoach::Juan Bautista Cascallar Lorenzo::Página 3
  4. 4. //----------------------------------------------------------------------------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 posicionaaraplicarFormato = 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); }} bitCoach::Juan Bautista Cascallar Lorenzo::Página 4
  5. 5. Bloque PresentaciónNada más iniciar la aplicación (index.swf), se carga el fichero externo presenta.swf en la zona devisualización (secciones_mc). El bloque de presentación, el cual se ejecutará una única vez al iniciar laaplicación, incluye tres efectos. En la animación 1 aparece el nombre y apellidos con un efecto máscara. Laanimación 2 crea unas pompas de jabón que van ascendiendo y dispersándose por la pantalla. Laanimación 3 muestra un logo flash con efecto alpha. presenta.swf 1 2 3Efecto 1 – MáscaraBásicamente el efecto se consigue desplazando mediante ActionScript los clips (rectángulos de color verde)de las capas máscara en las direcciones indicadas. bitCoach::Juan Bautista Cascallar Lorenzo::Página 5
  6. 6. 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ónBásicamente se crean un número de burbujas determinado por maxGlobos, en este caso 100 llamandocada 30 milisegundos (setInterval) a la función creaGlobo(). En el cuerpo de esta función se implementa lafuncionalidad 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 laspropiedades 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 alphalogo_flash_mc.onEnterFrame = function() { if(this._alpha < 70){ this._alpha += 2; }else { // eliminamos el loop delete this.onEnterFrame; }} bitCoach::Juan Bautista Cascallar Lorenzo::Página 6
  7. 7. Sección “Ofimática”Los contenidos de la sección de “Ofimática” están organizados y accesibles mediante un menú verticalcreado a partir de una instancia del componente Accordion 1. La ventaja de este componente, configuradocomo menú, es que nos permite mostrar u ocultar grupos de ítems en secciones pinchando en la pestañacorrespondiente. 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 (eventoonPress) en cada uno de ellos. Por ejemplo, cuando pinchamos en el botón "WRITER - Procesador detextos" iremos al fotograma etiquetado como “writer”, mediante gotoAndStop("writer"), que visualiza elcontenido asociado. Lo mismo para los demás ítems del menú. El contenido se carga en un componente detipo 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 bitCoach::Juan Bautista Cascallar Lorenzo::Página 7
  8. 8. Menú de tipo Acordeónimport 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"); } bitCoach::Juan Bautista Cascallar Lorenzo::Página 8
  9. 9. //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;}//--------------------------------------------------------------------------- bitCoach::Juan Bautista Cascallar Lorenzo::Página 9
  10. 10. Árbol de contenido – Componente Tree 2Para la organización de contenidos en una estructura de tipo árbol donde se pueden contraer y expandirsecciones, se ha configurado un componente de tipo Tree que se carga mediante un fichero XML. 2import mx.controls.Tree;this.createClassObject(mx.controls.Tree, "mnuTreeWriter", 1);mnuTreeWriter.setSize(0,0);//Cargamos el XMLxmlTree = 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"); }} bitCoach::Juan Bautista Cascallar Lorenzo::Página 10
  11. 11. 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> bitCoach::Juan Bautista Cascallar Lorenzo::Página 11
  12. 12. Efecto mostrar imagen (cuadricular-descuadricular) 3En la mayor parte de las áreas no hay contenido disponible y en algunas de estas áreas se ha incluido unaanimación donde una imagen va apareciendo “pixel a pixel” (en realidad cuadrito a cuadrito) hasta que semuestre por completo. 3arrayCuadritos = 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); bitCoach::Juan Bautista Cascallar Lorenzo::Página 12
  13. 13. 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 clipde 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 lasecció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 ventananueva 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 mediaque se va descargando), creado en principio con el programa CamStudio (formato .avi) y luego importadoa 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);} bitCoach::Juan Bautista Cascallar Lorenzo::Página 13
  14. 14. 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 webcomo direcciones ULR, videotutoriales YouTube, página oficiales de ayuda online, Blogs de Expertos, Wikistemáticas, …, que sirvan de consulta para una mejor comprensión de las prácticas resueltas pertenecientesa cada una de las categorías. bitCoach::Juan Bautista Cascallar Lorenzo::Página 14
  15. 15. Accedemos a los recursos web de cada categoría a través de botones de opción (componentesRadioButton), agrupados bajo el mismo nombre groupName::radioGrupoWebgrafia. Dependiendo de laopción que seleccionemos se visualizará en un componente de tipo ScrollPane el clip de peliculacorrespondiente 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 delos componentes MediaDisplay:: miReproductor y MediaController:: miControlador.//La ruta al archivo que deseamos reproducirmiReproductor.contentPath = "musica_fondo.mp3";//asociamos el reproductor al controladormiReproductor.associateController(miControlador);//Expandimos los controlesmiControlador.controllerPolicy = "on";miControlador._width = 140;miControlador._height = 35;miControlador._x = 390;miControlador._y = 3.4; bitCoach::Juan Bautista Cascallar Lorenzo::Página 15
  16. 16. Barra de Progreso (componente ProgressBar)Se ha asociado a la zona principal de visualización de contenidos (clip::secciones_mc) una barra deprogreso para que muestre el progreso de carga de contenido sobre todo cuando el contenido es de grantamaño y pueda retrasar la ejecución de la aplicación. Para probar el funcionamiento de la barra deprogreso 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 quepueda 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.} bitCoach::Juan Bautista Cascallar Lorenzo::Página 16

×