La manera más fácil de crear botones es agregándolos desde la biblioteca de Flash. Es decir, ir al menéú”Ventana”, seleccionar el submenú “Bibliotecas comunes” y por último la opción “Botones“, rápidamente Flash nos mostrará una ventana con una serie de botones predifinidos por Flash. Seleccionaremos el que más nos agrade y  lo arrastraremos hasta nuestro lienzo o zona de trabajo,  y lo acomodaremos de acuerdo a la posición que queramos.

Menu ventana / Bibliotecas comunes / Botones

El botón trae como defecto el texto “Enter”. Para poder editarlo, daremos doble click en nuestro botón, enseguida nos mostrará una serie de capas y frames que constituyen al botón, pero lo que estamos buscando ahora, es la capa “Text”, por lo general sale arriba de todas las capas, y está se encuentra protegida por un ícono en forma de candado(para evitar su manipulación), para poder cambiar el texto, seleccionaremos el ícono del candado(esto lo desactivara). Por último seleccionaremos la herramienta texto en nuestra barra de herramientas(que se encuentra representada por una “A”).

Muestra las opciones que debemos tener activadas y desactivadas, para llevar a acabo una edición sobre un botón predefinido.

Resultado del botón predefinido:

La otra forma de poder crear un botón, es haber hecho una imagen previa del botón en otro programa de edición, como podría ser Corel Draw o Fireworks, y simplemente en flash agregar el texto o acoplar las imágenes, en este caso solamente agregaremos las imágenes .

Para ellos crearemos 4 imágenes:

1. Cuando nuestra botón se encuentre en reposo.
2. Cuando el cursor se encuentre encima de nuestro botón.
3. Cuando el cursor ha presionado el botón.
4. Cuando el cursor ya ha presionado en varias ocasiones el botón (opcional).

Orden (Reposo, Sobre, Presionado y ya clickqueado)

Ahora en nuestro lienzo vamos a importar nuestra imagen en donde el botón se encuentra en reposo, para ello nos iremos al menú archivo, seleccionaremos el submenu “Importar” y daremos clic en la opción “Importar a escenario”, y por último seleccionaremos nuestra imagen en reposo. Una vez importada, presionaremos F8 y seleccionaremos la opción botón.

Ventana para convertír a simbolo, con la opción predefinida “Clip de película”, solo habrá que cambiar a “Botón”.

Daremos doble click sobre la imágen en reposo (esto es para poder editar nuestro botón). Hasta ahora tendremos nuestra imágen de reposo bien ubicada en el prefijo “reposo”. Ahora tenemos que hacer click en los frames de nuestra capa 1, y seleccionar el prefijo “Sobre” y después presionar f7 (este comando creará un nuevo frame y vacío) e importare nuestra imagen para dicho frame “Sobre”, y así sucesivamente con los prefijos “Presionado” y “Zona Activa”.

Resultado:

Para convertir algún objeto en un simbolo, basta con seleccionarlo y presionar F8. Aquí nos aparecerá un menú, pues primero le ortorgaremos un nombre y por último seleccionaremos el simbolo que queremos asignarle.

Ventana de símbolos en flash

Nota: Muchas veces hemos visto en alguna animación como un objeto queda haciendo alguna instrucción, aunque ya hallá finalizado la animación principal, en algunas ocasiones  estó se puede deber a que contiene  un clip de película o algún “actión script” que será algo que veremos más adelante .

Ahora cada una de las tres opciones que nos aparecen es para un propósito especifico, es decir, NO PODEMOS seleccionar cualquiera, si es que ya tenemos un propósito fijo, por general, la más utilizada es un clip de película, después le sigue el botón, que es utilizado mayormente para la creación de páginas webs en flash y por último queda la opción de gráficos, el cuál simplemente es un objeto fijo o estático.

Aquí podemos ver la combinación de las tres:

1. El mono en este caso sería el clip de película, podemos apreciar que al finalizar la animación y cuando todo se queda estático el mono sigue caminando, aquí es donde se encuentra nuestro clip de video, por que nuestro mono siempre estara caminando.
2. Al finalizar el movimiento no sales un botón que dice repetir, es un claro ejemplo de lo que es un botón.
3. Por último tenemos un fondo estático con una interpolación de movimiento, en este caso este es nuestro gráfico.

¿Como crear un clip de película o un botón?

