Tutorial De Actionscript 2

INSTITUTO SUPERIOR TECNOLOGICO PUBLICO MARIA ROSARIO ARAOZ PINTO DEPARTAMENTO DE COMPUTACION E INFORMATICA

INDICE

1.- TUTORIAL DE ACTIONSCRIPT 2.0 EN FLASH

02

2.- PROGRAMACIÓN ORIENTADA A OBJETOS EN ACTIONSCRIPT 2

09

3.- CREAR UN SONIDO PERMANENTE (LOOP) POR MEDIO DE ACTIONSCRIPT

23

4.- USO DE LA CLASE COLOR DE FLASH

24

5.- USAR CSS EN FLASH

28

6.- MOVIMIENTO DE UNA BANDERA DINÁMICAMENTE POR ACTIONSCRIPT

33

7.- CREAR SCROLLBAR MÁS EFECTO DE EASING

34

1

1.- TUTORIAL DE ACTIONSCRIPT 2.0 EN FLASH http://www.cristalab.com/tutoriales/21/tutorial-deactionscript-2.0-en-flash Introducción Macromedia creo Flash 3, y con el introdujo un, hasta entonces, desconocido concepto en el mundo Flash, la programación. Primitivos play, stop y gotoAndPlay poblaron entonces el diccionario de ActionScript de la epoca. Vino Flash 4 luego, acompañado de las estructuras de programación; fue entonces cuando los ciclos y las condiciones se mostraron al universo Flash. Flash 5, en convenio con un poderoso aliado (ECMA) dio vida a una nueva visión de ActionScript, convirtiendose en la sintaxis ECMA, elegida desde tiempos inmemoriales por su hermano JavaScript y engendrada de C, unico lenguaje original. XML, LoadVars, OOP y muchos mas conceptos desfilaban uno a uno hacia ActionScript, pero ningun suceso marcaria tanto la mente de los flasheros como ahora, en MX 2004; ActionScript 2.0 Dejando un poco la introducción cyberpunk, ActionScript 2.0 realmente es un increible avance, volviendose totalmente estandar, totalmente orientado a objetos y con muchisimas novedades, Flash MX 2004 trae este nuevo lenguaje (La segunda versión de ActionScript) a un nivel mas alla de las aplicaciones ricas en medios orientadas a la web. Este tutorial pretende ser una guia de migración desde Flash 5 y MX hacia MX 2004, en lo referente a su lenguaje de programación y un poco de su modelo de componentes; NO PRETENDE ser una guia basica de programación ni un tutorial de ActionScript desde cero Se espera que el lector tenga las nociones basicas de programación, que haya manejado antes un poco de ActionScript y que use actualmente Flash MX 2004 (Que es lo que dice el titulo, no? :D )

Indice 1. 2. 3. 4. 5. 6.

Variables en Flash MX 2004; Strong Data Typing Imagenes en campos de texto Cascade Style Sheeting, CSS en campos de texto Personalizando los componentes MX 2004 con CSS Nuevo modelo de eventos en los componentes V2 Clases y programación orientada a objetos

Variables en Flash MX 2004; Strong Data Typing Existen varios lenguajes que nos acostumbran a malas mañas, como no tener la necesidad de declarar las variables antes de usarlas o no asignarles un tipo de datos (Lease Visual Basic, aunque PHP [la versión anterior] tiene algo de eso). Desgraciadamente, Flash tiene un poco de todo, en Flash no hay necesidad de declarar variables para usarlas y una variable puede ser "multi" tipo de datos, por ejemplo, si asigno primero a una variable un String y luego un numero, no habria problema; asi: variable = "Patito"; trace(variable); variable = 1337; trace(variable); //Esto mostrara en pantalla primero "Patito" y luego "1337" //Sin ningun error de compilación Esto, aunque parezca una ventaja, es un grave error de codificación que genera "malas practicas de programación". Pues hay buenas noticias, para todos los puristas de la programación y para los novatos que inician con Flash; ActionScript 2.0 incluye la declaración de tipo de datos en una variable (Strong Data Typing), es

2

decir, si declaras una variable de tipo numero y le asignas un String, Flash te mostrara un error y tu usaras solo los tipos de dato que deben ser usados; ejemplo:

var miNumero:Number; miNumero = 31337; trace(miNumero); miNumero = "Cristalab"; trace(miNumero); Que generara esta salida en la ventana OutPut:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Type mismatch in assignment statement: found String where Number is required. miNumero = "Cristalab"; Total ActionScript Errors: 1 Reported Errors: 1 Veamos

entonces

la

estructura

de

la

var

declaración

de

variables:

nombreDeVariable:TipoDeDato;

Aqui cambia que siempre vamos a declarar la variablepara ponerle el tipo de dato, asi, todas las declaraciones inician con la palabra clave var, ademas, despues del nombre de la variable pondremos el signo de dos puntos seguido por el tipo de dato; si quieres una lista de los tipos de datos disponibles, escribe el signo de dos puntos y una lista aparecera ante ti, aqui un ejemplo.

Lista de tipos de datos

No solo eso, ahora tambien detectara mayusculas y minusculas, es decir, una variable llamada miClab sera dintitna a MiClab, la M mayuscula la hace completamente diferente, asi que ha tener cuidado con el "case sensitive" de Flash MX 2004. Como nota final, todas las clases inherentes y objetos internos de Flash pueden ser declarados com oobjetos (Por ejemplo, XML)

Imagenes en campos de texto Asi es, ahora podemos introducir imagenes externas JPG dentro de los campos de texto de Flash por medio del soporte HTML en los campos de texto, asi que si tengo un campo de texto al que le asigno el siguiente codigo HTML:

Prueba de HTML en Flash MX 2004

Esto es una prueba de como Flash MX 2004 soporta HTML e imagenes incrustadas en sus campos de texto
Mucho mas poderoso que Flash MX La apariencia de ese campo de texto, tomando como base que existe el archivo Foto.jpg en la misma carpeta; seria:

3

Imagen de un SWF con un campo de texto con contenido HTML

figura Esto nos da muchisima mas flexibilidad en cuanto a manejo de datos dinamicos en nuestras interfaces de Flash; ademas, no solo nos deja cargar imagenes externas; si yo creo un MovieClip cuyo punto de registro (Es decir el centro de la figura) sea la esquina superior izquierda y lo exporte para ActionScript con un nombre, tambien podre incluirlo dentro de Flash, no importa si es estatico o animado; por ejemplo, si creamos un MovieClip de una cualquiera y al crear el MovieClip colocamos esto:

Cuadro de dialogo "Convertir a Simbolo"

4

Y en el codigo HTML, en la etiqueta IMG, cambio el "Foto.jpg" por el nombre que le di para ActionScript (En este caso "Clab"); el campo se podria ver asi:

La imagen es creada con Flash y esta dentro de un Movie Clip

Cascade Style Sheeting, CSS en campos de texto En pro de los estandares de la web, Macromedia incluyo soporte a hojas de estilo en cascada dentro de Flash MX 2004, asi que podemos crear todos nuestros estilos de manera externa y luego incluirlos dentro de los campos de texto para asi hacer mas facil y logico el proceso de información+diseño. Por ejemplo, crearemos un archivo "estilo.css" con este contenido:

titulo { font:"Times New Roman", Times, serif; text-align:center; font-size:14px; font-weight:bold; color:#003399; } subtitulo { text-align:right; color:#999999; font-size:9px; } contenido { margin-left:5px; font:Arial, Helvetica, sans-serif; color:#000000; text-align:left; } Crearemos un campo de texto dinamico, de nombre "campo_txt"; luego, colocamos este codigo en el primer keyFrame de la pelicula:

//Creo un objeto de tipo Hoja de Estilo var miEstilo:TextField.StyleSheet = new TextField.StyleSheet(); //Cargo dentro de el, el archivo CSS externo miEstilo.load("estilo.css"); //Se lo asigno al campo de texto campo_txt.styleSheet = miEstilo; //De acuerdo a las etiquetas personalizadas dentro del CSS, creo el contenido

5

var texto:String = "Cristalab, website dedicado a Flash MX 2004\n"; texto += "<subtitulo>Lleno de tutoriales, ejemplos y hasta un comic"; texto += "Este website, encontrado por casualidad en los perdidos rincones de Google "; texto += "da una visión profesional de las nuevas herramientas de desarrollo en contenidos "; texto += "dinamicos para la web, especializandose en Macromedia Flash MX 2004"; //Se lo asigno al campo de texto campo_txt.htmlText = texto; El bonito resultado, seria este:

Campo de texto con el contenido HTML parseado por medio de CSS

Ahora bueno, al igual que Flash no soporta todo el HTML, tampoco soporta todo el CSS, pero digamos que soporta el "justo y necesario" para lo que necesites; por favor, refierete a la ayuda de Flash (Tecla F1) para mas información detallada

Personalizando los componentes MX 2004 con CSS Esto da para un tutorial completo (El "skineo" de componentes es todo un arte), pero solo mostrare lo mas importante, usar CSS para personalizar componentes. Este ejemplo sencillo modificara de manera global los componentes CheckBox, RadioButton, List, Button, TextArea y NumericStepper

/*Creamos una variable que modificara los estilos globalmente, asignandole cada uno de los estilos de componente a modificar */ var estiloGlobal = _global.styles.Button=_global.styles.CheckBox= _global.styles.TextArea=_global.styles.RadioButton=_global.styles. List =_global.styles.NumericStepper = new mx.styles.CSSStyleDeclaration(); //Le asignamos a la variable distintos tipos de estilo compatibles con el estandar CSS estiloGlobal.backgroundColor = 0xEFF3F7; estiloGlobal.color=0x666666; estiloGlobal.fontFamily = "Verdana"; estiloGlobal.shadowColor=0xFFFFFF;

6

Y no solo eso, tambien podemos hacer "temas" para los componentes, es decir, crear cada uno de sus elementos (Barras de scroll, fondos, bordes) para personalizar aun mas nuestra interfaz. Un ejemplo de como quedaria seria algo asi:

Apariencia de los componentes despues de "skinnear" y aplicarles CSS

Nuevo modelo de eventos en los componentes V2 Estrenamos un nuevo modelo de eventos tambien en esta versión de Flash, ahora, podemos eventar los componentes directamente como haciamos con un boton y no por medio de funciones, listeners y demas; un punto mas en pro de la usabilidad; para el ejemplo, arrastraremos el componente "Button" al escenario y manteniendolo seleccionado desplegamos el panel de ActionScript, donde , si escribimos on( se desplegaran los eventos asociados a este componente como en la grafica:

Eventos del componente Button

Asi que si colocamos el siguiente codigo:

on (click) { trace("No me presiones :("); }

Obtendremos al clickear el boton, la siguiente salida:

Pero hagamoslo mas interesante, creemos un campo de texto dinamico en el escenario, le ponemos de nombre de instancia campo_txt y en el code del boton ponemos:

on (click) { _parent.campo_txt.text="No me presiones :@"; } Y el texto aparecera en el campo de texto :D

7

¿ Por que _parent ? En los componentes, todo componente instanciado es, en escencia, un movie clip, asi que todo tipo de codigo que le asocies ira con el "scope" o alcance de variables del movie clip que lo compone; como el campo de texto estaba un nivel arriba del MovieClip que compone al boton, existe la necesidad de usar _parent, aunque _root funcionaria igual. Muchos otros componentes funcionan asi, asi que no duden en oprimir F1 ante cualquier duda (O contarnos en los foros de Cristalab).

Clases y programación orientada a objetos Este punto seria tema para todo un tutorial completo, pero intentare abarcar una visión general de la OOP. Flash ahora incluye programación orientada a objetos real, es decir, para los que han sido programadores, herencia, polimorfismo, interfaces, vamos, como Java (Solo que no hay sobrecarga de metodos[info solo para programadores] ) La tecnica tambien es similar a Java, creas un archivo externo con extensión .as que tenga el mismo nombre que la clase que viene escrita en el y luego lo importas a Flash, para tener mas claro esto; vamos a crear una clase "cuadrado" que nos dibuje ¬_¬ un cuadrado en donde le digamos (Y en nuestro ejemplo, le diremos que lo haga en _root, es decir, en la linea de tiempo principal de la pelicula). En Flash vamos al menu File -> New y en la lista desplegada elegimos ActionScript File. Guardamos el archivo con el nombre Cuadrado.as y escribimos este codigo en el:

//Declaración de la clase class Cuadrado{ /*Variable privada (Es decir, solo puede ser vista y modificada por un metodo de la clase; esta nos servira para saber donde vamos a dibujar */ private var elLugar:MovieClip; /*Constructor, esta es la función que se ejecutara al crear una instancia de la clase, como cuando hago var cosa = new String("Hola");, algo por el estilo ;) */ //Lo olvidaba, para que sea constructora debe tener el mismo //nombre de la clase function Cuadrado (lugar:MovieClip) { //Asignamos a la variable privada de la clase la variable que llega por parametro this.elLugar = lugar; } //Función publica (Accesible desde el nombre de instancia de la clase) que nos servira //Para dibujar el cuadrado public function drawCuadrado () { var X:Number,Y:Number; this.elLugar.createEmptyMovieClip("cuadro",1); this.elLugar.beginFill(0xFF0000,90); X=(this.elLugar._width/2)+100; Y=(this.elLugar._height/2)+100; this.elLugar.moveTo(X,Y); X+=100; this.elLugar.lineTo(X,Y); Y+=100; this.elLugar.lineTo(X,Y); X-=100; this.elLugar.lineTo(X,Y); Y-=100; this.elLugar.lineTo(X,Y); this.elLugar.endFill();

8

} }

Y en una pelicula cualquiera colocamos solamente este codigo en el primer keyFrame:

//Trae nuestro archivo Cuadrado.as, no podemos colocar codigo de clases //Dentro de una pelicula, debe ser en un archivo externo import Cuadrado; //Creamos una nueva variable de tipo "Cuadrado", es decir, nuestra clase //Ahm!, pasandole como parametro al constructor _root, lugar donde dibujara var test:Cuadrado = new Cuadrado(_root); //Invocamos al función publica drawCuadrado de nuestra clase test.drawCuadrado(); Y veremos dibujado un lindo cuadrado en nuestro escenario :D

Conclusiones Migrar de ActionScript 1.0 a 2.0 trae muchisimas ventajas, elimina muchas "malas mañas" de programación y crea una nueva plataforma de desarrollo de RIAs (Rich Internet Applications) y contenidos interactivos para la web de alto impacto y rapido desarrollo, tu solo debes dar el primer paso :D Ahora claro, muchas cosas quedaron por fuera, pero son cosas mas puntuales y de los que hay tutoriales completos en Cristalab, como el objeto PrintJob, MovieClipLoader, los nuevos componentes como el Acorddion, metodos de ordenación de Arrays muy complejos, mantenimiento de proyectos con Flash Project y posible integración con CVSs y mucho mas!, ahora a experimentar. emm, una recomendación final (Y antes de ponerme pesado), los archvios de ejemplo estan disponibles para descarga, pero seria recomendable que ustedes mismos hicieran los ejemplos a partir del tutorial y solo los usaran en caso de alguna falla y como dije anteriormente, nuestros foros siempre estaran abiertos a sus preguntas

PROGRAMACIÓN ORIENTADA A OBJETOS EN ACTIONSCRIPT 2 http://www.cristalab.com/tutoriales/51/programacionorientada-a-objetos-en-actionscript-2 Desde que Xerox crease (En teoria) el concepto de objetos en nuestros computadores, la programación orientada a objetos creo un nuevo paradigma del desarrollo en un nuevo entorno mucho mas modular y practico para el programador. Sin embargo, muchos lenguajes actuales han hecho que la programación estructurada prevalezca. ActionScript 1.0 es un ejemplo de ellos; que, aunque tenia un sistema "pseudo" basado en objetos; en realidad no implementaba como debia ser la POO y la hacia un poco abstracta para el desarrollador. Ahora, la nueva versión de ActionScript, 2.0, ha cambiado este panorama, rigiendose a cabalidad con el estandar ECMA (Al que se acojen lenguajes como JavaScript o C#) y con un toque de similaridad a Java. Esto ha hecho mucho mas facil a los experimentados saltar de cualquier otro lenguaje a ActionScript y a los principiantes aprender el camino de la fuerza de una manera mas sencilla. Recomiendo antes de leer este tutorial; que si no tienes muchos conocimientos en ActionScript o estas recien llegado a Flash MX 2004 leas el Tutorial de ActionScript 2.0 antes de continuar; asi mismo, se requieren conocimientos basicos de programación. Si eres un experto de la programación o ya sabes que es esto de la orientación a objetos, saltate esta sección y ve directo a "Programación orientada a objetos en ActionScript 2.0"; si en cambio estas recien llegado a este mundo o no sabes que es la POO, inicia desde aqui

Indice de contenidos •

¿Que es la programación orientada a objetos?

9

•

•

Abstracción Encapsulación Herencia Programación orientada a objetos en ActionScript 2.0 o 1r Movimiento: Archivos externos .as, primera clase o 2o Movimiento: Miembros y Abstracción o 3r Movimiento: Encapsulación, getters y setters o 4o movimiento: Clases abstractas, Herencia y super o 5o Movimiento: Interfaces Conclusiones

o o o

¿Que es la programación orientada a objetos? Esta tecnica en si, se basa en el modelo de la vida real; donde tenemos objetos y estos a su vez tienen atributos y funciones (O en un lenguaje mas tecnico; propiedades y metodos) Por ejemplo; la mayoria de ustedes tendra el objeto Impresora, este objeto tiene una propiedad color, cuyo valor, probablemente sea gris, tambien tiene otras propiedades como "tener papel en la bandeja", cuyo valor puede ser verdadero o falso; la impresora tambien tiene la función o metodo principal Imprimir, que nos devuelve la hoja impresa, asi como el metodo Apagar, que no nos devuelve nada, pero internamente apaga la impresora. Esto es precisamente el ejemplo de un objeto; es un elemento (que puede ser considerado como una variable) que nosotros programamos, asignandole propiedades y metodos, a esto se le llama Miembros de la Clase. Pero ademas, los objetos pueden tener otras caracteristicas especiales que veremos detalladamente: 1. 2. 3. 4.

