unidad 4

DISEÑAR Y CREAR COMPONENTES

GRÁFICOS E INTERACTIVOS EN

FIREWORKS

Aplicar máscaras.

Aplicar símbolos y estados para una animación de un banner.

La división y los rollovers para la interactividad.

Aplicar Zonas interactivas.

Diseñar botones para páginas web.

Aplicación de plantillas básicas de diseño en dreamweaver.

4

GUÍA DIDÁCTICA

Descripción

Esta Unidad proporciona información sobre el tratamiento de componentes interactivos para

páginas web diseñando baners que puedan ser parte de los contenidos de los sitios web, dando un mayor

impacto en el diseño web.

Te deseamos éxitos en el desarrollo de esta Unidad.

Capacidad

.

Actividad

Elaborar una página web que contengan banners animados publicitarios.

Evaluación

En esta Sesión Ud. será evaluado en:

1. Aplicar máscaras para banners publicitarios.

2. Aplicar símbolos y estados de animación para animaciones.

3. Aplicar zonas de división y rollovers para interactividad.

4. Diseñar botones para páginas web.

5. Aplicación de plantillas.

Elabora componentes gráficos animados haciendo uso de vectores, máscaras, zonas interactivas y

animación haciendo uso de páginas plantillas.

DISEÑAR Y CREAR COMPONENTES

GRÁFICOS INTERACTIVOS EN

FIREWORKS

Desarrollo de un Sitio Web en Wix

3

Aplicar máscaras para banners publicitarios

Máscara.

Cuando tenemos aplicaciones con máscaras nos ayuda para someter a una imagen dentro de

un objeto vectorial o texto.

1. Abre Fireworks y en esta oportunidad configuraremos un lienzo de 492 plxs/plgs*98 plxs/plgs de

color blanco

2. Inserta 3 imágenes simultáneas para esta aplicación (insertaremos cada imagen con: Ctrl+R).

3. Luego seleccionando los objetos insertados, agrupamos con las combinaciones de teclas: Ctrl + G

4.Luego inserta el siguiente texto: “Médicos sin fronteras”

Seleccionamos y

presionamos ctrl+g

(agrupar)

1

2

4


5. Selecciona con un clic el texto y luego cortalo (Menú edición/cortar o Ctrl+X)

6. Selecciona la imagen luego hacemos clic en el Menú modificar/máscara/pegar como máscara.

7. Tendrás ya una máscara pero para mover el texto enmascarado debes desactivar la cadena con un

clic así:

1

2

3

1

Aplicar máscaras para banners publicitarios

5


Estados

Los estados son recursos Fireworks que permiten animar las imágenes con pequeños

cambios. Estos estados son copias de un lienzo original y se pueden exponer secuencialmente

graduados con un tiempo de exposición asignado.

puedes hacerlo utilizando cualquier objeto en lienzo

1. Para este caso se tendrás en cuenta la inserción de la ventana estados (Mayusc+F2)

Puede aplicarlo por el menú así:

2. Hacer un clic en nuevo estado para crea el estado2

Aplicar símbolo y estados para una animación de banner

1

2

6


3. Copiar lo que tienes en el estado 1, presionando las teclas Control +C (copiar) a todo el

contenido luego crea en el estado 2 aplica las teclas Ctrl+V(pegar).

4. Si necesito hacer un cambio para tener una animación podré hacer sólo si desactivo la máscara

haciendo clic en esta herramienta:

5. Mueve la imagen del estado 2, una vez desactivado la cadena (si necesitas asegurar vuelve hacer

clic)

6. Luego debes cambiar la velocidad al estado con doble clic en el número ( a 12)

1

Eliminar

Nuevo estado/duplicado Distribuir

Velocidad de estados Número de

estados

1

clic

7


7. Por último reproduce la animación haciendo clic en botón reproducir (play)

Símbolos

Los símbolos en Fireworks tienen tres categorías y son:

Gráficos: La categoría de gráficos es para obtenerlo al objeto vectorial como imagen

Animación: La categoría de animación es para insertar estados y moverlos o cambiar su

diseño de forma automática (no aplicaríamos el caso de estados del trabajo anterior).

Botón: La categoría botón aplica estados cuatro estados como máximo pero con

comportamientos para interactividad e hipervínculos.

Ejemplo:

1. Inserta una elipse y el texto de Claro en un lienzo de 300 pxls/plgs * 200 pxls/plgs

clic

8


2. Agrupa los dos objetos (texto y elipse) pare ello selecciona los dos y presionas Crtl+G

(agrupas).

3. Convierte a símbolo presionando la tecla F8 o haciendo clic en menú

modificar/símbolo/convertir en símbolo luego clic en aceptar.

4. Configura los estados, el ángulo de giro y el horario(o antihorario) y clic en aceptar.

1 2

3

4

5 6

9


División.

Permite generar zonas o divisiones interactivas regulares o irregulares automáticamente a partir

de un dibujo o imagen. Genera páginas web automáticamente para ser insertados como componentes

en otras páginas web.

Ejemplo:

1. Inserta una imagen de un producto de la marca deportiva puma (descarga).

2. Hacer clic en la herramienta de división poligonal (o de división según la forma de la imagen)

3. Bordear con dicha herramienta la primera zapatilla de la izquierda.

División y Rollovers para intaractividad

2

3

1

https://www.google.com.pe/search?hl=es-419&site=imghp&tbm=isch&source=hp&biw=1440&bih=799&q=medicos+sin+fronteras&oq=medico&gs_l=img.1.2.0l10.1526.2423.0.5039.6.6.0.0.0.0.171.654.3j3.6.0....0...1ac.1.35.img..2.4.313.jQzjMrOTcJU#hl=es-419&q=zapatillas+puma&tbm=isch&facrc=_&imgdii=_&imgrc=Qw0bcxNnb40llM%253A%3BwjaS-YjZ7fs07M%3Bhttp%253A%252F%252Fwww.zapatospumas.com%252Fimages%252Flarge%252Fpumas%252FPuma-Speed-Cat-72_LRG.jpg%3Bhttp%253A%252F%252Fwww.zapatospumas.com%252Fzapatilla

10


4. Luego selecciona el borde y en vínculo con clic e ingresa una

dirección URL como: http://es.puma.com/ comprobamos con la

combinación de tecla F12.

5. Exporta haciendo clic con el Menú archivo/exportar y elegimos html e

imágenes dando un nombre del banner.

Nota: Para guardar como gif animado a una animación, primero configurar la opción optimizar luego

exportamos como gif animado.

4

1

2

http://es.puma.com/

11


Rollover.

1. A la selección hacemos un clic derecho luego clic en la opción Comportamiento

Rollover simple.

2. Insertar un estado 2 (insertar nuevo estado), luego clic en dicho estado para insertar

otra imagen de un segundo producto de marca Puma.

12


3. Luego en esta selección del segundo estado desde el mirador blanco hacemos

arrastre hacia el mismo objeto y obtendrás esta ventana:

4. Luego acepta y presiona la tecla F12 para probar la aplicación

13


Zona Interactiva

Es parecido al recurso División con la diferencia que el dibujo o foto se mantiene y las zonas

seleccionadas se mantienen como hipervínculo.

Ejemplo:

1. Inserta una imagen de botón de ingreso (Ctrl+R) con lienzo 400*400.

2. Selecciona la herramienta Zona Interactiva (elige circular por el tipo de imagen)

3. Ingresa en vínculo una dirección URL de web

4. Luego acepta y presiona la tecla F12 para probar la aplicación

Aplicar Zona Interactiva

1

1 2

1

3

1

14


Botones.

Los botones son objetos generados a partir de otros objetos. Se conocen como símbolos y tienen la

particularidad de reconocer acciones del usuario.

Ejemplo:

1. Inserta un rectángulo de cualquier color para luego convertirá botón(tecla f8)

2. Convierte a botón seleccionando el rectángulo y haciendo clic en el menú modificar

símbolo/convertir en símbolo. Luego seleccionará la opción botón para después hacer clic en

aceptar.

Diseñar Botones para páginas web

1

1 2

1

1

1 2

1 3

1

15


3. Luego hacer un doble clic en el área verde de esta manera ingresaremos a los estados de

botón (4 estados).

4. Obtendrá 4 estados al primer estado ingrese un texto (ejemplo inicio) y en cada estado

copiará los mismo contenidos para luego en el estado sobre cambiar (color, tipo de letra, etc)

4

1

5

1

Doble Clic

16


5. Copiará primero haciendo clic en el estado a copiar como sobre y luego clic en la opción.

“Copiar Gráfico Arriba”.

1

1

2

1

17


6. Repetimos lo mismo para todos los estados que faltan y luego en el estado sobre cambiamos a

otro color el rectángulo para tener animación.

7. Salimos del estado haciendo doble clic en el lienzo en blanco o clic en “página 1”o Regresar

8. Selecciona con un clic el botón e inserta un vínculo (http://www.google.com)

3

1

18


19


Aplicar plantillas.

Podrás tener diferentes estructuras para poder construir una página web o sitio web desde

dreamwever.

Ejemplo.

1. Abre Dreamweaver.

2. Debe hacer clic en el Menú sitio/nuevo sitio.

3. Ingresa un nombre al sitio mi web.

4. Luego clic en carpeta para indicar en donde guardarás las página web y creas una carpeta

nueva con el nombre mi web (para este caso).

Aplicar plantillas básicas de diseño en dreamweaver

1

1 2

1

1

1

20


5. Luego clic en guardar para obtener el sitio creado.

1

1

2

1

1

1

21


6. Luego presionamos la tecla Ctrl+n y obtendremos la ventana de creación de documento html.

7. Hacemos doble clic en html o un clic en html para luego dar clic en crear.

8. Haciendo un clic en el menú Archivo/guardar (Ctrl+S) deberá elegir un nombre para

guardar.

1

1

3

1

2

1

1

1

22


9. Se ha guardado y creado automáticamente un carpeta templates y dentro de ella una página

index.

Glosario de Términos

Estados: Recurso Fireworks que permite animar o interactuar a los objetos.

Exportar: Es un proceso que se necesita realizar para convertir un trabajo de Fireworks en formatos que se

puedan insertar en una página web.

Vínculos: Propiedad de los objetos para invocar a un recurso web.

Zonas: Es la región deseada del lienzo sobre la que se desarrolla una acción.

Símbolos: Objeto especial de Fireworks que permite la recursividad del objeto, es decir usar nuevamente sin

necesidad de volverlo a crear.

Referencias:

Como crear botones en fireworks cs6 - YouTube http://www.youtube.com/watch?v=lp-x9VAmPCU 19

May. 2011 - 5 min. - Subido por cursosgiventti

23


I) Marque la alternativa correcta:

01.¿Cuáles son los tipos de símbolos podemos configurar en Fireworks?

a) Botón

b) b) Clip de película y botón

c) c) Gráfico, botón y clic de película

d) d) N.A.

02.¿Qué pasos debo seguir para crear un botón usando el teclado?

………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………

03.¿Para qué sirven el trabajo con plantillas?

………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………

…………………………………………………………………………………………………………………………………

Autoevaluación

24


Tema: Diseñar y crear componentes gráficos animados en fireworks

Enunciado:

Se desea diseñar una página web que contenga un banner animado publicitarios de

encabezados y botones para la empresa comercial Curacao.

Análisis.

- Objetivo:

Publicar información seleccionada de la empresa de comercializadora “Curacao” para

promocionar sus productos.

Publicitar los servicios (electrodomésticos) que ofrece la empresa.

- Audiencia:

Personas interesadas en adquirir un electrodoméstico.

- Tecnología:

Adobe Fireworks y Dreamwevaer.

1.Abrirá el dreamweaver para generarnos el sitio local.

2.Una vez que se encuentra en la ventana de dreamweaver generamos el sitio lo cal así:

3.Una vez que se tiene la ventana configuramos el sitio local en una unidad del disco:

Primero daremos un nombre al sitio, segundo clic en carpeta, tercero creamos una carpeta y

cuarto seleccionar y luego guardar

Práctica Guiada

25


4. Observará que el sitio ya está creado y mantiene una carpeta con el nombre del sitio asignado.

1 2

3

4

5

26


5. Genera una página presionando la tecla Ctrl+ N o Menú Archivo/ Nuevo. Luego elegimos

html.

6. Guarda presionando la tecla Crtl+S (Archivo/Guardar) y le damos al documento el nombre

del index.

7. Abre el Fireworks para diseñar una banner. Presionando las teclas Ctrl+N y genere un lienzo

con la siguiente extensión.

8. Usa las siguientes imágenes para este banner que creará la encontraremos en la página:

http://www.lacuracaoperu.com/home/ofertas

http://www.lacuracaoperu.com/home/ofertas

27


9. Primeramente en el lienzo de Fireworks insertaremos el logotipo presionando la tecla Ctrl+R

o Menú Archivo/Importar

10. Este logotipo se encontrará en el estado 1 luego crear un estado nuevo haciendo clic en:

11. Estamos ahora en el estado 2 entonces se debe insertar todas las imágenes de los productos:

28


12. Si usted observa la ventana superior en el lado derecho observará que en el estado dos la capa

1 obtiene 5 imágenes como mapa de bits.

13. Luego usted deberá insertar los el la siguiente forma:

14. A esta forma le daremos 11 lados haciendo clic en el punto que se señala llamado también

diamantes

29


15. Insertaremos un texto que indicará el descuento del producto, esta aplicación la

continuaremos en cada uno de los productos (podrás usar las teclas de copiar y pegar como

Ctrl+C y Ctrl+V).

16. Configuramos velocidad para cada uno de los estados (para el estado 1 y 2) así:

1

2

30


17. Ahora ya está nuestra animación en el primer estado prestamos el logotipo y en el segundo

estado los productos y sus ofertas.

18. Se debe hacer clic en el Menú Ventana /Optimizar, para luego seleccionar en esta venta

optimizar los siguiente:

19. Ahora guardaremos como “gif animado” haciendo clic en “Menú Archivo/ Guardar”

como y seleccionamos el formato gif animado luego clic en Guardar.

2

3

1

1

2

3

31


20. Luego ahora el banner creado se insertará a dreamwevaer:

21. Se debe buscar el archivo a insertar y luego doble clic para insertarlo:

22. Debe hacer una inserción de un botón para ello debemos tener ya un botón de 4 estados en

Fireworks y luego exportaremos como html para guardar en la carpeta de sitio local así:

23. Esta listo para exportar con el paso siguiente: Menú Archivo/Exportar, luego elegir la

carpeta de sitio local y la opción html e imágenes

24. Ya guardado en el sitio local en dreamweaver insertaremos así:

Menú Insertar/Objetos de imagen/Html de Fireworks

1

2

1

2

1

2

3

32


25. Luego se inserta el archivo que tenga extensión html generado al exportar el botón:

26. Luego una vez insertado seguiremos generando en Fireworks los siguientes botones de

inserción productos, galería y contactos para ser llevados a dreamweaver. (Guardaremos al

final presionando Ctrl+S)

Observación: Para lograr una mejor aplicación crea todos los botones en Fireworks y

una vez concluído exporta toda el área de botón así no tendrás que trabajarlos uno por

uno.

1

2

3

Página html que

tiene el botón

1

2

unidad 4

Documents