Facebook Twitter Youtube Flicker Google + Pinterest Artedinamico
Inicio | Staff | Servicios | Publicidad | Cursos presenciales | Nos recomiendan | Registrese | Contáctenos |


 
 

Strict Standards: mktime(): You should be using the time() function instead in /home/portalad/public_html/portal/wlib/wsecurityimage.inc.php on line 10
Tip y trucos

TIPS VARIADOS PARA FLASH

Este artículo tiene como objetivo que aquellos que recién estén empezando a manejar esta herramienta adquieran un panorama que les permita hacer cosas que a primera vista parecen complejas, pero que no lo son en absoluto. Los conocimientos previos necesarios son 2:

 

1)saber abrir el programa

2)saber cómo dibujar un círculo o un cuadrado de color.

 

También recomiendo (siempre hablo de aquellos a quienes dijimos va dirigido el artículo) que tengan el programa abierto para practicar cada uno de los ejercicios que realizaremos. Usaremos, para los ejercicios Flash MX o Flash 5, que incluye el modo normal para escribir código, lo que nos ayudará hasta que nos acostumbremos a las sintaxis de ActionScript (a partir de Flash Mx 2004 sólo está disponible el modo experto y ActionScript 2, que es un poco más estricto; de todas maneras, si tienes Flash Mx 2004 ó +, podrás copiar y pegar las acciones que mencionemos, de manera que no te preocupes.)

 

Otra cosa: estos tips los escribí hace tiempo y de manera separada, así que no te sorprendas si a veces te trato de usted, otras te hablo de tu y otras te hablo de vos, como hacemos en el Río de la Plata.

 

MOVIE CLIP ANIMADO EN LA BIBLIOTECA CON INTERPOLACION DE MOVIMIENTO

 

Para crear un clip de película, dibujamos una forma en el escenario, la seleccionamos haciendo doble click en ella, abrimos el panel INSERTAR y seleccionamos CONVERTIR EN SIMBOLO. Hecho esto, se abrirá un cuadro en el que nos dará tres opciones de símbolo (botón, película y forma) y la posibilidad de asignar un nombre al que estamos creando. Elegimos el nombre (sin blancos y que empiece con una letra). Por ejemplo, "clip" (qué original, no?) y elegimos el comportamiento clip de película.

 

Si ahora abrimos la biblioteca (VENTANA->BIBLIOTECA) vamos a ver que tenemos una copia del clip que acabamos de crear. Esto quiere decir que si borramos la instancia que tenemos en el escenario (también llamado Stage), igualmente la tendremos disponible desde nuestra biblioteca, sólo tenemos que arrastrarla hacia el escenario y se copiará en el lugar donde la soltemos.

 

Pero se trata de un clip sin ningún movimiento. Si queremos guardar en la biblioteca un clip animado, tomamos una instancia del que acabamos de crear y volvemos a convertirla en movieclip (INSERTAR->CONVERTIR EN SIMBOLO->COMPORTAMIENTO:MOVIECLIP->NOMBRE). A el nuevo clip lo llamamos (para matener la originalidad) "clipconclip". Lo seleccionamos con doble click y vemos que justo debajo de la línea de tiempo, junto a la palabra escena1, aparece el símbolo de clip (un cuadrado con una rueda dentada) y el nombre del mismo ("clipenclip"). Esas palabras y signos que están debajo de la línea de tiempo (también llamada timeline) son un pequño mapa de navegación, y en este caso nos indican que ya no estamos en la línea de tiempo principal (llamada _root o escena1), sino dentro del clip llamado "clipenclip", el cual tiene una línea de tiempo independiente de la principal. Si observamos abajo el panel de propiedades, vamos a notar otro detalle interesante. Dentro de clipenclip, lo que tenemos en el primer fotograma es una instancia del clip llamado "clip".

 

(Antes de seguir, recordemos las reglas de la interpolación de movimiento: los polos de la misma deben ser movieclips, instancias de un mismo movieclip y no formas o shapes, ni botones. Tampoco pueden ser grupos. Si no respetamos estos preceptos, la interpolación no será posible).

