Comunidad de diseño web y desarrollo en internet online

Guía definitiva para novatos de Flash

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.

Cosas que nunca debes hacer
En este punto me alejo un poco de Flash y me centro en lo que no deberíais de hacer al empezar con Flash.

  • No tengáis prisa en aprender, se aprende más intentándolo uno mismo que cogiendo el código de los demás así que : NO PIDAS CÓDIGO AJENO
  • No intentes hacer algo que te supera, actualmente NO SE PUEDE HACER DOOM 3 CON FLASH
  • SE REALISTA, no te creas el rey del mambo por hacer un scroll de barra, es decir, que tengas los pies en la tierra, mires a tu alrededor y compruebes si realmente es algo espectacular, todos nos entusiasmamos cuando conseguimos hacer algo que se atrancó
  • AYUDA A LA COMUNIDAD, como ella te ha ayudado a ti [oups que bíblico suena eso], no se pide que regales tu tiempo en el foro, ni que dejes tu web como open-source, solo UNA PARTE DE ELLO.
  • A menos que pagues, aquí nadie está para servirte, así que, NO TENGAS PRISA A LA HORA DE SER CONTESTADO, nadie trabaja en el foro las 24 horas del día, muchos de nosotros le robamos tiempo a los estudios/trabajos para dedicárselos a Cristalab.
  • Mira la sección de Reglas del foro

¿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?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate