9. DisplayList o Lista de visualización

9. DisplayList o Lista de visualización

En AS3, todos los elementos se organizan en una estructura jerárquica. Donde se conocen 3 tipos de objetos.

Cualquier objeto gráfico puede pertenecer a uno o mas de estos grupos.

El escenario. Controlado por la clase Stage. eS el objeto raiz,del que cuelga el resto. Este objeto esta disponible para todos los elementos gráficos a través de la propiedad stage, y no puede ser instanciado directamente. Seguidamente a este se crea otro objeto sublcase de tipo Sprite.

Root. Sprite (No tiene línea de tiempo) | Movieclip (tiene línea de tiempo). Su equivalente en nombre de instancia sería root.

NOTA: Este será accesible como root. Anteriormente en AS1 y AS2, no era aconsejable usar root, pero con AS3 se puede usar!!.

Elementos gráficos. Son controlados por la clase DisplayObject, En AS3 cualquier elemento que es visualizado en pantalla hereda esta clase.

  • Elementos gráficos: mapas de bits, vectores, texto, video, etc…
  • Contenedores gráficos: Son controlados por la clase DisplayObjectContainer. Un contenedor, aparte de poder mostrar contenido, tambien puede contener a otros objetos, o contenedores.

9.2. Las clases gráficas

Todas las clases relaccionadas con elementos gráficos, residen en flash.display, excepto las relacionadas con el texto y el video.

A los objetos que se visualizan en pantalla se les llama “Display object”.

InteractiveObject: Interacción ratón y teclado.

DisplayObjectContainer: Contencción de otros elementos.

Necesitaríamjos un libro entero para explicar todo esto, pero como no hay horas, pues haremos resumen intenso :-).

9.2.1. Display Object

Esta es la clase madre del resto, cualquier objeto gráfico visualizado en pantalla hereda a esta.

Esta da funcionalidad, pero no puede ser instanciada.

Un ejemplo para entendera, sería con MovieClips:

Posicionamiento y transformación

  • x e y. Posicionamiento eje de coordenadas.
  • scaleX. Por ejemplo, escalar un objeto a la mitad sería: miclipi.scaleX=miclipi.scaleY=0.5;
  • width y height. Cambia el tamaño.
  • rotation. Para rotarlo.
  • alpha. Para ponerlo en modo transparencia.
  • visible. Para hacerlo visible o invisible .

Nota: Si usamos la propiedad visible, en lugar de alpha a cero, ocupa menos recursos.

Transformaciones a niv

8. Paquetes en el Flash API

En este capitulo tendremos una pequeña muestra de todas las clases que constituyen la SDK (Software development kit) de Flash Player.

Podemos ver toda esta información en la ayuda de Flash, ordenada:

Classes ->Métodos, Atributos, y Eventos

8.1. El objeto Array

8.1.1. Propiedades

length: Devuelve el número de elementos del Array.

8.1.2. Métodos

1 concat(…args):Array

2 join (separadores:*):String

….

9.SortOn (nombredelcampo):Object

8.2. La Clase Date

Getters

1. fecha.getDate();

2.fecha.getDay();

….

19. fecha.getYear();

Setters

1 fecha.setDate();

2 fecha.setFullYear();

8.3 Function

Los objetos permiten almacenar referencias a funciones. Las funciones almacenadas en este tipo de objetos, son ejecutables.

1. Function.apply()

2. Function call.

8.4. La clase Math

Propiedades

1. Math.E.

2. Math.Ln2

8. Math.SQRT2

Métodos

1.charAt

2. charCodeAt

….

