MACROMEDIA FLASH. Introducción. Instituto de Educación Superior San Ignacio de Monterrico. Formando Emprendedores De Calidad Para Un Mundo Empresarial

Save this PDF as:
 WORD  PNG  TXT  JPG

Tamaño: px
Comenzar la demostración a partir de la página:

Download "MACROMEDIA FLASH. Introducción. Instituto de Educación Superior San Ignacio de Monterrico. Formando Emprendedores De Calidad Para Un Mundo Empresarial"

Transcripción

1 MACROMEDIA FLASH Introducción Flash es un programa vectorial. Esto quiere decir que el resultado de los dibujos que con sus herramientas se realizan son vectores ó formas (operaciones matemáticas de curvas y rectas), que al ampliarse no perderán calidad, ya que no son imágenes de mapas de bits (sucesión de puntos ó píxeles). Los vectores aunque se cambien de tamaño conservan su calidad, además el espacio en disco para almacenar un vector es mucho menor que el que se necesita para almacenar un mapa de bits. Los gráficos vectores representan imágenes mediante líneas y curvas, que tienen propiedades de color y posición. La posición, el tamaño, la forma y el color de las imágenes de vectores puede variarse sin que por ello pierdan calidad. No dependen de la resolución ni de su tamaño en pantalla. Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color, denominados píxeles, que están organizados en una cuadrícula, de tal forma que todo ese conjunto de puntos forma la imagen. Una imagen de mapa de bits ocupará mas cuanto mas grande sea. Flash es una herramienta de edición con la que pueden crearse desde animaciones simples hasta complejas aplicaciones Web interactivas, como una tienda en línea. Las aplicaciones de Flash pueden enriquecerse añadiendo imágenes, sonido y vídeo. Flash incluye muchas funciones que la convierten en una herramienta con muchas prestaciones sin perder por ello la facilidad de uso. Entre dichas funciones destacan: la posibilidad de arrastrar y soltar componentes de la interfaz de usuario, comportamientos incorporados que añaden código ActionScript al documento y varios efectos especiales que pueden añadirse a los objetos. Cuando crea con Flash, trabaja con un documento de Flash, un archivo que, al guardarse, tiene la extensión.fla. Una vez que está preparado para desarrollar su contenido de Flash, lo publica, creando un archivo con una extensión.swf. Flash Player, que se describe en la siguiente sección, ejecuta el archivo SWF. 1

2 FLASH PLAYER Macromedia Flash Player, que ejecuta las aplicaciones creadas, se instala de forma predeterminada junto con Flash. Flash Player garantiza que todo el contenido SWF pueda visualizarse y esté disponible en las mismas condiciones en todas las plataformas, los navegadores y los dispositivos. Macromedia Flash Player se distribuye con productos de los principales colaboradores, entre los que cabe destacar Microsoft, Apple, Netscape, AOL y Opera, para ofrecer contenido y aplicaciones multimedia de forma inmediata a más de 516 millones de personas de todo el mundo. Flash Player se distribuye gratuitamente a cualquier persona que desee utilizarlo. Flash MX Professional Esta herramienta está concebida para los diseñadores de páginas Web y los creadores de aplicaciones avanzados. Flash MX Professional 2004 incluye todas las funciones de Flash MX 2004 (Edición de flash orientada al diseño), así como varias herramientas nuevas de grandes prestaciones. Proporciona herramientas de gestión de proyectos para optimizar el flujo de trabajo entre los miembros de un equipo Web formado por diseñadores y desarrolladores. Funciones tales como la creación externa de scripts y la gestión de datos dinámicos de bases de datos, entre otras, hacen que esta herramienta sea muy útil para proyectos complejos a gran escala que deban desarrollarse mediante Flash Player junto con una combinación de contenido HTML. ALGUNAS FUNCIONES DISPONIBLES EN FLASH Efectos de línea de tiempo.flash incorpora efectos de línea de tiempo que permiten crear animaciones complejas con un número mínimo de pasos. Los efectos de línea de tiempo pueden aplicarse a los siguientes objetos: Texto Gráficos, incluidos formas, grupos y símbolos gráficos Imágenes de mapa de bits Símbolos de botón 2

3 Nota: si se aplica un efecto de línea de tiempo a un clip de película, Flash incorpora el efecto dentro del clip de película. Comportamientos Con los comportamientos puede añadir interactividad a contenido de Flash sin escribir ni una línea de código. Por ejemplo, puede utilizar los comportamientos para incluir funcionalidad que vincule a un sitio Web, cargue sonidos y gráficos, controle la reproducción de vídeos incorporados, reproduzca clips de película y active orígenes de datos. Los comportamientos son scripts de ActionScript predefinidos que permiten añadir la potencia, control y flexibilidad de la codificación de ActionScript al documento sin que sea necesario que el usuario cree él mismo el código de ActionScript. Puede utilizar los comportamientos con una instancia para organizar ésta en el orden de apilamiento en un fotograma, así como para cargar, descargar, reproducir, detener, duplicar o arrastrar un clip de película o vincular a una URL. COMPORTAMIENTO PROPÓSITO SELECCIÓN/ENTRADA Ruta y nombre del archivo Carga un archivo JPEG JPEG. externo en un clip de Nombre de la instancia de clip película o pantalla. de película o pantalla que recibe Carga un archivo SWF el gráfico. URL del archivo SWF externo. Cargar clip de película externo en una pantalla o Nombre de la instancia de clip externo en un clip de película de de película o pantalla que recibe destino. Elimina los archivos SWF el archivo SWF. Cargar gráfico Descargar película Flash cargados con la acción o el comportamiento Cargar película. Nombre de instancia de clip de película o pantalla que hay que descargar. Nombre de instancia del clip de Duplicar clip de película Duplica un clip de película película que se va a duplicar. o pantalla Desplazamiento X e Y de los píxeles del original a la copia. 3

4 GotoAndPlay en un fotograma o etiqueta Reproduce un clip de película desde un fotograma concreto. Nombre de instancia del clip de destino que se va a reproducir. Número o etiqueta del fotograma que se va a reproducir. Detiene un clip de película; Nombre de instancia del clip de GotoAndStop en un opcionalmente mueve la destino que se va a detener. fotograma o etiqueta cabeza lectora a un Número o etiqueta del fotograma fotograma concreto. Adelanta la pantalla o el que se va a detener. clip de película de destino Nombre de la instancia de clip al principio del orden de de película o pantalla. Traer al frente apilamiento. Adelanta la pantalla o el Avanzar clip de película de destino Nombre de la instancia de clip una posición en el orden de película o pantalla. de apilamiento. Envía el clip de película de Enviar al fondo destino a la parte inferior del orden de apilamiento. Envía la pantalla o el clip de película de destino a Enviar hacia atrás una posición por debajo de la actual en el orden de Iniciar arrastre del clip de película Detener arrastre del clip de película Nombre de la instancia de clip de película o pantalla. Nombre de la instancia de clip de película o pantalla. apilamiento. Inicia el arrastre de un clip Nombre de la instancia de clip de película de película o pantalla. Detiene el arrastre actual. ENTORNO DE TRABAJO DE MACROMEDIA FLASH 8.0 PAGINA DE INICIO. La página de inicio proporciona acceso a las acciones utilizadas con más frecuencia tanto al iniciar una sesión como cuando la ventana de la aplicación no tiene ningún documento abierto. 4

5 La página de inicio presenta las áreas siguientes: Abrir un elemento reciente permite ver los documentos más recientes. Abrir muestra el cuadro de diálogo Abrir archivo. Crear nuevo ofrece una lista de tipos de archivo que puede seleccionar, como ActionScript o documento, para abrir un nuevo archivo con rapidez. Crear a partir de plantilla muestra las plantillas utilizadas con más frecuencia para crear documentos nuevos y permite seleccionar una plantilla de la lista. Más abre el cuadro de diálogo Nuevo documento, que enumera tipos de documento adicionales que se pueden seleccionar. Ampliar establece un enlace con el sitio Web de Macromedia Flash Exchange, desde donde puede descargar aplicaciones e información adicionales. Aprendizaje ofrece acceso rápido a los recursos que le ayudarán a aprender a utilizar Flash. Puede realizar una visita guiada de Flash, tomar una lección y actualizar el sistema de Ayuda con la documentación más actualizada. La página de inicio también puede mostrar información de prueba sobre la conversión, avisos de actualización y otros mensajes de interés. 5

6 DESCRIPCIÓN DEL ENTORNO DE TRABAJO. El entorno de trabajo de macromedia flash está compuesto por: Un escenario donde se coloca el contenido multimedia. Una barra de título principal con menús y comandos para controlar las funciones de la aplicación. Los paneles (Línea de Tiempo, Acciones, Proyecto, Muestra de Color, Escena, Explorador de Películas). Cada uno efectúa un trabajo distinto. El inspector de propiedades para organizar y modificar los elementos multimedia. La barra de herramientas para crear o modificar gráficos vectoriales. EL ESCENARIO El escenario es el área rectangular donde se coloca el contenido gráfico, que incluye, entre otros: gráficos vectoriales, cuadros de texto, botones, clips de vídeo o imágenes de mapa de bits importadas. El escenario del entorno de edición de Flash representa el espacio rectangular de Macromedia Flash Player donde se muestra el documento de Flash durante la reproducción. LA LÍNEA DE TIEMPO 6

7 Organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual que en un largometraje, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora. Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo indica los números de fotograma. La cabeza lectora indica el fotograma actual que se muestra en el escenario. La información de estado de la línea de tiempo situada en la parte inferior de la línea de tiempo indica el número del fotograma seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual. Nota: al reproducir una animación, se muestra la velocidad de fotogramas actual, que puede diferir de la velocidad de fotogramas del documento si el sistema no puede mostrar la animación con la rapidez apropiada. Se puede cambiar el modo de mostrar los fotogramas en la línea de tiempo, así como mostrar miniaturas del contenido del fotograma en la línea de tiempo. La línea de tiempo muestra dónde hay animación en un documento, incluidas la animación fotograma por fotograma, la animación interpolada y los trazados de movimiento. 7

8 Los controles de la sección de capas de la línea de tiempo permiten mostrar u ocultar y bloquear o desbloquear capas, así como mostrar el contenido de las capas como contornos. Puede insertar, eliminar, seleccionar y mover fotogramas en la línea de tiempo. También puede arrastrar fotogramas a una nueva posición en la misma capa o a otra capa. BARRA DE MENU Y BARRA DE EDICIÓN La barra de herramientas principal, situada en la parte superior del espacio de trabajo, muestra menús con comandos que sirven para controlar las funciones de Flash. Los menús son: Archivo, Edición, Ver, Insertar, Modificar, Texto, Comandos, Control, Ventana y Ayuda. La barra de edición, situada debajo de la barra de herramientas principal, contiene controles e información para editar escenas y símbolos, y para cambiar el grado de aumento del escenario. LA BARRA DE HERRAMIENTAS Las herramientas de la barra de herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del escenario. La barra de herramientas se divide en cuatro secciones: La sección de herramientas contiene las herramientas de dibujo, pintura y selección. La sección de visualización contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación. La sección de colores contiene modificadores de los colores de trazo y relleno. La sección de opciones muestra los modificadores de la herramienta seleccionada, los cuales afectan a las operaciones de pintura o edición de dicha herramienta. LOS PANELES Y EL INSPECTOR DE PROPIEDADES Flash permite personalizar de muchas maneras el espacio de trabajo. Mediante los paneles y el inspector de propiedades, puede ver, organizar y cambiar elementos y sus atributos. Puede cambiar el tamaño de los paneles, mostrarlos y ocultarlos. 8

9 También puede agrupar paneles y guardar conjuntos de paneles personalizados para que la gestión del espacio de trabajo sea más fácil. El inspector de propiedades cambia para reflejar la herramienta o el elemento con el que trabaja, lo que permite acceder rápidamente a las funciones más utilizadas. El inspector de propiedades simplifica la creación de documentos facilitando el acceso a los atributos más utilizados del elemento seleccionado, ya sea en el escenario o en la línea de tiempo. Puede modificar los atributos del objeto o documento en el inspector de propiedades sin acceder a los menús o paneles que contienen estas funciones. El inspector de propiedades muestra información y la configuración del elemento que está seleccionado, que puede ser un documento, un texto, un símbolo, una forma, un mapa de bits, un vídeo, un grupo, un fotograma o una herramienta. Cuando hay dos o más tipos de objetos seleccionados, el inspector de propiedades muestra el número total de objetos seleccionados. MANIPULACION DE LOS ELEMENTOS DEL ENTORNO DE TRABAJO 1. Escenario a. Aumento y reducción de la visualización.- Para ver todo el escenario en la pantalla o sólo un área determinada del dibujo con un grado de aumento alto, modifique el grado de aumento. El grado máximo de aumento depende de la resolución del monitor y del tamaño del documento. El valor máximo para acercar el escenario es 8%. El valor máximo para alejar el escenario es 2.000%. Para aumentar o reducir la visualización del escenario, siga uno de estos procedimientos: Para acercar un elemento determinado, seleccione la herramienta Zoom de la barra de herramientas y haga clic en el elemento. Para cambiar entre las funciones de acercar y alejar de la herramienta Zoom, utilice los modificadores Aumentar o Reducir (del área de opciones de la barra de herramientas cuando la herramienta Zoom está seleccionada), o haga clic con la tecla Alt presionada (Windows) 9

10 Para acercar una zona concreta del dibujo, arrastre un recuadro de delimitación rectangular con la herramienta Zoom. Flash establece el grado de aumento/reducción de forma que el rectángulo especificado ocupe la ventana. Para acercar o alejar todo el escenario, seleccione Ver > Acercar o Ver > Alejar. Para acercar o alejar con un determinado porcentaje, elija Ver > Aumentar y reducir y seleccione un porcentaje del submenú. Para cambiar la escala del escenario de modo que se ajuste completamente al espacio de una ventana determinada, seleccione Ver > Aumentar y reducir > Ajustar a ventana. Para mostrar el contenido del fotograma actual, seleccione Ver > Aumentar y reducir > Mostrar todo, o bien elija Mostrar todo en el control de zoom situado en la esquina superior derecha de la ventana de la aplicación. Para mostrar todo el escenario, seleccione Ver > Aumentar y reducir > Mostrar fotograma, o elija Mostrar fotograma en el control de zoom situado en la esquina inferior izquierda de la ventana de la aplicación. Para mostrar el área de trabajo que rodea al escenario, seleccione Ver > Área de trabajo. El área de trabajo se muestra en gris claro. Utilice el comando Área de trabajo para ver los elementos de una escena que están parcial o completamente fuera del escenario. Por ejemplo, para hacer que un pájaro entre volando en un fotograma, coloque inicialmente el pájaro fuera del escenario en el área de trabajo. b. Desplazamiento de la vista del escenario. Al aumentar el tamaño de visualización del escenario, es posible que no se vea todo su contenido. La herramienta Mano permite desplazar el escenario para cambiar la visualización sin tener que cambiar el grado de aumento. Para mover la visualización del escenario: 10

11 1. En la barra de herramientas, seleccione la herramienta Mano. Para utilizar temporalmente otra herramienta diferente de la herramienta Mano, mantenga presionada la barra espaciadora y haga clic en la herramienta de la barra de herramientas. 2. Arrastre el escenario. c. La cuadrícula. Cuando aparece la cuadrícula en un documento, se muestra como un conjunto de líneas detrás de la ilustración en todas las escenas. Puede ajustar los objetos a la cuadrícula, así como modificar el tamaño de la cuadrícula y el color de las líneas que la componen. Para mostrar u ocultar la cuadrícula de dibujo: Seleccione Ver > Cuadrícula > Mostrar cuadrícula. Para activar y desactivar el ajuste a las líneas de la cuadrícula: Seleccione Ver > Ajuste > Ajustar a cuadrícula. Para establecer preferencias para la cuadrícula: Seleccione Ver > Cuadrícula > Editar cuadrícula. d. Las guías. Si las reglas son visibles, puede arrastrar las guías horizontales y verticales de las reglas en el escenario. Puede mover, bloquear, ocultar y quitar las guías. También puede ajustar objetos a las guías y cambiar el color de las guías y la tolerancia al ajuste (a qué distancia máxima deben estar los objetos para ajustarlos a una guía). Las reglas que pueden arrastrarse aparecen únicamente en la línea de tiempo en la que se han creado. Puede quitar todas las guías del modo de edición actual: modo de edición de documentos o modo de edición de símbolos. Si quita las guías del modo de edición de documentos, desaparecen todas las guías del documento. Si quita las guías del modo de edición de símbolos, desaparecen todas las guías de todos los símbolos. 11

12 Para crear guías personalizadas o guías irregulares, utilice las capas de guías. Véase Utilización de capas de guías. Para mostrar u ocultar las guías de dibujo: Seleccione Ver > Guías > Mostrar guías. Para activar o desactivar el ajuste a las guías: Seleccione Ver > Ajuste > Ajustar a guías. Para mover una guía: Utilice la herramienta Flecha para arrastrar la guía. Para quitar una guía: Con las guías desbloqueadas, utilice la herramienta Flecha para arrastrar la guía a la regla horizontal o vertical. Para más información sobre cómo bloquear y desbloquear guías, consulte el procedimiento que se describe a continuación. Para bloquear las guías: Seleccione Ver > Guías > Bloquear guías. Para quitar guías: Seleccione Ver > Guías > Borrar guías. Si está utilizando el modo Editar documento, desaparecerán todas las guías del documento. Si está utilizando el modo Editar símbolos, desaparecerán sólo las guías que se utilicen en los símbolos. e. Las reglas. Si se muestran las reglas, éstas aparecen en la parte superior y a la izquierda del documento. Puede cambiar la unidad de medida que se utiliza en las reglas; la unidad predeterminada es píxeles. Al mover un elemento en el escenario con las reglas visibles, aparecerán unas líneas en las reglas indicando las dimensiones del elemento. Para mostrar u ocultar las reglas: Seleccione Ver > Reglas. 12

13 Para especificar la unidad de medida de las reglas para un documento: Elija Modificar > Documento y seleccione una opción del menú emergente situado en la esquina superior derecha. Los Paneles Como ya apuntamos más arriba, con los paneles controlaremos los diferentes aspectos del programa, tanto en lo que se refiere a las propiedades de los gráficos como de las películas. A medida que avancemos en el curso, trataremos de manera más precisa cada uno de ellos. En este primer tema veremos los tres paneles que más deberemos tener en cuenta a la hora de trabajar los gráficos y de disponerlos en la escena: el panel Herramientas, Línea de tiempo y panel Propiedades. Panel de herramientas y modificadores Una de las partes más importantes de Flash es el panel de Herramientas (menú Ventana/Herramientas) que contiene las herramientas principales del programa para la realización y tratamiento de nuestros gráficos. Este panel contiene también los controles para los colores de relleno y de trazo de los objetos en su parte inferior. Para utilizar cualquiera de las herramientas del panel seguiremos los pasos siguientes: 1. Picamos en la herramienta que queremos utilizar o bien tecleamos el carácter del teclado de la herramienta. 2. Movemos el cursor a la escena y utilizamos la herramienta. 13

