Tip Photoshop: Así se hace un pattern

Más simple no podría explicarlo:

1- Creas tu diseño, con fondo transparente si así lo prefieres.
2- Vas al menú y escoges esta opción

 3- ...Y deberías ser feliz.

Un panda en Flickr

Pues nada, que estaba viendo la nueva guía de Flickr, muy práctica, sin necesidad de video, de una manera muy directa nos muestra a travez de una línea de tiempo de pasos a seguir, para que sirve cada botón y muestra las opciones que tenemos al ver una imagen en particular.

La explicación en la misma página, en vivo, mientras la estamos usando, no se si es copiado pero me parece una gran idea ;)

-Click en las imágenes para ampliarlas-

Me pareció, además de práctico, divertido, no solo por la simplicidad para entenderlo sino por la sorpresa que aparece en el último paso :D

Guía de Action Script 2 para Novatos / Dummies - Episodio 2

Como dice la cancion de Pedrito: "...después de tiempo..." asi es que empecemos:

Esta guía es SOLO para aprender lo básico de Action Script 2. Si estas viendo por primera vez esta guía te invito a ver el Episodio 1: Acciones para un Botón, que te ayudará a entender mejor este episodio y los que sigan - No cuestiones, solo hazme caso -.

Antes de empezar te recuerdo algunos conceptos fundamentales que debes conocer previamente para manejar el programa y entender esta guía (en orden de aprendizaje):

• Línea de tiempo y los tipos de fotograma (fotograma, fotograma clave, fotograma clave vacío)
• Los símbolos (los objetos) y sus tipos (botón, movie clip , gráfico)
• Las interpolaciones (formas de animar los objetos)
• La biblioteca
• Las instancias (nombres de instancia)
• Y obviamente el Action Script

Si desconoces estos conceptos, te recomiendo el Curso en Línea de Flash (gratuito).

Como esta guía es de action script, no trataremos otra cosa, pero eso sí, tienen que manejar bien estos conceptos para programar en Flash con el AS2...

EPISODIO 2 - 1ra parte: loadMovie (cargando un SWF dentro de otro SWF)

El método loadMovie nos va a permitir hacer lo siguiente:

1- Cargar un SWF dentro de otro SWF.
2- Colocar el SWF cargado en un nivel que elijamos...

Ahora... ¿Qué significa cargar un SWF dentro de otro SWF?
Imagínate que tienes dos cajas: una gigante y otra enana - minúscula, casi microscópica, prácticamente invisible... jejeje ¿se entiende la idea no? -.

Ahora, cuando digo "cargar" me refiero a meter una dentro de otra... - Obvio que la caja enana va dentro de la gigante, que si estás pensando hacerlo al revés... podrías pero... bueno no nos desviemos -.

Si vemos cada caja como un SWF, entonces tedríamos un SWF (caja gigante) que contiene (carga) a otro SWF (caja enana) <-- ¿Y cómo se hace eso? pues con el maravilloso método: ¡¡¡loadMovie!!!

Si hasta aquí no has entendido, tienes dos caminos:
- Re-leer detenidamente o
- Colocar tu consulta escribiendo un comentario en este post...

Pero, si hasta aquí has entendido la idea <-- ¡Genial! ¿ya vez que no es difícil?... todavía :D Continuemos... - Por cierto en esta ocasión estoy usandoFlash CS4, no es necesario esta versión pero si la tuvieses mucho mejor -.

En Flash, creamos un nuevo documento, luego vamos a cambiar el tamaño de nuestro documento, las medidas serán: 500 píxeles de ancho por 500 píxeles de alto (ver imágenes debajo).

- A partir de ahora: click en las imágenes para ampliarlas -

Una vez que terminamos de cambiar las medidas o tamaño de nuestro documento Flash, lo guardamos con el nombre: gigante.fla, de inmediato vamos a generar el SWF para este, es así que tenemos dos caminos:
- Presionar, al mismo tiempo, las teclas CONTROL y ENTER, o...
- Menú CONTROL/opción Test Movie (Probar película)

Flash nos mostrará nuestro SWF tal cual lo tenemos hasta el momento: Vacío, en blanco, sin ningún elemento <-- hasta aquí tenemos hecha nuestra "caja Gigante"... Ahora repetiremos casi los mismos pasos de gigante.fla para hace la "caja Chica":