Entonces, dentro de clipconclip, vamos al fotograma 30 de su línea de tiempo e insertamos un fotograma clave (INSERTAR->KEYFRAME). Obviamente, ahora tendremos dentro de clipenclip dos instancias de clip. Seleccionemos con el mouse el fotograma 30 y desplazemos la instancia (al seleccionar el fotograma queda automáticamente seleccionada y la podemos mover) algunos cm. Ahora volvamos a seleccionar el fotograma 1 y vayamos al panel INSERTAR->CREAR INTERPOLACION DE MOVIMIENTO. Vemos que en la línea de tiempo los fotogramas del 1 al 30 fueron reemplazados por un recuadro azul que contiene una flecha. Si ahora probamos la película (ctrl+enter), la figura se desplaza desde la posición 1 hasta la 2, rellenando automáticamente los fotogramas intermedios entre el 1 y el 30. Y lo más interesante es que si borramos la instancia de clipenclip que tenemos en el stage no importa, porque en la biblioteca se nos creó automáticamente una copia del clipconclip, la cual se sumó a la de clip que ya teníamos. Además, si miramos bien el clipconclip que tenemos en la biblioteca, notamos que, al seleccionarlo, en la previsualización se le han sumado unos cuadros de control propios de las películas.

 

NOTA IMPORTANTE: Si ubicamos una instancia del clip creado en el escenario, el mismo se reproducirá eternamente, ya que al llegar al último fotograma de la línea de tiempo volverá al primero, en un proceso que se denomina loop o rulo. Para evitar que esto ocurra y que se reproduzca sólo una vez, tenemos que echar mano del lenguaje de programación propio de Flash, llamado ActionScript. Esto lo haríamos así:

Tendríamos que ubicarnos en el último fotograma de la interpolación, ir al panel ACCIONES (la ventana se abrirá con el título Actions-Frames), presionar el botón "+", seleccionar ACTIONS->MOVIE CONTROL->STOP.

 

En la ventana de acciones aparecerá:

 

 

 

000

stop();

 

Y en el fotograma, una pequeña "a" minúscula nos indicará que hemos colocado una acción para ese fotograma. A partir de ese momento, cada vez que testeemos la película (ctrl+enter), veremos que se detiene en el fotograma especificado.

 

MOVIE CLIP ANIMADO EN LA BIBLIOTECA CON INTERPOLACION DE FORMA

 

Ahora vamos a hacer lo mismo que antes, pero en lugar de hacerlo con interpolación de movimiento, vamos a hacerlo con interpolación de forma. Recordemos que, al contrario de lo que sucede con la de movimiento, en la interpolación de forma los actores principales (polos de la interpolación) sólo pueden ser formas (también llamadas shapes). Es decir: no botones, no movieclips.

 

Primero creamos un movieclip cualquiera y, para continuar la línea de originalidad que nos caracteriza, lo llamamos clip2. Si hacemos doble click sobre el mismo y verificamos con el mapa de navegación ubicado debajo del timeline que estamos en su interior, veremos en el panel PROPIEDADES que en el primer fotograma hay una instancia con atributo shape o forma. Bien, entonces vamos a insertar un fotograma clave en el fotograma 30 (lo seleccionamos y vamos a INSERTAR->KEYFRAME). Listo. Borramos la forma que nos aparece y la reemplazamos por una nueva, la cual dibujamos con la barra de herramientas. Ahora selecionamos el fotograma1, presionamos shift y seleccionamos el 30. Una vez que tenemos todo el conjunto seleccionado, vamos al panel PROPIEDADES y, en el cuadro desplegable llamado TWEEN, reemplazamos el valor por defecto, que suele ser NONE o NINGUNO, por FORMA, FIGURA o SHAPE, según sea la versión de Flash que tengamos. Inmediatamente, los fotogramas del 1 al 30 serán reemplazados por una franja verde que contiene una flecha, y si probamos la película (ctrl+enter), podremos ver la interpolación de forma. Pero lo más interesante es que, al igual que sucedió con el clip animado de la lección anterior, en la biblioteca tendremos una copia de clip2 que contendrá la animación y también aparecerán en la previsualización los controles de película señalados previamente.

 

TRAZADO DE MAPA DE BITS

 

Podemos crear un efecto interesante sobre las fotos o diagramas que importemos a flash, utilizando esta herramienta.

 

Primero vamos a importar una foto. Para eso vamos al menú, elegimos: ARCHIVO->IMPORTAR y seleccionamos un archivo gif, jpg o bmp. Una vez completa la importación, tendremos una instancia de la imagen en el escenario y una copia de la misma en la biblioteca. Seleccionamos la imagen del escenario (doble click), y en el menú elegimos:MODIFICAR->TRAZAR MAPA DE BITS y seteamos los valores que más nos convienen. Veremos que podemos lograr una estilización muy bien lograda de la imagen que queríamos transformar, y también la posibilidad de eliminar los fondos o partes que no nos interesen o editarlas de la manera que más nos convenga.

 

CREACION DE BOTONES ANIMADOS

 

Crear un botón es muy semejante a crear un clip de película. Lo único que cambia es que, luego de dibujar la forma e ir al INSERTAR->CONVERTIR EN SIMBOLO, en lugar de elegir el comportamiento PELICULA, elegimos BOTON y le asignamos un nombre que tenga las mismas características que mencionamos en la creación de movieclips. Al crearlo, como sucede con todos los símbolos, lo tendremos siempre disponible en la biblioteca.

 

En este caso lo llamaremos "boton" y lo seleccionaremos con un doble click. Si observamos el mapa de navegación del timeline, veremos que aparece, junto al indicador de escena1, un gráfico con el símbolo de botón y el nombre tan original que hemos elegido: "boton". También vemos que en lugar de la ya conocida serie de fotogramas hay sólo 4, llamados respectivamente: up, over, down, hint. UP es el estado normal del botón, cuando no lo hemos seleccionado con el mouse ni le hemos pasado por encima. OVER es como se mostrará el botón cuando pasemos el cursor por sobre él. DOWN es cómo se verá nuestro botón cuando hagamos click sobre él. Y HINT es la superficie o área de acción o alcance que tendrá nuestro botón.

 

En cualquiera de estos fotogramas, utilizándolos como si fueran fotogramas de una línea de tiempo normal, podemos colocar formas o clips, incluso clips animados arrastrados desde la biblioteca. Y también sonidos. Recuerda que para los sonidos conviene ubicarlos en una capa o layer diferente, es decir, agregar un layer nuevo, cosa que, al igual que con las líneas de tiempo normales, también se puede hacer con las de los botones.

 

INTERACTIVIDAD BAJA Y MEDIA

 

Si definimos INTERACTIVIDAD como la posibilidad de que el cliente (usuario) produzca ciertos cambios en nuestra película mediante el uso de ciertos eventos, como por ejemplo, pulsar una tecla, mover el mouse o presionar un botón, podemos también establecer tres grados o niveles de interactividad: BAJA, MEDIA y ALTA. Todos los cuales son posibles gracias a un lenguaje de programación propio de Flash, muy similar a JavaScript, llamado ActionScript. A continuación definiremos y describiremos los 3 niveles de Interactividad que mencionamos.

 

BAJA: Parar o detener la acción de a película (similar al control remoto de una videocassettera).

MEDIA: Cambiar los parámetros de configuración de la película (ampliar, achicar, correr hacia un lado u otro, modificar la transparencia, etc).

Alta: Intervenir directamente en la acción y el desarrollo, como por ejemplo, los juegos.

 

Vamos a ver un ejemplo de BAJA:

 

Crearemos un movieclip animado, cuya animación se repita en loop, como en la lección 1 y lo guardaremos en la biblioteca. (Recoredemos que creamos un movieclip simple, volvíamos a convertirlo en clip, nos metíamos en el interior de este último, donde había una instancia del primero que habíamos creado y hacíamos una interpolación de movimiento). Una vez que tenemos el clip animado en el escenario, tenemos que darle un nombre de instancia, utilizando el panel PROPIEDADES. A este paso se lo denomina INSTANCIAR el MovieClip, y es importantísimo para hacer referencia a él en el momento de aplicar las acciones. En este caso lo instanciaremos como "pepe" (otro nombre ingenioso, si los hay).

 

Perfecto, tenemos a pepe en el escenario, que es instancia de un clip de biblioteca, que puede llamarse clipconclip, y que tiene adentro una interpolación de movimiento.

 

Ahora agregamos una capa a la línea de tiempo (seleccionamos en el menú de la parte baja del timeline el dibujito con el signo +, llamado INSERT-LAYER). Nos posicionamos en el primer fotograma de esta capa y creamos un botón. Una vez creado, lo seleccionamos con un sólo click, y abrimos la ventana de acciones, asegurándonos que su título sea ACCIONES DE BOTON. Entonces pinchamos con el mouse el signo "+" y elegimos ACCIONES->VARIABLES->WITH. Tiene que quedarnos algo como esto:

 

 

 

000

001

002

003

on (release) {

with (<not set yet>) {

}

}

 

El color rojo en not set yet indica un error de sintaxis, debido a que no elegimos ningún clip destinatario de la acción que estamos escribiendo. Para solucionar esto, seleccionaremos la mira telescópica que aparece en el menú y en la ventana que se desplegará entonces elegiremos el clip pepe y daremos ok (importante: en esa ventana que mencionamos, en donde dice notificaciones, deben estar seteados los valores dots o puntos y absolute o absoluto, que son los indicadores de ruta compatibles con la sintaxis que estamos utilizando).

 

Debería quedar algo así:

 

 

 

000

001

002

003

on (release) {

with (_root.pepe) {

}

}

 

Pero aún nos falta algo. Posicionamos el mouse en el renglón que contiene la palabra with, presionamos "+", y luego ACTIONS->MOVIE CONTROL->STOP.

 

Con lo que quedaría:

 

 

 

000

001

002

003

004

on (release) {

with (_root.pepe) {

stop();

}

}

 

Y si ahora hacemos ctrl+enter, veremos que al presionar el botón, el movimiento de la instancia de clipconclip llamada pepe se detiene. Si arrastramos más instancias de clipconclip al stage y probamos la película, veremos que sólo pepe obedece a nuestro botón, que las otras continúan la reproducción, ya que con la acción with sólo detuvimos la línea de tiempo de pepe, en la cual estaba la interpolación de movimiento que queríamos controlar.

 

Si volvemos a ver las acciones que hemos escrito y seleccionamos con un doble click la sentencia on(release), podremos ver todos los eventos que hubiéramos podido elegir para detener a pepe en lugar de release, que quiere decir liberar el mouse. Incluso podemos seleccionar más de un evento para realizar la misma acción.

 

Ahora crearemos un botón, igual que antes, pero en lugar de utilizar la acción stop, utilizaremos la acción play. Los pasos a seguir son exactamente los mismos, sólo que al final, en lugar de seleccionar STOP, elegimos PLAY.

 

Debería quedarnos algo así:

 

 

 

 

000

001

002

003

004

on (release) {

with (_root.pepe) {

play();

}

}

 

Y Voila, tenemos un botón que detiene a pepe y otro que lo activa.

 

Y así terminamos nuestro maravilloso ejemplo de INTERACTIVIDAD BAJA. Y pasamos al Ejemplo de Interactividad Media. Pero antes, una NOTA IMPORTANTE:

 

Hasta aquí utilizamos las acciones play y stop, pero si hubiésemos querido que la acción se detuviera o ejecutara a partir de un fotograma determinado de la interpolación que está dentro del clip pepe, también hubiéramos podido hacerlo con otra de las acciones de MOVIE-CONTROL llamada goto, la cual tiene, cuando se selecciona, la posibilidad de indicar el número de fotograma en el que queremos que la acción tenga lugar y la posibilidad de que sea gotoAndPlay() o gotoAndStop().

 

Ejercicio de INTERACTIVIDAD MEDIA:

 

En un archivo nuevo dibujamos un mapa con la herramienta lápiz y lo convertimos en un clip de película. Luego lo instanciamos con el nombre mapa. En otro layer creamos 6 botones y junto a ellos, para identificar a cada uno, colocamos un cuadro de texto con las siguientes palabras: IZQ, DER, ARR, ABAJ, AGR, ACH.

 

Seleccionamos el primer botón con un sólo click y abrimos el panel acciones, verificando que su título sea ACCIONES DE BOTON. Presionamos + y elegimos ACCIONES->VARIAS->EVALUATE, y seleccionamos con la mira telescópica el clip instanciado como mapa. En el cuadro de texto debe haber escrito algo como esto: _root.mapa

Agregamos a continuación: ._x-=10

Entonces, la acción completa quedaría:

 

 

 

000

001

002

on (release) {

_root.mapa._x-=10;

}

 

En el botón siguiente hacemos lo mismo, pero en lugar de ._x-=10, escribimos ._x+=10

La propiedad _x se refiere a la posición horizontal de los objetos, mientras que la vertical se define como _y. Lo que estamos diciéndole a ActionScript es que cada vez que se libere el mouse al presionar sobre el botón, el objeto mapa se mueva 10 pixeles. Si seleccionamos -=, se moverá a la izquierda, si elegimos +=, lo hará a la derecha.

 

En el botón DER, entonces, el script quedaría así:

 

 

 

000

001

002

on (release) {

_root.mapa._x+=10;

}

 

En el ARR:

 

 

 

000

001

002

on (release) {

_root.mapa._y-=10;

}

 

En ABAJ:

 

 

 

000

001

002

on (release) {

_root.mapa._y+=10;

}

 

Otras propiedades que se pueden controlar con este método son las sigtes:

 

_alpha: que determina la transparencia de los objetos y va de 0 a 100%

 

_name: el nombre de instancia del objeto

 

_rotation: la posición en grados de 0 a 360

 

_visible: es lo que se llama un booleano, ya que tiene dos valores (true o false)

 

_xscale: la utilizaremos para variar el ancho del objeto

 

_yscale:idem, pero respecto al alto

 

_xmouse: indica la coordenada horizontal de ubicación del cursor

 

_ymouse: idem, pero para la coordenada vertical.

 

Por último, definieremos los botones de agrandar y achicar el mapa. Aquí, lo que debemos tener en cuenta es que para que el objeto no se deforme, tenemos que ampliar o disminuir en la misma proporción el alto y el ancho del mismo.

 

Seleccionemos el botón AGR con un click y vayamos al panel ACCIONES->+->ACCIONES->VARIAS->EVALUATE->MIRA TELESCOPICA->seleccionamos _root.mapa y agregamos:

._xscale+=10->+->ACCIONES->VARIAS->EVALUATE->MIRA TELESCOPICA->seleccionamos _root.mapa y agregamos:

._yscale+=10

 

Debería quedarnos algo así:

 

 

 

000

001

002

003

on (release) {

_root.mapa._xscale+=10;

_root.mapa._yscale+=10;

}

 

Con el botón ACH es exactamente lo mismo, pero reemplazando el + por el – antes de =10, igual que en los casos anteriores.

 

Y así terminamos nuestro ejemplo de INTERACTIVIDAD MEDIA.

 

GUIAS DE MOVIMIENTO:

 

En el escenario dibujamos una forma y la convertimos en clip de película. Seleccionamos el fotograma 30 y colocamos un KEYFRAME, todo esto para crear una interpolación de movimiento, así que desplazamos la instancia ubicada en el fotograma 30, creamos la interpolación y testeamos la película.

 

Agregamos una nueva capa a la línea de tiempo, seleccionamos el fotograma 1 de esa capa y dibujamos una línea irregular con la herramienta lápiz. Si todo salió bien, deberíamos tener 2 layers, el de arriba con la línea irregular y el de abajo con la interpolación de movimiento. Si no es así, debemos invertir las capas, arrastrando la de arriba hasta que quede abajo de la otra.

 

Bien, ahora debemos seleccionar el primer fotograma de la interpolación y arrastrar la instancia de clip que hay en el mismo, hasta que su centro se acomode automáticamente sobre la línea. Hacemos lo mismo con el último fotograma de la interpolación.

 

Luego, seleccionamos el ícono de la capa superior, el que precede al nombre, y en el desplegable que se abre seleccionamos la opción GUIA. Vamos a la otra capa, hacemos lo mismo, pero esta vez seleccionamos CON GUIA.

 

Si ahora presionamos ctrl+enter, veremos que la línea irregular no existe, pero que la interpolación sigue su trazado.

 

MASCARAS

 

