Issuu on Google+

DISEテ前 WEB CON FLASH

Unidad Didテ。ctica Nツコ 1


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

I

¿Qué es Flash?

II

Mi primer documento en Flash A) Iniciar Flash B) Descripción de la pantalla C) Propiedades de la película D) Utilización de la barra de herramientas de dibujo E) Grupos Ejercicio de repaso (A, B, C, D y E) F) Guardar la película G) Cerrar una película H) Abrir la película previamente guardada I) Inspector de objetos J) Guardar una película modificada Ejercicio de repaso (F, G, H, I y J)

Formación Sin Barreras

Pág. 2/28


DISEÑO WEB CON FLASH

I

Unidad Didáctica Nº 1

¿Qué es Flash?

Es una aplicación de Macromedia con la que podemos diseñar animaciones interactivas para la Web. Flash nos permite crear los gráficos, animarlos, incluir sonidos y crear respuestas a acciones del usuario. A estas animaciones se les llama comúnmente películas. Además el almacenamiento de estas animaciones es vectorial, es decir, se guardan como fórmulas matemáticas que hace que los ficheros sean muy pequeños. Otra ventaja de trabajar en modo vectorial es que los gráficos no presentan dientes en sus bordes aunque se cambie el tamaño de la pantalla. Por otro lado, el sonido se comprime en sistema MP3 y las imágenes bitmap, en JPEG. Flash crea archivos con extensión FLA mientras estamos diseñando la película. A lo largo del curso veremos que podemos grabar nuestra película con distintas extensiones como SWF, AVI, EXE, GIF animado, etc. Además, Flash proporciona la capacidad de streaming. Esto nos permite que a algunos elementos se muestren inmediatamente después de ser descargados mientras que continúa llegando más información a la red. De esta forma el espectador no tiene que esperar tanto tiempo y puede ir visualizando los elementos que se van descargando.

II

Mi primer documento en Flash A) Iniciar Flash

1.- Hacemos clic en el botón Inicio. 2.- Ponemos el cursor sobre la palabra Programas y aparece una lista con todos los programas instalados. 3.- Seleccionamos Macromedia Flash 4. 4.- Buscamos el icono que muestra la siguiente imagen y hacemos clic para iniciar la aplicación.

Si tuviéramos un acceso directo al programa en el escritorio, podríamos iniciar Flash haciendo doble clic sobre él.

Formación Sin Barreras

Pág. 3/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

B) Descripción de la pantalla Vamos a empezar explicando algunos de los elementos de la pantalla que vamos a utilizar ahora, ya que el resto se comentarán en unidades posteriores.

La barra de título (en azul) contiene los siguientes elementos: a la izquierda, el Menú de control, el nombre de la aplicación y el nombre del fichero; a la derecha los botones de minimizar, control de tamaño y cerrar la aplicación. La barra de menú: Contiene el menú con las opciones principales del programa. Al pulsar en cada uno de ellas se despliega una lista con una serie de comandos. Las barras de herramientas: Son barras constituidas por botones con un icono que proporcionan un acceso más rápido a los comandos más frecuentes. Como sólo se incluyen en la barra de herramientas los más frecuentes, éstas pueden personalizarse según lo que el usuario utilice más. Todos los iconos que se encuentran en las barras de herramientas se encuentran también en la barra de menú. La barra de dibujo contiene las herramientas básicas para crear formas a partir de líneas y colores. El escenario es la zona que contiene todos los elementos gráficos que van a formar la película de Flash y donde creamos las animaciones. La línea de tiempo se compone de dos divisiones: las horizontales son las capas, que nos permiten diseñar las animaciones de varios elementos de forma organizada; las verticales son los fotogramas que indican la duración en el tiempo de la animación.

Formación Sin Barreras

Pág. 4/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

C) Propiedades de la película Al iniciar Flash, el programa nos muestra una película en blanco con las medidas y el color de fondo por defecto. Vamos a ver como podemos cambiar las propiedades de nuestra película. 1.- Hacemos clic en Movie del menú Modify como muestra la imagen.

