martes, 30 de septiembre de 2008

Algunas de las etiquetas más comunes del HTML

p

<p>Define un parrafo, el contenido del parrafo tiene un salto de línea antes y después</p>

br
<p>define un salto <br />
de línea</p>

em

Define un tramo de texto con <em> énfasis</em> que se verá en cursiva

strong
Define un tramo de texto con <strong>énfasis fuerte </strong> que se verá en negrita

img

Nos permite poner una imagen en el HTML.

Su estructura básica es la siguiente:
<img src=”url_de_la_imagen” />

a
No permite enlazar un texto con otro documento.
Su estructura básica es la siguiente:
<a href=”url_del_documento”> Texto enlazado</a>

ul li

Define listas desordenadas
Su estructura básica es la siguiente:

<ul>
<li> un elemento </li>
<li> otro elemento </li>
<li> otro más </li>
</ul>

y se ve asi:
  • un elemento
  • otro elemento
  • otro más

ol li
Define listas ordenadas
Su estructura básica es la siguiente:

<ol>
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

y se ve así:

  1. primer elemento
  2. segundo elemento
  3. tercer elemento

h1, h2, h3, h4, h5, h6

Definen títulos y subtítulos de nuestro documento.

<h1>Titulo </h1>

<p> Primer párrafo</p>

<h2> Subtitulo </h2>

<p> párrafo de contenido luego del subtitulo </h2>

domingo, 31 de agosto de 2008

Tandas para la prueba del 1/9

1era tanda
Alzugaray
Puchkariov
Rivero
Weiss
Albornoz
Bojorge
Chilotte
Coronel
Espalter
Frederik
Gutierrez
Olsina
Pedemonte
Sanchez
Silvetti
Villanueva

2da tanda

