estan basados en tutoriales de la red…..lo malo es q no consigo encontrar el enlace de uno de ellos, pero este es el del otro.

1.- Empezaremos creando una imagen de 100×100 px con fondo blancoponemos los coleres a blanco y negro de la siguiente forma.

Creamos una nueva capa y aplicamos Filter->Render->Clouds

2.- Ahora duplicaremos esta capa un par de veces para tener 3 identicas.

Seleccionaremos la capa “Layer 1 copy 2″ y le aplicamos lo siguiente: Edit-> Transform->Flip Horizontal.

Hecho esto iremos a Layer->Layer style->blending options y ponemos el blending mode a “lighten“.

Vamos ahora con la primera copia de la capa “Layer 1 copy” y aplicamos sobre Edit-> Transform->Flip Vertical.

Y tras este cambio solo queda un Layer->flatten Image

3.- Ahora vamos a Filter->Sharpen->Unsharp Mask
Amount: 500%
Radius: 2
Threshold:0Y por ultimo Filter->Sharpen->Sharpen. Podemos pulsar CTRL+F para volver a aplicar este cambio

4.- Para concluir este minitutorial solo tendremos que aplicar el siguiente efecto de luz con este color: #C5940B

Pincha para ver el efecto

Si queremos volver a usar este efecto como una textura tendriamos que guardarlo como *.PSD en C:\Archivos de programa\Adobe\Adobe Photoshop CS2\Ajustes preestablecidos\Texturas.Obtendremos como resultado algo parecido a esto

Pequeña definicion de CSS:

hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Una regla de CSS está formada por una parte llamada “selector” y otra parte llamada “declaración”.

La declaracion indica que hay que hacer y el selector te dice a quien hay que hacerselo.

Aunque CSS define una docena de tipos de selectores, la mayoría de las páginas web se pueden definir utilizando solamente los cinco selectores básicos. Además, Internet Explorer 6, uno de los navegadores que más utilizan los usuarios, no soporta los selectores avanzados, por lo que es casi obligatorio utilizar solamente los selectores básicos.

Selector universal:

Se usa para seleccionar todos los elementos de una página. Está representado por “*”. La forma mas comun de verlo en una hoja CSS es del siguiente modo:

*{ margin: 0;
padding: 0;
}

Selector de tipo o etiqueta:

Para utilizar este selector, solamente es necesario indicar el nombre de la etiqueta HTML correspondiente a los elementos que se quieren seleccionar. De esta forma tendremos todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.

p{…..}

En el anterior ejemplo esariamos seleccionando todos los elementos “p” de una pagina. De este modo podriamos hacer lo mismo con los elementos “h1″ o el body de nuestra pagina. Ej:

body{ font-size: 10px;
color: 000000;
}
h1{margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}

Los selectores se pueden encadenar para aplicar una misma regla a varios elementos diferentes. De este modo estaremos ahorrandole peso a nuestra hoja de estilo CSS. En el siguiente ejempo definimos unas caracteristicas generales para varios selectores y mas abajo le damos a cada uno de ellos unas caracteristicas mas concretas.

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector descendente

Permite seleccionar los elementos que se encuentran dentro de otros elementos.

p span { font-weight: bold; }

Estariamos visualizando en negrita el texto de un “spam” contenido en un elemento “p”.

<p><spam>spam en parrafo</spam></p>

Importante es no confundir el selector descendente con la combinación de selectores:
este estilo se aplicaria a todos los “p”, “a”, “spam” y “em”

p, a, span, em { text-decoration: underline; }

mientras que en este caso el estilo se aplica solo a los elementos “em” que se encuentran dentro de “p a span”

p a span em { text-decoration: underline; }

Selector de clase
Son los mas usados junto con los selectores ID. Utilizando este selector, se pueden seleccionar todos los elementos de la página cuyo atributo class coincida con el selector. Este tipo de selector es imprescindible para poder seleccionar elementos específicos de la página. ¿Cómo se pueden seleccionar tres párrafos concretos de una página HTML en la que cada párrafo se encuentra en una zona diferente?
En este tipo de situaciones, se asigna un atributo class específico a los elementos que se quieren seleccionar y en la hoja de estilos CSS se utiliza el selector de clase.

.especial { color: red; }

<p>Primer párrafo</p>

<p class=”especial”>Segundo párrafo</p>

<p>Tercer párrafo</p>

Combinando este selector con los anteriores se puede restringir el alcance. En este caso estariamos aplicando este estilo a los elementos “p” que cuya clase sea igual a la indicada (en este caso “aviso”).

p.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}

Importante no confundir este selector con los anteriores.

Los “p” cuyo atributo class=”aviso”

p.aviso { … }

Los elementos con atributo class=”aviso” que estén dentro de cualquier elemento de tipo “p”

p .aviso { … }

Todos los elementos “p” de la página y todos los elementos con atributo class=”aviso” de la página

p, .aviso { … }

Selectores de ID

CSS también permite seleccionar elementos HTML en función del valor de su atributo id. La explicación es la misma que para el selector de clase. La sintaxis utilizada también es la misma, excepto que en este caso usaremos el símbolo “#” en lugar de “.”

#especial { color: red; }

<p>Primer párrafo</p>

<p id=”espacial”>Segundo párrafo</p>

<p>Tercer párrafo</p>

La principal diferencia entre este selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.

Pues sí señores, algo que durante tiémpo se pensó improbable se empieza a vislumbrar en el horizonte.

Adobe, en alianza con varias empresas que generan dispositivos de distribución de datos y entretenimiento móvil, ha anunciado el Open Screen Project. Este proyecto abre las especificaciones del formato SWF 9 y de los FLV, ademas de esto, elimina las restricciones de licencia sobre el uso de los formatos. Permitiendo crear un Flash Player de código abierto.

