Todo Tutoriales

Tip de Sketchup: herramienta sígueme

2012-02-04T21:02:00.001-03:00

Hola a todos,
En esta ocasión vamos a aprender a usar la herramienta Sígueme en Sketchup (ver Introducción Básica a Sketchup). Se trata de una herramienta que se utiliza siempre combinada con otras herramientas.

Básicamente, lo que hace la herramienta sígueme es lo mismo que la herramienta Empujar/Tirar pero siguiendo una línea guía. Por ejemplo, con la herramienta sígueme y la herramienta círculo podemos realizar una esfera perfecta en 3D siguiendo el siguiente procedimiento:

Dibujar un círculo de "x" dimensiones

Dibujar un círculo cuyo centro sea el mismo que el del anterior y sin relleno

Utilizar el segundo círculo como guía para la herramienta Sígueme

Y el resultado final será una esfera en tres dimensiones:

Otra aplicación puede ser la decoración en las patas de la mesa que dibujamos en el tutorial anterior de Sketchup: Dibujamos el contorno del decorado que deseemos sobre la pata de la mesa, luego una línea guía, y con la herramienta Sígueme o Follow Me creamos el efecto deseado.

Ojalá este tip les sea de ayuda.

Ver todos mis tutoriales.

Saludos!

Jimena

Botonera con HTML5 y CSS3

2012-02-02T19:51:00.000-03:00

Hola a todos!
Hoy vamos a estudiar HTML5 y CSS3 básicos, dos tecnologías del futuro. Haremos una botonera horizontal sencilla con efectos de transición y transformación, bordes redondeados y sombras, que son las innovaciones que trajo CSS3. Y la estructuraremos con HTML5.

Primero trabajaremos con HTML5. Escribimos las siguientes líneas de código en un archivo con extensión .html:

Si probamos la página por ahora se verá así:

Veamos el significado de cada bloque de código:

<!DOCTYPE html> Línea básica de un documento html.

<html lang="es"></html> Indica el idioma de la página.

<head></head> Cabecera de la página.

<meta charset="utf-8" /> Indica la codificación (acepta "eñes" y acentos).

<title></title> Lo que pongas entre estas dos etiquetas aparecerá mágicamente en la pestaña/ventana del navegador.

<link rel="stylesheet" href="estilos.css" /> Enlace a la hoja de estilos CSS.

<body></body> El cuerpo de la página.

<h1></h1> Lo que está dentro de estas etiquetas es el encabezado nº1, el más importante. Por lo tanto puede haber sólo un h1, de otro modo pierde importancia.

<ul></ul> Lista no ordenada (en este caso la botonera)

<li></li> Cada uno de los items de la lista (los botones)

Lo que sigue es crear un documento nuevo con el nombre de estilos.css (el nombre debe ser el mismo que el especificado en la etiqueta link). En él le daremos color, movimiento y estética a la botonera.

Veamos una pequeña introducción a CSS

En todo documento de CSS se debe escribir el nombre, identificador o clase de la etiqueta y entre llaves las "características" de esa etiqueta. Por ejemplo:

body
{
background: green;
color: white;
font-family: Jura, Arial;
font-size: 16;
}

Con esto indicamos que en el cuerpo de la página, el fondo será color verde, la letra blanca, de tamaño 16 y de una fuente Jura (si está disponible) o Arial.

Una forma de indicar todos estos atributos es mediante la asignación de la etiqueta, en el caso anterior, body. Pero, como ocurre con la etiqueta <p> (párrafo), al haber muchas etiquetas nos vemos obligados a utilizar id o class. Esto se asigna en el documento html. Por ejemplo:

<p class="color_azul">Texto</p>

O bien

<p id="color_azul">Texto</p>

En el primer caso, en la hoja de estilos se escribe:

.color_azul

{

color: blue;

}

En el segundo se escribe:

#color_azul

{

color: blue;

}

Si se quiere utilizar un mismo atributo para varias etiquetas, se debe usar class. En cambio, para una única etiqueta se usa id. En el caso de la botonera no usaremos ni class ni id, ya que hay muy pocas etiquetas y no es necesario.

Lo primero que haremos será alinear los botones horizontalmente y separarlos unos de otros.

Para ello escribiremos las siguientes líneas:

ul li

{

display: inline-block; /* esta línea hace que estén todos los botones en una línea horizontal */
padding: 0.5em; /* 1em equivale a la medida indicada anteriormente, o sea 16px. Por lo tanto 0.5em equivale a 8px. Esta línea indica la separación entre los botones */

}

Con esto, la página se vería así:

Ahora colocaremos la botonera en un recuadro con bordes redondeados y una sombra. Para ello escribimos el siguiente código dentro del atributo ul li:

background: #1383ad; /* fondo individual de cada botón color turquesa */

border-radius: 1em; /* borde redondeado */

box-shadow: 2px 2px 3px rgba(0,0,0,0.6); /* sombra con 2px de desplazamiento en x e y, de color negro y con una opacidad del 60% */

margin: 0.5em; /* agregamos más separación entre los botones */

Con esto se vería de esta forma:

Y ahora llega la magia: haremos que al situar el mouse encima del botón, este efectúe una transición hacia el fondo color verde claro, y que además el botón se agrande desplazando a todos los demás.

ul li:hover

{

background: lightgreen;
font-size: 1.5em;

}

Esto es sencillo de entender, con esta sentencia estamos haciendo que al situar el mouse encima del botón cambie el tamaño de fuente y el fondo del mismo. Pero el problema es que lo hace bruscamente y no con una transición, que es lo que estamos buscando. Para ello agregamos estas dos líneas de código:

transition: all 0.2s linear;

-webkit-transition: all 0.2s linear;

En realidad son la misma línea, aunque la segunda permite que funcione el efecto en cualquier navegador moderno. Lo que hace esta línea de código es aplicar una transición para todos los cambios efectuados en el hover, que dura unos 0.2 segundos y que es lineal.

Si probamos la página, al situar el mouse encima del botón este cambiará con una transición, pero al alejar el mouse del botón, volverá a la normalidad bruscamente. Para evitar este "salto", copiamos las últimas dos líneas de código en el atributo ul li.

El resultado final es muy bonito y se puede ver aquí. (Funciona con Chrome y Safari)

La plantilla css tuvo que haberte quedado así:

Bueno, espero que este tutorial les sea útil.

Ver todos mis tutoriales.

Saludos,

Jimena

Introducción teórica a HTML5 y CSS3

2012-02-01T19:53:00.000-03:00

¿Qué es HTML5 y CSS3?
Últimamente se escucha mucho hablar de estas dos nuevas tecnologías que, al parecer, son el futuro de la web. Vamos a dar una pequeña introducción teórica. Qué son y para qué sirven.

HTML5

HyperText markup language se trata del lenguaje que se utiliza para estructurar páginas web. Si queremos una web bien estructurada, y bien posicionada en google y otros buscadores, necesitaremos obligatoriamente hacer uso de HTML. Excepto las webs maquetadas en su totalidad con Adobe Flash, todas las páginas de Internet tienen HTML.

HTML5 es la última versión de HTML, actualmente está pasando por constantes modificaciones ya que no está completamente terminada, aunque ya es oportuno implementarla en nuestros sitios web.

Esta versión simplificó en gran parte las versiones anteriores, trajo consigo etiquetas como <nav>, <footer>, <article>, <video>, <canvas>, <audio>, <svg>, <input>, <header> entre otras. Por otra parte, la etiqueta DOCTYPE ahora debe escribirse de esta forma: <!DOCTYPE html>, simplificando en gran medida la antigua.

CSS3