Presionaremos sobre cualquier objeto F8, de preferencia nuestro objeto (no es necesario que sea nuestro objeto a trabajar, ya que adentro de él lo podremos eliminar, pero esto nos puede confundir).

Seleccionaremos cualquier opción que queramos

Clip de Película

• Clip de película: Nos aparecera una línea del tiempo, esta animación es independiente de la general, y obedece ordenes por si sóla.

Resultado:

Botón

• Botón, ahora solamente estamos limitados 4 fotogramas, que son:

1. El reposo: Así se mostrará nuestro botón cuando nadie haya pasado el mouse por encima de él.
2. El sobre: Aquí tenemos que añadir algo para que nuestro espectador se de cuenta que está por encima de un botón y que este le puede llevar a algún lado.
3. El presionado: Aquí se da cuenta el espectador que le ha dado clic al botón.
4. El zona activa: Aquí se dará cuenta nuestro espectador que ya le ha dado clic al botón.

Resultado:

En nuestra siguiente lección veremos más sobre la edición de botones y enlaces a los mismos fotogramas.

Visualización de Capas

Nota: Si no aparece nuestra línea del tiempo, podemos activarla llendo al menú Ventana/ Línea del tiempo.

Bueno, la actividad que vamos hacer ahora va a ser simple, vamos a crear tres capas. Flash trae un sistema de numeración por default, que es Capa 1, Capa 2, Capa 3, podemos cambiarle el nombre haciendo clic derecho sobre la capa. Ahora en base a como esta la imagen de arriba vamos a dibujar en la capa 1, un fondo, un paisaje, algo sencillo (Es solo para experimentar). En la capa 2 vamos a crear un cuadrado de cualquier color, de preferencia con relleno, y en la capa 3 un circulo con relleno.

No ubicaremos en el fotograma 100 de la capa 1 y presionaremos F5 (estó solo alargara más el tiempo que aparecera el fondo). Ahora en el fotograma 50 de la capa dos, daremos F6 (Esto creará un fotograma igual en el 50),  y haremos lo mismo con la capa 3 (dandó f6 en el fotograma 50).

Ejercicio con capas

Deberemos de tener algo mas o menos igual a lo que aparece en la imagen de arriba. Una vez hecho esto crearemos una interpolación de movimiento, para esto haremos clic secundario en el fotograma 1 y 50 de la capa 2 y3 y daremos clic en “Crear interpolación de movimiento”.

Una vez hecho estó modificaremos con la herramienta selección, la ubicación y el tamaño de nuestros objetos solo en el fotograma 50. Moveremos el cuadrado a la parte superior derecha de nuestro lienzo, y el círculo, simplemente lo haremos más grande.

Un ejemplo de como se deberá ver nuestra imagén hasta ese momento.

En la lección dos, aprendimos a crear interpolaciones de movimiento, y con ello supimos que las interpolaciones de movimiento, solo es una relación que existe entre el fotograma inicial y final, mediante una transformación suave. Ahora, nótese que la capa 3, es la capa que contiene al objeto que resalta más (en este caso el círculo amarillo), es por que se encuentra al inicio de las capas, y es por ello que flash lo resalta más, de ahí sigue nuestra capa 2 (que es un cuadrado azul) que se encuentra adelante de la capa 1 pero detrás de la capa 3, y por último el fondo (que es la capa 1), esté aparece detrás de todos nuestros objetos.

Resultado 1

Ahora haremos algo extra, solo moveremos la “capa 2″ delante de la “capa 3″, para ello selecciono la “capa 2″ y la subo después de “capa 3″. Notaremos que ahora el cuadrado se encuentra enfrente del círculo, y este no ha sufrido daños de recortes, como hubiera sucedido si hubieramos puesto ambos objetos en una sola capa, y por último la “capa 1″ notaremos que no importa que hagamos en la “capa 2″ y “capa 3″, está simplemente no se modificará.

Resultado 2

Está lección nos ayudará a ser más organizados en cuanto a la estructura de nuesto trabajo se refiere, era indespensable crear una lección solo para estó, ya que hay muchas personas que realizan sus animaciones en una sola capa, y al momento de añadir una interpolación, esta se creá en toda nuestra imagén, que es algo que en muchas ocasiones no queremos.

1.-Lo primero será:

¿Qué es flash? Es un programa para crear imágenes interactivas o videos de imágenes animadas. Muchos de vosotros recordaremos aquellas páginas como Locoarts o Killerpollo, que fueron un éxito gracias a las animaciones que hacían sus creadores.

2.-Lo segundo es:

¿De donde descargo flash?

Bueno lo puedes comprar aquí por 699 doláres.

3.-La tercera parte es:

El reconocimiento de extensiones o formatos soportados, es decir, saber que archivos podemos importar y en que extensiones podemos exportar, para esto haremos una lista de todos estos.

Archivos que podemos importar:

• FreeHand (.fh, .ft)
• Todo PostScript (.AI, .PDF, .EPS)
• PNG FILE (.PNG)
• Adobe Illustrator (.eps, .ai)
• AutoCAD DXF (.dxf)
• Mapa de bits (.bmp, .dib)
• Metarchivo mejorado (.emf)
• Película flash (.swf, .spl)
• Imágen GIF (.gif)
• Imágen JPEG (.jpg)
• Metarchivo de Windows (.wmf)
• Imágen de PICT de Macintosh (.pct)
• Imágen de MacPaint (.pntg)
• Imagen de Photoshop 2.5, 3 (.psd)
• Imágen QuickTime (.qtif)
• Imágen Silicon Graphics (.sgi)
• Imágen TGA (.tga)
• Imágen TIFF (.tif, tiff)
• Sonido WAV (.wav)
• Sonido MP3 (.mp3)
• Sonido AIFF (.aif)
• Sun AU (.au)
• Película Quicktime (.mov)
• Video para Windows (.avi)
• Película MPEG (.mpg, .mpeg)
• vídeo digital (.dv, .dvi)
• Windows Media (.asf, .wmv)
• Macromedia Flash Video (.flv)

Archivos en los que podemos exportar:

• Película flash (.swf)
• Video para Windows (.avi)
• Película Quicktime (.mov)
• Gif Animado (.gif)
• Sonido WAV (.wav)
• Metarchivo mejorado (.emf)
• Metarchivo de Windows (.wmf)
• PostScript (.EPS)
• Adobe Illustrator (.ai)
• AutoCAD DXF (.dxf)
• Mapa de bits (.bmp)
• Imágen GIF (.gif)
• Imágen JPEG (.jpg)
• PNG FILE (.PNG)

Una vez conociendo estas extensiones podremos saber que cualquier otro formato en el cuál quisieramos importar o exportar nuestro trabajo, tendrá que ser mediante conversiones, para lo cuál simplemente tendremos que buscar en el google, pasar de archivo .FORMATO a .FORMATO, y nos lloverán miles de programas, que no siempre serán gratuitos pero tendremos la certeza de que convertirán nuestro trabajo.

Lo cuarto es:

Debemos saber como está organizado flash, para esto mostramos la siguiente imágen

• Barra de Título

Es aquella que nos muestra el nombre del programa, en este caso es flash.

• Barra de menús

Es el conjunto de menús organizados mediante una serie de similitudes entre sus opciones. Aquí destaca Menú Archivo, que es el que nos permite exportar, importar y guardar nuestros archivos.

• Caja de herramientas

Son un conjunto de herramientas básicas que nos proporciona flash para la edición, como la herramienta elipse o rectangulo. Cabe mencionar que estas herramientas no son de gran funcionalidad, ya qué flash no es un programa basado en la edición de imágenes o videos, para hacer esto tendremos que utilizar algún programa hermano de flash como Fireworks, Photoshop o Corel Draw.

• Línea del tiempo

Es donde irán nuestros fotogramas, es decir, la secuencia de nuestra película, aquí es donde deberemos organizar nuestra película.

• Capas

Es la capacidad que nos da flash para organizar nuestras películas, teniendo la posibilidad de poner en cada capa, un objeto;  ya sea imágen, audio, botón o código.

• Areá de trabajo

Aquí es donde dibujaremos nuestras animaciones y les daremos vida, todo lo que sea mostrado aquí, será lo que veremos en nuestra película.

• Biblioteca

Es donde se almacenan todas nuestras actividades. Esto va desde imágenes, audio, clips de película, botónes, etc.

• Barra de propiedades

Aquí se mostraran las propiedades de nuestros objetos, como colores, efectos, tamaño, etc.

Por el momento nuestra lección ha finalizado, en las siguiente lecciones aprenderemos más sobre los fotogramas y otros detalles que nos ayudarán a crear nuestras animaciones más complejas.