Tabla de referencia Guía de Movimiento.... Movimiento................. .......................... .......................... ......................... ......................... .............................3 ................3 El Efecto Mariposa........ Mariposa..................... .......................... ......................... ......................... .......................... ...........................4 ..............4 Máscara e Insertar Imagen.............................. Imagen........................................... ................................. .............................6 .........6 BOTÓN CON COMPORTAMI COMPORTAMIENTO ENTO MOVIE CLIP..........................10 CLIP..........................10 SUB MENÚ FLASH ............ ........................ ......................... .......................... .......................... ......................... ..................18 ......18 CURSOR PROGRAMADO PARA PERSEGUIR AL PUNTERO WINDOWS. ........... ........................ .......................... .......................... ......................... ............................................27 ................................27 Crear un Botón con Relieve....... Relieve.................... .......................... .......................... ......................... ........................32 ............32 Efecto Caida de Nieve en Paisaje con Flash.......................... Flash............................................33 ..................33 Animación de nubes.......... nubes....................... .......................... ......................... ..............................................37 ..................................37 Creación de un lightsaber (Sable de luz)....... luz).................... .......................... .............................42 ................42 Programar una Marquesina en Fash Mx.............................. Mx................................................48 ..................48 Menú Sin Fin ........................ ........... .......................... ......................... ......................... .......................... .......................... ......................... .............................56 .................56 Menú despegable......... despegable..................... ......................... .......................... .......................... ....................................... ...........................59 .59 Arrastrar y Soltar Elementos con el Ratón............................................63 Tutorial Flash................ Flash....................................... .............................................. .............................................. ................................................63 .........................63
Guía de Movimiento Lo primero que haremos es Crear un Nuevo Símbolo presionando Ctrl + F8 En este caso se le nombró gráfico y con un comportamiento comportamiento del mismo nombre: Gráfico.
Dibuja la forma que moverás a través de la guía. Aquí hemos dibujado un cuadro azul sin borde con cordenadas X=0 y Y=0
Desde la biblioteca se arrastra Símbolo "Gráfico" hasta la escena.
Sobre la Capa 1 haz clic con el botón derecho del ratón y del menú emergente selecciona selecciona Añadir Guía de movimiento, o vía Insertar >> Línea de tiempo >> Guía de movimiento.
Selecciona el fotograma 1 de la capa "Guía: Capa 1" seleccionando seleccionando alguna de las herramientas lápiz, pincel, o línea sin unir nunca el principio y el final de la guía.
Ahora añade un fotograma clave (F6) en la Capa 1, frame 30 y el cuadro moverla hasta la posición final. Añade fotograma (F5) en la capa Guía: capa 1 en el fotograma 30. Entre mayor sea el número de fotogramas totales la velocidad de movimiento de tu forma será mas lenta y viceversa.
Selecciona el frame 1 de la capa 1 y la forma muevela hasta el punto inicial de la guía de movimiento como se aprecia en la imagen, además en la barra de propiedades Cambiar la opción de Animar a Movimiento.
Presiona Ctrl + Intro para visualizar la animación.
El Efecto Mariposa Trabaja con flash en el movimiento de una mariposa. El ejemplo SWF aquí presentado posee unas guías de movimiento. El ejercicio tiene la complejidad de que primero se tienen que hacer las imágenes de la mariposa para simular el vuelo, sin embargo, como soy demasiado generoso las incluiré por una módica cantidad $$$ ó €€€ jajajaja. Las imágenes están en el archivo zip de descarga. Good luck!! ¿comenzamos?. 1-. Hacer un documento (ctrl. + J) con las siguientes propiedades. a)-. Las dimensiones del documento son 150 * 150 píxeles de ancho y alto. b)-. Color de fondo #FFFFFF. c)-. Colocar como velocidad de fotogramas 8 fps.
2-. Crear el único símbolo (ctrl. + F8) de que consta la película. a)-. Nombrar al símbolo animación de mariposa. b)-. Dar como Comportamiento Clip de película.
3-. Importar (ctrl. + R ) la serie de imágenes. Aquí presento un pequeño truco, nombrar a las imágenes con el mismo nombre y un
número consecutivo. Luego seleccionar solamente la primera imagen para importarla.
4-. Una vez que se acepta importar la primera imagen Flash MX preguntara que la imagen forma parte de una secuencia de imágenes, luego aceptar importar la secuencia de imágenes
5-. Al aceptar importar la secuencia de imágenes Flash MX automáticamente colocara cada imagen en cada frame y en las mismas coordenadas X = 0.0 y Y = 0.0. Nota si se importan las imágenes una por una se tendrá que insertar manualmente cada uno de los frames vacíos (F7) y luego acomodar las imágenes una por una en coordenadas X = 0.0 y Y = 0.0 que prefieres de forma manual o de forma automática.
6-. Regresar a la Escena y arrastrar de la biblioteca el símbolo animación de mariposa. a)-. Colocar el símbolo en coordenadas X = 40.0 y Y = 40.0. Con este paso queda concluido el súper tutorial mariposa voladora well done!!.
P.D. Presionar ctrl. + Enter para visualizar el trabajo final. Se agradecen en demasía los comentarios emitidos a los tutoriales aquí presentados. La frase del tutorial es Casarte es como ir a un restaurante con amigos. Pides lo que deseas y cuando ves lo que el tu amigo tiene, te gustaría haber pedido eso.
Máscara e Insertar Imagen Crea un Nuevo Documento Flash, luego importa la imagen que usaras de fondo. Presiona Ctrl + R o: Archvo > Importar > Importar a Escenario Selecciona el archivo y dá clic en Abrir
Inserta una Nueva Capa haciendo clic sobre el icono con circulo rojo. Acomoda la imagen donde desees que inicie la animación.
Selecciona la capa 2, Frame 1, e inserta el texto.
Sobre la capa 1 que es la imagen inserta un fotograma clave en el frame 30, presionando F6 o: Insertar > Línea de Tiempo > Fotograma Clave Y mueve tu imagen a la segunda posición de la animación; en esta caso moví de derecha a izquierda.
Selecciona cualquier frame entre el 1 y el 30 de la capa 1 y en la barra de Propiedades haz clic en Animar > Movimiento.
Sobre la capa 2, en el frame 30 Inserta un fotograma presionando F5 o: Insertar > Línea de Tiempo > Fotograma
Selecciona la capa 2 y haz clic sobre esta con el botón derecho del ratón. A continuación aparecerá un menú de opciones, de donde selecciona Máscara y en automático notarás el cambio y la aparición de la máscara. Y Voila, tenemos una máscara animada.
BOTÓN CON COMPORTAMIENTO MOVIE CLIP Comenzar por crear un documento de dimensiones 160 x 125 píxeles de ancho y alto respectivamente, insertar un color de fondo negro. Esto puede resultar monótono para algunos, pero también tomar en cuenta que hay personas que es la primera vez que intentan hacer una animación en este fantástico y fabuloso programita denominado flash.
En este botón involucrare un color de gradiente, para hacer un poco más llamativo el efecto en la animación. Crear un símbolo nombrarlo
gradiente y de comportamiento clip de película, presionar ctrl. + F8 ó Insertar >> Nuevo símbolo para tal efecto.
En los siguientes dos pasos esta la explicación para hacer el gradiente el cual será usado en al clip de película. Primero comenzar por hacer visible el panel llamado Mezclador de colores , presionando shift + F9 ó Ventana >> Paneles de diseño >> Mezclador de colores . Seleccionar en estilo de relleno la opción Lineal después de esto seleccionar el color del lado izquierdo e insertar el numero de color el cual va hacer #072E2E.
El segundo paso para terminar de hacer el gradiente es seleccionar el color de lado derecho y escribir el número de color el cual será #2547BA. Si encuentran otra combinación de colores háganlo saber a través de sus comentarios.
El siguiente paso es hacer un rectángulo de dimensiones 150 de ancho x 35 de alto y colocarlo en coordenadas X=0 y Y=0. Si siguen los paso verán que el gradiente queda de izquierda a derecha, es por eso que deberán rotarlo y ajustarlo a como se muestra en la imagen. Si desean mayor información de cómo rotar y ajustar un gradiente visitar el tutorial llamado dibujar_menu.
Crear un nuevo símbolo nombrarlo boton y con un comportamiento de clip de película, para crear el símbolo es presionar ctrl. + F8 ó Insertar >> Nuevo símbolo.
Abrir el panel de acciones, luego seleccionar el fotograma de de capa 1 y en el panel acciones de fotograma escribir stop();
Insertar un fotograma clave vacío en el frame # 2 presionando F7 ó Insertar >> Línea de tiempo >> Fotograma clave vacío . En el fotograma insertado arrastrar desde la biblioteca el clip de película de nombre gradiente si la biblioteca no esta visible resionar F11, ctrl. + L ó Ventana >> Biblioteca, y colocarlo en coordenadas X=0 y Y=0
Insertar 2 fotogramas clave en los frames # 7 y # 12 presionando simplemente F6
Seleccionar la imagen del fotograma # 2 luego en la opción de Color seleccionar Alfa y posterior a esto, en la opción de porcentaje escribir 0 %N, repetir la misma operación pero ahora con la imagen del fotograma # 12.
Ahora etiquetar el fotograma # 2 con el nombre de Avanzar_1 , una vez hecho lo anterior proceder a animar con la opción de movimiento.
En este paso crear la animación para el fotograma # 7, primero seleccionar dicho fotograma y luego etiquetarlo con el nombre de Avanzar_2 y la animación será de movimiento.
Abrir el panel de acciones, seleccionar el fotograma # 7 y escribir
stop();
Ahora seleccionar el fotograma # 12 y el panel de acciones escribir
gotoAndPlay(1);
Insertar una segunda capa por debajo de la primera, y en el la capa 2 arrastrar nuevamente desde la biblioteca el clip de película gradiente y colocarlo en coordenadas X=0 y Y=0. En este paso tendrán que rotar el clip de película de modo que el gradiente quede de forma invertida al gradiente original, esta operación se puede realizar de forma manual con la ayuda de la herramienta de transformación libre esto es presionando la letra Q , ó vía Modificar >> Transformar >> Voltear verticalmente.
Trasladarnos a la escena, y en esta arrastrar desde la biblioteca del clip de película boton, colocarlo en coordenadas X=5.0 y Y=5.0
Este paso es de suma importancia ya que de este depende el éxito de la película, seleccionar la imagen no el fotograma e insertar el siguiente código en el panel de acciones
on (rollOver) { gotoAndPlay ("Avanzar_1"); } on (rollOut) { gotoAndPlay ("Avanzar_2"); } on (press) { getURL("http://www.solophotoshop.com", _blank); }
Repetir la operación anterior dos veces más, y para darle un toque de botón escribir Botón_01, Botón_02 y Botón_03. Y como verán sean creado un menú de botones con efecto, sin ser botones si no dos clips de película.
SUB MENÚ FLASH Este tutorial es amplio por lo que hemos reducido el número de pasos al mínimo. Te recomendamos que antes de inciarlo, veas los tutoriales Botón Básico.
Creamos un Nuevo Documento de las dimensiones que sean adecuadas para tu Sub Menú, en esta ocasión fueron de 80X100 px. En este ejemplo hemos usado las cordenadas X=0, Y=0 como ya lo hemos explicado en anteriores tutoriales. Luego crea el botón que nos servirá de base para el sub menú. Inserta un Nuevo Símbolo presionando la tecla Ctrl + F8 o vía Insertar >> Nuevo Símbolo Nombrado automáticamente como Símbolo 1 con un Comportamiento de botón ;-P
A este símbolo le damos 2 estados, reposo y sobre, editamos luego el segundo estado de nuestro boton cambiandole el color. Contrario al tutorial Botón Básico no agregaremos el texto aún.
Luego de que agregamos nuestros dos estados del botón procedemos a colocar una Zona Activa presionando F6 como se muestra en la imagen.
Ahora crea un Nuevo Símbolo que llamamos menú (o submenú) con un comportamiento de Clip de Película. Este servirá para hacer la animacion del sub menú que puede ser en cualquier dirección, en este caso será uno de caída vertical.
. Abre la biblioteca presionando F11, luego arrastra el Símbolo 1a la capa 1, frame 1.
Toma la Herramienta de texto y escribe el nombre o título que desees, nosotros lo nombramos "Mostrar submenu" como lo puedes ver en la imagen a la derecha.
En el frame 4 de la capa 1 inserta un Fotograma Clave presionando F6 o desde Insertar >> Línea de Tiempo >> Fotograma Clave. Agrega una Nueva Capa, la Capa 2 y colocala debajo de la capa 1. Entonces inserta un fotograma clave en la capa 2, frame 2 y ahí arrastra el Símbolo 1.
Algunas veces, al no insertar adecuadamente el fotograma clave se pueden insertar fotogramas extra que se eliminan seleccionando los frames no deseados y presionando Shift + F5. Agregale texto al primer botón del sub menú, en este caso es boton_01.
Agrega una tercer capa y acomódala debajo del resto como se ve en la imagen de la derecha. Inserta un fotograma clave en el frame 3 de la capa 3 y agrega nuevamente el símbolo 1 en el frame 3. Agrega el texto.
Repetimos el procedimiento pero en este caso en una Capa 4 y Frame 4, tal cual se ve en la imagen.
Ahora que ya tenemos nuestros botones selecciona el frame 4 de las capas 3 y 2 e insertamos un fotograma Clave Presionando F6. Continúa con la segunda parte del tutorial
.
Agrega una Nueva Capa, Capa 5 y en el frame 1 agrega un Stop. Selecciona el frame y abre la barra de Acciones, copia el código de la Imagen. Esto para detener la animación del sub menú.
En la misma capa 5 Agrega un fotograma clave en el frame 4. Luego escríbele otro Stop, que servirá para detener la animación una vez que sea desplegado el sub menú.
Crea un Nuevo Símbolo llamado Zona_Activa de comportamiento botón.
Haz clic sobre Zona Activa e inserta un fotograma clave (F6) y entonces dibuja un rectángulo con cualquier medida. Por el momento no importa la dimensión.
Crea una Nueva Capa, Capa 6 e insertale un fotograma clave en el frame 2 y arrastra el Símbolo Zona Activa desde la Biblioteca. La zona activa debe ser al menos 10 px mayor arriba, abajo y a los costados que el área que abarca el sub menú completo. Las dimensiones las manejas seleccionando la zona activa y editando desde la barra de propiedades. Asegúrate de que también las coordenandas sean 10 px mayores en cada lado.
Selecciona la zona Activa (capa azul de la imagen) y en la barra de acciones agrega el código que vemos a la derecha.
Con este código en la Zona Activa nos aseguraremos de que al salir de cualquiera de los botones el sub menú regrese a su posición inicial.
Selecciona el botón de origen y en la barra de Acciones inserta el código que ves en la imagen. Con esto al pasar el cursor sobre el botón se despliegue automaticamente el sub menú.
. Regresa a escena y desde la biblioteca arrastra el clip Menú. En la barra de Propiedades escribe el nombre de Submenu (usado en el código de la imagen anterior como _root.Submenu.play...) Presiona Ctrl + Enter para ver el resultado.
CURSOR PROGRAMADO PARA PERSEGUIR AL PUNTERO WINDOWS. En el siguiente tutorial encontraras el código action script para programar una animación (cursor) la cual siga ( persiga, acose ) al puntero de Windows hasta alcanzarlo. También encontraras en la explicación como hacer una animación de movimiento para simular el movimiento de un ojo simpático. El tutorial en lo particular me pareció muy divertido, disfrútalo ¿ comenzamos? Good luck!!. 1-. Primero hacer un documento ( Ctrl. + J) con las siguientes propiedades. a)-. Las dimensiones para este tutorial en particular son 400 * 250 píxeles de ancho y alto. b)-. Usar como color de fondo
#999999.
c)-. Utilizar como velocidad de fotogramas
20 fps.
2-. Crear el único símbolo ( Ctrl. + F8) del cual consta la película. a)-. Colocar como nombre
acosador .
b)-. Seleccionar en la opción
Tipo Clip de película.
3-. Cambiar el nombre de la capa por el de
bg, dibujar un fondo para el ojo.
a)-. Insertar un fotograma (F5) en el frame # 10. b)-. El tamaño del fondo es de
270.0 * 175.0 píxeles de ancho y alto.
c)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0 .
4-. Insertar una segunda capa y cambiarle el nombre por ojo movimiento. a)-. Dibujar un óvalo ( O) más pequeño de dimensiones b)-. Colocar la forma dibujada en
65.0 * 65.0 píxeles .
coordenadas X = -102.0 y Y = 0.0 .
c)-. Insertar un fotograma clave (F6) en el frame # 10.
5-. Este paso es sumamente sencillo ya que solamente se insertara un fotograma clave (F6) en el frame # 5. a)-. Después colocar la forma del fotograma 5 en
coordenadas X = 102.5 y Y = 0.0 .
6-. Seleccionar los fotogramas entere el 1 y el 9. a)-. Abrir la barra de propiedades y seleccionar en la opción
Animar Movimiento.
7-. Regresar a la
Escena y arrastrar desde la biblioteca el símbolo acosado.
a)-. Reducir las dimensiones del símbolo a
20.0 * 13.0 píxeles .
Nota colocar el símbolo en cualquier parte de la Escena .
8-. Seleccionar el símbolo ( no el fotograma). a)-. Abrir la barra de Acciones – clip de película e insertar el siguiente código action script. onClipEvent (load) {
_x = 0; _y = 0; velocidad = 20; } onClipEvent (enterFrame) { posicionX = _root._xmouse; posicionY = _root._ymouse; _x += (posicionX - _x)/velocidad; _y += (posicionY - _y)/velocidad; } Con este paso queda concluido el tutorial, espero que lo aplique a tus animaciones Web
well done!!
P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado, diseña otra forma de acosador y publica en este espacio tus archivos
Crear un Botón con Relieve Ejercicio paso a paso.
1 Dibujamos un rectángulo en el área de trabajo.
2 Seleccionamos el fondo. 3 Cambiamos el color de fondo del rectángulo. Por ejemplo a gris. 4 Con la herramienta texto escribimos el texto que queramos en el interior del rectángulo. Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve.
5 Seleccionamos los bordes izquierda y superior. 6 Modificamos el color de dichos bordes. Le damos el color blanco. 7 Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro. Ya
va
tomando relieve,
ahora vamos a
crear los diferentes estados.
8 Seleccionamos el botón. 9 Activamos la opción de menú Insertar → Nuevo Símbolo... 10 Marcamos el comportamiento de botón y le damos un nombre. Pulsa Aceptar . 11 Hacemos doble clic sobre el botón para editarlo. 12 Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspondientes a los estados del botón.
13 Seleccionamos el fotograma Presionado. 14 Modifiquemos ahora el borde inferior y el derecho del botón aplicándole el color blanco. 15 Finalmente seleccionemos los bordes superior e izquierdo y démosle el color negro.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como están puesto que no deseamos que haga nada mientras no pulsemos el botón y el área de acción es la que comprende nuestro rectángulo. El resultado obtenido es el siguiente. Podemos pinchar sobre él y comprobar el efecto.
Efecto Caida de Nieve en Paisaje con Flash El efecto de nieve que cae sobre un paisaje nevado es muy sencillo de realizar disfrútalo. ¿Comenzamos?. 1.-Comenzar por crear el documento de 300 * 220 píxeles de ancho y alto respectivamente. a) Como color de fondo usar el #666666. b) En la casilla de Velocidad de fotogramas escribir 120.
2.-El tutorial cuenta con un solo símbolo, el cual tiene un pequeño truco oculto que sino lo pones el trabajo no servirá para nada. a) Crear el símbolo (ctrl. + F8) dar como nombre copo de nieve. b) Seleccionar Clip de película como comportamiento
c) (Truco) seleccionar la casilla de Avanzado para desplegar las opciones del símbolo, al Seleccionar la casilla esta pasará de Avanzado a Básico. d) Luego en la opción Identificador escribir la palabra flake. e) En Vinculación seleccionar las opciones Exportar para ActionScript y Exportar en primer fotograma.
3.-Una vez ubicados en el símbolo, dibujar la forma que va a representar al copo de nieve (flake). a) La forma no debe de tener borde y el color deberá de ser #FFFFFF. b) colocar el dibujo en coordenadas X = 0.0 y Y = 0.0.
4.-Regresar a la Escena e importar (ctrl. + R ) la imagen que ayudará a dar el efecto. a) La imagen debe de tener las mismas dimensiones que el documento estas son 300 * 220 píxeles. b) Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.
5.-Arrastrar desde la biblioteca el símbolo copo de nieve a la escena. a) Escribir como Nombre de instancia nieve. b) Colocar el símbolo un poco fuera del escenario en coordenadas X = 1.0 y Y = -5.0.
6.-Para terminar con el tutorial, seleccionar el fotograma. a) Abrir la barra de Acciones – Fotograma. b) Insertar el siguiente código. amount = 300; mWidth = Stage.width; mHeight = Stage.height; for (var i = 0; i
=mHeight) { this._y = -10; this._x = -10+Math.random()*mWidth; } if (this._x>=mWidth || this._x<=0) { this._y = -10; this._x = -10+Math.random()*mWidth; } }; } Y con esto queda concluido el ejercicio. NOTA: tener mucho cuidado en el paso dos.
P.D. Presionar ctrl. + enter para visualizar el trabajo
Animación de nubes En la siguiente explicación aprenderás a convertir un Clip de película en un Componente con el fin de hacer una animación de nubes, una vez creado el componente le pondremos unas cuantas acciones. Con las acciones insertadas no habrá la necesidad de realizar ningún tipo de animación ya sea de Forma o Movimiento. Solamente se crearan dos símbolos esto es de los pasos básicos de realizar en flash, sin embargo, tener mucho cuidado en los pasos 5 y 6 ya que desto depende el éxito de la película. Y como la práctica hace al maestro ¿comenzamos? Good luck!!. 1-. El primer paso es crear un documento (ctrl. + J), con las siguientes propiedades. a)-. Dimensiones 300 * 250 píxeles de ancho y alto. b)-. Utilizar como Color de fondo #33CCFF. c)-. Para que la película tenga con un poco más de realismo usar en Velocidad de fotogramas 20 fps.
2-. Crear el primero de dos símbolos (ctrl. + F8). a)-. Nombrarlo nube. b)-. Seleccionar como Tipo Clip de película.
3-. En este símbolo dibujar una forma la cual simule una nube. El Color de trazo #000000 y Color de relleno #FFFFFF. a)-. Tener cuidado de no hacer la forma de la nube muy grande esto con el fin de no modificarla después. b)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.
4-. Crear el segundo símbolos (ctrl. + F8). a)-. Nombrarlo nube componente. b)-. Seleccionar como Tipo Clip de película.
5-. Abrir el panel de la Biblioteca (F11). a)-. En la biblioteca hacer clic con el botón derecho del ratón sobre el símbolo nube componente. b)-. Seleccionar en el menú desplegado Definición de componente…
6-. Al aceptar el paso anterior se abrirá el siguiente panel Definición de componente, agregar 3 Parámetros presionando el signo +. a)-. Cambiar el Nombre de cada uno de los parámetros por vel, alfa y x_max. b)-. Cambiar el Valor de los parámetros 10, 100 y -900. el panel tiene más complementos pero por el momento solamente nos ocuparemos de estas dos variables Nombre y Valor
7-. Una ves que se cambio el tipo Clip de película por del de Componente, tambien cambiara el icono como lo podrás apreciar en la biblioteca. a)-. Arrastrar desde la biblioteca el símbolo nube hasta el
Componente o símbolo nube componente. b)-. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0. c)-. Abrir la barra de Acciones – clip de película e insertar el siguiente código action script. onClipEvent (load) { _alpha = _parent.alfa; } onClipEvent (enterFrame) { (_x>_parent.x_max) ? (_x -= _parent.vel) : (_x=0); }
8-. Regresar a la Escena y arrastrar desde la biblioteca 2 veces el Componente nube componente. a)-. Colocarlos fuera de la Escena coordenadas X = 350.0 y Y = 40.0 (pare superior derecha).
9-. Seleccionar alguno de los dos Componentes (símbolos) arrastrados a la Escena y abrir el panel de Parámetros. a)-. Modificar los valores de cada uno de los Parámetros 10, 50 y -750. Nota si agregas varias veces el componente y modificas los parámetros adecuadamente simularas que la transición de la animación puede resultar al azar. Con este paso queda concluido el ejercicio.
P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado.
Creación de un lightsaber (Sable de luz) Paso 1.- Dibujos preliminares Para este ejemplo hemos elejido dibujar el lightsaber que Anakin Skywalker utiliza en Star Wars Episodio III. Puedes buscar otras imágenes o crear tu propia arma jedi aplicando los mismos conceptos que se explicarán en este tutorial.
Abrimos un nuevo documento Flash con las siguientes características: Fondo: negro, Dimensiones: 200 px (anchura) x 500 px (altura). A la capa actual nombramos: "foto". Creamos 4 capas superiores con los nombres de: "rotulos", "acciones", "botones" y "lightsaber".
En la capa "foto" importamos la foto del lightsaber. Archivo > Importar > Importar a escenario. Para este ejemplo el dibujo será vertical, por lo que rotamos la foto 90º. Seleccionamos la capa "lightsaber". Del panel de herramientas elegimos la Herramienta Rectángulo (r). Dibujamos un rectángulo con borde negro. Activamos el panel Mezclador de colores (shift+F9) donde elegimos que el estilo de relleno sea: "Lineal", asignamos una selección de colores entre diferentes tonos de plomo y blanco como se muestra en la figura. Para aumentar más punteros de tonalidades, simplemente se dan clicks en la barra de colores donde se desee ingresar un tono más. El máximo número posible es de 8 diferentes tonos. Por defecto los tonos estarán de forma vertical. Si por algún motivo se necesita ajustar el relleno, lo seleccionamos con la herramienta de transformación de relleno (f), aparecerá un contorno con 2 símbolos sobre una línea que demarca el área del relleno, con el símbolo de un cuadrado, se acorta o aumenta el área del relleno y con el símbolo de un círculo se rota el mismo.
Seleccionamos la herramienta de selección (v), acercamos el cursor al centro de la base del rectángulo y manteniendo el mouse presionado curveamos el lado inferior como se muestra en la imagen superior. Tip.- Al aproximar la herramienta de selección (v) al borde de una figura, ya sea relleno o trazo, el cursor cambia a una flecha negra con una curva debajo, si es un lado de la figura; o a una flecha negra con un ángulo recto, si es una arista. En ambas situaciones se mantiene presionado el botón principal del mouse para deformar la figura según se desee.
Seleccionamos el borde negro del dibujo y lo convertimos en relleno mediante: Modificar > Forma > Convertir líneas en rellenos. Esto dará mejor calidad al dibujo cuando se disminuya su tamaño. Convertimos la figura en símbolo (F8) tipo Clip de Película con el nombre de: "parte_metal". Este será nuestro principal símbolo para dibujar la empuñadura del lightsaber, ya que lo reutilizaremos en varias ocaciones con el fin de realizar un archivo liviano para internet y agilizar a la vez el proceso de dibujo.
Tip.- La reutilización de símbolos en Flash repercute en un ahorro de los recursos del mismo; al no crear nuevos símbolos y dibujos, el archivo termina pesando menos, siendo esto un factor de importancia en toda publicación web.
Paso 2.- Dibujo de la empuñadura Seleccionamos el símbolo "parte_metal" y lo copiamos repetidas veces. Tip.- La manera más rápida de realizar copias de un símbolo es arrastrarlo con el mouse mientras se presiona la tecla "ALT".
Con la ayuda de la herramienta de Transformación libre (q) modificamos las copias escalando, rotando y sesgando, según sea necesario. En la última imagen se ha realizado una modificación de color al símbolo, seleccionando en la barra de Propiedades: Color > Tinta: Negro al 72%. Tip.- La organización de los símbolos en un mismo fotograma se realiza mediante: Modificar > Organizar > Traer al frente, traer hacia adelante, enviar hacia atrás o enviar al fondo. La manera más rápida de hacerlo es mediante los hotkeys: Ctrl + Shift + ↑, Shift +↑, Shift +↓, Ctrl + Shift + ↓ respectivamente.
Pasamos a dibujar los los detalles que sobresalen en la parte superior de la empuñadura. Para este fin, la reutilización del símbolo "parte_metal" es más que suficiente. Entonces realizamos copias del mismo, las escalamos, rotamos y ordenamos.
Para realizar la placa dorada central, seleccionamos el símbolo "parte_metal", lo duplicamos mediante: Modificar > Símbolo > Duplicar símbolo, o con el botón derecho del mouse. Ingresamos a este nuevo símbolo y cambiamos el color plomo del relleno por un amarillo semejante a la imagen, además dibujamos con la herramienta Rectángulo las ranuras de la placa. Para el acabado central del metal, dibujamos 2 rectángulos a cada lado de la pl aca, de color negro y con alfa = 30%, para su cuadriculado seleccionamos la herramienta Borrador (E), elegimos una forma cuadrada y borramos alternadamente ambos rectángulos. Con todo esto la empuñadura esta terminada, es recomendable seleccionar todos los elementos y guardarlos en un nuevo símbolo.
Paso 3.- Dibujo del laser Se dibuja un largo rectángulo de color: "3D6DFF", para el brillo realizamos Modificar > Forma > Suavizar bordes de relleno, Distancia = 20 px, número de escenarios = 20, expandir. Seleccionamos el rectángulo original y cambiamos su relleno a blanco. Convertimos el dibujo en símbolo y lo posicionamos encima de la empuñadura. El resultado: un arma mortal de un Jedi.
Paso 4.- Creación de botones Esta parte es opcional, lo que se hará simplemente es agregar interactividad para que el lightsaber tenga un laser azul o rojo. Nos ubicamos en el fotograma 19 y seleccionamos todas las capas a esa altura, click derecho del mouse y elejimos insertar fotograma.
En la capa "lightsaber" insertamos un nuevo fotograma clave en la capa 10, seleccionamos el símbolo del laser de este fotograma y en propiedades cambiamos su color en Tinta: Rojo 85% . Se puede crear un nuevo símbolo que contenga un rectángulo rosado casi blanco, para ponerlo en el centro del sable rojo y darle más brillo. En la capa "rotulos" en el fotograma 1 y en el 10 insertamos fotogramas claves y los etiquetamos como "fuerza" y "darkside" respectivamente. En la capa "acciones" insertamos fotogramas claves en los fotogramas 8 y 18, abrimos el panel de acciones (F9) y en ambos fotogramas insertamos el código:
stop();
En la capa "botones" creamos 2 botones de distinto color de la forma que uno quiera, más una pregunta y el texto de las opciones para cada selección. Seleccionamos cada botón creado e ingresamos las siguientes acciones:
Para el 1º botón:
on (release){ gotoAndPlay("fuerza"); }
Este lleva al sable laser azul. Y para el 2º botón:
on (release){ gotoAndPlay("darkside"); }
El resultado final es:
Que la fuerza te acompañe.
Programar una Marquesina en Fash Mx El tutorial lleva algunas líneas de código Action Script Hola que pasa de nuevo por tu mente. Yo por lo pronto realice el siguiente tutorial, el cual es una marquesina es muy fácil y sencillo de realizar ya que solo posee dos símbolos los cuales son un Clip se película y un Botón. El tutorial lleva algunas líneas de código Action Script pero como soy demasiado generoso las proporcionaré como siempre. ¿Comenzamos?. 1-. Comenzar por hacer un documento (ctrl. + J) de 260.0 * 100.0 píxeles. a) Como color de fondo #A7B5CE. b) La velocidad de fotograma en esta ocasión será 10 fps.
2-. Crear el primer símbolo (ctrl. + F8). a) Nombrarlo cambiar texto. b) Dar como comportamiento Botón.
3-. Ubicados en el símbolo hacer un botón de dos estados (Reposo y Sobre). a) El diseño del botón tiene como dimensiones 115.0 * 25.0 píxeles. a) Colocar el diseño del botón en coordenadas X = 0.0 y Y = 0.0.
4-. Hacer el segundo símbolo (ctrl. + F8). a) Nombrarlo línea de texto. b) Dar como comportamiento Clip de película.
5-. Ubicados en el símbolo cambiar el nombre de la capa por el de marco. a) Dibujar un rectángulo, el color de la línea #000000 y como color de fondo #7FE5FE. b) Las dimensiones son 250.0 * 25.0 píxeles. c) Colocar el dibujo en coordenadas X = 0.0 y Y = 0.0.
6-. Insertar una segunda capa, cambiar el nombre por texto. texto. marco. a) Ocultar la capa marco. b) Introducir un campo de texto dinámico, dinámico, seleccionar en tipo de línea (Línea (Línea única). única). c) Las dimensiones tendrán que cubrir el total del rectángulo 245.9 * 24.1 píxeles. píxeles. d) Colocar el campo de texto en coordenadas X = 1.0 y Y = 0.0. 0.0. e) El tamaño de la fuente es 18. f) Escribir en el espacio Var: (variable) marquesina. marquesina. g) Hasta este punto se termino en lo que corresponde al los símbolos
7-. Regresar a la escena cambiar el nombre de la capa por el de texto 1. 1. a) Arrastrar desde la biblioteca el símbolo línea de texto. texto.
b) Escribir como Nombre de instancia bar_scroll. bar_scroll. c) Colocar el símbolo en coordenadas X = 5.0 y Y = 5.0. 5.0.
8)-. Seleccionar el símbolo no el fotograma. fotograma. a) Abrir la barra Acciones – Clip de película. película. b) Escribir el siguiente código Action Script. Script. onClipEvent (enterFrame) (enterFrame) { _parent.Txt.Display(); }
2. 9-. Insertar una segunda capa cambiar el nombre por el de texto 2. a) Ocultar la capa texto 1. 1. b) Dibujar un rectángulo de color de línea #000000 y color de #7FE5FE. relleno #7FE5FE.
c) Las dimensiones son 250.0 * 25.0 píxeles. píxeles. d) Colocar el rectángulo en coordenadas X = 5.0 y Y = 40.0. 40.0.
10-. Sobre el rectángulo dibujado insertar un campo de texto Introducción de texto. texto. a) Seleccionar en tipo de línea (Línea ( Línea única). única). b) En el espacio Var: (variable) escribir texto. texto. c) El campo de texto tendrá que cubrir el espacio del rectángulo. Dimensiones 251.3 * 22.1 píxeles. píxeles. d) Colocar el campo de texto en coordenadas X = 3.6 y Y = 41.0. 41.0.
11-. Introducir una tercera capa y cambiar el nombre por el de botón texto. a) Ocultar la capa texto 2. b) Arrastrar desde la biblioteca el símbolo cambiar texto. c) colocar el símbolo en coordenadas X = 72.0 y Y = 70.0.
12-. Seleccionar el símbolo no el fotograma. a) Abrir la barra de Acciones – Botón. b) Escribir el siguiente código Action Script. on (press) { Txt.cambiar_texto(texto, true); }
13-. Insertar una capa más cambiar el nombre por el de acciones 1. a) Ocultar la capa botón texto. b) Abrir la barra Acciones – Fotograma. c) Insertar el siguiente código Action Script. var Txt = new Scroll(bar_scroll, 25, 35); Txt.cambiar_texto(" Espera no cambies de sintonía www.solophotoshop.com ");
14-. Y para terminar insertar la última capa y nombrarla acciones 2. a) Insertar como código Actin Script en la barra de Acciones – Fotograma. Scroll = function (mc, maxString, waitingFrame) { this.mc = mc; this.waitingFrame = waitingFrame; this.maxString = maxString; this.currentLetter = 1; this.wait = 0; }; Scroll.prototype.cambiar_texto = function(text, bReset) { if (arguments[1] == null) { bReset = true; } this.text = text; if (bReset) { this.currentLetter = 1; } }; Scroll.prototype.Display = function() {
if (this.currentLetter<=this.maxString) { this.mc.marquesina = this.text.substr(0, this.currentLetter); } else { this.mc.marquesina = this.text.substr(this.currentLetterthis.maxString, this.maxString); } if (this.currentLetter == this.text.length) { if (this.wait this.wait++; } else { this.currentLetter = 1; this.wait = 0; } } else { this.currentLetter++; } }; Con este paso queda concluido el ejercicio buena suerte.
P.D. Presionar ctrl. + enter para visualizar el resultado el trabajo realizado
Menú Sin Fin Ahora vamos a ver un menú muchas veces visto pero pocas veces explicado. Se trata de un menú en el que, dependiendo de la posicón del puntero, los botones se recorren hacia la izquierda o derecha y vuelven a aparecer infinitamente. Esto es a lo que me refiero:
En este caso en particular, aparecen 6 botones, sin embargo vamos a desarrollar un código en el que no importará la cantidad de botones, siempre y cuando sean más de 4, esto debido al espacio que tenemos para mostrarlos. Comenzaremos con una escena de 420 x 120 pixeles y un botón de 80 x 80 pixeles que se encuentra dentro de un MovieClip. Dicho MovieClip tendrá que ser vinculado con la escena con el nombre mc_boton y contiene un campo de texto dinámico llamado numero. Pueden descargar el archivo preparado para este ejercicio: Lo primero que tendremos que hacer será generar los duplicados del MovieClip mc_boton dentro de la escena. Para ello definiremos algunas variables que nos servirán para asignar la cantidad de botones, el espacio entre ellos, el ancho y por último obtendremos el ancho total del grupo de botones. Después de ello generaremos las copias. El siguiente código deberá insertarse en el primer cuadro de la escena: // Cantidad de botones cantidad = 6; // Ancho del botón ancho = 80; // Distancia entre botón y botón espacio = ancho + 20; // Ancho total de la serie de botones limite = cantidad * espacio; for(i=0; i
ref.numero.text = i+1; } Ahora les muestro a qué corresponden las variables ancho, espacio y limite:
Nos hace falta hacer que los botones se muevan dependiendo de la posición del mouse. El secreto de este ejercicio es hacer que, cuando los botones comiencen a caminar hacia la derecha, entonces que el último botón pase a la izquierda del primero. Y en caso de que los botones se recorran hacia la izquierda, en cuanto el botón del extremo izquierdo salga de la escena, entonces hacerlo pasar a la derecha del grupo de botones. Les muestro gráficamente lo que necesitamos lograr. Pasen el mouse sobre la imagen y analicen el comportamiento de la posición de los botones:
La solución es sencilla:
1- Cuando el botón se encuentre a la izquierda de la coordenada -ancho en x, entonces lo pasaremos a la derecha de los demás botones incrementando el valor de limite a la posición horizontal del objeto ( _x += limite ).
2- Cuando el botón se encuentre a la derecha de la coordenada limite - ancho, entonces pasaremos al objeto a la izquierda del grupo de botones restando el valor de límite a la posición horizontal del objeto ( _x -= limite ). Vamos a agregar el código del primer cuadro de la escena para obtener la velocidad de desplazamiento resultado de la posición del puntero: cantidad = 6; ancho = 80; espacio = ancho + 20; limite = cantidad * espacio; for(i=0; i
ref._x = ( espacio * i ) + 20; ref.numero.text = i+1; } vel = 0; onEnterFrame = function() { vel = int(((_xmouse - 210)/-210) * 10); } Y ahora el código del MovieClip que contiene el botón, el cual lo agregaremos en el primer cuadro de la linea de tiempo del MovieClip mc_boton. Este código es el que se encargará de alterar el orden de los botones: onEnterFrame = function() { // Ajustamos la posición del objeto this._x += _root.vel; // Si el objeto sobrepasa el límite derecho... if ( this._x > _root.limite - _root.ancho ){ // ...pasamos el objeto a la izquierda this._x -= _root.limite; } // Si sobrepasa la coordenada de la izquierda... if( this._x < -_root.ancho ) { // ...lo enviamos al extremo derecho this._x += _root.limite; } } El siguiente debe ser el resultado:
Un menú infinito. Extra He recibido muchos correos en los que me preguntan cómo hacer para que cada uno de los botones tenga su propio aspecto o sus propias variables o acciones. He aquí la respuesta: La manera más sencilla para hacer que cada uno de los botones sea diferente es generar cada uno de los MovieClips necesarios dentro de nuestra librería y asignarles un nombre
de vinculación (linkage) único y consecutivo. Ejemplo: mc_boton0, mc_boton1, mc_boton2, etcétera. Tendríamos que hacer un ligero ajuste al código original en la sección del
for():
... for(i=0; i
Nota: Al personalizar cada uno de los botones, ya no tiene sentido la línea ref.numero.text = i+1;, por lo que la he eliminado del código.
Menú despegable Por Roberto Gomez Bolaños 1. Primer Paso. Veamos como funciona el menú, para eso te pido que clickes sobre el cuadradito, verás en que consiste el primer paso, ya luego te explico como lo hice, ahora es muy importante que investigues su funcionamiento, para que comiences a formarte una idea de como funciona. si prestaste atención, creo que estaremos de acuerdo si digo que el botón tiene, acciones que serían más o menos así: " si me hacés un click muestro el menú" y otra acción para cuando el menú esta visible que dice " si me haces un click oculto el menú" sigamos.. 2. Realizar el primer paso. La primera parte consiste en un MC (movie clip) que posee en el primer frame (o fotograma) un layer (o capa) con la acción: stop (); y en otro layer un botón, el cual contiene la acción: on (release) { ......gotoAndStop(2); }
¿y esta acción para que? y pues, en el segundo Frame del MC, colocás los botones que mostrarán el menú.
Ahora creamos el segundo frame, justo como muestra la imagen superior, luego de colocar los botones debes asignarle las acciones. La acción del botón que despliega el menu será: on (release) { ......gotoAndStop(2); }
para regresar el menú a su estado inicial. Y al resto de los botones deberás colocarle las acciones que tu requieras... Muy fácil no? Ok, es muy simple? entonces intentemos complicarlo. 3. Segundo paso, el menú ahora tiene efecto! La misma sugerencia que te hice en la primera pantalla, observa cada detalle e intenta deducir como esta hecho. Mi efecto no hará que nadie quede boquiabierto, ni tampoco pondrá a saltar del entusiasmo, es solo a modo de ejemplo. - Pero... ¿y que tan complejo puede ser esto? - Pues nada, es solo un poco de imaginación y motion tween, para quienes AS nos queda grande aún. Veamos como lo hice. 4. Teoría del funcionamiento del menú Para hacerlo mas simple, el menú consta de dos partes, como primera parte tenemos el botón que mostrará y ocultará el menú, y segundo nos queda el efecto que muestra y oculta los botones y los botones propiamente dichos. Todo esto claro, dentro de un MC. Una forma util de organizarnos sería, ubicando todo en layers distintos, uno para las acciones, pues necesitamos un "stop" en el primer fotograma, otro layer para el botón principal. Y para los botones y la animación necesitaremos un layer para los botones otro layer que transformaremos a "MASC" (máscara) y un paquete de chocolates, ...y procedemos a colocarlos de esta manera...... en la timeLine tendremos
y dentro del mc tendremos algo así....
Esto es lo que deberías tener en el primer fotograma, claro, sin las letras :P Ahora, recuerda colocar el "Stop" en el primer fotograma, y cada cosa en su lugar... Al botón principal, recuerda colocarle la acción: on (release) { ......play(); }
en esta parte deberás colocar también la acción para cada botón del menú y también la acción para que desaparezcan los botones si así lo deseas... [esta acción sería la misma que para el botón principal, (la que está en el cuadro inferior)] Recuerda tambien el rectangulo gris que dibuje en el layer MASC, es el área visible, (si tienes dudas sobre MASCARAS, te recomiendo que veas el tutorial de máscaras antes de seguir.. Ahora que tienes todo en el primer fotograma realicemos la animación de los botones. Presta atención a esto... En el layer botones, insertaremos un fotograma clave en el frame 20, al resto de las capas también debes agregarle frames, así es que, en el frame 20 posiciónate en cada layer y presiona F5 (insertar fotograma vacío). Volvemos a "botones" Selecciona todos los fotogramas y crea un motion tween (interpolación de movimiento) - ya sé, que esto esta muy largo?, que a donde voy con esto? pues, ahora con el motion tween creado, inserta un fotograma clave en el frame 10, selecciona el grupo de botones, muévelos y colócalos dentro del área gris de la capa, que para mayor comodidad puedes colocar en modo Contorno, (clikeando en el cuadradito de color que esta despues del ojito y el candado) aquí un ejemplo de como queda...
como verás, no solo hay un keyframe en "botones", sino que también hay otro en el layer
"acciones" y otro en el layer "botón" En "acciones" debes colocar un "Stop" para detener la película y dejar que el navegante seleccione alguna opción.. y al botón principal solo déjale la misma acción de "play" que colocaste en el primer fotograma. Y ya es hora de que pruebes tu propio menú desplegable.... Recuerda colocar una instancia de MC en el escenario y "Ctrl + Enter" para ver como quedó!!! Si tienes algun problemita, no te desesperes... antes de quemar nada, sería bueno que revises desde el paso 4, comparando las imágenes, y verifica también las acciones en los botones y los fotogramas... De seguro no tienes problema alguno. Ahora que verificaste lo fácil que puede ser crear un menú de seguro querrás agregarle algunos otros truquillos.. como el de que aparezca con solo colocar el puntero sobre el botón, o que desaparezca alejando el puntero.. 5. Mejorando el menú Bueno esto no es más que un simple truco con un botón invisible, ¿ha? si un botonito que no tiene nada en ninguno de los tres primeros estados.. solo posee un cuadradito en el ultimo estado "zona activa" Esto lo usaremos de la siguiente forma, en el fotograma 10, donde colocaste el "stop" colocaremos el botón invisible, y le colocaremos una acción que será, cuando el puntero toque al botón esconder el menú. Nno creas que esto es difícil, solo bastará con, crear 2 nuevos layers, ubicarlos al final, en el último colocamos el botón, y en el anterior al último luego de convertirlo en máscara, colocamos un gran rectángulo que usaremos de ventana, aquí una imagen para que veas como sería...
por si te queda alguna duda, el rectángulo gris con una ventana al medio es el contenido de "masc 2" y ese fondo celeste agua de pileta, es el botón invisible, que ha sido estirado para abarcar el tamaño del rectangulo gris (masc 2) En pocas palabras, lo que hicimos fue una máscara para que cuando el cursor toque el botón invisible, desaparezca el menú... Claro ahora hay que colocarle la acción al botón invisible... on (rollOver) { ......play(); }
Atento que dice rollOver! ahora podrías también cambiar la acción del botón principal en el primer fotograma y colocar rollOver en vez de release, Algo asi debería quedar el menú... Por último, algunas sugerencias para los efectos... - En vez de animar los botones, puedes animar la máscara - Si quieres un mejor efecto puedes colocar cada botón del menu en un layer distinto y animarlo independientemente. Recuerda que al diseñar con flash creamos ilusiones... aprende a complacer al navegante.. Que te sea útil, y cualquier pregunta, pues ya sabes.. puedes contactarme por mp, icq o mail, por cualquier problema con el tuto o el ejemplo, y para mayor comodidad, está el foro, Hummm pero no olvides buscar, antes de preguntar! Mucho hemos preguntado ya sobre este tema... Suerte! Chespy.
Arrastrar y Soltar Elementos con el Ratón
Tutorial Flash Tutorial por Jmx de FotoCreativo.net ElQuique de ForoCreativo.net nos envía este tutorial Flash en el que muestra como Arrastrar y Soltar elementos con el Ratón. Bueno, debido a que existe una solucion mas sencilla hice una segunda version de este minitutorial 1) Lo primero que hice fue crear un documento flash (con las propiedades por defecto) 2) Luego con CTRL F8, agregue un MovieClip que le llame mc_logoFC
3) Entre al MovieClip y pegue el logo de FC en una capa que le llame "logo" (jeje bien pensado no?)
4) Regresamos a la seccion principal del documento "Scene 1" o "Escena 1" y le damos nombre a la instancia del MovieClip. Este nombre de instancia sera necesario para identificar cual es el objeto que queremos mover en la programacion del Action Script, en este caso el nombre es "objetoFC"
