practica 4 banner publicitario utp 2013 1

Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada

Lic. Mario Quiroz

Practica Dirigida 4 OBJETIVO: Identificar y utilizar correctamente las caja de herramientas y opciones básicas de diseño en flash. TEMAS: Modificar documento, caja de herramientas, textos, capas, biblioteca, degradado, Capas, Transformar y Texto

1era. Parte: Documento, Capas y Rellenos. 1. Luego de ingresar al Adobe Flash CS6, elegir de la ventana de bienvenida la opción: Archivo de Flash ActionScript 3.0

2. A continuación elegir el menú principal Modificar>Documento (Ctrl+J), para luego darle las siguientes dimensiones.

3. Ir a las opciones de vistas: Conceptos básicos

Muestra final


Lic. Mario Quiroz 4. Ahora vamos a crear las siguientes capas con la opción Insertar Capa. Para eso dar tres clics a la opción nueva capa.

5. Cambiar el nombre de las capas, doble clic sobre cada nombre y escribir los siguientes nombres:

6. Seguidamente elija la herramienta rectángulo.

7. En la parte inferior de la caja de herramientas seleccione el color de relleno: Rojo (ce0000). Y el color de trazo: Ninguno

8. Hacer un clic sobre el fotograma 1 de la capa Fondo y luego arrastre sobre el Escenario para insertar un rectángulo en el extremo

izquierdo de la pantalla:

En la paleta información (Ctrl+i) indicaremos las dimensiones (ancho 187 px y en alto 129 px) y la ubicación usando las coordenadas: X:0 e Y:0


Lic. Mario Quiroz 9. Ahora crearemos otro rectángulo de color Negro. Para eso crearemos de nuevo otra capas con el nombre de Fondo 1

10. En esta capa trazaremos otro rectángulo de color Negro: #000000

11. Presionamos las teclas Ctrl+Alt+Mayus+R para que aparezcan las Reglas en el panel de Escenario. Y en la paleta Información marcaremos

las dimensiones Ancho: 513 px Alto: 129 px y en las coordenadas X:187, Y:0.00, el resultado debe ser similar a la muestra.

12. Seleccione el centro del rectángulo, luego abra los rellenos preestablecidos y aplicarle el degradado (Ctrl+F9): Negro con banco.

13. Ir al menú Ventana> Color (para personalizar nuestro degradado).

Activar el botón de relleno y elegir en la opción tipo: Degradado Lineal.


Lic. Mario Quiroz 14. Hacer un clic en la parte inferior para crear un punto más de color, luego seleccione el color blanco. Para ello elija el color de la paleta de

colores.

15. Finalmente arrastraremos la flecha de color negro hacia el extremo derecho como se aprecia en la figura, el resultado debe ser similar a lo

mostrado.

16. Vamos a la capa Fondo. Seleccionamos rectángulo de color rojo vamos al panel degradado y activemos el botón de relleno y elegir en la

opción tipo: Degradado lineal.

17. Hacer un clic en la parte inferior para crear un punto más de color, luego seleccione el color blanco. Para ello elija el color blanco (escriba

el numero R:255 G:255 B:255) o arrastre el circulo al extremo superior derecho.

Dele clic sobre la línea de degradado para agregar color

Arrastre el icono del degradado hacia afuera para eliminar el efecto de color


Lic. Mario Quiroz 18. Ahora seleccione el primer punto de color y aplíquele el color rojo (ce0000) de la paleta de colores o escribiendo:

19. También asignarle el mismo color rojo al tercer punto de color del degradado. Es decir el degradado será: rojo, blanco y rojo.

20. Ahora haga un clic (manteniendo presionado) sobre la herramienta Trasformación libre y luego elija la herramienta: Transformación de

degradado (o presione tecla F)

21. Modifique el tamaño y rotación de los colores para que los colores se vean similares a la muestra (es decir el degradado deberán tener la

dirección diagonal).


Lic. Mario Quiroz 2da. Parte: Propiedades, Texto y PolyStar. 22. Active el candado de la capa Fondo y Fondo 1, para proteger su contenido.

23. Ahora, seleccione la capa: Título y luego elija la herramienta de texto, haga un clic sobre el escenario y escriba: SOLUTIONS.

24. Luego desde la ventana de Propiedades establecer el siguiente formato: Swiss911 XCm BT, Tamaño: 32, Color: blanco y Alineación:

Centrado (También el tipo debe ser: Texto clásico y Texto estático).

25. Ubicarse en la capa texto: y con la misma herramienta de texto escribir: BOLETÍN, Swis721 Cn BT, Tamaño: 14, Color: Blanco y Justificado

a la Izquierda.


Lic. Mario Quiroz

26. Ahora trazaremos un rectángulo de color Blanco con la herramienta Rectángulo en la paleta Información indicaremos las dimensiones y

sus coordenadas

27. Sobre el rectángulo le agregaremos el siguiente texto: “Escribe tu correo” con las siguientes características tipográficas:

Ubicarse en la capa texto: y con la misma herramienta de texto escribir: “Introduce tu email para recibir nuestra publicación de noticias”, Swis721 Cn BT, Tamaño: 11, Color: Blanco y Justificado a la Izquierda.


Lic. Mario Quiroz 28. Ahora crearemos otra caja de texto y escribimos: ENVIAR, con las siguientes propiedades tipográficas:

29. Ahora ubicarse en la capa Gráfico y elegir la herramienta PolyStar. (Mantener pulsado el botón de la herramienta rectángulo).

30. Bloquee las capas Titulo y Texto. Hacer un clic sobre el Escenario y desde el panel de propiedades elegir el borde de color blanco y el

relleno de color rojo (CE0000) (con un tono dorado). En la configuración de herramientas presione el botón Opciones y llene los campos.

31. Ahora insertar el polígono en la parte derecha del Escenario. Indicando la Posición y tamaño que se encuentra en el panel de Propiedades

De la ventana de configuración aparecida, elegir el Estilo: Polígono, Número de lados: 6.


Lic. Mario Quiroz 32. Con la herramienta de selección (flecha negra), hacer doble clic sobre la polígono (para seleccionar tanto el borde como el relleno).

33. Luego seleccione la herramienta: Transformación libre (Q) y presionando la tecla Alt+ Mayús modifique su tamaño para que quede similar

a la muestra.

Nota: El programa Flash, por defecto maneja los bordes y los rellenos de los gráficos por separado, es decir no están unidos, por lo tanto si quiere editar todo el gráfico tendrá que seleccionar tanto el borde como el relleno de todo el gráfico. 34. Elija la herramienta línea

35. En la ventana de propiedades, defina un color de borde blanco y un grosor de 0.5, Estilo: Discontinua

36. Estando en la misma capa Gráfico arrastre de izquierda a derecha (debajo del texto) y mantenga presionada la tecla Mayús.


Lic. Mario Quiroz 3ra. Parte: Importar. 37. Ir al menú Ventana> Biblioteca (Ctrl+L).

38. Luego ir al menú Archivo>Importar>Importar a Biblioteca, seleccione los dos archivos: (Material de estudiante).

39. Estando en la capa Gráfico. Crear una nueva capa, luego cambie su nombre por: Imágenes.

Nota: En cualquier momento puede mover el orden de las capas arrastrándolas de arriba/abajo. 40. Luego desde la Biblioteca arrastrar la imagen man.png hacia el escenario. Para precisar su posición ponemos las siguientes coordenadas.


Lic. Mario Quiroz 41. Y después arrastraremos el xxxx_logo.jpg de la biblioteca al escenario.

42. Con la herramienta: Transformación libre (Q) cambie el tamaño y ubique la imagen en el centro de polígono.

Nota: Puede pulsar la tecla Alt y arrastrar al momento de cambiar el tamaño para modificar sólo un lado de la imagen. Tenga cuidado de no mover el punto blanco, que aparece siempre en el centro (al transformar), pues es el eje de rotación y punto de referencia para las animaciones. 43. Importar la imagen icon 7.png al escenario (Ctrl+R) directamente. Y revise la biblioteca, para observar que la imagen se encuentra también

en ese lugar.

44. Y ubíquelo al costado de Texto: BOLETÍN, como se muestra en la figura.


Lic. Mario Quiroz

45. Ir al menú Archivo> Guardar como, luego darle el nombre: banner_apellidos_nombre (en su carpeta personal). Se creará un archivo de

icono rojo: banner_apellidos_nombre.fla

46. Luego pulse Ctrl+Enter. Observe que en su carpeta personal, se ha generado automáticamente un segundo archivo de icono blanco:

banner_apellido.swf

47. Finalmente el banner queda de la siguiente manera.

practica 4 banner publicitario utp 2013 1

Design