Desde este cuadro de dialogo podemos modificar en primer lugar la velocidad de ejecución de la película en fotogramas por segundo. Por defecto, es 12. 2.- Escribimos “12” en la casilla Frame Rate. 3.- En las siguientes dos casillas definimos la dimensión de la película en píxeles. Hacemos clic en la casilla Width para definir el ancho y escribimos “550”. 4.- Ahora hacemos clic en la casilla Heigth para definir el alto y escribimos “400”. Flash nos permite mostrar una cuadrícula o rejilla para poder colocar de forma sencilla y con exactitud los elementos del escenario. En la casilla Grid Spacing definimos la distancia entre dos líneas. 5.- En la casilla Grid Spacing escribimos “18”. Además del espacio entre celdas, también podríamos cambiar el color de la rejilla para que no se confunda con el color de los elementos del escenario. Para ello haríamos clic en el botón Colors Grid y seleccionaríamos el color que quisiéramos. En el botón Colors Background cambiamos el color del fondo. 6.- Hacemos clic en el botón Background y aparece un cuadro con todos los colores que podemos seleccionar como fondo del escenario para nuestra película. 7.- Seleccionamos el azul que esta enmarcado en un cuadrado negro como muestra la imagen inferior.

Formación Sin Barreras

Pág. 5/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Además de la rejilla, Flash nos da la opción de mostrar unas reglas para posicionar con mayor facilidad los elementos. En la última casilla podemos seleccionar las unidades de medida de la regla, es decir, si queremos que nos muestre la regla en centímetros, milímetros, pulgadas, píxeles, etc. 8.- Hacemos clic en la lista desplegable de Ruler Units y seleccionamos Pixels.

Si hacemos clic en el botón que señala el ratón, la rejilla se convierte en un imán, de tal forma que al acercar un objeto hacia una de las líneas ésta lo atrae hasta que el objeto se ajuste a ella. Esta herramienta es muy útil para alinear varios elementos.

9.- Una vez definidas las propiedades de la película, hacemos clic en el botón Aceptar.

Formación Sin Barreras

Pág. 6/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

D) Utilización de la barra de herramientas de dibujo Vamos a explicar la barra de herramientas de dibujo mientras dibujamos elementos en el escenario.

Línea 1.- Hacemos clic en la herramienta línea. Observamos que debajo de los botones Mano y Zoom, aparecen otros botones. Éstos son distintos según la herramienta seleccionada. 2.- Hacemos clic en el botón Color de línea y seleccionamos el blanco. 3.- Seleccionamos 1.0 en la lista desplegable Grosor de línea. 4.- Seleccionamos Solid en la lista desplegable Estilo de línea.

Vamos a dibujar un triángulo en la esquina superior izquierda del escenario. Lo vamos a hacer en tres pasos como muestra la imagen. 5.- Para dibujar cada una de las líneas, hacemos clic con el ratón donde queremos que comience la línea y manteniendo pulsado el ratón, lo arrastramos hasta el final de la línea.

Manteniendo pulsada la tecla MAYUS mientras dibujamos la línea forzaremos a que ésta sea vertical, horizontal o forme un ángulo de 45 grados.

Formación Sin Barreras

Pág. 7/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Elipse 1.- Hacemos clic en el botón Elipse de la barra de Herramientas de dibujo.

Vamos a dibujar ahora un círculo blanco sin borde en la parte superior derecha del escenario. Para ello tenemos que eliminar el borde y poner el color de relleno blanco. 2.- Hacemos clic en el botón Color de línea y seleccionamos el cuadrado que señala el ratón para dibujar un círculo sin borde. 3.- Hacemos clic en el botón Color de relleno y seleccionamos el color blanco.

4.- Hacemos clic con el ratón y manteniéndolo pulsado, lo arrastramos para crear el círculo. Mientras arrastramos el ratón observamos que podemos dibujar elipses y que lo más difícil es conseguir dibujar un círculo. Para ello utilizaremos la tecla MAYUS. 5.- Pulsamos la tecla MAYUS. y la mantenemos pulsada. 6.- Cuando el círculo tenga unas proporciones parecidas a las de la imagen, soltamos el ratón. 7.- Soltamos la tecla MAYUS.

Rectángulo A continuación vamos a dibujar unos cuadrados en la parte superior, entre el triángulo y el círculo. 1.- Hacemos clic en el botón Rectángulo.

Formación Sin Barreras

Pág. 8/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Observamos que los botones que aparecen son iguales que en la herramienta Elipse, excepto el botón Radio de rectángulo redondeado. Esto nos permite dibujar rectángulos con las esquinas redondeadas. Al hacer clic sobre él aparece un cuadro de diálogo en el que indicaríamos el radio de redondeado. En este caso pondremos cero ya que queremos las esquinas rectas.

