Manual Flash Parte 1

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de Flash
Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Tutoriales-flash.com Rubn Alvarez Susana Ros Suanes
La web de los tutoriales flash en castellano http://www.tutoriales-flash.com/ (11 captulos) Redactor de DesarrolloWeb.com http://www.desarrolloweb.com (9 captulos) Docente de Lgica. http://www.delphi.todouy.com/ (7 captulos)
Ivett Kelemen
Diseo y desarrollo de sitios web http://www.ivettkelemen.com (7 captulos)
Ludwing Rodriguez
http://www.progresivoweb.com (6 captulos)
Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (2 captulos)
Carlos Carmona
http://www.scourdesign.com/ (2 captulos)
Fernando Campaa
Programacin - Multimedia http://www.rakidwam.com.ar/ (2 captulos)
Galileo
(1 captulo)
Miguel Daz
Estudiante Universitario http://novatosflash.blogspot.com/ (1 captulo)
Aurelio Franco Fernndez

Diseador Web http://www.studioflash.es (1 captulo)
Manual de Flash: http://www.desarrolloweb.com/manuales/39/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Prlogo del manual de Flash

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. Artculo por Rubn Alvarez
Qu es Flash
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
2
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. Artculo por Rubn Alvarez
Entorno de trabajo en Flash

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
Manual de Flash: http://www.desarrolloweb.com/manuales/39/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 3
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.
Artculo por Rubn Alvarez
Capas y fotogramas en Flash

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. Artculo por Rubn Alvarez
Clases y objetos en Flash

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 3 4 5 function Arrastre() { onPress=Arrastrar; onRelease=Soltar; }
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 3 4 5 function Arrastre() { onPress=Arrastrar; onRelease=Soltar; }
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 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: "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); Puedes ver el ejemplo funcionando aqui. Artculo por Susana Ros Suanes
Bibliotecas en Flash
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.
10
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. Artculo por Rubn Alvarez
Mi primera animacin en Flash I

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.
11
Object 1
Para crear nuestro smbolo en la biblioteca: Ventana > Biblioteca 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:
12
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. 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:
13
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. Artculo por Rubn Alvarez
Mi primera animacin en Flash II

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: 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 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:
15
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. Artculo por Rubn Alvarez
Mi primera animacin en Flash III

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:
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.
17
Artculo por Rubn Alvarez
Mi primera animacin en Flash IV

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 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:
Si lo que deseas es ver la animacin directamente en el navegador, es posible hacerlo seleccionando:

Object 2
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. Artculo por Rubn Alvarez
19
Colocar pelculas Flash en nuestras pginas

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.
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. Artculo por Ludwing Rodriguez
Crear un cdigo HTML para mostrar una pelcula Flash

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
20
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=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="350"> </embed> </object>
En el cdigo HTML para insertar Flash tenemos aqu dos etiquetas bsicas: , 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.
<object>
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. Artculo por Miguel Angel Alvarez
Cmo hacer botones en Flash

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:
22
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. 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:
23
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 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. Artculo por Ludwing Rodriguez
Enlazar pginas web por medio de botones Flash

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:
24
El panel de Acciones, nos servir para trabajar con ActionScript. 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: _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
25
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. Artculo por Ludwing Rodriguez
Enlaces email flash

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.
26
Artculo por Ludwing Rodriguez
Interpolacin de Formas
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", 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). 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:
27
Ahora puedes probar la pelcula (CTRL + Enter) Un ejemplo parecido de nuestra interpolacin de formas es:
Object 3
Artculo por Ludwing Rodriguez
Shape Hint. Interpolacin ordenada de formas

En esta captulo nos ocupamos del Shape Tweening para controlar y ordenar la interpolacin de las formas. Primero preparamos la interpolacin a modificar: transformamos un rectngulo a un tringulo. En el primer fotograma dibujamos un rectngulo. Copiamos su base Edicin>Copiar. Insertamos un fotograma clave vacio Insertar> Fotograma Clave Vaco en el fotograma 25, y pegamos Insertar>Pegar en sitio (paste in place). Para ver el original rectngulo pulsamos el botn Onion Skin y completamos el tringulo. Nos colocamos en alguno de los fotogramas intermedios. En el panel de propiedades en la opcin Interpolacin (Tween) desplegamos el combo de opciones y elegimos la opcin Forma (Shape). Probamos la
pelicula (Ctrl+Enter)
Object 4
Podemos ver que la tranformacin es bastante desordenada. Queremos que la base siempre quede en su sitio. En el primer fotograma hacemos click en el menu Modify>Shape>Add Shape Hint. Desplazamos el punto rojo al ngulo iquierdo del rectngulo y en el fotograma 25 al ngulo izquierdo del tringulo. Aadimos otro Shape Hint al ngulo derecho de las formas. Probamos la pelicula (Ctrl+Enter).
Object 5
Podemos ver que la transformacin ya es mucho ms ordenada. Aadimos otro Shape Hint a la mitad de la base de las formas y probamos la pelicula (Ctrl+Enter).
29
Object 6
Artculo por Ivett Kelemen
Interpolaciones de smbolos
En este prrafo aprenderemos a crear interpolaciones con objetos complejos como grupos y smbolos. Primero, creamos un smbolo: Insertar / Smbolo Nuevo. Damos un nombre: 'hello' y elegimos el botn de opcin "Grafica". Con el "type tool" escribimos HELLO. En el panel "Propiedades" formateamos. Regresamos a la escena y hacemos click en el "Sceen1" debajo de la lnea de tiempo. Hacemos click en el men Ventana/Biblioteca. En la ventana que aparece cogemos el smbolo 'hello' y lo arrastramos al escenario. Movemos el smbolo a la parte de arriba del escenario, ms o menos al centro. En el panel de "Propiedades" en la opcin "Color" desplegamos el combo de opciones y elegimos la opcin "Alpha", y damos un valor de 0%. Con esto conseguimos que el texto sea transparente. Insertamos un fotograma clave Insertar> Fotograma Clave en el fotograma 25. Aqu seleccionamos el smbolo. En el panel de "Propiedades" cambiamos el valor "Alpha" a 100% para que sea opaco. Desplazamos el smbolo al fondo del escenario. Con el botn "Free transform" alargamos el texto. As hemos definido la situacin inicial y final de la interpolacin. Hace falta crear los fotogramas intermedios. Hacemos click en la lnea del tiempo. En el panel de "Propiedades" en la opcin "Interpolacin"(Tween) desplegamos el combo de opciones y elegimos la opcin "Movimento" (Motion). Probamos la pelcula: Ctrl+Enter. Todo funciona perfectamente.
30
Object 7
Retornamos al rea del desarrollo para ajustar otro parmetro. En el panel de "Propiedades" en la casilla "Ease" podemos ajustar la aceleracin de la animacin. Elegimos -100: as la velocidad aumenta durante la animacin. Probamos la pelcula : Ctrl+Enter
Object 8
Efecto de mscaras con Flash