Abstracción Encapsulación Polimorfismo Herencia

Antes de empezar con cada uno debo aclarar, que el codigo en si que compone a un objeto se llama Clase y cada nueva variable a la que le es asignado un tipo de Clase se llama Objeto; y advertir que el polimorfismo no esta realmente dentro de Flash, asi como, para los mas experiementados, la herencia multiple (Gomen Nasai).

Abstracción Lo primero que se hace al construir un instrumento electronico es abstraer la mayoria de sus funciones; observa, por ejemplo, tu monitor; tiene una cantidad increible de transistores, chips y elementos electronicos que por medio de complejos mapas y rutas de electrones hacen que funcione como tal; pero para hacerlo funcionar no necesitas saber eso; solo necesitas oprimir el boton de encendido y el mismo guiara la electricidad por todo el flujo del circuito, analizara cada onda que llegue por sus cables de conexión del computador transformandola de analoga a digital y haciando que cada uno de esos unos y ceros aparezca como diferentes tonos de luminosidad frente a tus ojos ... pero tu solo oprimiste el boton de encendido; solo llamaste a la función "encender" del objeto "Monitor" y el objeto lo hizo todo dentro de si mismo; eso es abstraer los metodos de un objeto. Ahora usemos el ejemplo de un objeto Persona, y todas sus caracteristicas. En una Persona ocurre lo mismo; nosotros tenemos, por ejemplo, la función de hablar, que es una abstracción de una serie de procesos electricos cerebrales, movimientos musculares y modulación del aire; entonces, si creara un objeto Persona y quisiera hacerla hablar, abstraeria todas las cosas que hacen que una persona hable en una sola función y llamaria a esa función cuando la necesite, pasandole por parametro, lo que quiero que hable; tambien podria hacer que esa persona dijera su nombre si asigno al objeto Persona la propiedad nombre y solicito su valor al pedirle que hable; todo esto en codigo seria similar a :

10

//Declaro una nueva variable de tipo Persona; y por medio de new la creo en memoria var sandra:Persona = new Persona(); //Le asigno a su propiedad nombre el valor "Sandra" sandra.nombre = "Sandra"; //Le pido que hable; pasandole por parametro a su función "hablar" el texto que dira sandra.hablar("Mi nombre es " + sandra.nombre); //Esto hara que nuestra Persona "sandra" diga "Mi nombre es Sandra" En conclusión; abstracción es aislar todos los complejos metodos y propiedades de un objeto; tratando de hacerlos mas simples y modulares cada vez.

Encapsulación Hay muchos datos que no tiene porque conocerlo aquel que este usando la clase Persona; ya que son inherentes al objeto y solo controlan su funcionamiento interno; por ejemplo, cuando alguien te ve puede saber inmediatamente si eres hombre o mujer (propiedad) o puede hablarte y obtener una respuesta procesada (metodo); tambien puede conocer el color de tu cabello y ojos. En cambio, jamas sabra que cantidad de energia exacta tienes o cuantas neuronas te quedan, ni siquiera preguntandote ya que ninguna de tus propiedades externas visibles o funciones de comunicación al publico te permiten saber esos datos. Esto es la encapsulación u ocultación; hacer las variables que son innecesarias para el tratamiento del objeto pero necesarias para su funcionamiento privadas, asi como las funciones que no necesitan interacción del usuario o que solo pueden ser llamadas por otras funciones dentro del objeto (Como por ejemplo, palpitar) La encapsulación es muy conveniente y nos permite (Si programamos bien) colocar en funcionamiento nuestro objeto en cualquier tipo de sistema, de una manera modular y escalable (algunas de las reglas de la ingenieria del software).

Herencia Este quizas es el tema que mas problemas causa al estudiante; sin embargo, no es dificil en su concepción. El objeto Persona es un objeto muy generico y limitado en si; asi que se puede considerar como un objeto Abstracto; ya que por si mismo no puede crear una persona completa; sin embargo, sus funciones basicas son las mismas en todos los seres humanos, con diferencias puntuales, asi que podemos crear dos objetos Hombre y Mujer, que hereden todas sus caracteristicas genericas como respirar, hablar, nombre, etc, del objeto Persona, y sea en la implementación de cada objeto donde empiezen las diferencias. Si lo hago asi, sabre que tanto mis instancias (Ver nota abajo) del objeto Hombre como las del objeto Mujer tendran el metodo respirar, hablar, etc; y la propiedad nombre, color de piel, color de cabello; etc. Pero, por ejemplo, solo el objeto Mujer tendra el metodo "dar a luz" si yo se lo programo y solo el objeto Hombre tendra el metodo "Fecundar". Nota: Se le llama instancia a cada variable que tenga dentro de si un objeto de una clase especifica; un ejemplo de instancia es el objeto "sandra" que declaramos en el codigo de arriba; solo son consideradas instancias despues de que se les asigna memoria (Con la palabra clave new).

Todo esto es posible gracias a que el objeto Hombre y el objeto Mujer heredaron del objeto Persona todas sus propiedades y metodos. Aqui llega otro concepto que es el de objeto o Clase Abstracta; como es el objeto Persona, una clase abstracta es una clase de la que no se pueden instanciar objetos; solamente puede heredar a otro objeto sus propiedades y metodos, siendo el objeto heredado el que se instancie; en este caso, las clases Hombre y Mujer son instanciables porque heredan de la clase Persona; pero Persona no puede ser instanciada como un nuevo objeto, ya que al ser abstracta, el programador no se lo permite.

11

Programación orientada a objetos en ActionScript 2.0 Entremos en materia; vamos a ver ahora todas las caracteristicas anteriormente dichas aplicadas a ActionScript 2.0; asi que empezaremos con algunos ejemplos sencillos de clases incluidas dentro de Flash MX 2004 para ver como funciona. Observando este codigo encontraras muchas de las propiedades que mencionamos anteriormente acerca de los objetos; en los que son inherentes en Flash; para esto, vamos a suponer que tienes un campo de texto llamado "area_txt" y un MovieClip llamado "pelicula_mc"; lee atentamente los comentarios del codigo por favor:

//Iniciemos con una muestra de como se manejan las propiedades y miembros dentro de Flash /*Si conoces previamente cualquier lenguaje moderno veras que se rige por una sintaxis del tipo NOMBRE.VALOR o NOMBRE.FUNCION donde nombre es el nombre de nuestro objeto; aqui en Flash no es diferente :D*/ /*Para empezar, vamos a ver las PROPIEDADES, en este ejemplo, vamos a modificar la propiedad "text" de un campo de texto*/ area_txt.text = "Programación orientada a objetos"; /*Como puedes notar, las PROPIEDADES funcionan de la misma manera que simples variables Guardan un valor que tu puedes modificar */ /*Ahora veamos los METODOS, para esto, vamos a invocar al metodo "gotoAndPlay" de un Movieclip */ pelicula_mc.gotoAndPlay(50); /*Los METODOS se manejan de la misma manera que las funciones, en este caso, esta tenia un parametro "frame" cuyo valor pasamos como 50 */ /* Veamos la instanciación de objetos; vamos a crear un nuevo objeto "Date" */ var fecha:Date = new Date(); /* Primero coloco la instrución para declarar "var" luego el nombre de la variable, dos puntos y el nombre de la clase de la que esta variable sera una instancia; por ultimo por medio de "new" asigno memoria, diciendole que cree dentro de si un objeto "Date"; usamos el "()" como en las funciones para invocar su constructor; un concepto que veremos mas adelante */ En este corto ejemplo solo usamos clases incluidas dentro de Flash, TextField (El campo de texto), MovieClip y Date; ahora vamos a ver como se crean estas clases

1r Movimiento: Archivos externos .as, primera clase Lo primero que debes tener en cuenta que cuando estes programando clases, estas DEBEN ir en archivos externos .as; no pueden ser incluidas como parte del codigo dentro de la pelicula (Esto es muy conveniente, asi el codigo se vuelve reusable para otros proyectos). Mas adelante trataremos el tema de los paquetes de clases y los namespace; por el momento, solo mantendremos los archivos .as en la misma carpeta de nuestro .fla y .swf. Dentro de Flash, ve al menu File -> New (No vale CTRL+N) y en el cuadro de dialogo emergente elije "Actionscript File"; aparecera ante nosotros una vista de solo codigo, sin escenario; que sera donde

12

podremos programar nuestra clase (Ahora claro, no es necesario hacer esto dentro del IDE de Flash; podemos perfectamente hacerlo desde el Bloc de Notas, VI o cualquier editor de texto externo a Flash) Aqui empezaremos, creando nuestra primera clase; la clase Persona. Coloca este codigo dentro de Flash, en el modo anterior de "Actionscript File"

