1 práctica animación en web

INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC) Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación Publicitaria

Lic. Mario Quiroz Martínez

Practica 1 (Dibujo en Flash) TEMA: Página web Neptune Resort

OBJETIVOS: • Cómo utilizar reglas y guías para colocar sus ilustraciones • Qué capas son y porqué son útiles en el Flash, cómo utilizar una guía • Cómo crear y reestructurar objetos • Cómo importar ilustraciones creadas en otros programas que trazan cómo convertir una BITMAP en un gráfico vectorial.

• 1. Abrir un archivo en Flash CS6 seleccionando la opción Action Scripts2.0

Procedimiento Para comenzar el Site Neptune Ressort, cree una nueva película de flash eligiendo Archivo > Nuevo del menú principal. Puede también utilizar Control+N (Windows)

2. En el menú propiedades, en la parte inferior, cambie las dimensiones para la película a una anchura de 800 px y a una altura

de 600 px. Cambie el color del fondo al negro (# 000000). Haga clic OK .



3. Ir al menú Archivo>Guardar como con el nombre neptuno1.fla.

Usar reglas y las líneas guía 4. Con el neptune.fla abierto, active las reglas en menú principal Ver > Reglas

5. Coloque la primera guía a 10 pixeles en el Espacio de trabajo de la película, usando la regla para ayudarle a colocarla

correctamente Entonces sin soltar el botón del ratón. Una línea verde aparece en la etapa.

6. Coloque otra línea guía al fondo de la película exactamente a 10 pixeles al lado derecho de la película, 10 pixeles también al

lado izquierdo, y también 10 pixeles al lado arriba y 10 pixeles abajo del escenario.



7. Cerciórese de que ajuste de guía este activada eligiendo Ver > Guías > Editar guías. Esto forzará cualquier cosa que está

cerca de la línea guía se adhiera.

8. Seleccione la Herramienta del rectángulo (tecla R) de la barra de herramientas. En el panel de propiedades de línea, fije el estilo del contorno al sólido, el espesor del contorno a 2 pt., y al color del contorno a blanco. Cerciórese de que el radio de la esquina esté fijado a 0.

9. Arrastre la herramienta del rectángulo por las guías. El rectángulo debe encajarse en las guías.


Lic. Mario Quiroz Martínez 10. Para ver que el rectángulo se trazó, desactive las guías Ver > guías > mostrar guías

11. Después trace un segundo rectángulo (con un ancho de línea de 2 pts) de todo el borde de la hoja de trabajo.


Lic. Mario Quiroz Martínez Usar las capas 12. Ir a la línea de tiempo y presione el botón derecho sobre la capa. Y seleccione en el menú emergente la opción Propiedades

13. En el cuadro de dialogo escriba la palabra Curvas en el campo del texto y dele OK. Revise si ha cambiado el nombre en la línea

de tiempo.

14. En la parte inferior del panel de Línea de tiempo seleccione el botón de nueva capa. Y póngale el nombre de Navegador bar.

15. Seleccione la capa navegación bar. Trace un rectángulo pequeño en el centro de la hoja de trabajo. 16. Seleccione la Herramienta Selección de la Flecha (v) y selecciones el rectángulo 17. Abra el panel del Información eligiendo el Ventana > Información (Control+I). Modifique las configuraciones siguientes en el

panel del Información, presionando la tecla tab después de cambiar cada configuración: • Anchura (w): 850 px, Altura (H): 32px • X: -25 • Y: 400.



18. Guarde su archivo como neptune2.fla 19. Ahora oculte todas las otras capas. Cree una tercera capa y nómbrela Vector guía.

20. En esta capa se importara el archivo curve.swf. Para importar este fichero, elija del menú principal Archivo>importar.

21. Después convertirla en una capa Guía, (haga botón clic derecho sobre el nombre de la capa y elija Guía del menú desplegable),

según lo mostrado en el gráfico, esto se verificará cuando vea un icono de martillo al lado del nombre de la capa.


Lic. Mario Quiroz Martínez 22. Cree una cuarta capa y nómbrela Vector Azul. Ésta es la capa en la cual creará una imagen vectorial. Si la capa no se sitúa en

su orden habitual, puede moverla arrastrándola a la capa.

23. Bloquee la capa Vector guía, puede bloquear la capa haciendo clic en el punto negro bajo el icono del candado. Un candado

aparece en lugar del punto negro cuando la capa está bloqueada.

24. Con la Herramienta del Rectángulo y utilice el panel Color (Ventana>Color) Alt+Mayús+F9 con las siguientes modificaciones:

• Fije el color del contorno a sin color haciendo clic el rectángulo del color del contorno. • Ahora clic en el rectángulo del color del relleno escribe en la capa de texto #0000CC y haga clic en la tecla Enter. • Fije la transparencia Alfa en el color relleno A=40%.

25. Cerciórese de que la capa Vector Azul esté seleccionada (recuerde el icono del lápiz) y trace un rectángulo en la Escena.

Cambie a la Herramienta Selección (V) y haga clic en el rectángulo para seleccionarlo. Utilice el panel Propiedades de la herramienta para fijar la anchura y la altura a 257px y a 257px respectivamente.


Lic. Mario Quiroz Martínez 26. Con el rectángulo todavía seleccionado, duplique el rectángulo del menú principal, eligiendo Editar>Duplicar (Control+D). El

nuevo rectángulo ahora será seleccionado, utiliza la herramienta de la Selección (V) para mover el rectángulo a otro lado.

27. Repita el paso 26 para crear un tercer rectángulo.

28. Seleccione uno de los tres rectángulos que se acaba de crear y colóquelo sobre la capa de la Vector guía. Haga clic fuera del

rectángulo para deseleccionarlo. Para alterar la forma este primer rectángulo, utilice la herramienta de la flecha blanca para acomodar los nodos del cuadrado y la flecha negra para hacer una curva al lado derecho del rectángulo.


Lic. Mario Quiroz Martínez 29. Cuando acabe de crear de la primera imagen, haga clic en la imagen para seleccionarla. Entonces elija del menú principal

Modificar>Agrupar (Control+G) para agruparlo. Mueva la imagen agrupada al lado de la etapa.

30. Coloque el segundo rectángulo sobre la imagen en la capa de la Vector guía y deseleccione (Edición>Anular todas las

selecciones).


Lic. Mario Quiroz Martínez 31. Cuando mueve la herramienta flecha negra sobre la esquina derecha del rectángulo, vera la herramienta cambiar a una flecha

con forma de “L” debajo. Esto significa que podemos desplazarlo (el nodo) en forma recta (ver la imagen), hacemos lo mismo en la esquina superior derecha del cuadro.

32. Y después hacemos la curva. Terminando esto lo agrupamos (Control+G)

Observación: Recuerde, si tiene una equivocación, haga Control+Z (Windows). Utilice estos comandos de deshacer para cualquier equivocación que tenga (puede también elegir Edición>Deshacer).


Lic. Mario Quiroz Martínez 33. Repita los pasos 30-32 para formar el rectángulo final. Y lo agrupa también (Control+G)

34. Seleccione las tres imágenes haciendo un marco alrededor de ellas con la herramienta de la flecha negra o presionando

Mayúscula+Clic en cada imagen. Alinee los objetos uno encima de otra con el panel de Alinear (Ventana> Alinear Control+K). Para alinear los objetos a la izquierda haga clic en el primer botón del panel de alinear (como se muestra en la imagen)

35. Con las tres imágenes todavía seleccionadas, agrúpelos (Modificar>Agrupar).


Lic. Mario Quiroz Martínez 36. Duplique al grupo (Edición> Duplicar).

37. Seleccione el segundo grupo de las imágenes y elija Modificar>Transformar>Voltear horizontalmente

38. Ahora oculte la capa de la Vector guía. 39. Alinee su nueva imagen con las dos esquinas superiores del rectángulo blanco interno en la capa de los contornos. Para hacer

que la imagen se situé automáticamente, ubíquese sobre las esquinas, y arrastre la imagen agrupada a la esquina derecha.


Lic. Mario Quiroz Martínez 40. Suprima la capa Vector guía, y arrastre la capa Vector Azul del debajo de Navegador bar y la capa Curvas. guarde su archivo

como Neptuno3.fla

Usando la herramienta texto 41. Seleccione la capa Curvas y agregue una nueva capa sobre ella. Llámela: Titulo.

42. Seleccione la capa Título y seleccione la herramienta del texto. Para eso elija el símbolo T de panel de herramientas y en la

Panel de Propiedades y poner: • Cambie la fuente Arial o Helvética. • Cambie el tamaño de fuente a 50 pts. y el texto (relleno) al color blanco • Cambie el Espaciado de letra a 10 (el espaciado de letra se agrega el espacio adicional entre las letras.)



43. Haga clic en el Escenario y escriba los NEPTUNE RESORT en mayúsculas.

44. Seleccione el texto que acaba de escribir con la Herramienta de la flecha y ponga el texto debajo de la capa Vector Azul que

creó. Y haga clic en el panel Alinear: (Ventana>Alinear, o Contro+K).y centre el texto horizontalmente en el Escenario. Cerciórese de alinear el texto con el Espacio de trabajo.


Lic. Mario Quiroz Martínez 45. Deseleccione el texto que acaba de agregar. Repita los pasos anteriores 43-44 pero cambie el tamaño de la fuente a 25 pts. y

escriba AVENTURAS SUBMARINAS en mayúsculas. Ahora deseleccione el texto que agregó pero antes de que haga este paso anterior, con cuidado porque puedes modificar las configuraciones del texto NEPTUNE RESORT. Alinee este nuevo texto AVENTURAS SUBMARINAS y céntrelo en la Hoja de trabajo.

46. Ahora es tiempo para insertar el texto que utilizará para el eslogan NEPTUNE RESORT. 47. Seleccione la capa Navegación bar. Seleccione la herramienta del texto. 48. En el panel de propiedades cerciórese de que la fuente sea Arial y el tamaño que siga siendo 25 pts. Pero cambie el color del

texto a azul pálido (# 66CCFF). El espaciado entre letras está fijado en 10.

49. Haga clic en el Escenario y escriba: Sumérgete en el paraíso. 50. Mueva el nuevo texto hasta que este entre las líneas blancas horizontales en la capa Navegación Bar, y centre el texto

horizontalmente en la página (Ventana>Alinear). 51. Guarde su archivo como Neptuno4.fla

Importando ilustraciones 52. Elija del menú principal Archivo>Importar (Contro+R). La caja de diálogo de importación se abre.


Lic. Mario Quiroz Martínez 53. Revise la en la carpeta Assets y seleccione logo neptuno.ai. En el cuadro de dialogo, haga clic en Abrir. 54. En la caja de dialogo de importación de Adobe Illustrator, seleccione en Convertir capas en: Capa única de Flash. Haga clic

Aceptar. El archivo original ahora aparecer en el Escenario en una nueva capa llamada logo neptuno.ai.

55. Posicione la capa logo Neptuno.ai entre las capas Navegación bar y Titulo.


Lic. Mario Quiroz Martínez 56. Seleccione el logo neptuno.ai, usando la Herramienta de la flecha negra. En el panel de Propiedades fije la altura y anchura a

100 px para cada uno. Recuerde presionar la Enter después de digitar la nueva configuración. El logo se escala según las configuraciones en el panel de Propiedades del objeto seleccionado.

57. Utilice el panel de alinear (Ventana>Alinear) para centrar el logo horizontalmente en el Escenario. Active la opción: Alinear en

escenario para que logo alinee con el fondo de los vectores azules que agregó anteriormente. 58. Guarde su archivo como neptuno5.fla

Importar una imagen de mapa de bits En el ejercicio siguiente, vamos a usar una imagen de mapa de bits debajo de la barra de la navegación. Para importar una imagen de mapa de bits 59. Cree una nueva capa y nómbrela Gráfico fondo. Arrastre esta capa al fondo de la orden que empila y cerciórese de que está

seleccionada.

60. Elija del menú principal el Archivo>Importar. El cuadro de diálogo de la importación se abre.

61. Busque en la carpeta Assets y seleccione undersea.jpg. Utilice la herramienta de la flecha para seleccionar el BITMAP y para

arrastrarla en el área rectangular debajo del rectángulo en la capa de la barra de la navegación.



62. Guarde su archivo como neptune6.fla.

Convertir bitmap en vectores 63. Seleccione la capa Gráfico fondo. Bloquee todas las capas, menos la capa Gráfico fondo, y elija el Archivo>Importar. 64. En la carpeta del archivo Assets y seleccione delfines.jpg.

65. Con la BITMAP delfín.jpg seleccionada, del menú principal elija Modificar>Mapa de bits>Trazar mapa de bits. La caja de

dialogo del Trazar mapa de bits debe abrirse.

66. Fije el Umbral de color a 40, el Área mínima a 20, Umbral de esquina: Pocas equinas, y el Ajustar a curva: Redondeado.

Entonces haga clic en Aceptar.


Lic. Mario Quiroz Martínez 67. Después de que el trazo de la imagen este completo, la imagen será un gráfico de vector. Ahora se aprecia más como un gráfico

que como una fotografía.

68. La imagen todavía debe estar seleccionada. Si no es así, verifique de que todas las capas menos que la capa Gráfica fondo

este bloqueada. Seleccione el gráfico entero con el menú principal Edición> Seleccionar todo (Control+A), y después haga Mayús-clic sobre el jpg undeersea. Luego agrupe el gráfico vectorial eligiendo se modify > group.


Lic. Mario Quiroz Martínez 69. El panel del Info, dé al gráfico agrupado las siguientes configuraciones:

• Anchura (w): 780, Altura (H): 255 • X:10 Y:10

70. Guarde como Nombre_y_apellido práctica.fla

Documents

1 práctica animación en web