Adobe resume en esta lista la direccion que tomara el proyecto.

• Quitará restricciones del formato SWF y el FLV/F4V.
• Publicará el API para portar el Adobe Flash Player a dispositivos.
• Publicará el protocolo Adobe Flash Cast (protocolo de transmisión de video en tiempo real para dispositivos móviles) y el protocolo AMF.
• Reducirá a 0 el coste de licencia para dispositivos, haciendo completamente gratis las próximas versiones de Adobe AIR y Adobe Flash Player.

Posibles consecuencias de esto: Podremos encontrarnos con reproductores flash player en sitios como PSP, iPhonen, Nintendo Wii, etc…. Y como decimos en el encabezado, los usuarios de Linux podrán programar su propio Flash Player 9.

Todo esto junto con anteriores acciones realizadas por Adobe comolas abajo citadas nos hace intuir hacia donde se dirige Adobe.

• Liberacion del motor de Actionscript 3, con la licencia de Mozilla.
• Crearon Apollo (Ahora Adobe AIR) para desarrollo de aplicaciones de escritorio.
• Lanzamiento de Flex Builder 3 para Linux.
• Regalan licencias de Flex Builder 3 si eres estudiante, profesor o tienes algun tipo de relacion con la docencia.
• Anunciaron que se suprimira el formato binario .FLA por el formato abierto XFL basado en XML.

Cierto es que muchas de estas cosas se las debemos agradecer a Microsoft y a su famoso Silverlight, con el cual pretendian comerle terreno a Adobe. Pero parece que la tactica comercial adoptada por Adobe hara que Silverligth muerda el polvo…..O al menos que no alcance el peso que Microsoft desearia que tubiese.

Noticia via Cristalab.

¿Que es firebug?

Firebug es una potente heramienta para firefox te permitira visualizar el contenido del CSS  y de documentos html/xhtml desde tu navegador, de una forma sencilla y rapida. Su instalacion es bastante sencilla, y puedes usarlo tanto si tienes un Mac, Windows o Linux, el unico requerimiento es tener instalado firefox o iceweasel.

Puedes descargar el plugin de la web oficial de firefox.

Entre las ventajas que ofrece este plugin podemos destacar la posibilidad de “modificar” el CSS de una web. De este modo no solo podremos ver como esta diseñado el CSS de un sitio, sino tambien como afectaria cualquier cambio al diseño de este. Evidentemente estos cambios no son reales, pues no pedemos cambiar el CSS de flickr por ejemplo, pero podemos ver a que afecta cada cosa con un simple golpe de raton.

Como digo es una potente herramienta tanto para diseñadores como para desarrolladores, ademas no se silima a CSS y html/xhtml, tambien esta ideado para desarrolladores de javascript.

Os recomiendo encarecidamente que veais este videotutorial (esta en ingles pero es sencillo de seguir) para que veais rapidamente lo que puedes hacer con esta herramienta.

Tutorial (tutorial original de css-tricks)

He decidido empezar con este tutorial, ya que es de los primeros efectos que aprendí a hacer con flash. El código esta en ActionScript 2.0.

Al hacer un botón normal en flash, si pasamos demasiado rápido sobre el puede que la animación se corte a mitad, con el efecto Fade-in Fade-out , cuando salgamos del botón la animación se parará y se reproducirá hacia atrás.

Lo primero siempre es una buena organización para trabajar, así que siempre procuraremos tener nuestras capas bien organizadas, diferenciando entre la parte de diseño y la parte de programación.

Organización de capas.

img_1

En la primera capa siempre colocaremos la mayor cantidad de código posible, para así tenerlo localizado si hubiese que cambiar algo. En el resto de las capas pondremos el botón en cuestión y el resto de componentes gráficos, como el fondo y el él letrero en este caso.

Una vez hemos dibujado el botón, tendremos que hacer la animación que queremos que se reproduzca. Para ello transformaremos nuestro dibujo en un MovieClip. Una forma rápida de hacer esto es teniendo seleccionado nuestro dibujo y pulsando F8. Le damos un nombre cualquiera. En mi caso Le he llamado botón, y le puse boton_mc como nombre de instancia.

img_2

Bien, con esto ya tendríamos preparados nuestro boton_mc para hacer la animación que queremos que se reproduzca al pasar el cursor sobre él y poner el código necesario para que funcione correctamente.

Haciendo la animación del botón.

img_3

Nuevamente hemos diferenciado la parte de programación de la de diseño, aunque dentro de este mc el código va a ser bastante sencillo. Solo tenemos que poner en el primer y último fotograma un stop. Esto lo haremos seleccionando 1º uno de ellos, pulsamos F9 y escribiremos:

stop(); //esto controla que no se ejecute la animación a no ser q se lo digamos.

Repetiremos lo mismo con el último fotograma.

*Nota: mi animación es de 20 fotogramas y esta a 30fps, pero esto es a gusto del consumidor.

Cuando tengamos listo el mc (diseño del botón y animación del mismo) estaremos totalmente listos para volver a la escena donde esté. En mi caso la escena principal del fla (img_1) .

Una vez en el lugar correcto seleccionaremos el fotograma de la capa “as” y pulsaremos nuevamente F9.

Código:

boton_mc.onRollOver=function(){
onEnterFrame=function(){
if(boton_mc._currentframe!=20){
boton_mc.nextFrame();
}else{
this.stop();
delete this["onEnterFrame"];
}
}
}
boton_mc.onRollOut=function(){
onEnterFrame=function(){
if(boton_mc._currentframe!=1){
boton_mc.prevFrame();
}else{
this.stop();
delete this["onEnterFrame"];
}
}
}

Descargar archivos del tutorial