Basso
Cruz
Ferreri
Mosteiro
Nuñez
Odella
Orgambide
Pereyra
Riopedre
Vega
Espasandín
Blanco
Correa
D`Alessandro
Decarlini
Riccetto

lunes, 18 de agosto de 2008

Botones Flash

Como vimos en la clase pasada, entre los simbolos que podemos crear en flash tenemos los botones y estos tienen algunas caracteristicas especiales. Más adelante veremos como darle interactividad a nuestras animaciones con los botones, pero antes veamos como crearlos y que particularidades tienen de diferente a los otros simbolos.

Vamos a crear nuestro botón yendo a Insertar > Nuevo símbolo. Le ponemos un nombre, por ejemplo "primer botón" y en comportamiento seleccionamos "Botón" (también podemos transformar en botón algo que ya dibujamos en nuestro escenario haciendo click derecho y seleccionando convertir en símbolo).


Una vez dentro del modo de edición del símbolo veremos como para los botones tenemos una línea de tiempo especial, en lugar de tener los clásicos fotogramas encontraremos los 4 estados del botón:

Reposo: cuando el mouse no está sobre nuestro botón o no se ha hecho click sobre él.
Sobre: cuando el mouse está sobre el botón.
Presionado: cuando se hace click sobre el botón.
Zona Activa: es la zona donde es activo el botón.



Empezamos dibujando como queremos que se vea nuestro botón cuando esta en reposo, por ejemplo un rectángulo y el texto "presione aquí".

Luego creamos un fotograma clave para el estado Sobre, Podemos cambiar nuestro botón para que se vea distinto cuando el mouse pasa por arriba. Le cambiamos en nuestro caso el color de fondo al rectángulo.

Volvemos a hacer lo mismo para el estado Presionado, creamos un fotograma clave y realizamos los cambios.

Es importante saber que podemos hacer un botón que tenga imágenes totalmente distintas para sus estados e incluso podemos poner símbolos con animaciones en los estados, creando así botones mucho más interesantes.

Por último en el estado Zona activa definimos, como veíamos, donde es activo nuestro botón. Lo más común es simplemente crear un fotograma clave para que sea activo en toda su área. Si por el contrario queremos que un área distinta sea la activa borramos nuestro dibujo en este estado y dibujamos el área que queremos que sea la activa.


Volvemos a la escena y creamos una nueva instancia del botón arrastrándolo desde la biblioteca hacia la escena.



lunes, 11 de agosto de 2008

Flash, Símbolos e Interpolacion de Movimiento...


Símbolos y biblioteca

Las animaciones flash están pensadas fundamentalmente para la web, por lo cual es importante que ocupen el mínimo espacio para hacer la carga lo mas rápida posible.

La utilización de símbolos y la biblioteca es una solución importante que plantea flash en la búsqueda de realizar animaciones atractivas sin agigantar el tamaño de los archivos.

Además de ahorrar espacio, los símbolos nos permiten organizarnos cuando realizamos animaciones complejas. Cada símbolo posee su propia línea de tiempo y podemos incluso agregar símbolos dentro de símbolos, anidándolos.

Existen 3 tipos:

  • Gráficos
    • Imágenes o vectores con línea de tiempo dependiente de la línea de tiempo principal. No se lo puede manejar con Action Script
  • Clips de película
    • Su línea de tiempo es independiente de la principal y Se pueden manejar por Action Script
  • Botones
    • Tienen una línea de tiempo particular con los 4 estados del botón. Reposo - Sobre - Presionado - Zona Activa y pueden ser manipulados por Action Script

Para crear un símbolo nuevo vamos a Insertar > Nuevo Símbolo o apretamos Ctrl + F8

Para trasformar un objeto en símbolo lo seleccionamos Modificar > Convertir en Símbolo, o hacemos click derecho y en el menú contextual y elegimos Convertir en Símbolo o apretamos F8.

Una vez creado el símbolo este quedará guardado en la Biblioteca para que podemos reutilizarlo, para eso simplemente lo seleccionamos en la Biblioteca y lo arrastramos a donde queramos posicionarlo. Cada vez que reutilizamos un símbolo creamos una nueva instancia de él.

Las instancias son copias dependientes del símbolo, cada vez que realicemos un cambio en el símbolo este se verá reflejado en sus instancias.

Para editar un símbolo podemos hacer doble click sobre él en la Bibliotecadonde lo editaremos aislado o podemos una vez posicionado en el escena hacer doble click sobre la instancia y editarlo en contexto, para poder verlo en función a los otros objetos que tenemos en la escena.

Entonces vayamos a ver esto en la práctica...


Creando una interpolación de movimiento

Dibujamos un círculo en la escena y lo convertimos en símbolo (lo seleccionamos > hacemos clic derecho > convertir en símbolo).

Lo llamamos “circulo” y le ponemos que sea del tipo “clip de película” (asi vamos a tener a ese círculo disponible para utilizarlo en el transcurso de nuestra animación).


Avanzamos en la línea de tiempo y en el fotograma 10 insertamos un fotograma clave y lo movemos a otro lugar dentro de la escena. Avanzamos nuevamente en la línea de tiempo y en fotograma 20 insertamos otro fotograma clave y movemos otra vez nuestro objeto a otro lugar de la escena.

Llegado este punto tenemos el círculo posicionado en 3 lugares distintos a lo largo de la línea de tiempo, pero nos falta animarlo para que el círculo se mueva entre las 3 posiciones que le dimos en los fotogramas clave. Para eso podemos, hacer click derecho en alguno de los fotogramas que están entre los fotogramas clave y ahí poner crear interpolación de movimiento, o crearla desde el panel de propiedades en Animar > Movimiento.



Y listo! si no tuvimos ningún problema el círculo debería moverse entre nuestros fotogramas clave.

Otras modificaciones posibles dentro de una interpolación

Además de moverse podemos hacer que nuestro símbolo cambie de color, desde el panel de propiedades en el menú color en algún fotograma clave.
O podemos agregarle algún filtro como sombra, bisel o iluminación en la pestaña filtros del panel de propiedades.


Animación dentro de un símbolo

La idea es crear un símbolo que tenga un símbolo al que animaremos.
Creamos un rectángulo en nuestra escena y lo transformamos en símbolo tipo clip de película llamándolo “rectángulo animado”

Pero ahora vamos a editar nuestro símbolo y en particular su línea de tiempo (como vimos todos los símbolos tienen su propia línea de tiempo) Hacemos doble click sobre él, y entramos a editarlo, podemos ver como al lado de “Escena” ahora vemos el nombre de nuestro símbolo, en este caso “rectángulo animado”.

Estamos ahora trabajando sobre el símbolo y no sobre la escena.


La idea ahora es crear una interpolación en la línea de tiempo del símbolo. Para animar el rectángulo en este contexto, debemos trasformarlo en símbolo y crear una interpolación como ya aprendimos. Creamos una animación en la que el rectángulo suba y baje en 10 fotogramas (sube hasta el 5 y en el 10 vuelve a su posición original)

De esta manera tendremos un símbolo animado que podemos usar en nuestra escena. (como partimos de un objeto que ya estaba en la escena ya contamos con una instancia de este simbolo en la escena.)

Una vez lograda la interpolación podemos volver a la escena y veremos como en la línea de tiempo solo tenemos un fotograma, y es porque como habíamos visto los símbolos tipo clip de película tienen una línea de tiempo independiente a la línea de tiempo general. De todas formas si vamos a la previsualización veremos como nuestro rectángulo se mueve. (Ctrl + Enter)
Ya tenemos un símbolo que se mueve, podemos animarlo ahora en la línea de tiempo general.

Posicionamos el símbolo en el extremo izquierdo de la escena, creamos un fotograma clave en el fotograma 20 y lo posicionamos en el extremo derecho y creamos una interpolación de movimiento entre estos dos.
Si previsualizamos veremos como el rectángulo rebota a medida que va avanzando a la derecha.

domingo, 13 de julio de 2008

Gifs animados en Firewoks

Lo primero en es tener la base para nuestra animación, en este caso para hacerlo bien sencillo vamos a hacer una estrella que crece.
Ahora vamos al panel de "fotogramas" que nos permite hacer la animación. Para poder verlo, si no aparece en el área de trabajo, vamos a el menú "Ventana " y ahí "Fotogramas" si no podemos hacer shift+ F2.


Para ir agregando fotogramas, hacemos click en el iconito abajo en el panel de fotogramas...


... y vamos pegando y editando nuestra imagen en cada fotograma.

Si queremos cambiar la velocidad de nuestra animación, podemos controlarla definiendo cuanto tiempo demora cada fotograma. Para ello hacemos doble click sobre el número "7 " que vemos al lado de cada fotograma (siete es el tiempo por defecto que se va a demorar en pasar al siguiente fotograma). Hay que tener en cuenta que la cifra que ponemos ahí es una fracción de segundos, por defecto 7 centésimos de segundo. Si queremos que nuestro fotograma dure 1 segundo entero ponemos "100", medio segundo serian "50" ... bueno creo que quedo claro ¿no?



Otra cosa importante es cuantas veces queremos que nuestra animación se repita, y eso lo definimos desde la parte inferior del panel de fotogramas como pueden ver en la siguiente imagen.

Y esto es todo... con ustedes una animación hecha en fireworks en formato gif animado

lunes, 23 de junio de 2008

Matiz, saturación y luminosidad


Matiz: También llamado por algunos: "tono" o "croma", es el color en sí mismo, es el atributo que nos permite diferenciar a un color de otro, por lo cual podemos designar cuando un matiz es verde, violeta o anaranjado.

Luminosidad: "valor", es la intensidad lumínica de un color (claridad / oscuridad). Es la mayor o menor cercanía al blanco o al negro de un color determinado. A menudo damos el nombre de rojo claro a aquel matiz de rojo cercano al blanco, o de rojo oscuro cuando el rojo se acerca al negro.

Saturación: Es, básicamente, pureza de un color, la concentración de gris que contiene un color en un momento determinado. Cuanto más alto es el porcentaje de gris presente en un color, menor será la saturación o pureza de éste y por ende se verá como si el color estuviera sucio u opaco; en cambio, cuando un color se nos presenta lo más puro posible (con la menor cantidad de gris presente) mayor será su saturación.


Matiz, saturación y luminosidad eligiendo colores en Fireworks:


Fuente: wikipedia.org

sábado, 14 de junio de 2008

Guía básica para la combinación de colores

Saber elegir los colores que vamos utilizar en un proyecto puede ser una tarea complicada.
¿Qué colores combinan bien entre si?
¿Cuántos colores son demasiado y cuantos muy poco?
¿Qué color usar para un fondo? ¿y para un texto? ¿y para algo que queremos resaltar?

Les dejo aca un link a un artículo muy interesante que puede ayudarnos a entender un poco más sobre la como combinar colores.

http://www.cristalab.com/tips/53345/guia-basica-para-la-combinacion-de-colores

Existen además un montón de herramientas web que nos ayudan a elaborar combinaciones. Acá les dejo otro articulo que reune unas cuantas:

http://www.piglesias.com/blog/como-elegir-combinar-colores-5-herramientas-web-gratuitas