Práctica Completa en Flash – ActionScript

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.

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

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:
break;
case 2:
break;
default:
}//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;
}else if(this._parent.etiqueta_txt.text == "Redes"){
_root.localizacion_txt.text = "Redes";
Rastro_mc._x = 186;
}else if(this._parent.etiqueta_txt.text == "Diseño"){
_root.localizacion_txt.text = "Diseño";
Rastro_mc._x = 240;
}
}//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"){
}else if(p._parent.etiqueta_txt.text == "Redes"){
}else if(p._parent.etiqueta_txt.text == "Diseño"){
}
}


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.

presenta.swf

1 2

3

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.


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

menu_acc.seccion1.s1_boton2.label = "DRAW - Dibujo";
menu_acc.seccion1.s1_boton2.setSize(198,30);
_root.localizacion_txt.text = "Ofimática -> OpenOffice -> Draw";
gotoAndStop("draw");
}

menu_acc.seccion1.s1_boton3.label = "IMPRESS - Presentaciones";
_root.localizacion_txt.text = "Ofimática -> OpenOffice -> Impress";
gotoAndStop("impress");
}

menu_acc.seccion1.s1_boton4.label = "CALC - Hoja de Cálculo";
_root.localizacion_txt.text = "Ofimática -> OpenOffice -> Calc";
gotoAndStop("calc");
}

menu_acc.seccion1.s1_boton5.label = "BASE - Base de Datos";
_root.localizacion_txt.text = "Ofimática -> OpenOffice -> Base";
gotoAndStop("base");
}


//SEGUNDO BLOQUE
//----------------------------------------------------------------------
menu_acc.createChild(View, "seccion2", {label:"Microsoft Office"});

with(menu_acc.seccion2.s2_boton1){
label = "WORD - Procesador de textos";
setSize(198,30);
}
_root.texto.text="WORD";
_root.localizacion_txt.text = "Ofimática -> MS Office -> Word";
gotoAndStop("word");

}

menu_acc.seccion2.s2_boton2.label = "ACCESS - Base de Datos";
_root.texto.text="ACCESS";
_root.localizacion_txt.text = "Ofimática -> MS Office -> Access";
gotoAndStop("access");
}

menu_acc.seccion2.s2_boton3.label = "EXCEL - Hoja de Cálculo";
_root.texto.text="EXCEL";
_root.localizacion_txt.text = "Ofimática -> MS Office -> Excel";
gotoAndStop("excel");
}

menu_acc.seccion2.s2_boton4.label = "POWERPOINT - Presentaciones";
_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.

2

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


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>

<nodo label = "Ingreso y edición de texto" >
</nodo>

<nodo label = "Formateo de texto" >
</nodo>

<nodo label = "Manejo de Imágenes en el texto" >
</nodo>

<nodo label = "Configuración de página e impresión de texto" >
</nodo>

<nodo label = "Uso de Tablas" >
</nodo>

<nodo label = "Combinar correspondencia" >
</nodo>

<nodo label = "Configuración de OpenOffice Writer" >
</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.

3

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


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"


_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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a Práctica Completa en Flash – ActionScript

Semelhante a Práctica Completa en Flash – ActionScript (20)

Mais de jubacalo

Mais de jubacalo (7)

Último

Último (20)

Práctica Completa en Flash – ActionScript