Tutorial Flash: Guía definitiva para novatos de Flash

Donmuerte

Intentare resumir y hacer una recopilaci?n de las palabras y temas mas "comunes" en flash, para que aquellos que empiezan tengan al menos una idea de lo que hay.
IMPORTANTE: Por muy avanzado que te creas, si acabas de empezar, l?ete todo el tutorial/gu?a. No trates de ir m?s deprisa de lo que puedes

Tomando contacto: El IDE
El IDE es la "interface", la parte gr?fica de Flash en cuesti?n de editor. Consta de varios paneles, estos se pueden mover, abrir, cerrar, quitar, e incluso ponerlos "flotantes" como en versiones anteriores de Flash. Por eso si tu distribuci?n difiere de la de las im?genes no te preocupes, eso da igual. Ya que las fotos las he querido hacer lo mas grandes posibles para que se vea bien, no las meto aqu?, sin oque dejo los links, para no ensanchar demasiado el foro

Pantalla Principal - Click para agrandar

Propiedades del campo de texto

Opci?n de exportar fuentes

Panel de acciones

Panel de ayuda
Flash, Qu? Es? C?mo funciona?
Flash es un entorno de desarrollo,... euh? Pues un programa para hacer otros programas/animaciones/paginas webs/RIA's y dem?s. Como otros entornos de desarrollo Flash consta de un "editor" y un "compilador", el editor como ya hemos dicho es todo lo que ves en flash, con ?l escribes el programa [c?digo AS] y haces los dibujos/im?genes que quieras. El compilador [parte que no ves] lo que hace es asegurarse de que todo esta bien escrito [detecta errores de forma, no de contenido] y lo "compila", es decir fabrica un archivo con la extensi?n .SWF que es capaz de ser interpretado por el player.

Bueno, entonces... que es el player y que hace? El player o reproductor, como su nombre indica "reproduce" los archivos SWF. Por que hace esto? bueno todo tiene su explicaci?n, que la dejare para otro momento, usare la met?fora de un reproductor de CD's... Podr?as tener un solo lector de CD [player] y muchos CD?s [archivos SWF] que se leen ah? o por el contrario tener muchos aparatos del tama?o de un lector de CD y que cada uno llevase un solo CD que no se pudiera cambiar....As? tenemos que nuestros archivos SWF son como CD's, el mismo archivo vale para el plugin de un navegador, que para el de otro, o incluso para el player en local.
Un poco de historia
Flash se cre? en un principio para la animaci?n vectorial [y no vectorial], por eso comparte muchas herramientas con programas de dibujo y animaci?n. Fue a partir de Flash5 [FL5] cuando surgi? la explosi?n de Action Script [AS] y se a?adieron muchas funciones nuevas. Actualmente hay dos corrientes en Flash, la Designer [Dise?ador] y la Developer [Programador], as? mismo los ex?menes de certificaci?n de Macromedia son diferentes para cada una de estas ramas. Ahora con Flash MX y MX2004 Las capacidades del Developer se vieron aumentadas en grandes cantidades, a?adiendo los "componentes", funciones para webcam, micr?fono, webServices, XML, LoadVars y dem?s, haciendo mucho mas f?cil el desarrollo de aut?nticas aplicaciones multimedia.
Veo capas, veo frames, veo una l?nea del tiempo...
Ya hemos dicho que Flash tiene mucho de animaci?n.
Frame Un frame es un fotograma, como el de las pel?culas, una imagen est?tica, y cuando se pasan muchas r?pido dan la sensaci?n de movimiento