Cascading Style Sheets, versión número 3, viene ligado a HTML5. CSS es lo que hace bonito a un sitio web. Se trata del lenguaje que utilizamos para dar colores, tipos y tamaños de letra, y, valga la redundancia, estilo a nuestra página. Al escribir un sitio web con HTML, debemos enlazarlo a una hoja de estilos (archivo con extensión .css) que le dará características.

Con CSS3 simplificamos tareas antes difíciles de efectuar, como aplicar bordes redondeados, sombras y animaciones (!) a cualquier elemento del archivo HTML, de manera sencilla, rápida y bastante eficaz, ya que funciona en casi todos los navegadores modernos.

Más adelante aprenderemos a utilizar estas tecnologías detalladamente.

Ver todos mis tutoriales.

Saludos!

Jimena

Sketchup: una opción gratuita para realizar gráficos en 3D

2012-01-27T21:26:00.000-03:00

Hola a todos,
En esta ocasión vamos a hablar de Sketchup, un programa de Google™ que podemos utilizar para realizar gráficos en tres dimensiones o 3D (ancho, alto y profundidad). Esta tecnología es gratis, y se puede descargar desde la página de Google.
Es realmente interesante lo que se puede lograr con este software, desde un cubo sencillo en 3D hasta una casa entera por dentro y por fuera.
Hoy vamos a darle un vistazo a las herramientas básicas de este programa.

Al abrir Sketchup nos encontraremos con esto:

Veamos más detalladamente el panel de herramientas

La mayoría de las herramientas se definen por su nombre. Aquí van algunas más complicadas de comprender:

Situar cámara y cámara: Pinchando sobre un área del dibujo con la herramienta situar automáticamente pasa a la herramienta cámara, que sirve para desplazar los ojos del observador hacia el punto indicado.
Caminar: Similar a cámara. Permite desplazarse por el espacio, útil por ejemplo cuando al dibujar una casa se quiere ver el interior. Se utiliza pinchando en un área del dibujo y desplazando sin soltar el botón izquierdo del mouse.
Elevar: Se utiliza para dar mayor profundidad, altura o anchura a un objeto. Para ello hay que pinchar sobre la superficie (que debe ser plana) y desplazar el mouse hasta lograr la dimensión deseada.
Sígueme: Teniendo una superficie plana y una línea que sirva de guía, podemos utilizar esta herramienta como una alternativa a la herramienta elevar.
Duplicar línea: Como su nombre lo indica, pinchando sobre una línea de un determinado objeto y desplazando el mouse, duplicamos una línea y la agrandamos o achicamos proporcionalmente.
Plano: "Apoyada" sobre un objeto que hayamos dibujado, y combinada con la herramienta mover, esta herramienta puede utilizarse para realizar un corte al objeto en cuestión. Resulta útil para ver el interior del mismo.
Componente: Vendría a ser el equivalente al Símbolo en Flash, al crear un componente podemos copiarlo y pegarlo las veces que sea necesario, y al modificar uno se modificarán todos.

Veamos cómo dibujar una mesa sencilla
En primer lugar dibujamos un rectángulo de las medidas que prefiramos (para establecer medidas, debemos escribirlas (en metros) manteniendo presionado mientras dibujamos el rectángulo, ambas separadas por un punto y coma).

Después lo elevamos a una altura de 1,5 metros aproximadamente:

Con la herramienta rotar vista vemos el "cubo" generado desde abajo, y duplicamos la base proporcionalmente para generar un rectángulo más pequeño.

Con la misma herramienta con la que elevamos la base, elevamos este rectángulo a unos 1,4 metros.

De nuevo rotamos la vista y realizamos el mismo proceso en todas las caras del cubo. Primero tomamos las medidas con la cinta métrica.

Y ahora borramos los rectángulos de todas las caras utilizando para ello la herramienta empujar/tirar, desde afuera hasta adentro, hasta ver que el rectángulo se colorea de azul. Si no, podemos seleccionarlo y borrarlo con la tecla suprimir.

El resultado final es este:

Y con esto cerramos el tutorial de hoy.

En un próximo tutorial podremos dar más efectos a esta mesa, por ejemplo con la herramienta sígueme.

Ojalá les sea de ayuda esta introducción a Sketchup 8.

Ver todos mis tutoriales

Saludos,
Jimena.

¿Qué es SOPA?

2012-01-17T22:05:00.000-03:00

SOPA es la sigla para "Stop Online Piracy Act" (traducción: "detener el acto de piratería online"), un proyecto de ley emitido por los Estados Unidos por el cual el día de mañana, miércoles 18 de enero, diversos sitios web entre los cuales se encuentra la versión en inglés de Wikipedia, estarán inaccesibles.

¿De qué se trata todo esto?
La ley SOPA podría consistir en:

Restricción al acceso a empresas que brindan un servicio de facilitación de pago tales como PayPal o que ofrecen dinero a cambio de colocar publicidad online (ejemplo: adsense, servicio de publicidad de Google).
Restricción en los buscadores que vinculan con tales sitios.
Requerimiento a los proveedores de internet, para que bloqueen el acceso a tales sitios.

El proyecto de ley convierte en un crimen al streaming no autorizado de contenidos protegidos por copyright, y prevé una pena máxima de cinco años de prisión por cada diez piezas musicales o películas descargadas dentro de los seis meses desde su estreno.

Por lo que, más allá de evitar la piratería online como el nombre del proyecto indica, conlleva a la censura, evitando así la plena libertad de expresión en Internet, así como la generación de un ingreso por este medio.

¿Qué servicios no estarán disponibles mañana?

En muestra de repudio hacia el proyecto SOPA, algunos sitios web estarán en "apagón" mañana durante todo el día.

Entre otros, Wikipedia en su versión en inglés, los servicios de Reddit y la red estadounidense Cheezburguer no estarán en funcionamiento. Google, Twitter y Facebook, si bien critican la medida, no suspenderán sus servicios.

En conclusión

La piratería es un crimen y como tal debe ser penada. Sin embargo, el proyecto SOPA se aleja de tal objetivo, siendo una medida que evita la libertad de expresión de los cibernautas. Por lo tanto, yo personalmente estoy a favor de la protesta en contra de SOPA.

¡Feliz 2012!

2011-12-30T20:38:00.001-03:00

Gracias por leer mi blog,
Les deseo un muy feliz año nuevo
¡Saludos!

La graduación de Cristina Fernández de Kirchner: parte 2

2011-10-10T16:05:00.000-03:00

Hola a todos,
Hace un tiempo publiqué un tutorial de manipulación de fotos usando Photoshop (Ver tutorial aquí).
Un comentario en particular me lleva a escribir este otro tutorial. Me refiero a este comentario:

Si el tutorial se dedicara menos a la propaganda política y más a lo técnico el autor se hubiera permitido solucionar los problemas de iluminación, La foto de Cristina grita :¡Yo no soy de aquí!

De modo que hoy corregiremos la imagen del tutorial anterior para que se vea más realista.

La imagen terminada del tutorial anterior era la siguiente:

En primer lugar tomaremos la herramienta pincel para perfeccionar los bordes de la parte del pelo de la Presidenta. Usaremos para ello primero un color oscuro y luego otros tonos más claros y trazos cortos para dar volumen y realismo:

Después, utilizando la misma herramienta pintaremos con distintos tonos de rojo y marrón para sombrear, y también algunos tonos más claros para dar luz:

Luego aplicamos un filtro de desenfoque gaussiano y sombreamos hasta conseguir el resultado que queramos:

Ahora cambiaremos la iluminación de la cara y el tono para que todo quede más integrado. Para eso coloreamos en una capa aparte (encima de la capa de la foto) la zona de la cara de Cristina Fernández de Kirchner con color naranja y ponemos la capa en modo Tono.