Las Mscaras es un efecto utilizado frecuentemente en pginas web que contienen pelculas Flash.
31
Dicho efecto consiste en ocultar objetos que se encuentren en el escenario de Flash, y mostrarlos poco a poco, por algn objeto que tenga una interpolacin de movimiento o cualquier otro efecto que sea producto de tu imaginacin. La mscara no es solamente para ocultar objetos completamente, un ejemplo podra ser mostrar los objetos color gris y que un objeto con interpolacin de movimiento los muestre de otro color cuando pase sobre ellos. Para tener todo ms claro, hagamos un ejemplo fcil: 1- En Flash, en la escena 1, toma la herramienta de texto (A) y escribe lo que desees, utiliza un tamao de fuente grande para que el texto abarque gran parte del escenario... 2- Dirgete al fotograma (frame) numero 60 de la "capa 1", haz un click sobre l, y presiona F6, para que el tiempo de duracin de la pelcula sea ms prolongado. 3- Crea otra capa (capa 2), despus toma la "herramienta valo" y dibuja un valo:-) 4- Haz click derecho sobre el nombre de la "capa 2" y en el men que se desplegar, selecciona la opcin "Mscara" (Mask) 5- Ahora dirgete al fotograma nmero 1 de la "capa 2" (es donde est el valo), haz click derecho, y despus haz click en la opcin "Crear interpolacin de movimiento". 6- Finalmente haz click en el fotograma nmero 60 de la "capa 2" y presiona la tecla F6 y mueve el valo como t quieras, eres un Flasher, as que debes tener mucha imaginacin. Nuestra lnea del tiempo tendra que ser parecida a la siguiente imagen:
Ahora prueba la pelcula Click para ver un ejemplo Artculo por Ludwing Rodriguez
Onion skin (piel de cebolla)

En este captulo nos ocupamos de la animacin "fotograma por fotograma". Para realizar este tipo de animacin hemos de modificar manualmente los smbolos. Por ejemplo simularemos el movimiento de una brocha. Creamos un smbolo de brocha y la colocamos en el nivel 1. Creamos un smbolo de raya y lo colocamos en el nivel 2. En ambos niveles seleccionamos el fotograma 4 y pulsando F6 insertamos 2 fotogramas claves. En el
nivel de la brocha, movemos la brocha. En el nivel de la raya con la "Trasformacin libre" alargamos la raya. Insertamos fotogramas claves en el fotograma 7. (F6). Ahora queremos que el movimiento sea fluido. Cmo lo hacemos? Pulsamos el botn "Onion skin" en la barra de estado de la lnea de tiempo. Cogemos el borde izquierdo del "Onion skin" y movemos hasta el primer fotograma. Esto nos permite ver los fotogramas anteriores, que aparecen semi-transparentes. Insertamos fotogramas claves en el fotograma 10. Movemos la brocha, y alargamos la raya. Probamos la pelcula: Ctrl+Enter
Object 9
Importar bitmap y usar como relleno

Del menu File elegimos Import, y elegimos el archivo Pajaro.bmp. La imagen aparece en el escenario y est en el Library (menu Window/Library o F11).
33
La imagen se comporta como un smbolo, y podemos reutilizarla varias veces en la pelcula sin que el tamao del archivo crezca excesivamente. Todos los bitmaps insertados estn en el panel Color Mixer (menu Window/ Color Mixer o Shift+F9) y pueden ser utilizados como relleno. Cmo se hace? Abrimos el panel de los colores (menu Window/ Color Mixer o Shift+F9). En el combo de opciones elegimos Bitmap. En el cuadro debajo aparecen todos los bitmaps que podemos utilizar. Elegimos Pajaro.bmp, y con el Rectangle Tool rectngulo est formado por pequeos pjaros. dibujamos un rectngulo. El
Object 10
En el Tool Box panel pulsamos Fill Transform y hacemos click dentro del rectngulo. Uno de los pjaros queda seleccionado. Podemos cambiar su tamao o girarlo pinchando con el ratn en smbolo correspondiente. La totalidad de los pjaros que forman el relleno quedan modificados de la misma forma.
Object 11
34
Modificar Bitmap
Modificar bitmap El Flash no es una programa para retocar fotografias, y por eso no es tan fcil modificar las imgenes importadas. Se pueden modificar parcialmente a travs de la divisin o transformar a diseos vectoriales. - Primero trataremos la divisin: En el menu File/Import seleccionamos el archivo Pajaro.bmp.
Seleccionamos la imagen con la flecha negra y elegimos el menu Modify/Break Apart. La imagen seleccionada queda marcada con puntos. A partir de este momento ya es posible modificar por partes la imagen con los instrumentos de diseo. Por ejemplo seleccionamos el Lasso Tool y despus el Magic Wand y hacemos click en el fondo del imagen. Con esto conseguimos que slo el fondo de la imgen quede seleccionado (marcado con puntos). Ahora podemos cambiar el color, o editar cualquier parmetro del fondo sin afectar a la imgen en primer plano. Podemos ver el resultado en la siguiente imgen:
Object 12
Cmo podemos ver en la imgen, la capacidad de seleccionar del Flash no es todo lo perfecta que sera de desear. An as, puede ser til en muchos casos. Otra manera de manejar los bitmaps es convertirlos en reas vectoriales. Para probar esta facilidad, eliminamos la imagen que tenemos en el escenario y copiamos a l, arrastrando desde la ventana de librera, la imgen del pjaro original. Como podis ver, la imagen en la librera est intacta y no se ha visto afectada por las modificaciones que hicimos con su copia en el escenario. Seleccionamos la imagen con la flecha negra y elegimos el menu: Modify/Trace Bitmap. En la ventana que aparece damos los siguientes valores:
ColorTreshold: 50. Esto significa que si la diferencia entre los valores RGB de 2 pixeles es menor de 50, entonces el color de los 2 pixeles se considera igual. Minimum Area: 5 Dejamos invariable los valores Curve fit= Normal, y Corner Tresholder=Normal. La imagen del pjaro ya es un diseo vectorial, y podemos editarlo como tal.
Object 13
Color Treshold=50, Minimum Area=5
Object 14
Object 15
Distribute to Layers
En Flash, en 1 lnea de tiempo se puede animar solamente 1 objeto. Pero si quisieramos que un texto, por ejemplo, explotara cmo debemos hacerlo?
36
En el versin MX de Flash tenemos la respuesta. con el Type Tool escribimos el texto 'Ciao bello'. Seleccionamos con la flecha negra y elegimos el men : Modify / Break Apart. As todava no podemos animarla porque todas las letras estn en el mismo nivel. Para animarlas tendran que estar en niveles diferentes. mientras la palabra est seleccionada elegimos el men: Modify / Distribute To Layers. Flash automticamente crea para cada letra un nivel diferente. Ahora borramos la linea de tiempo "layer 1" que queda vaca. En todas las lineas de tiempo del fotograma 10 insertamos un fotograma clave. Seleccinamos el fotograma 10. Vemos en el escenario las letras del texto "Ciao bello". Distribuimos las letras por el el escenario, procurando ponerlas cerca del borde. Ahora nos movemos a un fotograma intermedio entre el 1 y el 10, selecionando todas las lineas de tiempo. En el panel Property, en la opcin Tween desplegamos el combo de opciones y elegimos la opcin Motion. Esto crea, en todos los fotogramas intermedios entre el 1 y el 10, las imgenes necesarias para dar sensacin de movimiento progresivo entre el texto legible que tenemos en el 1 y las letras distribuidas que tenemos en el 10. Probamos la pelcula: Ctrl+Enter
Object 16
Esta es lo que queramos lograr: un texto donde todas las letras estn animadas. Hemos probado el Distribute to layers en un texto. Es posible usar este men en todos los objetos complejos que puedan ser divididos en objetos individuales. Artculo por Ivett Kelemen
Insertar video en Flash

