Comenzamos el tutorial de Flash...

Por Rubn Alvarez Bienvenido al manual de Flash de DesarrolloWeb.

El objeto de este manual es el de proporcionar los fundamentos necesarios para que puedas desenvolverte fcilmente en el entorno de trabajo de Flash. A lo largo de estos artculos, vamos a abordar los conceptos bsicos necesarios para el buen uso de esta tecnologa y describiremos el empleo de las herramientas ms comnmente utilizadas.

Este tutorial no pretende ser una descripcin exhaustiva de la aplicacin Flash. Deseamos, ms bien, dejar sentadas las nociones que os ayudarn a tener las ideas claras a la hora de plantear vuestro proyecto. As que os dejamos a vosotros mismos la oportunidad de ver a fondo todas las posibilidades que este programa ofrece, algo que podris descubrir a medida que creis vuestras propias animaciones.

Aparte de este manual, los elementos que necesitis para crear vuestras animaciones son ms bien pocos: La aplicacin Flash, que puedes descargar en versin de prueba en el sitio de Macromedia, un navegador web y un editor de texto como el bloc de notas de Windows.

Esperamos que el manual resulte de vuestro agrado y os invitamos a complementar su aprendizaje con otro tipo de servicios que pueden ayudaros en vuestra progresin:

La lista de ayuda de DesarrolloWeb, donde podrs plantear tus dudas a otros desarrolladores al mismo tiempo que contribuyes al intercambio de conocimientos. Los foros de Flash, en los que podrs intercambiar ms informacin sobre tems relativos a esta tecnologa. Los recursos Flash, sitios web en los que podrs encontrar informacin, sonidos, animaciones y otros recursos de inters.

Para finalizar, os rogamos que nos contactis si encontris algn tipo de errata en el manual y que no dudis en aportar cualquier tipo de complemento a los captulos aadiendo un comentario por medio del enlace previsto a ese efecto al pie de cada captulo.

Descripcin de esta tecnologa vectorial.

Por Rubn Alvarez

Probablemente, uno de los avances ms importantes en materia de diseo en el web ha sido la aparicin de la tecnologa desarrollada por Macromedia denominada Flash.

Flash es la tecnologa ms comnmente utilizada en el Web que permite la creacin de animaciones vectoriales. El inters en el uso de grficos vectoriales es que stos permiten llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el navegador.

Como puede que sepis, existen dos tipos de grficos:

Los grficos vectoriales, en los cuales una imagen es representada a partir de lneas (o vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo de grficos no depende del zoom o del tipo de resolucin con el cual se est mirando el grfico. Por mucho que nos acerquemos, el grfico no se pixeliza, ya que el ordenador traza automticamente las lneas para ese nivel de acercamiento.

Las imgenes en mapa de bits. Este tipo de grficos se asemejan a una especie de cuadrcula en la cual cada uno de los cuadrados (pxeles) muestra un color determinado. La informacin de estos grficos es guardada individualmente para cada pxel y es definida por las coordenadas y color de dicho pxel. Este tipo de grficos son dependientes de la variacin del tamao y resolucin, pudiendo perder calidad al modificar sucesivamente sus dimensiones.

As, Flash se sirve de las posibilidades que ofrece el trabajar con grficos vectoriales, fcilmente redimensionables y alterables por medio de funciones, as que de un almacenamiento inteligente de las imgenes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tamao de los archivos que contienen las animaciones.

Esta optimizacin del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animacin al mismo tiempo que sta se muestra en el navegador (tcnica denominada streaming), permite aportar elementos visuales que dan vida a una web sin que para ello el tiempo de carga de la pgina se prolongue hasta lmites insoportables por el visitante.

Adems de este aspecto meramente esttico, Flash introduce en su entorno la posibilidad de interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programacin llamado Action Script. Orientado a objetos, este lenguaje tiene claras influencias del Javascript y permite, entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas partes de una

animacin en funcin de eventos producidos por el usuario, saltar a otras pginas, etc.

De este modo, Macromedia pone a nuestra disposicin una tecnologa pensada para aportar vistosidad a nuestra web al mismo tiempo que nos permite interaccionar con nuestro visitante. Por supuesto, no se trata de la nica alternativa de diseo vectorial aplicada al Web pero, sin duda, se trata de la ms popular y ms completa de ellas.

Describimos la interface de la aplicacin Flash MX.

Por Rubn Alvarez Las animaciones Flash son producidas en una aplicacin de diseo. Se puede descargar dicha aplicacin en versin prueba desde el sitio de Macromedia.

Una vez descargada e instalada, ya podemos ponernos a trabajar. Evidentemente, aprender a hacer animaciones con este programa requiere por una parte un conocimiento del software y por otra, una aplicacin inteligente de los recursos que se nos ofrecen. En este manual intentaremos hacer hincapi en lo segundo dejando al lector la posibilidad de descubrir poco a poco la aplicacin.

Para la redaccin de este manual, nos hemos servido de Flash MX. Cabe esperar que lo dicho para esta versin sea aplicable en gran medida a las versiones precedentes y las que salgan en un futuro.

Nada ms instalar y abrir la aplicacin por primera vez, accederemos a una ventana de dilogo que nos propone tres modos de uso distintos:

Modo diseador, destinado a crear animaciones y grficos Modo general, en el que dispondremos de todas las opciones de Flash adems de la ayuda. Modo desarrollador, enfocado a la creacin de aplicaciones con formularios, botones y otros componentes.

Este men aparecer nicamente la primera vez que abramos Flash, no obstante, podremos acceder a l desde la barra de herramientas en la seccin Ayuda>Bienvenido.

Ya dentro del programa, tras haber cerrado algunos paneles con el objeto de disponer de espacio de trabajo, haremos frente a una interface como la que se muestra en la figura:

Dentro de esta interface, podemos distinguir tres partes principales:

El escenario Se trata del espacio en el cual llevaremos a cabo todas las tareas de edicin de grficos. En cierto modo es como el papel en el cual dibujaremos lo que haga falta.

La lnea de tiempo Esta seccin es donde podremos organizar en el tiempo cada una de las imgenes diseadas en el escenario. Podemos subdividirla en dos partes: La parte izquierda, donde podremos organizar las capas y la parte de la derecha que queda reservada a la gestin de los fotograms. Ambos elementos, capas y fotograms sern tratados ms adelante.

La caja de herramientas Aqu encontraremos las herramientas de edicin grafica que Flash pone a nuestra disposicin. Como puede observarse, stas son muy parecidas a las que podemos encontrar en otros programs de edicin grafica que ya sea vectorial o no.

Explicamos los conceptos de capas y fotogramas y su uso.

Por Rubn Alvarez Como hemos dicho en el captulo anterior, la lnea de tiempo es donde podremos organizar la sucesin de imgenes que dan lugar a una animacin. En este captulo introduciremos los conceptos de capa y fotograma, vitales para una compresin del funcionamiento de Flash.

En cierta medida, Flash trabaja como si fuese una pelcula. Una animacin es una sucesin de imgenes fijas que, al pasar rpidamente unas detrs de otras, dan la impresin de un movimiento. Cada una de estas imgenes fijas es llamada tambin fotograma. Los fotogramas son representados bajo forma de rectngulos en la parte derecha del escenario.

En estos rectngulos podemos alojar tres tipos diferentes de imgenes:

Imgenes clave Se trata de las imgenes que nosotros mismos dibujaremos Imgenes fijas Son las imgenes claves copiadas en los fotogramas siguientes al de la primera imagen clave de manera a producir un efecto de objeto esttico. Imgenes de interpolacin Se trata de imgenes calculadas por Flash que permiten la transicin gradual entre dos imgenes claves. Este tipo de imgenes muy tiles ya que se generan automticamente y proporcionan un efecto suave de movimiento o transformacin.

Por otra parte, una animacin esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos.

As, una animacin Flash esta compuesta de una superposicin de capas en cada una de las cuales introduciremos un objeto que tendr su propia lnea de fotogramas. Estas capas nos permiten trabajar la animacin en distintos planos independientes.

Por defecto, al comenzar una nueva escena encontraremos en nuestra lnea de tiempo una sola capa. Progresivamente iremos introduciendo ms capas que nos permitan separar cada uno de los elementos de la animacin: objetos, fondo, sonidos o trayectorias.

Un uso inteligente de las capas es la base para crear animaciones de calidad.

Cmo construir clases y objetos en Flash.

Por Susana Ros Suanes Como esta es la primera vez que escribo sobre Clases y Objetos, veo que es necesario insistir en la diferencia entre clase y objeto. Comenc con el concepto del hombre en su acepcin de todo el gnero humano. Buscando un concepto lgico ped por Google "Ferrater Mora concepto hombre" y es apasionante leer como refuta cada definicin: Ser racional, Homo sapiens, Homo faber, Homo symbolicus, etc. Y al fin da su definicin "El hombre es un modo de ser su cuerpo" y la explica largamente. Por si desea leerla, aqu est: http://www.ferratermora.com/lang_palabras_section.html

De todos modos doy por hecho que cualquiera sea la idea que ustedes tienen de el ser humano, saben que es un concepto, una definicin, una clase. Y que Juan Prez, mi vecino y Mara Duarte, su esposa son realidades, instancias de la clase. El objeto es la idea hecha realidad.

Una clase se va ampliando en nuevas clases: La clase arquitecto es para nosotros la idea del hombre, a la que sumamos la idea del que ha obtenido el ttulo de arquitecto. Pero no deja de

ser una idea. Para concretarse en realidad tiene que ser vivo y haber estudiado y obtenido su diploma

FLASH CLASES Y OBJETOS

Con las herramientas de dibujo de FLASH hice este ciprs. Lo convert en clip de pelcula: seleccionar -->modificar-->convertir en smbolo-->clip de pelcula Le puse por nombre cipres.Sin embargo sigue siendo una clase comn de clip. Est en la biblioteca como estn en nuestra mente cualquier clase general como europeo, americano, lamo, sauce. Si lo traigo al escenario, ha nacido. Es un objeto que ocupa un lugar en el espacio y ya tiene precisas sus coordenadas x, y. Pero en cuanto a su naturaleza de clip de pelcula solamente se diferencia de otro clip por su forma. Y no puede hacer nada distinto a cualquier otro clip. Por ejemplo: Si quiero arrastrarlo con el ratn tendr que programarlo en su propio panel de acciones o en el fotograma de la lnea del tiempo, o agregando un botn

La palabra clave extends

La palabra clave extends nos permite extender, ampliar una clase con otras ya definidas en FLASH. Dentro de la clase mtodos de MovieClipentre otras subclases estn definidas la clase startDrag y la clase stopDrag Y la palabra extends nos permite definir una nueva clase, ampliando la clase MovieClip de modo que lleve dentro de s, la capacidad de responder a las funciones de startDrag y stopDrag.

Para hacer esto, debemos escribir un script directamente en un archivo ActionScript Archivo -->Nuevo-->ArchivoActionScript y lo guardas en la misma Carpeta donde guardas el archivo .fla El nombre del archivo debe ser exactamente el mismo que la clase. Si es Arrastre.as, la clase es Arrastre y no arrastre (con la inicial en minscula) Numer y separ las partes del script para explicarlos mejor. Se nos ocurri el nombre Arrastre para esta sub clase, as que en el rengln 1 en la sintaxis de Flash dice:

1 class Arrastre extends MovieClip {

2 function Arrastre() { 3 onPress=Arrastrar; 4 onRelease=Soltar; 5 }

6 private function Arrastrar():Void{ 7 this.startDrag(); 8 }

9 private function Soltar():Void{ 10 this.stopDrag(); 11 } 12 }

Esta clase se llama Arrastre y ampla la clase MovieClip. La palabra extends significa que si bien se trata de una ampliacin no estamos inventando nada nuevo, sino que estamos construyendo con clases ya definidas en el sistema de FLASH.

Volvemos a la sintaxis de la lnea 1 que abre la llave que se cierra en la lnea 12.
class Arrastre extends MovieClip {

class Arrastre nos dice que se define una nueva clase extends MovieClip aclara que es una subclase de la clase MovieClip y que por lo tanto hereda todo lo que en ella est definido. Extends crea la relacin de subordinacin entre las dos clases

A continuacin hay que escribir una funcin que tenga el mismo nombre que la clase y que explicite con claridad de que se trata esta subclase. Se trata de una subclase de MovieClip que atiende a las rdenes de Arrastrar y Soltar. Esos nombres tambin los elegimos nosotros y lo decimos en las lneas 2, 3, 4 y 5.

2 function Arrastre() { 3 onPress=Arrastrar; 4 onRelease=Soltar; 5 }

La subclase Arrastre qued definida. A la presin del mouse Arrastrar y cuando se levanta la presin Soltar Pero ahora hay que

explicar que quieren decir exactamente esas dos palabras nuevas

6 private function Arrastrar():Void{ 7 this.startDrag(); 8 }

Creamos una funcin privada para esta clase de clip que no retorna ningn valor. Por eso Void (por ejemplo no devuelve una string, o un nmero) Simplemente ordena para ste clip que se est presionando (this) la funcin ya definida startDrag()

Y en las lneas 9,10 y 11 definimos la funcin para Soltar.

Ahora tenemos que hacer que el clip cipres que tenemos en biblioteca posea la clase Arrastre que hemos definido.

Dentro de la biblioteca seleccionas el clip y pulsas Propiedades con el botn derecho del ratn. Si no aparece un cuadro grande como el que ves pulsa Avanzado. Exporta para ActionScript, y en Clase de ActinScript 2.0 escribe Arrastre Si todo est como en la figura, pulsas aceptar. Ahora trae al escenario unos cuantos ciprs grabas y corres el programa para probar si puedes arrastrarlos.

En esta aplicacin dibujo.fla participan de la clase arrastre cada una de las piezas que forman la casa y tambin el rbol que est detrs de ella.

Como ejercicio crea otro clip y luego en biblioteca le puedes agregar pulsando Propiedades su participacin en esta nueva clase que ya la has puesto como archivo Arrastre.as en tu carpeta.

Tambin hemos creado otra clase de este mismo tipo que nombramos Calesita

A ella pertenecen, el clip Flores que ves como pastito, el clip sauce y el clip VerNover que es el texto de entrada.

Clip Calesita

Aqu tienes el script Calesita.as Por supuesto tienes que crearlo haciendo Archivo -->Nuevo-->ArchivoActionScript copiarlo tal cual est ah y guardarlo en la misma carpeta.

La funciones que definen a la clase Calesita son Clic y Soltar

La clase Clic se define con las funciones del sistema start Drag que usamos en la anterior y nextFrame que nos interesa especialmente porque vamos a hacer MovieClips de varios

10

fotogramas.

La funcin Soltar es la misma que ya definimos en la clase Arrastre

class Calesita extends MovieClip { function Calesita() { onPress=Clic; onRelease=Soltar; } private function Clic(clip):Void{ this.nextFrame(); this.startDrag(); } private function Soltar():Void{ this.stopDrag(); } }

clip VeroNover

Aqu tienes el clip editado y en el primer fotograma. La accin del fotograma es stop();

Tiene dos grficos: El texto:

11

"Ver/ocultar este texto" Y debajo el texto largo. El primer texto mide 156 x 20 y por eso lo colocamos en -78 para x y en -10 para y. El segundo texto, debajo y ms o menos que su mitad coincida con la del primero. En el segundo fotograma la accin es stop();y ponemos solamente el grfico chico. En el ltimo fotograma no ponemos ningn grfico y su accin es: gotoAndStop(1)

Y as logramos el efecto calesita de girar y volver al primer fotograma. No olvides, lo que explicamos en el comentario anterior: Hay que exportarlo para ActionScript y escribir la nueva clase en la ventanita correspondiente.

Los otros clip no necesitan explicacin. Lo importante es que todos los fotogramas llevan la accin stop(); menos el ltimo que debe mandar al primero. gotoAndStop(1);

12

Puedes ver el ejemplo funcionando aqui.

El uso de bibliotecas. Concepto de simbolo y ocurrencia.

Por Rubn Alvarez En el captulo precedente introducimos el concepto de capa y fotograma y subrayamos la necesidad de utilizarlos inteligentemente. Otro elemento de Flash que necesita una gestin lo ms sabia posible es la biblioteca.

Como dijimos previamente, Flash permite la optimizacin del espacio ocupado por la animacin, o lo que es lo mismo, del tiempo que el usuario tarda en cargarla. Uno de los elementos que contribuye a ello es las denominadas bibliotecas.

Una biblioteca no es ms que un almacn de objetos (grficos o sonidos) que podrn ser utilizados en una misma animacin en una o ms ocasiones. Dependiendo del rango que presente esta biblioteca, sta puede ser propia a la animacin, compartida por varias animaciones, o bien permanente (empleada por la totalidad de animaciones).

Cada uno de los elementos que constituyen una biblioteca son denominados smbolos. Como hemos dicho, estos elementos podrn ser utilizados en nuestra animacin cuantas veces lo deseemos. No obstante, cada una de estas utilizaciones no es llamada smbolo, sino ocurrencia.

Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un smbolo almacenado en nuestra biblioteca es utilizado en nuestra animacin.

Cambiando las propiedades de un smbolo de la biblioteca , cambiamos todas cada una de las ocurrencias que aparecen en la animacin. Contrariamente, la modificacin de una ocurrencia no altera al smbolo de la biblioteca ni a las otras ocurrencias de la animacin. Como podemos observar, el uso de las bibliotecas no solo nos ayuda a aligerar el archivo, sino que nos permite una creacin, edicin y borrado rpidos de cada una de las ocurrencias.

En captulos posteriores abordaremos con ms detalle la gestin de bibliotecas smbolos y ocurrencias. Pasaremos a continuacin a la aplicacin de lo aprendido a partir de la creacin de una animacin.

13

Creacin de un smbolo en nuestra biblioteca flash.

Por Rubn Alvarez Despus de haber introducido los conceptos bsicos de Flash, vamos a poner en practica algunos de ellos de manera a comenzar a familiarizarnos con la interface.

Para empezar, comenzaremos por generar un documento en blanco por medio de:

Archivo > Nuevo

Como podemos observar en la lnea de tiempo, nuestra animacin consta de una sola capa y un nico fotograma representado por un rectngulo con un crculo. Este crculo significa que se trata de un fotograma que contiene una imagen clave vaca.

La animacin que pretendemos crear consiste en un movimiento de traslacin de una esfera con una trayectoria elptica. As pues, lo primero que debemos hacer es dibujar la esfera. Sin embargo, para empezar con las buenas costumbres, no dibujaremos la esfera directamente sobre nuestro fotograma vaco, sino que crearemos un smbolo en nuestra biblioteca.

Para crear nuestro smbolo en la biblioteca:

Ventana > Biblioteca

14

Llegados a este punto veremos aparecer en la pantalla una ventana como la que veis en la ilustracin.

Para insertar el smbolo lo podemos hacer a partir del botn con una cruz situado en la parte inferior izquierda de la ventana de la biblioteca, o bien ir a la barra de mens y hacer:

Insertar > Nuevo Smbolo

Una nueva ventana de dialogo aparece ante nuestros ojos (ver figura abajo). En ella podremos definir el nombre (para este caso la llamaremos esfera) y el comportamiento (elegiremos grfico). Por el momento no entraremos en la explicacin de la opcin comportamiento, ya lo veremos ms adelante.

Al rellenar debidamente la ventana anterior y Aceptar, veremos como el escenario se agranda y la barra superior del escenario nos muestra la palabra Esfera. Lo que ha pasado es que hemos salido de nuestra animacin para meternos en un espacio en el que podemos editar el smbolo que queremos crear. As que nos ponemos manos a la obra con nuestra labor de artistas.

15

Para dibujar la esfera vamos a servirnos de las herramientas de dibujo. Comenzamos por elegir la herramienta valo, representada por un crculo. Una vez elegida nos colocamos en el escenario y, apretando la tecla maysculas y pulsando el botn izquierdo del ratn (el nico para los usuarios Mac), desplazamos el ratn hacia cualquier direccin. Veremos aparecer un crculo con los colores definidos en el apartado colores de la barra de herramientas.

Ahora, para darle la sensacin de perspectiva a la esfera, vamos a colorearla en su interior usando un degradado radial. Para ello, visualizamos el panel mezclador de colores:

Ventana > Mezclador de color

Llegados aqu, veremos una ventana como la de la figura:

En este panel, seleccionaremos en el men desplegable la opcin Radial. Veremos como la ventana cambia de aspecto parecindose a la imagen siguiente:

16

Lo que haremos es seleccionar dos colores (los que os gusten) para cada una de las casitas que se encuentran en la parte inferior de la barra de degradado. Para ello, clicaremos sobre cada una de las casitas y a continuacin, elegiremos un color en la paleta desplegable situada en la parte superior izquierda del panel. Repetiremos el proceso para la otra casita.

Una vez definido el degradado, podemos seleccionar la herramienta cubo de pintura y clicaremos con el botn izquierdo sobre la parte rellena del crculo. Si todo funciona correctamente, deberemos obtener una esfera similar a la de la figura mostrada:

Sugerimos repetir este proceso de relleno del crculo con un degradado jugando con las opciones que nos ofrece el panel mezclador de colores. Podemos ver que es posible aadir ms casitas para conseguir un efecto de coronas o bien cambiar el tipo de degradado a lineal y ms cosas...

Despus de dejarnos llevar por nuestra vena creativa podemos volver a cosas ms serias. Para empezar, podemos alinear la esfera con la cruz que define el punto de alineamiento del smbolo. Para ello, elegiremos la herramienta flecha y seleccionaremos la esfera desplazando el ratn al mismo tiempo que mantenemos pulsado el botn izquierdo. Para mover la esfera lo haremos del mismo modo, desplazando el ratn hasta el lugar apropiado manteniendo pulsado el botn izquierdo. Podemos precisar el desplazamiento usando las flechas del cursor que nos permitirn desplazarnos pxel por pxel.

17

Vamos a empezar a trabajar con la animacin propiamente dicha. Creacin de imgenes clave.
Por Rubn Alvarez Vale, ya hemos definido el smbolo en la biblioteca. Ahora vamos a empezar a trabajar con la animacin propiamente dicha. Lo primero que debemos de hacer es salir del espacio de creacin del smbolo y colocarnos en el escenario de la animacin. Para ello, pincharemos en la palabra Escena 1 que aparece en la parte superior izquierda del escenario.

Ya dentro del escenario, vamos a incluir en el primer fotograma el smbolo que acabamos de crear. Antes de nada, iremos a la ventana biblioteca (si la tenis cerrada podis abrirla con Ventana > Biblioteca) y seleccionaremos el smbolo esfera. A continuacin, pincharemos y arrastraremos el smbolo hasta el escenario. El resultado debera ser algo como lo que se muestra en la imagen inferior:

Podemos observar que el crculo vaco del primer fotograma se ha convertido ahora en un crculo lleno, lo que significa que la imagen clave no esta vaca.

Pasemos ahora a estudiar el tipo de animacin que vamos a hacer. Como hemos dicho, pretendemos simular un movimiento de traslacin de la esfera con una trayectoria elptica, dando la impresin de un crculo en perspectiva. Esta animacin podra ser definida por tres imgenes clave:

18

La esfera situada en primer plano al principio de su movimiento. La esfera situada en segundo plano a mitad de su ciclo de traslacin. La esfera llegada al final del ciclo, aproximadamente en la misma posicin que la primera esfera.

Podemos ver cuales serian estas tres imgenes clave en el siguiente esquema:

De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda en el lugar aproximado que le correspondera. Para ello llevamos a cabo las siguientes operaciones:

Insertamos una imagen clave en la capa 1, ms o menos sobre el fotograma 15. Para ello nos situamos en la capa 1, en el fotograma 15. Pulsamos el botn derecho del ratn y seleccionamos Insertar fotograma clave. Podemos observar como, una vez realizada la operacin, un nuevo crculo aparece en ese fotograma, indicando la presencia de otra imagen clave que ser idntica a la imagen de nuestro primer fotograma..

Modificamos este nuevo fotograma clave. Para ello, situados en este fotograma, seleccionamos el objeto (u ocurrencia) y modificamos su posicin y tamao. La posicin la modificamos empujndolo hacia arriba con la tecla del cursor o bien pinchando y arrastrando, como ya hemos visto antes. Para modificar el tamao, seleccionaremos la herramienta transformacin libre. Una vez

19

hecho esto, seleccionaremos la opcin escalar, que nos permitir bloquear las proporciones del objeto y reduciremos el tamao de la esfera pinchando y arrastrando en uno de los puntos de las esquinas de la marca que rodea la esfera. La figura siguiente os ilustra la tarea de redimensionamiento y os da una idea del aspecto que debe tener el fotograma una vez modificado:

A continuacin vamos a crear el tercer y ultimo fotograma clave, correspondiente al momento en que la esfera esta a punto de completar el ciclo. Este fotograma debera en principio parecerse al primero con la diferencia de que la esfera no ha llegado a completar el ciclo, sino que esta de cera de conseguirlo. Realizaremos los siguientes pasos:

Insertamos un fotograma clave vaco en el fotograma 29 (Insertar>Fotograma clave vaco) Volvemos al fotograma 1 y lo copiamos (Edicin>copiar) Volvemos al fotograma 29 y lo pegamos (Edicin>pegar)

El resultado es un fotograma idntico al 1 en el cual deberemos mover ligeramente la ocurrencia a la izquierda, algo que haremos ms tarde.

20

Creacin de una gua de movimiento

Por Rubn Alvarez De modo que ya disponemos de las imgenes claves que definen la animacin. Lo que necesitamos ahora es definir una trayectoria elptica que las una. Esta trayectoria ha de ser definida en una capa especial llamada gua de movimiento. La gua de movimiento no es ms que una capa que contiene una lnea sobre la cual podemos colocar nuestros objetos de manera a que dicho objeto se mueva de una posicin a otra respectando la trayectoria definida por esta lnea.

En nuestro caso, dado que lo que buscamos es una trayectoria cclica, para no confundir al objeto definiremos dos lneas distintas, correspondientes a cada media vuelta. Si no tomsemos esta precaucin, el objeto tendra dos posibles sentidos para llegar a una misma posicin. Pasemos pues a definir estas lneas:

Creamos la gua de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos creado nuestras imgenes clave) y hacemos Insertar>gua de movimiento. Constatamos la aparicin de una nueva capa llamada Gua: Capa 1 (ver figura).

Seleccionamos el primer fotograma de esta nueva capa y dibujamos una elipse sin relleno. Podemos servirnos de la herramienta valo utilizada para la creacin de la esfera, pero esta vez no elegimos ningn color en la paleta de relleno (la ausencia de color viene simbolizada por un cuadro blanco barrado en diagonal por una banda roja). El resultado es una figura tal que esta:

21

Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y la cortamos (Edicin>cortar). El resultado es la obtencin de una semielipse. Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un fotograma clave vaco (Insertar>fotograma clave vaco) Pegamos la otra media elipse, que se quedar descolocada con respecto a la otra. Para ajustar las semielipses podemos por supuesto hacerlo a ojo pivotando entre el fotograma 14 y el 15 hasta que las dos se solapen correctamente. Sin embargo, una opcin ms interesante es la de usar le edicin simultanea de varios fotogramas. Esta opcin, disponible en la lnea de tiempo (ver figura), nos permite la visualizacin y edicin simultanea de varios fotogramas. De este modo, podemos seleccionar una de las semielipses y moverla por medio de los cursores hasta hacerla coincidir con la otra media. Deseleccionaremos este modo una vez finalizada la operacin.

22

Creando una interpolacin

Por Rubn Alvarez Llegados a este punto, podemos comenzar a definir la primera media vuelta de la esfera. Para generar el movimiento existente entre los fotogramas clave, hemos de crear lo que se denomina una interpolacin de movimiento. Como ya hemos dicho, eso es algo que Flash calcula automticamente, evitndonos la modificacin sistemtica de cada uno de lo fotogramas intermedios que forman parte de la secuencia. Para crear la interpolacin de movimiento, seleccionaremos los fotogramas de la capa 1y haremos:

Insertar>Crear interpolacin de movimiento.

Hecho esto, podremos constatar la aparicin en la capa 1de una flecha entre el fotograma 1 y 15 y otra entre el 15 y el 29. Si ahora nos colocamos en alguno de los fotogramas intermedios, veremos que la imagen que contiene no es la misma que la de los fotogramas clave 1 o 15, sino un intermedio de posicin y tamao entre ellas. Como puede verse, el objeto se desplazara desde 1 hasta 15 y seguidamente de 15 a 29 siguiendo una lnea recta. Para obligarlo a adoptar una trayectoria elptica como la definida en la gua de movimiento, tendremos que localizarnos en cada una de las imgenes clave (1, 15 y 29) y , usando la herramienta flecha, colocaremos el

23

centro del objeto sobre la lnea de la elipse en cada una de las extremidades correspondientes.

Podemos comprobar que el objeto esta bien colocado en la trayectoria si al intentar moverlo fuera de la lnea, vuelve a colocarse automticamente sobre ella.

Llegados a este punto, ya solo nos queda ocultar la capa de la trayectoria. Esto puede hacerse seleccionndola y pinchando sobre el punto que se encuentra bajo el ojo. El punto se convierte en una cruz, que significa que la capa no es visible, aunque por supuesto sigue existiendo.

Ya tenemos construida la animacin. Para probarla rpidamente podemos hacer:

Control>Probar escena

Veremos como hemos saltado a otra nueva ventana que nos muestra la escena creada, tal y como la veramos en realidad. Esta ventana nos ofrece mltiples posibilidades que ya abordaremos en otros captulos. No obstante, os aconsejamos el echar un vistazo al tipo de opciones que propone.

El resultado, es una animacion como esta:

24

Si lo que deseas es ver la animacin directamente en el navegador, es posible hacerlo seleccionando:

Archivo>Previsualizacion de la publicacin>HTML

Habiendo llegado a este punto, habris descubierto algunas de las muchas posibilidades que Flash ofrece para la creacin de animaciones y, lo que es ms importante, os habis familiarizado con el tipo de tcnicas y conceptos que emplea.

Un pequeo truco para conseguir el cdigo necesario para incrustar una pelcula Flash dentro de una pgina web.
Por Ludwing Rodriguez Colocar pelculas Flash en nuestros archivos html, asp, php, etc; podra ser una de las principales preguntas que hacemos, cuando empezamos a conocer este grandioso programa, y hacerlo es ms sencillo de lo que parece. Antes debemos tener en cuenta que debemos seguir algunas reglas para que todo funcione correctamente. Cuando creamos una pelcula con Flash, este genera un archivo con extensin ".fla", este nos permite crear la pelcula y modificarla. Otro archivo que se genera es el que tiene la extensin ".swf", este se compone en el momento que probamos la pelcula, y nos ayuda a ver el resultado de las creaciones y modificaciones de los archivos ".fla". Finalmente podemos generar un archivo "html", que se compone cuando publicamos nuestras pelculas y nos ayuda a tener una idea ms clara de cmo se veran en la web. 1. Cuando tu pelcula Flash este terminada, guardada y probada (CTRL+Enter), debes publicarla (CTRL + F12). 2. En el men principal de nuestro explorador, debemos hacer click en "Ver", despues click en "Cdigo fuente", esto hace que se ejecute el "Bloc de notas", el cual nos mostrara el cdigo html de las pelculas. 3. Dentro del contenido del Bloc de notas, debes buscar las etiquetas <object>...</object>, copia el contenido que se encuentra entre las esas etiquetas (lgicamente debes incluir esas etiquetas) y finalmente pgalo en tus archivos. Eso es todo, pero recuerda que, de seguir este truco y si no editas la etiqueta <object>, debes colocar los archivos .swf y .html en el mismo directorio del servidor o disco duro de tu computadora, de lo contrario las pelculas Flash no se cargarn.

25

Nota: Otra manera muy sencilla para insertar una animacin Flash en una pgina web es utilizar el programa Dreamweaver, tambin desarrollado por la empresa Macromedia. En dicho programa existe un botn, en la ventana de objetos comunes, que nos permite seleccionar el archivo Flash (Con extensin .swf) que deseamos insertar en la pgina web.

No es necesario que subas a tu servidor el archivo .fla, ya que el .swf y .html no lo necesitarn.

Vemos un sencillo cdigo HTML para visualizar Flash en una pgina web y explicamos sus etiquetas.
Por Miguel Angel Alvarez Conseguir un cdigo HTML para colocar una pelcula Flash es sencillo. Basta con tener Flash o Dreamweaver para que estos programas generen el cdigo por nosotros. Pero a veces no tenemos Flash en nuestro ordenador y slo tenemos un archivo .swf que tenemos que incrustar en una pgina web, entonces podemos crear nosotros mismos el cdigo HTML para ello.

En este artculo mostraremos el cdigo HTML necesario para visualizar una pelcula Flash, procurando explicar algunas de sus etiquetas y atributos, para que quede claro lo que estamos haciendo. Daremos un cdigo de ejemplo que podremos incluir en HTML para mostrar Flash.
Nota: Como decamos, tambin podemos obtener el cdigo HTML para incluir un Flash utilizando el propio programa Flash. Lo explicamos en el artculo: Colocar pelculas Flash en nuestras pginas

Veamos primero un posible cdigo HTML para incrustar un Flash en una pgina.

< object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2, 0" width="500" height="350"> < param name=movie value="archivo.swf"> < param name=quality value=high> < embed src="archivo.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=Shockwav eFlash" type="application/x-shockwave-flash" width="500" height="350"> < /embed> < /object>

En el cdigo HTML para insertar Flash tenemos aqu dos etiquetas bsicas:

26

< object>, que es propia de Internet Explorer, y que sirve para incluir cualquier tipo de

componente que se cargue con un control ActiveX, no slo pelculas Flash.

< embed>, que es para Firefox y que sirve para embeber objetos o componentes en

pginas web. Del mismo modo que < object>, sirve para incrustar diversos tipos de componentes en pginas web, no slo elementos flash. Dentro de las etiquetas se deben incluir varios parmetros para configurar el aspecto y comportamiento de las pelculas.

En < object>:

classid: que indica el plugin o componente ActiveX que Internet Explorer tiene utilizar para cargar la pelcula Flash. codebase: para indicar dnde est el plugin, si es que lo tiene que descargar de algn sitio. width: con el ancho en pxels en los que se debe mostrar la pelcula. height: con el alto en pixels deseado.

Luego anidada dentro de < object> hay que meter una nueva etiqueta, para indicar el archivo donde est la pelcula Flash, con su ruta:

< param name=movie value="archivo.swf">

En < embed>:

src: la ruta y el nombre del archivo Flash a mostrar. pluginspage: el sitio donde est el plugin necesario para mostrar Flash type: el tipo de objeto embebido. width: la anchura en pxel height: la altura en pxel deseada.

Con estas nociones bsicas podremos crear nosotros mismos un cdigo HTML para insertar Flash, esto es, un HTML para incluir flash en una pgina web.

Explicacin paso a paso sobre la creacin de botones en el programa Flash.

Por Ludwing Rodriguez

27

En este captulo aprenderemos a crear botones y cmo enlazarlos con nuestros archivos o con otras paginas web, que no estn en nuestro servidor.

Flash, nos permite crear botones personalizados, de manera muy rpida; a la vez nos ayuda a darle mas vida a nuestras pginas web; en pocas palabras, nos ayuda a hacer ms atractivo nuestro sitio y lgicamente eso es lo que queremos para aumentar el nmero de visitas a nuestro website.

Por medio de lenguajes de programacin (por ejemplo Javascript), tambin podramos crear botones, pero sera un poco ms complicado; adems no podramos crear exactamente los mismos efectos que podemos hacer con Flash.

Empecemos:

1- Primero crearemos un nuevo smbolo, haciendo la siguiente combinacin de teclas: ALT+F8.

Aparecer el siguiente cuadro:

2- En Nombre (Name), escribe "botn 1", en Comportamiento (Behavior) selecciona la opcin Botn (Button), finalmente haz click en Aceptar (OK).

Automticamente, seremos enviado desde la Escena 1 al escenario del smbolo "botn 1"; ah es donde crearemos un botn que ser incluido en nuestra biblioteca.

El escenario nicamente para la creacin de botones, ser parecido a la siguiente imagen:

28

Mira hacia la lnea del tiempo (Timeline), como puedes notarlo es diferente a la lnea del tiempo de la Escena 1.

La lnea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:

Expliquemos el grfico anterior:

Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados de un botn. Veamos a continuacin, qu representa cada estado.

Reposo: es cuando el mouse no est colocado sobre nuestro botn o no se ha hecho click sobre l.

Sobre: es cuando el mouse est colocado sobre el botn, pero an no se ha hecho click sobre l.

Presionado: lgicamente, es cuando haces click sobre el botn.

29

Zona Activa: su mismo nombre lo indica, es cuando el botn est activo.

Continuemos con la creacin de nuestro "botn 1".

La cabeza lectora, en la lnea del tiempo tiene que estar sealando el estado de Reposo.

4- Haz click sobre la Herramienta de Rectngulo (Rectangle Tool), que se encuentra en el Panel de Herramientas.

5- Dibuja un rectngulo en el centro del rea de trabajo, y ponle el color azul.

6- Despus presiona la tecla F6; sto har que la cabeza lectora en la lnea del tiempo pase al estado Sobre.

Como podrs notarlo, el botn se copia, as que no necesitars hacer un nuevo dibujo.

7- An estamos en el estado Sobre, si no tienes seleccionado el botn, hazlo (con la Herramienta Flecha y haz doble click sobre nuestro dibujo), luego dirgete a Color de Relleno que se encuentra en la seccin colores del Panel de Herramientas, y escoge el color rojo, como se muestra a continuacin:

8- Despus presiona nuevamente la tecla F6, para que la cabeza lectora pase al estado Presionado, y cambia el color de relleno de la misma forma que lo hicimos en el paso 7; y escoge un color verde. Finalmente presiona por ultima vez F6 para pasar al estado Zona activa, sto har que se copie el botn. Para este ltimo estado, no es realmente necesario cambiar el color de fondo.

Con los colores que hemos aplicado, haremos que el botn cambie de color, cuando se lleven a cabo los Estados de los botones anteriormente descritos.

Nuestro botn ha sido creado, as que puedes volver a la Escena 1, abre la biblioteca y vers que ah esta el smbolo llamado "botn 1", podrs arrastrarlo al escenario las veces que quieras

30

para hacer varias copias de l.

Toma la Herramienta de Texto (A), y escribe lo que desees, despus coloca el texto sobre el botn creado; para probar la pelcula haz la tradicional combinacin de teclas CTRL + Enter. Si despus quieres ver la pelcula en tu explorador de internet, nicamente presiona las teclas CTRL + F12.

Podemos ver un ejemplo del botn creado siguiendo estos pasos.

Cmo hacer que al pulsar un botn se acceda a otra pgina en el navegador.

Por Ludwing Rodriguez Si creamos botones, lgicamente es por que queremos enlazarlos con otras pginas web en nuestro servidor, o pginas web en otros servidores. Para este captulo necesitaremos el botn que creamos en el captulo anterior.

Para hacer los enlaces o links, debemos utilizar el panel de Acciones de Flash. Para poder visualizar dicho panel, dirgete al men principal y haz click en Ventana > Acciones.

Aparecer la siguiente imagen:

El panel de Acciones, nos servir para trabajar con ActionScript.

31

Qu es ActionScript?, es el lenguaje de creacin de scripts de Flash. Puede utilizar ActionScript para controlar objetos en las pelculas de Flash con el fin de crear elementos interactivos y de navegacin, y para ampliar Flash con el fin de crear pelculas altamente interactivas y aplicaciones Web. En otras palabras, ActionScript es el lenguaje de programacin utilizado por Flash.

Comencemos a hacer el enlace.

1- Desde la biblioteca de Flash, arrastramos a la Escena 1 el botn creado en el captulo anterior. Mantn el botn seleccionado, si no lo est, haz click sobre l con la herramienta flecha.

2- En el men principal, haz click en Ventana > Acciones.

3- En el panel de Acciones, haz click en la palabra Acciones (Actions), automticamente se desplegar una especie de submen en donde debes hacer click en Explorador (Browser/Network), despus haz doble click en getURL.

getURL es la accin que nos permitir navegar entre pginas web, tambin permite pasar variables a otras aplicaciones en una URL definida. Un ejemplo de URL es http://www.desarrolloweb.com

4- Como habrs notado, al hacer doble click sobre getURL, arriba del cuadro que est a la derecha del panel de Acciones, aparecen los siguientes campos de texto:

URL: aqu especificars la direccin a la cual se enlazar el botn.

Si vas a hacer un enlace con una pgina web dentro de tu servidor tienes que escribir el nombre del archivo, por ejemplo: nombre_de_archivo.html

Si vas a hacer un enlace con una pgina web que no est dentro de tu servidor tienes que escribir http://, mas el nombre del archivo, por ejemplo: http://www.desarrolloweb.com

Ventana: ste es opcional (si quieres puedes dejarlo vaco). Especifica de qu forma ser cargado el documento o fotograma. Las formas en que se cargarn son:

32

_self: especifica el fotograma actual de la ventana activa.

_blank: indica que la pgina se abrir o cargar en una nueva ventana..

_parent: especifica el elemento principal del fotograma actual.

_top: especifica el fotograma de nivel superior de la ventana actual.

Variables: POST y GET, especifica la manera en que se enviar la informacin etc, se usa para formularios, as que en nuestro caso no son necesarias las variables; as que selecciona No enviar.

Un ejemplo de cmo tendra que quedar el script en el cuadro derecho de el panel de Acciones es:

on (release) {

getURL("http://www.desarrolloweb.com", "_blank");

(si tienes problemas en seguir las instrucciones, simplemente copia el cdigo anterior y pgalo en el panel de Acciones)

Puedes ver que la primera linea del script aparece escrito: "on (release)". Es una accin utilizada en los botones, que indica que la accin que aparece entre "{ }" se ejecutar inmediatamente despus de hacer click sobre el botn, o sea, al liberar el botn del mouse.

Podemos ver un ejemplo del botn creado siguiendo estos pasos.

Cmo enlazar un botn flash con una direccin de correo electrnico.

Por Ludwing Rodriguez

33

Por medio de botones hechos en Flash, podemos ejecutar nuestros programas de envo de correos electrnicos (Outlook por ejemplo), para enviar mensajes .

(Tus programas de envo de correos electrnicos tienen que estar configurados e instalados correctamente)

Cmo hacer sto?

1- Creamos un botn. 2- Click derecho sobre el botn > Acciones 3- Copia las siguientes acciones y pgalas en el panel de Acciones:

on (release) { getURL("mailto:tu_e-mail@dominio.com"); }

Expliquemos lo anterior:

on (release), es una accin utilizada nicamente para botones, e indica que la accin se ejecutar inmediatamente despus de haber presionado y liberado el botn del ratn. getURL: Accin; carga un documento de una URL especfica en una ventana o pasa variables a otra aplicacin en una URL definida. Mailto: mtodo utilizado para enviar correos electrnicos.

Prueba tu pelcula (CTRL+Enter). Despus puedes publicarla (en men principal Archivo > Publicar).

El resultado se ve en este enlace.

Cmo cambiar la forma fsica de un objeto en el escenario de Flash.

Por Ludwing Rodriguez La interpolacin de formas, consiste en hacer que un objeto en el escenario de Flash cambie su forma fsica. Por ejemplo, podemos hacer que un crculo se transforme en un rectngulo.

Para realizar una interpolacin de formas, tenemos que hacer uso de "Fotogramas clave vacos",

34

ya que ste nos permite crear un vaco en la lnea del tiempo, el cual nos permitir crear otras formas u objetos.

Para este captulo, haremos un ejemplo simple, comencemos:

1- Arriba en la parte izquierda del escenario, dibuja 3 rectngulos con la herramienta "Rectngulo"(Rectagle tool).

En la lnea del tiempo, podrs observar que estamos haciendo uso del fotograma 1, de la capa 1.

2- Haz click en el fotograma 4, despus presiona la tecla F6, para crear fotogramas claves.

3- Despus haz click en el fotograma 17 y presiona la tecla F7 para crear un fotograma clave vaco.

Observa la lnea del tiempo, y vers que la cabeza lectora est sobre un fotograma que no contiene nada; es exactamente en ese fotograma vaco en donde crearemos la imagen en la que se transformarn los rectngulos anteriormente dibujados.

4- Click en la "Herramienta de texto" del panel de herramientas y en la parte derecha de abajo del escenario, escribe la palabra "WEB", despus haz click en la "Herramienta Flecha", con el texto seleccionado, haz la siguiente combinacin de teclas: CTRL + B, dos veces.

La combinacin de teclas CTRL + B, har que el texto se separe, para que Flash interprete cada letra como una imagen individual, de lo contrario Flash interpretar a la palabra "WEB" como una sla imagen y la interpolacin de formas no funcionar.

5- Ahora dirgete al fotograma 30 y presiona F6 para alargar el tiempo de duracin de los objetos en la lnea del tiempo.

6- Regresa al fotograma 4, click sobre l, y ve hacia el panel de "Propiedades" que normalmente est ubicado en la parte de abajo del entorno de Flash, (si no lo puedes visualizar ve al men principal, click en Ventana>Propiedades); en el mencionado panel existe una opcin llamada "Interpolacin"(Tween), puedes desplegar el combo de opciones y elige la opcin "Forma"(shape).

35

Puedes ver que en la lnea del tiempo de la capa 1, aparece el color verde junto con una flecha que debe extenderse desde el fotograma 4 hasta el 17; es ah exactamente donde se realiza la interpolacin de formas; como muestra la siguiente imagen:

Ahora puedes probar la pelcula (CTRL + Enter)

Bibliografa http://www.desarrolloweb.com/manuales/39/

http://www.youtube.com/watch?v=jPiLBhJsTPo

36