12.toUpperCase(9;

8.6. El paquete flash.display

Este paquete contiene las clases utilizadas por Flash Player dedicadas al pintado, y renderizado y manejo de elmentos visuales en pantalla.

6.6.1. flash.display.Bitmap y flash.display.BitmapData.

La Clase Bitmap representa imágenes de tipo Bitmap o raster, en vez de gestionarlas de forma vectrial como hace el resto de elemntos de flash, esta permite controlar elemntos a nivel de pixel. Es una clase instanciable con representación visual. Sus instancias se pueden añadir al Dispaly List. Los datos que se pintan, se encuentran en una instancia de la clase BitmapData.

Resumen: Una instancia de la calse Bitmap, pinta en pantalla la información almacenada en una isntancia de la clase Bitmapdata.

Ejemplos 8.6.1.

Propiedad

1 bitmapData:Bitmap

Lo mas importante de BitmapData:

1. applyfilter();

2. clone();

3.copyChannel();

8.thresold();

8.6.2. La clase Graphics

Permite crear figuras vectoriales con código. Se suele usar con la propiedad graphics de cualquier objeto que herede flash.display.Sprite.

Esta trabaja con conceptos básicos de línea y de relleno:

1. Beginfill()

2. draw();

3. curveTo

….

8.6.3. La clase Loader

Permite cargar recursos externos de tipo swf o imágenes. La carga es asíncrona.

1.contentLoaderInfor. Retorna un obejto de tipo LoaderInfor con info de la entrada de la carga.

Métodos mas importantes:

1 Load. Carga del contenido de una URL determinada por URLRequest.

2. close(). Cancela una carga en proceso.

3. LoadBytes. Permite cargar desde un ByteArray.

4.unload. Carga concluida, descarga de los contenidos.

Eventos:

1. Event.COMPLETE

2…..

6. ProgressEvent.Progress. Este lo usaremos para crear una barra de progreso.

8.6.4. El paquete flash.text

Estas classes permiten trabajar con campos de texto, formatos, métricas y hojas de estilo aplicables a los textos.

Podeis ver varias de estas aplicaciones en el componente que os puse para descargar en la anterior lección.

8.6.5. El paquete flash.system

Funcionalidades a nivel de sistema para manejar aspectos como la gestión de memoria, la seguridad o las prstaciones nativas activas de Flash Player.

A destacara la clase Capabilities, que se encarga de gestionar la información sobre el sistema y el entorno.

Información variada:

Acelaración por hardware.

Tarjeta de sonido

Reproducción de video y audio

Versión del sistema operativo y del flash player.

El idioma

La resolución de pantalla

Profundidad de color de la pantalla

Función de ejemplo:

public function detectamonitor() {
if ((flash.system.Capabilities.screenResolutionY<1000) && (flash.system.Capabilities.screenResolutionY>800)) {
//Muestra todos los elementos
}
if ((flash.system.Capabilities.screenResolutionY<=800) && (flash.system.Capabilities.screenResolutionY>700)) {
//Muestra solo 8 elementos
}

…………………………………………………………………………………..

}

En su contexto: http://www.wikifree.tv (Pantalla completa)

8.6.6. El paquete flash.net

Clases para gestionar el envío, recepción y comunicación de flash con sistemas externos através de la red.

El método de paquete navigateURL

Abre ventana de navegador, cargando url pasado de parámetro de una URLRequest.

try {
navigateToURL(new URLRequest(”index.php?option=com_user&view=login&Itemid=2#abajo”),”_parent”);
}
catch (e:Error) {
//trace(”Error de Conexión”);
// Abriríamos un mini pop up diciendo que no ha sido posible conectarse
}

La clase URLRequest

Este tipo de objeto encapsula toda la información de una petición HTTP.

Permite pasar:

  • La URL destino
  • Las cabeceras que se usan
  • Los parámetros que se pasarán en la invocación
  • El método de invocación.

Clases que la usan:

  • Loader (imagenes y swf)
  • URLLoader (carga de datos)
  • navigateToURL (enlace http)
  • URLStream (enlace del stream)
  • FileReference (upload de archivos)

La clase FileReference

Permite hacer uploads desde la máquina lciente hasta su servidor o al revés (descarga archivos).

NOTA: La seguridad de flash player solo permite hacer un upload de un fichero que haya seleccionado el usuario. Esta seguridad tampoco nos permitirá seleccionar un archivo de sistema.

var url_archivo:URLRequest = new URLRequest();
url_archivo.url=”http://www.ramonleon.com/as3/login.gif”
var referencia_archivo:FileReference = new FileReference();
referencia_archivo.download(url_archivo,”login.gif”);

La clase SharedObject

Sería algo asi como la clase que se encarga de las “cookies” en flash.

Tiene dos objetos diferenciados:

  1. Permite almacenar pequeñas cantidades de datos en el ordenador del cliente
  2. Trabaja con Flash Media Server

La clase URLLoader

Permite cargar datos dinámicos provenientes de XML externos, ficheros de texto plano, invocaciones a páginas php, jsp, servlets, asp, ruby, python o cualquier otro lenguajes de servidor.

Los atributos mas relevantes son:

  • bytesLoaded. bytes cargados
  • bytesTotal. bytes totales. El anterior junto con este, se suelen usar en barras de progreso.
  • data. Cuando se completa la carga, la información se almacena en data. Según el tipo de carga (lo define el atributo URLLoaderDataFormat), accederemos a esta información de una u otra forma.
  • URLLoaderDataFormat. Puede ser:
    • TEXT. Texto plano
    • BINARY. Binario.
    • VARIABLES. Variables

Métodos

  • load (new URLRequest)
  • close(). Cancela una carga en proceso.

Eventos

Event. COMPLETE

HTTPStatusEvent.HTTP_STATUS

Event.INIT

IOErrorEvent.IO_ERROR

Event.OPEN

ProgressEvent.PROGRESS. Usada para barras de progreso.

Ejemplos:

XML—-> ejercicio8_6xml.zip

BINARY —-> ejercicio8_6binary.zip

8.6.7 El paquete flash.media

Paquete para audio y video. Lo veremos mas adelante (si hay tiempo…)

NOTA: Para controlar las señales de audio y video emitido por un microfono o webcam solo se puede almacenar si se trabaja con un servidor de streamming como Flash Media Server.

A destacar… Desde la versión de Flash player 9.0.115, se pueden reproducir otros ficheros de videos (a parte de los flv nativos…), que hayan sido codificados bajo la norma H.264.

Las clases Sound, SoundChannel y SoundTransform

Permite controlar los sonidos que se reproducen en una película de Flash.

NOTA: Para optimizar el tamño de las películas, es recomendable cargar el audio de forma externa.

var sonido.Sound = new Sound (urlRequest);

Los sonidos pueden ser “.wav” y “.mp3″.

Los atributos de esta clase son:

  • bytesLoaded
  • bytesTotal
  • id3. Acceso al canal metadatos de los mp3.
  • lenght. Duración de la canción en milisegundos.
  • url. La url del fichero que se está reproduciendo.

Los métodos:

close(). Cierra el stream

load. Procede a la carga del fichero

play. Procede a la reproducción del sonido.

Eventos:

Event.COMPLETE

Event.ID3

IOErrorEvent.IO_ERROR. Error proceso de carga.

Ejemplo libro: ecualizador.fla

La clase Video

Se usa para ver ficheros externos de video. Permite delimitar el area visual en el que se va a representar el video.

Tipo de ficheros:

  • flv
  • Archivos H.264
  • Streamming desde flash media server

Las clases NetConection y NetStream

Se encargan de controlar la conexión tanto en Streamming coom en descarga progresiva.

Estos pueden servir:

  • Aplicaciones de videoconferencia
  • Disponer de acceso a videos de alta calidad sin bajar ningún plugin… (claro que al final siempre acabamos actualizando el flash player xdxd…)

Ejemplo libro: netconnection-netstream

Eventos:

NetStream.Buffer.Empty
NetStream.Buffer.Full
NetStream.Play.Start
NetStream.Play.Stop
NetStream.Play.StreamNotFound

8.6.8. El paquete flash.printing

Este paquete engloba la información a la hora de la impresión desde documentos flash.

Ejercicio 8.6.8.

8.6.9. El paquete falsh.ui

La clase keyboard

Las clases keyboard nos permite controlar los eventos desde el teclado.

Por ejemplo si persionamos una tecla, podremos controlar cuando lo he presionado.

this.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

function keyDownHandler(teclita:KeyboardEvent):void {

texto.text =”ha pulsado la tecla con código ” + teclita.keyCode;

}

La clase Mouse

Permite dos métodos estáticos que nos permiten mostrar u ocultar el cursor o puntero. Mouse.hide() lo oculta y con el evento MOUSE_MOVE sobre el stage…, le asignamos el nuevo puntero.

Ejemplo Mouse

Ampliación de información API ActionScript 3

Las clases ContextMenu y ContextMenuItem

Menu contextual del botón derecho sobre la película flash.

Ejemplo Menu Contextual

8.6.10 El paquete falsh.utils

Contiene las clases de utilidades varias como:

  • Temporizadores
  • Estructuras de datos como: Dictionary, ObjectProxy, ByteArray

La clase ByteArray

Esta clase expone los métodos y propiedades para trabajar con datos binarios.

Esta clase con su debida implementación podría leer archivos como word, excel, powerpoint…

Las funciones de paquete setInterval y clearInterval

Permite la ejecución de “porciones” de código como una determinada periodicidad.

Ejemplo setInterval

Las funciones de paquete setTimeOut y clearTimeOut

Sería igual que las funciones anteriores, solo que en este caso se usaría en un contexto tipo cuenta atrás…

La clase Timer

La diferencia con las dos anteriores, es que esta podremos controlarla con eventos, cosa que con las dos anteriores: setInterval y setTimeOut “NO”.

Atributos

  • currentCount. Cuantas veces se ha ejecutado la función
  • delay. Tiempo entre invocaciones
  • repeatcount. Número de veces que se va a repetir la ejecución. Sino se indica el nº de veces, será periódica e indefinida.

Métodos

  • reset. Reinicia el timer
  • start. Pone en marcha el tiemr
  • stop. Para el timer

Eventos

  1. TimerEvent.TIMER
  2. TimerEvent.TIMER_COMPLETE

Ejemplo de Timer

7. Estructuras de datos

7. Estructuras de datos
  • Variable-> único valor, con un tipo determinado.
  • Estructura de datos –> multiples valores de casi cualquier tipo, en multiples celdas.

Hay varias:

  • Arrays
  • Objetos
  • Diccionarios

7.1. Arrays (Mas info en el libro en la lección siguiente…)

Un array es una estructura de datos que permite almacenar una lista de datos o valores de forma ordenada.

Para definir un Array, usamos el constructor del mismo:

var almacenador: Array() = new Array();

Podemos inicializarlos de dos formas:

var almacenador: Array() = new Array(5,”1d”,32,12,”a”,”da”);

var almacenador: Array() = [ 5,"1d",32,12,"a","da" ];

Para acceder a los valores del array lo haremos:

nombre_del_array[posicion]

para cambiar el valor de alguno de los elementos:

nombre_del_array[posicion]= nuevo_valor;

7.2. Objetos

Un objeto es una estrucutra de datos que permite almacenar de forma jerárquica y agrupada los distintos elementos.

NOTA: A diferencia de los objetos, instanciados de clases, estos objetos son dinámicos, y los podemos definir sobre la marcha, sin necesidad de instanciarlos (darles un nombre…) de una clase predefinida como los anteriores.

El uso de estos objetos es muy cómodo, pero hay que usarlos cuando sea realmente necesario.

var obj_claseas3:Object = new Object();
obj_claseas3.nombrecurso = “Programación en ActionScript 3″;
obj_claseas3.lugar = “C/ Fundicion, 9. Logroño”;
obj_claseas3.numhoras = “30 horas”;

trace(obj_claseas3.nombrecurso); //Nos mostraria en salida: Programación en ActionScript 3
trace(”es lo mismo si lo llamamos asi: “+obj_claseas3["nombrecurso"])

NOTA: Los objetos son anidables, por lo que un objeto puede ser propiedad de un objeto, un array o cualquier estructura de datos que no tenga un tipo de datos simple.

Estos objetos se suelen usar como hasmap o tablas de indexación.

Ejercicio 7_2

7.3. Diccionarios (leer primero el texto del libro pág. 106)

Los objetos que acabamos de ver, permiten indexar (ordenar) valores String, pero si las claves fueran de otro tipo (numérico por ejemplo..) en tiempo de ejecución, los pasaría a texto.

Como el ejemplo del libro creo que os puede dar lugar a dudas, os he preparado un sencillo gráfico, que creo que lo ilustra mejor, y hace que lo entendais a la primera … ;-).

dictionary_peq

7.4. Manejo de variables por referencia o por valor…

Para los tipos (String, Boolean, Number, Int, Uint):

var variable:cualquieradelostipos= valor;

——————————————————-
var numero1:int =1;
var numero2:int=2;
var numero3:int=numero1+5;

trace(numero3); // Muestra: 6
trace(numero1);

Para el resto de los tipos, no se hace una copia de valor, singo que se almacena una referencia al mismo.

La mejor forma de entenderlo, es con las carpetas de windows. Si creamos un acceso directo, hace lo mismo cuando hacemos doble clic, pero si modificamos alguno de sus archivos cambia tanto para la carpeta como para su acceso directo.

var nombres:Array = ["Mario", "Ana","Roberto","Aroa"];
var nombres1:Array = nombres;

//si cambiamos un valor de nombres

nombres[2]=”Martin”;

trace(nombres);
trace(nombres1);

En el capítulo siguiente veremos todas las posibilidades de trabajar con Arrays. Pero ya que estamos, con lo que acabamos de ver ahora, si en lugar de decirle a nombres1 que es igual, usamos slice():

var nombres:Array = ["Mario", "Ana","Roberto","Aroa"];
var nombres1:Array = nombres.slice();

nombres[2]=”Martin”;

trace(nombres); Mario,Ana,Martin,Aroa
trace(nombres1); Mario,Ana,Roberto,Aroa

veremos que el nuevo array ha guardado los valores reales en lugar de referenciarlos…

——————————

Ejercicio repaso

6. Eventos

6. Eventos

6.1. Que son los eventos

Una notificación de que ha sucedido un “acontecimiento” en una aplicación, o en alguno de sus componentes, que nos permite reaccionar y generar uan respuesta activa a la notificación.

Los puede generar:

Periferico. Teclado, ratón, cámara o micrófono
Aplicación. Subida de un fichero
Se ha instanciado un objeto
Un texto se ha cambiado
Ha finalizado un intervalo de tiempo de un Timer.

Una ves se inicializa una aplicación o película, son los eventos los que rigen los cambios de esta.

Un objeto permanece inmóvil, sino se le aplica una fuerza…

Intervienen como mímino tres partes:

dos interlocutores / mensaje

(emisor/receptor)

emisor: event target u objeto

receptor: listener

mensaje: respuesta al evento

El emisor propaga el evento através de un event dispatcher o dispatcher. Por ejemplo lo que os mostré el otro día: TimerEvent.TIMER sería event dispatcher, y “Timer” sería un dispatcher.

La acción del dispatcher, se le llama “lanzar un evento”, trigger o dispatch.

Un emisor (objeto) puede lanzar varios eventos.

//Creamos el evento para controlar cuando ha acabado de reproducir el video
this.cuadro_interior.mi_video.addEventListener(VideoEvent.COMPLETE, findelvideo);
this.cuadro_interior.mi_video.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, compruebaplay);
this.cuadro_interior.mi_video.addEventListener(VideoEvent.STOPPED_STATE_ENTERED, lanzabotonplay);
this.cuadro_interior.mi_video.addEventListener(VideoEvent.PAUSED_STATE_ENTERED, lanzabotonplay);
this.cuadro_interior.mi_video.addEventListener(MouseEvent.MOUSE_DOWN,dalealplay);

Un dispatcher puede lanzar eventos en cualquier momento de forma asincrona. Flash reproduce la película de forma asíncrona, así que usaremos los dispatcher para cambiar su reproducción a nuestro gusto.

El sistema de eventos es una comunicación unidireccional asíncrona. Los mensajes van del dispacher->listeners, y es el dispatcher el que decide “Que” y “Cuando” lo hace.

6.2. Registrando un listener

1. Determinar “Cual” es el objeto emisor: event target (objeto).

2 Elegir el tipo de evento que quiere subscribirse el listener.

3. Crear un listener para el evento elegido.

4. Esperar que el emisor lance algún evento.

6.2.1. Temporizadores

emisor ——————————— receptor———————– mensaje

dispatcher/event target————– Evento

Timer———————————- TimerEvent.Timer……………….función que ejecuta cuando se activa el listener

Ejemplo 6.2.1.

6.2.2 Carga de datos externa

emisor ——————————————- receptor ———————————mensaje

dispatcher=event target EVENTO FUNCIÓN

urlLoader Event.COMPLETE

Carga de datos realizada

Nota: La carga de datos es ásincrona. De forma que cuando hacemos el load, no carga al momento los datos, sino que controlamos el proceso con un evento sobre el objeto que realiza la precarga.

Ejercicio 6.2.2.

6.2.3 Eventos de ratón

Ejemplo de la vida cotidiana: Interruptor de la luz.

Ejercicio 6.2.3. (I, II, 1er Ejemplo gráfico)

Resumen ejemplos libro: Se puede usar el mismo mensaje para dos eventos diferentes.

Cualquier evento en AS hereda la superclase Event, y esta le asigna el atributo target, que dice cual es el objeto que ha lanzado el evento.

6.3. Eliminar el registro de un listener para un Evento

Cuando ya hemos realizado una acción o movimiento con un objeto, y ya no nos interesa mas usar el mismo, es recomendable borrar la instancia del evento, para descargar memoria.

addEventListener - Añadir ———— ejemplo.AddEventListener(MouseEvent.CLICK,esclic);

removeEventListener - Borrar——–ejemplo.RemoveEventListener(MouseEvent.CLICK,esclic);

6.4. Lanzando eventos

Para que un objeto puede actuar como emisor o dispatcher, la clase del mismo debe cumplir un requisito:

1 Implementar la interfaz IEventDispatcher

Asi de primeras igual nos suena a “chino”, pero si os digo que prácticamente todos los objetos con representación visual (botones, clips, …), asi como todas las instancias de carga de información como URLLoader , ya lo implementan…, pues desde nuestra parte, simplemente es interesante saber esto, para el día que queramos diseñarnos un objeto propio, pero por lo demas, con crear un objeto y asignarle cualquiera de los objetos por defecto:

var micoche:MovieClip=new MovieClip();

nuestro objeto ya habría heredado esa clase, y nos olvidaremos…

Clase EventDispatcher

  • dispatchEvent para lanzar eventos
  • removeEventListener para un tipo de evento dado
  • hasEventListener, discriminar si el dispatcher u objeto tiene algún listener suscrito
  • addEventListener, para añadir listeners al dispatcher u objeto

De estos, el que todavía no habíamos visto es el “hasEventListener”, os pongo un sencillo ejemplo para entenderlo:

boton.addEventListener(MouseEvent.CLICK, doSomething);

function doSomething(evt:MouseEvent):void{

   if(boton.hasEventListener(MouseEvent.CLICK)){

      boton.removeEventListener(MouseEvent.CLICK, doSomething);
      trace("se elimino el event listener");
   }
}
NOTA: Estos métodos están implementados en la clase EventDispathcer. Asi que cuando usemos una objeto/dispatcher que la herede, podemos usar cualquiera de sus métodos, sin necesidad de instanciar dicha super clase.

Ejercicio 6.4.Galeria.

Ejercicio 6.4. Componente FotoFlash.


el de mapas de bits

5. POO (Programación Orientada a Objetos)

5. POO (Programación Orientada a Objetos)

5.1. ¿Que son los objetos?

As es un lenguaje orientado a objetos basado en ECMAScript.

Un objeto es una entidad de nuestra película, que en función del tipo del mismo, se compondrá:

. Propiedades. Son las que lo definen.

.Atributos. Determinan su estado.

.Métodos. Caracterizan su comportamiento.

IMPORTANTE!!. Una clase es un tipo definido que describe los atributos y los métodos de los objetos que se creen a partir de ella.

Los objetos creados a partir de una clase, los llamaremos instancias, y una vez instanciados, podemos cambiar, modificar y asignar los atributos que le correspondan.

5.2. Introducción a Objetos

OBJETO COCHE

  • ATRIBUTOS: Color, num ruedas, num plazas, potencia, marca
  • MÉTODOS: Arrancar, frenar, acelerar, …

OBJETO MOVIECLIP

  • ATRIBUTOS: X, y, width, height,…
  • MÉTODOS: gotoAndPlay(), gotoAndStop(), …

5.3. Definiendo clases

Se definen en ficheros externos a la película, y tienen extensión “as”.

Podemos crear ficheros.as desde flash: Nuevo->Fichero ActionScript

Ejercicio 5.3.

5.3.1. Declaración de las clases

Usamos la palabra reservada “class” (hablaremos de Package mas adelante…)

nombre_clase == nombre_fichero

class Saludo = Saludo.as

Según el libro, las clases empiezan siempre por máyuscula… Creo que es importante saber que como vimos en capítulos anteriores, tenemos varias opciones para declarar variables: Nombre descriptivo, Camel Casting, Pascal Casting, … Pues simplemente los desarrolladores de flash han usado esta norma, pero cuando creamos nuestras propias clases podremos ponerlas tanto en mínusculas como en mayúsculas.

A nivel personal, mi recomendación a la hora de declarar las variables, funciones, classes…, sería este:

class_saludo Se entiende que es una clase para la aplicación saludo
bt_saludo Botón que interactua dentro de la aplicación saludo
fn_saludo Función que usamos para en la apllicación
clip_saludo MovieClip que usamos en la aplicación

5.3.2. Declaración de atributos

Practicamente igual que las variables, con la salvedad que le podemos asignar el valor.

var loquesea:tipoquesea = new tipoquesea(valor);

5.3.3 Constructor

Es una función especial de una clase que permite inicializar objetos. Siempre que instanciemos una clase, se ejecutará el constructor de este.

Nota: Tenga o no parámetros, no usará la palabra reservda :void.

package {
public class Persona {
//Atributos
public var textoSaludo:String=new String();
//Constructor
public function Saludo () {


}
}
}

El constructor es opcional, pero si asigamos una clase a la película desde propiedaes, sino existe este, dará error.

5.3.4. Métodos

Tareas o acciones que puede llevar a cabo una instancia de una clase:

objeto=clase;

package { public class Saludo {
//Atributos
public var textosaludo:String = “hola”;
//Constructor

public function Saludo() {}
//Método
public function saludar():void { trace(textosaludo)}
}

5.3.5 Instanciación

Para poder usar una clase, esta la tendremos que alojar en la misma carpeta donde se encuentra la película.

El primer día al tratar de explicaros esto, lo hice mal, puesto que entendisteis que hablaba de usar la película en Web, pero yo me refería simplemente a la hora de trabajar=desarrollar aplicación.

Ejemplo:

La carpeta saludo, contendrá el fichero de clase “Saludo.as” y el fichero de flash “Saludo.fla”

Luego ya en la película, en el primer fotograma de la película escribiremos:

var miSaludo:Saludo = new Saludo();
miSaludo.saludar();

Ejercicio 3.5.5

5.4. Classpaths

Directorio de clases para flash.

5.4.1. Classpath Global

1 Sería la carpeta donde tenemos el documento “.fla”

2 Depende de la instalación de flash, pero si la hacemos en español por defecto:

c:\Archivos de Programa\Adobe\AdobeFlashCS3\es\First Run\Classes

5.4.2 Classpath realtivo al documento

Se definen desde :

Archivo->Conf.Publicación->Flash

root_proyecto->
file1.fla, file2.fla, …, fileN.fla
carpeta: misclasses->efectos->efecto1.as
->efecto2.as
->herramientas->herram1.as
->herram2.as
5.5 Uso de packages

las clases se pueden agrupar y ordenar en paquetes. Esto ayuda a evitar conflictos de duplicación de nombres de variables y métodos.

Para importar mis clases:

import misclasses.efectos.efecto1;
import misclasses.efectos.efecto2;

//Eso equivale a cargar las dos clases anteriores
import misclasses.efectos.*;

para definir las clases, solo cambiaría la llamada del package:

package misclasses.efectos { … }

5.6 Getters y Setters

Nos permiten modificar los atributos de un objeto, y brindan un punto de control en la lectura y escritura de los valores de atributos del mismo.

Estos tienen el valor añadido, que aparte de modificar los atributos también nos permiten ejecutar acciones.

Ejercicios 5.6.

5.7 Modificadores de control de acceso para miembros de clase

public. Accesible desde cualquier clase.

internal. Otras clases definidas dentro del paquete de datos.

protected. Dentro de su clase o de sus subclases.

private. Solo permite el uso de este detnro de la propia clase que lo define.

NOTA!!: Sino se declara el tipo por defecto sería del tipo Internal

Recomendación: Hasta que no controleis bien el lenguaje, os recomiendo SIEMPRE usar Public, para evitar atascos durante el desarrollo de la aplicación.

5.8. Métodos y propieades estáticas

Static. Se puede usar tanto en las propiedades como en los métodos. Solo se pueden ser accedidas directamente através de la clase sin necesidad de instanciarla.

NOTA: con Static no se puede usar “this”, ya que esta implica un ambito de instancia, y Static solo están definidos en el ámbito de clase.

Ejemplo para una propiedad Static:

package {

public class Persona {
static public var numPersonas:int = 0;
public var nombre:String;
public function Persona (nombre:String) {
this.nombre =nombre;
numPersonas++;
trace(”nueva persona:”, nombre);
}
}
}

Ejemplo 5.8.

5.9. Herencia

En POO (programación orientada a objetos), puede ampliar o extender la funcionalidad de otra clase, asi como alterar su comportamiento por defecto en situaciones determinadas.

Clase A //Supervclase
Clase B //Sub clase
Clase C //Sub clase

NOTA: Una superlcclase puede tener varias sub clases, pero una subclase solo puede tener una superclase.

Class A { … }

Class B extends Class A

En el ejemplo del libro (Pág. 81 y 82):

instanciaB.metodo()

Primero mira en la clase B, y “sino” existe busca en la clase A. Con los atributos hace lo mismo.

Un MovieClip:

MovieClip->Sprite->DisplayObjectContainers->InteractiveObjects->DisplayObject->EventDispatcher->Object

NOTA!: SI una clase no extiende a otra , hereda la super clase object. Los miembos “Static” solo tienen ámbito en la clase, y no se heredan.

5.10. Sobrescribiendo métodos

Usamos la sentencia: “override“, y con ella conseguimos pisar métodos de la superclase.

Con “super.metodo” evocaríamos el método orignal de la superclase.

Si lo suamos en el constructor de la clase B (subclase), llama al constructor de la super clase.

5.12. Poliformismo

Permite a una instancia, operar como si fuera una de sus superclases.

Ejemplo: MovieClip->hereda de displayObject -> x, y, scaleX, scaleY, width, height

Es decir, podemos usar una sub-clase: MovieClip, como si fuera una superclase.

3.Operadores

3.Operadores

3.1. ¿Que son los operadores?

Son símbolos o plabras clave que realizan operaciones sobre los valores.

El resultado de las operaciones lo guardan en variables, salvo cuando las operaciones las usamos a modo expresiones en los bucles o estructuras condiciolaes.

3.2 Operadores Aritméticos

+ suma

+ resta

* multiplicación

/ división

% Módulo de una división

3.3 Operadores de asignación

El más común es el “=”. Pero hay varios mas como:

+= -= *= /=

que tienen la misma funcionalidad que el ejemplo que vimos al principio de:

mix=mix+1; es lo mismo que: mix +=1;

3.4. Operadores de concatenación

Hablamos en plurar, pero el único operador global de concatenación es el símbolo “+“, aunque existen otros operadores para otros tipos mas concretos como “concat” para Array, que veremos mas adelante.

3.5 Operadores de comparación o condicionales

Sirven para comparar dos operadores y devuelven valor booleano: true o false.

== Devuelve True si son iguales

!= Devuelve True sin son distintos

> Devuelve True si el 1er valor es mayor que el segundo

< Devuelve True si el 1er valor es menor que el segundo

>= Devuelve true si el 1er operando es mayor o igual que el segundo

<= Devuelve true si el 1er operando es menor e igual que el segundo

3.6 Operadores lógicos.

Se usan en combinación de los operadores de comparación, en estructuras codicionales o bucles.

&& Devuelve true si las dos condiciones son true

if (i>1 && i<8) { … }

|| Devuelve true, si una de las condiciones son true

if (i>1|| i<8) { … }

!Convierte true en false, y viceversa

var siono:Boolean= new Boolean(false)

if (!siono) { … } // Si “Sino” es lo contrario de su valor… , si “sino” es verdadero…

4. Estrucuturas de control.

4.1 Introducción. Sirven para evitar la ejecución lineal de un programa.

Se dividen en 3 grupos:

  1. Estructuras condicionales
  2. Bucles
  3. Funciones
  • Agrupar código. Engloba bloques de código.
  • Ordenar. Controla el orden de ejecución.

4.2 Condiciones

Permite que la pelicula cambie su comportamiento:

if (condicion1) {

gotoAndPlay(”medio”);

} else {

gotoAndStop(”vueltaempezar”);

}

Ejemplo 4.2.

4.2.1. Operador Condicional

estado=(i<5) ?1 :0;

es lo mismo que:

if (i<5) {
estado=1;
} else {
estado=0; }

4.3 Bucles

Ejemplo 4.3.

4.3.1. for

1 for (valor_inicial_de_la_variable, condicion, modificiaciones) {

realizarAcciones();

}

2 for (variable in intervalo) {

realizaracciones();

}

Ejemplo 4.3.1.

4.3.2 while

Este bucle al contrario que el for, ni incrementa ni decrementa su indice.

mientras(condicion) {
hacer acciones();
}

while(i>25) {
i++;
trace(i);
}

Ejemplo 4.3.2

4.3.3 Anidamiento de bucles

Los bucles se pueden anidar entre si.

Ejemplo 4.3.3

Continuará……

4.4. Alteracciones de bucles

Pude cancelar un bucle con la sentencia “break” o bien alterar su funcionamiento con la función “continue”.

4.4.1. break

Esta sentencia cancela un bucle, y anula las siguientes expresiones después de esta dentro del propio bucle.

Ejercicio 4.4.1

4.4.2 continue

Produce la no ejecución de las acciones del bucle en esa interacción, pero permite la ejecución del bucle.

Ejercicio 4.4.2

4.5 Funciones

1 function nombre_de_la_funcion(parametros) { acciones }

2 nombre_de_la_funcion = function (parametros) { acciones }

Se suelen crear en la línea principal, puesto que es necesario definirla previamente a ser llamadas, y depende su uso, usaremos o no parámetros.

Ejemplos 4.5.

4.6. Retornar valores

function media (valor1, valor2):Number {

return (valor1 + valor2)/2;

}

4.7. Variables locales

Cuando declaramos variables dentro de las funciones, esta serán de ámbito local. Es decir, solo existirán durante la ejecución de la función donde se definen.

Si declaramos variables sobre la línea de tiempo, estas serán globales, y podrán ser usadas desde cualquier fotograma.

Es importante usar las variables locales, puesto que una vez que se hayan ejecutado la función que las contiene, estas se borran automáticamente de la memoria, liberando espacio.

Ejercicio 4.7.

Descargar Ejercicio botonclip

2. Variables y tipos de datos

2. Variables y tipos de datos

2.1. ¿Que es una variable?

Una variable es una unidad de almaenamiento de información. En ellas podremos ir guardadon o cargando todos aquellos datos que necesitemos antes y durante la animación.

Todas las variables tienen nombre, y a este, se le denomina como identificador. El identificador se lo asignamos nosotros y para ello tenemos varias sencillas normas:

1. Usaremos numeros y letras del alfabeto ingles.

2. No puede empezar por un numero.

3. Podemos usar “_” y $, pero no es recomendable.

4.El lenguaje distingue entre mayúsculas y minísculas. Yo recomiendo usar siempre las minúsculas, para evitar malentendidos.

Hay otras normas que no son obligatorias, pero si muy recomendadas:

1. Usar variables descriptivas. Si hacemos una aplicación compleja, y no lo hacemos, acabaremos teniendo un galimatías, que el día de mañana, en caso de tener que hacer modificaciones, nos llevará irremediablemente a la pérdida de tiempo.

2. Camel casting. Primera palabra en minúsculas, segunda palabra, con el primer caracter en mayúsculas.

3. Pascal casting. Primer caracter de la primera palabra en Mayúsculas, y el primer caracter en mayúsculas.

Para declarar las variables lo haremos de la siguiente forma:

var identificador:Tipo_variable;

var miclip:MovieClip;

2.2. Asignación de valores

Se usa el operador “=”, o bien se le indica desde la definición de la propia variable.

var miclipX:Number;

miclipX=10;

sería lo mismo que:

var miclipX:Number=new Number(10);

Ejemplo 2.2.

2.3.Tipos de datos

En actionscript se asigna el tipo de datos en la definición de variables.

var indetificador:Tipo;

2.4. Tipos de datos primitivas en ActionScript.

Son aquellas que define el propio lenguaje de programación:

  • String: un valor de texto como, por ejemplo, un nombre o el texto de un capítulo de un libro
  • Numeric: ActionScript 3.0 incluye tres tipos de datos específicos para datos numéricos:
    Number: cualquier valor numérico, incluidos los valores fraccionarios o no fraccionarios
    int: un entero (un número no fraccionario)
    uint: un entero sin signo, es decir, que no puede ser negativo
  • Boolean: un valor true (verdadero) o false (falso), por ejemplo, si un conmutador está activado o si dos valores son iguales

Enlace: Adobe Api. Tipos de datos

2.5 Variables sin tipo de datos definido

Se pueden usar, pero no es recomendable, puesto que podrían dar lugar a error durante la compilación.

var chicoparatodo;

var chicoparatodo:*;

2.6 Comprobación de tipos

Flash comprueba durante el proceso de compilación los tipos asignados a las variables. Esta comprobación se puede anular desde el menu:

Archivo->Configuración de publicación->Configuracion de ActionScript

pero no es nada recomendable, puesto que nos quedaríamos sin el proceso de comprobación que ayuda a depurar el código.

Enlace Adobe Api. Comprobacion tipos

2.7 Convesión entre tipos de datos

Es posbile que necesitemos convertir una variable de un tipo de datos a otro.

Para ello tenemos varias opciones:

var numconvertido:String = “249″;

var convertido:Number=Number(numcovertido);

Enlace: Adobe Api. Conversiones.

1. INTRODUCCIÓN A ACTIONSCRIPT

1. INTRODUCCIÓN A ACTIONSCRIPT

1.1 ¿Por qué usar ActionScript?

Son muchas las razones para usar este lenguaje:

  • Mover nuestros objetos.
  • Asignar acciones a botones para que el usario interactue por nuestra web o aplicación de escritorio.
  • Realiza una precarga de datos para usar en nuestra aplicación.
  • Y un largo etc…

La mejor forma de conseguir realizar aplicaciones complejas, es empezar por otras mas sencillas para conocer bien las posibilidades de este lenguaje, y una vez comprendidas, lanzarnos a la piscina, y comenzar a combinar estas, hasta llegar a realizar aplicaciones mas complejas.

1.2. ¿Como usarlo?

Cada cual podrá usar este lenguaje en función de sus necesidades a la hora de apoyar sus proyectos web, o de escritorio…, enriqueciendo estos en el plano multimedia.

Flash permite conseguir la misma meta, de muchas y diversas formas, asi que somos nosotros, quienes debemos de tratar conocer todas las posibilidades, para que luego con las ideas claras, apoyarnos en AS3, y hacernos la vida mas cómoda, y ahorrar ese precioso tiempo, que a veces se nos va sin darnos cuenta…

Ejemplo 1.2

Ejemplo 1.2. alternativo

Nota Ejercicio: Este ejemplo nos muestra como podemos obtener el mismo resultado de dos formas distintas. El ejemplo alternativo pesa exactamente lo mismo, pero nos permite, con solo cambiar los valores del temporizador, cambiar la velocidad del clip, sin tener que trabajar el modo diseño. Esto viene bien, con clientes exigentes que no tengan claras las ideas… ;-).

1.3 Relación entre lenguaje propio y el de Flash (ActionScript): elementos de un Script.

Los que hayais estudiado programación entedereís esto rápidamente: Pseudocódigo.

Para los que no lo hayais hecho, aunque igual os suene un poco raro, es muy sencillo….

Todos los días según nos levantamos, mentalmente nos organizamos las tareas:

————————————————————

1º ventilar la habitacion

2º cojo la ropa del amario

3º enciendo la cafetera y la tostadora

  • Mientras se hace el café, (esto sería un bucle do…. while, hacer mientras…)
    cogemos la taza y la leche del frigo, y ponemos las tostadas en la tostadora
  • Si ya está lista la cafetera: (esto sería un bucle if )
    Nos ponemos el cafe
  • sino (este sería el else del bucle)
    cogemos las tostadas y le vamos poniendo la mermelada…,
  • Mientras se acaba de hacer el café. (esto sería otro bucle do…. while, hacer mientras…)
    Ponemos la ducha en marcha
  • Nos tomamos el cafe, mientras se va calentando el agua de la ducha…
  • Segun nos duchamos y nos vestimos, entonces en función del día que sea elegimos: (esto sería un switch case)
    En e l caso que sea sábado, nos vamos andando a por el pan (esto sería algo así: case “findesemana”=accion;)
    En e l caso que sea laboral, vamos directos al trabajo (esto sería algo así: case “entresemana”=accion;)
    En e l caso que sea vacaciones, cogemos el coche y nos vamos a la playa… (case “fiestaaa”=accion;)

———————————————

Como veis al final los bucles son parte de nuestra vida cotidiana, y de hecho los usamos a diario.

Asi que para hacer una aplicación, debemos hacer simplemente lo mismo…, primero en un papel nos hacemos un story board de la animación, y luego escribimos el pseudocódigo que vamos a seguir para llevar la aplicacion a su termino.

Cuando lo tengamos claro, ya podremos pasarlo a ActionScript, y si lo hemos hecho bien…, os aseguró, que cuando lo veamos funcionando seguro que a mas de uno/a o de dos, sonríe ;-).

Con el tiempo, las prisas, y los jefes con su látigo, acaberemos haciendolo todo directamente en AS, pero os aseguro que llegaría un día, donde os pegareis de bruces con alguna pared terrible de alta… Ese día, recordad el pseudocódigo, planificarlo bien, y ya vereis que tirais abajo esa pared.

Cuando escribimos en AS es interesante comentar nuestro código, para que si algun dia decidimos reutilizarlo entendemos como y para que hicimos esto u aquello.

Para los comentarios usaremos:

  • // Para comentar una línea://Comentario de una línea
  • /* …… *//*
    Comentario 1
    Comentario 2
    Comentario 3
    */

También es intersante saber, que hay varios operadores para trabajar con las propiedades de los objetos. El más común ++, sirve para incrementar el valor, y se puede representar de 3 formas:

cursoas3.x ++;

cursoas3.x = cursoas3.x + 1;

cursoas3.x +=1;

En ambos casos obtendríamos, el mismo resultado. Para conocer mejor todos los operadores de AS podeis conocerlos en esta url:

Operadores de AS3