Importar vdeo Una de los novedades de Flash MX es la mejora en la importacin y gestin de las secuencias
de video (video-clip). Flash es capaz de manejar los siguientes archivos: .avi Quick Time .mpeg Digital video
Es necesario que en el ordenador tenga instalado el Quick Time 4 o Director 7 (o versiones posteriores). Vamos a crear un smbolo, y dentro de este smbolo insertamos una secuencia de video. Elegimos el men Insert / Create New Symbol (name=callejon, behavior=Movie Clip). Del men File elegimos Import y elegimos calle.avi. Flash presenta una nueva ventana de dilogo donde podemos ajustar la importacin del video. Flash comprime las secuencias de video con el codex 'Sorenson Spark' lo que permite reducir notablemente el tamao del archivo. Los parmetros Quality, Keyframe y Scale permiten ajustar este proceso. Dejamos 40 el valor de Quality, y 24 el de Keyframe. Este parmetro indica la serie de fotogramas clave que sern insertados en la secuencia. Ponemos Scale = 70% para reducir el tamao del vdeo. La importacin puede tardar varios minutos - dependiendo del tamao del vdeo. Antes de insertar definitivamente la secuencia de vdeo, Flash nos informa que este necesita por su reproduccin total un numero de fotogramas superior al que tenemos actualmente. Por lo tanto es necesario aumentar el numero de fotogramas (en esto ejemplo: 84). El procedimiento esta completo.
Ahora vamos a ver cmo podemos aplicar las modificaciones de smbolos en la secuencia de vdeo. Regresamos al escenario. Insertamos un fotograma clave en la posicin 84. Regresamos a la fotograma 1. Seleccionamos el Movie Clip, y lo movemos al rincn izquierdo, y con el Free Transform lo giramos un poco. En el Properties panel abrimos el men desplegable de Color y elegimos color = Alpha. Le damos un valor del 0%. Creamos una interpolacin (haciendo click en un fotograma intermedio, y en el Properties panel, men desplegable "Tween", elegimos la opcin "Motion"). Haciendo click en el fotograma 84 abrimos el panel Actions (menu Window / Actions o F9), y escribimos stop(). Haciendo doble-click en el video, y haciendo click en el fotograma 84 abrimos el panel Actions (menu Window / Actions o F9), y escribimos stop(). As no se repite infinitamente la pelcula.
Probamos la pelcula (men Control / Test Movie o Ctrl+Enter)
38
Object 17
Sistema de noticias con Flash y Actionscript

Si algo echar de menos el da que mis obligaciones no me permitan publicar, sin duda, ser el tener la oportunidad de dar a conocer el grandsimo talento y conocimientos de personas que, an siendo muy conocidas (como en este caso), en After-Hours por su entrega y dedicacin, adems de otros por donde habitualmente suele moverse, por razones obvias, su trabajo no siempre puede llegar a todo el mundo como sera deseable. Me gustara presentarles a dondiegote, moderador de los foros de AH, un amigo que segn reza en su web, se presenta de esta forma... TRABAJO MUCHO Y DUERMO POCO. HASTA QUE TENGA TIEMPO LIBRE, QUE AL MENOS ALGO MIO DESCANSE Para que esta frase tenga sentido para todos vosotros, lo mejor es que veamos una de sus ltimas aportaciones. Se plante en el foro Como se hizo la seccin noticias de www.framemedia.co.uk. En la web, que me parece muy buena, llama la atencin sobre todo por su sencillez y por este sistema de noticias. Es cierto que esta forma de presentacin recuerda mucho, la verdad es que muchsimo a www.carldekeyzer.com de los grandes www.group94.com. El planteamiento de lo que se va a hacer es sencillo.
39
Divide los elementos que va a usar en 2 grupos diferentes, ttulos y textos. Tiene en el escenario 2 mscaras, una para cada grupo. La idea es crear 2 grandes MovieClips que contengan por un lado todos los ttulos, y enmascararlos dentro de su espacio, y por otro lado los textos y enmascararlos tambin. Los datos los pone en 2 arrays diferentes, con la idea de poder recogerlos desde un xml o txt. En el post completo hay un ejemplo de cmo aadirle un xml creado por kaax El resto es relativamente sencillo y est explicado dentro del script. Usa un prototipo easing para hacer los movimientos y quizs lo ms llamativo es la forma de controlar y mandar estos movimientos. Utiliza como referencia la noticia que se quiere mostrar, y recorre en dos bucles diferentes las noticias de arriba y las de abajo, situndolas en funcin de la principal. Como curiosidad podis observar que en framemedia no coincide la noticia donde pinchas con la que se ve, sino la anterior y en este caso, el ha visto ms lgico hacerlo sobre la que se ha picado. Ahora lo importante, el fla: http://www.thelirios.com/ah_news_framemedia/news_framemedia.zip Y el cdigo:
Stage.scaleMode = "noScale"; prof = 10; // Sigo marcandome la profundidad, no me acostumbro al getNextHighestDepth // Creo 2 arrays, uno con los ttulos y otro con los textos. // La idea es poder recogerlos desde un xml o un txt News = new Array("noticia 1", "noticia 2", "noticia 3", "noticia 4", "noticia 5", "noticia 6", "noticia 7"); Noticias = new Array("Titulo noticia 1\n\nEste es el texto de la noticia 1", "Titulo noticia 2\n\nEste es el texto de la noticia 2", "Titulo noticia 3\n\nEste es el texto de la noticia 3", "Titulo noticia 4\n\nEste es el texto de la noticia 4", "Titulo noticia 5\n\nEste es el texto de la noticia 5", "Titulo noticia 6\n\nEste es el texto de la noticia 6", "Titulo noticia 7\n\nEste es el texto de la noticia 7"); // Hago un prototipillo para hacerme los easings // lo uso sobre todo para _y pero le paso "prop" para usarlo en _scales MovieClip.prototype.easing = function(prop, fin, frec) { this.onEnterFrame = function() { this[prop] += (fin - this[prop])*frec; if(Math.abs(this[prop] - fin) < .5) { this[prop] = fin; delete this.onEnterFrame; } } } // Creo un clip "mnu" que sern los botones con los ttulos this.createEmptyMovieClip("mnu", prof++); // Lo situo donde su mscara. En la escena solo tengo 2 mscaras ms el fondo, lo dems lo attacheo this.mnu._x = msk._x; this.mnu._y = msk._y; // lo enmascaro this.mnu.setMask(msk); // Creo un clip "noticias" que sern los textos de las noticias this.createEmptyMovieClip("noticias", prof++); // lo coloco
40
this.noticias._x = msk2._x; this.noticias._y = msk2._y; // lo enmascaro this.noticias.setMask(msk2); // Empieza la juerga ... for(n=0; n < News.length; n++) { // TITULOS // atacheo "new" this.mnu.attachMovie("new", "new"+n, prof++); // lo doy el texto correspondiente this.mnu["new"+n].txt.text = News[n].toUpperCase(); // Defino una variable interna del clip new+n llamada yFin // en yFin almaceno el destino _y del clip y los dems se colocan en relacin a los yFines this.mnu["new"+n].yFin = this.mnu["new"+(n-1)].yFin + this.mnu["new"+(n-1)]._height; // Si yFin devuelve NaN estoy en el primero, luego lo coloco donde quiero if(isNaN(this.mnu["new"+n].yFin)){ this.mnu["new"+n].yFin = msk2._y + msk2._height - msk._y this.mnu["new"+n]._height}; // le mando hacer el easing y que vaya a su sitio this.mnu["new"+n].easing("_y", this.mnu["new"+n].yFin, .5); // NOTICIAS // attacheo "textos" this.noticias.attachMovie("textos", "textos"+n, prof++); // les doy su texto this.noticias["textos"+n].txt.text = Noticias[n]; // Defino yFin this.noticias["textos"+n].yFin = this.noticias["textos"+(n-1)].yFin + this.noticias["textos"+(n-1)]._height; // Coloco el primero if(isNaN(this.noticias["textos"+n].yFin)){ this.noticias["textos"+n].yFin = 0}; // Les mando a su sitio this.noticias["textos"+n].easing("_y", this.noticias["textos"+n].yFin, 5); // ACCIONES BOTONES // el rollOver y el rollOut, sencillitos this.mnu["new"+n].rOver._alpha = 0; this.mnu["new"+n].onRollOver = function() { this.txt.textColor = 0xffffff; this.rOver._yscale = 0; this.rOver._alpha = 100; this.rOver.easing("_yscale", 100, 6); } this.mnu["new"+n].onRollOut = this.mnu["new"+n].onReleaseOutside = function() { this.txt.textColor = 0x333333; this.rOver._yscale = 100; this.rOver.easing("_alpha", 0, 15); } // onRelease this.mnu["new"+n].onRelease = function() { // La posicin que van a tomar el clip de los textos de las noticias. // Muevo el clip "noticias" entero, pero tomo como referencia el alto de un texto var newpos = this._parent._parent.msk2._y - (this._parent._parent.noticias.textos1._height*substring(this._name, 4)); // le mando a su sitio this._parent._parent.noticias.easing("_y", newpos, 15); // Llamo a la funcin ColocaTitulos para colocarme los botoncillos ColocaTitulos(substring(this._name, 4)); } } // Para situar los botones cuando click en alguno function ColocaTitulos(actual) { var actual = Number(actual); // transformo el String actual en nmero para operar con l // Defino yFin en el botn clickado, y le mando a su sitio (justo debajo de las noticias) this.mnu["new"+actual].laY = msk2._y - msk._y; this.mnu["new"+actual].easing("_y", this.mnu["new"+actual].laY, 5);
41
// Defino y coloco los botones por encima del clickado, tomandolo como referencia for(n = (actual-1); n>=0; n--) { this.mnu["new"+n].laY = this.mnu["new"+(n+1)].laY - this.mnu["new"+n]._height; this.mnu["new"+n].easing("_y", this.mnu["new"+n].laY, 5); } // Defino y coloco el boton por debajo del clickado, tomando como referencia la mscara de los textos this.mnu["new"+(actual+1)].laY = msk2._y + msk2._height - msk._y; this.mnu["new"+(actual+1)].easing("_y", this.mnu["new"+(actual+1)].laY, 5); // Defino y coloco los botones por debajo del anterior, tomandolo como referencia for(n = actual+2; n < News.length; n++) { this.mnu["new"+n].laY = this.mnu["new"+(n-1)].laY + this.mnu["new"+(n-1)]._height; this.mnu["new"+n].easing("_y", this.mnu["new"+n].laY, 5); } }
Se ha subido un ejemplo para verlo on-line, si queris, podis verlo en aqu http://www.thelirios.com/ah_news_framemedia Artculo por Galileo
Vestir a una mueca en Flash