Vamos a dibujar primero un cuadrado sin borde de color gris. 2.- Hacemos clic en el botón Color de línea y seleccionamos sin borde. 3.- Hacemos clic en el botón Color de relleno y elegimos el gris que señala el cursor en la imagen de la derecha. 4.- Pulsamos el ratón y manteniéndolo pulsado lo arrastramos. Cuando el rectángulo sea parecido al de la primera figura, soltamos el ratón.

5.- Ahora seleccionamos el color marrón (encerrado en un círculo verde en la imagen de la derecha) y dibujamos un rectángulo como vemos en la figura 2. 6.- Hacemos lo mismo para el cuadrado azul (encerrado en un círculo azul en la imagen derecha). Para dibujar un cuadrado basta con mantener pulsada la tecla MAYUS. mientras arrastramos el ratón.

Formación Sin Barreras

Pág. 9/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Cubo de pintura Esta herramienta nos permite rellenar el interior de una forma cerrada con un color o cambiar el color de una forma ya coloreada. Hemos visto que al elegir las herramientas Elipse y Rectángulo el color de relleno se pinta automáticamente al dibujar. Esto no ocurre cuando hacemos un dibujo por nuestra cuenta (como el triángulo que creamos al principio). Puede ocurrir que dejemos pequeños huecos al dibujar con cualquiera de las herramientas de la barra de dibujo (lápiz, línea, etc.). Podemos hacer que Flash los ignore y rellene el interior de la figura seleccionando alguno de los botones de la lista desplegable Tamaño del hueco. Es decir, que según sea el tamaño de los huecos que hayamos dejado al dibujar, debemos seleccionar uno de las cuatro opciones para poder rellenar nuestro objeto.

Vamos a rellenar el triángulo blanco que teníamos dibujado 1.- Hacemos clic en el botón Cubo de pintura de la barra de herramientas de dibujo. 2.- Seleccionamos el color blanco en el botón Color de relleno. 3.- Situamos el cursor dentro del triángulo (en forma de cubo de pintura) y hacemos clic con el ratón.

Si tenemos seleccionada la opción Don´t Close Gaps en el botón Tamaño del hueco y al hacer clic con el ratón sobre la imagen no conseguimos rellenarla, esto es porque tenemos algún pequeño hueco. Para solucionarlo, seleccionaremos cualquiera de las otras tres opciones y intentamos de nuevo rellenar la imagen. Ahora vamos a crear un par de figuras más con la herramienta línea y cubo de pintura que van a formar el tejado de una casa.

Formación Sin Barreras

Pág. 10/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1 1.- Hacemos clic en el botón Línea. 2.- Hacemos clic en el botón Color de línea y seleccionamos el gris como señala el cursor en la imagen de la izquierda. 3.- Realizamos el dibujo que muestra la figura 1.

4.- Hacemos clic en el botón Cubo de pintura y seleccionamos el color gris (si no lo estuviera). Colocando el cursor dentro del triángulo hacemos clic con el ratón. 5.- Repetimos los pasos 1 a 4 seleccionando el color rojo (encerrado en un círculo amarillo) para realizar el dibujo que muestran las figuras 3 y 4.

Lápiz El Lápiz nos va a permitir dibujar líneas rectas o curvas con diferente estilo y grosor de línea. Además podemos elegir con el botón Modo de lápiz como queremos que queden las líneas: rectas, suavizadas o modo tinta.

1.- Hacemos clic en la herramienta Lápiz. 2.- Hacemos clic en el botón Modo de Lápiz y seleccionamos Straighten como muestra la imagen de la derecha. 3.- Comprobamos que el Estilo de línea sea Solid. 4.- Y que el Grosor de línea sea 1.0. 5.- Hacemos clic en el botón Color de línea y seleccionamos el marrón como muestra la imagen de la izquierda.

Formación Sin Barreras

Pág. 11/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

6.- Trazamos la línea que muestra la figura 1. Para poder rellenar lo que está por debajo de esta línea tenemos tener una figura cerrada.

7.- Hacemos clic en la herramienta Línea y dibujamos los bordes del escenario como vemos en la figura 2. Recordamos que si mantenemos la tecla MAYUS. pulsada mientras dibujamos la línea, forzamos que ésta sea vertical u horizontal. 8.- Hacemos clic en el herramienta Cubo de pintura. 9.- Hacemos clic en el botón Color de relleno y volvemos a seleccionar el marrón anterior. 10.- Situamos el cursor dentro de la figura y hacemos clic con el ratón (figura 3). Puede ocurrir que al hacer clic dentro de la figura, ésta no se rellene porque hayamos dejado algún pequeño hueco al dibujar. Hacemos clic en el botón Tamaño del hueco y seleccionamos Close Large Gaps.