//Inicio declaración de la clase class Persona { //Variable nombre, miembro de la clase var nombre:String; //Función constructora; se llama asi porque se ejecutara en el momento //que se invoque la instrucción "new", es decir, cuando sea creada una //instancia de esta clase function Persona() { //El uso del apuntador "this" indica que nos estamos refiriendo a los //elementos de la clase; en este caso, modificaremos la variable "nombre" //mencionada arriba this.nombre = ""; //Esto simplemente para avisar en la ventana del output que la clase fue creada trace("Una nueva Persona ha nacido"); } } Ahora guarden este archivo como "Persona.as" en una carpeta que usaremos para guardarlo todo; por el momento IMPORTANTE: El nombre del archivo .as que contenga el codigo de las clases no es trivial; siempre el nombre del archivo debe ser el mismo nombre de la clase; por eso, en este caso, la clase se llama "Persona" y el archivo "Persona.as". Solamente puede ser declarada UNA clase por archivo, si vas a crear 7 clases, entonces necesitaras 7 archivos Ahora, crea una nueva pelicula, guardala con cualquier nombre en la misma carpeta donde colocaste el "Persona.as" y colocale este codigo en el primer keyFrame (Atención a los comentarios)

//Palabra clave que trae a nuestro codigo la clase que creamos; notese que no he colocado la //extensión ".as" import Persona; //Creo una nueva variable llamada "freddie" de tipo "Persona" var freddie:Persona; //Asigno memoria a la variable "freddie" y la convierto en una instancia de la clase "Persona" freddie = new Persona(); Prueba la pelicula con CONTROL+ENTER y notaras que en la ventana del Output aparecera el mensaje "Una nueva Persona ha nacido", demostrandonos que se ejecuto la función "Persona" al momento de contruirse el objeto; esto es a lo que se llaman "Constructores" Asi hemos iniciado la programación orientada a objetos con nuestra primera clase; Persona

2o Movimiento: Miembros y Abstracción Ahora definiremos los miembros de la clase; que no son mas que las funciones (metodos) y variables (propiedades) que integraran a nuestra clase. Si enumeramos funciones basicas de una persona; esta debe

13

1. 2. 3. 4.

Hablar Oir Tocar Mover

Y si hablamos de sus propiedades basicas 1. 2. 3.

Nombre Color de Ojos Color de Piel

Se que dejo muchisimas por fuera; pero esto es en pro de hacer mas sencillo el ejemplo. Asi que, las funciones basicas seran metodos de nuestra clase y las propiedades ... lo mismo. Vamos a modificar de esta manera nuestro codigo

//Inicio declaración de la clase class Persona { /* PROPIEDADES */ //Variable nombre, miembro de la clase var nombre:String; var colorOjos:String; var colorPiel:String; //Función constructora; se llama asi porque se ejecutara en el momento //que se invoque la instrucción "new", es decir, cuando sea creada una //instancia de esta clase function Persona() { //El uso del apuntador "this" indica que nos estamos refiriendo a los //elementos de la clase; en este caso, modificaremos la variable "nombre" //mencionada arriba this.nombre = ""; //Esto simplemente para avisar en la ventana del output que la clase fue creada trace("Una nueva Persona ha nacido"); } /* METODOS */ //Metodo "hablar", recibe por parametro la frase que dira //devuelve una frase procesada function hablar(frase:String):String { //La variable mensaje guardara "procesada" la frase que se dira var mensaje:String = this.nombre+" dice: "+frase; //Esta frase aparecera en el Output trace(mensaje); //Y asi mismo, la función la retornara return mensaje; } //Metodo "ver" function ver():Void { trace(this.nombre+" esta mirando alrededor"); } //Metodo "tocar"; recibe por parametro, otra persona para tocar function tocar(personaTocada:Persona):Void { trace(this.nombre+" ha tocado a "+personaTocada.nombre); } //Metodo "mover"; recibe por parametro el lugar a moverse

14

function mover(lugar:String):Void { trace(this.nombre+" se mueve a "+lugar); } }

Y empezemos a hacerlo divertido; hagamos que dos "Personas" interactuen; modifiquen el codigo de la pelicula .FLA a esto:

//Trae a nuestro codigo la clase que creamos; notese que no he colocado la extensión ".as" import Persona; //Creo una nueva variable llamada "freddie" de tipo "Persona" var freddie:Persona; //Asigno memoria a la variable "freddie" y la convierto en una instancia de la clase "Persona" freddie = new Persona(); //Creo otra persona var sandra:Persona = new Persona(); //Les asigno nombres freddie.nombre = "Freddie®"; sandra.nombre = "Shala"; //Empezamos a llamar a sus metodos :D freddie.mover("donde esta la otra persona"); sandra.ver(); freddie.hablar("Hola, ¿como te llamas?"); sandra.hablar(sandra.nombre+" y tu?"); freddie.hablar("Yo soy "+freddie.nombre); freddie.ver(); freddie.tocar(sandra); sandra.hablar("Go to fuck"); freddie.hablar(":("); Lo que mostrara la siguiente salida en la ventana del trace:

Una nueva Persona ha nacido Una nueva Persona ha nacido Freddie® se mueve a donde esta la otra persona Shala esta mirando alrededor Freddie® dice: Hola, ¿como te llamas? Shala dice: Shala y tu? Freddie® dice: Yo soy Freddie® Freddie® esta mirando alrededor Freddie® ha tocado a Shala Shala dice: Go to fuck Freddie® dice: :( Bueno; aqui empiezo a ver que estas clases podrian ser utiles (aparte de por diversión) en algun tipo de chat hecho en Flash; pero en esta ocasión seran simplemente creadas con motivos "Educativos". Nota: Ninguna de las situaciones interpretadas en este tutorial pertenecen o se relacionan a la vida real, ..

3r Movimiento: Encapsulación, getters y setters En nuestro movimiento anterior; creamos propiedades y metodos "miembro" de la clase; como un color de ojos, hablar, ver etc. Ahora vamos a encapsular todos estos datos; algo escencial en la programación. Como menciona antes en la teoria; la encapsulación es necesaria para crear una verdadera programación orientada a objetos. La encapsulación nos permitira esconder del "mundo exterior" de la clase las variables y funciones internas que no llamaremos desde una instancia. De hecho, la teoria dice que nosotros NO DEBEMOS manipular directamente las propiedades (variables) de una clase; para ello usaremos un tipo de funciones llamadas getters y setters. Nota: Las funciones getters y setters son funciones que nos permiten manipular la asignación y llamado de variables dentro de nuestro programa; como su nombre lo indica son funciones para asignar un dato a una variable set, o para obtener el dato de una variable get. Una vez creadas, cada vez que

15

asignemos un dato a una variable sera llamada su función set y cuando pidamos el dato de una variable veremos su get. Asi que a la orden del dia tenemos 1. 2. 3.

Hacer publicas las funciones o propiedades a las que accederemos desde el exterior Hacer privadas las funciones o miembros que no queremos/debemos acceder desde el exterior Crear funciones getter/setter para las propiedades que ahora son privadas y queremos modificar

Manos a la obra; modifiquen el codigo de la clase asi:

//Inicio declaración de la clase class Persona { /* PROPIEDADES */ //Variable nombre, miembro de la clase public var nombre:String; private var colorOjos:String; private var colorPiel:String; //Función constructora; se llama asi porque se ejecutara en el momento //que se invoque la instrucción "new", es decir, cuando sea creada una //instancia de esta clase function Persona() { //El uso del apuntador "this" indica que nos estamos refiriendo a los //elementos de la clase; en este caso, modificaremos la variable "nombre" //mencionada arriba this.nombre = ""; //Esto simplemente para avisar en la ventana del output que la clase fue creada trace("Una nueva Persona ha nacido"); } /* METODOS */ //Metodo "hablar", recibe por parametro la frase que dira //devuelve una frase procesada public function hablar(frase:String):String { //La variable mensaje guardara "procesada" la frase que se dira var mensaje:String = this.nombre+" dice: "+frase; //Esta frase aparecera en el Output trace(mensaje); //Y asi mismo, la función la retornara return mensaje; } //Metodo "ver" public function ver():Void { trace(this.nombre+" esta mirando alrededor"); } //Metodo "tocar"; recibe por parametro, otra persona para tocar public function tocar(personaTocada:Persona):Void { trace(this.nombre+" ha tocado a "+personaTocada.nombre); } //Metodo "mover"; recibe por parametro el lugar a moverse public function mover(lugar:String):Void { trace(this.nombre+" se mueve a "+lugar); } //GETTERS Y SETTERS

16

//Funciones "get" y "set" para el color de ojos; funcionaran en el codigo //como una variable llamada "ojos" y sera llamado su set cada vez que se //le asigne algo; y su get cada vez que se solicite su valor public function set ojos(color:String):Void { trace(this.nombre+" tiene ojos de color "+color); this.colorOjos = color; } public function get ojos():String { return this.colorOjos; } //Funciones "get" y "set" para el color de piel public function set piel(color:String):Void { trace(this.nombre+" tiene piel "+color); this.colorPiel = color; } public function get piel():String { return this.colorPiel; } } Como ven; he usado las palabras clave public y privatedel lenguaje ActionScript 2.0 para declarar algunas funciones y variables publicas y otras privadas. Las privadas solo podran ser llamadas desde el codigo dentro de la clase; mientras que las publicas se podran llamar desde cualquier lugar del codigo. NOTA: toda función set debe asignarle algo a alguna variable miembro de la clase y toda función get debe retornar algun valor Para ver un poco mas la utilidad de lo que acabamos de hacer y hacer uso de los setters y getters vamos a modificar y reescribir algunas partes del codigo en la pelicula .FLA:

//Trae a nuestro codigo la clase que creamos; notese que no he colocado la extensión ".as" import Persona; //Creo una nueva variable llamada "freddie" de tipo "Persona" var freddie:Persona; //Asigno memoria a la variable "freddie" y la convierto en una instancia de la clase "Persona" freddie = new Persona(); //Creo otra persona var sandra:Persona = new Persona(); //Les asigno nombres freddie.nombre = "Freddie®"; sandra.nombre = "Shala"; //Les asigno color de ojos y piel freddie.ojos = "negro"; sandra.ojos = "azul"; freddie.piel = "blanca"; sandra.piel = "morena"; //Empezamos a llamar a sus metodos :D freddie.mover("donde esta la otra persona"); sandra.ver(); freddie.hablar("Hola, ¿como te llamas?"); sandra.hablar(sandra.nombre+" y tu?"); freddie.hablar("Yo soy "+freddie.nombre); freddie.ver(); freddie.hablar("Me gustan tus ojos color "+sandra.ojos+" y tu piel "+sandra.piel); sandra.hablar("Gracias :D"); freddie.tocar(sandra);

17

sandra.hablar("..."); freddie.hablar("...");

Lo que nos dara tambien un cambio en la ventana del trace:

Una nueva Persona ha nacido Una nueva Persona ha nacido Freddie® tiene ojos de color negro Shala tiene ojos de color azul Freddie® tiene piel blanca Shala tiene piel morena Freddie® se mueve a donde esta la otra persona Shala esta mirando alrededor Freddie® dice: Hola, ¿como te llamas? Shala dice: Shala y tu? Freddie® dice: Yo soy Freddie® Freddie® esta mirando alrededor Freddie® dice: Me gustan tus ojos color azul y tu piel morena Shala dice: Gracias :D Freddie® ha tocado a Shala Shala dice: ... Freddie® dice: ...

4o movimiento: Clases abstractas, Herencia y super Repasemos los objetos de la vida real; todos los que estan leyendo esto tienen en frente un computador (O a los pies, no se); entonces tenemos la clase Computador de la que instanciamos objetos que son los que usamos; todos los objetos de la clase Computador hacen mas o menos lo mismo; tienen metodos para calcular, prender, apagar, escribir, borrar ... pero pensandolo bien; esas son las funciones generales de la clase Computador, porque en si, la clase es una clase abstracta; tu no tienes un Computador como el resto, tu Pc es especial, vamos a dividirlo en dos clases (Injusto, hay mas, pero estas son las mas comunes); PC y Mac, asi, a los PC puedes instalarles Windows y Linux y puedes usar procesadores Intel, Transmeta o AMD; esas son propiedades y metodos exclusivos de la clase "PC"; en los computadores que sean instancias de la clase "Mac", puedes instalar el MacOsX o Linux tambien, usas procesadores Motorola o PowerPC ... pero en ambos tienes las mismas funciones comunes de la clase Computador ... ¿como hacer que las igualdades prevalezcan y sin embargo podamos diferenciar una clase de la otra?; ah facil, creamos dos clases que tengan un pedazo del mismo codigo y el resto distinto ... y si tenemos 5000 clases con cosas en comun y quiero cambiar un detalle de lo "comun", tendria que cambiarlo en las 5000 clases ... la solución !Herencia¡ Con Herencia, podemos hacer que Computador sea una clase abstracta (Entiendase por clase abstracta una clase que no se puede instanciar, solo heredar) y crear dos nuevas clases, Mac y PC, que hereden de Computador todas sus propiedades y metodos e implementen ellas mismas sus propios. ¿Por que es importante que Computador sea una clase abstracta? Dado que Computador tiene los metodos y propiedades genericos, pero no los especificos, si un programador crea una instancia de una clase Computador aparte de que seria un poco inutil saltaria toda la teoria de la encapsulación del codigo ¿Y como hago lo que dicen las mil palabras de arriba en ActionScript?, bueno, implementemos las tres clases; una clase "Computador", en un archivo Computador.as, una "PC" en PC.as y una Mac en un archivo Mac.as; todas en la misma carpeta junto a un archivo FLA de cualquier nombre donde instanciaremos los objetos; iniciemos con el archivo Computador.as

//Esta sera nuestra clase Computador, de la que heredaran las otras dos class Computador { //Función constructora; este constructor se ejecutara primero que el //constructor de la clase heredada function Computador() { trace("Creado un nuevo computador"); } //Todos los computadores prenden ¿no? public function encender():Void { trace("El computador esta iniciando");

18

} //Y todos se apagan ... en teoria public function apagar():Void { trace("El computador ha sido apagado"); } }

Ahora el archivo PC.as

//La palabra clave "extends" es la que le indica a la clase que //herede todas sus propiedades y metodos de una superclase, en //este caso "Computador" class PC extends Computador { //Esta propiedad nos devolvera el sistema operativo private var SO:String; //Constructor del PC function PC () { trace("Has creado un PC"); } //Función setter para colocar un sistema operativo public function set sistema(SSOO:String):Void { this.SO = SSOO; } //Función que me dira que sistema tengo instalado public function sistemaInstalado(){ if(this.SO == "windows"){ trace("Tienes instalado Windows X_X"); } else if (this.SO == "linux"){ trace("Tienes instalado Linux ^_^"); } else { trace("No se que tienes instalado O_o"); } } } Luego nuestra clase Mac en Mac.as

//Aqui es lo mismo, solo que en la clase Mac class Mac extends Computador { //Constructor del PC function Mac() { trace("Has creado una Mac :-)"); } //Como diferencia al PC, aqui instalamos Mac public function instalarMac():Void { trace("Has instalado MacOSX"); } //Las Mac tienen "Rendezvous" que les permite configurarse solas //en cualquier entorno de red; demosle esa capacidad public function rendezvous():Void { trace("Detectando redes cercanas ..."); trace("Red configurada ^^"); } //Y una funcioncilla para navegar con Safari alguna web public function safari(URL:String):Void { trace("Estas navegando "+URL); } } Por ultimo, en el archivo FLA vamos a "jugar" creando una Mac y una PC, haciendo cosas que haces ambas (por medio de la herencia de la clase Computador) y haciendo cosas que solo estan implementadas y son exclusivas de cada clase

//Importo las clases PC y Mac, estsa al heredar de la clase Computador //importan automaticamente la misma import PC; import Mac;

19

//Inciemos con el PC trace("**** SUNNY *****"); //Le asigno memoria, var Sunny:PC = new PC(); //Llamo a una función de la clase Computador que hereda la clase PC Sunny.encender(); //Llamo a un setter miembro de la clase PC nada mas Sunny.sistema = "linux"; //Llamo a un metodo propio de la clase PC Sunny.sistemaInstalado(); //Llamo al metodo apagar, de la clase heredada Computador Sunny.apagar(); /**/ //Sigamos con el Mac trace("**** BLUESHOCK *****"); //Le asigno el tipo "Mac" y creo la instancia de la clase con new var Blueshock:Mac = new Mac(); //Llamo a un metodo de la clase Computador, heredado a Mac, por ende //aparece en la clase Mac y PC Blueshock.encender(); //Llamo al metodo propio de Mac "instalarMac", este no aparece en la //clase PC Blueshock.instalarMac(); //Otro metodo miembro de la clase Mac Blueshock.rendezvous(); //Llamo al metodo Apagar, heredado de "Computador" Blueshock.apagar(); Al darle CONTROL+ENTER a nuestra pelicula encontraremos que el Output nos muestra el proceso, donde se evidencia que cada vez que hacemos un new Mac() o un new PC() se ejecuta primero el constructor de la clase Computador, y luego el de la clase que lo heredo; vean y analizenlo ustedes mismos

**** SUNNY ***** Creado un nuevo computador Has creado un PC El computador esta iniciando Tienes instalado Linux ^_^ El computador ha sido apagado **** BLUESHOCK ***** Creado un nuevo computador Has creado una Mac :-) El computador esta iniciando Has instalado MacOSX Detectando redes cercanas ... Red configurada ^^ El computador ha sido apagado Asi de una manera sencilla hemos implementado herencia en nuestras clases de Flash. Y bueno, como ya puedo verlos preguntandose ¿Y esto a mi de que me sirve aparte de complicarme la vida?; vamos a analizar un ejemplo practico, los componentes de Flash MX 2004. Estos componentes, como pueden ver, tienen similitudes muy comunes; por ejemplo, casi todos tienen el evento change o click y en todos hace lo mismo y se implementa de la misma manera; todos tienen el evento setStyle, que permite cambiar el estilo del componente y asi la mayoria tiene cosas similares entre uno y otro; esto es porque todos los componentes heredan de una superclase llamada UIObject, que contiene las propiedaes y metodos basicos para todos los componentes; asi no tenemos que duplicar esfuerzos recreando cada propiedad o metodo comun, solo heredamos e incluimos las que marquen la diferencia. En entornos profesionales de desarrollo esto es extremadamente util, ya que si perteneces a un equipo de programación y necesitas que X parte del proyecto este desarrollada antes de hacer la tuya, no es necesario; digamos que estamos haciendo un videojuego y tu tienes encargada la función de hacer los movimientos de los enemigos y otro compañero tuyo los movimientos del personaje principal; se puede