Animaci?n FrameByFrame: Es la animaci?n cuadro a cuadro, o fotograma a fotograma, se usa sobre todo en dibujos animados cuando las cosas no se pueden hacer ni por MotionTween ni por ShapeTween
Motion Tween: Interpolaci?n de movimiento para los hispano parlantes, lo que hace es "rellenar" los fotogramas vac?os de una animaci?n, donde se estable un objeto en el primer frame en una posici?n y en el ?ltimo el mismo objeto pero en otra. La interpolaci?n de movimiento calcula donde deber?a estar el objeto en los frames intermedios
Shape Tween: Similar al MotionTween, pero esta vez juega con las formas [solo trabaja con vectores, ni im?genes ni objetos] El resultado suele ser bastante malo al principio, y se tiene que trabajar bastante la animaci?n
L?nea del tiempo o timeline, esta formada por los frames, no es mas que "el rollo de pel?cula" que contiene a los fotogramas. Cada MovieClip tiene su propio timeline, aunque todos van a la velocidad del principal [fps]
FPS: Frames Per Second, frames por segundo, esto es la velocidad en la que pasaran los frames en una pel?cula. 12FPS es que se ejecutaran 12frames en un segundo. La velocidad por defecto es 12fps, aunque 24fps y 30fps tambi?n son usados, pero para cuando se quieren animaciones mas "fluidas"
Capas: [o layer] Como en otros programas de dibujo las capas sirven para organizar el contenido. Puedes reorganizar las capas arrastr?ndolas a tu gusto, las que est?n superiores a otras las "tapar?n". Como en la realidad, si t? tienes varios objetos y pones uno encima de otro, los inferiores se ocultan [total o parcialmente] por aquellos que est?n encima
Profundidad: No hay que confundir con el concepto de capa, aunque son similares. Tomando un espacio tridimensional, formado por 3 ejes perpendiculares entre s? XYZ. Tomamos la X como la anchura del monitor, la Y como la altura y la Z como la "profundidad" que va desde la pantalla hasta la parte de atr?s del monitor. Mientras que en una capa puede haber varios objetos, en una misma profundidad no, si se carga un objeto a una profundidad donde ya exist?a algo, ?ste ser? reemplazado por el nuevo objeto.
La problem?tica con las fuentes Una fuente [font] es una tipograf?a, un tipo de letra, como por ejemplo "Arial", "Verdana" , "comic Sans",...
Flash tiene 3 tipos de campo de texto, los est?ticos, los din?micos y los de introducci?n de texto. Muchas veces usamos letras que no est?n en todos los ordenadores, por eso flash puede a?adirlas a los SWF a fin de que se vea como queramos en todos los ordenadores, en caso de que no estuvieran y no se "exportan" [o se embeben] en el SWF flash usar?a la m?s "parecida", volviendo en impredecible el resultado final.

En los campos est?ticos Flash transforma el texto en formas a la hora de crear el SWF, con lo que quiz?s pueda perder algo de calidad y se vea "borroso" para eso est?n las p?xel fonts [hablaremos despu?s de eso] En cambio en los campos de texto din?micos flash no exporta las fuentes autom?ticamente, tendr?s que ser tu quien se lo diga. La forma mas f?cil es como se explica aqu?:

Propiedades del campo de texto

Opci?n de Exportar Fuentes

Tambi?n hay otra posibilidad de ir a la biblioteca, y crear ah? una nueva fuente, pero por el momento la dejaremos ah? aparcada.

Es importante saber que si cuentas con la versi?n MX 2004 (7) de Flash tienes una opci?n que hace un poco mas f?cil las cosas con las tipograf?as.
Existen tipograf?as que como las pixelfonts fueron dise?adas para pantalla, una de las m?s populares es Verdana, lo bueno es que esta tipograf?a fue dise?ada para caer justo en los pixels en varios tama?os de punto del 9 al 12 y a?n m?s.
Y usando la opci?n de ?texto de alias? que est? en las propiedades de texto, reconoce la fuente de p?xel y la acomoda autom?ticamente, por lo que no hace falta ubicarlas en coordenadas absolutas.

Ejemplo
P?xel Fonts... he odio hablar, pero que son?
Estas son fuentes de peque?o tama?o, que est?n hechas a base de pixels para que se vea bien. Su tama?o en general suele ser 8 o m?ltiplos de 8 [16, 24,3,....etc.] Adem?s de eso los campos de texto que las contengan tienen que estar en coordenadas exactas [por ejemplo 32.0 51.0 etc. etc.] y alineados a la izquierda. Esto es porque al estar hechas a base de p?xeles, los rellenan por completo y no crean esa sensaci?n de estar "borrosas". [Explicaci?n: Cuando un p?xel es invadido por dos colores, por ejemplo el fondo blanco y la letra negra, este hace una mezcla de ambos -gris- y lo muestra como resultado, creando esa sensaci?n de borroso]
Nos vamos conociendo... vamos a empezar con el trabajo de campo
Mucha gente se l?a cuando se le habla de "instance names" o "nombres de instancia", de exportar las fuentes [embedFonts] y dem?s, as? que vamos a por ello. Flash usa un lenguaje de POO [Programaci?n Orientada a Objetos] Hay que diferenciar entre Objeto e Instancia, imagin?monos en el mundo de la automoci?n, para nosotros los objetos [puros conceptos] ser?n los "coches en general" y las instancias "coches espec?ficos", por ejemplo si yo hablo de un "Nissan Skyline" estoy hablando de un coche en general [objeto], en cambio si hablo de "Nissan Skyline con la matricula XXXX" eso es una instancia [la matricula seria el instance name] ya que estoy hablando de un determinado coche. Pero no hay que confundirse, todo coche que sale de fabrica es una instancia, una representaci?n de un objeto [concepto], al hablar de "Nissan Skyline" hablo del coche como concepto, no de un determinado "Skyline", si no puramente de la idea de ese coche.