La idea y las imgenes las saqu de aqu: www.teacuerdas.com y la us en la siguiente muestra que quiero que la vean para tener una idea clara de lo que pretendemos hacer. Una tiendita que se llama "Sol" En esta tiendita hay en FLASH un probador de ropa que es lo que haremos aqu. El resto es PHP y una base de datos MySql. Comencemos en forma ordenada: 1) Tener una idea clara de lo que queremos hacer. En este caso lo mejor es entrar a la tiendita "Sol" y jugar un poco en vestir y desvestir distintas ropas y botas a la mueca. Vern que la accin siempre est en los botones que son las ropitas de la vidriera. En la vidriera, clic sobre la ropita para vestir y el mismo clic para desvestir. Resumiendo el funcionamiento de la aplicacin, con ejemplos: Al abrir, la mueca solo en malla y las ropitas (botones) en la vidriera. Clic en botn(enterito amarillo), vestimos con el enterito amarillo. Clic en botn(chaqueta de abrigo), agregamos abrigo a la mueca. Clic en botn(enterito amarillo), la mueca queda solo con la chaqueta
2) Crear en nuestra computadora una carpeta nueva que podemos llamar probador. 3) Conseguir las imgenes necesarias. Como nuestro propsito es Flash y no el dominio del tratamiento de imgenes, se las doy prontas. Pero cualquier cosa que quieran preguntar a este
respecto, contestar por email con mucho gusto. En la pgina http://www.delphi.todouy.com/flash/probador/imagenes.html encontrarn todas las que necesitan. Con el botn derecho del ratn, hacen clic sobre cada imagen y "Guardar imagen como.." Guardan en la Carpeta que crearon el fondo.png y los nueve futuros botoncitos b1.png, b2.png,...b9.png y los nueve futuros clips c1.png, c2.png,.... c3.png . Si cambian la extensin .png por .bmp o .jpg las imgenes saldrn con el fondo celeste y no transparente como necesitamos. 4) Abrimos el Flash y creamos la aplicacin: Archivo->, Nuevo->, Documento de Flash. Nuestra aplicacin tendr un solo frame(fotograma) y en la lnea del tiempo dos capas. Por ahora tenemos una sola capa que nombraremos fondo. Importamos la imagen del fondo desde la misma Carpeta. Archivo-> Importar-> Importar a biblioteca. Y ya tenemos la imagen en biblioteca. Si la biblioteca est cerrada, la abrimos con Control L y traemos el fondo.png a escena. En propiedades vemos que las dimensiones de esa imagen son 402 x 500. Si la imagen va a formar parte de otra pgina como en el caso de la "tiendita Sol" el escenario debe ser dimensionado 402 x 500 tal cual el fondo. Y ajustadas las posiciones del fondo.png en el panel Propiedades. A cero tanto "x" como "y".
Grabamos el fla que tambin podemos llamar probador.fla y lo pueden probar con Control Enter . 5) Ponemos candado a la primer capa y creamos la segunda donde va todo lo dems. 6) Importar a la biblioteca el resto de las imgenes (todos los botoncitos y clips), que por ahora no son ni botones, ni clips sino imgenes "mapa de bits". 7) Primero vamos a probar con b1 y c1. Arrastramos a b1 desde la biblioteca al escenario y lo transformamos en botn con el nombre boton1. Y traemos a c1 y lo transformamos en clip de pelcula con el nombre clip1. Ubicamos a boton1 en la vidriera y a clip1 en el lugar exacto para
43
que le quede bien a Yolanda, que as se llama la mueca. Importante En un papel debes ir apuntando la ubicacin exacta de cada clip. En mi caso: clip1, x 238, y 160 8) Las acciones correspondientes: Clip1, va a estar ah, pero no queremos que se vea. Para esto escribimos la accin en el frame 1, (el nico frame que tendremos en la lnea del tiempo).
setProperty("clip1", _visible, false);
En el boton1 escribimos la accin para vestir y desvestir esa blusita azul que es clip1.
on(press){ if(clip1._visible==false){ setProperty("clip1", _visible, true); }else{ setProperty("clip1", _visible, false); } }
El frame nombra a clip1, y boton1 nombra a clip1, en sus acciones, que no funcionarn si te olvidas de seleccionar clip1 para, en el Panel de Propiedades escribir su nombre en Nombre de Instancia. 9) Ahora grabas y pruebas y si todo funcion como esperamos, repites la accin para cada uno de los artculos de vidriera. Te llevar poco tiempo usando Edit, Copiar y Pegar, ajustando correcciones para cada caso. Por supuesto que para saber el lugar exacto donde va cada prenda, tendrs que sacar la anterior. Al final tendrs que ponerlas todas apiladas y por eso les deca que deben apuntar las ubicaciones de cada clip. 10) Para que no te olvides de nada, comencemos con los botones. Ya transformaste a b1.png en el boton1, lo ubicaste en la vidriera y le escribiste la accin. Ahora hay que transformar a b2.png en el clip boton2 y ubicarlos en la vidriera. Copias la accin de boton1 y la pegas como accin de boton2. Despus corriges cambiando en lo que pegaste, "clip1" por "clip2". Y as hasta que tengas los nueves botones, ubicados en vidriera y con la accin referida al clic con su mismo nmero. 11)Los botones estn prontos y en vidriera. Sigues con los clips que vestirn a Yolanda. De cada c1.png, c2.png, etc. creas un clip de pelcula con los nombres clip1, clip2, etc. y lo ubicas vistiendo a Yolanda para apuntar la posicin exacta en las coordenadas x, y, que corresponden, y lo borras del escenario para que quede en la biblioteca y Yolanda quede en malla para probarle el prximo clip y apuntar sus coordenadas. Por el momento nada ms. 12) Crear la pila de los clip, cada uno segn el apunte. Y OJO, NO TE OLVIDES DE PONER A CADA UNO, SU NOMBRE EN EL PANEL PROPIEDADES Te quedar as:
44
13) Completar la accin del frame para que haga invisible la pila entera:
Artculo por Susana Ros Suanes
45
Creacin de variables, y la adjudicacin de sus valores en FLASH