En una capa aparte pintamos con color blanco las zonas de luz y aplicamos un desenfoque gaussiano. Luego ponemos la capa en modo Luz suave:

Realizamos el mismo proceso pero con un color naranja o rosado para dar sombra (bajando la opacidad de la capa para que se vea más natural):

Después de algunos ajustes de saturación y brillo obtenemos un resultado mucho más realista:

(Click para agrandar)

Ojalá les guste y, nuevamente, que lo tomen con fines educativos.

Ver todos mis tutoriales

Saludos,

Jimena.

Juego de diferencias en Flash

2011-07-10T12:52:00.022-03:00

En esta ocasión subo un nuevo tutorial en el que explicaré cómo desarrollar un pequeño juego en Flash, utilizando principalmente la estructura de programación if...else.

En qué consiste: será un sencillo juego de diferencias, donde mostraremos dos fotos, al parecer idénticas, pero que en realidad son diferentes; el usuario tendrá que hacer click sobre las diferencias para mostrar un círculo rojo, y si hace click sobre un lugar de la imagen que no tiene diferencias, se le restará una vida. Si logra encontrar todas las diferencias aparecerá en la pantalla una especie de felicitación. Si pierde las tres vidas antes de encontrar todas las diferencias aparecerá en la pantalla una invitación a que lo intente de nuevo.

Lenguaje de programación a utilizar: actionscript 3.0.

Preparación de las capas La estructura de las capas será la siguiente:

Tenemos 8 capas con 4 fotogramas clave en cada una. El fotograma 1 será el de la pantalla de bienvenida, el fotograma 2 el de las dos imágenes con sus diferencias, el fotograma 3 el de la pantalla que indica que el jugador perdió, y el fotograma 4 el de la pantalla con la felicitación. En la capa del fondo, como su nombre lo indica, colocaremos los fondos de las respectivas pantallas. Este paso es opcional. En la capa del texto, incluiremos las instrucciones, la felicitación y la invitación a empezar de nuevo, así como también los botones para desplazarse por la línea de tiempo principal del juego (Comenzar), que se encontrarán en el primer y tercer fotogramas y tendrán como nombres de instancia empezar. En la capa de las imágenes colocaremos las dos imágenes, la original y la modificada con tres diferencias respecto a la primera. En la capa de los botones, y sobre las diferencias de la segunda imagen, colocaremos tres botones con nombres de instancia boton1, boton2 y boton3 respectivamente. Estos botones serán transparentes y tendrán un tamaño de aproximadamente 50 x 50 px, dependiendo de la imagen. En la capa de los óvalos pondremos, sobre los botones y las diferencias, tres clips de película que consistirán en:

un primer fotograma clave en blanco
un segundo fotograma clave con un círculo rojo sin relleno

Estos óvalos tendrán como nombres de instancia circulo1, circulo2 y circulo3 respectivamente. Cuando el usuario haga click sobre los botones, se mostrará el segundo fotograma con el círculo rojo, cuyo tamaño será parecido al de los botones. En la capa llamada "todo" colocaremos un botón invisible que ocupe todo el escenario excepto las partes donde hay botones. Si mostramos sólo los contornos de esta capa, el clip de película se verá así:

A este clip de película le pondremos como nombre de instancia todo.

En la capa de las vidas colocaremos un clip de película que consistirá en dos capas y tres fotogramas clave: en la primera capa y primer fotograma colocaremos la palabra "Vidas" y las tres estrellas. En el segundo fotograma borraremos la última de las estrellas. En el tercer fotograma borraremos una de las estrellas, dejando sólo una. En la segunda capa pondremos un stop();.

La única capa que nos queda es la de las acciones.

Código

En cada fotograma clave en blanco tenemos un código diferente.

Fotograma 1 - Bienvenida

Fotograma 2 - Imágenes

Fotograma 3 - Perdiste

Fotograma 4 - Ganaste

La estructura if...else

Esta estructura nos sirve para indicar a Flash una condición. Traducido al español, if significa si, y else significa si no. La estructura básica del if es:

if (condición){

bloque_de_acciones;

}

En lenguaje coloquial, lo anterior significa: si se cumple una condición, ejecutar el bloque de acciones.

También podemos utilizar un else:

if (condición) {

bloque_de_acciones;

}

else {

bloque_de_acciones_diferente;

}

Esto se traduce como: si se cumple una condición, ejecutar el bloque de acciones; si no, ejecutar un bloque de acciones diferente.

Una opción alternativa para el else podría ser aplicar una condición adicional:

if (condición) {

bloque_de_acciones;

}