Esto puede resultar un poco dif?cil al principio, pero es cuesti?n de tiempo el captar la idea. Los objetos se guardan como "S?mbolos" en la Biblioteca, le puedes cambiar el nombre a los s?mbolos, pero ese NO ES su instance name |Imagen| Los instance name servir?n a igual modo que las matriculas, para diferenciar e identificar ciertos objetos, a fin de poder controlarlos mejor. Quiz?s hayas o?do hablar de las "clases", no son mas que objetos conceptuales, as? que tomaremos clase = objeto, pero clase es diferente de instancia OK?
Mam? quiero ser programador!!
Uno de los problemas que se encuentra mas com?nmente a la hora de empezar a programar con Flash son las rutas!euh?que?comorr? R-U-T-A-S , en realidad es sencillo. Siguiendo con la met?fora anterior todos sabemos que un coche esta formado por varias partes, y a su vez por m?s partes y estas a?n en m?s. Por ejemplo si queremos saber la "carrera" [longitud] de un cilindro del coche no vale con decir cilindro._carrera ... tendr?amos que primero ir al coche, despu?s al motor, finalmente al cilindro y entonces medir la longitud. Si pensamos en "coche" como un MovieClip [MC] que contiene a otro MC "motor", y ?ste a su vez a otro llamado "cilindro" pues para medir su longitud tendremos que hacer coche.motor.cilindro._carrera; [ruta absoluta] En cambio si ya nos hayamos en el coche solo tendremos que hacer motor.cilindro._carrera [ruta relativa]

Para que te hagas una mejor idea, seguro que tienes contacto con alg?n visor de carpetas [MiPc / Explorador de Windows.... etc.] Las Rutas absolutas son las que empiezan por C:\ [en Flash por _root -raiz en ingles-] Si queremos abrir Flash tendr?amos que hacer C:\Archivos de Programa\Macromedia\Flash\Flash.exe esta forma funciona estemos donde estemos, en cambio si estamos en la carpeta "Macromedia" bastara con usar Flash\Flash.exe esta segunda versi?n es m?s corta, pero suele dar mas problemas. **NOTA** en flash se usa el punto "." como separador, en vez de "\" o "/"
_root / _parent / this
_root es la "raiz", hace referencia al objeto m?s alto que haya, en Flash es el escenario, en windows es C:\ [o la unidad pertinente] y en Linux... sigue siendo root! MWHAHAHA
_parent para las rutas relativas, esto hace referencia al nivel superior, adem?s se puede poner varias veces. por ejemplo el _parent._parent de "cilindro seria "coche", motor es el nivel superior de cilindro y coche el de motor [2 _parent] **NOTA**: aunque pongas 6millones de _parent, el objeto mas alto es el escenario [_root] y por m?s que pongas de ah? no pasara
this es... el mismo objeto, el this de cilindro es "cilindro". Para que sirve? bueno, las propiedades/eventos/m?todos pertenecen a una clase/objeto y por tanto tienen que hacer referencia a la misma, si estamos en cilindro y queremos medir su carrera, tendremos que usar this._carrera , usar _carrera a secas nos proporcionar?a un error.
Componentes
Qu? son? Bueno, los componentes, originalmente se llamaban SmartClips!, "Clip inteligentes", son clips[movieClips/MC/movies -como quieras llamarlos] que vienen programados, listos para soltar en el escenario y usar. Cu?l es su funci?n? Bueno, eso depende para lo que est?n programados, pero por ejemplo piensa que quieres poner un calendario en varias paginas webs, pues podr?as ir y programarlo en cada uno de las paginas o por el contrario lo programas una vez, lo conviertes a s?mbolo y en el resto de paginas solo tendr?s que soltarlo en el escenario y ya funcionara.

La creaci?n de componentes es un tema "avanzado" y lo dejaremos para otro momento, ya que hacer un componente bueno y personalizable al 90% es muy ardua tarea. Hay sitios webs como miles de componentes para diversas funciones, te ahorraran trabajo [o no, ya que normalmente suele ser dif?cil cambiar su aspecto gr?fico]
Programaci?n en archivos externos
Este es otro punto que explicaremos - para que no os suene a raro- pero que no llegaremos al fondo. Flash facilita la programaci?n a?adiendo soporte a los archivos externos, estos son usados como las librer?as de otros lenguajes o incluso como clases. Flash a la hora de compilar cojera el contenido de ese archivo externo y lo a?adir? al SWF. Esto es ?til si programas alguna funci?n o m?todo que rehusar?s en varios proyectos, si la tienes en un archivo externo, solo tendr?s que modificar UN archivo, mientras que de la otra forma tendr?as que modificar todos y cada uno de los swf que contengan esa funci?n.

MANUAL CREADO Y EXPUESTO EN CRISTALAB