14 Acompañando algunas herramientas disponemos de unos controles adicionales que podremos establecer para cambiar el funcionamiento de la herramienta. Estas opciones o controles los visualizaremos en la parte inferior del mismo panel. Junto con estas opciones, el panel Propiedades (que de forma predeterminada se muestra en la parte inferior, por debajo de la escena, junto con el panel Acciones), complementará a aquellas. El panel Propiedades Uno de los paneles más importantes cuando se trabajan con gráficos en Flash es el panel Propiedades. En él dispondremos de las opciones que acompañan a las herramientas del panel Herramientas. A través de estas opciones estableceremos los atributos específicos para los objetos seleccionados o de aquellos que en este momento estemos realizando. Así mismo, los atributos cambian dependiendo del objeto seleccionado o de la herramienta que tengamos activada. En el ejemplo, tenemos en la escena un rectángulo con un contorno y un relleno. Una vez lo hemos seleccionado con la herramienta Flecha del panel Herramientas, el panel Propiedades nos ofrece la información relativa al objeto así como la posibilidad de variar sus atributos. Sencillamente deberemos entrar los valores adecuados en cada uno de los campos. Capas y el panel Línea de tiempos Las animaciones en Macromedia Flash se basan en la combinación de fotogramas y capas dispuestos en una línea de tiempo a partir de la cual estableceremos la película. Por lo tanto podría decirse que el panel Línea de tiempo es el más importante cuando trabajamos en Flash. 14

15 Este panel se encuentra por debajo de la barra de Herramientas. En él se agrupan la línea de tiempos propiamente dicha, con todos los fotogramas de la animación y a su izquierda el listado de Capas de las que consta la película, junto con una serie de opciones a manera de iconos. Flash es un programa que trabaja por capas, que actúan como una pila de acetatos transparentes y sirven para mantener la ilustración por separado, de forma que se puedan combinar distintos elementos en una misma imagen visual sin que se corten o unan entre si. Cada capa es un elemento independiente que se anima de forma aislada. En la Línea de tiempo animamos las capas que forman la película, donde se coordina el tiempo de la animación y se sincronizan las animaciones de las distintas capas. Aquí se muestran todos los fotogramas de la película. Por tanto, la línea de tiempo organiza y controla el contenido de una película a través del tiempo en capas y fotogramas. Se puede modificar el modo de ver tanto las capas, como los fotogramas para crear una zona de trabajo cómoda según se vaya realizando la película, pulsando sobre el icono del extremo superior derecho de la misma línea de tiempo. Mostrar y ocultar los paneles Los diferentes paneles de Macromedia Flash podremos abrirlos desde el menú Ventana. Una vez abiertos en nuestro espacio de trabajo, tenemos la posibilidad de minimizarlos y maximizarlos. Picamos sobre el icono de Maximizar y Minimizar en forma de triangulo blanco de un panel para mostrar sólo la barra de título del mismo o visualizar 15

16 los atributos u opciones. Cuando la flecha se encuentra orientada hacia la derecha, el panel se encuentra cerrado o minimizado. Cuando la flecha se encuentra orientada hacia abajo, entonces el panel está abierto o maximizado. Así mismo, también tenemos la posibilidad de acoplar los diferentes paneles abiertos a los bordes de nuestra área de trabajo Acoplar los paneles a los bordes del área de trabajo 1. Situamos el cursor sobre los puntos junto a la flecha de minimizar o maximizar en la misma barra de título del panel. El cursor tomará la forma de una cruz. 2. Arrastramos el panel hacia el borde deseado del área de trabajo. 3. Cuando veamos que aparece un contorno de trazo más grueso en el borde que queramos acoplar el panel, soltamos el botón del Mouse. La barra de título del panel aparece dentro de un área gris que forma parte del área de trabajo. Liberar un panel acoplado 1. Arrastramos la barra de herramientas fuera del área de acoplamiento gris situando el cursor sobre los puntos al lado de la flecha o icono de minimizar y maximizar. 2. Cuando veamos el contorno propio de la barra, soltamos el botón del Mouse. La barra acoplada se convertirá en una barra de herramientas o panel flotante. 16

17 Escenario El Escenario, situado en la parte central del programa, es el área de trabajo en forma rectangular donde se produce la película. Se puede trabajar tanto encima como entorno a él, teniendo en cuenta que la visualización del resultado de lo que estamos haciendo y que publicaremos, se limita al interior de ese rectángulo ó escenario. En este escenario se componen los fotogramas individuales de la película. Propiedades de la película Antes de comenzar a realizar una película establecemos los parámetros generales de la misma. Para ello vamos al menú MODIFICAR / DOCUMENTO, mostrándose un cuadro con las "propiedades" de la película. 17

18 Dimensiones de la película En este campo se establecen las dimensiones de la película en anchura y altura de la ventana escenario. Podemos hacer películas que ocupen desde toda la pantalla del ordenador hasta pequeños "banners" de publicidad para colocar en las páginas Web. En la parte inferior del cuadro hay una opción en la que podemos elegir en qué unidades de regla queremos establecer el tamaño de la película. Es importante acostumbrarse a trabajar en píxeles, ya que afectará a varias opciones del programa. Las dimensiones de la película son, rigurosamente hablando, las dimensiones del escenario (la unidad estándar en multimedia y páginas Web es el píxel). NOTA: Destacamos que una película flash no ocupará mas bytes por tener un gran tamaño en píxel, sino por la complejidad de los elementos que coloquemos en la animación. Dicho esto es posible que ocupe mas un pequeño banner con sonido que una gran animación a pantalla completa con vectores simples. Color de fondo Mediante el botón fondo establecemos el color que deseamos para nuestra película (y que será común para todas las escenas). 18

19 El color de fondo de las películas sólo puede ser un color sólido, por lo que en ocasiones se recurre a colocar rectángulos con degradados o mapas de bits como fondos y sustituir al color establecido en este cuadro. Velocidad de reproducción En primer lugar establecemos la velocidad a la que se mostrarán los fotogramas de la animación. Por defecto se establece la velocidad de 12 fps (fotogramas por segundo), que equivale a la velocidad de reproducción de los dibujos animados. Así, 12 cuadros ó fotogramas representan 1 segundo de animación. Si queremos movimientos más rápidos para la animación, aumentaremos la cantidad de fotogramas que queremos en un segundo, y a la inversa si lo que queremos es una velocidad más lenta. NOTA: Aconsejamos dejar la velocidad de reproducción a 12fps hasta que se tenga un cierto dominio sobre las animaciones. Herramientas de ayuda al dibujo. Aunque no hemos comenzado todavía a utilizar las herramientas de dibujo o edición, hay unas ayudas que son comunes a todas ellas. Es interesante, por lo tanto, tenerlas presente antes de iniciar nuestros gráficos. Se trata de la cuadrícula y el imán (encajar). Cuadrícula Para visualizar la cuadrícula en la escena, debemos dirigirnos al menú Ver/Cuadrícula/Mostrar cuadrícula. La cuadrícula nos permitirá distribuir y ubicar los diferentes elementos que conforman la escena de manera más exacta. Encajar La herramienta Encajar, o también llamado imán, funciona de dos formas: En primer lugar si está activada la cuadrícula y ejecutamos el comando Ajustar a cuadrícula (del menú Ver) actuará como un imán de manera que al dibujar o editar, el cursor saltará forzándose a tomar puntos de esa rejilla. En segundo lugar, también actúa sobre los objetos de forma que al dibujar rectas se bloquean sobre los puntos finales o medios de las rectas. 19

20 Cuando deseemos dibujar de forma libre desactivamos esta opción ya que en ocasiones también puede dificultar el dibujo libre de siluetas. Otra herramienta de ayuda al dibujo son las "reglas", que también se pueden habilitar desde el menú ver. El uso de las reglas es sólo una ayuda visual para controlar las dimensiones en píxeles de nuestro dibujo. Dibujo y pintura Dibujo En el tema anterior ya comentamos que Macromedia Flash es un programa de animación de gráficos (aunque no debemos olvidarnos de las imágenes de mapa de bits). En este capítulo del curso estudiaremos las diferentes herramientas de dibujo a partir de los cuales generaremos nuestras películas. Una de las mejores maneras de aprender un programa de dibujo vectorial es empezar creando formas básicas. En lugar de realizar estas formas empezando desde cero, es mucho más sencillo utilizar las distintas herramientas de Flash con las que podremos realizar todo tipo de objetos diferentes. La versión MX de Flash también nos ofrece la posibilidad de crear trazados con formas muy definidas utilizando una herramienta realmente versátil como es la Pluma. Ya hemos comentado que los objetos creados en Flash se definen por trazados vectoriales, esto es, una serie de nodos o puntos de anclaje y segmentos que los unen. Por lo tanto, debemos quedarnos con la idea según la cual cuando dibujamos objetos en Flash se generan vectores (también llamados formas) correspondientes a las curvas y rectas que trazamos. El tamaño (en bytes) de una película de flash aumentará a medida que la complejidad de las curvas que trazamos sea mayor, no por el tamaño que dichas curvas ocupen dentro de nuestra película. Por lo tanto si dibujamos un círculo esa película ocupará lo mismo tanto si ese círculo es pequeño o grande. Las formas que dibujamos con Flash se clasifican en dos tipos, los contornos que forman las siluetas de los objetos y los rellenos de color con los que pintamos el interior de dichas siluetas. Dicho esto veremos que podremos dibujar un contorno a partir de un relleno, o un relleno a partir de un contorno. 20

21 Pasemos a ver las diferentes herramientas de dibujo básico. No debemos olvidarnos, cuando dibujemos, de tener presente el panel Propiedades, con el que podremos definir o bien variar los diferentes atributos de los objetos que vayamos haciendo. Línea Con la herramienta línea podemos dibujar rectas con las cuales generamos solamente "contornos" sin ningún relleno. Para dibujar rectas realizamos los siguientes pasos: 1. Picamos en la herramienta Línea del panel de Herramientas. 2. Colocamos el cursor donde queramos iniciar nuestra línea. 3. Definimos los atributos del trazo del lápiz en el panel Propiedades. 1. Pulsamos y arrastramos en la dirección que debería seguir la línea. 2. Soltamos el botón del Mouse donde queramos que ésta termine. 3. Arrastramos sobre el Escenario. Si mientras arrastramos se mantiene presionada la tecla de Mayús se dibujan rectas horizontales, verticales y oblicuas de 45. Si necesitamos dibujar una línea que parta del final o punto medio de otra, debemos activar la opción encajar que encontramos en la barra de Herramientas principal. Esta opción permite tomar referencia sobre la rejilla o sobre objetos ya dibujados (Fin, medios, centro). Una vez realizada la línea podremos cambiar sus dimensiones. En el panel Propiedades se indicará que estamos ante una Forma. 21

22 1. Activamos la herramienta Flecha y seleccionamos la línea en el escenario. 2. En el panel Propiedades, variamos los valores de los campos anchura An y altura Al. (Los campos X y Y nos permitirán establecer o cambiar la posición del objeto en el escenario respecto la esquina superior izquierda). Óvalos Con la herramienta Óvalo podemos pintar óvalos o círculos (tecla Mayús pulsada) de cualquier dimensión. Al dibujar un óvalo por defecto se generan dos vectores, el contorno y el relleno. Para dibujar un óvalo actuamos como sigue: 1. Seleccionamos la herramienta óvalo. 2. Especificaremos los valores de la herramienta desde el panel Propiedades. El primer selector de color determina el color del contorno, la lista desplegable siguiente permite cambiar el grosor del contorno, la siguiente el tipo de línea con que se dibujará el contorno, y el selector inferior, permite elegir el color del relleno. Si bien lo veremos con más detalle unos puntos más abajo, tenemos la posibilidad de elegir los colores de relleno y contorno de los objetos desde la parte inferior del panel Herramientas. 1. Picamos en el escenario y arrastramos, En el caso de este ejemplo se dibuja un óvalo con borde negro, grosor 0.5, tipo de línea sólida y relleno rojo. 22

23 2. Si queremos generar un círculo mantendremos pulsada la tecla Mayús mientras arrastramos por el escenario. Podemos dibujar óvalos (y otros objetos) sin contorno eligiendo en el primer selector (selector de color de contorno), la opción sin color. Tenemos dos opciones: 1. En la parte inferior del panel Herramientas, una vez hemos pulsado sobre el icono "color de contorno" picaremos sobre el icono Ninguno. 2. En el panel Propiedades, desplegaremos la paleta de colores y elegiremos la opción Ninguno de la parte superior de la misma. Del mismo modo, podemos dibujar óvalos sin relleno eligiendo la opción sin color en el selector de color de relleno. También podemos conseguir el mismo efecto dibujando el óvalo, seleccionando el contorno o el relleno con la herramienta Flecha en la parte superior del panel Herramientas, y pulsando la tecla Supr. Una vez tengamos la figura podremos cambiar sus dimensiones. 1. Activamos la herramienta Flecha y seleccionamos la elipse en el escenario. 23

24 2. En el panel Propiedades, variamos los valores de los campos anchura An y altura Al. (Los campos X y Y nos permitirán establecer o cambiar la posición del objeto en el escenario respecto la esquina superior izquierda). Rectángulos La herramienta rectángulo permite dibujar rectángulos pudiendo establecer el color del borde, grosor del mismo, así como el del relleno desde el panel Propiedades. Para dibujar un rectángulo actuaremos como sigue: 1. Seleccionamos la herramienta rectángulo en el panel Herramientas. 2. Definimos los atributos del rectángulo en el panel Propiedades (color de contorno, de relleno, grosor del trazo o contorno, y estilo de trazo). 3. Si deseamos dibujar un rectángulo de vértices redondeados, picaremos sobre el icono Radio de rectángulo en la parte inferior del panel Herramientas, dentro del cuadro Opciones. 4. En el cuadro de diálogo que se abre, indicaremos el valor en puntos de redondeo. 24

25 5. Si queremos generar un cuadrado pulsaremos la tecla Mayús mientras arrastramos por el escenario. Una vez realizada la forma podremos cambiar sus dimensiones. 1. Activamos la herramienta Flecha y seleccionamos el rectángulo en el escenario. 2. En el panel Propiedades, variamos los valores de los campos anchura An y altura Al. (Los campos X y Y nos permitirán establecer o cambiar la posición del objeto en el escenario respecto la esquina superior izquierda). La siguiente imagen presenta un rectángulo con las siguientes propiedades: Color del borde negro Grosor 2 Tipo de línea sólida Relleno de color rojo Arco de las esquina 10 píxeles Lápiz La herramienta lápiz permite dibujar contornos a partir de trazos realizados a mano alzada. Además del color grosor y tipo de línea con que dibujamos (desde el panel Propiedades), podemos elegir el método de ajuste de los trazos dibujados. 1. Activamos la herramienta Lápiz en el panel Herramientas. 2. Especificamos los valores del dibujo en el panel Propiedades. 25

26 3. Arrastramos por el escenario para realizar el dibujo. Disponemos de tres modos de ajuste a la hora de trabajar con la herramienta Lápiz, enderezar, suavizar y tinta. 1. Activamos la herramienta Lápiz. 2. En el panel Propiedades estableceremos los valores adecuados para nuestro dibujo. 3. En la parte inferior del panel Herramientas, dentro del campo Opciones, picamos sobre el icono Modo lápiz para establecer el tipo de ajuste. Enderezar: terminado el trazado a mono alzada, ajusta el trazado definitivo a tramos de línea y arcos (se aproxima poco al trazado original en el caso de emplear pocos trazos rectos) Suavizar: terminado el trazado a mano alzada, ajusta el trazado definitivo con tramos de línea y arco más precisos. Tinta: es el método que consigue una mayor aproximación entre el trazado a mano alzada y el definitivo que genera Flash. 26

27 Una vez realizada la figura podremos cambiar sus dimensiones. 1. Activamos la herramienta Flecha y seleccionamos el objeto en el escenario. 2. En el panel Propiedades, variamos los valores de los campos anchura An y altura Al. (Los campos X y Y nos permitirán establecer o cambiar la posición del objeto en el escenario respecto la esquina superior izquierda). Pincel. Con la herramienta pincel pintamos rellenos, a diferencia de la herramienta lápiz que colorea contornos. Para pintar con el pincel actuamos como sigue: 1. Seleccionamos la herramienta lápiz en el panel Herramientas. 2. Elegimos las características del pincel pulsando sobre los botones de la paleta que se despliega en la parte inferior, dentro del campo Opciones. 27

28 3. Elegimos el color del relleno, el tamaño del pincel y la forma del mismo. 4. Picamos sobre el escenario y arrastramos. En la siguiente imagen se ven varios trazos realizados con el pincel, donde hemos elegido el color rojo y cambiado el tamaño y tipo del pincel. La opción modo de pincel permite determinar como vamos a rellenar nuestra figura. Tenemos cinco posible modos. Modo Pintar normal: Modo por defecto, pinta sobre los objetos existentes. Modo relleno de pintura: Respeta los bordes de los vectores de los objetos dónde se dibuja. 28

29 Modo pintar detrás: Pinta por detrás de lo que tenemos ya dibujado. Modo pintar selección: Pinta sólo sobre los objetos seleccionados (podemos seleccionar con la herramienta Flecha ). Modo pintar dentro: Pinta dentro del contorno sobre el cual se empieza a pintar Hasta ahora hemos visto como realizar objetos con las herramientas de dibujo básico. En el siguiente punto pasaremos a estudiar una herramienta que nos brinda 29

30 la posibilidad de definir objetos más complejos. Si alguna vez a trabajado con programas de dibujo vectorial como Adobe Illustrator o Macromedia FreeHand, le será familiar el trabajo con puntos de anclaje, sus respectivos selectores y segmentos. Se trata de la herramienta Pluma. La herramienta Pluma 1. Activamos la herramienta Pluma en el panel Herramientas. 2. Colocamos el cursor donde queramos que comience nuestro trazado y picamos. Aparecerá un punto de vértice (o primer nodo) con forma de círculo vacío. 3. Colocamos el cursor en el siguiente punto y de nuevo hacemos clic. Tendremos una línea que va de un punto a otro. 4. Continuamos picando hasta conseguir nuestro primer objeto (recuerde que con cada nuevo clic definiremos un nuevo punto de vértice que se unirá al anterior a través de los trazados). 5. Si queremos que nuestra figura o trazado sea una figura cerrada, sólo debemos picar de nuevo sobre el primer punto de vértice. Junto a la herramienta aparecerá un círculo blanco pequeño que nos indica que la forma será cerrada. La herramienta Pluma y los segmentos curvos Los objetos que creamos con las herramientas de dibujo Pluma reciben el nombre de trazados. Éstos están compuestos por puntos de anclaje o nodos que se unen mediante segmentos. 30

31 Tan pronto como empecemos a cambiar la forma de nuestros objetos, será necesario que comprendamos los diferentes tipos de puntos y cómo pueden modificarse a través de los selectores que se extienden desde aquellos. Es importante tener presente que los trazados curvos siempre serán tangentes a los selectores o vectores del propio punto de anclaje. 1. Activamos la herramienta Pluma. 2. Hacemos clic en el primer punto que definamos y estiramos ligeramente. No debemos soltar el botón del Mouse hasta que hayamos creado un selector o vector que se extienda al menos un tercio de la longitud de la curva que queramos definir. (Debemos tener en consideración que los trazados curvos siempre serán tangentes a los selectores o vectores propios). 3. Picaremos para situar o definir cada uno de los puntos o nodos que conformaran nuestro objeto. Si estamos realizando un elemento con segmentos curvos, deberemos ubicar cada uno de los nodos allá donde el segmento o trazado cambie la dirección de su curva, estirando a cada nuevo punto para extender los correspondientes selectores. Una vez hemos dibujado nuestros objetos en el escenario, podremos editar sus contornos para variar su forma. En los siguientes puntos vamos a ver como podemos llevar a cabo estas transformaciones, tanto en lo que se refiere a las formas básicas como a los elementos creados con la herramienta Pluma. Edición de contornos. Una vez dibujado un objeto, podemos modificar los objetos con la herramienta Flecha. El resultado será una nueva figura. 1. Activaremos la herramienta Flecha del panel Herramientas. 31

32 2. Situamos la herramienta sobre el contorno que queremos variar para curvarlo o sobre un vértice para desplazarlo. Veamos cada una de las posibilidades. Mover un vértice. 1. Situamos la herramienta Flecha sobre el vértice que queramos modificar hasta que aparezca, junto con la herramienta, un símbolo a manera de esquina. Nos indica que nos encontramos sobre el vértice. 2. Arrastramos para desplazar el vértice preciso hasta la nueva posición. 3. El resultado es una nueva forma. Curvar un segmento. 1. Situamos la herramienta Flecha sobre el segmento hasta que aparezca una pequeña curva junto con la herramienta 2. Arrastramos y curvamos el lado. 3. El resultado es una nueva forma.. Añadir un vértice. 1. Activamos la herramienta Flecha del panel Herramientas. 32

33 2. Colocamos la Flecha en el punto del contorno en el que queremos añadir el nuevo vértice. 3. Pulsamos la tecla Alt y arrastramos. 4. El resultado es una nueva forma. Suavizar y enderezar contornos. Suavizar un contorno. (Botón suavizar de la barra de herramientas), cada vez que pulsamos, conseguimos que las curvas de un contorno sean más suaves (eliminación de vértices). Enderezar contornos. (Botón enderezar de la barra de herramientas), cada vez que pulsamos, las curvas tienden a vectores rectos. Edición de puntos de anclaje y selectores En el apartado de la herramienta Pluma hemos visto cómo generamos nodos (o puntos de anclaje), los selectores de cada uno de ellos y los segmentos. Todos estos elementos definirán una figura. El panel Herramientas dispone de la herramienta Subseleccionar con la que podremos seleccionar los nodos y editarlos. Desplazar un nodo o punto de anclaje 1. Activamos la herramienta Subseleccionar del panel Herramientas. 2. Picamos sobre el punto que queremos desplazar. El nodo seleccionado pasará a ser un punto lleno. 3. Arrastramos para desplazarlo y ubicarlo en la nueva posición. 33

34 4. Para seleccionar más de un punto de anclaje, pulsaremos la tecla SHIFT. e haciendo clic sobre aquellos puntos que deseemos seleccionar. Contraer un selector Ya hemos visto que los segmentos curvos se definen a partir de la tangencia de los selectores de cada punto de anclaje o nodo. Con la herramienta Subseleccionar podemos variar la posición de los selectores pudiendo modificar la curvatura del segmento. 1. Seleccionamos el punto para que los selectores estén visibles con la herramienta Subseleccionar. 2. Colocamos la herramienta Subseleccionar en el punto final del selector que deseamos contraer. 3. Como lo que queremos es contraerlo, lo arrastraremos hacia su punto de anclaje. Extender un selector 1. Utilizaremos la herramienta Subseleccionar para seleccionar el punto desde el que queremos extender el selector. 2. Colocamos el puntero sobre el punto seleccionado (en ese caso de vértice). 34

35 3. Pulsamos la tecla Alt y arrastramos para extender el selector desde el punto. El segmento pasará a ser curvo. También podemos extender aquellos selectores de segmentos curvos. 1. Activamos la herramienta Subseleccionar del panel Herramientas. 2. Colocamos la herramienta en el punto final del selector que deseamos extender. 3. Como lo que queremos es extenderlo, lo arrastraremos más allá de su punto de anclaje. También tenemos la posibilidad de cambiar la dirección de los selectores. Desplazar los selectores 1. Activamos la herramienta Subseleccionar. 2. Colocamos la herramienta sobre el selector de salida o de entrada. 3. Desplazamos el selector hacia arriba o abajo según la forma que queramos conseguir. Pero a lo mejor sólo precisamos desplazar o variar la curvatura de segmento a partir de un único selector. 1. Activamos la herramienta Subseleccinar. 35

36 2. Situamos la herramienta sobre el punto final del selector del punto de anclaje que precisemos variar. Dependerá del segmento sobre el que queramos variar. 3. Pulsamos la tecla Alt y arrastramos hasta la nueva posición. 4. Cuando lo tengamos en la nueva posición, dejaremos de pulsar el botón del Mouse antes que la tecla Alt. Ya hemos visto como podemos variar los contornos de las formas con la herramienta Flecha. Así mismo, si bien se traten de objetos dibujados con las herramientas de dibujo básico, podemos convertir sus contornos en trazados definidos por nodos y selectores en el caso de objetos curvos. 1. Activamos la herramienta Subseleccionar del panel Herramientas. 2. Arrastramos para definir un rectángulo que englobará la forma o figura. 3. Con la misma herramienta Subseleccionar editaremos los puntos de anclaje y/o correspondientes selectores. De la misma manera, todos los objetos realizados con la herramienta Pluma podremos editarlos como si se tratasen de formas básicas. 1. Activamos la herramienta Flecha en el panel Herramientas. 2. Arrastramos para definir un rectángulo que englobará la forma o figura o bien picamos sobre el contorno que queramos modificar. 36

37 Paleta de colores Ya hemos visto cómo podemos colorear los contornos de las figuras y darles un relleno de color desde el cuadro Colores en la parte inferior del panel Herramientas o bien a través de los comandos del panel Propiedades después de activar la herramienta. Al picar sobre el icono de Color de relleno o Color de trazo se abre la paleta Web. Desde ella escogeremos el color con el que queramos pintar nuestro gráfico. Si bien a la hora de colorear disponemos de la paleta predeterminada, tenemos la opción de personalizar o crear nuestro color y almacenarlo en la paleta de colores Web. Vamos, por lo tanto, a tratar los siguientes puntos: Elegir un color establecido Crear un nuevo color para poder utilizarlo con posterioridad Crear un color con canal Alfa (grado de transparencia) 37

38 Hemos visto como podemos escoger los colores de relleno y contorno picando sobre los iconos correspondientes en el campo Colores de la parte inferior del panel Herramientas. Además, los mismos iconos o botones de relleno y trazo los encontramos en el panel Propiedades y el panel Muestras de color. En todos los casos encontramos la paleta predeterminada de colores. Elegir un color. 1. Hacemos clic sobre el icono de Color de relleno o Color de trazo para abrir la paleta de colores. 2. Desplazamos el cursor en forma de Cuentagotas para escoger el color preciso. 3. Picamos para seleccionarlo y poder colorear o bien el trazo o el relleno del objeto, según el icono que hayamos activado (de contorno o de relleno). A pesar de disponer de la paleta de colores, es posible personalizarlos creando de nuevos. Crear un color desde la paleta predeterminada de colores. 1. Abriremos la paleta predeterminada de colores picando sobre los iconos Color de relleno o Color de trazo del panel Herramientas. 2. Con el cursor nos dirigiremos sobre el botón Color. 38

39 3. Haremos clic para abrir el correspondiente cuadro de diálogo Color. 4. Seleccionaremos uno de los colores básicos de la izquierda. El color se incluirá en el pequeño cuadro de muestra de la parte inferior derecha. 5. Introducimos su componente en Rojo, Verde y Azul (valores decimales), o Seleccionamos el color en la ventana del campo de colores, a la derecha del cuadro de diálogo, mostrándonos la nueva mezcla en los campos de Rojo, Verde y Azul. A la derecha del campo de colores tenemos el espectro con el que podremos variar la luminosidad o matiz del color escogido. 39

40 6. Una vez hayamos definido nuestro color, picaremos sobre el botón Agregar a los colores personalizados de la parte inferior. El color se mostrará a la izquierda, en el campo Colores personalizados. 7. Picamos sobre el botón Aceptar. El panel Mezclador de colores también nos brinda la posibilidad de personalizar nuestros colores y después almacenarlos en la paleta predeterminada desde del panel Muestras de color. Crear un color desde el panel Mezclador 1. Abriremos la paleta predeterminada de colores picando sobre el icono Color de relleno o Color de trazo en la parte superior del panel Mezclador de colores. 2. Seleccionaremos el color de la paleta predeterminada. 3. El color escogido se mostrará junto la ventana del campo de colores. 4. Cambiamos los valores de mezcla en los campos Rojo, Verde y Azul o bien el matiz desde el espectro. 5. También podemos personalizar nuestros colores directamente desde los campos RVA (Rojo, Verde y Azul) o entrando el valor deseado en el campo hexadecimal. Almacenar el color personalizado en la paleta predeterminada Una vez hemos creado nuestro color, tenemos la opción de almacenarlo en la paleta predeterminada de colores. Ejecutamos el comando Agregar muestra del menú del mismo panel Mezclador de colores 40

41 Nos dirigimos sobre la zona gris por debajo de la paleta predeterminada del panel Muestras de color. El cursor tomará la forma de la herramienta Cubo de pintura. Picamos y nuestro color personalizado se almacenará en la paleta predeterminada de colores. Para borrar un color personalizado ejecutamos el comando Eliminar muestra del menú del panel Muestras de color. El panel Mezclador de colores también nos permite crear colores Alfa, es decir, aplicar a los colores porcentajes de transparencia. Colores alfa. 1. Seleccionamos el color que queramos aplicarle una transparencia. 2. En el panel Mezclador de colores, abriremos el selector de transparencia que se encuentra junto al campo Alfa o bien entraremos el valor, en porcentaje, directamente en el campo, sabiendo que el 100% es completamente opaco y 0% es transparente. En la mitad superior del cuadro Muestra se visualiza el porcentaje de transparencia tomando como referencia una cuadrícula. 41

42 En la siguiente imagen se aprecia el efecto del color rojo del árbol con 50% de transparencia sobre el color verde. (Atención, para poder conseguir este efecto los objetos deben estar en diferentes capas o agrupados). Bordes y rellenos En este punto veremos las herramientas Bote de Tinta y el Bote de pintura del panel Herramientas. Bote de pintura. Permite colorear los rellenos de los objetos. 1. Escogemos el color con el que queremos rellenar nuestro gráfico. 2. Activamos la herramienta Cubo de pintura en el panel Herramientas. 3. Elegimos las características del cubo pulsando sobre los botones de la paleta que se despliega en la parte inferior del panel Herramientas. Estas opciones nos permiten rellenar de color aquellos objetos que no tengan contornos completamente cerrados. 42

43 4. Picamos en el interior del contorno que queremos rellenar. En el caso del ejemplo rellenamos los contornos de un pequeño árbol. Se puede apreciar que el contorno del tronco no está completamente cerrado. Por lo tanto, hemos activado la opción Cerrar huecos grandes. Bote de Tinta. Permite dar color a los contornos de un gráfico. 1. Elegimos el color de Trazo. 2. Activamos la herramienta Bote de Tinta 3. Establecemos los atributos específicos de Contorno: el color, el grosor en el panel Herramientas. y el tipo de línea. 4. Pulsamos el borde de un gráfico. En el ejemplo cambiamos los bordes del tronco y de la copa. 43

44 Borrador La herramienta borrador permite borrar tanto rellenos como bordes. Haciendo doble clic sobre esta herramienta se borra todo el fotograma. Para recuperar lo que hemos borrado, ejecutamos el comando Deshacer del menú Edición. Para borrar una parte del fotograma actuaremos como sigue: 1. Activamos la herramienta Borrador en el panel Herramientas. 2. Elegimos las características del borrador pulsando sobre los botones de la paleta que se despliega en la parte inferior del panel. 3. Podemos elegir tamaño del borrador, el método de borrado y la posibilidad de borrar por igualdad o tonalidad de color 4.. Picamos y arrastramos sobre la superficie que queremos borrar. 44

45 Modos de borrado Tal y como hemos visto en el punto 2, la herramienta Borrador dispone de varias opciones de ejecución. Borrar Normal: picamos y arrastramos sobre la superficie que queremos borrar. Borrar Rellenos: sólo borra los rellenos pero no borra los contornos. Borrar Líneas: sólo borra las líneas o contornos pero no borra los rellenos. Borrar Rellenos Seleccionados: primero se seleccionan los rellenos con la herramienta Flecha y, de este modo, nos aseguramos de que sólo se borrarán los rellenos que han sido seleccionados. Borrar Dentro: sólo borra dentro del contorno. Para determinar cual es el contorno, tenemos que empezar a borrar dentro del contorno que delimitará el borrado. Borrar por selección de color. Con la herramienta Grifo, borramos las zonas que tiene el mismo color del punto seleccionado. 1. Activar la herramienta Borrador. 45

46 2. Activar la herramienta Grifo en el cuadro Opciones de la parte inferior del panel Herramientas. 3. Picar en una zona de color. En el ejemplo se borra la masa verde de la copa del árbol. Degradados Flash interpreta un degradado como un relleno. Está compuesto por dos o más tonalidades de color, de tal forma que siempre hay una transición gradual de una a otra tonalidad. Los degradados pueden ser lineales o radiales, dependiendo de que la transición se produzca a lo largo de una línea (en los degradados lineales) o a partir de un punto (en degradados radiales). Crear un degradado. 1. Seleccionamos Lineal o Radial en el cuadro desplegable Rellenos. 2. En el mismo panel Mezclador de colores especificaremos los atributos, en este caso de un degradado Lineal. 46

47 3. Haremos clic sobre la detención de color del extremo izquierdo para seleccionarlo. Se define el primer color. 4. Abriremos la paleta de Colores. Elegimos el color. 3. Hacemos clic sobre la segunda detención (extremos derecho de color en la barra de previsualización de degradado) para activarlo. 4. Abrimos la paleta de Colores y elegimos el color con el que acabará nuestro degradado. 47

48 Aplicar un degradado. Los degradados se pueden aplicar para rellenar una forma (óvalo, rectángulo), siempre y cuando tengamos seleccionado el modo Relleno Lineal en el panel Mezclador de colores. 1. Activamos el Cubo de pintura en el panel Herramientas. 2. Seleccionamos un relleno Lineal en el panel Mezclador de colores. 3. Pintamos un objeto con el Cubo de pintura (hacemos clic en el interior). Al pintar un objeto con el bote podemos indicar la dirección del degradado. Haremos clic y arrastramos indicando una dirección. También podemos aplicar un degradado radial. 1. En el panel Mezclador de colores, seleccionamos la opción Radial en el cuadro Modos. 48

49 2. Activamos la herramienta Cubo de pintura. 3. Hacemos clic sobre la detención de color del extremo izquierdo para definir el primer color (en este caso será el color del centro de nuestro degradado). 4. Elegimos el color. 5. Hacemos clic sobre la segunda detención de color para definir el último color del degradado. 6. Con la herramienta Cubo de pintura, picamos en el área de relleno de la figura para marcar el centro de nuestro degradado. Personalizar los degradados Para crear un degradado deberemos añadir tantas detenciones de color como precisemos. 1. Con el cursor picaremos sobre el área gris por debajo de la barra de muestra de degradado. 49

50 2. Seleccionaremos el tipo de degradado Lineal o Radial en el campo Modo del mismo panel Mezclador de colores. 3. Picar sobre la nueva detención de color y escoger el nuevo color. 4. Desplazaremos las detenciones de color según el efecto que deseamos crear. Cuanto más próximos se encuentren una detención de color con otra, el cambio de tonalidad será más brusco. 5. Con la herramienta Cubo de pintura picamos sobre el área de relleno de nuestro gráfico para marcar el centro en los casos de rellenos radiales, o bien arrastramos la herramienta para indicar la dirección en los degradados lineales. Hemos visto la manera que tenemos de marcar la dirección o el centro de nuestro relleno de degradado (según se trate de un degradado lineal o radial). Una vez aplicado el relleno podremos variar sus parámetros. 50

51 Cambiar los parámetros de un degradado. Para cambiar los parámetros de un degradado que hayamos aplicado a nuestro gráfico actuamos como sigue: 1. Activamos la herramienta Transformación de relleno en el panel Herramientas. 2. Picamos en el área de relleno de degradado de nuestro gráfico. Aparecerán los controladores de extensión y rotación de degradado. Cuando aplicamos un relleno de degradado en diferentes gráficos, cada uno de ellos se rellenará del degradado de manera independiente. Pero muchas veces precisaremos que el relleno de degradado se extienda a lo largo de los diferentes objetos de tal forma que su apariencia sea la de un único relleno. Degradado continúo. 1. Activaremos la herramienta Bloquear Relleno en la parte inferior del panel Herramientas una vez seleccionemos la herramienta Cubo de pintura. Con esta herramienta conseguiremos que un degradado se extienda a lo largo de los diferentes gráficos de la escena. 51

52 2. Con la herramienta Cubo de pintura picaremos sobre cada una de las áreas de relleno de los objetos. Cinco degradados no continuos. Cinco degradados continuos Hasta ahora hemos visto como rellenar los objetos con degradado de colores sólidos. También podemos crear un degradado en el que se disponga un porcentaje de transparencia en una de las detenciones de color. Degradado con colores Alfa. 1. Activamos el Cubo de pintura en el panel Herramientas. 2. Seleccionamos el tipo relleno, Lineal o Radial, en el panel Mezclador de colores. 3. Picamos sobre la detención de color para definir el primer color. 4. Elegimos el color. 5. Picamos sobre la segunda detención de color para definir el último color del degradado. 6. Escogemos la misma muestra de color pero le aplicamos una transparencia en el campo Alfa del mismo panel Mezclador de colores. 7. Con la herramienta Cubo de pintura, picamos en el área de relleno de la figura. 52

53 Almacenar un degradado personalizado en la paleta predeterminada Una vez hemos creado nuestro degradado, tenemos la opción de almacenarlo en la paleta predeterminada de colores. Ejecutamos el comando Agregar muestra del menú del mismo panel Mezclador de colores Nos dirigimos sobre la zona gris del área de muestras de degradado del panel Muestras de color. El cursor tomará la forma de la herramienta Cubo de pintura. Picamos y nuestro color personalizado se almacenará en la paleta predeterminada de colores. Cuentagotas, lupa y mano. Explicamos tres herramientas de la paleta de herramientas muy útiles a la hora de movernos por el escenario. Cuentagotas. Permite poner como color actual el color seleccionado. Si queremos poner como actual un color ya empleado en el escenario, pulsamos sobre el cuentagotas y picamos en cualquier zona que tenga el color deseado. Lupa. La opción Lupa permite ampliar o reducir la visualización de los gráficos o imágenes de nuestro escenario. Podemos cambiar de (+ a -) pulsando la tecla Alt. 53

54 Zoom ventana. Con esta herramienta podemos ver una determinada zona del escenario, basta con abrir una ventana englobando la parte que queremos ver. Para abrir una ventana, picamos en el primer vértice, y sin soltar el botón izquierdo del Mouse, realizamos un arrastre. Mano. Con la herramienta Mano podemos encuadrar la visualización dentro del escenario. Podemos acceder de una manera rápida al encuadre pulsando la barra espaciadora. Capas y fotogramas en Flash La línea de tiempo es donde podremos organizar la sucesión de imágenes que dan lugar a una animación. En este capítulo introduciremos los conceptos de capa y fotograma, vitales para una compresión del funcionamiento de Flash. En cierta medida, Flash trabaja como si fuese una película. Una animación es una sucesión de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la impresión de un movimiento. Cada una de estas imágenes fijas es llamada también fotograma. Los fotogramas son representados bajo forma de rectángulos en la parte derecha del escenario. En estos rectángulos podemos alojar tres tipos diferentes de imágenes (Fotogramas): Fotogramas clave.- Se trata de las imágenes que nosotros mismos dibujaremos Fotogramas fijas.- Son las imágenes claves copiadas en los fotogramas siguientes al de la primera imagen clave de manera a producir un efecto de objeto estático. Fotogramas de interpolación.- Se trata de imágenes calculadas por Flash que permiten la transición gradual entre dos imágenes claves. Este tipo de imágenes muy útiles ya que se generan automáticamente y proporcionan un efecto suave de movimiento o transformación. Por otra parte, una animación esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y 54

55 presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos. Así, una animación Flash esta compuesta de una superposición de capas en cada una de las cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos permiten trabajar la animación en distintos planos independientes. Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias. Un uso inteligente de las capas es la base para crear animaciones de calidad. Bibliotecas en Flash Otro elemento de Flash que necesita una gestión lo más sabia posible es la biblioteca. Como dijimos previamente, Flash permite la optimización del espacio ocupado por la animación, o lo que es lo mismo, del tiempo que el usuario tarda en cargarla. Uno de los elementos que contribuye a ello es las denominadas bibliotecas. Una biblioteca no es más que un almacén de objetos (gráficos o sonidos) que podrán ser utilizados en una misma animación en una o más ocasiones. Dependiendo del rango que presente esta biblioteca, ésta puede ser propia a la animación, compartida por varias animaciones, o bien permanente (empleada por la totalidad de animaciones). Cada uno de los elementos que constituyen una biblioteca son denominados símbolos. Como hemos dicho, estos elementos podrán ser utilizados en nuestra animación cuantas veces lo deseemos. No obstante, cada una de estas utilizaciones no es llamada símbolo, sino ocurrencia. Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un símbolo almacenado en nuestra biblioteca es utilizado en nuestra animación. Cambiando las propiedades de un símbolo de la biblioteca, cambiamos todas cada una de las ocurrencias que aparecen en la animación. Contrariamente, la 55

56 modificación de una ocurrencia no altera al símbolo de la biblioteca ni a las otras ocurrencias de la animación. Como podemos observar, el uso de las bibliotecas no solo nos ayuda a aligerar el archivo, sino que nos permite una creación, edición y borrado rápidos de cada una de las ocurrencias. En capítulos posteriores abordaremos con más detalle la gestión de bibliotecas símbolos y ocurrencias. Pasaremos a continuación a la aplicación de lo aprendido a partir de la creación de una animación. Mi primera animación en Flash I Después de haber introducido los conceptos básicos de Flash, vamos a poner en práctica algunos de ellos de manera a comenzar a familiarizarnos con la interfase. Para empezar, comenzaremos por generar un documento en blanco por medio de: Archivo > Nuevo Como podemos observar en la línea de tiempo, nuestra animación consta de una sola capa y un único fotograma representado por un rectángulo con un círculo. Este círculo significa que se trata de un fotograma que contiene una imagen clave vacía. La animación que pretendemos crear consiste en un movimiento de traslación de una esfera con una trayectoria elíptica. Así pues, lo primero que debemos hacer es dibujar la esfera. Sin embargo, para empezar con las buenas costumbres, no dibujaremos la esfera directamente sobre nuestro fotograma vacío, sino que crearemos un símbolo en nuestra biblioteca. Para crear nuestro símbolo en la biblioteca: Ventana > Biblioteca Llegados a este punto veremos aparecer en la pantalla una ventana como la que vemos en la ilustración. 56

57 Para insertar el símbolo lo podemos hacer a partir del botón con una cruz situado en la parte inferior izquierda de la ventana de la biblioteca, o bien ir a la barra de menús y hacer: Insertar > Nuevo Símbolo Una nueva ventana de dialogo aparece ante nuestros ojos (ver figura abajo). En ella podremos definir el nombre (para este caso la llamaremos esfera) y el comportamiento (elegiremos gráfico). Por el momento no entraremos en la explicación de la opción comportamiento, ya lo veremos más adelante. Al rellenar debidamente la ventana anterior y Aceptar, veremos como el escenario se agranda y la barra superior del escenario nos muestra la palabra Esfera. Lo que ha pasado es que hemos salido de nuestra animación para meternos en un espacio en el que podemos editar el símbolo que queremos crear. Así que nos ponemos manos a la obra con nuestra labor de artistas. Para dibujar la esfera vamos a servirnos de las herramientas de dibujo. Comenzamos por elegir la herramienta óvalo, representada por un círculo. Una vez elegida nos colocamos en el escenario y, apretando la tecla mayúsculas y pulsando el botón izquierdo del Mouse (el único para los usuarios Mac), desplazamos el Mouse hacia cualquier dirección. Veremos aparecer un círculo con los colores definidos en el apartado colores de la barra de herramientas. Ahora, para darle la sensación de perspectiva a la esfera, vamos a colorearla en su interior usando un degradado radial. Para ello, visualizamos el panel mezclador de colores: Ventana > Mezclador de color Llegados aquí, veremos una ventana como la de la figura: 57

58 En este panel, seleccionaremos en el menú desplegable la opción Radial. Veremos como la ventana cambia de aspecto pareciéndose a la imagen siguiente: Lo que haremos es seleccionar dos colores (los que os gusten) para cada una de las casitas que se encuentran en la parte inferior de la barra de degradado. Para ello, clicaremos sobre cada una de las casitas y a continuación, elegiremos un color en la paleta desplegable situada en la parte superior izquierda del panel. Una vez definido el degradado, podemos seleccionar la herramienta cubo de pintura y clicaremos con el botón izquierdo sobre la parte rellena del círculo. Si todo funciona correctamente, deberemos obtener una esfera similar a la de la figura mostrada: Sugerimos repetir este proceso de relleno del círculo con un degradado jugando con las opciones que nos ofrece el panel mezclador de colores. Podemos ver que es posible añadir más casitas para conseguir un efecto de coronas o bien cambiar el tipo de degradado a lineal y más cosas... Después de dejarnos llevar por nuestra vena creativa podemos volver a cosas más serias. Para empezar, podemos alinear la esfera con la cruz que define el punto de alineamiento del símbolo. Para ello, elegiremos la herramienta flecha y seleccionaremos la esfera desplazando el Mouse al mismo tiempo que 58

59 mantenemos pulsado el botón izquierdo. Para mover la esfera lo haremos del mismo modo, desplazando el Mouse hasta el lugar apropiado manteniendo pulsado el botón izquierdo. Podemos precisar el desplazamiento usando las flechas del cursor que nos permitirán desplazarnos píxel por píxel. Ya hemos definido el símbolo en la biblioteca. Ahora vamos a empezar a trabajar con la animación propiamente dicha. Lo primero que debemos de hacer es salir del espacio de creación del símbolo y colocarnos en el escenario de la animación. Para ello, haremos clic en la palabra Escena 1 que aparece en la parte superior izquierda del escenario. Ya dentro del escenario, vamos a incluir en el primer fotograma el símbolo que acabamos de crear. Antes de nada, iremos a la ventana biblioteca y seleccionaremos el símbolo esfera. A continuación, haremos clic y arrastraremos el símbolo hasta el escenario. El resultado debería ser algo como lo que se muestra en la imagen inferior: Podemos observar que el círculo vacío del primer fotograma se ha convertido ahora en un círculo lleno, lo que significa que la imagen clave no esta vacía. Pasemos ahora a estudiar el tipo de animación que vamos a hacer. Como hemos dicho, pretendemos simular un movimiento de traslación de la esfera con una trayectoria elíptica, dando la impresión de un círculo en perspectiva. Esta animación podría ser definida por tres imágenes clave: 59

60 La esfera situada en primer plano al principio de su movimiento. La esfera situada en segundo plano a mitad de su ciclo de traslación. La esfera llegada al final del ciclo, aproximadamente en la misma posición que la primera esfera. Podemos ver cuales serian estas tres imágenes clave en el siguiente esquema: De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda en el lugar aproximado que le correspondería. Para ello llevamos a cabo las siguientes operaciones: Insertamos una imagen clave en la capa 1, más o menos sobre el fotograma 15. Para ello nos situamos en la capa 1, en el fotograma 15. Pulsamos el botón derecho del Mouse y seleccionamos Insertar fotograma clave. Podemos observar como, una vez realizada la operación, un nuevo círculo aparece en ese fotograma, indicando la presencia de otra imagen clave que será idéntica a la imagen de nuestro primer fotograma. Modificamos este nuevo fotograma clave. Para ello, situados en este fotograma, seleccionamos el objeto (u ocurrencia) y modificamos su posición y tamaño. La posición la modificamos empujándolo hacia arriba con la tecla del cursor o bien pinchando y arrastrando, como ya hemos visto antes. Para modificar el tamaño, seleccionaremos la herramienta transformación 60

61 libre. Una vez hecho esto, seleccionaremos la opción escalar, que nos permitirá bloquear las proporciones del objeto y reduciremos el tamaño de la esfera pinchando y arrastrando en uno de los puntos de las esquinas de la marca que rodea la esfera. La figura siguiente nos ilustra la tarea de redimensionamiento y nos da una idea del aspecto que debe tener el fotograma una vez modificado: A continuación vamos a crear el tercer y ultimo fotograma clave, correspondiente al momento en que la esfera esta a punto de completar el ciclo. Este fotograma debería en principio parecerse al primero con la diferencia de que la esfera no ha llegado a completar el ciclo, sino que esta de cera de conseguirlo. Realizaremos los siguientes pasos: Insertamos un fotograma clave vacío en el fotograma 29 (Insertar>Fotograma clave vacío) Volvemos al fotograma 1 y lo copiamos (Edición>copiar) Volvemos al fotograma 29 y lo pegamos (Edición>pegar) El resultado es un fotograma idéntico al 1 en el cual deberemos mover ligeramente la ocurrencia a la izquierda. 61

62 De modo que ya disponemos de las imágenes claves que definen la animación. Lo que necesitamos ahora es definir una trayectoria elíptica que las una. Esta trayectoria ha de ser definida en una capa especial llamada guía de movimiento. La guía de movimiento no es más que una capa que contiene una línea sobre la cual podemos colocar nuestros objetos de manera a que dicho objeto se mueva de una posición a otra respectando la trayectoria definida por esta línea. En nuestro caso, dado que lo que buscamos es una trayectoria cíclica, para no confundir al objeto definiremos dos líneas distintas, correspondientes a cada media vuelta. Si no tomásemos esta precaución, el objeto tendría dos posibles sentidos para llegar a una misma posición. Pasemos pues a definir estas líneas: Creamos la guía de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos creado nuestras imágenes clave) y hacemos Insertar>guía de movimiento. Constatamos la aparición de una nueva capa llamada Guía: Capa 1 (ver figura). Seleccionamos el primer fotograma de esta nueva capa y dibujamos una elipse sin relleno. Podemos servirnos de la herramienta óvalo utilizada para la creación de la esfera, pero esta vez no elegimos ningún color en la paleta de relleno (la ausencia de color viene simbolizada por un cuadro blanco barrado en diagonal por una banda roja). El resultado es una figura tal que esta: 62

63 Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y la cortamos (Edición>cortar). El resultado es la obtención de una semielipse. Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un fotograma clave vacío (Insertar>fotograma clave vacío) Pegamos la otra media elipse, que se quedará descolocada con respecto a la otra. Para ajustar las semielipses podemos por supuesto hacerlo a ojo pivotando entre el fotograma 14 y el 15 hasta que las dos se solapen correctamente. Sin embargo, una opción más interesante es la de usar le edición simultanea de varios fotogramas. Esta opción, disponible en la línea de tiempo (ver figura), nos permite la visualización y edición simultanea de varios fotogramas. De este modo, podemos seleccionar una de las semielipses y moverla por medio de los cursores hasta hacerla coincidir con la otra media. Deseleccionaremos este modo una vez finalizada la operación. 63

64 Llegados a este punto, podemos comenzar a definir la primera media vuelta de la esfera. Para generar el movimiento existente entre los fotogramas clave, hemos de crear lo que se denomina una interpolación de movimiento. Como ya hemos dicho, eso es algo que Flash calcula automáticamente, evitándonos la modificación sistemática de cada uno de lo fotogramas intermedios que forman parte de la secuencia. Para crear la interpolación de movimiento, seleccionaremos los fotogramas de la capa 1y haremos: Insertar>Crear interpolación de movimiento. Hecho esto, podremos constatar la aparición en la capa 1de una flecha entre el fotograma 1 y 15 y otra entre el 15 y el 29. Si ahora nos colocamos en alguno de los fotogramas intermedios, veremos que la imagen que contiene no es la misma que la de los fotogramas clave 1 o 15, sino un intermedio de posición y tamaño entre ellas. Como puede verse, el objeto se desplazaría desde 1 hasta 15 y seguidamente de 15 a 29 siguiendo una línea recta. Para obligarlo a adoptar una trayectoria elíptica como la definida en la guía de movimiento, tendremos que localizarnos en cada una de las imágenes clave (1, 15 y 29) y, usando la herramienta flecha, colocaremos el centro del objeto sobre la línea de la elipse en cada una de las extremidades correspondientes. 64

65 Podemos comprobar que el objeto esta bien colocado en la trayectoria si al intentar moverlo fuera de la línea, vuelve a colocarse automáticamente sobre ella. Llegados a este punto, ya solo nos queda ocultar la capa de la trayectoria. Esto puede hacerse seleccionándola y pinchando sobre el punto que se encuentra bajo el ojo. El punto se convierte en una cruz, que significa que la capa no es visible, aunque por supuesto sigue existiendo. Ya tenemos construida la animación. Para probarla rápidamente podemos hacer: Control>Probar escena Veremos como hemos saltado a otra nueva ventana que nos muestra la escena creada, tal y como la veríamos en realidad. Esta ventana nos ofrece múltiples posibilidades que ya abordaremos en otros capítulos. No obstante, os aconsejamos el echar un vistazo al tipo de opciones que propone. Cómo hacer botones en Flash Aprenderemos a crear botones y cómo enlazarlos con nuestros archivos o con otras paginas web, que no estén en nuestro servidor. Flash, nos permite crear botones personalizados, de manera muy rápida; a la vez nos ayuda a darle mas vida a nuestras páginas web; en pocas palabras, nos ayuda a hacer más atractivo nuestro sitio y lógicamente eso es lo que queremos para aumentar el número de visitas a nuestro website. Por medio de lenguajes de programación (por ejemplo Javascript), también podríamos crear botones, pero sería un poco más complicado; además no podríamos crear exactamente los mismos efectos que podemos hacer con Flash. 1- Primero crearemos un nuevo símbolo, haciendo la siguiente combinación de teclas: CONTROL +F8. Aparecerá el siguiente cuadro: 65

66 2- En Nombre escribe "botón 1", en Comportamiento) selecciona la opción Botón finalmente haz clic en Aceptar (OK). Automáticamente, seremos enviado desde la Escena 1 al escenario del símbolo "botón 1"; ahí es donde crearemos un botón que será incluido en nuestra biblioteca. El escenario únicamente para la creación de botones, será parecido a la siguiente imagen: Hacia la línea del tiempo (Timeline), como puedes notar es diferente a la línea del tiempo de la Escena 1. La línea del tiempo, del escenario para crear botones es parecida a la siguiente imagen: Expliquemos el gráfico anterior: Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados de un botón. Veamos a continuación, qué representa cada estado. Reposo: es cuando el mouse no está colocado sobre nuestro botón o no se ha hecho clic sobre él. 66

67 Sobre: es cuando el mouse está colocado sobre el botón, pero aún no se ha hecho clic sobre él. Presionado: lógicamente, es cuando haces clic sobre el botón. Zona Activa: su mismo nombre lo indica, es cuando el botón está activo. Continuemos con la creación de nuestro "botón 1". La cabeza lectora, en la línea del tiempo tiene que estar señalando el estado de Reposo. 4- Haz clic sobre la Herramienta de Rectángulo (Rectangle Tool), que se encuentra en el Panel de Herramientas. 5- Dibuja un rectángulo en el centro del área de trabajo, y ponle el color azul. 6- Después presiona la tecla F6; ésto hará que la cabeza lectora en la línea del tiempo pase al estado Sobre. Como podrás notarlo, el botón se copia, así que no necesitarás hacer un nuevo dibujo. 7- Aún estamos en el estado Sobre, si no tienes seleccionado el botón, hazlo (con la Herramienta Flecha y haz doble clic sobre nuestro dibujo), luego dirígete a Color de Relleno que se encuentra en la sección colores del Panel de Herramientas, y escoge el color rojo, como se muestra a continuación: 8- Después presiona nuevamente la tecla F6, para que la cabeza lectora pase al estado Presionado, y cambia el color de relleno de la misma forma que lo hicimos en el paso 7; y escoge un color verde. Finalmente presiona por ultima vez F6 para pasar al estado Zona activa, ésto hará que se copie el botón. Para este último estado, no es realmente necesario cambiar el color de fondo. Con los colores que hemos aplicado, haremos que el botón cambie de color, cuando se lleven a cabo los Estados de los botones anteriormente descritos. Nuestro botón ha sido creado, así que puedes volver a la Escena 1, abre la biblioteca y verás que ahí esta el símbolo llamado "botón 1", podrás arrastrarlo al escenario las veces que quieras para hacer varias copias de él. 67

68 Toma la Herramienta de Texto (A), y escribe lo que desees, después coloca el texto sobre el botón creado; para probar la película haz la tradicional combinación de teclas CTRL + Enter. Si después quieres ver la película en tu explorador de internet, únicamente presiona las teclas CTRL + F12. Enlazar páginas web por medio de botones Flash Si creamos botones, lógicamente es por que queremos enlazarlos con otras páginas web en nuestro servidor, o páginas web en otros servidores. Para este capítulo necesitaremos el botón que creamos en el capítulo anterior. Para hacer los enlaces o links, debemos utilizar el panel de Acciones de Flash. Para poder visualizar dicho panel, dirígete al menú principal y haz clic en Ventana > Acciones. Aparecerá la siguiente imagen: El panel de Acciones, nos servirá para trabajar con ActionScript. Qué es ActionScript?, es el lenguaje de creación de scripts de Flash. Puede utilizar ActionScript para controlar objetos en las películas de Flash con el fin de crear elementos interactivos y de navegación, y para ampliar Flash con el fin de crear películas altamente interactivas y aplicaciones Web. En otras palabras, ActionScript es el lenguaje de programación utilizado por Flash. 1- Desde la biblioteca de Flash, arrastramos a la Escena 1 el botón creado en el capítulo anterior. Mantén el botón seleccionado, si no lo está, haz clic sobre él con la herramienta flecha. 2- En el menú principal, haz clic en Ventana > Acciones. 68

69 3- En el panel de Acciones, haz clic en la palabra Acciones (Actions), automáticamente se desplegará una especie de submenú en donde debes hacer clic en Explorador (Browser/Network), después haz doble clic en geturl. geturl es la acción que nos permitirá navegar entre páginas web, también permite pasar variables a otras aplicaciones en una URL definida. Un ejemplo de URL es 4- Como habrás notado, al hacer doble clic sobre geturl, arriba del cuadro que está a la derecha del panel de Acciones, aparecen los siguientes campos de texto: URL: aquí especificarás la dirección a la cual se enlazará el botón. Si vas a hacer un enlace con una página web dentro de tu servidor tienes que escribir el nombre del archivo, por ejemplo: nombre_de_archivo.html Si vas a hacer un enlace con una página web que no está dentro de tu servidor tienes que escribir mas el nombre del archivo, por ejemplo: Ventana: Éste es opcional (si quieres puedes dejarlo vacío). Especifica de qué forma será cargado el documento o fotograma. Las formas en que se cargarán son: _self: especifica el fotograma actual de la ventana activa. _blank: indica que la página se abrirá o cargará en una nueva ventana.. _parent: especifica el elemento principal del fotograma actual. _top: especifica el fotograma de nivel superior de la ventana actual. Variables: POST y GET, especifica la manera en que se enviará la información etc, se usa para formularios, así que en nuestro caso no son necesarias las variables; así que selecciona No enviar. Un ejemplo de cómo tendría que quedar el script en el cuadro derecho de el panel de Acciones es: on (release) { geturl(" "_blank"); } Enlaces flash 69

70 Por medio de botones hechos en Flash, podemos ejecutar nuestros programas de envío de correos electrónicos (Outlook por ejemplo), para enviar mensajes. (Tus programas de envío de correos electrónicos tienen que estar configurados e instalados correctamente) Cómo hacer ésto? 1- Creamos un botón. 2- Clic derecho sobre el botón > Acciones 3- Copia las siguientes acciones y pégalas en el panel de Acciones: on (release) { } Expliquemos lo anterior: on (release), es una acción utilizada únicamente para botones, e indica que la acción se ejecutará inmediatamente después de haber presionado y liberado el botón del Mouse. geturl: Acción; carga un documento de una URL específica en una ventana o pasa variables a otra aplicación en una URL definida. Mailto: método utilizado para enviar correos electrónicos. Prueba tu película (CTRL+Enter). Después puedes publicarla (en menú principal Archivo > Publicar). Máscara como Cursor Crea un Nuevo documento del tamaño que desees, nosotros usamos 300 * 400 px. Inserta una imagen a la escena Presionando Ctrl + R y acomódala en las cordenadas X = 0 y Y = 0 como lo muestra la imagen. 70

71 Luego inserta un Nuevo símbolo con Ctrl + F8, como clip de película. Dibuja la forma de la máscara como cursor. Y regresa a escena. Crea una Nueva Capa. Abre la biblioteca con F11 e inserta el clip de película. 71

72 Selecciona el clip de película y en la barra de propiedades Nómbralo, en este caso fue "cursor-mascara" como lo puedes ver en la imagen. Ahora selecciona el fotograma 1 de la capa 2 y en la barra de Acciones escribe el código que ves en la imagen abajo. 72

73 Para finalizar haz clic con el botón derecho del Mouse sobre el icono de la capa 2 y del menú emergente selecciona Máscara. Y Listo, ya tienes tu Máscara como Cursor. Para visualizar presiona Ctrl + Intro. CREAR SUBMENUS 73

74 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 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 automaticamente como Símbolo 1 con un Comportamiento de botón 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 74

75 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, fotograma 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. En el fotograma 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, fotograma 2 y ahí arrastra el Símbolo 1. Algunas veces, al no insertar adecuadamente el fotograma clave se pueden 75

76 insertar fotogramas extra que se eliminan seleccionando los fotogramas 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 fotograma 3 de la capa 3 y agrega nuevamente el símbolo 1 en el fotograma 3. Agrega el texto. Repetimos el procedimiento pero en este caso en una Capa 4 y Fotograma 4, tal cual se ve en la imagen. 76

77 Ahora que ya tenemos nuestros botones selecciona el fotograma 4 de las capas 3 y 2 e insertamos un fotograma Clave Presionando F6. Agrega una Nueva Capa, Capa 5 y en el fotograma 1 agrega un Stop. Selecciona el fotograma 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 fotograma 4. Luego escríbele otro Stop, que servirá para detener la animación una vez que sea desplegado el sub menú. 77

78 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 fotograma 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. 78

79 Selecciona la zona Activa (capa azul de la imagen) y en la barra de acciones agrega el código que vemos en la imagen. 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ú. 79

80 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. PRECARGADOR CON PORCENTAJE En esta ocasión haremos una Barra de Cargador con Porcentaje. Lo primero es presionar crear un Nuevo Simbolo, presionando Ctrl + F8 o desde el menú Insertar >> Nuevo Simbolo. Seleccionamos Clip de Pelicula, en este caso l con el nombre "cargador" como puedes ver en la imagen Siguiente paso es dibujar la barra que usarás como cargador en las cordenadas X=0 y Y=0. 80

81 El ancho y alto depende de tus necesidades. Recomendamos no usar borde, al menos mientras dominas la técnica. Selecciona la barra y presiona F8 o botón derecho del Mouse >> Convertir en Símbolo. Entonces hay que seleccionar Clip de Película y nombrar, en este caso lo llamamos "barra del cargador". Registro: El registro te indica la manera en la que se desplaza la barra del cargador durante la animación. En este caso se ha seleccionado el punto medio a la izquierda, lo cual da como resultado un desplazamiento de izquierda a derecha como tradicionalmente sucede. Prueba luego con los demás puntos. Selecciona la barra del cargador y en la barra de propiedades bajo "clip de película" ponemos "barra" que será el nombre que lleve en el código. Introduce un campo de texto debajo de la barra, el cual deberá ser Texto Dinámico y llamamos a la variable (var) "txt" todo nos queda mas claro con la imagen a la 81

82 derecha. Ten cuidado de hacer el campo de texto lo suficientemente amplio. Aquí mismo, sobre la barra de propiedades, puedes dar formato al texto. Volvemos a escena y entonces desde la Bibliiteca sacamos el clip Cargador. Selecciona el clip del cargador y abrimos la barra de Acciones, luego pegamos el código que vemos en la figura a continuación, y podemos ver los nombres de las distintas variables que hemos ido agregando al clip. Resulta lo que vemos en la imagen. 82

83 Sobre nuestra capa 1, frame 1, inserta un fotograma presionando F5 o con el menú Insertar >> Línea de tiempo >> Fotograma. Luego crea una segunda capa e insertar un fotograma clave en el frame 4 presionando F6. 83

84 Ahora selecciona el fotograma 1 de la capa 2 y agregas un "stop" en la barra de En el fotograma 4 de la capa 2 mete un "gotoandplay" y en el parentesis escribimos entrecomillado "inicio" para que cuando la carga termine lo lleve a un fotograma etiquetado con el nombre "inicio". Inserta una nueva capa, la número tres hasta ahora. Sobre la capa 3, frame 3, inserta un fotograma clave presionando F6 y etiquetalo 84

85 con el nombre de "inicio" desde la barra de propiedades, como lo vemos en la imagen a la derecha. Esta imagen es de la nueva XBOX 360, del juego Dead or Alive 4, el cual promete mucho a los fanáticos del mismo. Presiona Ctrl + R para importar tu imagen a la escena. 85

86 Hay que colocar la imagen en las cordenadas X=0 y Y=0, como vemos en la imagen. Para poder visualizar la animacion del cargador en tiempo real, como si ya estubiese en internet presiona un par de veces Ctrl + Enter. LEER ARCHIVO TXT EXTERNO El siguiente sistema es muy sencillo, y sirve para actualizaciones simples y rápidas de sitios flash desde archivos txt. Lo primero que debemos hacer es crear el archivo txt que será leído por el.swf y que podrá ser actualizado en cualquier momento sin necesidad de abrir el archivo fla. En este caso lo llamamos novedades.txt (usar solo mayúsculas o minúsculas, no combinar). Al inicio del txt coloca este código: rep=repetir&novedades= Inmediatamente después pega el texto que quieres mostrar. 86

87 Selecciona la herramienta de texto en la barra de herramientas, luego crea un campo de texto, en el cual se representará el texto que introduzcas en el archivo novedades.txt. En la Barra de Propiedades selecciona Texto Dinámico, Multilínea, Seleccionable y en el campo Var (variable) escribir novedades. Finalmente dale el Formato a tu texto. Abre la barra de Acciones vía: Ventana > paneles de Desarrollo > Acciones o presionando F9. 87

88 Ahora haz clic sobre el frame 1 de la capa 1 para seleccionarlo, y en las acciones escribe el siguiente código: loadvariablesnum("novedades.txt", 0); En la imagen a la derecha puedes ver donde. Guarda tu documento. Presiona Ctrl + Enter para ver el resultado final. Desde ahora para cambiar ese texto solo deberás editar el archivo novedades.txt. MACROMEDIA FLASH ACTIONSCRIPT Actionscript.- es un lenguaje de programación que permite crear scripts para la ejecución de una película Elementos a programar: Botones símbolos fotogramas clave componentes Sintaxis: Botones: on(evento)"accion provocada por el usuario" 88

89 { sentencias- acciones } Clip de pelicula: onclipevent(evento) { sentencias } Fotogramas Clave: Sentencias Componentes: on(evento) { sentencias } ACCIONES BASICAS existen un grupo de acciones denominadas básicas q generalmente se encargara de controlar la línea de tiempo principal estas acciones se pueden utilizar en los fotogramas, dentro de los botones o en los movie clips generalmente son llamados acciones de control de línea de tiempo y estas son: play();.-esta acciones permite seguir ejecutando la película a partir del punto donde se a quedado stop();}.- detiene el cabezal de la película en un determinado fotograma prevfotograma();.-lleva el control de la película al fotograma anterior nextfotograma();.- lleva el control de la película al siguiente fotograma gotoandplay();.- lleva el control a un fotograma especifico y a partir de esa posición ejecuta la película 89

90 stopandstop();.- lleva y detiene el control en un determinado fotograma stopallsounds();.- apaga cualkier sonido q se este ejecutando TRABAJAR CON LOS EVENTOS DEL MOUSE Los eventos son las acciones q vamos a realizar con el botón principal del Mouse o el teclado para que cierto comando de actionscrip se ejecute al producirse dicho evento los eventos solo podrán aplicarse a los objetos de tipo botón y estos son: 1. press: este significa que la acción se va a ejecutar a la simple pulsación de botón del Mouse. 2. release: este evento significa q debemos pulsar el botón del Mouse y soltarlo para q la acción recién se ejecute. 3. release outside: este evento se ejecutara al presionar el Mouse y soltarlo fuera del botón 4. key Press: en este evento nosotros debemos pulsar una tecla 5. rollover:evento: que se ejecutara cuando el Mouse esta sobre el botón 6. rollout: evento que se ejecuta cuando el Mouse este fuera del botón 7. dragover: Este evento se ejecutara al arrastrar el Mouse sobre el botón 8. dragout: arrastrar fuera del botón SENTENCIAS: Controlar el Flash Player FSCommand(propiedad,valor) a. fullscreen.- pantalla completa b. allowscale.- escala de película c. Showmenu.- barra de menu Reproducir/detener pelicula play().- reproducir 90

91 stop().- detener -Ir a un fotograma clave y detenerse gotoandstop(#) #=fotograma clave -Ir a un fotograma clave y reproducir gotoandplay(#) -Ir a un fotograma clave de una escena y detenerse gotoandstop("escena",fotograma clave) -Ir a un fotograma clave de una escena y reproducir gotoandplay("escena",fotograma clave) -Cargar una pagina web geturl("direccion url o archivo html", destino) SENTECIAS DE CONTROL if(condicion){ sentencias} if(condicion){ sentencias1} else{ sentencias2} if(condicion){ sentencias }else if(condicion){ sentecias2 }else if(condicion){ sentecias3 } : 91

92 else{ sentencias n } FORMULARIOS: interfaz grafica 1.- mediante la herramienta Texto 2.- mediante componentes 1.- TEXTO: Texto estático.- etiquetas (valores fijos) Texto dinámico.- valores variables Introducción de texto.- caja de texto para introducir datos Validar El Usuario De Una Caja De Texto usar propiedad Var: variable(posición de memoria q temporalmente almacena un valor) para la contraseña usar la propiedad del tipo y ponerle contraseña desactivar el check ajuste automatico Programando El Usuario Sobre El Boton on(release){ if(user=="sidem"){ //operador de comparación es doble igual gotoandstop(15) }else{ gotoandstop(30) } } Operadores logicos: && --> Y 92

93 --> O (linea vertical)! --> Negación Comentarios // una linea /* un bloque */ Programando Dos Condiciones Sobre El Botón if(usuario=="sidem"){ if(clave=="flash"){ gotoandstop(15) //salta al fotograma 15 y se detiene }else{ gotoandstop(45) //salta al fotograma 45 y se detiene } }else{ gotoandstop(30) //salta al fotograma 30 y se detiene } } Capturar El Nombre Del Usuario Ingresado En La Caja De Texto Correspondiente En cada fotograma clave cambiar el texto estático por texto dinámico y asignarle una variable a cada una Quitar la propiedad seleccionable <Ab> y el ajuste automático. Luego ingresar la siguiente programación: if(usuario=="sidem"){ if(clave=="flash"){ gotoandstop(15) //salta al fotograma 15 y se detiene 93

94 msg1="bienvenido "+usuario //concatena en la variable msg1 con el usuario ingresado }else{ gotoandstop(45) //salta al fotograma 45 y se detiene msg3=usuario+" Tu clave es incorrecta" } }else{ gotoandstop(30) //salta al fotograma 30 y se detiene msg2=usuario+" No estas Registrado" } } FUNCIONES: tolowercase().- convierte una cadena a minusculas Sintaxis: objeto.tolowercase() touppercase().- convierte una cadena a mayusculas Sintaxis: objeto.touppercase() SENTENCIAS CONDICIONAL MULTIPLE: switch(condicion){ case valor1: sentecias break case valor2: sentencias 94

95 break case valor3: sentencias break. : default: sentencias } Ejemplo validación de múltiples usuarios sobre un botón: on(release){ x=usuario.tolowercase()//almacena el valor del usuario en x switch(x){//reemplazamos el usuario por la variable x case"miguel": if(clave=="flash"){ geturl(" }else{ gotoandstop(45) msg3=usuario+" tu clave es incorrecta" } break case"rosa": if(clave=="script"){ geturl(" }else{ gotoandstop(45) 95

96 msg3=usuario+" tu clave es incorrecta" } break case"manuel": if(clave=="action"){ geturl(" }else{ gotoandstop(45) msg3=usuario+" tu clave es incorrecta" } break default: gotoandstop(30) msg2=usuario+" No esta registrado" } } PROPIEDADES A UN CLIP DE PELICULA Establecer: Dimensiones de un clip (_xscale(ancho), _ysacle(alto)) La transparencia (_alpha) La Rotación (_rotation) Posición Horizontal y Vertical (_x, _y) Visibilidad 96

97 (_visible) Estas propiedades se aplican a través de la sentencia setproperty que establece una propiedad Sintaxis: setproperty("instancia_clip", propiedad, valor) Ejemplo 1. - Dibujar o importar un objeto - Convertirlo en simbolo (clip de película) - Asignar un nombre de instancia, mediante el panel propiedades - En el fotograma 1 presionar F9 setproperty("celular",_alpha,50) Ejemplo 2. - Dibujar o importar un objeto - Convertirlo en simbolo (clip de película) - Asignar un nombre de instancia, mediante el panel propiedades - crear los botones correspondientes - seleccione el boton flecha adelante y presione F9 on(release){ setproperty("auto",_x,300) } Seleccione el botón flecha atrás y presione F9 on(release){ 97

98 setproperty("auto",_x,50) } Seleccione el botón flecha arriba y presione F9 on(release){ setproperty("auto",_y,50) } Seleccione el botón flecha arriba y presione F9 on(release){ setproperty("auto",_y,450) } Seleccione el botón + y presione F9 on(release){ setproperty("auto",_xscale,500) setproperty("auto",_yscale,400) } Seleccione el botón - y presione F9 on(release){ setproperty("auto",_xscale,100) setproperty("auto",_yscale,100) } Funcion getproperty.- obtiene el valor de una propiedad Sintaxis: getproperty("instancia_clip", propiedad) Ejemplo: on(release){ 98

99 setproperty("auto",_xscale,getproperty("auto",_xscale)-10) setproperty("auto",_yscale,getproperty("auto",_yscale)-10) } Para imprimir las medidas del objeto, crear dos textos dinámicos y asignarles un nombre de variable Ejemplo: on(release){ setproperty("auto",_xscale,getproperty("auto",_xscale)+10) setproperty("auto",_yscale,getproperty("auto",_yscale)+10) an=getproperty("auto",_xscale) al=getproperty("auto",_yscale) } Hacer lo mismo para imprimir la posición horizontal y vertical Ejemplo: on(release){ setproperty("auto",_y,getproperty("auto",_y)-5) x=getproperty("auto",_x) //posición Horizontal y=getproperty("auto",_y) //posición vertical } Para que al iniciar la película se capture las medidas y posición en los textos dinámicos Hacer un clic en el Fotograma 1 y presionar F9 an=getproperty("auto",_xscale) al=getproperty("auto",_yscale) x=getproperty("auto",_x) y=getproperty("auto",_y) 99

100 Ejemplo de botones y mapa 1- importar las tres imágenes al escenario 2- las tres imágenes deberán estar en la misma posición 3- convertir cada imagen en símbolo 4- asignar un nombre de instancia a cada símbolo 5- dibujar tres botones uno por cada imagen En el fotograma 1 presionar F9 setproperty("tumbes",_visible,false) setproperty("ancash",_visible,false) Programando el botón Tumbes (realizar la misma operación con los demás botones cambiando en estado de visible según corresponda) on(release){ setproperty("tumbes",_visible,true) setproperty("lima",_visible,false) setproperty("peru",_visible,false) setproperty("ancash",_visible,false) } setproperty("lima",_visible,false) SROLL 1- Genere un texto dinámico y aplique la propiedad multilínea y el comando desplazamiento permitido del menú texto 2- Digite un texto 3- Asigne un nombre de instancia 4- Dibuje dos botones para el scroll Digitar el siguiente código para el botón hacia arriba 100

101 on(release){ scroll1.scroll=scroll1.scroll-1 } Digitar el siguiente código para el botón hacia abajo on(release){ scroll1.scroll=scroll1.scroll+1 } Mediante Variable 1- En el Fotograma1 presionar F9 Mensaje="escribir el mensaje como una variable sin presionar Enter" 2- Genere un texto dinámico y aplique la propiedad multilínea y el comando desplazamiento permitido del menú texto 3- Asígnele un nombre de instancia Ej.(scroll2) 4- asígnele un nombre de Variable en la propiedad Var el mismo nombre que se declaro en el fotograma 1 5- Dibujar los botones y programarlos on(release){ scroll2.scroll=scroll2.scroll-1 // para subir el texto es } Mediante Txt Externo Estructura: variable1=texto & variable2=texto & variable n=texto 1- Generar un texto dinámico con la propiedad multilínea y desplazamiento permitido 101

102 2- Asignar como variable el mismo texto con el cual empezó el archivo txt 3- asignar un nombre de instancia y programar los botones del scroll on(release){ scroll3.scroll=scroll3.scroll+1// para bajar el texto es + } - crear un txt externo donde se colocara la pagina de inicio que se usara o dirección URL - ir al fotograma 1 y presionar F9 loadvariablesnum("enlace.txt",0) -Crear un Botón y programarlo: on(release){ geturl(x,_blank) } INTERACTUAR CON PELICULAS SWF loadmovienum: carga una pelicula swf Sintaxis loadmovienum("archivo.swf",nivel) unloadmovienum: descarga una película de memoria Sintaxis unloadmovienum(nivel) Ejemplo: on(release){ 102

103 loadmovienum("pelicula1.swf",1) //carga la pelicula1 en el nivel de memoria 1 * el cero esta ocupado por la película original unloadmovienum(2) //descarga el nivel de memoria 2 donde se carga la película 2 unloadmovienum(3) //descarga el nivel de memoria 3 donde se carga la película 3 } FUNCION isnan.- evalua si el valor ingresado es un texto o no. Sintaxis: isnan(expresión) referencia a la caja de texto FUNCION Number.- convierte un texto a un número Sintaxis: Number(expresión) Ejemplos: Botón calcular: on(release){ z=number(x)+number(y) } Botón Validar: on(release){ if(isnan(x)&&(isnan(y))){ gotoandstop(15)} } 103

104 Nota.- Desactivar siempre la opción ajuste automático en los textos con propiedad de introducción de texto XML (lenguaje de marcacion extensible) es un metalenguaje que permite definir y/o describir sus etiquetas Permite crear sus propias definiciones de tipo de documento (DTD'S), distingue mayúsculas de minúsculas Estructura (.xml) <?xml version="1.0" encoding="iso "?> Definición de la estructura Aplicación BD( access, SQL, Oracle) > Internet Explorer > (.html)---solicita-->.asp,.jps,.php -->BD( access, SQL, Oracle) Cliente <---Responde---Servidor Mediante XML (.html) > Internet cliente Visualiza Explorer Consulta Imprime A -- Envia --> B---visualiza, consulta imprime--> Internet Explorer Ejemplo: Definir una estructura xml en el bloc de notas para una tabla productos <?xml version="1.0" encoding="iso "?> <productos> <registro> <codigo>a001</codigo> <Nombre>DVD</Nombre> <cantidad>25</cantidad> 104

105 <precio>50</precio> </registro> <registro> <codigo>a002</codigo> <Nombre>TV 21</Nombre> <cantidad>52</cantidad> <precio>320</precio> </registro> <registro> <codigo>a003</codigo> <Nombre>MINI COMPONENTE</Nombre> <cantidad>63</cantidad> <precio>256</precio> </registro> <registro> <codigo>a004</codigo> <Nombre>LAPTOP</Nombre> <cantidad>15</cantidad> <precio>956</precio> </registro> </productos> ahora crear un documento Html donde se llame a esta tabla <html><head><title>lista de articulos</title></head> <body> <xml src="articulos.xml" id="datos"> *llama al documento xml 105

106 </xml> <table datasrc="#datos"> * usar el id <thead> <th>codigo</th> <th>nombre</th> <th>cantidad</th> <th>precio</th> </thead> <tbody> <tr> <td><span datafld="codigo"> * llama al campo creado en el doc. xml esribirse tal y como fue declarado </span> </td> <td><span datafld="nombre"> </span> </td> <td><span datafld="cantidad"> </span> </td> <td><span datafld="precio"> </span> </td> </tr> </tbody> </table> </body> 106

107 Al exportar un base de datos de Access o cualquier base de datos solo hay que editar la 2da. línea de código para q funcione DEFINICION DE TIPO DE DOCUMENTO (DTD'S) estructura formal de un documento Sintaxis: <!DOCTYPE nombre[ <!ELEMENT nombre (campo1, campo2, campo n)> *espacio detrás del paréntesis <!ELEMENT campo1 (#PCDATA)> *reserva espacio de memoria para ese campo <!ELEMENT campo2 (#PCDATA)> <!ELEMENT campon (#PCDATA)> ]> <nombre> <campo1>dato1...</campo1> <campo2>dato2...</campo2> <campon>daton...</campon> </nombre> Ejemplo: <?xml version="1.0" encoding="iso "?> <!DOCTYPE empleados[ <!ELEMENT empleados (codigo,nombre,cargo)> <!ELEMENT codigo (#PCDATA)> <!ELEMENT nombre (#PCDATA)> <!ELEMENT cargo (#PCDATA)> ]> <empleados> 107

108 <codigo>a-01</codigo> <nombre>juan</nombre> <cargo>programador</cargo> <codigo>a-02</codigo> <nombre>miguel</nombre> <cargo>contador</cargo> <codigo>a-03</codigo> <nombre>carlos</nombre> <cargo>administrador</cargo> <codigo>a-04</codigo> <nombre>maria</nombre> <cargo>secretaria</cargo> <codigo>a-05</codigo> <nombre>fiorella</nombre> <cargo>asistente</cargo> </empleados> Para una mejor organización hay que crear un archivo DTD con la estructura para luego llamarlo en un xml Ejemplo.- crear esta estructura en el bloc de notas y guardarlo como estructura.dtd <?xml version="1.0" encoding="iso "?> <!ELEMENT empleados1 (codigo,nombre,cargo)> <!ELEMENT codigo (#PCDATA)> <!ELEMENT nombre (#PCDATA)> <!ELEMENT cargo (#PCDATA)> Ahora crear un documento xml que llame la estructura dtd ejemplo: <?xml version="1.0" encoding="iso "?> 108

109 <!DOCTYPE empleados1 SYSTEM "estructura.dtd"> <empleados1> <codigo>a-01</codigo> <nombre>juan</nombre> <cargo>programador</cargo> <codigo>a-02</codigo> <nombre>miguel</nombre> <cargo>contador</cargo> <codigo>a-03</codigo> <nombre>carlos</nombre> <cargo>administrador</cargo> <codigo>a-04</codigo> <nombre>maria</nombre> <cargo>secretaria</cargo> <codigo>a-05</codigo> <nombre>fiorella</nombre> <cargo>asistente</cargo> </empleados1> DREAMWEAVER ACCESO A BASE DE DATOS PAGINAS WEB DINAMICAS Elección de una tecnología de servidor Puede utilizar Dreamweaver para crear aplicaciones Web mediante cualquiera de las cinco tecnologías de servidor: ColdFusion, ASP.NET, ASP, JSP o PHP. Cada una de estas tecnologías corresponde a un tipo de documento en Dreamweaver. La elección de una de ellas para una aplicación Web depende de diversos factores, 109

110 entre los que se encuentran su nivel de conocimiento de los diversos lenguajes de scripts y el servidor de aplicaciones que vaya a utilizar. Si es la primera vez que desarrolla una aplicación Web o una aplicación en general, es probable que prefiera ColdFusion, pues proporciona un entorno de scripts de servidor fácil de aprender y que está plenamente integrado en Dreamweaver. Si conoce otras tecnologías de servidor, como JSP, PHP, ASP o ASP.NET, Dreamweaver ofrece un excelente soporte para todas ellas. La tecnología de servidor que seleccione también depende del servidor de aplicaciones que vaya a utilizar para su aplicación Web. Un servidor de aplicaciones es un software que ayuda al servidor Web a procesar las páginas que contienen scripts o etiquetas del lado del servidor. Por ejemplo, si tiene ColdFusion MX Server, puede seleccionar ColdFusion como su tecnología de servidor. Si tiene acceso a un servidor que ejecuta Microsoft Internet Information Server 5 (IIS) con.net Framework, puede elegir ASP.NET. Puede utilizar PHP si tiene acceso a un servidor Web con un servidor de aplicaciones PHP, o JSP si tiene acceso a un servidor Web con un servidor de aplicaciones JSP (como Macromedia JRun). Procesamiento de páginas Web estáticas Un sitio Web estático consta de un conjunto de páginas y de archivos HTML relacionados alojados en un equipo que ejecuta un servidor Web. Un servidor Web es un software que suministra páginas Web en respuesta a las peticiones de los navegadores Web. La petición de una página se genera cuando el usuario hace clic en un vínculo de una página Web, elige un marcador en un navegador o introduce un URL en el cuadro de texto Dirección del navegador. 110

111 El contenido final de una página Web estática lo determina el diseñador de la página y no cambia cuando se solicita la página. He aquí un ejemplo: <html> <head> <title>página informativa de Trio Motors</title> </head> <body> <h1>acerca de Trio Motors</h1> <p>trio Motors es un fabricante líder de automóviles.</p> </body> </html> El diseñador escribe todas y cada una de las líneas de código HTML de la página antes de colocarla en el servidor. El código HTML no cambia una vez colocado en el servidor y por ello, este tipo de páginas se denomina página estática. Nota: en sentido estricto, una página "estática" puede no ser estática en absoluto. Por ejemplo, una imagen de sustitución o contenido de Flash (un archivo SWF) puede hacer que una página estática tome vida. No obstante, en esta guía se habla de página estática cuando ésta se envía al navegador sin modificaciones. Cuando el servidor Web recibe una petición de una página estática, el servidor lee la solicitud, localiza la página y la envía al navegador solicitante, como se muestra en la siguiente figura: 111

112 En el caso de las aplicaciones Web, algunas líneas de código no están determinadas cuando el usuario solicita la página. Estas líneas deben determinarse mediante algún mecanismo antes de enviar la página al navegador. En la siguiente sección se describe dicho mecanismo. Procesamiento de páginas dinámicas Cuando un servidor Web recibe una petición para mostrar una página Web estática, el servidor la envía directamente al navegador que la solicita. Cuando el servidor Web recibe una petición para mostrar una página dinámica, sin embargo, reacciona de distinta forma: transfiere la página a un software especial encargado de finalizar la página. Este software especial se denomina servidor de aplicaciones. El servidor de aplicaciones lee el código de la página, finaliza la página en función de las instrucciones del código y elimina el código de la página. El resultado es una página estática que el servidor de aplicaciones devuelve al servidor Web, que a su vez la envía al navegador solicitante. Lo único que el navegador recibe cuando llega la página es código HTML puro. A continuación se incluye una vista de este proceso: 112

113 Acceso a una base de datos Un servidor de aplicaciones le permite trabajar con recursos del lado del servidor, como una base de datos. Por ejemplo, una página dinámica puede indicar al servidor de aplicaciones que extraiga datos de una base de datos y los inserte en el código HTML de la página. Para más información, consulte el apéndice "Guía de bases de datos para principiantes" en el apartado Utilización de Dreamweaver de la Ayuda. La instrucción para extraer datos de una base de datos recibe el nombre de consulta de base de datos. Una consulta consta de criterios de búsqueda expresados en un lenguaje de base de datos denominado SQL (Structured Query Language, lenguaje de consulta estructurado). La consulta SQL se escribe en los scripts o etiquetas del lado del servidor de la página. Un servidor de aplicaciones no se puede comunicar directamente con una base de datos porque el formato propietario de esta última impide que se descifren los datos, de una forma bastante similar a cuando la información de un documento de Microsoft Word abierto en el Bloc de Notas o BBEdit queda ininteligible. El servidor de aplicaciones sólo se puede comunicar con la base de datos a través de un controlador que actúe de intermediario con la base de datos: el software actúa entonces como un intérprete entre el servidor de aplicaciones y la base de datos. 113

114 Una vez que el controlador establece la comunicación, la consulta se ejecuta en la base de datos y se crea un juego de registros. Un juego de registros es un conjunto de datos extraídos de una o varias tablas de una base de datos. El juego de registros se devuelve al servidor de aplicaciones, que emplea los datos para completar la página. A continuación se ofrece una consulta de base de datos sencilla escrita en SQL: SELECT apellidos, nombre, puntos FROM empleados Esta instrucción crea un juego de registros de tres columnas y lo completa con filas que contienen el apellido, el nombre y los puntos de forma física de todos los empleados de la base de datos. A continuación se ofrece una ilustración del proceso de consulta de base de datos y de devolución de los datos al navegador. 114

115 Aplicación dinámica (Página dinámica) Pagina Dinámica.jsp.asp.other, php Respuesta Servidor de Aplicaciones PWS IIS Apache Juego de Registros Base de Datos Access SQL MySQL Petición COMPROBAR INSTALACION IIS: Caso 1: buscar carpeta c:\inetpub Caso 2: Ir al panel de control > Agregar quitar programas verificar IIS Ir a Herramientas administrativas Caso 3: abrir cualquier ventana de Internet y escribir localhost 115

116 ESTABLECER SITIO Crear datos remotos Pasos: 1. Establecer datos local 2. Establecer datos remotos a. hacer clic en datos remotos en acceso elegir local/red b. establecer carpeta remota c. activar los tres primeros checks Nota: si la página es aspvbscript es Access Si la página es aspjavascript es SQL 3- Establecer servidor de prueba En modelo de servidor elegir la página y el servidor En acceso colocar local/red, se mostrara la ruta de nuestro servidor de prueba 116

117 Aceptar Crear una hoja aspvbscript Tip para access.- se recomienda nunca cerrar el primer archivo(pagina guardada) Crear la pagina probarla a cualquier mensaje responder si Nuestra base de datos debe de estar guardada en nuestra carpeta Remota (servidor de prueba) CONEXION A BD CON ACCESS Pasos: 1. ir al panel de aplicación > categoría base de datos 2. presionar el botón + 3. elegir nombre de fuente de datos(dsn) 4. aparece una ventana configurarla como se muestra en la figura 117

118 5. hacer clic en definir y hacer clic en la pestaña DSN de sistema 6. clic en agregar y definir el controlador para access Microsoft access driver 118

119 7. aparece la ventana configuración de ODBC access configurela como se muestra en la figura, seleccionando la BD de la carpeta remota 8. Elegir el DNS presionar prueba y Aceptar finalmente Crear Juegos de Registros Para cada hoja que se tiene que actualizar hay que crear un juego de registros Pasos: 1. ir al panel aplicación > categoría Vinculaciones 2. presionar el + y elegir juego de registros (consulta) y configurarla y aceptar como se muestra en la figura 119

120 Pagina clientes 1. insertar una tabla de 2 X 2 2. Ubicar el cursor en la celda donde se insertara la consulta 3. seleccionar la consulta del juego de registros 4. presionar insertar del panel 5. seleccionar la fila 6. ir a la pestaña comportamientos de servidor > Repetir Región aparece una ventana 120

121 Conexión a BD con SQL Pasos: 1. ir al panel de aplicación > categoría base de datos 2. presionar el botón + 3. elegir nombre de fuente de datos(dsn) Aparece una ventana configurarla como se muestra en la figura Aparece esta ventana 121

122 Configurara Siguiente 122

123 Clic En Finalizar Probar y aceptar Dos veces 123

124 Paginación de juego de registros 1. ubicar el cursor en el lugar a insertar 2. ir al menú insertar >objeto de aplicación > paginación de Juego de reg > barra de navegación de Juego de Reg. Crear una bd SQL Inico>Programas>Sql Server>Administrador Corporativo Insertar Registros Pasos para mostrar: 1. crear juego de registros 2. insertar tabla dinamica pasos para Pág. Insertar 1. crear juego de registros 2. insertar formulario 3. insertar tabla 4. insertar campos de texto 5. Insertar Botón 6. seleccionar formulario 7. ir al menú insertar > objetos de aplicación >insertar registros> insertar registro 8. aparece esta ventana 9. validar cada uno de los campos con las cajas de texto correspondientes 124

125 Utilizando el asistente de formularios de juego de registros 1. crear juego de registros 2. insertar> Objetos de aplicación> insertar Registros> Asistente de formulario de inserción de Registros 3. configurar la ventana como se muestra en la figura Actualización de registros Pasos: 1. crear juego de registros 2. insertar> Objetos de aplicación> Actualizar Registros> Asistente de formulario de actualización de Registros 3. configurar la ventana como se muestra en la figura 125

126 4. insertar una barra de navegación Maestros Insertar fotos 1. abrir la BD 2. ingresar la ruta en la BD 3. ej: fotos\imagen1.jpg 4. en la pagina ASP insertar una imagen clic en Insertar>objetos de imagen>marcador de posición de imagen 5. vincular la consulta a la imagen 6. subir los archivo en el panel archivos de manera manual Creación de pagina Maestro detalle Se utilizan dos archivos un maestro y un detalle Crear la página detalle: 1. Abrir un archivo nuevo aspjavascript 2. guardar el archivo detalle Crear la página Maestro: 3. Abrir un archivo nuevo aspjavascript 4. guardar el archivo maestro 5. crear juego de registros 6. menú insertar>objetos de aplicación >juego de pagina maestro detalle 126

127 7. aparecerá esta ventana elegir los que no quiera mostrar y eliminar los que no quiere mostrar en maestro 8. Nota siempre se publica desde la pagina Maestro Autentificación de usuario-contraseña Crear pagina de error Crear pagina correcta Crear pagina de inicio. Debe constar de un formulario Insertar>Objetos de aplicación >autentificación de usuarios >conectar usuario 127

128 Desconectar usuario 1. ubicarse en la pagina de bienvenida 2. ubicar el cursor donde se insertara el vinculo 3. ir al menú insertar> objeto de aplicación>autentificación de usuarios>desconectar usuario Búsqueda simple: crear dos paginas (búsqueda y respuestas) Crear la página respuesta 1. abrir un archivo nuevo 2. guardar archivo 3. crear juego de registros 128

129 4. elegir el campo, elegir el filtro (=, que inicie, q termine, q contenga) 5. seleccionar Variable de formulario en el cuadro combinado 6. nombre de la variable 7. aceptar 8. insertar tabla dinámica y mejorar aspecto Crear la pagina de búsqueda 1. abrir hoja 2. guardar pagina 3. insertar formulario 4. insertar tabla 5. insertar botón 6. seleccionar formulario ir al panel de propiedades 7. mediante acción enlacé a respuesta Caso B código SQL usar Begins with y hacer clic en avanzado SELECT EmployeeID, LastName, FirstName, BirthDate FROM dbo.employees WHERE FirstName si es igual SELECT EmployeeID, LastName, FirstName, BirthDate FROM dbo.employees 129

130 WHERE FirstName like MMcolParam% que comienze por Caso C: que termine SELECT EmployeeID, LastName, FirstName, BirthDate FROM dbo.employees WHERE FirstName like %MMcolParam Caso D: q contenga SELECT EmployeeID, LastName, FirstName, BirthDate FROM dbo.employees WHERE FirstName like %MMcolParam% Búsqueda avanzada Crear juego de registros Crear las páginas para respuesta y búsqueda. Nota: colocar el nombre de las cajas de texto en los lugares de Lastname y Firstname APLICACIÓN DINAMICA PHP 130

131 Carpeta Remota PHPdev www Remota_php Instalación de PHP /Apache Ejecutar instalador php Verificar si la carpeta Phpdev fue creada Instalar apache y desactivar IIS antes de crear algo con apache Ir al panel de control > herramientas administrativas>servicios Detener IIS clic en Si Activar el Apache: Inicio > archivos de Programa>Phpdev> phpdev_2k_xp_nt, forzarlo si no sale Iniciar Mysql 131

132 Hacer clic en connect! Establecer un sitio PHP Datos locales: 132

HERRAMIENTAS PARA CREAR

HERRAMIENTAS PARA CREAR LECTURA 3: DIBUJO Debemos quedarnos con la idea según la cual cuando dibujamos objetos en Flash se generan vectores (también llamados formas) correspondientes a las curvas y rectas que trazamos. Las formas

Más detalles

INICIANDO CON FLASH ESPACIO DE TRABAJO

INICIANDO CON FLASH ESPACIO DE TRABAJO ESPACIO DE TRABAJO INICIANDO CON FLASH Teniendo instalado el programa podemos ejecutarlo desde el botón de inicio, buscando la carpeta de adobe, dentro de ella seleccionamos el programa de Flash CS4 (básico

Más detalles

CREIX AMB INTERNET ILLUSTRATOR: INTRODUCCIÓN AL DISEÑO VECTORIAL

CREIX AMB INTERNET ILLUSTRATOR: INTRODUCCIÓN AL DISEÑO VECTORIAL CREIX AMB INTERNET ILLUSTRATOR: INTRODUCCIÓN AL DISEÑO VECTORIAL Índice: Introducción...pág. 03 1. Entorno de Illustrator...pág:04 2. Creación de un nuevo documento...pág: 07 3. Uso de capas...pág: 10

Más detalles

Objetivo: Que el alumno(a) entienda, comprenda y maneje el programa (Flash )

Objetivo: Que el alumno(a) entienda, comprenda y maneje el programa (Flash ) INFORMÁTICA (Flash) Objetivo: Que el alumno(a) entienda, comprenda y maneje el programa (Flash ) Desarrollo o proceso: Realizar equipos para el análisis y entendimiento del vocabulario con respecto a los

Más detalles

SEGUIMIENTO CON FLASH CS3 PRO

SEGUIMIENTO CON FLASH CS3 PRO Edición 2005 Flash para la enseñanza SEGUIMIENTO CON FLASH CS3 PRO MATERIALES PARA LA FORMACIÓN A DISTANCIA DEL PROFESORADO CNICE ÍNDICE Introducción... 3 1. Requisitos del sistema... 3 2. Instalación

Más detalles

FLASH CS5 - DISEÑO WEB

FLASH CS5 - DISEÑO WEB 01. Conociendo Adobe Flash Professional 01.1. Presentación y objetivos del curso 01.2. Requerimientos técnicos para Adobe Flash 01.3. Ejecución de Adobe Flash 01.4. Utilización de la página de inicio 01.5.

Más detalles

Descripción del espacio de trabajo

Descripción del espacio de trabajo del espacio de trabajo Bienvenido a Corel PHOTO-PAINT, un potente programa de edición de imágenes de mapa de bits que permite retocar fotografías existentes o crear gráficos originales. Este documento

Más detalles

Paint es una herramienta de diseño de dibujos los cuales son almacenados como mapa de bits (archivos de imágenes tipo *.bmp).

Paint es una herramienta de diseño de dibujos los cuales son almacenados como mapa de bits (archivos de imágenes tipo *.bmp). Aplicación Paint Generalidades Paint es una herramienta de diseño de dibujos los cuales son almacenados como mapa de bits (archivos de imágenes tipo *.bmp). Para ejecutar la aplicación Paint se debe seleccionar

Más detalles

PROGRAMA FORMATIVO MACROMEDIA STUDIO 8

PROGRAMA FORMATIVO MACROMEDIA STUDIO 8 PROGRAMA FORMATIVO MACROMEDIA STUDIO 8 www.bmformacion.es info@bmformacion.es Objetivos Se estudia la suite Macromedia Studio 8, que está formada por un conjunto de aplicaciones utilizadas por diseñadores

Más detalles

Paso 1 de 24. Paso 2 de 24. Guía de aprendizaje de Flash CS5 Tutorial 2. Importación de archivos externos.

Paso 1 de 24. Paso 2 de 24. Guía de aprendizaje de Flash CS5 Tutorial 2. Importación de archivos externos. Guía de aprendizaje de Flash CS5 Tutorial 2. Importación de archivos externos. Paso 1 de 24 En este tutorial vamos a crear un paisaje que utilizaremos en otros tutoriales. Por ello es importante que guardemos

Más detalles

Illustrator CS4: guía de maquetación

Illustrator CS4: guía de maquetación Paso 1 de 12 En este tutorial vamos a ver cómo hacer un banner de página web. Al hacer este banner de página web aprenderemos varias técnicas de dibujo, como la utilización de la herramienta Elipse, la

Más detalles

EFECTOS, ANIMACIÓN, TRANSICIÓN, IMÁGENES Y FOTOS EN POWER POINT

EFECTOS, ANIMACIÓN, TRANSICIÓN, IMÁGENES Y FOTOS EN POWER POINT EFECTOS, ANIMACIÓN, TRANSICIÓN, IMÁGENES Y FOTOS EN POWER POINT Qué es una plantilla? Las plantillas (Templates) son presentaciones cuyo formato y esquema de colores puede ser aplicado a otras presentaciones.

Más detalles

Qué es Fireworks? Los mapas de bits

Qué es Fireworks? Los mapas de bits Qué es Fireworks? Macromedia Fireworks MX es una aplicación para diseñar elementos gráficos que van a utilizarse en la web. Sus innovadoras soluciones resuelven los principales problemas a los que se enfrentan

Más detalles

Descripción del espacio de trabajo

Descripción del espacio de trabajo del espacio de trabajo Bienvenidos a CorelDRAW, un completo programa de dibujo y diseño gráfico vectorial concebido para los profesionales del diseño gráfico. Este documento le mostrará la terminología

Más detalles

Tema: Documentos dinámicos

Tema: Documentos dinámicos Tema: Documentos dinámicos Facultad: Ciencias y Humanidades Escuela: Comunicaciones Asignatura: Diseño Editorial Objetivo Específico Crear los elementos que comprenden un documento dinámico. Hipervínculos

Más detalles

abacformacio@abacformacio.com 1

abacformacio@abacformacio.com 1 TEMARIO Macromedia Flash 8 Descripción de la aplicación Macromedia Flash, que permite crear animaciones interactivas dirigidas a las páginas web o a otros proyectos multimedia. El formato de Flash se ha

Más detalles

2. Seleccionamos Ventana > Propiedades y, a continuación, el color para el trazo, el grosor de la línea y el estilo en el inspector de propiedades.

2. Seleccionamos Ventana > Propiedades y, a continuación, el color para el trazo, el grosor de la línea y el estilo en el inspector de propiedades. TEMA 2: HERRAMIENTAS DE DIBUJO Y PINTURA 1. Herramienta Lápiz Para dibujar líneas y formas, se utiliza la herramienta Lápiz de manera muy similar a como se emplea un lápiz para realizar un dibujo. Para

Más detalles

LECCION 3. El entorno de Illustrator

LECCION 3. El entorno de Illustrator LECCION 3. El entorno de Illustrator 3.1. El área de trabajo El entorno de Illustrator se compone por una serie de paneles, barras y ventanas, que podemos mover y desplazar. Y cualquier disposición de

Más detalles

Vamos a abrir la película natura.fla contenida en la carpeta Curso Flash/ejemplos para observar detalles de su línea de tiempo.

Vamos a abrir la película natura.fla contenida en la carpeta Curso Flash/ejemplos para observar detalles de su línea de tiempo. Capítulo 11 Animaciones 11.1 La animación con Flash P ara crear animación en una película Flash, se modifica el contenido de fotogramas sucesivos. Flash ofrece dos maneras de crear secuencias de animación:

Más detalles

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas. 3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc

Más detalles

Curso de Adobe Illustrator CS4

Curso de Adobe Illustrator CS4 Curso de Adobe Illustrator CS4 El objetivo de este curso es proveer a los alumnos con poco o ningún conocimiento, la habilidad necesaria para trabajar con las herramientas precisas y poder crear gráficos,

Más detalles

SEGUIMIENTO CON FLASH 8

SEGUIMIENTO CON FLASH 8 Edición 2005 Flash para la enseñanza SEGUIMIENTO CON FLASH 8 MATERIALES PARA LA FORMACIÓN A DISTANCIA DEL PROFESORADO CNICE ÍNDICE Introducción... 3 1. Requisitos del sistema... 3 2. Instalación de la

Más detalles

Taller genmagic: Adobe Flash. Tutorial 6: USO DE LAS IMÁGENES DE MAPA DE BITS EN FLASH I.

Taller genmagic: Adobe Flash. Tutorial 6: USO DE LAS IMÁGENES DE MAPA DE BITS EN FLASH I. LAS IMÁGENES DE MAPA DE BITS EN FLASH. En este tutorial aprenderemos las técnicas básicas de tratamiento de imágenes con Flash. Es un tutorial básico pero obligatorio para poder seguir avanzando en el

Más detalles

Herramientas CorelDraw

Herramientas CorelDraw Herramientas CorelDraw Herramienta de Selección Señala elementos pinchando sobre él o varios elementos, realizando una ventana que los contenga. Con la tecla Mayúsculas resta o añade elementos a la selección.

Más detalles

Insertar o crear tablas. Insertar una tabla. Crear una tabla. Usar plantillas de tabla. Utilizar el menú Tabla. Utilizar el comando Insertar tabla

Insertar o crear tablas. Insertar una tabla. Crear una tabla. Usar plantillas de tabla. Utilizar el menú Tabla. Utilizar el comando Insertar tabla Insertar o crear tablas Insertar una tabla En Microsoft Office Word 2007 se puede insertar una tabla eligiendo un diseño entre varias tablas con formato previo (rellenas con datos de ejemplo) o seleccionando

Más detalles

Cursogramas con Word 2003

Cursogramas con Word 2003 Cursogramas con Word 2003 Para realizar cursogramas con Word, nos valdremos de la barra de herramientas Dibujo. Esta barra se puede incorporar a la pantalla de Word a través del menú Ver, Barra de Herramientas

Más detalles

DISEÑO WEB CON FLASH MX Y FIREWORKS MX

DISEÑO WEB CON FLASH MX Y FIREWORKS MX DISEÑO WEB CON FLASH MX Y FIREWORKS MX Duración en horas: 20 1. FLASH MX OBJETIVOS: Aprenda a diseñar sus sitios Web con el software más revolucionario y dinámico para la creación de páginas Web. Flash

Más detalles

1. CREACIÓN Y MANEJO DE OBJETOS Hoy en día un buen documento debe incluir, siempre que sea posible, gráficos o imágenes, sobre todo si se va a

1. CREACIÓN Y MANEJO DE OBJETOS Hoy en día un buen documento debe incluir, siempre que sea posible, gráficos o imágenes, sobre todo si se va a 1. CREACIÓN Y MANEJO DE OBJETOS Hoy en día un buen documento debe incluir, siempre que sea posible, gráficos o imágenes, sobre todo si se va a distribuir por Internet. Un excelente procesador de textos

Más detalles

Acercándose a Flash. Capítulo. 1.1 Por qué Flash?

Acercándose a Flash. Capítulo. 1.1 Por qué Flash? Capítulo 1 Acercándose a Flash 1.1 Por qué Flash? F lash se ha convertido en un clásico para el diseño de páginas web y de presentaciones multimedia interactivas. Las características más destacadas de

Más detalles

TEMA 8: Dibujo por ordenador (CorelDraw 9).

TEMA 8: Dibujo por ordenador (CorelDraw 9). TEMA 8: Dibujar con el ordenador (CorelDraw 9). NIVEL: 2º Curso de Educación Secundaria Obligatoria. 1/23 TEMA 8: Dibujar con el ordenador (CorelDraw 9). I N D I C E 1.- INTRODUCCIÓN AL DIBUJO POR ORDENADOR.

Más detalles

14.1 Configuración de las propiedades del documento

14.1 Configuración de las propiedades del documento Capítulo 14 Publicación 14.1 Configuración de las propiedades del documento V amos a abrir la película natura.fla guardada en la carpeta Curso Flash/ejemplos. No es necesario guardar los cambios producidos

Más detalles

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. IMÁGENES Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Existen una serie de formatos de imagen más

Más detalles

Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales.

Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales. Qué es Powerpoint 2010? Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales. El entorno de trabajo En la siguiente imagen

Más detalles

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

Más detalles

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual.

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Paso 1 de 13 En este tutorial vamos a crear un logotipo basado en un texto al que aplicaremos algunos efectos utilizando filtros

Más detalles

Navegar por Windows 8. capítulo 05

Navegar por Windows 8. capítulo 05 Navegar por capítulo 05 Navegar por navegar presenta novedades en cuanto a la navegación. Podríamos separar la navegación en dos tipos, la navegación a través del explorador y por lo tanto por el escritorio,

Más detalles

Este Material de Apoyo ha sido extraído de la Guía de Usuario de Corel Draw X6. Copyright 2012 Corel Corporation. Reservados todos los derechos.

Este Material de Apoyo ha sido extraído de la Guía de Usuario de Corel Draw X6. Copyright 2012 Corel Corporation. Reservados todos los derechos. Este Material de Apoyo ha sido extraído de la Guía de Usuario de Corel Draw X6. Copyright 2012 Corel Corporation. Reservados todos los derechos. Operaciones con páginas y herramientas de diseño CorelDRAW

Más detalles

GUÍA 2 Tema: APLICACIONES BÁSICAS.

GUÍA 2 Tema: APLICACIONES BÁSICAS. Diseño Digital II. Guía 2 16 GUÍA 2 Tema: APLICACIONES BÁSICAS. Contenidos Mapa de bits y vectores Mano alzada, creación y manipulación de curvas y modificación de trazados. Guías Reglas y cuadrículas.

Más detalles

Creación, configuración, formato y visualización de una presentación en Power Point

Creación, configuración, formato y visualización de una presentación en Power Point Módulo 3 Herramientas de Cómputo Creación, configuración, formato y visualización de una presentación en Power Point Cómo crear una diapositiva nueva? Para crear una diapositiva nueva tienes que ir al

Más detalles

2015-2016. Prácticas de Informática 5

2015-2016. Prácticas de Informática 5 2015-2016 Prácticas de Informática 5 Sesión 1: Introducción a Corel Corel Draw es un programa de dibujo vectorial que facilita la creación de ilustraciones profesionales: desde simples logotipos a complejos

Más detalles

MICROSOFT POWER POINT

MICROSOFT POWER POINT MICROSOFT POWER POINT QUE ES POWER POINT Y PARA QUÉ SIRVE Power Point es el programa más popular para crear presentaciones gráficas, utilizado también para crear de una forma rápida y profesional transparencias,

Más detalles

Draw. Dibujo vectorial. Módulo 7: Imágenes. Ministerio de Educación, Cultura y Deporte

Draw. Dibujo vectorial. Módulo 7: Imágenes. Ministerio de Educación, Cultura y Deporte Ministerio de Educación, Cultura y Deporte Draw. Dibujo vectorial Módulo 7: Imágenes Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Draw. Open Office Imágenes Objetivos

Más detalles

Objetos y Capas UNIDAD. Estructura de Contenidos: 1. Entorno de Adobe Flash. 2. Herramientas de Diseño. 3. Edición y Control de Estados.

Objetos y Capas UNIDAD. Estructura de Contenidos: 1. Entorno de Adobe Flash. 2. Herramientas de Diseño. 3. Edición y Control de Estados. Objetos y Capas UNIDAD 7 Estructura de Contenidos: 1. Entorno de Adobe Flash. 2. Herramientas de Diseño. 3. Edición y Control de Estados. 4. Interpolación de movimiento. 5. Control de capas. Tipos (Guía

Más detalles

LECCION 2. Entorno de Photoshop

LECCION 2. Entorno de Photoshop LECCION 2. Entorno de Photoshop Abrir un nuevo documento de trabajo Hasta ahora hemos visto cómo abrir una imagen para tratarla en Photoshop, y a guardarla en cualquiera de los estados en los que se encuentre

Más detalles

CONCEPTOS Y ELEMENTOS BÁSICOS

CONCEPTOS Y ELEMENTOS BÁSICOS CONCEPTOS Y ELEMENTOS BÁSICOS INTRODUCCIÓN: El presente manual está enfocado al uso práctico del programa de Macromedia Flash CS4 en el desarrollo de material multimedia para las aplicaciones del proceso

Más detalles

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH Jornadas de INCLUSION DIGITAL a través de las TIC ORGANIZAN: CAPACITA: CLAEH Con Google Docs puedes crear, compartir y editar documentos online con facilidad. A continuación te indicamos algunas acciones

Más detalles

Tutorial de Paint Shop Pro 7

Tutorial de Paint Shop Pro 7 1 Tutorial de Paint Shop Pro 7 Paint Shop Pro (PSP) es el programa de tratamiento de imágenes más popular en Internet debido a su relativa sencillez de manejo y sus múltiples prestaciones. 1. El cuadro

Más detalles

TEMA 1.- Introducción: Flujo de trabajo en Flash Objetivo

TEMA 1.- Introducción: Flujo de trabajo en Flash Objetivo CURSO DE FLASH CS5 El alumno al finalizar será capaz de realizar películas flash de uso cotidiano en el diseño web: banners, presentaciones animadas, etc. Además de incluir utilidades multimedia como sonido

Más detalles

7.2 Creando capas: el acuario virtual. Se puede crear una capa siguiendo cualquiera de los siguientes procedimientos:

7.2 Creando capas: el acuario virtual. Se puede crear una capa siguiendo cualquiera de los siguientes procedimientos: Capítulo 7 Capas 7.1 Qué son las capas? L as capas son como hojas de acetato transparentes apiladas una sobre otra. Cuando una capa está vacía permite que puedan verse a través de ésta las capas situadas

Más detalles

Oficina de Tecnologías de la Información y Comunicaciones MANUAL DE USUARIO. Diseño básico para elaboración de banners en Macromedia Fireworks 8

Oficina de Tecnologías de la Información y Comunicaciones MANUAL DE USUARIO. Diseño básico para elaboración de banners en Macromedia Fireworks 8 MANUAL DE USUARIO Diseño básico para elaboración de banners en Macromedia Fireworks 8 Pág. 1 de 13 ÍNDICE 1. INTRODUCCION... 3 2. EL ESPACIO DE TRABAJO DE FIREWORKS... 3 3. CREAR UN NUEVO DOCUMENTO...

Más detalles

1. La nueva interfaz del programa

1. La nueva interfaz del programa 1. La nueva interfaz del programa 13 1. La nueva interfaz del programa 1.1 La interfaz del nuevo Flash CS4 Al acceder por primera vez a Adobe Flash CS4 llama la atención la nueva disposición de las paletas,

Más detalles

Click Computación Especialidad: Diplomado Materia: Flash CS5 40 Horas

Click Computación Especialidad: Diplomado Materia: Flash CS5 40 Horas CONTENIDO TEMATICO: LAS BASES DE FLASH I En qué consiste Flash El Plugin Nuevo documento. Formatos de Flash Principios de diseño Principios de animación Importando elementos Descripción de paneles El espacio

Más detalles

DREAMWEAVER El programa Dreamweaver, de la empresa Macromedia/Adobe, es un sencillo y a la vez completísimo editor de sitios y aplicaciones web.

DREAMWEAVER El programa Dreamweaver, de la empresa Macromedia/Adobe, es un sencillo y a la vez completísimo editor de sitios y aplicaciones web. DISEÑO WEB, DREAMWEAVER, FLASH, FIREWORKS. Curso destinado al Diseño Web, con los tres programas más utilizados DreamWeaver, Flash y Fireworks, todos de la marca Adobe/Macromedia. Con este curso el alumno

Más detalles

Si es la primera vez que trabajas con Power Point, lo que debes hacer es localizar el botón de inicio. después haz doble clic sobre el icono

Si es la primera vez que trabajas con Power Point, lo que debes hacer es localizar el botón de inicio. después haz doble clic sobre el icono Módulo 3 Herramientas de Cómputo Conociendo Power Point Para qué sirve un programa como Power Point? Power Point es un programa que permite hacer dispositivas (láminas) digitales para mostrar en ellas

Más detalles

I. WINDOWS JOURNAL 1

I. WINDOWS JOURNAL 1 I. WINDOWS JOURNAL 1 Con formato: Numeración y viñetas Es la herramienta base y cuaderno digital de nuestros alumnos. Lo que aprenderemos es la herramienta propiamente dicha y sus posibilidades para elaborar

Más detalles

Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 6 TABLAS Y GRÁFICOS EN IMPRESS

Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 6 TABLAS Y GRÁFICOS EN IMPRESS Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 6 TABLAS Y GRÁFICOS EN IMPRESS Antes que nada tenemos que hablar de la distinción entre tabla y hoja de cálculo. Una tabla es una estructura formada

Más detalles

Adobe Fireworks CS3. Instituto Superior Tecnológico SISE. Adobe Fireworks CS3

Adobe Fireworks CS3. Instituto Superior Tecnológico SISE. Adobe Fireworks CS3 Adobe Fireworks CS3 Instituto Superior Tecnológico SISE Adobe Fireworks CS3 INTRODUCCION A ADOBE FIREWORKS CS3 Adobe Fireworks CS3 es uno de los programas más avanzados para diseñar y producir elementos

Más detalles

Dinos qué tal lo estamos haciendo

Dinos qué tal lo estamos haciendo Acerca de los dibujos en Google Docs Google Docs te permite crear, compartir y modificar dibujos online fácilmente. Estas son algunas de las cosas que puedes hacer con dibujos en Google Docs: modificar

Más detalles

Sección 4.1 Imágenes e ilustraciones

Sección 4.1 Imágenes e ilustraciones Sección 4.1 Imágenes e ilustraciones Imágenes: fotos, capturas de pantalla u otros ficheros de mapas de bits o vectoriales. También se consideran imágenes lo que en otras versiones de PowerPoint se llamaba

Más detalles

Tutorial de Paint. Tutorial de Paint

Tutorial de Paint. Tutorial de Paint Tutorial de Paint 0 Paint Ahora es más fácil y más divertido usar este fiable programa. Además, los nuevos "pinceles" digitales realistas darán vida a sus imágenes, con matices de acuarelas, crayones y

Más detalles

Diseño de Moda Informatizado UNIDAD DIDÁCTICA 4 GRÁFICOS VECTORIALES

Diseño de Moda Informatizado UNIDAD DIDÁCTICA 4 GRÁFICOS VECTORIALES UNIDAD DIDÁCTICA 4 GRÁFICOS VECTORIALES 59 60 UNIDAD DIDÁCTICA 4 GRÁFICOS VECTORIALES 1.- GRÁFICO VECTORIAL DEFINICIÓN DE VECTORES CARACTERÍSTICAS DE LOS GRÁFICOS VECTORIALES VENTAJAS Y LIMITACIONES DE

Más detalles

Draw. Dibujo vectorial

Draw. Dibujo vectorial Ministerio de Educación, Cultura y Deporte Draw. Dibujo vectorial Profundización Introducción Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Draw. Open Office Inicio Objetivos

Más detalles

SELECCIONAR. PB3157 MAQUETACIÓN Y DISEÑO POR ORDENADOR I Tema 3. Las herramientas. Introducción. Realizar selecciones de píxeles

SELECCIONAR. PB3157 MAQUETACIÓN Y DISEÑO POR ORDENADOR I Tema 3. Las herramientas. Introducción. Realizar selecciones de píxeles SELECCIONAR Introducción Dado que en la imagen hay dos tipos de datos diferentes: mapas de bits y vectores, es necesario utilizar conjuntos de herramientas independientes para realizar las selecciones

Más detalles

Fuente: http://www.kzgunea.net

Fuente: http://www.kzgunea.net APRENDE A NAVEGAR INTERNET EXPLORER El navegador Internet Explorer ya lo tenemos integrado en el Sistema Operativo, en sus diferentes versiones desde Windows 95, por lo cual no tendremos que instalarlo.

Más detalles

Operación Microsoft Windows XP

Operación Microsoft Windows XP El ambiente de trabajo Descripción del ambiente de trabajo Luego de encendida la computadora, la pantalla se presenta de la forma que lo muestra la figura. El ambiente de trabajo que proporciona el sistema

Más detalles

Capitulo 2: Pintura, aplicación en Illustrator

Capitulo 2: Pintura, aplicación en Illustrator Capitulo 2: Pintura, aplicación en Illustrator Para poder añadir interés visual a la ilustración, Adobe Illustrator le proporciona distintos pinceles: caligráficos, de dispersión, de arte y de motivo.

Más detalles

CURSOS CON CERTIFICACION UNIVERSITARIA

CURSOS CON CERTIFICACION UNIVERSITARIA Descripción: Curso para aprender a utilizar los programas del paquete Adobe Creative Suite (CS), que engloba los programas de edición y publicación de documentos impresos y para la web Adobe Illustrator

Más detalles

Tutorial de FreeHand MX

Tutorial de FreeHand MX 1 Tutorial de FreeHand MX FreeHand es una aplicación de Macromedia para el diseño de imágenes vectoriales de alta calidad y resolución orientadas tanto a la publicación impresa como al entorno Web. 1.

Más detalles

Manual Uso de la herramienta de videoconferencia Adobe Connect Universidad de Oviedo

Manual Uso de la herramienta de videoconferencia Adobe Connect Universidad de Oviedo Manual Uso de la herramienta de videoconferencia Adobe Connect Universidad de Oviedo Página 1 de 26 Contenido INTRODUCCIÓN... 3 RESERVA DE LAS AULAS DE VIDEOCONFERENCIA... 3 ACCESO A LA VIDEOCONFERENCIA...

Más detalles

Aplicación Tipo para Tabletas Gráficas Escribe, yo leo

Aplicación Tipo para Tabletas Gráficas Escribe, yo leo Escribe, yo leo Alumnas: Ana Belén López Díaz Adriana Aparício Marijuán -1- MANUAL DE USUARIO -2- Indice de contenido 1.Descripción de la aplicación...5 2.Pantalla Inicial...6 3.Pantalla Final...7 4.Pantalla

Más detalles

CLAVE: MA PROFESOR: MTRO. ALEJANDRO SALAZAR GUERRERO

CLAVE: MA PROFESOR: MTRO. ALEJANDRO SALAZAR GUERRERO Informática Aplicada a la Administración CLAVE: MA PROFESOR: MTRO. ALEJANDRO SALAZAR GUERRERO 1 1. INTRODUCCIÓN 1.1. El hardware 1.2. Componentes hardware 1.3. El software 1.4. Sistema operativo 1.5. Windows

Más detalles

Secretariado de Tecnologías. Francisco Moreno. Microsoft PowerPoint 1 CREACIÓN DE PRESENTACIONES MICROSOFT POWERPOINT

Secretariado de Tecnologías. Francisco Moreno. Microsoft PowerPoint 1 CREACIÓN DE PRESENTACIONES MICROSOFT POWERPOINT Secretariado de Tecnologías. Francisco Moreno. Microsoft PowerPoint 1 1.- INTRODUCCIÓN CREACIÓN DE PRESENTACIONES MICROSOFT POWERPOINT PowerPoint es un programa que contiene un conjunto completo de herramientas

Más detalles

Guardar en formato de Microsoft Word

Guardar en formato de Microsoft Word Guardar en formato de Microsoft Word Si tiene que intercambiar archivos con usuarios de Microsoft Word, tal vez estos desconozcan cómo abrir y guardar archivos.odt. Microsoft Word 2007 con Service Pack

Más detalles

1. Duplicar la capa de fondo:

1. Duplicar la capa de fondo: 1. Duplicar la capa de fondo: Con nuestra foto recién abierta en el Photoshop, lo primero que tenemos que hacer es hacer una copia de nuestra capa de fondo, que es la capa que contiene nuestra foto y en

Más detalles

PowerPoint 2010 Introducción a Microsoft Office PowerPoint 2010

PowerPoint 2010 Introducción a Microsoft Office PowerPoint 2010 PowerPoint 2010 Introducción a Microsoft Office PowerPoint 2010 Contenido CONTENIDO... 1 DESCRIPCIÓN DE LA VENTANA PRINCIPAL... 2 INTRODUCCIÓN A POWERPOINT WEB APP... 8 1 Descripción de la ventana principal

Más detalles

TUTORIAL ILUSTRACIÓN ADOBE ILLUSTRATOR

TUTORIAL ILUSTRACIÓN ADOBE ILLUSTRATOR 1 TUTORIAL ILUSTRACIÓN ADOBE ILLUSTRATOR IES Severo Ochoa Diseño asistido por ordenador Curso 2º Bachillerato de Artes Plásticas y Diseño 2011 2012 Profesor: Manuel Padilla Álvarez Alumna de Máster: Irene

Más detalles

6.2 Importar una imagen desde Flash

6.2 Importar una imagen desde Flash Capítulo 6 Importar recursos 6.1 Introducción L as películas de Flash admiten el empleo de ilustraciones creadas en otras aplicaciones. Puedes importar gráficos vectoriales, mapas de bits, vídeos, sonidos,

Más detalles

Trabajar con Máscaras y Canales

Trabajar con Máscaras y Canales Trabajar con Máscaras y Canales Herramienta Máscara, Modificar Máscara, Canal Alfa, Crear un Canal Alfa Herramienta Máscara Con la herramienta máscara podemos proteger zonas de una imagen permitiéndonos

Más detalles

Tema 8. Creación y diseño de un sitio web

Tema 8. Creación y diseño de un sitio web 1. Interfaz de Dreamweaver MX El entorno de trabajo de Dreamweaver está compuesto por una serie de ventanas, paneles y otros elementos configurables por el usuario. En la Figura 1 podemos ver una posible

Más detalles

Curso POWERPOINT 97. Introducción

Curso POWERPOINT 97. Introducción Curso POWERPOINT 97 Introducción El curso PowerPoint 97 está destinado a aquellos alumnos que necesiten crear presentaciones que informen de la evolución de un proyecto. PowerPoint es un programa de edición

Más detalles

En este tutorial aprenderemos las técnicas básicas de tratamiento de imágenes vectoriales con Flash.

En este tutorial aprenderemos las técnicas básicas de tratamiento de imágenes vectoriales con Flash. LAS IMÁGENES VECTORIALES EN FLASH. En este tutorial aprenderemos las técnicas básicas de tratamiento de imágenes vectoriales con Flash. Ya hemos visto en el tutorial anterior la diferencia entre las imágenes

Más detalles

CARRERA OPERADOR EN DISEÑO GRAFICO VISIO

CARRERA OPERADOR EN DISEÑO GRAFICO VISIO CARRERA OPERADOR EN DISEÑO GRAFICO DURACION: 3 MESES DE L-V Requisito: Conocimiento en Windows VISIO FREEHAND COREL DRAW PHOTOSHOP FLASH ILUSTRATOR INDESING VISIO 1 semana 1 semana 1. INTRODUCCIÓN A VISIO

Más detalles

Crear un Ilustración molinete de viento en Adobe Illustrator

Crear un Ilustración molinete de viento en Adobe Illustrator Crear un Ilustración molinete de viento en Adobe Illustrator Lo que va a crear En los siguientes pasos usted aprenderá cómo crear una ilustración molinete de hélice de colores en Adobe Illustrator. Para

Más detalles

En esta segunda y última parte de la unidad veremos algunas de las funciones

En esta segunda y última parte de la unidad veremos algunas de las funciones Semana 6 Presentación En esta segunda y última parte de la unidad veremos algunas de las funciones más importantes de Microsoft PowerPoint, entre ellas: la creación y el trabajo con gráficos y animaciones,

Más detalles

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0 Manual de gestión de contenidos web en entorno Drupal Versión sitio maestro para servicios 1.0 Contenido Gestión de contenidos... 5 Crear contenidos... 5 Tipos de contenido... 5 Página básica o basic

Más detalles

lash ofrece dos métodos distintos de utilizar un sonido en una película:

lash ofrece dos métodos distintos de utilizar un sonido en una película: Capítulo 10 Sonidos 10.1 Uso del sonido en Flash F lash ofrece dos métodos distintos de utilizar un sonido en una película: Sonidos de evento: Debe descargarse por completo para que empiece a reproducirse.

Más detalles

IES Fco. Grande Covián

IES Fco. Grande Covián 1. Dibujo técnico Dibujo 2º ESO Dibujando con Dibujo técnico es el conjunto de procedimientos, herramientas y técnicas utilizadas para realizar y comunicar la forma y dimensiones de un producto. En temas

Más detalles

2_dar formato al texto / documentos I

2_dar formato al texto / documentos I Es posible ejecutar el comando tantas veces como copias se desee hacer, ya que tras pegar el texto, una copia del mismo sigue en el Portapapeles. Se dispone de varios caminos para llegar a estas opciones:

Más detalles

Objetivo. Ajustar las opciones de formato para conseguir un archivo ligero y con calidad dirigido a la posterior publicación web.

Objetivo. Ajustar las opciones de formato para conseguir un archivo ligero y con calidad dirigido a la posterior publicación web. Ejercicio. Unidad 1. Guardar para Web Adobe Photoshop CS Práctica n 01 Objetivo. Ajustar las opciones de formato para conseguir un archivo ligero y con calidad dirigido a la posterior publicación web.

Más detalles

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009)

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: domingo, 15 de febrero de 2009) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos

Más detalles

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas. Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números

Más detalles

Creación de Botones. Sesión III y IV

Creación de Botones. Sesión III y IV Creación de Botones Los símbolos de botón sirven para crear botones interactivos en la película que responderán a los clics y desplazamientos del ratón, o demás acciones. Defina los gráficos asociados

Más detalles

QUÉ ES ILLUSTRATOR? Acerca de Adobe Illustrator

QUÉ ES ILLUSTRATOR? Acerca de Adobe Illustrator QUÉ ES ILLUSTRATOR? Acerca de Adobe Illustrator Illustrator es un programa de vectores. Su principal uso es para hacer ilustraciones, caricaturas, diagramas, gráficos y logotipos. A diferencia de las fotografías

Más detalles

Trabajar con diapositivas

Trabajar con diapositivas Trabajar con diapositivas INFORMÁTICA 4º ESO POWERPOINT Una vez creada una presentación podemos modificarla insertando, eliminando, copiando diapositivas, Insertar una nueva diapositiva.- Para insertar

Más detalles

AulaClass Herramientas web 2.0 Bogotá-Colombia

AulaClass Herramientas web 2.0 Bogotá-Colombia AulaClass Herramientas web 2.0 Bogotá-Colombia MANUAL PIXLR Que es: Pixlr es un editor de imágenes online simple y sencillo de usar, ideal para realizar algunos retoques a nuestras imágenes como: cambiar

Más detalles

Manual de Neobook. J.Santiago Ortiz

Manual de Neobook. J.Santiago Ortiz Manual de Neobook J.Santiago Ortiz J. Santiago Ortiz Durán Que es Neobook? Neobook es un Software de autor de gran difusión en el ámbito educativo, que goza de mucha popularidad debido a su facilidad de

Más detalles

Diseño de páginas web

Diseño de páginas web Diseño de páginas web Capas. Objetos en movimiento Ricardo Esteban Alonso Creación de capas en la página web Las capas son rectángulos transparentes, donde podemos insertar datos y hacer que éstos aparezcan

Más detalles

Imágenes y gráficos. 1 Introducción

Imágenes y gráficos. 1 Introducción Imágenes y gráficos 1 Introducción Hoy en día un documento para que sea considerado como un buen documento debe incluir, siempre que sea necesario, gráficos o imágenes, sobre todo si se va a distribuir

Más detalles

PowerPoint 2013. 1 www.pildorasinformaticas.com

PowerPoint 2013. 1 www.pildorasinformaticas.com 1 2 ÍNDICE Capítulo 1. Introducción a Microsoft PowerPoint 2013... 9 1.1. Novedades de PowerPoint 2013... 9 1.2. Iniciar y cerrar el programa... 10 1.3. Elementos de la interfaz del programa... 12 1.4.

Más detalles

Operación Microsoft Access 97

Operación Microsoft Access 97 Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe

Más detalles