1) Tener una idea clara de la salida que queremos. Para esto, traten de descubrir el refrn. HACER CLIC AQU PARA DESCUBRIR EL REFRN 2) Jugando, nos damos cuenta, que la lnea de arriba est formada por variables, esperando que el jugador les adjudique valores, que son las distintas letras que corresponden. Tambin el contador de ayudas es otra variable que se incrementar con cada ayuda que se pida. se es nuestro trabajo. Crear en tiempo de diseo las variables y buscar la forma de, mientras se juega tiempo de ejecucin se adjudiquen los valores. 3) Comencemos con crear una Carpeta en nuestra computadora que se llame refran y un documento nuevo que guardaremos ah y ser refran.fla. La primera capa, se llamar fondo y tendr solo grficos para identificar las letras y las ventanitas con sus botones. Te quedar as:
Hacer estos grficos lleva tiempo. Para lograrlos, primero hay que hacer el cuadriltero de fondo como smbolo grfico, y tambin cada nmero. Despus sobreponerlos atendiendo a las coordenadas para que resulten parejos.
46
No hay nada que aprender aqu ms que paciencia y dedicacin y no creo que lo necesiten. Por eso, se los envo para que los bajen: Con el botn derecho del ratn, hacen clic sobre cada imagen y "Guardar imagen como.."
Jugando, ya habrs descubierto, que el refrn es DE TAL PALO TAL ASTILLA y tambin el nmero correspondiente a cada letra. En la lnea de arriba los organizas distanciando las palabras con los nmeros de cada letra. En la lnea de abajo simplemente los nmeros en orden para que el usuario escriba las letras y pulse el botn de entrada. Hecho esto, pones candado a la capa, grabas y pruebas. 4) Creamos la segunda capa. Aqu pondremos las variables y las acciones para manejarlas. En esta aplicacin tratamos los tres tipos de variables: de texto, numricas, y booleanas(verdadero, falso). Comencemos con las de texto: Debemos crear una para cada letra. Para facilitarnos la tarea, tratamos de pensar un nombre que aluda al significado de la variable. Como van a ser mostradas en texto dinmico, resolv que todas comenzaran con "din" y seguiran con la letra de la solucin. Si la letra aparece repetida se le agregar un nmero. Por ejemplo las variables donde la solucin es A se llamarn dina, dina1, dina2, dina3, dina4.
Creas entonces para cada letra un texto dinmico, ajustando las medidas con 28 por ancho y 32 de altura. Yo us letra Verdana tamao 31. Y en la casilla Var escribes el nombre de la variable. Ubicas cada uno de estos textos en su lugar. Superpuestas las capas, se vern as:
5) Ahora necesitamos variables, que reciban lo tecleado por el jugador. Usamos Introduccin de Textos Uno para cada nmero. El mismo tamao y la misma letra. Para los nombres de las variables de entrada hemos elegido que comiencen con var y terminen con la letra. De modo que son: vard, vare, vart, vara, varl, varp, varo, vars, vart. Superponiendo las capas vers:
47
6) Los botones se encargarn de tomar los valores impuestos por los jugadores, asignndolos a las letras (variables dinmicas) que correspondan. A continuacin los cdigos para cada botn. En la tabla siguiente copio primero los cdigos de los botones para solo una letra. Por ejemplo el botn 1 que asigna a la variable dind el valor impuesto en la variable vard. El valor se adjudica con el signo =. En cambio los botones asignados a las letras que se repiten en el refrn deben asignar valor a varias variables. Botn 1 on(press){ dind=vard; } Botn 7 on(press){ dino=varo; } Botn 3 on(press){ dint=vart; dint1=vart; dint2=vart; } Botn 2 on(press){ dine=vare; } Botn 8 on(press){ dins=vars; } Botn 4 on(press){ dina=vara; dina1=vara; dina2=vara; dina3=vara; dina4=vara; } Botn 6 on(press){ dinp=varp; } Botn 9 on(press){ dini=vari; } Botn 5 on(press){ dinl=varl; dinl1=varl; dinl2=varl; dinl3=varl; dinl4=varl; }
7) El contador de ayudas es un ejemplo de variable numrica. La creamos en el fotograma (lnea del tiempo). Cdigo de la accin del fotograma:
stop(); ayudas=0;
Y como deseamos ver en pantalla la marcha del contador, ponemos en pantalla un texto dinmico y nombramos a la variable con el nombre ayudas para que refleje la actualizacin del contador. 8) Cdigo de los botones de ayuda.
48
letra 5 on(press){ letra 9 letra 8 ayudas=ayudas+1; on(press){ on(press){ varl="L"; ayudas=ayudas+1; ayudas=ayudas+1; dinl="L"; vari="I"; vars="S"; dinl1="L"; dini="I"; dins="S"; dinl2="L"; setProperty("ayudar9", _visible, false); setProperty("ayudar8", _visible, false); dinl3="L"; dinl4="L"; } } setProperty("ayudar5", _v } 9) No te olvides de guardar y probar a cada paso. Poner candado en esta capa y crear otra para los textos. Todo junto se ver ms o menos as:
Artculo por Susana Ros Suanes
Juego en Flash. Parte I

