Manual de Fireworks] Julio César Hernández Hernández Este manual contiene todo lo que se recibió en el curso de Operación Red en el año de 2007
2 INDICE Nº NOMBRE página 1. DESCRIPCION DE FIREWOKS 2. OBJETIVOS 3. INSPECTOR DE PROPIEDADES 4. PANEL DE HERRAMIENTAS 5. MONTAGE DE UNA IMAGEN SOBRE OTRA 6. COMO HACER UN ESCUDO 7. EDICION DE LA MEDIA LUNA 8. COMO CREAR UN BOTON ANIMADO 9. INTRODUCIR IMAGEN AL BOTON 10 TEXTO EN EL BOTON 11 ROLLOVERS EN DOS OBJETOS 12 MENSAJE EN LA BARRA DE TAREAS 13 MENU EMERGENTE 14 EXPORTAR UNA ANIMACION A DW Julio César Hernández Hernández
3 Descripción Fireworks es una herramienta que puede utilizarse para crear, editar y animar gráficos web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. En Fireworks es posible crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación. Todo es modificable en todo momento. Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualización que de otra forma exigirían una enorme dedicación. Objetivos Aprender a utilizar fireworks en el diseño, edición y animación de gráficos web. Integrar los elementos producidos con otras herramientas de diseño de páginas. Inspector De Propiedades Es un panel que varía según el contexto y que muestra las propiedades de la selección actual, las opciones de la herramienta seleccionada o las propiedades del documento. De forma predeterminada, el Inspector de propiedades está acoplado en la parte inferior del espacio de trabajo. Como se observa en la figura del entorno. El Inspector de propiedades puede abrirse a media altura con lo que se muestran dos filas de propiedades. O puede abrirse por completo, con lo que se muestran cuatro filas. El Inspector de propiedades también puede contraerse en su totalidad aunque permanezca en el espacio de trabajo.
4 Para expandir el Inspector de propiedades de media altura a altura completa y ver otras opciones: Haga clic en la flecha de ampliación situada en el ángulo inferior derecho del Inspector de propiedades. Haga clic en el ícono del ángulo superior derecho del Inspector de propiedades y elija Altura completa en el menú de opciones del Inspector de propiedades. Nota: El menú de opciones está disponible únicamente cuando el Inspector de propiedades está acoplado. Para contraer el Inspector de propiedades cuando está acoplado: Haga clic en la flecha de ampliación o el título del Inspector de propiedades. Elija Contraer grupo de paneles en el menú de opciones del Inspector de propiedades. Panel Herramientas El panel Herramientas contiene las herramientas necesarias para crear, seleccionar y modificar objetos. Las barras de herramientas Principal y Modificar proporcionan fácil acceso a muchos comandos. El panel Herramientas está organizado en seis categorías: 1.Seleccionar, 2.Mapa de bits, 3.Vector, 4.Web, 5.Colores y 6. Ver. Basta con elegir una herramienta y comenzar a utilizarla. La aplicación emplea la herramienta correctamente. El panel Herramientas contiene docenas de herramientas, algunas de las cuales están agrupadas, tal como se ilustra. Los grupos de herramientas se identifican por el pequeño triángulo situado en la esquina inferior derecha de la herramienta. Haga clic en una herramienta para seleccionarla. De forma alternativa, puede pulsar las teclas de método abreviado para cambiar rápidamente de herramienta. Nota: Puede ver el método abreviado de cada tecla si coloca el cursor sobre el ícono de la herramienta en el panel Herramientas, y espera a que aparezca el rótulo correspondiente. El método abreviado es la letra que aparece tras el nombre de la herramienta. Selección de una herramienta en un grupo de herramientas
5 Cuando en el ángulo inferior derecho de una herramienta del panel Herramientas aparece un triángulo pequeño, indica que la herramienta forma parte de un grupo. Por ejemplo, la herramienta Rectángulo forma parte del grupo de herramientas básicas de forma, que también incluye las herramientas Rectángulo Redondeado, Elipse y Polígono. Para elegir otra herramienta de un grupo de herramientas: 1. Haga clic en el ícono de la herramienta y mantenga presionado el botón del ratón. Aparece un menú emergente con los íconos, los nombres y las teclas de método abreviado de las herramientas. La herramienta actualmente seleccionada lleva una marca de selección a la izquierda del nombre. 2. Arrastre el puntero para resaltar la herramienta que desee y suelte el botón del ratón. La herramienta elegida aparece en el panel Herramientas y sus opciones se indican en el Inspector de propiedades. Nota: La función de algunas herramientas cambia según se editen objetos vectoriales o de mapa de bits. MONTAGE DE UNA IMAGEN SOBRE OTRA Primera forma: 1. Elegir pixeles del lienzo del nuevo documento 2. Elegir archivo, de la barra de menú y seleccionar importar 3. Seleccionar la imagen que deseamos editar 4. La colocamos en el lienzo y quedará como sigue
6 5. Elegimos en el Bloque de Mapa de Bits, la herramienta Herramienta Lazo(L) 6. Luego seleccionamos el contorno de la imagen con la Herramienta Lazo y esta quedará como sigue
7 7. Luego pinchamos la pestaña seleccionar y elegimos seleccionar inverso 8. Nos quedará seleccionada la imagen y el cuadro
8 9. Luego le presionamos la tecla suprimir, y nos quedará como sigue 10. Elegimos en las herramientas de Mapa de Bits La Barita Mágica 11. Se da clic en el contorno que queremos eliminar, y la imagen queda como sigue.
9 12. Elegimos en las herramientas de Mapa Bits, Borrador y con este quitamos el contorno. 13. La imagen quedará como sigue: En el siguiente paso hay que introducir un documento nuevo, importar una imagen que desea que fuese el fondo e insertarla; luego iremos a la pestaña ventana de la barra de menú, seleccionar mosaico vertical para arrastrar la imagen diseñada y colocarla sobre la última imagen importada La imagen quedará de la siguiente manera
10 Segunda forma: 1. Se edita la imagen 2. Se selecciona 3. Selecciona exportar área
11 4. Se da clic en Exportar área 5. Añadir color a la transparencia 6. La imagen queda de la siguiente manera 7. Luego exportar
12 8. Le asignamos un nombre 9. Lo exportamos como HTML e imagen 10. Clic en exportar 1- Elegir el tamaño del lienzo COMO HACER UN ESCUDO Ejercicio Nº 2 2- En el bloque de vector seleccionar la opción elipse. 3- Dibujamos un elipse en el lienzo de manera que quede de la siguiente manera
13 4- Encima de la elipse, dibujamos líneas con la herramienta línea, en el bloque de vectores, de manera que se vea de la siguiente forma 5- Luego encima de las líneas que creamos dibujamos otro elipse más pequeño que el primero y lo colocamos de modo que quede así 6- Después de hacer esto dibujamos una estrella desde el bloque vector.
14 7-Dibujamos la estrella encima de la elipse que creamos antes así: 8-Después de crear la estrella la seleccionamos y le damos clic en la opción puntos y lo movemos hasta que quede de cuatro puntos como la siguiente. 9-Luego de ponerle las cuatro puntas damos clic en la opción radio y lo movemos de modo que la estrella se vea más delgada Como la siguiente:
15 10-Luego de hacer lo anterior seleccionamos la opción escala del bloque seleccionar y rotamos la estrella de la siguiente forma. Después de haber hecho todos los pasos el escudo debe de quedarnos de la siguiente forma. EJERCICIOS DEL DIA 18/08/07 PARA HACER LA MEDIA LUNA EJERCICIO Nº 2
16 1. IMPORTAR IMAGEN 2. SELECCIONAR IMAGEN 3. Con un círculo 4. Seleccionar toda la imagen y en edición cortar y pegar dentro
17 5. Queda como sigue 6. Así quedará 7. En sombrear e iluminar Agregar sombra 8. De la siguiente manera
18 COMO CEAR UN BOTON ANIMADO *Primero damos clic en Edición *Después en Insertar *Luego en la opción Nuevo Botón *Aparecerá una pantalla diferente al lienzo anterior En la pantalla en blanco que aparece debemos dibujar una forma, la que queramos en esta ocasión un rectángulo. Luego usamos la herramienta texto y escribamos por ejemplo Home, En el inspector de propiedades le damos color al rectángulo y al texto si lo desea, luego debemos dar clic en la opción seleccionar y damos clic en la opción seleccionar todo y luego lo copiamos, luego en la pantalla damos clic en la ficha Sobre, y aparecerá otra pantalla en blanco, en esa pantalla debemos pegar lo que copiamos y modificamos la
19 apariencia del rectángulo y el texto, como se muestra en la imagen siguiente, luego de modificarlo damos clic en el botón Listo. Y aparecerá en el lienzo como un botón GIF. Para ver el efecto del botón debemos dar clic en la opción Vista Previa y pasamos el cursor del mouse y vemos que cambia del color que tenia de primero (azul) al color que colocamos después (verde). Rollovers en dos objetos. Primero dibujamos un rectángulo como un botón en la página anterior, luego importamos una imagen de modo que el lienzo quede de la siguiente forma luego en el panel de la derecha de la pantalla seleccionamos la opción Fotograma y Historial, damos clic en el botón Nuevo fotograma y se agregará un nuevo fotograma en el panel de fotogramas y luego damos clic en Fotograma 1 y volveremos al lienzo donde tenemos las dos figuras creadas anteriormente. Luego damos clic en la Barra de herramientas en la parte de Web en la opción Herramienta división y marcamos exactamente el entorno del rectángulo que creamos y luego el de la imagen. Las imágenes quedaran de la siguiente forma. Señalamos el
20 rectángulo para que cambie el botón blanco a la parte izquierda. Luego en una de las imágenes quedó un punto blanco debemos dar clic en él y arrastrarlo hasta la otra luego nos dará un mensaje donde nos pregunta si queremos Intercambiar una imagen con el fotograma 2, le damos clic en Aceptar. Después damos clic en Fotograma 2 y ahora ya no aparecerá el lienzo vacío hay como una replica de las imágenes que creamos en el Fotograma 1, bueno ahora hay que seleccionar la herramienta Texto y escribimos Byciclet en el segundo cuadro del lienzo de la siguiente forma: Luego volvemos al Fotograma 1 y presionamos la tecla F12 para ver los efectos creados. COMO INTRODUCIR UNA IMAGEN AL BOTON
21 1. Editar el botón como lo hicimos en los pasos anteriores 2.luego le damos clic en la parte blanca del centro del botón 3.Seleccionamos añadir comportamiento Intercambiar imagen, nos muestra la siguiente ventana 4.Clic en la carpeta amarilla
22 5.Buscamos la imagen que deseamos colocar y nos aparece la siguiente ventana 6.Damos clic en aceptar y nos queda como sigue
23 7.Presionamos F12 para ver el botón en el explorador Esta imagen es la que insertamos, y es la que muestra al poner el ratón sobre el botón COMO PONERLE TEXTO AL BOTÓN 1. Seguimos todos los pasos anteriores 2. Damos clic en la parte blanca y seleccionamos Añadir menú emergente, como sigue 3. Aparecerá la siguiente ventana, note que la ventana contiene las siguientes viñetas: contenido, aspecto, avanzado y posición Todas tienen que ser editadas
24 4. En la parte del texto digitamos lo requerido presionamos siguiente
25 Cuando ya estamos en posición, que contiene el lugar donde queremos el texto, presionamos listo, F12 para ver en explorador, nos muestra la siguiente ventana
26 MENSAJE EN LA BARRA DE ESTADO 1. Hacemos todo igual que el anterior, seleccionamos añadir mensaje de Barra de estado 2. Digitamos lo que queremos que aparezca en la barra de estado 3. F12 para ver en el explorador y nos muestra lo siguiente:
27 MENU EMERGENTE 1. Editamos la imagen 2. De la barra de menú seleccionamos comandos. 3. De comandos seleccionamos web. 4. De web seleccionamos definir texto ALT.
28 5. Nos aparecerá la siguiente ventana 6. Aquí introduciremos el texto que deseamos que aparezca en la imagen. 7. Después de introducir el texto, damos clic en aceptar; presionamos F12 para ver cómo queda en el explorador. NOTA: Para exportar la animación anterior a DW hacer los pasos que están en la página 31. MENU EMERGENTE CON UNA IMAGEN Primera forma 1-El primer paso es insertar una imagen en Fireworks.
29 2-Herramienta División, que se encuentra en el panel de herramientas de Fireworks, de modo que nos quede de la siguiente forma. 3-Luego en la pestaña Comandos de la barra de menú, seleccionamos Web y después Definir texto ALT. 4-Aparecerá el siguiente cuadro donde escribiremos el Texto ALT. 5-Damos clic en Aceptar. 6-Al presionar F12 veremos en el explorador al pasar el cursor del mouse sobre la imagen el Texto ALT que colocamos a la imagen.
30 Segunda Forma Al seleccionar la imagen con la Herramienta División, el inspector de propiedades cambia de forma, hay una parte donde dice Alt: allí escribimos el texto ALT, presionamos la tecla Enter y lo vemos en el explorador para ver el Texto ALT. NOTA: El texto que queramos poner en el inspector no tiene limite podemos digitar o pegar todo el texto que queramos y el resultado será el mismo. Insertar una animación de Fireworks a Dreamweaver 1º forma: Primero creamos la animación, en este caso, un botón animado en Fireworks, luego damos clic en Archivo, después en Exportar y aparecerá el siguiente cuadro donde guardaremos la animación. En la zona del cuadro que dice exportar debemos seleccionar HTML e imágenes, le ponemos un nombre a la animación y damos clic en Exportar.
31 Cuando ya estamos en DW damos clic en el Menú Insertar y seleccionamos Objetos de imagen, luego HTML de Fireworks. Y aparecerá el siguiente cuadro donde debemos dar clic en Examinar. Luego aparecerá este cuadro, donde debemos seleccionar el archivo con la extensión HTML, en este caso animación1, damos clic en Abrir y luego en Aceptar y ya tenemos la animación en DW, ahora al presionar F12, veremos la animación en el explorador.
32 2º Forma: 1. Editamos la imagen en FW. 2. En la barra de herramientas seleccionar se encuentra Exportar área. 3. Seleccionamos la imagen y le damos clic derecho sobre la selección. 4. Luego seleccionamos Exportar área. 5. Nos aparece la siguiente ventana.
33 6. Damos clic en el botón de en medio Añadir color a la transparencia 7. La imagen quedará como sigue: 8. Damos clic en exportar. 9. Nombramos el botón, exportamos como HTML e imágenes. 10. Damos clic en exportar. 11. Es importante que cuando estemos editando la imagen optimicemos.