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
- 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
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 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);
**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
var 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
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:<p align='center'><font color='#990000'>Prueba de HTML en Flash MX 2004</font></p> <img src='Foto.jpg' />Esto es una <b>prueba</b> de como <i>Flash MX 2004</i> soporta HTML e imagenes incrustadas en sus campos de texto<br />Mucho mas poderoso que <u>Flash MX</u>
Imagen de un SWF con un campo de texto con contenido HTML
Cuadro de dialogo "Convertir a Simbolo"
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;
}
//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
var texto:String = "<titulo>Cristalab, website dedicado a Flash MX 2004</titulo>\n";
texto += "<subtitulo>Lleno de tutoriales, ejemplos y hasta un comic</subtitulo>";
texto += "<contenido>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</contenido>";
//Se lo asigno al campo de texto
campo_txt.htmlText = texto;
Campo de texto con el contenido HTML parseado por medio de CSS
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;
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
on (click) {
trace("No me presiones :(");
}
on (click) {
_parent.campo_txt.text="No me presiones :@";
}
¿ 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).
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.
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();
}
}
//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();
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 :DAhora 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
Freddie® Cristalab
[email protected]
[email protected]
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Publica tu comentario
El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro
Entra al foro y participa en la discusión
o puedes...
¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate