Curso de diseño de Web Sites Clase 3 Design Animation

8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation

1/17

Curso de Diseo Web Design Animation

Tercera Clase

En esta clase vamos a empezar a explicar uno de las herramientas fundamentales deDreamweaver, que es utilizado siempre al querer disear un Site.

Tablas

Antes de empezar a razonar el funcionamiento de las tablas, debemos tener preparadoel escritorio de nuestra Web Site correctamente.

Al abrir Dreamweaver debemos dirigirnos a nuestra Web Polar que hemos creado laclase pasada

Para eso vamos al grupo de paneles y abrimos Archivos

Si todo funciona correctamente abrimos nuestra Web Polar

Guese por la figura 1

Figura 1

Usted debera tener algo as (Figura 1)

Tenga en cuenta que tenemos que estar en la vista de Diseo. Para saber en cual vistase encuentra identifique en la barra superior las opciones de: Cdigo Dividir Diseo

Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 1

1


2/17


Cdigo: Muestra cdigo html

Dividir: Muestra el cdigo html y la vista de diseo

Diseo: Solo muestra la vista de diseo

Siempre diseara en vista Diseo

Tambin debe tener abierto el inspector de propiedades. Si no es as actvelo desde elmen Ventana y luego seleccione Propiedades

Una tabla es una herramienta que nos permite ordenar tres cosas:

Imgenes

Texto

Animacin

Las tablas estn formadaspor un conjunto de celdasen donde podremosinsertar, combinar agregarfilas y columnas.

Gracias a las tablaspodremos distribuir texto,imgenes y animacin deforma ordena y concreta ennuestro Site Para poderactivarla vaya al menemergente en Insertar y

luego Tabla

Figura 2

Las opciones que nosmuestra Dreamweaver para insertar una tabla son las que se puede apreciar en la

Figura 2

Filas: En este campo podemos insertar x cantidad de filas

Columnas: En campo podemos insertar x cantidad de columnasAncho de tabla: En este campo podemos ser precisos con respecto al ancho de nuestratabla (En pxeles)


2


3/17


Grosor de Borde: En este campo podemos obtener de nuestra tabla diferentes grosoresde borde

Relleno de celda: En este campo podemos insertar mediante el parmetro de medidapxel una cierta cantidad de relleno

Espacio entre celdas: En este campo podemos darle un espacio determinado anuestras celdas

Inserte la tabla con estos parmetros:

Filas: 2

Columna: 1

Le quedara algo as:

Figura 3

En este caso, Dreamweaver hizo lo que le pedimos:

Construyo una tabla de dos filas y una columna. Empiece a jugar con las tablas, paradarse cuenta de cmo construye las mismas Dreamweaver con los diferentesparmetros


3


4/17


Ahora bien. Como interpretamos la tabla?

En este momento, tenemos que darnos cuenta, que cada vez que diseamos algo enDreamweaver (sea una tabla u otra cosa), tenemos que seleccionar el mismo para verque tipo de propiedades tiene.

Para seleccionarlo, simplemente haga un clic con el Mouse en el objeto (este casotabla) en su borde

Ahora, observe el inspector de propiedades (Debajo del escritorio de trabajo)

Figura 4

Inspector de propiedades

En el inspector de propiedades (al seleccionar la tabla) podemos apreciar losparmetros esenciales que nos permitir manejarla

Tengamos en cuenta, que el manejo de tablas, es un %70 de Dreamweaver y conmucha practica nos ser muy fcil controlar todos los parmetros. Por eso mismo,practique

Antes que nada, es importante saber que una tabla es el contorno del objeto engeneral, y las celdas son los rectngulos que estn dentro de la misma.

En este caso, tenemos por un lado una tabla de dos filas y una columna, que es lomimo que decir dos celdas contenidas en una tabla. Es importante entender esteconcepto

Para seleccionar la tabla, simplemente haga un clic una sola vez un borde de la misma

Para seleccionar las celdas que estn dentro de la tabla haga otro clic una sola vezdentro la celda que desea seleccionar (no el borde)

Si seleccionamos la tabla, vamos a apreciar en el inspector de propiedades lossiguientes parmetros:

ID tabla: (Todo en Dreamweaver posee un nombre). En este campo complete sunombre. Por ejemplo: tabla 1

Filas: En este campo, podemos visualizar cuantas filas tiene la tabla. Si nosequivocamos cuando creamos la tabla podemos corregirlo desde aqu. Pruebe enmodificar el valor


4


5/17


Columnas: dem anterior con respecto a las columnas

An: En este campo puede ajustar la medida del ancho de la tabla en pxeles. En estecaso tenemos uno de 200 pxeles

Al: En este campo puede ajustar la medida del alto de la tabla en pxeles. En ciertoscasos Dreamweaver no le pone un valor determinado

Rell Celda: Para entender este comportamiento pruebe en poner su nombre en dichacelda. Para ello simplemente haga un clic en la celda y tipee

Ahora en Rell Celda inserta 50

Noto que Dreamweaver acomodo el texto en 50 pxeles de cada lado de la celda?Esta es una manera de acomodar los objetos que dispongamos dentro de las celdas(pero no la nica)

Esp. Celda: Este campo por ahora siempre inserte el valor 0 (cero)

Alinear: Aqu podemos ordenar nuestra tabla alineando correctamente la posicin de lamisma en el escritorio (y por supuesto las celdas que estn adentro) en:

Izquierda Centro Derecha

Borde: Las tablas pueden ser invisibles o o no. Aqu nos estamos refiriendo a los bordesde la tabla y de las celdas

Si queremos que sea invisible insertamos 0 (cero). Si queremos que se vea ennuestra Web deberemos insertar algn numero (por ejemplo 1)

Al ir incrementando este parmetro notaremos que los bordes de nuestra tabla yceldas son de mayor grosor

Pruebe lo siguiente:

Borde: 0 (cero)

Luego presione F12 en su teclado. Si no salvo el documento, hgalo.Recuerde que en este momento usted va a guardar esta pagina dentro del site polar.Puede ponerle cualquier nombre a su documento html, por ejemplo pruebatablas.htm

Ahora Dreamweaver le abri su navegador (ejemplo Explorer)

Hay algo en su documento? Ve los bordes de la tabla? Por supuesto que no

Ahora pruebe otra vez, pero esta vez complete en el campo Borde: 1 (uno)

Noto diferencia?

Ahora su tabla posee bordes que pueden visualizarse en el navegador


5


6/17


Siempre que esta diseando en Dreamweaver, al presionar la tecla F12 de su teclado,se abrir su navegador predeterminado. Esto es como quedara el trabajo final del lapagina (o documento)

Continuemos:

Color Fondo: En este campo puede insertar un color en el fondo de la tabla. Pruebediferentes matices!Es importante que recuerde en este caso, que esta modificando las propiedades deesta tabla. Eso significa que tambin las celdas respondern a estos parmetros opropiedades.Porque? Porque las celdas estn dentro de la tabla! (Despus veremos como modificarlos parmetros de las celdas junto al inspector de propiedades)

Color Borde: En este campo puede insertar un color de borde a la tabla y sus celdas.Recuerde que si la propiedad Borde es igual a cero , no se apreciara diferencia en sunavegador, ya que los bordes de la misma estn invisibles. Para notar este cambio elvalor de Borde deber ser 1 o ms

Ahora vamos a ver las propiedades de las celdas. Para ello haga un clic en una celda(Dentro de la misma)

Observemos las propiedades de esta celda en el inspector:

Figura 5

Antes de empezar a ver sus propiedades complete en la primera celda su nombre. Amodo de ejemplo miremos la figura 6


6


7/17


Figura 6

Inspector de propiedades en celda

Formato: Si es texto. Deseamos que sean encabezados o prrafos?

Fuente: En este campo, podemos hacer que nuestro texto tenga diferentes tipos defuetes que vienen predeterminados por Dreamweaver. Por ejemplo, si seleccionamos eltexto de la celda, el texto puede ser Verdana / Times New Roman / Arial y tantas otrasmas.

Implemente fuentes diferentes y visualcelo en su explorador y notara cambios (F12)Tamao: Aqu podemos elegir el tamao de nuestra letra

Tambin podemos modificar el color del texto, si es negrita, cursiva, alineada,justificada u otra

El resto de las opciones de las celdas son exactamente iguales al de las tablas. Dondepodemos modificar su alto y largo y tambin su color de fondo y borde

Podemos ingresar ms tablas dentro de las celdas. Solo POSICIONEMONOS dentro decualquier celda y vayamos a Insertar / Tabla de nuestro men emergente

Ejemplo:


7


8/17


Figura 7

En este caso, en nuestra segunda celda, insertamos una tabla que contiene 16 celdas.(4 filas y 4 columnas)

Tambin, si deseamos eliminar una tabla, basta con seleccionarla y apretar la teclaDELETE

Si deseamos eliminar celdas, seleccionmoslas y apretemos tambin DELETE

Ahora si empecemos con la parte practica

El sitio que empezara a disear es el de Polar, donde podr encontrar el trabajoterminado dentro de su CD en:

Ejemplos Webs/ Polar

O en la Web: http://www.designanimation.com.ar/polar/

En el CD tiene todos los archivos e imgenes necesarios para copiar su Web y poderpracticar correctamente lo que hoy aprendi.

Nota

Cuando usted ingresa a un site Web siempre va a ir su pagina principal (por Default)que es necesario predeterminarNuestro navegador, cuando ingresa a la Web buscara el archivo index.htm

Por ello es necesario tener en cuenta que los usuarios que naveguen ingresaransiempre a index.htm (como primera opcin)


8
http://www.polar.designanimation.com.ar/http://www.polar.designanimation.com.ar/


9/17


Este documento (index.htm) ser la cara de nuestra Web, ya que deber contener todala informacin del site (ejemplo en clarn: nota de tapa o principales noticias)

Esto es muy importante: Cuando otorgue un nombre a un documento este no podrtener espacios en blanco.

Ejemplo: mi pagina.htm (error)mipagina.htm (correcto)

En nuestro caso, Polar, es una empresa de industria grafica y deber contener en sumen, todas las opciones y links correspondientes para que los visitantes puedan de apoco ingresar en cada documento interno especifico

Index. Htm productos.htm dondeestamos.htm

(Empresa Grafica) (Tipo de productos que ofrece) (Ubicacin de laempresa)

En Index.Htm representaremos un Bienvenido con el slogan de la compaa.

Para entrar al sitio en si presionara ENTRAR

Pruebe y observe

Si presiono ENTRAR nos dirigiremos a intro.htm que se encuentra el sitio en si, con subarra de navegacin y especificacin del rubroAlgunos sites eligen el documento index.htm como presentacin formal. Otros la eligenpara ingresar al sitio directamente

Nosotros vamos a disear intro.htm y en la clase numero 4 index.htm (que es Flash)

Insertar imgenes en Tablas

Para insertar imgenes en las celdas, solo debe hacer un clic en una celda y luego en elmen emergente vaya a

Insertar / Imgenes

Trate de empezar con el site de polar (intro.htm), de acuerdo a las imgenes quecontiene en el CD. Ingrese el texto, y termine ese documento de forma COMPLETA

Consultemos, ya que seguramente empezara a tener dudas de cmo ordenar lainformacin.

Flash

Abra un nuevo documento del programa.


9


10/17


En esta clase vamos a estudiar la barra de herramientas y la lnea de tiempo delprograma, conjuntamente con la barra de propiedades.

Barra de propiedades

Figura 8

Esta barra posee todas las herramientas necesarias para disear los objetos queestamos interesados en implementar en FlashEmpezaremos de izquierda a derecha y de arriba hacia abajo

Herramienta de Seleccin: Selecciona Objetos simplemente arrastrando con el Mouse

Herramienta de Seleccin de Subseleccion: No es utilizado en esta versin de Flash

Herramienta Lnea: Grafica Lneas

Herramienta Lazo: Selecciona por medio de un lazo ciertas partes especificasde nuestros objetos

Herramienta Pluma: Grafica por medio de la pluma Bezier objetos

Herramienta Texto: Inserta texto en nuestros trabajos

Herramienta Ovalo: Grafica Crculos y valos

Herramienta Cuadrado: Grafica Cuadrados y rectngulos

Herramienta Lpiz

Herramienta Pincel

Herramienta transformacin libre: Modifica parmetros de los objetos (altura,ancho, radio y otros)

Herramienta transformacin de relleno: No es muy utilizado

Bote de tinta: No es muy utilizado en esta versin de Flash

Herramienta Cubo de pintura: Colorea objetos

Cuenta Gotas: Copia el color de objetos para modificarlo en otros

Herramienta borrador: Funciona como una goma de borrar

Herramienta Mano: Se utiliza para desplazarse en el escenario de forma libreHerramienta Zoom: Acta como una lupaEn este apartado ejemplificamos el concepto bsico y esencial de cada herramienta denuestra barraCon el tiempo, nos daremos cuenta con exactitud cual utilizar y en que caso particular

Lnea de Tiempo


10


11/17


En nuestra segunda clase aprendimos muchas cosas acerca de los Frames ofotogramas (pequeos cuadrados blancos de nuestra lnea de tiempo).

En esta clase explicaremos que son los fotogramas claves

Supongamos que queremos que un crculo posea cierto movimiento en nuestroescenario, por ejemplo que se desplace de izquierda a derecha

Para ello, pensemos:

Que necesito?

En principio necesitamos el objeto en si. El circulo

De la barra de herramientas, hacemos un clic en la opcin de herramienta Ovalo.Luego en el escenario hagamos el crculo deseado y observemos nuestra barra depropiedades del crculo

Figura 9

Y ahora la barra de propiedades:


11


12/17


Figura 10

Bien. Tenemos un circulo, que segn nuestra barra de propiedades tiene un dimetrode 81 pxeles, y que esta en cierta posicin del eje x y eje yCuando creamos objetos en Flash, poseen propiedades de color en su CONTORNO y ensu SUPERFICIE

Como controlamos estas matices de color?

En la misma barra de propiedades!

Puede cambiar el contorno y superficie de acuerdo a los parmetros deseados.Tambin puede modificar el GROSOR del contorno incrementado el nmero que seencuentra a su derecha

Flash es un programa, en el que los objetos que creamos en el ,tienen la propiedad demodificarse segn las necesidades de cada uno.

Por ejemplo, si deseamos no tener (o eliminar) el contorno, podemos seleccionarlo(haga un clic en cada borde) y luego eliminarlo con la tecla DELETE

En el caso del crculo, el borde es solo uno. En un cuadrado sern 4

Con la herramienta de seleccin, tambin podemos modificar el objeto.Por ejemplo, si deseo que el crculo se transforme en un semi-circulo, solo debemosseleccionar la mitad del mismo, y luego teclear DELETE

En caso que solo queramos que nuestro diseo solo posea bordes , tan soloseleccionado la superficie (Un solo clic en la superficie del mismo bastara conseleccionarla) y apretando la tecla DELETE lo eliminaremos

Tambin podemos mover el objeto. Para ello podemos seleccionarlo (Doble clic en la

superficie) y con la herramienta de seleccin lo podremos trasladar en x y en y acualquier parte de nuestro escenario

Acomodase, y cree varios objetos. Crtelos mediante la herramienta de seleccin.Colquelos en diferentes partes del escenario. Modifique el color de sus contornos y desu superficie. Divirtase en Flash!

Para continuar con el ejercicio, note la lnea de tiempo principal:


12


13/17


Figura 11

El circulo que hemos insertado en la CAPA1 origino un fotograma clave (punto negro)en el fotograma numero 1

Ahora bien, siempre es recomendable que esta capa posea un nombre, para ello consolo darle doble clic en CAPA1, usted podr modificar su nombre. Por ejemplo: mi

crculo

En un momento usted tendr varias capas, y en ciertos casos no sabr cual es cadauna de ellas, por eso conviene darle un nombre

Entonces:

Figura 12

Note el cambio del nombre de la capa de la figura 11 a figura 12

El ojito de color negro (que se encuentra en la lnea de tiempo, al lado del nombre de lacapa) indica si el objeto que se encuentra en el fotograma (en este caso circulo) esvisible o no

Haga un clic el punto que estaba debajo de este ojo, en esta misma capa y el objetocrculo desaparecer. Vuelva a clickearlo y volver a aparecer.

Esta herramienta sirve para no confundirnos cuando tengamos muchos objetos ennuestro escenario

De la misma manera, el candado que se encuentra al lado, nos permite bloquear odesbloquear los objetos


13


14/17


Si le da un clic al punto que se encuentra debajo del candado no podr mover elobjeto crculo (Prubelo)

Los objetos en flash (sean imgenes u otros dibujos vectoriales) deben estarcontenidos en una biblioteca

Esta es casi la parte ms importante del diseo en Flash Mx

La biblioteca nos permite declarar todos los objetos en el programaPor eso que cada vez que creemos objetos o importemos, es necesario agregarlo en labibliotecaNO LO OLVIDE

Seleccione el circulo (doble clic en la superficie) con la herramienta de seleccin osimplemente arrastre el Mouse con esta misma herramienta hasta seleccionarlo

Nota

Cada vez que un objeto vectorial o imagen esta seleccionado, podr identificar unospequeos poros en la superficie y contorno del mismo

Ahora vamos a ingresar a nuestro crculo a la biblioteca

Para ello presione F8 de nuestro teclado y se le mostraran diferentes opciones:

Figura 13

En este caso, Flash nos pregunta que tipo de SIMBOLO queremos agregar a nuestrabiblioteca personal (De hecho active la biblioteca desde VENTANA del menemergente y luego BIBLIOTECA)

En primera medida nosotros vamos a crear un GRAFICO y le vamos a poner el nombre

de CRCULO


14


15/17


Figura 14

Finalmente ponemos Aceptar

Si abrimos nuestra biblioteca (lo cual ustedes debieron hacerlo) podemos visualizarnuestro objeto circulo, que de ahora en adelante se llamara SIMBOLO GRAFICOCIRCULO

Figura 15

Los elementos en nuestra biblioteca van a serdeclarados uno a uno, tal como lo hicimos recin

Tambin podemos eliminarlo de la biblioteca,tan solo seleccionndolo y apretando DELETE,pero tenga cuidado! Si eliminamos un elemento

de nuestra biblioteca desaparecer de nuestroescenario por siempre

El objetivo de agregar o declarar nuestrosobjetos en la biblioteca de flash es para que elprograma lo identifique como una instancia.

Una instancia, por ahora para nosotros, es unsmbolo (grafico/botn o Movie clip) creado en labiblioteca, con el objeto de minimizar espacio ennuestra pelculaAl tener nuestro circulo como instancia,notaremos que al seleccionarlo en el escenario,

sus parmetros cambiaron y dejo de ser unaforma para convertirse en un smbolo debiblioteca

Ahora bien:

Deseo que esa instancia se desplace deizquierda a derecha (animndose) como deboproseguir?


15


16/17


Es muy sencillo.Todo depende de la velocidad que queramos que se desplace.

Para ello, tendremos que tener algo muy en cuenta

Fotograma clave: Indica que va a ver un cambio en la lnea de tiempo, y a su vez en unobjeto

En el Frame o fotograma numero 1 existe un fotograma clave ya que esta seleccionadocon un punto

Figura 16

Para que exista un cambio en ese objeto simplemente debemos posicionarnos en elfotograma numero 5 y luego apretemos F6 de nuestro teclado

Figura 17

Les quedo algo as?

Ya estamos a un paso de animarloAhora noten que el cabezal (Lnea de color rojo) se posiciono en el fotograma numero5. Solo basta mover nuestro objeto a la posicin que deseemos dentro del escenario

Podemos utilizar la herramienta de seleccin para trasladarlo, o tambinseleccionamos nuestro objeto o smbolo y mediante en inspector de propiedades lostrasladamos mediante los ejes x y y

Muevan el cabezal, desde el fotograma 1 al 5 y notaran que el cambio se realizo!Para probar nuestras pelculas en Flash, solo debemos apretar CROL + ENTER denuestro tecladoNotaron la diferencia? Estamos animando!

Pero la animacin puede complementarse de manera mas detallada

Si nos posicionamos en el fotograma clave, que esta en el fotograma numero 1 y ledamos un clic derecho vamos a encontrar varias opciones.


16


17/17


Elijamos la primera de ellasCrear interpolacin de movimiento y les quedara algo as:

Figura 18

Los fotogramas cambiaron de color, y ahora son violetas. Tambin se creo una flechaque va desde el fotograma clave nmero 1 al fotograma clave numero 5 oexpresado de otra manera:

Creamos una animacin de un smbolo grafico del Frame 1 al 5

Prueben en hacer CONTROL + ENTER y la animacin ser de diferente maneraSi desean que el tiempo de animacin sea ms lento, en vez de situar el segundofotograma clave en el Frame nmero 5, posicinenlo en el 20 (por ejemplo). Para ello,solo deben seleccionarlo y arrastrarlo al numero 20

Hasta aqu hemos terminado la clase numero 3. Sigan implementando movimientos yconsltennos!


17

Curso de diseño de Web Sites Clase 3 Design Animation

Documents

Transcript of Curso de diseño de Web Sites Clase 3 Design Animation