else {

if (condición2) {

bloque_de_acciones_diferente;

}

(Si se cumple una condición, ejecutar el bloque de acciones; si no, si se da una condición 2, ejecutar un bloque de acciones diferente).

En el caso del juego que estamos desarrollando, un ejemplo de esta estructura es este:

if(circulo2.currentFrame==2 && circulo3.currentFrame==2){

gotoAndStop(4);

}

La traducción de esta estructura al lenguaje coloquial es la siguiente:

Si el fotograma actual (currentFrame) del símbolo circulo2 es el 2, y (&&) el fotograma actual del símbolo circulo3 es el 2, ir al fotograma 4 de la película principal.

(Nota: && es un operador lógico. Lista de operadores lógicos:

&& = and;

|| = or;

! = not;

sirven para unir dos condiciones, en el caso de and se requiere que ambas condiciones se cumplan, en el caso de or sólo debe cumplirse una de ellas, y en el caso de not se invierte el valor de una variable o expresión).

Si tenés problemas con los códigos básicos de los botones y funciones en actionscript 3, te recomiendo que visites este post.

El resultado final es este:

(Descargar archivo .fla http://www.mediafire.com/?86uck1f8wvz3bsd)

Espero que este tutorial les resulte útil

Por cualquier consulta pueden escribir un comentario en la sección de comentarios de esta entrada, o bien visitar la sección de Contacto para más opciones.

Ver todos mis tutoriales.

Saludos!!

Jimena.

La graduación de Cristina Fernández de Kirchner

2011-06-05T18:37:00.006-03:00

(Actualizado. Ver Parte 2)

Las polémicas relacionadas con la veracidad de la graduación de Cristina Fernández de Kirchner como abogada son bien conocidas. Hoy vamos a desmentir los hechos usando Adobe Photoshop y dos fotos: una de la Presidenta y otra de una graduación cualquiera.

(Las fotos no son mías, están extraídas de acá y de acá)

Lo primero que vamos a hacer será crear un nuevo documento y pegar la foto de la Graduación. En una nueva capa pegamos la foto de la presidenta. Haremos los ajustes necesarios para que coincida en tono, saturación, brillo y contraste con la imagen de la graduación. Utilizaremos para esto el panel de Ajustes:

Una vez que tengamos lista la imagen de Cristina Kirchner, vamos a mover la capa hacia abajo

En la capa de la foto de la graduación comenzaremos a borrar con la herramienta Goma la cara de la persona, la cual vamos a reemplazar por la cara de la Presidenta. Al hacerlo, comenzaremos a ver la capa de abajo, es decir, la de la foto.

Iremos acomodando la imagen de Cristina y borrando la imagen original para obtener el mejor resultado posible.
Con el Tampón de clonar (ver tutorial), podemos ir ajustando la imagen para perfeccionarla:

Cuando hayamos terminado de hacer todos los ajustes necesarios a la imagen, vamos a tomar la herramienta Desenfocar y a suavizar los bordes donde borramos.

De modo que el resultado final será más o menos este:

Espero no haber ofendido a nadie y que los "cristinistas" lo tomen con humor.

Ver todos mis tutoriales

Saludos.
Jimena

Código para botones en Flash

2011-05-21T16:51:00.005-03:00

(Actualizado 14~09~2011)
Hola a todos!
Después de bastante tiempo (casi dos meses) desde que escribí el último tutorial (por una cuestión de falta de tiempo), subo una nueva entrada en la que daré un panorama general sobre actionscript en Flash: Botones en Flash, y los códigos que se les puede aplicar más comunes e imprescindibles para desarrollar casi cualquier programa sencillo con esta tecnología.

Botones en Flash
Lo más recomendable si estás en cero es que estudies actionscript 3.0, que es el lenguaje de programación más actual que utiliza el Adobe Flash. Si estás habituado al actionscript 2.0, lo mejor es que hagas el cambio al actionscript 3.0, aunque los cambios entre uno y otro son bastante bruscos, siempre es mejor estar actualizado. De todas formas, escribo tanto los códigos para as2 como para as3.

Actionscript 2.0
La estructura básica para programar con as2 es relativamente sencilla. Podemos programar sobre el botón o sobre un fotograma en blanco utilizando nombres de instancia.

Si vas a escribir el código sobre el botón, la estructura es así:

evento: Puede ser, por ejemplo:

release: Al pulsar el botón y soltar el mouse/ratón
rollOver: Al situar el cursor encima del botón
rollOut: Al situar el cursor fuera del botón
press: Al mantener presionado el botón.

acción_a_ejecutar: Esto es, básicamente, lo que pasará cuando ocurra lo que indicamos en el evento. Por ejemplo:

getURL ("url_completa", "_blank"): Para redireccionar a una web o archivo html en tu computadora.
gotoAndStop ("nombre_de_escena", fotograma): Para ir a un fotograma de la línea de tiempo.
loadMovie ("url_completa_del_video"): Para cargar una película swf o flv.

Vamos a ver un ejemplo:

Al presionar el botón en cuestión, iremos automáticamente al fotograma 1.

Supongamos que tenemos un clip de película con una animación dentro, y le ponemos a este clip un nombre de instancia, por ejemplo "pelicula". Si queremos que la animación dentro del clip se dirija al fotograma 1, deberíamos agregar delante del "gotoAndStop" el nombre de instancia del clip, o sea que dicha línea de código quedaría así:

pelicula.gotoAndStop(1);

Para escribir el código en el fotograma, debemos cambiar la estructura. Primero que nada hay que ponerle un nombre de instancia al botón en cuestión, por ejemplo "btn".

Para el mismo ejemplo que mencioné antes, la estructura es así:

Actionscript 3.0

En este lenguaje de programación, el código va siempre en el fotograma, por lo tanto será imprescindible utilizar nombres de instancia para programar.

Primero debemos definir una función y luego podemos asignarle dicha función a un botón que queramos.

nombre_de_la_función: Debemos elegir un nombre adecuado y que recordemos para asignarle a la función.

acción o bloque de acciones a realizar: Será lo que ocurra al ejecutar la función.

evento: Por ejemplo, puede ser:

CLICK: Al pulsar el botón
ROLL_OVER: Al situar el cursor encima del botón
ROLL_OUT: Al alejar el cursor del botón
MOUSE_MOVE: Al mover el mouse

boton: Nombre de instancia del botón.

Para ejecutar las mismas acciones que aprendimos a ejecutar con actionscript 2, el código sería el siguiente:

Como podemos ver, el código se complica bastante, pero es mucho más limpio que con Actionscript 2.0.

____________________

Bueno, es todo por ahora, espero que les sea de ayuda.

No dejen de comentar por cualquier duda o sugerencia que tengan.

Ver todos mis tutoriales

Saludos!
Jime.

Edit:
Agrego un código para actionscript 3.0, para poder cambiar de fotograma y Escena al mismo tiempo:

Saludos.

Calculadora en Flash (actionscript 3.0)

2011-03-06T20:28:00.011-03:00

Hola a todos!
En esta ocasión les voy a explicar cómo elaborar una sencilla calculadora interactiva en Flash utilizando actionscript 3.0, en la cual podamos sumar, restar, multiplicar o dividir dos números insertados por el usuario.

En primer lugar abrimos un nuevo archivo de Flash, as3, e insertamos dos campos de Introducción de texto, con nombres de instancia "num1" y "num2" respectivamente.
Luego insertamos un tercer campo de texto, pero de tipo Dinámico y con nombre de instancia "resultado".

Los campos de introducción de texto serán para que el usuario escriba los números de la operación a realizar. Seleccionamos ambos textos y en el panel de propiedades, presionamos el botón "Incorporar caracteres" y seleccionamos el tipo Numerales. En donde dice "Incluir los siguientes caracteres" escribimos un . (punto). Luego presionamos aceptar.

Ahora vamos a crear los botones con los nombres de las diferentes operaciones que vamos a utilizar (suma, resta, multiplicación y división). Escribimos los textos y convertimos cada uno por separado en Símbolos del tipo Botón. Les damos las características que queramos (diferente color en el rollOver, en el presionado, insertamos un rectángulo en la zona activa, etc.) y los arrastramos al escenario para disponerlos de la manera que prefiramos. A cada uno de ellos le ponemos un nombre de instancia diferente para identificarlos, por ejemplo "suma", "resta", "multiplicacion" y "division".

Por último (antes de programar) vamos a crear un nuevo símbolo con los signos "+", "-", "x" y "/". Para ello presionamos Ctrl+F8, escribimos de nombre "Signos" y seleccionamos de tipo Clip de Película o Movieclip. Una vez "dentro" del clip, procedemos a modificarlo. El primer fotograma estará vacío, porque todavía no hemos seleccionado la operación que queremos realizar. En fotograma 2 escribimos con la herramienta Texto un +, ya que este fotograma lo mostraremos cuando el usuario presione el botón de adición. En el tercer fotograma cambiamos el + por un -, ya que al presionar el botón de sustracción, éste será el fotograma que mostraremos. En el cuarto fotograma reemplazamos el - por un x, ya que al presionar el botón de multiplicación queremos que se vea este fotograma. Y, finalmente, en el último fotograma (fotograma 5) escribimos una / para que se vea al presionar el botón de división.
Volvemos a la escena 1 y arrastramos el símbolo "Signos" al escenario, entre el primer campo de introducción de texto (primer número) y el segundo campo de introducción de texto (segundo número). A este símbolo le ponemos un nombre de instancia: "signo"

Lo único que nos queda es la programación. Creamos una nueva capa y la llamamos acciones. En el primer fotograma (vacío) escribimos el siguiente código:

Notas del código

suma.addEventListener (MouseEvent.CLICK, sumar);
function sumar (event):void {
En esta línea de código le indicamos a Flash que queremos que al presionar el botón con nombre de instancia "suma", se ejecute la función de mouse llamada "sumar".

resultado.text = String(Number(num1.text) + Number(num2.text));
signo.gotoAndStop(2);
En esta línea de código definimos la variable "sumar" para que al presionar el botón, en el campo de texto resultado.text se muestre la suma del valor del campo de texto num1.text más el valor del campo de texto num2.text. Además le indicamos a Flash que queremos que el clip de película con nombre de instancia "signo", vaya a su fotograma número 2.

La misma explicación se repite para las funciones de todos los otros botones.

El resultado es el siguiente:

Espero que este tutorial les sea útil.
Cualquier duda, sugerencia, o simplemente si te sirvió de ayuda el tutorial, dejá un comentario.

Ver todos mis tutoriales

Un saludo.
Jime.

Efecto lupa en el mouse (Flash - as3)

2011-03-03T10:24:00.017-03:00

Hola a todos!
Hoy les traigo un tutorial de Flash (para actionscript 3.0) donde les voy a explicar cómo realizar el famoso efecto de "lupa" al pasar el mouse o ratón por encima de un texto y/o una imagen. En este caso, yo como ejemplo usaré un texto.

Antes que nada, vamos a organizar las capas que necesitaremos. Vamos a usar en total 5 capas, una para el código, otra para lo que va a ser la lupa, otra para el dibujo de la lupa, la penúltima para el texto "agrandado" (es decir, lo que se va a mostrar al situar la lupa encima), y la última para el texto chiquito (cuando la lupa no está encima).

Empecemos desde la capa de abajo de todo, es decir, la del texto pequeño. Seleccionamos la herramienta de Texto y escribimos un texto sencillo, como por ejemplo "Esto es un texto que se verá con la lupa". Le ponemos de tipo de texto Estático y de tamaño diez u ocho. Lo copiamos y lo pegamos en el mismo lugar (Ctrl+Shift+V) en la capa del texto grande, donde lo agrandamos cuanto queramos con la herramienta de transformación libre. Después dibujamos un rectángulo blanco (o del color del fondo) para que no se vea el texto pequeño.

Un tip: para lograr bien el efecto, el texto pequeño y el texto grande tienen que "empezar" y "terminar" casi en el mismo lugar, es decir, que no puede haber un texto mucho más "angosto" que otro. Por lo tanto, al texto pequeño le vamos a agregar un Espaciado entre caracteres, en mi caso de 2 px., y alineamos bien los dos textos.

Capa del texto grande:

Capa del texto chico:

Por ahora vamos a bloquear estas dos capas para trabajar mejor sobre las otras tres.

Ahora vamos a la capa de la lupa, que va a ser lo que muestre el texto grande cuando pasa por encima del pequeño. Dibujamos un círculo perfecto con la herramienta de óvalo y manteniendo presionada la tecla shift. Usaremos un color vistoso (verde fluorescente, rojo, amarillo, etc.) para identificarla bien, y en este caso, no le pondremos ningún borde. La convertimos en símbolo (F8), más específicamente en Clip de película, y ponemos el punto de registro abajo en el centro:

Una vez "dentro" del símbolo de la lupa, vamos a transformar el círculo para que quede así:

Es decir, con el punto de registro un poco más arriba del "final" del óvalo.

Volvemos a la escena principal, seleccionamos el círculo y le ponemos de nombre de instancia "lupa" (los nombres de instancia se colocan en el panel de propiedades). Establecemos la capa como Máscara con click derecho > máscara (es decir, que sólo se va a ver lo que se encuentre cubierto por el círculo), y la bloqueamos para pasar a trabajar sobre la capa del dibujo de la lupa.

Simplemente tenemos que dibujar una lupa, donde el círculo donde se encontraría la lente debe ser más pequeño que el círculo que dibujamos hace un rato.

---> borrá el círculo presionando la tecla suprimir.

Si queremos podemos agregar más detalles a la lupa (degradados de color, un color celeste con transparencia para la "lente", etc.).

Convertimos el dibujo de la lupa en Clip de película y ponemos el punto de registro abajo en el centro. Una vez dentro del símbolo, movemos la lupa para que el punto de registro quede en la parte inferior de lo que sería la lente, o sea así:

(todos estos cambios de puntos de registro nos servirán más tarde para la programación de la lupa y el dibujo de la lupa).

Ahora que tenemos lista la lupa y el dibujo de la lupa, volvemos a la escena principal y alineamos la "lente" de la lupa y el círculo, así:

Nota: no puede quedar ninguna parte del escenario visible entre la lupa (dibujo) y el círculo rojo, es decir, no se tiene que ver ninguna parte blanca.

Al dibujo de la lupa le ponemos de nombre de instancia "cursor"

Y, finalmente, llegamos a la capa de las acciones. seleccionamos el fotograma en blanco, presionamos F9 y escribimos esto:

Notas sobre el código

Mouse.hide();

Con esta línea de código le indicamos a Flash que queremos que no se vea el cursor

function cambiar_cursor (event:MouseEvent):void {

En esta línea de código estamos creando una nueva función, con el nombre de "cambiar_cursor", e indicamos que es un evento de Mouse.

cursor.startDrag();

En esta linea de código definimos la función cambiar_cursor, y le indicamos a Flash que cuando se ejecute esta función queremos arrastrar el dibujo de la lupa.

stage.addEventListener (MouseEvent.MOUSE_MOVE, cambiar_cursor);

En esta línea de código le indicamos a Flash que queremos que al mover el mouse sobre el escenario, se ejecute la función cambiar_cursor.

Podés probar la película con Ctrl + Enter ;)

Bueno, espero que este tutorial les haya sido útil.

Si tienen alguna duda, comentario, inquietud, sugerencia, o simplemente un agradecimiento, escriban un comentario en la sección de comentarios.

Acá está el archivo .fla por si alguien se "trabó" en alguna parte del tutorial: http://www.mediafire.com/?bthetr9dbvtk832

Ver todos mis tutoriales

Saludos,

Jime.

Botón con rollOver y rollOut en Flash

2011-02-26T21:47:00.008-03:00

Hola!
Hoy preparé un tutorial de Flash, en el cual les explico cómo hacer un botón para que al situar el cursor encima (rollOver) y al alejarlo (rollOut) se ejecuten diferentes animaciones. Es muy fácil de realizar y para que realice la acción vamos a necesitar un sencillo código Actionscript.

En primer lugar abrimos un Nuevo documento de Flash, ya sea de actionscript 2.0 o de actionscript 3.0, pueden elegir el que mejor sepan manejar o el que quieran utilizar. Vamos al menú Insertar -> Nuevo Símbolo -> Le damos un nombre (por ejemplo, Botón) -> Elegimos de tipo Clip de Película o Movieclip.
Dentro de este clip de película vamos a diseñar el botón. Vamos a utilizar 4 fotogramas: el primero para el estado de "Reposo", el segundo para el estado de "MouseOver" o "RollOver", el tercero para el estado "Press" y el cuarto para el estado "Release".

En este caso vamos a hacer un botón sencillo con un cambio de color.
En el primer fotograma, es decir, el fotograma del estado Reposo, vamos a dibujar un rectángulo de color azul, por ejemplo #6532FF, con bordes redondeados y sin contorno. En una nueva capa escribimos un texto, yo en este caso escribí botón y usé como color un gris claro, por ejemplo #CCCCCC.

En el segundo fotograma insertamos un fotograma clave (click derecho + insertar fotograma clave) vamos a seleccionar el rectángulo y presionar F8 para convertirlo en clip de película. De nombre le pondremos "rollOver". Hacemos doble click sobre él y en el fotograma 10 por ejemplo, insertamos un fotograma clave y ahí cambiamos el color azul a un azul claro, por ejemplo, #6598FF. Seleccionamos el fotograma 1, hacemos click derecho y seleccionamos la opción Crear Interpolación de forma. Ya tenemos la animación de rollOver, solo falta colocar un stop al final. Para eso, en una nueva capa, insertamos un fotograma clave en el último fotograma de la animación y escribimos en el panel de acciones (F9):
stop();
Y listo. Ya podemos volver a la instancia del botón.

En el tercer fotograma simplemente copiamos el dibujo del botón del último fotograma del estado rollOver (del MC rollOver).

Para el cuarto y último fotograma (estado rollOut), vamos a insertar la misma animación que insertamos en el estado rollOver pero con los fotogramas invertidos. Para eso vamos a abrir la biblioteca, donde tenemos guardado el símbolo del estado rollOver. Hacemos Click derecho &gt; Duplicar, y al MC de nombre le ponemos "rollOut". Después hacemos doble clic para modificarlo. Una vez "dentro", seleccionamos todos los fotogramas de la capa de la animación, hacemos click derecho y seleccionamos la opción Invertir fotogramas. Después volvemos a la instancia del botón y arrastramos desde la biblioteca el movieclip "rollOut", y lo movemos para hacerlo coincidir con la posición x e y del rectángulo del fotograma 3. Para guiarnos podemos utilizar papel cebolla o simplemente modificar la posición en el panel de propiedades copiando las del fotograma 3.

Insertamos una nueva capa y en el panel de acciones escribimos:
stop();

Bueno, ahora lo último que falta para hacer funcionar nuestro botón es programarlo. Volvamos a la escena principal.

Si estás usando Actionscript 2.0, seleccioná el botón y escribile este código en el panel de acciones:

//acción para pasar al estado "rollOver"
on(rollOver){
   this.gotoAndStop(2);
}
//acción para pasar al estado "press"
on(press){
   this.gotoAndStop(3);
}
//acción para pasar al estado "rollOut"
on(rollOut){
   this.gotoAndStop(4);
}
//acción para pasar al estado "release"
on(release){
   this.gotoAndStop(4);
   //acción "ir a URL"
   getURL("http://www.google.com.ar/", "_self");

}

Si estás usando Actionscript 3.0, ponele al botón como nombre de instancia "boton" y escribí este código en una nueva capa, en el panel de acciones:

//mostrar "handCursor" (manito que aparece en los enlaces)
boton.addEventListener (MouseEvent.ROLL_OVER, mano);
function mano (event):void {
   boton.buttonMode = true;
}
//acción al situar el mouse encima del botón
boton.addEventListener (MouseEvent.ROLL_OVER, rollover);
function rollover (event):void {
   boton.gotoAndStop(2);
}
//acción al alejar el mouse del botón
boton.addEventListener (MouseEvent.ROLL_OUT, rollout);
function rollout (event):void {
   boton.gotoAndStop(4);
}
//acción al presionar el botón
boton.addEventListener (MouseEvent.MOUSE_DOWN, presionado);
function presionado (event):void {
   boton.gotoAndStop(3);
}
//acción ir a URL
boton.addEventListener (MouseEvent.CLICK, iraurl);
function iraurl(event):void {
   navigateToURL(new URLRequest("http://www.google.com.ar/"), "_self");
}

Bueno, espero que este tutorial les haya servido, si tienen cualquier duda recuerden dejar un comentario. Por si les sirve, acá están los archivos para actionscript 2 y actionscript 3.

Ver todos mis tutoriales

Saludos!!
Jime.

Cómo dibujar una flor usando la herramienta Pluma en Photoshop

2011-02-23T21:08:00.006-03:00

¡Hola a todos!
Hoy preparé un tutorial paso a paso de cómo dibujar, en este caso, una flor, utilizando la herramienta Pluma en Photoshop.
Ojalá les sirva.

Antes que nada, abrimos un nuevo documento en Photoshop. En este caso yo usé las medidas 500 x 500.
Para empezar creamos una nueva capa a la cual llamaremos "centro". Seguido de eso seleccionamos la herramienta Elipse y dibujamos un círculo manteniendo presionada la tecla Shift para que sea perfecto.

Después seleccionamos la herramienta Pincel y cambiamos las propiedades para que el grosor sea de alrededor de 6 píxeles. Luego cambiamos el color frontal a amarillo.

Una vez que hicimos esto le hacemos click derecho al círculo y seleccionamos la opción Contornear Trazado, destildamos la opción "Simular presión" (sólo porque no nos interesa lograr ese efecto en este momento) y aceptamos.

Presionamos la tecla Suprimir para borrar el trazado y obtendremos esto:

Después creamos una nueva capa que llamaremos "relleno_centro". Ahí coloreamos con el pincel, y un color más claro que el borde. Entonces seleccionamos la capa del contorno y presionamos Ctrl+E para unir ambas capas, la del contorno y la del relleno.
En una nueva capa llamada "Tallo" dibujamos con la herramienta Pluma lo que va a ser el tallo de la flor.

Elegimos de color frontal un verde y de diámetro del pincel, alrededor de 11 px. Hacemos click derecho sobre el trazado con la herramienta pluma, seleccionamos la opción Contornear trazado, y esta vez tildamos la opción Simular presión. Aceptamos, y borramos el trazado con la tecla Suprimir.
Después de esto sos libre de manipular el tallo como más te guste.
Repetimos el proceso anterior en una nueva capa para dibujar el primer pétalo.

En una nueva capa (que esté debajo de la del contorno del pétalo) pintamos el pétalo con el pincel y un color más claro que el de su borde. Luego unimos las dos capas con Ctrl+E.

Debemos repetir este último proceso unas 4 veces más (si querés podés hacerlo más o menos veces) para dibujar los pétalos de la flor. Si quieren también pueden agregar, en una nueva capa una hoja al lado del tallo.

El resultado final es éste:

(click para agrandar)

Acá está el archivo .psd para el que quiera echarle un vistazo: http://www.megaupload.com/?d=HO5NCC8W

Espero que les haya gustado este tutorial.
Si tienen dudas o se trabaron en alguna parte, simplemente comenten.

¡Hasta la próxima!

Jime.

Interpolaciones de movimiento, de forma y máscaras

2011-02-22T16:00:00.006-03:00

Interpolaciones

Se podría decir que llegamos a la parte más importante de esta guía. Acá se juntan todos los otros conceptos para poder animar. Tenemos dos tipos diferentes de interpolación: Interpolación de movimiento e interpolación de forma. Son bastante diferentes, la primera sirve para “mover” (como su nombre lo indica) símbolos, sean botones, MC o gráficos, y la segunda sirve para cambiar color o forma de un objeto que no es un símbolo. Vamos a ver cada una por separado.

Interpolación de movimiento

¿Qué es?
Una forma de animar objetos, los cuales deben ser Clips de película.

¿Qué varía del objeto?
Podemos variar el tamaño, posición en el escenario, color (mediante el panel de propiedades) o filtros.

¿Cómo se aplica?
Primero que nada seleccionamos el objeto que queremos animar, y presionamos F8 para convertirlo en un Clip de Película. Seguido de eso insertamos un fotograma clave en el fotograma que queramos (click derecho en el fotograma + “Insertar fotograma clave”). En este fotograma hacemos las variaciones que queramos hacerle al clip de película. Entre el fotograma 1 y el fotograma “x” donde se encuentren las variaciones del clip, hacemos click derecho y seleccionamos la opción “Crear interpolación clásica” (más tarde veremos la nueva interpolación de movimiento para flash CS4 y CS5). Y ya está, podemos ver el resultado presionando Ctrl + Enter para probar la película.

¿Qué pasa si yo quiero que pare la animación al terminar?
Para eso hace falta algo de actionscript básico. En una nueva capa, al final de la animación insertamos un fotograma clave (F6), abrimos el panel de acciones (si no está en el espacio de trabajo lo abrimos el menú ventana (o bien presionando F9), y escribimos esto:

stop();

Con este sencillo código (compatible con actionscript 1.0, 2.0 y 3.0) logramos que la película se detenga.

Guías de Movimiento

Si querés que el clip siga un recorrido podés utilizar las guías de movimiento.

Para aplicar una guía, tenés que seguir los mismos pasos que los que seguís para aplicar una interpolación de movimiento clásica. Luego de aplicar la interpolación, en una nueva capa dibujá con el lápiz, o con la herramienta de línea, el recorrido que querés que siga tu clip (debe ser una línea que tenga un extremo “tocando” al clip en el fotograma 1 y el otro extremo “tocándolo” en el fotograma “x” donde termina la interpolación). Seleccioná la capa de la guía, da click derecho y seleccioná la opción “Guía”. Corroborá que la capa de abajo (interpolación) sea modificada por la capa de arriba, si no lo es, arrastrala hacia arriba.

Probá la película con Ctrl + Enter.

Nueva Interpolación de Movimiento

Esta interpolación apareció con el Adobe Flash CS4 y ahora perdura en el CS5. No tiene muchas diferencias con el anterior, pero la manera de aplicarla es distinta y las guías de movimiento se incluyen automáticamente en la misma capa, y es más sencillo modificarlas.

Para aplicar la interpolación clásica hacía falta insertar un fotograma clave de inicio y un fotograma clave de fin. Ahora nos ahorramos un paso, ya que sólo debemos insertar el fotograma clave de inicio, dar click derecho al fotograma o al clip, seleccionar Crear Interpolación de Movimiento y Flash automáticamente inserta más fotogramas. Para que el clip de película se “mueva”, o sea que tenga un cambio por el cual querés aplicarle una interpolación, tenés que ir al último fotograma (o a cualquiera de los que abarque la interpolación) y mover o cambiar las características del clip.

Qué pasa con las guías de movimiento. Ahora flash las incluye automáticamente en la misma capa, de un color fluorescente, y es más sencillo manipularlas.

Ejercicio

Abrí un nuevo documento.
Dibujá´un cuadrado o un óvalo y convertilo en símbolo con F8. Dale cualquier nombre y seleccioná de tipo clip de película.
Dale clic derecho al clip recién creado y seleccioná la opción Crear interpolación de movimiento (automáticamente Flash insertará más fotogramas).
Si querés prolongar o achicar la interpolación, simplemente andá al último fotograma de la misma y verás que aparece un cursor diferente para variar la duración.
Ahora andá al último fotograma de la interpolación y mové el clip de película hacia la derecha o hacia la izquierda y aumentá su tamaño (presiona Q).
Vas a ver que apareció una línea de puntos de un color fluorescente, esa es la guía de movimiento y podés manipularla fácilmente con el mouse.
Poné un stop en el último fotograma de una nueva capa.
Probá la película con Ctrl+Enter

Interpolación de forma

¿Qué es?
Una forma de animar objetos, que no pueden ser símbolos, textos (para aplicarles una interpolación de forma hay que separarlos con click derecho + separar) u objetos agrupados (deben ser separados al igual que los textos).

¿Qué varía del objeto?
Puede variar el color, tamaño, posición y forma del objeto.

¿Cómo se aplica?
Dibujamos o incorporamos el objeto en el escenario. Insertamos un fotograma clave en el fotograma que queramos (click derecho en el fotograma + “Insertar fotograma clave”). En este fotograma hacemos las variaciones que queramos hacerle al objeto. Entre el fotograma 1 y el fotograma “x” donde se encuentren las variaciones del mismo, hacemos click derecho y seleccionamos la opción “Crear interpolación de forma. Y ya está, podemos ver el resultado presionando Ctrl + Enter para probar la película.

¿Qué pasa si yo quiero que pare la animación al terminar?
Utilizamos el código stop(); aprendido anteriormente.

Ejemplo de interpolaciones

Interpolaciones de movimiento (archivo .fla): http://www.megaupload.com/?d=U6IO2HX7
Interpolaciones de forma (archivo .fla): http://www.megaupload.com/?d=3D3AA3VP

Máscaras

Otra herramienta interesante del Flash son las máscaras. Las máscaras sirven para mostrar sólo una determinada parte de lo que se encuentra en la capa inferior. Si yo en una capa dibujo un rectángulo, en la capa “de abajo” tengo una foto, y a la capa del rectángulo la defino como máscara, de la foto se va a ver sólo la parte que sea abarcada por el rectángulo. El rectángulo no se va a ver, sea del color que sea o tenga el alfa que tenga, sólo se va a ver una parte de la foto. Para que entiendan bien pondré un ejemplo.

Supongamos que querés hacer un sencillo efecto de lupa con una interpolación de movimiento. Tenés el dibujo de la lupa animada (por ejemplo que va de un lado a otro) en una capa, en otra tenés una imagen o un texto pequeño y en una última capa tenés la misma imagen o texto pero más grande. ¿Cómo se hace para lograr el efecto de lupa?

Vamos a ver...
Para conseguir el efecto debés tener el dibujo de una lupa en una capa. Esta lupa la vas a animar para que parezca que alguien la está moviendo de un lado a otro. En otra capa debés tener el círculo que funciona como lupa, es decir la máscara. En otra capa vas a tener el dibujo grande, que será lo que se verá sólo al pasar la lupa por encima. Y en una última capa vas a tener el dibujo pequeño. Es decir que la estructura es la siguiente:

Dibujá la lupa en la capa del dibujo de la lupa, dibujá un círculo en la capa de la lupa, dibujá, por ejemplo, una flor grande en la capa del dibujo grande y por último, una flor chica en la capa del dibujo pequeño (copiá la flor grande, en la capa de la flor chica presioná Ctrl+Shift+V para pegarla en el mismo lugar y achicala con la herramienta de transformación libre). Ahora aplicale una interpolación de movimiento a las dos primeras capas (tené cuidado, la lupa y el dibujo de la lupa deben moverse al mismo tiempo, en la misma dirección y del mismo modo).

Ahora, si probás película con Ctrl+Enter no vas a ver el efecto que esperás, porque aún no aplicaste la máscara. Para aplicarla, dale click derecho a la capa de la lupa y tildá la opción Máscara. Ahora sí, podés probar la película.

Acá está el archivo por si lo querés bajar (formato .fla): http://www.megaupload.com/?d=ZBOHGCCQ

_________________

Bueno, espero que este tutorial te sirva de ayuda. Si tenés algún comentario sobre este tutorial podés dejarlo en la sección de comentarios.

Ver todos mis tutoriales

Hasta la próxima ;)
Jime.

Tutorial de herramientas de Flash

2011-02-22T15:21:00.010-03:00

Hola!
En esta ocasión les traigo un tutorial de Flash, empezaré por lo más básico (herramientas de dibujo) y terminaré por explicar Capas y Línea de tiempo. En otra entrada explicaré cómo animar.
Espero que les guste.

El espacio de trabajo de Flash

El espacio de trabajo predeterminado que “viene” con Flash es el Clásico. Probablemente al abrir el programa te vas a encontrar con un panel de herramientas a tu izquierda, la línea de tiempo en la parte superior, y finalmente a tu derecha el panel de propiedades. Y claro, en el centro el “lienzo” sobre el cual vamos a trabajar.

Vamos al menú Ventana > Espacio de trabajo y seleccionemos la opción Nuevo espacio de trabajo. Va a aparecer una ventanita donde te pedirá un nombre para el espacio de trabajo. Elegí un nombre y clickeá Aceptar. Ahora podés cambiar tu espacio de trabajo como más te guste. En el menú Ventana podés elegir los paneles que quieras tener en el escenario, para luego organizarlos como vos quieras.

Las herramientas y sus utilidades

Herramienta de Selección (V) à usala para seleccionar, mover y deformar objetos (si mantenés presionado el botón izquierdo del ratón y lo arrastrás, podés hacer una selección rectangular)

Herramienta de Subselección (A) à usala para modificar objetos por sus nodos

Herramienta de Transformación Libre (Q) à usala para aumentar o disminuir el tamaño de objetos (para aumentar o disminuir proporcionalmente, mantené presionada la tecla Shift)

Herramienta de Transformación de Degradado (F) (surge al mantener presionado el botón de la herramienta de Transformación Libre) à usala para modificar degradados.

Herramienta de rotación 3D (W) y herramienta de Traslación 3D (G) (sólo compatibles con actionscript 3.0) à usalas para transformar objetos simulando 3D

Herramienta Lazo (L) à usala para hacer selecciones a mano alzada.

Herramienta Pluma (P) à usala para dibujar líneas rectas o curvas.

Herramienta Añadir punto de Ancla (+) à usala para añadir un punto de ancla en una línea (te permite curvarla).

Herramienta Eliminar punto de Ancla (-) à usala para eliminar un punto de ancla en una línea curva.

Herramienta Convertir punto de Ancla (C) à te permite modificar los puntos de ancla para así modificar la curvatura de una línea.

Herramienta Texto (T) à usala para introducir un texto.

Herramienta Línea (N) à usala para dibujar una línea recta (para dibujar una línea totalmente horizontal, vertical o en diagonal, mantén presionada la tecla Shift)

Herramienta Rectángulo (R) à usala para dibujar un rectángulo (para dibujar un cuadrado perfecto mantené presionada la tecla Shift).

Herramienta Óvalo (O) à usala para dibujar un óvalo (para dibujar un círculo perfecto mantené presionada la tecla Shift)

Herramienta Rectángulo Simple (R) à te permite dibujar un rectángulo o cuadrado y curvar fácilmente sus vértices.

Herramienta Óvalo Simple (O) à te permite dibujar un óvalo o círculo y cortarlo fácilmente (para que quede una especie de “pacman” o pizza :P)

Herramienta PolyStar à usala para dibujar polígonos regulares o estrellas (modifica las propiedades en el panel propiedades).

Herramienta Lápiz (Y) à usala para dibujar líneas a mano alzada.

Herramienta Pincel (B) à usala para dibujar líneas (que funcionan como rellenos) a mano alzada.

Herramienta Rociador (B) à usala para “rociar” formas (que son símbolos en la biblioteca) sobre el escenario.

Herramienta Deco (U) à permite incorporar una decoración en el escenario (puede interpolarse).

Herramienta Hueso (X) y herramienta Vinculación (Z) (sólo compatibles con actionscript 3.0) à permiten simular el movimiento del esqueleto humano (es una herramienta muy interesante para animar personajes y darles cierto realismo).

Herramienta Cubo de pintura (K) à usala para agregar relleno a una forma cerrada compuesta por una línea, o bien para cambiar el color de un relleno ya existente.

Herramienta Bote de tinta (S) à usala para agregar borde a un relleno, o bien para cambiar el color de un borde ya existente.

Herramienta Cuentagotas (I) à usala para seleccionar un color y automáticamente pasar a la herramienta Cubo de pintura.

Herramienta Borrador (E) à usala para borrar rellenos y/o bordes (al seleccionarlo aparecerán tres botones: uno sirve para regular el grosor, otro para seleccionar qué borrar, y una canillita para borrar un objeto entero.

Herramienta Mano (H) à usala para deslizarte a lo largo del escenario (también puede utilizarse manteniendo presionada la barra espaciadora).

Herramienta Zoom (M) à es una lupa (manteniendo presionado Alt “aleja”). Además de la lupa puedes presionar Ctrl + “+” para “acercar” o Ctrl + “-“ para “alejar”.

Debajo de estas herramientas hay un lápiz que sirve para seleccionar el color de borde, el alfa (transparencia) o si preferís que el objeto no tenga borde. A su lado hay un cubo de pintura para seleccionar el color de relleno, el alfa o si prefieres que el objeto no tenga relleno.

Degradados y panel de Color

Si no tenés este panel en el espacio de trabajo ábrelo en el menú Ventana.

Clickeá el botón de relleno y seleccioná el pequeño rectángulo con el degradado de blanco a negro. Verás que podés modificar este degradado agregando puntos y colores, moviéndolos, cambiándolos de color o eliminándolos (presionando Ctrl).

Una vez que te guste el resultado podés modificar el degradado con la herramienta Transformación de degradados (girarlo, achicarlo, torcerlo, etc).

Biblioteca

Si no tenés este panel en el espacio de trabajo abrilo en el menú Ventana.

En la biblioteca se encuentran los símbolos y las imágenes, videos, sonidos o lo que sea que importes para incorporar al escenario.

Para importar un archivo a la biblioteca tenés que ir al menú Archivo > Importar > Importar a biblioteca y seguido de ello seleccionar el archivo. Para importar video elegí la opción Importar video.

Para insertar un nuevo símbolo (que puede ser un Clip de película, Botón o Gráfico) andá al menú Insertar > Nuevo símbolo, o bien presioná Ctrl+F8. Dale un nombre, seleccioná el tipo de símbolo y clickeá Aceptar. Vas a “entrar” automáticamente al símbolo creado, y ahora podés modificar dicho símbolo. Una vez que hayas terminado de modificar el símbolo a tu gusto, volvé a la Escena principal y para incorporar el símbolo en el escenario andá a la biblioteca y arrastralo desde allí.

Clip de película / Movieclip / “MC”

Podés incorporar en él Interpolaciones de Movimiento (ya veremos más tarde qué son), otros símbolos o lo que vos quieras.

Botón

Tiene cuatro estados: Reposo, que es cuando no tiene “encima” al cursor; Sobre, que es cuando el cursor está “encima” del botón; Presionado, que es cuando el usuario mantiene presionado el botón izquierdo del ratón; por último la Zona Activa, que en realidad no se ve, allí podés dibujar un rectángulo de cualquier color para indicar qué partes del escenario pertenecen al botón, es decir que al situar el cursor encima de esas partes se ve la "manito" característica de los botones.

Panel de Propiedades

Si no tenés este panel en el espacio de trabajo abrilo en el menú Ventana, o bien presionando Ctrl + F3.

Aquí podés cambiar las propiedades de cualquier objeto, interpolación, símbolo, relleno, borde o lo que sea. Podés darles nombres de instancia a los símbolos, lo cual te va a servir de mucho cuando tengas que programar con actionscript; podés agregar filtros a los textos y clips de película (ya sean sombras, desenfocados, iluminados, bisel, etc.); podés cambiar las propiedades de color de los clips de película o botones (alfa, tinta, brillo, etc.); podés cambiar los tipos de letra, tamaños y colores de los textos; incluso podés agregar efectos a las interpolaciones de movimiento y forma.

Cómo cambiar las propiedades del documento

En cualquier lugar vacío del escenario da click derecho + Propiedades del documento. Ahí podés variar el tamaño del “lienzo”, color de fondo, fps y unidad de regla.

Capas

Te permiten organizar los distintos “componentes” de tu película (fondo, textos, animaciones, o lo que necesites).

Línea de tiempo

Bueno y hasta acá llegamos en esta ocasión
Si tenés alguna duda sobre el tutorial, simplemente dejá un comentario.

Ver todos mis tutoriales

Hasta la próxima ;)

Jime

Hola Mundo

2011-02-22T12:30:00.002-03:00

¡Hola, Mundo! Mi nombre es Jimena, tengo 15 años y soy geek (http://www.google.com.ar + define:geek + Intro = "Geek es un término que se utiliza para referirse a la persona fascinada por la tecnología y la informática"). Voy a usar este blog como medio para compartir con ustedes tutoriales de diseño, programación, links interesantes, entre otras cosas, que seguramente les servirán de ayuda a muchas personas. Espero ser bienvenida y que les guste mi blog.

Un saludo desde Argentina
Jimena.