|
Hoy vamos a armar un sitio completo:
ver el ejemplo, puede navegarlo y ver bien lo que vamos a desarrollar.
En primer lugar debo explicarles que existe tres elementos muy importantes para Flash, el gráfico, el botón, y a mi consideración el más importante el clip de película.
Con estos elementos podemos desarrollar un sitio básico en Flash sin ningún inconveniente.
Cuando realizamos una interpolación de movimiento automáticamente de la manera que les enseñé anteriormente, en la biblioteca (F11 o Control + L) agrega un elemento "gráfico" llamado ANIMAR si esta el programa en español o "tween" si está en inglés. Es decir, están aprendiendo una manera mas rápida de realizar este movimiento que como dice en los manuales que pueden encontrar en la net.
Carrusel es un gráfico que está importado a la película es conveniente que sea JPG o GIF por el peso y ya en su tamaño real para la película Flash.
Veamos el ejemplo: esta es la biblioteca de una interpolación de movimiento si dibujo un circulo, hago que se mueva hasta donde quiero, pedimos biblioteca y vemos lo siguiente:
En cambio para la interpolación de forma, no tiene que estar en biblioteca, por eso cuando terminamos de hacerla vemos lo siguiente:
Ante la duda, fíjense en los trabajos realizados ya por ustedes y vean sus bibliotecas.
Si necesitan realizar una interpolación de forma de un elemento que si está en la biblioteca, primero al elemento lo colocan en el escenario luego, tienen que separarlo (en el menú modificar) (Control + B) y recién ahí pueden reagliar la interpolación.
¿Para qué sirve la biblioteca?: es como el vestuario de los personajes de una obra de teatro, todo se guarda ahí y se utiliza cuando es necesario, a la vez para no repetir vectores, es decir, guarda el peso de los elementos y lo podemos utilizar las veces que deseamos que son como "accesos directos" busca la información del elemento a la biblioteca y lo reproduce, por eso la mayoría de los desarrollos Flash son de bajo peso en kb.
Bueno, llego el momento, vamos a realizar el desarrollo web que les mostre al principio.
Vamos a realizar un nuevo archivo con las dimensiones de 790 x 400, fondo gris y le damos OK, ACEPTAR.
En el menú ventana pedimos escenas y nos tiene que abrir la siguiente ventana:
Tenemos tres íconos por debajo, el primero es DUPLICAR, luego AGREGAR, y el último BORRAR.
Hacemos doble click en la frase Escena 1 y la llamamos principal.
Ahora vamos a las capas:
La primera la llamaremos Acciones, luego texto fijo, texto de bienvenida y botonera al final.
Hasta ahora tenemos armado la primer escena llamada principal con las capas con su nombre, ahora a todas le damos 25 fotogramas.
El texto fijo es la frase Página de colores, separada sin relleno y con borde, y la palabra contacto en forma texto sin nada en especial. a esta capa a partir del fotograma 8 creo una interpolación de movimiento desde alfa 0 a 100% en el fotograma 25, la frase en el mismo lugar, efecto de "aparicion" en escena.
texto de bienvenida, a partir del fotograma 1 aparece con una interpolacion de movimiento con efecto alfa igual que el texto fijo.
Bienvenido a nuestro sitio de colores.....
lo tienen en el ejemplo para copiar.
A partir del fotograma 18 coloco los botones que los pueden sacar en el menú Ventana > bibliotecas comunes > botones Ovalos.
Colocamos uno debajo del otro siempre en la capa botones y vemos que ya estan listos, si se fijan en la biblioteca de la pelicula, ya se agregan en forma automáticamente con la carpeta que contiene sus gráficos.
En la capa acciones colocamos un fotograma clave en el nº25 y seleccionando en el fotograma 25 presionamos F9, llamamos a la ventana de acciones.
Seleccionamos en la carpeta acciones que podemos ver, en película y dragueamos o hacemos doble click en la acción que vemos llamada STOP.
El stop significa que la pelicula se va a reproducir hasta el número 25 y encuentra en la línea de tiempo un STOP, por eso se detiene así el navegante puede sin ningún problema comenzar a navegar, más adelante vamos a colocarle las acciones a los botones para que poder realizar la navegación del sitio.
El fotograma 25 de la capa acciones debe tener ahora una "a".
Ahora una vez terminada la escena principal abrimos la ventana escenes, fíjense que capaz ya les quedó abierta.
Vamos a duplicar la escena principal y vamos a colocarle el nombre de rojo.
En esta escena vamos a seleccionar todos los fotogramas desde el 1 al 24 de todas las capas y vamos a pedir el menú del botón derecho posicionado en todos los fotogramas seleccionados y le decimos, eliminar fotogramas.
Nos va a quedar la escena roja con un solo fotograma para todas las capas.
Bien, una vez borrado todo, vamos a borrar la capa texto de bienvenida ya que aquí no nos hace falta y vamos a colocar una nueva dibujando en ella un rectangulo, con opciones a redondear las puntas (le dí 15) y como ven en el ejemplo dibujen un rectángulo sin relleno con filete o contorno de 4 px. color rojo, la llamaremos marco rojo.
También vamos a crear una capa nueva llamada texto rojo y escriben, Escena roja, segunda escena de la película.
Vamos a realizar un botón que diga principal, solo texto y en el área activa le dibujamos un cuadrado así nos toma todo el vector.
Entonces realicemos nuestro primer botón:
Vayamos al menú insertar > insertar nuevo símbolo y nos aparece la siguiente ventana:
Vamos a seleccionar botón y en nombre colocamos principal, damos aceptar, entramos en la edición del botón:
Se nos presenta tres eventos del mouse:
Reposo: cuando el botón esta tranquilo, sin ningún cursor encima.
Sobre: cuando pasamos el mouse por arriba del botón, sin hacer click.
Presionado: en el momento justo que hacemos click pero no soltamos.
Zona activa: es un elemento invisible ahí colocamos el marco sólido, donde queremos que haya "manito" para que el usuario entienda que se trata de un botón.
Tratemos ya en reposo que cuando escribimos la palabra principal, por medio de la ventana alinear decirle que con respecto a la escena este centrado en sentido vertical y horizontal.
Cuando ya hemos terminado con reposo, insertamos en sobre un fotograma clave y ahi le colocamos algún cambio de color o lo dejamos así.
Repetimos este paso también para Presionado y cuando llegamos a Zona activa, dibujamos un rectángulo para definir el área sensible para presionar el botón.
Bien, ahora volvamos a la escena rojo donde estábamos, fíjense que donde está marcado en la imagen de arriba, nos indica: estan en principal, que es un boton, puede ir a Escena 1 solo con hacer click en la frase Escena 1.
Cuando estan en la escena el objeto botón esta en la biblioteca (F11) y lo arrastran o draguean hacia la escena, puede estar en la capa botonera.
Ahora por medio de la ventana escena nos vamos a la escena principal y nos posicionamos en el botón rojo.
Entonces hacemos click NO DOBLE CLICK PORQUE SINO ENTRAN DE NUEVO EN LA EDICIÓN DEL BOTÓN, ¡ATENTOS! y presionamos F9 para pedir Acciones.
Vamos a utilizar la acción GOTO:
Entonces dragueamos la acción goto que se encuentra en Acciones, Control de película y en Escena ponemos rojo (fíjense que al final del campo para escribir tenemos una flecha para elegir la escena que ya las reconoce.
En tipo dejamos Número de fotograma y en fotograma le decimos 1.
Ahora hacemos click ahí mismo en la línea 1 del actionscript donde dice on:
Nos da a elegir los eventos del mouse, cuando el usuario:
presione.
libere (suelte el click)
liberar afuera
presiona la tecla "x" (cualquiera que le digamos)
situar sobre objeto: rollover, cuando el mouse para por arriba del botón.
situar fuera del objeto: rollout.
arrastrar sobre (dragueo, llevarnos el botón por cualquier parte)
arrastar fuera
Nosotros por defecto dejamos release, osea, liberar.
Ahora ustedes van a duplicar la escena roja para crear la azul, verde y naranja, cambiando los marcos de color y el texto para identificarlos luego.
Vuelven a la escena principal y le van a dar las acciones a los botones correspondientes a cada escena menos al botón amarillo que es para "contacto" a ese botón le vamos a dar la siguiente acción:
getURL, la pueden encontrar en acciones > Navegador/Red. Esta acción siempre le pide a flash que salta a navegar por la red, a algo "externo que este swf" como para el correo como para hacer funcionar un javascript como un vínculo a otra página de internet.
En el campo URL escriben sin dejar ningún espacio: mailto:elemail@deustedes.com.
¡Listo!, de esta manera este botón va a pedir el correo predeterminado de cada usuario y le abrirá ya con el destinatario que es el email que nosotros colocamos, es decir, el que va a recibir el email que envíen desde la página.
Ahora nos vamos al botón que van a crear que dirá
"lo invitamos a mage & Art." ( no se olviden de la zona activa, hacer un rectángulo sino nos toma los sólidos de la tipografia y la "manito" de vínculo, no estaría siempre).
Vamos a darle la acción getURL y en URL van a colocar la dirección completa de la página agregando antes el prefijo http://
Veamos el ejemplo:
En ventana colocamos _blank que significa en una ventana nueva, y listo también este botón.
Recuerden que todavía seguimos en la escena principal, así que vamos a hacer click en la capa botonera y se nos van a seleccionar todos los botones, los vamos a copiar (control + C) y nos vamos a cada una de las escenas y borramos los botones que tenemos y pegamos los que tenemos grabados en la memoria en el mismo lugar de donde los copiamos, para eso en vez de hacer un simple pegar (control + V) vamos a pegar in situ, en contexto, en el mismo lugar y eso es con las teclas (control + Shift + V) o ir a menú edición > pegar in situ.
De esa manera tenemos ya todos los botones con todas las acciones en todas las escenas.
Al botón principal, vamos a incorporarle un sonido para que esté mas divertida, asi que: seleccionamos menú ventana, bibliotecas comunes y seleccionamos Sonidos.
Elegimos cualquiera, yo elegí este:
Pueden probarlos con el play que pueden ver arriba de la secuencia de sonido que muestra la biblioteca.
Vamos a nuestra biblioteca y hacemos doble click en la visualización del botón principal y entramos en la edición del mismo, agreguemos una capa más que diga sonido y vamos a insertar un fotograma clave en los tres eventos del mouse.
Nos posicionamos en sobre y ahí arrastramos el sonido al escenario, no al fotograma, como si fuera una imagen.
nos tiene que quedar de esta manera:
volvemos a cualquier escena y como lo hemos cambiado desde la biblioteca, ya esta arreglado en todos los lugares donde se repita este botón.
Para probar la película vayan al menú control > probar película.
Para cerrar, vayan a la x de cerrar no la del programa si a la de la ventana.
Bajar archivo fla del sitio de colores.
Temas que ayudan a mejorar en nuestro sitio:
|
Microsoft explorer 6.0 