11.- Para realizar el dibujo de la figura 4, hacemos clic en la herramienta Lápiz de la barra de herramientas de dibujo. 12.- Seleccionamos primero como Color de línea el marrón que muestra la figura. 13.- Hacemos clic en el botón Modo de Lápiz y seleccionamos Smooth. Trazamos las líneas necesarias teniendo en cuenta que tenemos que realizar una forma cerrada. 14.- Hacemos clic en la herramienta Cubo de pintura. 15.- Seleccionamos el color (si no lo estuviera) y situamos el cursor en el interior de la forma cerrada. 16.- Hacemos clic con el ratón para rellenar.

Formación Sin Barreras

Pág. 12/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Brocha Esta herramienta nos permite crear brochazos de color de forma libre. Estas formas son rellenos libres dibujados sin bordes. Es como si estuviéramos dibujando con un pincel o un rotulador. Flash nos ofrece una serie de tamaños de pincel y formas recomendadas que nos ayudan a crear los dibujos. Además esta herramienta es sensible a la presión si disponemos de tarjeta de dibujo.

Borrador Esta herramienta nos permite eliminar partes de un objeto completo, sus líneas o rellenos. Basta con pulsar el ratón y manteniéndolo pulsado, lo arrastramos sobre las zonas que queremos eliminar. Podemos elegir el Modo de borrador, es decir, si queremos borrar normal, sólo los rellenos, sólo los bordes, los rellenos seleccionados o dentro del dibujo (incluyendo los bordes).

Si seleccionamos el botón Grifo, podemos borrar las líneas o rellenos con un solo clic sobre ellos. Si quisiéramos borrar todos los objetos del escenario haríamos doble clic sobre la herramienta de la barra de dibujo Borrador.

Formación Sin Barreras

Pág. 13/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Cuentagotas Esta herramienta nos permite tomar propiedades de un objeto y aplicárselas a otro. Si pulsamos con esta herramienta sobre una línea, automáticamente se activa la herramienta Cubo de pintura con la propiedades de la línea.

Selección La herramienta Selección en Flash es muy importante ya que con ella podemos mover objetos, cambiar el tamaño, rotarlos, cambiar la forma, etc.

Vamos a empezar viendo como seleccionamos objetos en el escenario. 1.- Hacemos clic en la herramienta Selección de la barra de herramientas de dibujo. Para seleccionar un objeto no tenemos más que hacer clic sobre objeto. Según donde hagamos clic seleccionaremos el relleno del objeto o la línea. 2.- Hacemos clic con el ratón sobre el interior del triángulo para seleccionar el relleno (fig. 1). 3.- Hacemos clic sobre uno de los bordes para seleccionar sólo ese segmento (fig. 2). 4.- Hacemos clic fuera del triángulo para quitar la selección. 5.- Hacemos doble clic sobre el interior del triángulo para seleccionar los bordes y el relleno (fig. 3). 6.- Hacemos clic fuera del triángulo para quitar la selección. 7.- Hacemos doble clic en uno de los bordes para seleccionar sólo los bordes (fig. 4). Tenemos otras dos formas de seleccionar varios elementos: Una de ellas es haciendo clic sobre cada una de las partes de los objetos mientras mantenemos pulsada la tecla MAYUS. Otra forma es encuadrar los elementos que queremos seleccionar como muestra la imagen de la izquierda. Para ello hacemos clic con el ratón en la parte superior izquierda del objeto y manteniéndolo pulsado lo arrastramos hasta que lo recuadremos y soltamos el ratón. Con la herramienta Selección también podemos mover objetos. Primero seleccionamos aquello que queremos mover y a continuación manteniendo pulsado el ratón, lo arrastramos hasta donde queremos llevarlo.

Formación Sin Barreras

Pág. 14/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Vamos a ver ahora como podemos cambiar el tamaño y la orientación de un objeto. Para poder realizar cualquier modificación en un objeto debe estar previamente seleccionado. Vamos a duplicar el triángulo, lo vamos a rotar y lo vamos a mover para crear una estrella. 1.- Seleccionamos el triángulo haciendo doble clic sobre él. 2.- Seleccionamos Duplicate del menú Edit (fig. 1). Observamos que el objeto seleccionado es el nuevo triángulo, o sea que las modificaciones se harán sobre él. 3.- Hacemos clic en el botón Rotar. Observamos que este botón sólo está activo cuando tenemos seleccionado algún objeto en el escenario. Aparecen 8 círculos alrededor del objeto. Podemos girar el objeto situándonos en cualquiera de ellos. Nos situamos en el círculo superior izquierdo que está señalado en rojo (fig. 2). Hacemos clic con el ratón y manteniéndolo pulsado lo arrastramos hasta el círculo inferior derecho. Soltamos el ratón. 4.- Vamos a mover el nuevo triángulo como muestra la fig.3. Situamos el cursor en el centro del triángulo y cuando el cursor se convierta en cuatro flechas, hacemos clic con el ratón y lo arrastramos hasta la posición deseada. Soltamos el ratón. 5.- Hacemos clic sobre cualquier parte del escenario fuera de la estrella para quitar la selección (fig. 4). Ahora vamos a duplicar la estrella y vamos a cambiar el tamaño. 1.- La seleccionamos de una de las formas que hemos aprendido, por ejemplo, recuadrándola como muestra la fig. 1. Recordamos que para ello, hacemos clic con el ratón en la parte superior izquierda de la imagen y manteniéndolo pulsado lo arrastramos hasta la parte inferior derecha. Soltamos el ratón. 2.- Seleccionamos el menú Duplicate del menú Edit. 3.- Hacemos clic en el botón Escalar. Observamos que ahora aparecen 8 cuadrados alrededor del objeto seleccionado (fig. 2). 4.- Situamos el cursor en el cuadrado superior derecho y hacemos clic con el ratón. 5.- Manteniéndolo pulsado lo arrastramos hacia el interior del objeto para hacer la estrella más pequeña. Soltamos el ratón. 6.- Movemos la estrella haciendo clic sobre ella en el interior y la arrastramos como muestra la fig. 3 y soltamos el ratón. 7.- Hacemos clic sobre cualquier parte del escenario fuera de la estrella para quitar la selección. La herramienta Selección tiene otra utilidad, nos permite modificar el contorno de un elemento. De esta forma podemos moldear dibujos partiendo de una forma básica.

Formación Sin Barreras

Pág. 15/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Cuando acercamos el ratón al contorno de un elemento, debajo del cursor puede aparecer una pequeña curva (punto de curva) o una esquina (punto de esquina). La esquina aparece en el final de un segmento o cuando se unen dos segmentos que forman un ángulo abrupto (figura 2). Todos los puntos intermedios son puntos de curva (figura 1).

Vamos a ver un ejemplo. Dibujaremos un árbol. 1.- Hacemos clic en la herramienta Elipse de la barra de dibujo. 2.- Seleccionamos Sin borde como Color de línea. 3.- Seleccionamos 1.0 en la lista desplegable Grosor de línea. 4.- Seleccionamos Solid en la lista desplegable Estilo de línea. 5.- Seleccionamos el verde que muestra la imagen de la izquierda como Color de relleno. 6.- Dibujamos una elipse en cualquier parte del escenario sobre el fondo azul. 7.- Hacemos clic en la herramienta Selección. 8.- Situamos el cursor dónde muestra la figura 1. 9.- Cuando el cursor tenga esa pequeña curva debajo pulsamos la tecla CTRL. 10.- Manteniéndola pulsada hacemos clic con el ratón. 11- Manteniéndolo pulsado lo arrastramos hasta donde muestra la figura 2. Soltamos el ratón y la tecla CTRL.

En una elipse todos sus puntos son de curva por eso al acercar el cursor a cualquier parte del borde siempre aparece una pequeña curva debajo y nunca una esquina. Al pulsar la tecla CTRL hemos creado un punto de esquina (un pico en la elipse).

Formación Sin Barreras

Pág. 16/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

También podemos deformar la imagen sin crear un punto de esquina. 12.- Situamos el cursor como muestra la figura 3, hacemos clic con el ratón y manteniendo pulsado, lo arrastramos hacia la derecha para deformar la elipse. 13.- Para conseguir la imagen que muestra la figura 4 tenemos que crear otro punto de esquina. Para ello situamos el cursor y cuando aparezca debajo del cursor una pequeña curva, pulsamos la tecla CTRL. 14.- Hacemos clic con el ratón y manteniéndolo pulsado lo arrastramos hacia abajo (figura 4). Soltamos el ratón y la letra CTRL. 15.- Con la herramienta Lápiz y el Cubo de pintura realizamos el dibujo que muestra la imagen de la derecha.

16.- Hacemos clic en la herramienta Selección. Si el tamaño de la elipse o el otro dibujo es muy grande, hemos aprendido que seleccionándolo y con el botón de Escalar podemos cambiar el tamaño. 17.- Seleccionamos la elipse deformada haciendo clic sobre ella y manteniendo pulsado el ratón la arrastramos hasta colocarla encima del dibujo anterior. Soltamos el ratón.

Texto Seleccionamos la herramienta Texto de la barra de herramientas de dibujo. Tenemos dos formas de utilizarla: como un texto de una línea en el que para pasar a la siguiente tenemos que pulsar INTRO, o bien como cajas que tienen un tamaño predefinido y el salto de línea es automático.

Observamos que en el primer tipo la caja tiene un círculo en la esquina superior derecha, en cambio el segundo tiene un cuadrado.

Formación Sin Barreras

Pág. 17/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Para poder modificar cualquier texto sólo tenemos que editarlo haciendo clic sobre él teniendo la herramienta Texto activada.

Vamos a escribir un texto, pero antes definiremos la fuente, el tamaño, el color, etc. 1.- Hacemos clic en la herramienta Texto. 2.- En la lista desplegable Fuente seleccionamos Comic Sans Ms. Si no tuviéramos esa, elegimos cualquier otra. 3.- Seleccionamos 22 en la lista desplegable Tamaño de la fuente. 4.- Seleccionamos el blanco como Color del texto. 5.- Hacemos clic en Negrita. 6.- Seleccionamos Center en la lista desplegable Alineación. 7.- Hacemos clic en Párrafo. Aquí definiríamos los márgenes, sangría e interlineado. Hacemos clic en Ok.

8.- Hacemos clic en el fondo debajo de la luna y escribimos “LA LLEGADA DE” 9.- Pulsamos INTRO. 10.- Escribimos “GUSI” y pulsamos en cualquier parte del fondo para quitar la selección.

Formación Sin Barreras

Pág. 18/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Zoom A veces necesitamos trabajar con más detalle y para ello podemos aumentar la visualización del escenario. La forma más fácil de aumentar o reducir el tamaño es seleccionando la herramienta Zoom. Al seleccionarla y pulsar sobre el escenario, éste se amplia. Para reducir la vista debemos pulsar el botón Reducir y hacemos clic sobre el escenario.

También podemos aumentar o reducir el tamaño desde el cuadro Control de Zoom que se encuentra en la barra de herramientas.

Mano Cuando el escenario es demasiado grande la herramienta Mano nos ayuda a desplazarnos por la pantalla. Pinchando y arrastrando nos movemos por el escenario. Con la herramienta Mano seleccionada al hacer doble clic sobre el escenario, éste se ajusta al tamaño de la ventana.

E) Grupos Flash tiene una forma muy particular de colorear, pintar y modificar formas. Por ejemplo, si dibujamos una línea que cruza una objeto, ésta actuará como un cuchillo dividiendo el objeto en dos segmentos, a no se que la línea fuera del mismo color que el objeto que entonces se unirían. Vamos a ver un ejemplo. Dibujamos un círculo blanco y lo juntamos con el otro círculo que tenemos. 1.- Hacemos clic en el botón Elipse de la barra de herramientas de dibujo. 2.- Hacemos clic en el botón Color de línea y seleccionamos sin borde. 3.- Hacemos clic en el botón Color de relleno y seleccionamos el color blanco. 4.- Hacemos clic con el ratón y manteniéndolo pulsado, lo arrastramos para crear el círculo que muestra la figura 1.

Formación Sin Barreras

Pág. 19/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

5.- Hacemos clic en la herramienta Selección. 6.- Seleccionamos el círculo de la derecha haciendo clic sobre él y manteniendo pulsado el ratón arrastramos el círculo sobre el otro como muestra la figura 2. Soltamos el ratón. 7.- Hacemos clic fuera de los dos círculos para quitar la selección. Volvemos a hacer clic sobre uno de ellos y observamos que se seleccionan ambos ya que se han convertido en un solo objeto (figura 3). 8.- Seleccionamos Undo en el menú Edit para deshacer el último paso. 9.- Repetimos el paso 8 para deshacer un paso más. 10.- Hacemos clic sobre el último círculo creado (que debe estar seleccionado) y manteniendo pulsado el ratón lo arrastramos hasta su posición inicial. Soltamos el ratón. 11.- Hacemos clic en la herramienta Cubo de pintura. 12.- Seleccionamos cualquier color distinto del blanco para el Color de relleno. Por ejemplo, el negro. 13.- Situamos el cursor sobre este último círculo y hacemos clic con el ratón para rellenarlo de negro. 14.- Hacemos clic sobre el botón Selección. Para ver que el círculo es negro quitamos la selección haciendo clic con el ratón fuera de él. Vemos que tiene el color que queremos y volvemos a seleccionarlo haciendo clic con el ratón. 15.- Hacemos clic con el ratón sobre el círculo y manteniéndolo pulsado lo arrastramos como muestra la figura 2 anterior. Hacemos clic sobre el fondo para quitar la selección. 16.- Volvemos a hacer clic sobre el círculo negro para seleccionarlo y manteniendo pulsado el ratón, lo arrastramos a cualquier otra parte del escenario que no interseque con ningún otro objeto.