Lo ms importante en este tipo de juegos, de buenos y malos, de invasores y defensores, etc., es la materia prima: buenas imgenes y buen tema. Lo que pretendemos es mostrarles las herramientas ms elementales que necesitan para
poner en marcha un jueguito de este estilo. He creado una pgina bruja.html donde pongo las imgenes que necesites bajar y tambin las direcciones para que cuando juegas te quede ms fcil, con la flechita del navegador ir y volver con rapidez: http://www.delphi.todouy.com/flash/bruja/bruja.html 1) Tener una idea clara de la salida que pretendemos. Para eso entra a la pgina.html y pincha Juego completo. Juega varias veces, y trata de pensar cuantas herramientas estn involucradas, para hacer posible algo tan sencillo. Iremos paso a paso para cada herramienta. Al grabar usaremos la palabra truco que no es lo mismo pero es ms corta. 2) truco.fla . Abre en tu computadora una carpeta que se llame bruja, para grabar este primer paso que archivaremos como truco.fla Si entras a la pgina bruja.html vers lo que haremos para este archivo: una capa con el fondo, la bruja y los botones para moverla. 3) La Bruja. En la pgina html, hay seis imgenes de la bruja. Tu necesitas las cuatro ltimas (izquierda, arriba, derecha, abajo) y podras hacer con ellas el clip de pelcula de la bruja. Pero no te lo aconsejo. Si hicieras el clip, con esas cuatro imgenes, te ahorraras trabajo pero el clip pesara 11 kb. En cambio te aconsejo que bajes solamente la imagen original que se llama Iz1, el trabajo no ser tanto y el clip pesar 5 kb. As que: En la pgina html. Con el botn derecho haces clic sobre la imagen Iz1 -> Guardar Imagen como -> y la bajas a tu Carpeta bruja. Despus: Archivo -> Importar a biblioteca -> buscas la Carpeta Bruja, seleccionas la imagen y pulsas Abrir. La imagen ya est en la biblioteca. La traes al escenario y en el panel de Propiedades ves que mide 229 x 186 pxeles. La achicas a 130 x105. La conviertes en smbolo grfico que llamas brujita. Ahora los cuatro grficos que necesitamos deben ser instancias de brujita. Si hasta ahora todo va bien graba este trabajo que llamamos truco.fla Y no te olvides de grabar seguido. En tu biblioteca tienes en este momento una imagen que se llama Iz1 y un grfico que se llama brujita. Hacer los cuatro smbolos grficos: Traes brujita al escenario-> la seleccionas ->Modificar ->convertir en smbolo grfico ->nombre izquierda Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Rotar 90 en el sentido de las agujas del reloj ->Modificar -> convertir en smbolo grfico -> nombre arriba Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Voltear horizontalmente ->Modificar -> convertir en smbolo grfico -> nombre derecha Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Rotar 90 en el sentido contrario a las agujas del reloj ->Modificar -> convertir en smbolo grfico -> nombre abajo Ahora ya tenemos en biblioteca los cuatro smbolos que necesitamos.
Haremos un clip de pelcula de exportacin que se llamar clipbruja : Insertar-> Nuevo smbolo
Si aparece este cuadro debes hacer clic en avanzado porque es el que necesitas
Escribes el nombre y-> eliges Exportar para ActionScript. Si todo queda como en la imagen pulsas Aceptar. Ahora no ests en la lnea del tiempo de truco.fla sino en otra pelcula y la lnea del tiempo es la de clipbruja. Necesitamos cuatro fotogramas clave, donde van a ir distintas imgenes, as que conviene
51
crear primero los cuatro y en la lnea del tiempo, poner en cada fotograma la accin: stop(); Para que los cdigos que escribiremos en los botones coincidan con el ejemplo que tenemos hay que seguir el orden: En el primer fotograma, traemos de biblioteca el smbolo grfico izquierda y atendemos al Panel de Propiedades para que la coordenada x sea la mitad de ancho y sea la mitad de alto An 130 x -65 Al 105.6 y -52.8 Fotograma 2 smbolo arriba, ancho 105.6, x -52.8, alto 130, y -65 Fotograma 3 smbolo derecha, ancho 130, x -65, alto 105.6, y -52.8 Fotograma 4 smbolo abajo, ancho 105.6, x -52.8, alto 130, y -65 El clip de pelcula clipbruja est completo. Para afirmar y salir pulsas Escena1 y vuelves a la lnea del tiempo de truco.fla El nuevo clip est en la biblioteca.
El estado de truco.fla actual tiene que ser ste. Has puesto en cualquier lugar del escenario a clipbruja, en la lnea del tiempo hay un solo fotograma sin ninguna accin.
Grabas, pulsas Control+Enter para probar y luego Control + tecla b para saber cunto pesa ese clip que por ahora est quieto en el escenario. Vers que pesa 5 Kb. Para limpiar ese mensaje vuelves a pulsar Control + tecla b. Vuelve a la pgina .html y mira de nuevo que nos falta para completar este primer paso que llamamos truco.fla: El fondo y botones para mover la bruja. Antes de seguir, mira la biblioteca (Control + L). Ah tienes 7 elementos. Al pi de la Biblioteca Hay la opcin de crear una Carpeta. Haz clic all y ponle el nombre Abruja. Es un mtodo mo poner una A a todos los nombres de carpeta en la biblioteca, porque como se ordenan alfabticamente, consigo que queden todas las Carpetas arriba sin mezclarse con las cosas nuevas que vamos agregando. Despus sin abrir la Carpeta pinchas cada elemento y lo arrastras hasta la Carpeta para guardarlos all. Con doble clic abres la Carpeta si lo necesitas, o del mismo modo la cierras. 4) El Fondo. Deja limpio el escenario y por ahora olvdate de la bruja. En la pgina html, pulsando con el botn derecho sobre el fondo, eliges Propiedades y te enteras que el nombre es cielo.jpg y su tamao es 960 x 550 pxeles. Tambin tienes con la opcin de Guardar imagen como, que traerla a la Carpeta donde ests trabajando. Ahora desde tu trabajo (la aplicacin truco.fla ) traes desde la Carpeta a la Biblioteca la imagen cielo.jpg Te recuerdo que debes usar Archivo-> Importar -> Importar a biblioteca -> cielo.jpg La imagen cielo est ahora en biblioteca. Antes de traerla al escenario debo darle a ste las dimensiones 960 x 550 pxeles. Luego traes la imagen y le pones en el Panel de Propiedades las dos coordenadas x e y a 0 (cero). Eso es todo sobre la capa fondo. Le pones candado. Grabas, la pruebas y mides su peso. Ahora pesa 25 Kb. 5)Los botones. Creamos otra capa con el nombre bruja. Traes de la biblioteca clipbruja y la ubicas en cualquier lado. Son muy sencillos. Basta un solo grfico para sacarlos a todos. Dibuj con lpiz grosor 2 color negro y sin fondo un tringulo de 33 por base, con 52 de altura. Antes de transformarlo a smbolo lo copi para que me quedaran cuatro tringulos vacos. Con la herramienta Cubo de pintura pint los fondos. Uno con gris matizado, otro con amarillo, otro con rojo y otro con negro. De a uno, los transform en smbolos grficos con los respectivos nombres de gris, rojo, amarillo, negro. Hacemos Insertar 'Nuevo smbolo, por nombre flecha, por tipo boton y ' Aceptar. Aparece el cuadro con los cuatro fotogramas de un botn tipo. En el fotograma Reposo ponemos el grfico gris, en el fotograma Sobre el amarillo, en el Presionado el rojo y en Zona activa el negro. En todos los casos cuidar que las coordenadas de los smbolos grficos en el escenario sean x 16.5 y -26 Para salir del modo edicin y volver a la pelcula presionar escena1 El botn flecha est pronto en biblioteca. Traen cuatro instancias de flecha al escenario y las
53
colocan apuntando a las cuatro direcciones. Lo hacen con la ayuda de Modificar y Rotar. No necesitamos ponerles nombre en el Panel de Propiedades, porque nunca vamos a referirnos a ellos. Cada uno tendr su propia accin dependiendo de hacia donde apunte.
on(press){ on(press){ on(press){ clipbruja.gotoAndStop(1); clipbruja.gotoAndStop(2); clipbruja.gotoAndStop(3); clipbruja._x = clipbruja._x -20; clipbruja._y = clipbruja._y -20; clipbruja._x = clipbruja._x + 20; } } } Todos se refieren a clipbruja. Si no escriben su nombre en el Panel de Propiedades no funcionar. truco.fla que es el primer paso est pronto. Graba, prueba y pesa. Sigue pesando 25Kb.
on(press clipbru clipbruja }
Antes de salir, mira si tu biblioteca est ordenada. Recuerda que vamos a seguir agregando cosas. Debes crear la carpeta Aflecha y ah guardar el botn fecha y los grficos gris, rojo, amarillo y negro. Archiva (graba) de nuevo truco.fla con la biblioteca ordenada. Antes de irte guarda este mismo archivo con el nombre truco2.fla Artculo por Susana Ros Suanes
Juego en Flash. Parte II

Al finalizar truco.fla y archivarlo con ese nombre, tambin lo archivamos como truco2.fla para agregar herramientas sin perder el primer paso. Lo que vemos en la imagen es lo que tenemos hasta ahora: Dos capas sin ninguna accin. La
capa inferior tiene solo el fondo. La superior la bruja en el clip de pelcula clipbruja En la capa bruja tambin pusimos botones para que la muevan. Para eliminar todo lo que se refiera a los botones, en la biblioteca, con el botn derecho pulsas donde dice Aflecha y eliges Eliminar
En la Capa bruja en el primer fotograma pones la accin para que puedas mover la bruja con las flechas del teclado. Adems creas un fotograma clave. Y en este segundo pones : gotoAndPlay(1); Archiva truco2.fla , prubalo y mide su peso. Pesa lo mismo mover con botones que con teclas. Sin embargo si llevaras esto al Navegador, tendras que agregar un texto, diciendo que para activar las teclas, el usuario debe antes, hacer clic en el escenario de la pelcula. Aqu vamos a poner esa advertencia, que ser necesaria solamente en el Navegador pero ya nos ocuparemos, cuando el juego est completo de que el usuario haga clic por alguna otra razn antes de jugar, y ni se entere de que est activando las teclas flechas.. Programamos las teclas flechas
if (Key.isDown(Key.LEFT)){ clipbruja.gotoAndStop(1); if (clipbruja._x >= 0){ clipbruja._x = clipbruja._x - 10; }else{ clipbruja._x=960; } } if (Key.isDown(Key.UP)){ clipbruja.gotoAndStop(2); if (clipbruja._y >= 0){ clipbruja._y = clipbruja._y - 10; }else{ clipbruja._y=550; } } if (Key.isDown(Key.RIGHT)){ clipbruja.gotoAndStop(3); if (clipbruja._x <= 960){ clipbruja._x = clipbruja._x + 10; }else{ clipbruja._x=0; } } if (Key.isDown(Key.DOWN)){ clipbruja.gotoAndStop(4); if (clipbruja._y <= 550){ clipbruja._y = clipbruja._y + 10; }else{ clipbruja._y=0; } }
Aclaracin Los cdigos me parecen tan claros que no los explico por temor a aburrirlos. Pero contesto por e-mail con mucho gusto cualquier pregunta sobre este trabajo. Creamos una capa para los invasores. Ponemos candado a las dos capas que ya tenemos, y creamos otra que llamaremos invasores ubicada al medio de las otras dos. Al final tendremos 10 invasores pero por ahora con uno alcanza para estudiar la accin de cada y tambin la deteccin del choque con la bruja. Con la herramienta valo dibujamos un crculo de 16 x 16 pxeles. Lo seleccionamos y lo convertimos en un clip de pelcula que se llamar m1. Lo ubicamos por encima del escenario por ejemplo con la coordenada y = -20 y no olvidamos de ponerle su nombre m1 en el Panel de Propiedades La accin para el fotograma de la Capa Invasora es:
1 if(m1._y <540){ 2 m1._y=m1._y+1; 3 } 4 if((m1._x >_root.clipbruja._x)and(m1._x > _root.clipbruja._x+130)and (m1._y > _root.clipbruja._y)and(m1._y < _root.clipbruja._y+130)){ 5 m1._visible=false; 6 }
56
Numero los renglones para explicar. Tenemos dos if La estructura de un if es: Si (pasa lo que pongo entre parntesis){ Entonces hay que hacer lo que est entre las llaves; } Primer if renglones 1,2 y 3. Recordamos que el escenario nuestro es de 960 de ancho por 550 de altura. Pero no queremos que los invasores que no son disueltos por la bruja pasen ms all de y= 550 y se nos pierdan de vista. As que la orden es: 1 Si (la coordenada y de m1 es menor que 540) { 2 Entonces, que avance otro pxel ms; 3 } Segundo if, renglones 4,5 y 6. Teniendo en cuenta que clipbruja mide 130 x 105 tomamos su medida ms ancha. Esta medida hace las cosas muy fciles para el usuario, pero hacerlo ms difcil e interesante queda a la creatividad de ustedes. Estoy dispuesta a sugerir cambios, pero ahora es importante que todo sea lo ms simple posible. De forma que, est donde est la bruja el lugar que ocupa es lo que est entre (su coordenada x) y (su coordenada x+130) y entre (su coordenada y) y (su coordenada y +130) ya que no sabemos si la bruja va a estar vertical u horizontal. 4 Si ( m1 est ocupando el mismo espacio que la bruja) { 5 Entonces, que se vuelva invisible; 6 } Con esto, truco2.fla queda terminado. Archiven, prueben y pesen. Est pesando 26 Kb. Recuerden que para probarlo con Control+Intro este es en la computadora de ustedes, no necesitan pulsar la pelcula para que funcionen las teclas, pero en Internet hay que hacerlo. Antes de irse graben tambin este mismo trabajo como truco3.fla para que nos quede de respaldo truco2.fla, mientras seguimos complicando el juego. Despus nos quedaremos con el ltimo archivo y aliviaremos la memoria de la mquina borrando los anteriores. Artculo por Susana Ros Suanes
Juego en Flash. Parte III