20

crear una superclase llamada Persona, que contenga las bases fisicas comunes entre el movimiento de los enemigos y el de los personajes (Por ejemplo, la gravedad siempre es la misma) y despues de que se pongan de acuerdo que metodos tendra una Persona en comun, cada uno se pone a desarrollar su parte mientras otro termina la clase Persona. Nota: Una SuperClase es el nombre comun que se le da a las clases abstractas o clases que son heredadas por otras; en este ejemplo, las clases normales eran PC y Mac y la SuperClase era Computador

5o Movimiento: Interfaces Una interfaz basicamente es una declaración de propiedades y metodos de una clase sin codigo!!, es decir, una clase que solo tiene los nombres, los tipos y los parametros de los metodos y las propiedades, pero no las implementa; es muy util para pautar reglas en equipos de trabajo y algo similar a la herencia Esta vez usaremos animales para nuestro ejemplo, un pato y un gato (No pregunten por que los escoji ); todos los animales comen, pero el gato come con el hocico y el pato con el pico, al ser procesos de igual nombre pero distinto proceso, una interface que implemente el metodo comer y luego ellos "implementen esa interface" y le pongan codigo respectivo seria lo ideal; asi mismo ambos caminan, pero uno lo hacen con dos patas y otro lo hace con 4 Lo primero que haremos entonces sera crear la interface de Animal; asi que creen un archivo Animal.as y coloquenle este codigo

//Declaramos nuestra interface "Animal" interface Animal { //Como ven, se declara la "comer", con un parametro //"comida" de tipo "String" y es una función "Void" que no retorna nada, pero //No se coloca codigo alguno en la función, solo se declara function comer(comida:String):Void; function caminar(destino:String):Void; } Ahora creemos las clases que implementaran esa interface, iniciando por Gato.as

//La palabra clave "implements" es la que me permite asignarle una interface //a una clase class Gato implements Animal { //El constructor de toda la vida ;-) function Gato() { trace("miau"); } //Ahora la implementación de las funciones de la interface //Debe escribirse exactamente igual a como esta en la interface public function comer(comida:String):Void { trace("El gato, con su hocico esta comiendo "+comida); } //Igual la de caminar public function caminar(destino:String):Void { trace("El gato, camina en sus cuatro patas a "+destino); } } Pasemos a la clase Pato, en Pato.as

class Pato implements Animal { //Lo mismo, un constructor para el pato function Pato() { trace("quack!"); } //De nuevo implementamos los metodos descritos en la interface

21

//Aqui con un codigo distinto public function comer(comida:String):Void { trace("El pato come "+comida+" usando su pico"); } //Igual la de caminar public function caminar(destino:String):Void { trace("Hacia "+destino+" camino en dos patas el pato; lol");

}

}

Para terminar como siempre, creamos un FLA en la misma carpeta de los .AS; que es donde crearemos las variables y el codigo que le da utilidad a nuestras clases; en el colocamos (Primer keyFrame):

//Importo las clases Gato y Pato, que implementan la interface Animal import Gato; import Pato; //Les asigno tipo de objeto y memoria var garfield:Gato = new Gato(); var lucas:Pato = new Pato(); //Llamo a la función comer, declarada en la interface y escrita en la clase garfield.comer("lasaña"); //Igual con la de caminar garfield.caminar("el sofa"); //Si notan, se llama igual, pero su codigo y función es diferente lucas.comer("maiz"); lucas.caminar("el fin del mundo"); Y si le damos CONTROL+ENTER, podemos ver su comportamiento reflejado el el Output, las funciones fueron implementadas con mismo nombre, tipo y argumentos, pero con distinto codigo que genera resultados diferentes

miau quack! El gato, con su hocico esta comiendo lasaña El gato, camina en sus cuatro patas a el sofa El pato come maiz usando su pico Hacia el fin del mundo camino en dos patas el pato; lol Asi hemos implementado un sistema simple de interfaces entre dos clases.

Conclusiones La programación orientada a objetos es un mundo increible de posibilidades sin fin, que no puede ser cubierto en un solo tutorial y, por su naturaleza de composición mas artistica que cientifica, depende de la experiencia y del programador la buena implementación de la misma. Algunos temas que recomendaria consultaras por tu cuenta serian clases, propiedades y metodos estaticos y paquetes; interesantes para el orden de una aplicación. En Cristalab tenemos un ejemplo util del uso de Clases en ActionScript 2.0 y es la Galeria de fotos clab_Gallery; un interesante proyecto de nuestra web que implementa muchos de los conceptos vistos aqui :D, asi mismo, todos los componentes de Flash MX 2004 estan programados usando clases intensivamente, asi como proyectos independientes de la web de Macromedia, como el software Breeze. Espero sea muy util este tutorial en el proceso de aprendizaje de Actionscript 2.0; en caso de tener cualquier duda o pregunta no dudes dirigirla a nuestros foros; si encuentras algun error en el tutorial por favor avisame a [email protected]

22

CREAR UN SONIDO PERMANENTE (LOOP) POR MEDIO DE ACTIONSCRIPT http://www.cristalab.com/tutoriales/23/crear-un-sonidopermanente-loop--por-medio-de-actionscript Un truco sencillo y muy útil a la hora de crear una web o una multimedia con sonido es dotarlo de música ambiental de fondo; pero el primer reto, sobre todo cuando se usan escenas es que el sonido se mantenga durante toda nuestra película; así que aquí mostrare los pasos a seguir para conseguir un sonido de fondo continuo en nuestra web.

Importar un sonido Obviamente, lo primero que debemos hacer es conseguir un sonido, mejor si es corto para que notemos el reinicio del sonido cuando termine su primera pasada; es recomendable en estos casos es usar un loop de sonido continuo; en FlashKit hay muchos disponibles para descargar. Ahora debemos importar nuestro sonido a Flash, igual que si importáramos una imagen, con CONTROL+R buscaremos nuestro archivo de sonido y una vez elegido quedara guardado en la librería.

Como haremos el sonido infinito por medio de ActionScript, necesitamos decirle al sonido que este disponible para ActionScript; así que en la librería, damos click derecho sobre el icono del sonido y elegimos la opción Linkage del menú; en el cuadro de dialogo emergente damos click a Export for ActionScript y en donde dice Identifier escribiremos soni di ll o, que será el nombre con el que ActionScript identificara nuestro sonido. Así debe quedar el cuadro de dialogo antes de dar aceptar:

Imagen del cuadro de dialogo "Linkage Properties"

23

Colocando el código Ahora vamos al primer KeyFrame de nuestra película y colocamos el siguiente código (Lee los comentarios atentamente)