- Abrimos un nuevo documento Flash.
- Dibujamos un circulo rojo.
- Guardamos el archivo con el nombre: enana.fla
- Generamos el SWF de enana.fla
Después de estos pasos, enana.swf debería verse así (ver imagen debajo)

Hasta este momento ya tenemos nuestras dos cajas, la Gigante (gigante.fla) y la Enana (enana.fla)

Ahora viene el truco para colocar (cargar) la Enana dentro de la Gigante, es hora de la magia del Action Script...

En gigante.fla aplicaremos el método Loadmovie.
Hacemos clic en el primer fotograma, luego vamos a menú Windows (Ventana) / Actions (Acciones) <-- esto abrirá el panel de Acciones, también puedes usar el atajo por defecto presionando la tecla F9.

En el panel de acciones colocaremos "las palabras mágicas" (el código):
loadMovie("enana.swf", 1); <-- Vamos a descifrar que significa cada palabra y signo...

loadMovie significa cargarPelícula... - está escrito sin espacio entre ambas palabras porque así es la sintaxis (forma de escribir) del Action Script -

"enana.swf" <-- es la "Caja Enana" que irá DENTRO de la "Caja Gigante". No olvides que estamos haciendo esto en gigante.fla, Las comillas también son parte de la sintaxis.

, <-- La coma está allí por sintaxis, está para separar el nombre del SWF a cargar del número de Nivel donde se cargará dicho SWF.

1 <-- Es el número de nivel en donde va la caja - Este asunto del NIVEL lo veremos en el próximo episodio para no enredarnos con tanto concepto, así que por ahora lo dejaremos así -

; <-- El punto y coma indica el final del código. Finalmente, traduciendo loadMovie("enana.swf", 1); dice: Cargar la película "enana.swf" en el nivel 1

Y ahora para poder ver el resultado final, 1ro vamos a guardar los cambios (nunca olvides guardar los cambios recientes), luego volveremos a generar el SWF a gigante.fla, debería verse así...

Tal cual en el episodio anterior, veamos la Misión Dummie de ahora:
Usando el método loadMovie (¿cuál más?) lograr esto:

Descarga los archivos de este episodio.

En el siguiente episodio veremos el punto 2: Colocar el SWF cargado en un nivel que elijamos...

Espero que sirva de guía para todos los que no somos programadores pero que queremos aprender apoyados en nuestra persistencia y práctica.

Hasta la próxima...

Este tutorial, que toma tiempo y esfuerzo hacer, está bajo una licencia Creative Commons (está indicado en el sidebar del blog) <-- no se permite para fines lucrativos, gracias por respetar mi trabajo.

FLASH CS4 para diseñadores - Enero a Marzo

Este es un curso gratuito en línea, en inglés, para quienes no sepan y quieran aprender sobre Flash CS4. Personalmente te sugiero que aun sin saber mucho de inglés, con lo poco que sepas estará bien, considernado que es gratuito.

Como es un video curso, podrás ver que herramientas se usan pero como es "en vivo" no podrás retroceder el video así que trata de mantener la atención.

Este video curso durará 10 semanas; inicia el martes 5 de enero a las 6:00 (en Lima) <-- ver horario para otras latitudes.

Ver horarios y enlace para inscripción.

Espero que puedan aprovechar esto, saludos.

Videos del taller de Ariel Olivetti

Una de las cosas más interesantes, para mí como artista gráfico, de la última feria del Libro fueron los dos días de taller con uno de los más reconocidos ilustradores de Marvel y que además es latinoamericano (argentino): Ariel Olivetti, que demostró ser una persona muy sencilla y amable, sin poses ni arrogancias innecesarias en alguien con sus logros.

Yo capturé en video lo más posible, pero la fuerte iluminacion del lugar no permitio hacer algo mejor; de todos modos se puede apreciar algo; dejo el primer video a continiación (ya viene el segundo esta semana...)

Ariel tiene una técnica muy práctica para realizar pintado de forma rápida y con buen acabado, pero además de eso nos nutrió con su experiencia al recomendarnos como deberíamos mostrarnos profesionalmente, incluso en nuestra imagen personal. Aprendí mucho y de hecho podré aplicar lo que nos mostro este gran artista del comic.


Para apreciar más detallada la técnica de pintado de Ariel, la Nuez nos tiene un muy aprovechable post.

Por la Nuez me entero también de esta completa información del taller de Ariel, hay fotos y videos de buena calidad, graicas a la gente de Marvel perú.

Espero que la información sea de ayuda para todos, hasta el próximo post.

efecto terminator 2 - tutorial photoshop

Solo por disiparme hice esto para colocarlo como imagen en el messenger...

Sin querer casi terminé haciendo un tutorial de como lo hice, aquí va para quien quiera:

INGREDIENTES:
- Una fotografía tuya (o de quien quieras)
- una Pentium 4 mínimo... digo, si no quieres quedarte esperando un par de horas a que salgan los efectos.
- Photoshop CS... ¡suficiente!
- Y una cucharadita de paciencia.

El resto del tutorial (el secretito del sabor) lo puedes descargar AQUI
Espero te sirva el tutorial, ¡bytes!

Sacando duplicado del DNI - ¿tutorial?

Aprovechando un involuntario día de descanso salí de casa a tramitar el duplicado de mi Documento Nacional de Identidad o DNI (hasta ahora no resuelvo el misterio de ¡¿Cómo demonios se perdió?!). Un familar me sugirió ir al Banco de la Nación más cercano, que está en la Panamericana Norte (entre el Totus y La Senati)... "allí es más rápido" me dijo. Yo muy obediente me dirigí allá ha hacer mi cola de 1 hora y 15 minutos apróximadamente para poder pagar los S/18.50 por tributo para el duplicado del DNI.

Luego de ello y tras 2 helados muy necesarios (terrible calor y yo sin gorra) me dirigí al local de la Reniec (Registro Nacional de Identificación y Estado Civil) que se encontraba a un par de cuadras de allí; para darme con la visión de una gigantesca cola, como de dinosaurio, que era el doble de la del banco, para tramitar el bendito DNI.

Resignado, me dirigí al vigilante, perdón, el Señor Vigilante que muy atento me dijo que para el duplicado no era necesario tomarme foto y que hiciera mi cola... o... que fuera a una cabina (café internet) e hiciera el resto del trámite desde la página web de la Reniec<--- ¡OH MARAVILLOSA INTERNET!<--- ADVERTENCIA: para poder hacer el trámite por internet DEBES PAGAR EL MONTO EN CAJA, no podrás hacerlo si lo pagas en cajero automático.
Fue así que me ahorré quedarme el resto de la tarde parado, insolándome y con una agobiante sed. Entonces di media vuelta, con el rostro lleno de felicidad (para todo lo de demás existe Visa) y me retiré a casa donde mi linda computadora con conexión me esperaba.

No me esperaba que el sitio web de la Reniec fuera tan fácil de manejar y tán práctico, realmente fue un gusto usar su servicio. ¡Incluso sus pop ups! yo tengo habilitada la opción de bloquear los pop ups pero por si las dudas los permití para poder ver estas claras advertencias:
Fue muy practico hacerlo por la web incluso puedes escoger el local de la Reniec donde ir a recogerlo y hasta te ponen un formulario con una captura del recibo del banco donde has pagado para que te guíes mejor.
Si has hecho todo correctamente (de hecho que si, está facilísimo) te saldrá un mensaje como este:
... y deberías ser feliz :D
Sitio web de la Reniec

P.D: ¿podría llamar a esto un tutorial?

Viewbook: catalogo de fotos libre

Gracias de nuevo a Criterion Excelente servicio en linea para que crees tu catálogo para internet. Esta en face Beta, como casi todo en la web. Puedes publicar máximo hasta 250 fotos y obtener 5 presentaciones de tus imágenes; lo que más me ha gustado es que puedes embeber* las presentaciones de tus fotos en tu blog o sito web.
*Cuando digo embeber me refiero al procedimiento que haces para poner videos de youtube en tu blog: copias el código donde dice "embed" luego lo pegas en tu blog o sitio web y listo!

Observaciones:

• Primero que nada te logueas e ingresas (luego de loguearte te saldrá la pantalla de ingreso al servicio sin necesidad de que confirmes--> cool!)
• Subes tus fotos, creo que en eso no hay problema.
• Lo siguiente es que crees la presentación de tus fotos, para eso haces clic en la pestaña "New" (fíjate en el lado superior izquierdo de la página... esta bien esta bien te dejaré una imagen para que te guíes mejor: clic en la imagen para ampliar) ----->
• Luego de eso veras tu presentación creada con el nombre que le diste. Ahora le haces clic donde dice "Image Library" para ver tus fotos, a cada foto le haces 1 clic sin soltar y la arrastras hacia la izquierda y lo sueltas en donde vez el nombre de tu presentación, en mi caso es: Lex Images
• Una vez que terminas de colocar tus fotos en la presentación le haces 1 clic a tu presentación, en mi caso: clic a Lex Images y aparecerán varias opciones (en pestañas) sobre tus imagenes, entre ellas veras una que dice "Share" (es la última), bien ¿que esperas? ¡hazle clic a la opción Share!
• Ok ahora todo se vuelve oscuuuuroooo y aparece el cuadro de las "Share Options" aqui es donde encontrarás 2 opciones, hazle clic a la opción Embeding--> ¿por qué? --> ¡Por que te lo estoy diciendo! ademas alli está el mágico código que te permitirá colocar tu presentación en tu blog o sitio web.
• Ahora copias, vas a la plantilla de tu blog o al html de tu sitio y pegas el código --> eso si lo sabemos ¿verdad que sí?--> dí que sí >:-(

Si haz hecho todo bien el resultado debe ser algo así:

Con todo y todo espero que esto te sirva y así tengas un muy buen recurso para mostrar tus trabajos. Si no te sale me dejas un comentario para ver si puedo ayudarte, byes...

Nota Memoria: no debo olvidar la URL para mi presentación en viewbook: http://lexex.viewbook.com

Registrando problemas con IE - css

Estoy rediseñando el sitio web de la editorial. La versión anterior era totalmente en flash, pero para hacerla más accesible decidí realizarla en CSS y xhtml.

A partir de ahora este post servirá para registrar todos los problemitas que encuentre en el camino así como su posible solución.
Lo que sigue es el registro del día de ayer (14-nov)

Bien, como muchos estoy en constantes apuros cuando se trata de optimizar el xhtml para que se ves correctamente tanto en IE como en Firefox y otros que sí siguen los estándares.

Lo que quiero
Realizar una barra color rojo mediante 1 caja en CSS. Para esto he usado un archivo css independiente del xhtml (que es lo más recomendable) asi es que escribí:

En el CSS:
#menubarra{ position:absolute; background-color:#FF0000; top:100px; height:100px; z-index:10;}

En el XHTML:
<body>
<div id="menubarra">¿porque caraxo no sale?</div>
</body>

Lo que sucedió
Que solo se veía el texto pero de la caja roja nada de nada

Solución temporal (hasta nuevo aviso)
Coloque la línea de “menubarra” del documento CSS dentro el XHTML, es decir un CSS interno (cortar y pegar).

En el XHTML:
<head>
<style type="text/css">
#menubarra{ position:absolute; background-color:#FF0000; top:100px; height:100px; z-index:10;}
</style>

</head>

Gracias Internet Explorer por complicarme la existencia.
Si sabes de otra forma de solucionar esto, es decir para que el codigo esté en el archivo CSS independiente, avísame por favor. Mientras tanto seguiré googleando y claro preguntando en los foros.

Actualización (21 nov 2007)
Encontre la solución:

En un principio, antes de incluir la linea del css al mismo xhtml, mi documento css tenía esto:

/*--TODO MENÚ--*/

/*--botones Menú--*/
#menufondo{ position:absolute; width:741px; height:25px; background-color:#8AB7BC; z-index:5; margin-left:20px; top:112px; }

¿Sabes donde está el error (según IE)?
La gran pista: El error (según IE) está en esta línea: /*--botones Menú--*/

Ahora si la pregunta que te hará acreedor de una amburguesa Bembos de S/. 2.50: ¿cuál caracter y porqué es considerado un error para IE?

Tienes hasta hoy a las 7 pm para responder.

La respuesta mañana a las 9am...

Actualización (22 nov 2007)
Bueno se perdieron la hamburguesa, la respuesta es el maldit... bendito caracter con tilde: "ú"
Que irónico ni siquiera era algun tag sino lo del comentario. Para la próxima todo comentario sin tilde.

Guía de ActionScript 2 para Novatos / Dummies - Episodio 1

Lima-PERU 13/01/2007 //--> 04:11 (otra noche sin dormir)

Holas este es la 1ra entrega de mi guía para Dummies (novatos) en Action Script 2 (AS2)
Me tomó más tiempo del que creí hacerlo pero bueno ya está a ver si les sirve de ayuda como es mi deseo.

No se necesita ser programador para aprender sobre action script, es como aprender palabritas en inglés para poder entender algunas cosas, ya saben "pollito chiken, gallina hen..." claro que si sabes algún lenguaje de programación (html no es lenguaje de programación) entonces te será más fácil aprender Action Script.

A ver, cuando empecé, en ese tiempo usaba el Flash 5, lo primero que hice para comprenderlo fue revisar el tutor del mismo programa, allí me enteré de algunos conceptos fundamentales para manejar el programa (en orden de aprendizaje):

• Línea de tiempo y los tipos de fotograma (fotograma, fotograma clave, fotograma clave vacío)
• Los símbolos (los objetos) y sus tipos (botón, movie clip , gráfico)
• Las interpolaciones (formas de animar los objetos)
• La biblioteca
• Las instancias (nombres de instancia)
• Y obviamente el Action Script

Como esta guía es de action script, no trataremos otra cosa, pero eso si, tienen que manejar bien estos conceptos para programar en Flash con el AS2.

Empezaremos con...

ACCIONES PARA UN BOTÓN

¿Cómo programar un botón?
Iniciamos creando el botón: dibujamos un círculo en el escenario, lo seleccionamos, lo convertimos en símbolo y lo nombramos como “botonmc”

Apartir de ahora clic en las imágenes para ampliarlas

Luego agregamos un fotograma clave en el fotograma 5 de la línea de tiempo haciendo clic derecho sobre el fotograma y luego clic en "insertar fotograma clave"

Otra forma de agregar fotogramas clave es hacer clic en menú de opciones / insertar / línea de tiempo / fotograma clave.

Sigamos... para ver el cambio de fotogramas, en el fotograma 5 escribo "Dummies"
Para mantener orden, creamos otra capa en la línea de tiempo (fig 1) la llamaremos "AS" (Action Script)
Si no sabes renombrar capas, Haz doble clic sobre el nombre de la capa y escribe el nombre que se propuso: "AS"... (fig 2)

Así tendremos el código (script) en un solo lugar

Ahora la idea va asi:
Estamos en el fotograma 1 de la línea de tiempo, al hacer clic en el botón nos debe llevar y detenernos en el fotograma 5.

Es por ello que pondremos código en el fotograma 1 donde está el botón que nos llevará al fotograma 5

Para esto:
Colocamos el puntero en el fotograma 1 de la capa AS y hacemos clic derecho e insertamos un fotograma clave (fig 3), luego colocamos el puntero en el fotograma 5 de la misma capa, clic derecho e insertamos otro fotograma clave (fig 4).

Por fin el Action Script!
Bueno, la primera orden (código o script) será quedarse quieto en el fotograma 1
¿Por qué?
Porque si no lo hacemos, al momento de reproducir la película (Ctrl + Enter o Menú / Control / Probar película) la cabeza lectora de la línea de tiempo correrá hasta llegar al fotograma 5 y volverá la fotograma1 y nuevamente se moverá hasta el fotograma 5 para volver otra vez al fotograma 1 y así sin parar (un loop o repetición contínua)
Para insertar código en el fotograma 1, ponemos el cursor en dicho fotograma, hacemos clic derecho y clic en "acciones"

También se puede pulsar la tecla F9 o en todo caso: Menú / Ventana / Acciones

Aparecerá el panel de Acciones y dentro de él escribiremos:
stop(); --> es recomendable terminarlo con un ";" pero no indispensable.

Aprovechamos que tenemos abierto el panel de acciones para colocar la orden para el botón azul que tenemos en el escenario, en el fotograma 1...

Pero para programar un símbolo del escenario (sea del tipo botón, movie clip o gráfico) tenemos que darle un nombre de instancia, en este caso el símbolo es el botón azul.
Nos dirigimos al panel de Propiedades; accedemos a este panel a través de Menú / Propiedades / Propiedades

Una vez abierto el Panel de Propiedades, hacemos clic sobre el botón azul del escenario y en el Panel Propiedades veremos que en su extremo izquierdo hay un casillero que dice "" en letras grises; hacemos clic dentro y escribimos el nombre de instancia para el botón azul--> el nombre será: azulito, luego pulsamos "Enter" para aplicar el nombre de instancia al botón.

Finalmente hacemos de nuevo clic en el fotograma 1 de la capa AS en la línea de tiempo y abrimos el Panel de Acciones, pulsando la tecla F9.

Escribimos el código para el botón azul cuyo nombre de instancia es "azulito"

azulito.onPress = function(){
gotoAndStop(5);
}

¿Te parece chino?, entonces vamos interpretarlo con calma:

azulito--> se refiere al botón azul

. --> para indicar que lo que sigue es una orden, evento o una ruta respecto al símbolo o instancia*: azulito (botón azul), en este caso será una evento sobre azulito

onPress -->es el evento “al Precionar”

Hasta aquí tenemos:

azulito.onPress que significa “al precionar el botón azul (azulito)”

Sigamos interpretando:

= --> es igual, equivale a...

function --> una función, engloba una o más ordenes para el símbolo o instancia es por eso que usa llaves, lo que está entre las llaves son las ordenes que forman parte de esa función. El parentesis lo explicaremos en el siguiente tutor por ahora lo dejaremos como parte de la sintaxis (forma de escribir) del Action Script.

GotoAndStop(5) --> significa “ir a...y detenerse en...” lo que vez entre parentesis (5), es el fotograma a donde “ira y se detendrá” la cabeza lectora en la linea de tiempo

;--> indica el fin de la orden

Finalmente tenemos que:

azulito.onPress = function(){ --> “al presionar el botón azul” “se cumplirá la siguiente orden”

gotoAndStop(5); --> “ir y detenerse en el fotograma 5 de la línea de tiempo”

} --> “hasta aquí es la orden”

Para ver como funciona esto probamos nuestra película pulsando las teclas “Control + Enter” o menú / Control / Probar Película

Hacemos clic sobre el botón azul y nos debe llevar al fotograma donde se escribió Dummies

Ahora la misión Dummie:
Hacer que al presionar botón azul del fotograma 5 me lleve al fotograma 1 nuevamente

descargar el archivo FLA de: http://www.box.net/public/ks4omlnrt8

Ojala les sirva esto.
Espero sus comentarios y sugerencias para saber en que mejorar esto asi como sus consultas

Bytes!

Este tutorial está bajo una licencia Creative Commons <-- no se permite para fines lucrativos, si haz de usarlo contáctate conmigo, gracias por respetar mi trabajo.

ACTUALIZACION (4/marzo/2010)
Por fin hice después, de mucho, el episodio 2: Load Movie - Parte 1

FSCOMMAND, EXEC ¿cómo lo utilizo?

Lima-PERU 15 Abril 2006 //--> 00:10 aprox..., (tema:FLASH)

Caray, este es el 1er envio técnico que hago (no es complejo), hay vamos...

FSCOMMAND---> tiene muchas aplicaciones útiles en especial para lo que es multimedia. En este caso lo aplicaremos, usando además el parametro "EXEC" que se emplea cuando quiero activar 1 ejecutable desde otro ejecutable.

Entonces tengo 2 ejecutables de Flash, estos son:
"execPRUEBA.exe" y "loLogre.exe"

Lo que se hizo fue activar a "loLogre.exe" desde "execPRUEBA.exe"

Dentro del ejecutable "execPRUEBA", tengo 1 botón al que le puse como nombre de instancia: "x_btn" y en el cual coloqué el siguiente script:

on(Release){
fscommand("exec","loLogre.exe")
}

Ahora, el secretito del sabor es(*):
Creamos una carpeta llamada "fscommand" dentro de la cual irá "loLogre.exe"

Es importante que la carpeta "fscommand" vaya en el mismo lugar donde tenemos a "execPRUEBA.exe" porque sino NO FUNCIONA...

OJO--> el parámetro EXEC, solo se aplica y se prueba entre ejecutables, NO funciona cuando lo pruebas desde un SWF.
Y eso es todo, lo prueban y listo!

(*)---> esto es básico en realidad. Para saber más solo entren a FLASH y apreten "F1" y buscan fscommand.
SaluOZ, que Dios nos guie y proteja...