Ahora estamos en truco3.fla pero queremos 10 invasores. Recuerda que para el clip invasor que llamamos m1 dibujamos un crculo, y lo convertimos en un smbolo clip de pelcula. De la misma forma hacemos otros nueve clips, de distintos colores, que sern m2, m3, m4, m5, m6, m7, m8, m9, y m10. Y los colocas encima del escenario ms o menos as;
Y no te olvides de poner a cada uno, su nombre en el Panel de Propiedades.
57
Crear la funcin invade (clip) Mantn los candados en las capa fondo y brujas. Trabajamos en la capa invasores. En el primer fotograma hemos escrito dos condicionales if En el primero si se cumpla la condicin de que no estuviera demasiado bajo, entonces se lo adelantara un pxel En el segundo si se cumpla la condicin de que el invasor estuviera en el mismo espacio que la bruja, entonces hacerlo invisible. En vez de repetir esto para cada nuevo invasor, vamos a crear una funcin que realice lo mismo. Arregla el cdigo del fotograma para que figuren los condicionales dentro de una funcin as:
function invade(clip){ if(clip._y <540){ clip._y=clip._y+1; } if((clip._x >_root.clipbruja._x)and(clip._x < _root.clipbruja._x+130)and (clip._y > _root.clipbruja._y)and(clip._y < _root.clipbruja._y+105)){ clip_y = clip_y; clip.stop(); clip._visible=false; } }
Nota que la funcin tiene un parmetro que figura entre parntesis. El parmetro indica que la funcin va a ser llamada con un argumento general que servir como representante de algo singularmente nico. Con otras palabras (clip) es la palabra que despus representar a m1, m2, etc. Despus de arreglar la funcin, la llamas para cada uno de los invasores, completando as el cdigo para este fotograma:
invade(m1); invade(m2); invade(m3); invade(m4); invade(m5); invade(m6); invade(m7); invade(m8); invade(m9); invade(m10);
Archivar, probar y pesar. Sigue pesando 26 kb. Despus de grabar este trabajo como truco3.fla, gurdalo como truco4.fla para continuar. Y no olvides que en el Navegador, para activar las teclas flechas, debes hacer antes un clic sobre la pelcula. truco4.fla Usamos la funcin getTimer() para que los invasores caigan a distintos tiempos. No tiene gracia que los invasores caigan todos a la vez! El juego resulta muy fcil! Le daremos a una funcin predefinida del sistema esta tarea: getTimer() Esta funcin da en milisegundos el tiempo que ha transcurrido desde el comienzo de la ejecucin de una pelcula. Probando distintas cuentas, ms por ensayo y error que por razonamiento logr dar con una frmula que me devuelve los intervalos que se ajustan bien.
a = getTimer(); momento = a/100; b = int(momento)
58
c=b/10;
De forma que en el fotograma de la Capa Invasores, la funcin invade(clip) queda como est, pero se usa la frmula para llamar a la funcin en distintos tiempos. La accin completa del fotograma queda as: function invade(clip){
if(clip._y <540){ clip._y=clip._y+2; } if((clip._x >_root.clipbruja._x)and(clip._x < _root.clipbruja._x+130)and (clip._y > _root.clipbruja._y)and(clip._y < _root.clipbruja._y+105)){ clip_y = clip_y; clip.stop(); clip._visible=false; } } a = getTimer(); momento = a/100; b = int(momento) c=b/10; if(c >1){invade(m1);} if(c >3){invade(m10);} if(c >5){invade(m3);} if(c >7){invade(m8);} if(c >9){invade(m5);} if(c >11){invade(m9);} if(c >13){invade(m2);} if(c >15){invade(m6);} if(c >17){invade(m7);} if(c >19){invade(m4);} if(c >21){a = ""; b=""; c= "";}
Ahora otro arreglo ms. Pones candado en las Capas fondo e invasores porque vamos a trabajar en la Capa bruja Hasta aqu la bruja llegando a un extremo del escenario apareca por el otro. Pero en el viaje vertical eso no nos conviene ms. Despus de cierta altura, en medio del mar, la bruja ya no podr atrapar invasores. Por eso debemos cambiar para las teclas UP y DOWN el nmero 540 por el nuevo que es 417 Y otra reforma en la Capa Invasores, as que candado en las otras y libre sta. Vamos a hacer ms rpida la cada de los invasores. En el cdigo del fotograma de esta capa donde dice;
function invade(clip){ if(clip._y <540){ clip._y=clip._y+1; }
Cambia el nmero 1 por el nmero 2 as avanzar a pasos (pxeles) ms largos. Archiva truco4.fla gurdalo, psalo. Para el prximo paso gurdalo como truco5.fla . truco5.fla Usamos la funcin getTimer() para que los invasores caigan a distintos tiempos. Disparador del juego porque activa las teclas flechas. Necesitbamos que el usuario hiciera clic en cualquier punto de la pantalla para activar las teclas flechas. Crearemos en botn con el texto explicativo. Primero pones candado a todas las capas y creas una superior a todas que llamaremos texto Yo us letra Verdana, tamao 14 color blanco. Recuerda que todas las capas estn con candado menos la del texto que estamos haciendo.
Como la letra es blanca, elegimos para escribir la parte ms oscura del escenario, despus Seleccionamos el texto (son solo palabras sin fondo)y con Modificar' Convertir en smbolo ' tipo Botn nombre activar El botn ya est en la biblioteca y lo puedes borrar del escenario. Si en la biblioteca lo seleccionas, vers solamente la crucesita, porque las letras son blancas y el fondo de la biblioteca tambin. Antes de traerlo al escenario, mira la capa fondo para asegurarte que la imagen cielo est con las coordenadas x, y, a cero. Despus de nuevo con candado en todas menos en la capa texto trae el botn activar a las coordenadas x, y, a cero. Escribe en el panel de Propiedades el nombre de instancia activar Y la accin del botn activar es:
on(press){ activar._visible=false; }
Y adems encerramos el llamado a getTimer() y el lanzamiento de los invasores en un if que traduciendo dice: Si el usuario puls el texto entonces comienza el juego. Esto es, comienza a correr el tiempo, y la cada de invasores. Comentario final con el resultado del juego. Trabajamos en la capa invasores con candado en las dems. Al pie del escenario creamos un texto dinmico y le ponemos de nombre a la variable: barridos No ponemos nombre de instancia. Us letra verdana, tamao 16, color blanco Le puse de anchura 517. Cuando la variable c, resultado del tiempo desde que el juego comenz, llega a valer 44 los invasores han sido barridos o estn en la tierra. Por eso creamos un contador que cuente los invisibles, para tener los resultados y trasladarlos a la variable barridos Por si te perdiste te doy el cdigo completo del fotograma de la Capa Invasores.
function invade(clip){ if(clip._y <540){ clip._y=clip._y+2; } if((clip._x >_root.clipbruja._x)and(clip._x < _root.clipbruja._x+130)and (clip._y > _root.clipbruja._y)and(clip._y < _root.clipbruja._y+105)){ clip._visible=false; } } if(activar._visible==false){ a = getTimer(); momento = a/100; b = int(momento) c=b/10; if(c >1){invade(m1);} if(c >3){invade(m10);} if(c >5){invade(m3);} if(c >7){invade(m8);} if(c >9){invade(m5);} if(c >11){invade(m9);} if(c >13){invade(m2);}
60
if(c >15){invade(m6);} if(c >17){invade(m7);} if(c >19){invade(m4);} if(c>44){ contador = 0; if(m1._visible==false){ contador = contador+1;} if(m2._visible==false){ contador = contador+1;} if(m3._visible==false){ contador = contador+1;} if(m4._visible==false){ contador = contador+1;} if(m5._visible==false){ contador = contador+1;} if(m6._visible==false){ contador = contador+1;} if(m7._visible==false){ contador = contador+1;} if(m8._visible==false){ contador = contador+1;} if(m9._visible==false){ contador = contador+1;} if(m10._visible==false){contador = contador+1;} Z = 10-contador; barridos = "barridos "+ contador + ", invadieron mar y tierra " +Z; } }
Comentario final. Trat de que el juego completo pesara lo menos posible. Pesa 31 KB. Hasta que pese 100 KB, puedes usar tu imaginacin y hacerlo ms interesante. Despus ya habr que buscar otras herramientas, tratando de no llegar a tener que decir: Espere por favor que estamos cargando. Artculo por Susana Ros Suanes
Mtodo hitTest() detector de colisiones.

Esta aplicacin es una de tantas en la web de una Academia de Choferes. La Academia ha pedido que primero se repase las SEALES DE TRNSITO, luego las SEALES DE ADVERTENCIA (viene curva cerrada, cruza tren, viene puente, etc.), despus los DERECHOS DEL PEATN (ej. cebras). Hecho el repaso el programa hace que el usuario conduzca y en distintas escenas se encuentra con los carteles y experimentar (menos mal que en ficcin) el peligro de no respetar las seales. Repasemos las Seales de Trnsito Los smbolos los copi del Google y no te los paso porque saqu los de Uruguay, pero v que cada pas tiene los suyos, a veces igual y otras veces, no. Si haces esta aplicacin puedes dejar los smbolos como imgenes tal como las traes o convertirlas a en simbolos grficos y pesarn lo mismo. Lo que importa es el cuadrado donde se apoyan y que se ve de un gris oscuro. Es muy simple, hice un cuadrado de 140 por 140 le puse un color azul fuerte (#003399) y lo convert a smbolo MovieClip, con nombre azul. Necesitaba 14 cuadrados, porque de las 16 seales que tiene mi pas me salteo la una (ceda el paso) y la seis(pare) porque tienen las palabras en el smbolo y no necesitan etiqueta.

Manual Flash Parte 1

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual Flash Parte 1

Hochgeladen von

Copyright:

Verfügbare Formate

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Diseo y desarrollo de sitios web http://www.ivettkelemen.com (7 captulos)

Miguel Angel Alvarez

Director de DesarrolloWeb.com http://www.desarrolloweb.com (2 captulos)

Programacin - Multimedia http://www.rakidwam.com.ar/ (2 captulos)

Estudiante Universitario http://novatosflash.blogspot.com/ (1 captulo)

Aurelio Franco Fernndez

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Prlogo del manual de Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Entorno de trabajo en Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Rubn Alvarez

Capas y fotogramas en Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Clases y objetos en Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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

6 private function Arrastrar():Void{ 7 this.startDrag(); 8} 9 private function Soltar():Void{ 10 this.stopDrag(); 11 } 12 }

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Mi primera animacin en Flash I

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Mi primera animacin en Flash II

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Mi primera animacin en Flash III

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Rubn Alvarez

Mi primera animacin en Flash IV

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Colocar pelculas Flash en nuestras pginas

Crear un cdigo HTML para mostrar una pelcula Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Cmo hacer botones en Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Enlazar pginas web por medio de botones Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Enlaces email flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Ludwing Rodriguez

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Ludwing Rodriguez

Shape Hint. Interpolacin ordenada de formas

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Ivett Kelemen

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Ivett Kelemen

Efecto de mscaras con Flash

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Onion skin (piel de cebolla)

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com