/* Esta es una variable que nos permitirá saber si ya iniciamos el código del loop infinito para impedir repetición de loops */ if (noRepeat == undefined) { //Aqui la declaramos para que no vuelva a ser "undefined" y este código se ejecute //una vez aunque la línea de tiempo vuelva a este KeyFrame var noRepeat:Number; noRepeat = 1; //Creamos una nueva variable de tipo sonido var sonido:Sound = new Sound(); //Le adjuntamos el sonido que declaramos en la librería como "sonidillo" sonido.attachSound("sonidillo"); //Le decimos, que si el sonido ya se termino de ejecutar sonido.onSoundComplete = function() { //Vuelva a arrancarlo this.start(); }; //Iniciamos el sonido sonido.start(); } Como ven es un código bastante sencillo; fácil de utilizar y muy practico a la hora de crear sonidos ambientales rápidamente; no coloco ejemplos ni archivos para descargar a este tutorial para animarlos a que ustedes mismos creen sus propios ejemplos y completen este tutorial, sencillo y útil

USO DE LA CLASE COLOR DE FLASH http://www.cristalab.com/tutoriales/142/uso-de-la-clasecolor-de-flash .En este tutorial explicaré de manera sencilla, el uso de la clase COLOR que está disponible desde flash player 5. Desde el constructor hasta un pequeño script que nos permita hacer transiciones de un color a otro con un easing sencillo, todo explicado a continuación. El uso que le puedes dar a este tutorial va desde cambios de color a los fondos dinámicos o cambios de color a cualquier objeto, botón, moviec, etc. El método setTranform consta de un objeto (que lo creamos con el constructor new Object ) que es el que nos permite dar las “coordenadas” de color que queremos dar, este objeto consta a su vez de las propiedades ra, rb, ga, gb, ba, bb, aa, ab. Estas propiedades nos darán el valor de desplazamiento para los colores (R) rojo, (G) verde, (B) azul y la transparencia (A) alfa. Cada propiedad del objeto funciona de esta manera:

• •

ra es el porcentaje del componente rojo (de -100 a 100). rb es el desplazamiento del componente rojo (de -255 a 255).

24

• • • • • •

ga es el porcentaje del componente verde (de -100 a 100). gb es el desplazamiento del componente verde (de -255 a 255). ba es el porcentaje del componente azul (de -100 a 100). bb es el desplazamiento del componente azul (de -255 a 255). aa es el porcentaje de transparencia alfa (de -100 a 100). ab es el desplazamiento de transparencia alfa (de -255 a 255).

Para este tutorial no nos meteremos con los porcentajes de los componentes (ra, ga, ba y aa), solo jugaremos con los desplazamientos de 0 a 255 así la propiedad nos deje un intervalo (-255 a 255). Empecemos con algo sencillo, podemos ver simplemente que la clase color funcione y aprendamos (para los más principiantes) a crear el objeto del método setTranform(): Así que primero crearemos una nueva Movie Clip en el escenario, bueno los más avanzados pueden crearlo por AS, yo comenzaré por lo más sencillo, y el nombre que le daremos será “mc1”. Puede ser un cuadro de color negro o la figura que ustedes quieran, pero que el nombre de instancia sea este “mc1” y que sea negro para notar el script.

Luego en nuestro primer frame pondremos este codigo:

//Creamos el constructor para la clase color mycolor = new Color(this.mc1); //Creamos el famoso objeto coltransf = new Object(); //Le damos valores a las propiedades del objeto coltransf = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:255, aa:aa, ab:255}; //y taraaaaaaaaan, damos la orden que aplique los cambios mycolor.setTransform(coltransf); Así exportamos a swf y la película nos debe mostrar un cuadro, circulo, bueno lo que ustedes hayan hecho, de un color azul. Si es así vamos bien. Si sale negro deben mirar si copiaron bien el código o también esta ahí el archivo de nivel 1.

25

En este momento tenemos claro como funciona la clase Color para darle vía código propiedades de color y alfa a un objeto. Ahora pasaremos a algo un poco más complejo: Con una función haremos que al pasar el Mouse por encima de un objeto este cambie de color y al pasar fuera vuelva a otro estado. Digamos un simple rollOver y rollOut. Para esto tendremos este código en el primer frame:

//Creamos el objeto que no tiene que ser creado para cada instancia objeto_color = new Object(); //creamos la funcion que le dara color al objeto function colorIn(mc) { //Creamos el constructor para la clase color mycolor = new Color(mc); //Le damos valores a las propiedades del objeto objeto_color = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:255, aa:aa, ab:255}; //y aplicamos mycolor.setTransform(objeto_color); } //y creamos la funcion que le dara color cuando se haya pasado fuera function colorOut(mc) { //Le damos valores a las propiedades del objeto para que vuelva a ser NEGRO objeto_color = {ra:ra, rb:0, ga:ga, gb:0, ba:ba, bb:0, aa:aa, ab:255}; //y damos la orden que aplique los cambios de vuelta mycolor.setTransform(objeto_color); } Luego podemos copiar tantos objetos como queramos, teniendo en cuenta de nombrar cada instancia diferente, ejemplo: mc1, mc2, mc3, mc4, etc... y para cada instancia del objeto le asignaremos el siguiente script que llamará las funciones:

on (rollOver) { _root.colorIn.call(this, this); } on (rollOut){ _root.colorOut.call(this, this); } El resultado es un cambio de color con rollovers para cada instancia de objeto al que le hayamos puesto el script anterior, ustedes pueden probar cambiando los valores de las funciones y viendo el resultado… Creo que hasta acá la dificultad es normal. (ver archivo nivel 2.fla).

Ejemplo: Color Dinamico Nivel 2

Nota: el ejemplo fue ligeramente modificado en ancho y altura, para mostrarlo en el tutorial, en los archivos del tutorial se encuentra el original del autor. Ahora sí a lo que vinimos, cambios de color dinámicos con “easing”. Lo que haremos es el mismo efecto anterior con un script mejorado un poco más complejo que dará como resultado el manejo del color azul con easing, sí! solo el color azul, depende de sus comentarios y peticiones para hacerlo con todos los colores y el alfa… Además un poco más de tiempo, ya explicaré al final por qué.

26

Este es el código para el primer frame:

/*creamos la funcion *color* indicando las propiedades para cada instancia, asi creara un nuevo color con la propiedad *mycolor*, un nuevo objeto con la propiedad *obj* y lo mas importante la propiedad de color azul que sera *bb*/ function color(mc, mycolor, obj, bb, bf) { //Creamos el constructor para la clase color mycolor = new Color (mc); //creamos el objeto para cada instancia obj = new Object(); //establecemos el valor incial del azul en 0 bb = 0; //establecemos la velocidad usada para el easing in y out vel = 20; //establecemos el valor final que queremos dar al azul bf = 255; /*creamos un controlador de evento que evaluara el valor del color y le asignara el valor de la velocidad por cada frame hasta que llegue al valor final del azul que queremos*/ mc.onEnterFrame = function() { if (bb0) { bb -= vel; obj = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:bb, aa:aa, ab:255}; mycolor.setTransform(obj); } else if (bb == 0) { delete mc.onEnterFrame; } }; }; } Y para cada instancia a la que queramos darle el efecto solo basta con ponerle este script.

on (rollOver) { _root.color.call(this, this); } Y listo… Espero que les guste y más que todo que les ayude con sus proyectos. Este último script está, obviamente, en el archivo de Nivel 3.fla

27

USAR CSS EN FLASH http://www.cristalab.com/tutoriales/192/usar-css-en-flash Cuantas veces hemos querido poder cambiar el diseño visual de mi desarrollo en Flash, sin tener que cambiar los componentes uno a uno. Un trabajo tedioso y que definitivamente nos quitaría mucho tiempo. El propósito de este manual es que podamos controlar la apariencia grafica de nuestro sitio hecho en flash editando tan solo un archivo CSS. Para este manual recomiendo tener un conocimiento mínimo de lo que son las hojas de estilo CSS, si no sabes de lo que te estoy hablando te dejo un pequeño tutorial de css basico. Supongamos que tienes diferentes textbox en tu sitio web y decides que ya no te gusta la fuente, tamaño o el color que le pusiste. Si esto pasa y tienes hechos unos 10 campos de texto ¿Imaginas cambiar uno a uno manualmente? Pues eso ya es cosa del pasado. Flash nos permite agregarle propiedades a todos nuestros campos de textos usando CSS, permitiendo así cambiar la apariencia grafica de nuestro sitio sin grandes esfuerzos. Y esto es posible ya que Flash también contiene propiedades muy parecidas a las del CSS de XHTML. Para darte una idea mencionaré algunas: Propiedad de CSS text-align

Propiedad de Actionscript textAlign

font-size

fontSize

textdecoration

textDecoration

margin-left

marginLeft

margin-right

marginRight

font-weight font-style

fontWeight fontStyle

color

color

Uso y valores soportados Reconoce los valores de izquierda, derecha y centrado. Solo la parte numérica del valor es usado, expresado en px o pt. Reconoce los valores none y underline. Solo la parte numérica del valor es usado. Expresado en pixeles o puntos (px, pt). Y pone un margen en el lado izquierdo. Solo la parte numérica del valor es usado. Expresado en pixeles o puntos (px, pt). Y pone un margen en el lado derecho. Reconoce valores normal y bold. Reconoce valores normal e italic. Solo acepta valores hexadecimales o algunos nombres de colores en ingles, como red, black, yellow.

Necesitamos una forma de decirle a nuestro textbox como ajustar su formato o una parte de nuestro texto. Las propiedades de las hojas de estilo CSS no son buenas para esto, es por eso que necesitamos usarlas en conjunción con etiquetas HTML (Hipertext Markup Lenguague). En la siguiente tabla muestro unas etiquetas que Flash soporta desde la versión MX 2004 y posteriores: Nombre de Estilo p body li a a:link a:hover a:active

28

Estas son algunas etiquetas de las tantas que soporta Flash MX 2004, solo por mencionar algunas.

Descripción del uso de hoja de estilos CSS. Ahora haremos nuestra hoja de estilos CSS como un archivo de texto. En mi caso usaré Dreamweaver para crearla. Las formas de definir nuestro estilo son variadas y depende de lo que queramos hacer, un ejemplo sería lo siguiente:

p { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #0000FF; } En el código anterior definimos un estilo para todas las etiquetas

Por ejemplo: si escribimos

Hola Mundo

, el texto que está entre la etiquetas

, tomará las propiedades del estilo que definimos, que serían: tipo de fuente Arial, tamaño de la fuente de 11 pixeles y color #0000FF (rojo). Podemos hacer estilos tipo clase que pueden ser aplicadas a elementos HTML específicos usando las etiquetas

o <span> (cabe aclarar que no son clases de ActionScript). Las clases CSS se inician con un punto, puede ser el que queramos, pero recomiendo que sea un nombre alusivo al elemento al que queremos modificar, por ejemplo, si queremos definir las propiedades de los títulos, un nombre candidato para la clase sería:

.titulo{ font-family: Arial,Helvetica,sans-serif; font-size: 14px; color: #FF0000; } Ya que tenemos la clase hecha, se la aplicaremos a la etiqueta <span> de esta forma:

<span class='titulo'>Este es mi titulo 1 El nombre de la clase entre comillas va escrito sin el punto, este solo se usa para definir a la clase. La etiqueta

se usa de la siguiente manera:

Este es el titulo

Creando nuestra hoja de estilo CSS Ahora vamos a crear nuestro archivo CSS para usarlo en Flash. Los pasos a seguir seran los siguientes:

• • •

Crear un objeto CSS. Agregar el estilo CSS Asignar el objeto de la hoja de estilo a un campo de texto que contenga el texto HTML.

29

Nota: Cuando asignamos un CSS a un campo de texto, ocurren cambios a su comportamiento normal, unos de esos cambios son que se convierte en un campo de texto de solo lectura y no puede ser editado por el usuario. Ahora si creamos nuestra hoja de estilos y lo guardamos con el nombre que gustes en mi caso lo llamare “miCSS.css”:

p { color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; display: inline; }

a:link { color: #FF00FF; text-decoration: underline; }

a:hover{ color: #999999; text-decoration: none; }

.titulo { color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; display: block; }

.concepto { color: #666600; font-style: italic; font-weight: bold; display: inline; }

Creando la película Flash

30

Los pasos a seguir son: 1. 2. 3.

Abrir un nuevo documento de Flash Creamos un campo de texto sobre la escena. Al campo de texto le modificamos la propiedades: texto dinámico, multilínea y seleccionar la opción generar texto como HTML. Como se ve en la siguiente imagen.

4. 5.

Toma una instancia del campo de texto y llámalo mi_texto. Abrimos el panel de acciones, podemos abrirlo presionando la tecla F9. En el primer fotograma de la línea de tiempo agregamos el siguiente código en el panel de acciones, que ya abrimos anteriormente

//Creamos un nuevo objeto de hoja de estilo var myCSS = new TextField.StyleSheet(); //Especificamos la localización del archivo CSS, que creamos. var cssURL = "miCSS.css"; //Escribimos el texto que queremos mostrar //pero como lo escribiriamos en HTML

ejemploTexto = "

Css en Flash MX 2004

"; ejemploTexto += "

<span class='concepto'>Hojas de estilo Css: "; ejemploTexto += "Determinan el estilo y el formato de los elementos a los que se aplican"; ejemploTexto += "como textos, imagenes, etc.";

31

ejemploTexto += "Los links tambien se pueden personalizar "; ejemploTexto += "Cristalab "; ejemploTexto += "Este ejemplo funciona de la misma manera en Flash 8.

";

//Cargamos el archivo CSS myCSS.load(cssURL); //Definimos el manejador onLoad myCSS.onLoad = function(exito) { if (exito) { /*Si el el archivo CSS se cargo sin ningun error lo asignamos al objeto texto "miTexto" y asignamos el texto en HTML al campo de texto "miTexto.text" */ mi_texto.styleSheet = myCSS; mi_texto.text = ejemploTexto; //Puede ser un texto html" } };

En el codigo anterior creamos un nuevo objeto de hoja de estilo (es importante hacer notar que StyleSheet(); es una clase, mientras que styleSheet ( con ‘s’ minúscula inicial) que usamos en la parte miTexto.styleSheet es una propiedad.) Una vez hecho lo anterior usamos el método ‘load’ para cargar nuestro archivo CSS, “miCSS.css” y usamos el método ‘onLoad’ para comprobar si se ha cargado correctamente, si es así entonces asociamos la hoja de estilo al campo de texto antes de asignar nuestro texto al campo de texto. Guardamos la película como EjemploCSS.fla en la misma carpeta donde hayamos guardado nuestra hoja de estilos CSS, ejecuta la película con ctrl + Enter, para probar que funcione. Esto es lo que tienes que ver:

Puedes cambiar las propiedades en tu hoja de estilos, como tamaño de fuente, colores, etc. Para hacer pruebas y ver que con solo cambiar unas cuantas líneas de código obtenemos lo que queremos en los elementos que lo aplicamos. Este ejemplo funciona muy bien en Flash 8.

32

MOVIMIENTO DE UNA BANDERA DINÁMICAMENTE POR ACTIONSCRIPT http://www.cristalab.com/tutoriales/70/movimiento-de-unabandera-dinamicamente-por-actionscript Antes que nada hay que aclarar que este ejemplo solo sirve para flash mx, y no así para mx 2004, así que no renieguen. El efecto de bandera en movimiento necesita solo un layer o capa y un solo fotograma donde va la acción. Para empezar, importemos la imagen (que no tiene porque ser únicamente una bandera) al escenario (no a la biblioteca). También podemos optar por dibujar nuestra propia bandera en flash. Luego importemos la imagen o nuestra propia creación a la biblioteca (simplemente arrastrándola), al hacer esto, flash nos preguntará en que la queremos converir. Elegimos la opción de clip de película o movie clip, le ponemos el nombre “foto” y el registro en la esquina superior izquierda

Una vez que la imagen está dentro de la biblioteca con su respectivo nombre de instancia”foto”, le damos click derecho y accedemos al menú “vinculación”. Ahí marcamos la opción de “exportar para Action Script” y automáticamente se marca la opción “exportar en el primer fotograma”.

Luego de esto, volvemos a nuestro escenario y borramos la imagen que habíamos importado (ya que, ya está dentro de la biblioteca como un MC). Marcamos el primer fotograma clave de nuestro único layer y abrimos el panel de acciones. Dentro pegamos este código:

interacciones = 30; xo = 40; yo = 30; for (var i = 0; i
33

duplicate.lineTo(0, alto); duplicate.lineTo(uni, alto); duplicate.lineTo(uni, 0); duplicate.lineTo(0, 0); duplicate._x = xo+i*uni; mc.setMask(duplicate);

} this.onEnterFrame = function() { for (var i = 0; i
Si siguieron los pasos correctamente, su imagen o bandera debería estar flameando perfectamente. El secreto para que no aparezcan líneas blancas en la imagen es crear la imagen al tamaño que la van a usar, y luego meterla en la biblioteca ya que el Script utiliza una variable llamada SetMask() y si se modifica el tamaño luego, aparecen unas no muy estéticas líneas en la bandera o imagen.

CREAR SCROLLBAR MÁS EFECTO DE EASING http://www.cristalab.com/tutoriales/135/crear-scrollbarmas-efecto-de-easing Muchas veces al visitar otros sitios y al usar un scroll de estos sitios, uno ve el efecto de easing en el scroll y nos da una sensación a suavidad muy buena, es agradable que las cosas "scrolleen" con ese suavizado tan particular, bueno asi que me puse mano a la obra para poder tener el mio, pero quise hacerlo de tal manera de que lo pueda reutilizar SIEMPRE, que ejecute una función determinada en cualquier nivel de mi película.

34

Para lograrlo a esta función debemos de pasarle un par de parámetros, veamos... Primero vamos a hacer un include de un ActionScript (este archivo es necesario para que funcione el scroll porque tiene todo el código necesario), se lo pueden bajar de aquí y ponen ese archivo en la misma carpeta del .FLA. Hacemos por única vez un INCLUDE en nuestro fla en el _ROOT #include "scroll_easyn.as" Luego en nuestro fla cada vez que quisieramos generar éste scroll solo vamos a convocar a una función que se encuentra dentro del archivo que incluimos ... de ésta manera:

_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado); Bueno la función requiere un par de parámetros: nivel: Es en donde vamos a generar el scroll por ejemplo: "_root.", _root.mcCont, etc. clip: Este parametro es la ruta del CLIP CONTENEDOR, o sea el nombre de instancia del clip en donde dentro del que tenemos nuestro contenido que queremos scrollar. (Es importante que en nivel, y clip quede algo como por ejemplo: Nivel: "_root.mc" Clip: "_root.mc.contenedor") anchoScroll: Es un valor numérico en el cual le seteamos el ancho que va a tener la barrita de scroll, si el valor es menor a 3, el valor va a ser por default 3. Suavizado (Opcional) Valor numérico en donde seteamos la velocidad del suavizado cuando frenamos el scroll, si obviamos éste parámetro el valor por default es 10. Bueno eso es todo pueden ver una prueba, acá de como funciona. Los sources se los pueden descargar desde aquí. Entonces cada vez que quisieramos usar el scroll solo escribimos ésto:

var nivel = _root.mc var clip = _root.mc.contenedor var anchoScroll= 8 var suavizado = 3 _root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado ); O bien directamente:

_root.generarScrollEasyn(_root.mc, _root.mc.contenedor, 8, 3); El scroll funciona tanto para texto, enmascarado con "SETMASK" o bien para texto e imágenes.

35

36