Las máscaras son uno de los efectos más importantes que pueden lograrse con Flash. Empecemos: Creamos un clip de película de cualquier color (luego será invisible) y lo animamos con una interpolación de movimiento. Agregamos una nueva capa al timeline y la pasamos abajo de aquella en la que habíamos creado la interpolación.Dibujamos en esta nueva capa muchos rectángulos de colores (o cualquier cosa), y nos aseguramos que los mismos lleguen al final de la interpolación de la otra capa, insertando un FRAME o un KEYFRAME a la misma altura, dicho en otras palabras, ambas líneas de tiempo deben tener la misma longitud.

 

Al igual que en el ejercicio anterior, hacemos click en el ícono que precede al nombre de la capa superior y le asignamos el comprtamiento MASCARA. Hacemos lo propio con la capa inferior, pero asignándole el comportamiento CON MASCARA. Pulsamos ctrl+enter y vemos que el clip que se mueve hace las veces de una ventana que muestra los contenidos de la capa inferior, y que todo lo que no está dentro de su superficie no es vissible por el usuario. También puede dejarse quieto el clip de la capa de MASCARA y animar los contenidos de la capa CON MASCARA, según el efecto que quiera lograrse.

 

TRABAJO CON SONIDOS

 

El trabajo con sonidos es muy simple. Desde el panel VENTANA, abrimos las BIBLIOTECAS COMUNES, seleccionamos el sonido que necesitamos y lo arrastramos al escenario o a la biblioteca de nuestro archivo flash. Si quisiéramos trabajar con sonidos diferentes, tendríamos que importar cualquier archivo de sonido y, recordando que todos los archivos que importamos pasan componer nuestra biblioteca, trabajaríamos de la misma forma.

 

Una vez que nustros sonidos estean en la biblioteca, lo único que tenemos que hacer para que se ejecuten es seleccionar un fotograma clave y, desde el panel propiedades, en el desplegable llamado SONIDO, seleccionar el archivo que queremos ejecutar, cuyo título aparecerá automáticamente junto con todo el listado de sonidos que tengamos en nuestra biblioteca. Buscamos, debajo de ese desplegable otro llamado SYNC, y seleccionamos START.

Si queremos que se reproduzca en bucle, colocamos en el cuadro que está junto a Sync, el número de veces que queremos que se reproduzca el sonido.

Para detenerlo, nos posicionamos en la línea de tiempo e insertamos otro fotograma clave donde queremos que se detenga. Entonces, nuevamente seleccionamos en el desplegable Sonido el nombre del archivo en cuestión y en SYNC elegimos la opción STOP.

Autor: Andres Fernandez Web: http://www.disegnocentell.com.ar
Fuente: http://www.disegnocentell.com.ar
Regresar a Tips y trucos
Publicado en: 2007-02-28 / Categoría: Flash / Estadísticas: [ 2966 Lecturas ] / Total comentarios: 0
 
Comparte este tips / truco
Otros tips / trucos de: Flash
BOTONES DINÁMICOS EN FLASH
DRAG AND DROP EN FLASH
VIRTUALCOMPONENTS - SUPERTEXTFX V. 1.0
MOVIMIENTO DE UN LUGAR A OTRO CON FLASH
OPERADORES DE COMPARACIÓ CONDICIONAL (IGUALDADES
 
cOMENTArios:

 

colabora y participa en nuestra comunidad

Si tienes un tips / truco que desea compartir y que crees que es de ayuda para nuestra comunidad por favor haz click en el botón y envíanos un correo con la información e imagenes para publicar.

 
 
AutenticaciÓN
Usuario: "E-mail"
Clave

Olvidó su clave?

Desea registrarse?
 
 
 
 
 
Inicio | Staff | Servicios | Publicidad | Cursos presenciales | Nos recomiendan | Registrese | Contáctenos |


© Copyright Artedinamico.com 2001 - 2013. Todos los Derechos Reservados
Teléfono: (57)+(4) + 444 1001  - Medellín - Colombia - Suramérica
Hosting, diseño y desarrollo de este portal: artedinamico.net
Para contratar los servicios de Artedinamico en: Diseño web, desarrollo web, tiendas virtuales, e-commerce,
posicionamiento web, animación y multimedia, gestores de contenidos, hosting y dominios, cms, diseño gráfico click aquí

Algunas de las imágenes utilizas en este portal son de shutterstock.com y siempre que se usan se reseña su autoría, por lo tanto se prohíbe la distribución y utilización.

Políticas de protección de datos personales | Aviso de privacidad