Observamos que al intersecar un círculo con el otro color se cortan. 17.- Teniendo seleccionado el círculo, pulsamos la tecla SUPR para eliminarlo del escenario. Tenemos que tener mucho cuidado al dibujar en Flash ya que a la hora de situar objetos unos encima de otros se pisan , recortándose las intersecciones. Cuando no nos interese que se nos pueda modificar un objeto podemos agruparlo. Para ello basta con seleccionar lo que queremos que forme parte del grupo y seleccionar Group del menú Modify. De esta forma podemos mover el grupo por cualquier parte del escenario sin miedo a que cortemos o unamos varios dibujos. Vamos a hacer 3 grupos: la casa, la estrella y el árbol.

Formación Sin Barreras

Pág. 20/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

1.- Seleccionamos la casa. Hacemos clic en el botón Selección de la barra de herramientas de dibujo. 2.- Hacemos clic con en el ratón en la parte superior izquierda de la casa y manteniéndolo pulsado, lo arrastramos hasta donde muestra la imagen. Soltamos el ratón. 3.- Seleccionamos Group en el menú Modify. 4.- Realizamos los pasos 1 a 3 con la estrella. 5.- Realizamos los pasos 1 a 3 con el árbol. Un grupo se mueve, reescala y rota igual que cualquier elemento, basta con seleccionarlo haciendo clic sobre él. Lo único que no podemos hacer es modificarlo, ya que para eso necesitamos editarlo. Para editar un grupo basta con hacer doble clic sobre él. 1.- Hacemos doble clic sobre la casa. Observamos que el grupo aparece resaltado mientras que los demás elementos del escenario aparecen atenuados. Además se crea una etiqueta al lado de Scene 1 para indicarnos que nos encontramos a nivel de grupo (Group). Ahora que está editado es cuando podríamos realizar las modificaciones. Para salir del nivel grupo basta con hacer clic en la pestaña Scene 1 o hacer doble clic sobre el escenario. 2.- Como no queremos hacer ninguna modificación, hacemos doble clic sobre el escenario.

Si en vez de modificar un grupo, lo que queremos es deshacerlo ejecutaríamos el comando Ungroup del menú Modify.

Formación Sin Barreras

Pág. 21/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Ejercicio de repaso (A, B, C, D y E) Dibujar, colocar y retocar lo que sea necesario para que el fondo quede de la siguiente forma:

Ayuda: Como la casa es un grupo, podemos duplicarla y cambiar el tamaño. Luego colocarlas en su sitio. La estrella también es un grupo. La duplicamos, escalamos y movemos a su posición. La iglesia debemos dibujarla encima del fondo. Cuando terminemos deberíamos agruparla y luego cambiarle el tamaño (si es necesario) y colocarla. El árbol, igual que la iglesia, debemos dibujarlo sobre el fondo y agruparlo.

Formación Sin Barreras

Pág. 22/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

F) Guardar la película Vamos a ver ahora cómo guardar las películas de Flash. Tenemos que acostumbrarnos a guardar los proyectos cada vez que hagamos una tarea importante para no perder todo el trabajo en caso de un corte eléctrico. 1.- Ejecutamos el comando Save as del menú File. 2.- En el cuadro de diálogo que aparece, hacemos clic en le botón de la derecha de la lista desplegable Guardar en y seleccionamos la unidad C. Vamos a crear una nueva carpeta para guardar la película que vamos a realizar durante el curso.

3.- Hacemos clic en el botón Crear nueva carpeta. 4.- Aparece un directorio nuevo con el nombre Nueva carpeta. 5.- Escribimos “Curso Flash” y pulsamos INTRO. 6.- Hacemos doble clic sobre la carpeta nueva. 7.- Introducimos el nombre “Mi primera película” en la casilla Nombre de archivo y hacemos clic en Guardar.

G) Cerrar una película Cerrar una película no es lo mismo que guardarla. 1.- Ejecutamos el comando Close del menú File para cerrar la película actual.

Formación Sin Barreras

Pág. 23/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

H) Abrir una película previamente guardada Podemos recuperar nuestra película “Mi primera película”. 1.- Ejecutamos el comando Open del menú File. 2.- Hacemos clic en le botón de la lista desplegable Buscar en. 3.- Hacemos doble clic sobre la carpeta “Curso Flash”.

4.- Hacemos doble clic sobre el nombre de la película o la seleccionamos y hacemos clic en el botón Abrir.

I) Inspector de objetos Hemos visto anteriormente cómo podemos mover, escalar y rotar un elemento con la herramienta Selección. Esta forma no es siempre muy precisa. Flash nos ofrece otra herramienta para poder ser más precisos a la hora de posicionar con medidas exactas, dar las proporciones adecuadas y rotar el ángulo exacto. 1.- Ejecutamos el comando Inspectors del menú Windows y seleccionamos Object.

Formación Sin Barreras

Pág. 24/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Aparece una nueva ventana. En ella se muestran las dimensiones y la posición exactas del objeto que seleccionemos en el escenario. Vamos seleccionando los objetos que se encuentran en el escenario haciendo clic sobre ellos. Para modificar la posición o la dimensión no tenemos más que escribir el número exacto y pulsar INTRO o hacer clic en el botón Apply. 1.- Hacemos clic en el texto. Observamos que además de la posición y la dimensión nos muestra la fuente, el tamaño, la alineación y los estilos aplicados. 2.- Hacemos clic en la casilla x y escribimos “329.4”. 3.- Hacemos clic en la casilla y y escribimos “144.3”. 4.- Pulsamos INTRO. Si en vez de poner unas medidas exactas (en píxeles), queremos escribir un tanto por ciento, hacemos clic en la pestaña Transform. Si tenemos activada la casilla Uniform, al reescalar el objeto mantendrá sus proporciones. Si la desactivamos tendremos que indicar el tanto por ciento de ancho y de alto.

También observamos que podemos rotar el objeto indicándole los grados. Haciendo clic sobre el botón Apply se aplicarán los cambios. Si hacemos clic en el botón Reset restableceríamos el tamaño y la escala anterior. Igual ocurriría en la pestaña anterior (Object).

Formación Sin Barreras

Pág. 25/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

J) Guardar una película modificada Vamos a guardar los cambios realizados en nuestra película “Mi primera película”. Como la película ya tiene nombre 1.- Ejecutamos el comando Save del menú File. Si no vamos a seguir trabajando cerramos la película ejecutando el comando Close del menú File y salimos del programa haciendo clic en el botón Cerrar de la esquina superior derecha de la pantalla. También podemos salir de la aplicación ejecutando el comando Exit del menú File.

Formación Sin Barreras

Pág. 26/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Ejercicio de repaso (F, G, H, I y J) Dibujar el ovni. Antes de empezar a dibujar hacer clic en el botón que muestra la imagen de la izquierda. De esta forma dibujamos el ovni en una nueva capa (ya explicaremos más adelante porque lo hacemos).

Ayuda: Figura 1: En la capa nueva, realizamos una elipse gris oscura sin borde. A continuación trazamos una línea horizontal de color gris claro dividiendo la elipse un poco más arriba de la mitad. La deformamos con la herramienta de selección y con el cubo de pintura rellenamos la parte superior de la elipse con gris claro. Luego trazamos seis pequeñas líneas en gris oscuro y las deformamos con la herramienta selección. Figura 2: Trazamos una elipse azul sin que interseque con la anterior. Deformamos la parte superior arrastrando el ratón hacia arriba en la parte central con la herramienta selección. Colocar sobre la elipse anterior. Formación Sin Barreras

Pág. 27/28


DISEÑO WEB CON FLASH

Unidad Didáctica Nº 1

Figura 3: Pintar fuera del dibujo un circulo rojo. Duplicarla 5 veces. Una de ellas rellenarla de verde con el cubo de pintura y volver a duplicar 5 veces. Una vez que tengamos todas, colocarlas en su sitio. Figura 4: Dibujamos 1 elipse y la duplicamos 2 veces. Para dibujar las patas utilizamos la herramienta línea, la duplicamos y con el lápiz las cerramos. Luego con el Cubo de pintura las rellenamos y las colocamos.

Nota: Guardar al terminar. El tamaño en el que dibujemos no importa ya que sabemos que se puede cambiar de tamaño.

Formación Sin Barreras

Pág. 28/28


Diseno web con flash ud 1