viernes, 5 de diciembre de 2008

Lo nuevo de flash

He instalado el Flash cs4 (flash 10), mas bien por un apuro, pero me ha dejado con la boca abierta.

observen esta pagina verán de lo que hablo.

http://www.adobe.com/es/products/flash/features/?view=topnew

Podrán ver como Flash a permitido el uso de animación 3d y de una particular herramienta hueso, que facilita enormemente el trabajo de articulación (por que no tuve estas herramientas hace unos meses atras, cuando hice los origami).
otra noveda es que al crear una interpolacion de movimiento, flash incorpora inmediatamente la guia de movimiento.

Sin dudas les recomiendo el Flash CS4.

martes, 2 de diciembre de 2008

Flash 8: introducción Action Scripts 2

Lord Zorel: Flash 8: introducción Action Scripts

Para crear un juego en flash, como el del futbolista o uno mejor, debemos aprender a manejar dos cosas:

  • Manipular Variables en Flash.

  • La Estructura de flash (como están ordenados los objetos dentro de flash).



Manipular Variables en Flash.

Una variable en flash es el nombre que recibe un objeto de flash, ya sea un numero, una cadena de texto, un clip de película, un botón, etc.

Para crear una variable en flash debes escribir el siguiente código:

var NombreVariable = variable

por ejemplo:

var x=10

(la variable x vale 10)

var saludo= "hola mundo"

la variable saludo, vale "hola mundo"

var botonEncendido= botonera.play_btn

la variable botonEncendido vale o representa a un botón que se llama play_btn y se encuentra dentro de botonera.

Por regla general, los nombre de las variables no pueden llevar espacios, ni empezar con un numero, ademas flash diferencia entre mayúsculas y minúsculas (la variable holaTu, no es igual a la variable HolaTu)

Creación de variables

Bueno, flash tiene bastantes tipos distintos de variables, pero los usados son:

Number (numero), ejemplo:
var x=10 (también se puede escribir como var x:Number=10 )

Strings (cadena de texto)
var saludo= "Hola Mundo" (también se puede escribir como var saludo:Strings= "Hola Mundo")
El uso de las "..." (comillas dobles) o de las '...' (comillas simples) permiten diferenciar a las cadenas de texto de las variables, por ejemplo, escribe el siguiente código en el primer fotograma de una película vació y luego prueba la película.

var Hola= "¿Cómo estas? "
var saludo= "Hola"
trace( saludo)

Cuando pruebes la película, deberá aparecer un mensaje que dice Hola.
(aparece en pantalla el valor de la variable saludo)
ahora cambia el código anterior por este.


var Hola= "¿Cómo estas? "
var saludo= Hola
trace( saludo)

Ahora, en vez de aparecer un mensaje que dice Hola, aparece un mensaje que dice ¿Cómo estas?
(aparece en pantalla el valor de la variable saludo, solo que esta vez el valor de la variable saludo, es igual al valor de la variable Hola, dirá ¿Cómo estas?)

function (funciones)

en flash, también puedes escribir una función para utilizarla en cualquier momento.
ejemplo:

var parabola= function (x){
var y=x*x
return (y)
}

trace(parabola(2))

Este código crea una función llamada parabola, que utiliza una variable x, y devuelve la variable y (que vale x*x)
el código trace(parabola(2)) dice que evalue parabola en 2 y muestre el resultado, en otras palabra, que calcule 2*2 y de el resultado.

Array (vectores)

Los vectores permiten ordenar datos o variables (no necesariamente del mismo tipo)

por ejemplo:

var Notas= new Array(6, 7, 5)

otro ejemplo.

var Notas=new Array ()
Notas[0]=6
Notas[1]=7
Notas[2]=5

(el [numero] indica en que orden estará la variable)

Los Array son muy utiles para ordenar variables y poder recorrerlas todas, pero eso lo veremos mas adelante.

Modificacion de numeros y cadenas.

para sumar un numero

var x=10
var x=x+5
//a x le sumamos 5

para sumarle 1

var x++
// es una manera rapida de pedirle a x que aumente en una unidad

var x=x-16
// a x le restamos 16

var x=x/4
// a x lo dividimos por 4

var x=x*5
// 5 veces x

var x=x%3
// x vale el resto de dividir x por 3
// no confundir con porcentaje

Ahora con cadenas de texto

var hola= "Hola"

var saludo= hola
// saludo vale hola

var saludo = hola+" ¿cómo estas?
// saludo vale "Hola ¿cómo estas?

var saludo = hola+" ¿cómo estas? \n"+hola+" bien, ¿y tu?"
// saludo vale "Hola ¿cómo estas?"
// "Hola, bien, ¿y tu?"

la palabra clave \n significa que baje una linea mas abajo


Para probar que lo que hicimos funcione bien, inserta

trace(NombreVariable)

para que puedas ver el valor de la variable cuando pruebes la película.



La Estructura de flash

Esto es lo mas genial de flash.

para entenderla, necesito que crees un documento en blanco de flash
¿listo?

Ahora dibuja una persona (sin muchos detalles)

ahora selecciona a esa persona y conviértela en clip de película ( presiona F8 y selecciona clip de película), luego ponle un nombre al clip de película (en el panel propiedades, después de convertirlo en símbolo), yo lo llamare juanito.
¿listo?

Ahora, Dibuja una casa, selecciona la casa y la persona y conviértelas en símbolo (de nuevo F8), luego ponle un nombre a la casa con la persona (yo la llamare casa)

Ahora, juanito esta dentro de la casa ( del clip de película que se llama casa), pero la casa tambien esta en la linea de tiempo principal, que se llama _root.

Dentro de flash, la dirección de juanito es _root.casa.juanito y todas las variables dentro de juanito, estan en _root.casa.juanito.nombreVariable, por ejemplo:

haz doble clic sobre juanito hasta que quede seleccionado





ahora selecciona el primer fotograma de la linea de tiempo (esta linea de tiempo, corresponde a la de juanito, no es la linea de tiempo principal), presiona F9 e ingresa el siguiente código:

var edad=10
// la edad de juanito es 10

Ahora vuelve a la linea de tiempo principal (haciendo doble clic afuera de la casa hasta salir), selecciona el fotograma clave de arriba, presiona F9 e ingresa este código:

trace(_root.casa.juanito.edad)

este código, mostrara la edad de juanito.

Ahora haz doble clic en la casa y dibuja otra persona.
Selecciona la nueva persona y conviértela en clip de película (F8)
Ahora dale un nombre, yo la llamare maría.
Selecciona a maría, haz doble clic y en el primer fotograma de la linea de tiempo de maría, presiona F9 y escribe esto.

var edad=9

Ahora vuelve a la linea de tiempo principal.
selecciona el fotograma clave de arriba.
presiona F9 e ingresa este código:

trace(_root.casa.maria.edad)

este código debería dar como resultado 9


Bueno, espero que halla quedado claro la estructura de flash, solo es cosa de entender que los objetos guardan sus propias variables y que el _root es el lugar donde están almacenados todos los objetos y variables de flash.

Ahora, yo creo que no sera mucho problema entender como esta hecha la animación del futbolista, solo falta mencionar que la función Random(n), entrega un numero al azar entre 0 y n-1, es decir que si pones Randon (3) este devolverá un numero al azar entre 0, 1 y 2

Para que analices por ti mismo el tutorial del futbolista, bájalo aquí, revisalo, modificalo, haz lo que quieras





En este vídeo se utilizan mas opciones de flash, como lo es insertar ese botón con forma de ovalo y escribir el código encima del botón.

Aclaración:

on (Release){


hacer algo

}

es lo mismo que llamarlo desde la linea de tiempo principal y ponerle

nombre_bton.onRelease= function(){

hacer algo
}

a mi me gusta la ultima manera, pues permite ver todos los códigos de los botones desde un mismo fotograma

miércoles, 26 de noviembre de 2008

Flash 8: introducción Action Scripts

Lord Zorel: Flash 8: interpolaciones de forma

En esta oportunidad, le vamos a añadir interactividad a nuestras creaciones en flash, para ello le añadiremos código Action Script (AS).

Lo primero que debemos hacer es crear una nueva capa, ha esta capa la llamaremos Acción sera la primera capa, la bloqueamos con el candadito y listo.

Como te habrás dado cuenta si le pones probar película (ctrl + enter), la película da vueltas y vueltas y vueltas y vueltas y vueltas y vueltas y .... vueltas. Para evitar que se quede dando tantas vueltas, vamos a ir al ultimo fotograma de la capa Acción y lo convertiremos en fotograma clave (presiona F6), con el fotograma seleccionado, nos vamos a ver las acciones del fotograma (presiona F9). Aparecerá un cuadro donde puedes escribir en él ( panel de acciones).
Ahora escribe esto en el panel de acciones y prueba la película


stop()


con este sencillo código, puedes hacer que las películas se detengan en cualquier punto que lo necesites, ya sea al principio de la película, al medio o al final, todo dependerá de donde pongas el fotograma clave con el código stop().



Así como hay un código para detener las películas, también hay uno para hacerlas avanzar, retroceder o incluso saltar de un fotogramas y crear una película como la siguiente.








PLAY

Al igual que el código de stop, podríamos escribir play en el fotograma clave para que la película avance, pero si detenemos la película y luego la avanzamos, no ocurrirá nada. Así que vamos a crear un botón que cuando lo apretamos va ha hacer que avance la película. Para ello vamos a ir al primer fotograma de la capa Acción y lo convertiremos en fotograma clave (F6), luego en la capa de abajo, vamos a dibujar un circulo y lo convertiremos en botón (presiona F8), ojo que aparecerá un cuadro de dialogo con 3 opciones, clip de película, gráfico o botón, elegimos botón, le ponemos un nombre y apretamos aceptar. Ahora, en el panel propiedades lo vamos a bautizar como “reproducir_btn”




ahora que ya tiene un nombre, podemos decirle que haga lo que queramos.

Para que al presionarlo, haga avanzar la película, vamos a ir al fotograma clave de la capa acción y debajo de stop(), vamos a agregar el siguiente código:


reproducir_btn.onPress = function(){

play()

}

Lo que significa que cuando se presione el botón reproducir_mc, esté va a poner play.

GOTOANDPLAY & GOTOANDSTOP

Las funciones gotoAndPlay y gotoAndStop, nos permiten saltar de un fotograma a otro.

Existen tres maneras de hacerlo, la primera es

gotoAndPlay(numero del fotograma)

la segunda es

gotoAndPlay("nombre del fotograma")

y la tercera es


gotoAndPlay("nombre escena", numero fotograma)

o tambien

gotoAndPlay("nombre escena", "nombre de fotograma")



por ejemplo, si estamos en el fotograma numero 10 y queremos saltar al fotograma 20,
escribimos:

gotoAndPlay(20)

pero a los fotogramas también podemos ponerles nombres o etiquetas, para hacerlo,
debes seleccionar un fotograma clave y luego en el panel de propiedades (el de abajo),
en el recuadro etiqueta escribes el nombre del fotograma.

Supongamos que tenemos un fotograma que se llama pelotazo (donde se ve al jugador antes de lanzar un pelotazo)
si queremos saltar hasta el fotograma pelotazo, debemos escribir el siguiente código:

gotoAndPlay("pelotazo")

esto va ir al fotograma que se llama pelotazo y le pondrá play, si lo que quieres es que se detenga en ese fotograma
simplemente cámbialo por:

gotoAndStop("pelotazo")



Con estos codigos ya podras realizar una animación como la del futbolista, solo nos falta ver, como hacer para que el arquero salte en cualquier dirección y como hacer para que sepas cuando metiste un Gol.

martes, 11 de noviembre de 2008

Flash 8: interpolaciones de forma

Las interpolaciones de forma, solo son aplicables a fotogramas que solo contengan formas, es decir que no contengan símbolos, botones o grupos, pero si pueden contener Objetos de Dibujo. si nunca has trabajado con objetos de dibujo, te sugiero que aprendas, pueden llegar a ser muy útiles. Aquí pongo un vídeo.




Este tipo de animación es la mas sencilla que se puede realizar en con una interpolación de forma, pero como es de esperarse, no siempre da un resultado perfecto.
Por ejemplo, si intentamos convertir un triangulo en un cuadrado o deformar un cuadrilátero para obtener un efecto 3D (como en el ejemplo del disparo con el que empezamos este curso), es necesario utilizar consejos de forma (uno para cada punto), descubrí que es mas fácil cuando tratamos de transformar una forma de 4 puntas a otra de 4 puntas que una de 3 a 4 o de 4 a 3, por ejemplo cambiar de un cuadrado a un triangulo ( de 3 a 4 esquinas), si simplemente creamos la interpolación, no nos quedara un resultado muy bonito, pero para evitar este problema, podemos crear un paso antes del triangulo, en el que al cuadrado, le falte muy poco para convertirse en un triangulo (de lejos debería verse igual), ademas como los ángulos del cuadrado son muy rectos, recomiendo crear un segundo cuadrado un poco menos recto que se comience la transformación, de todas formas aquí dejo un vídeo.









También dejo una animación para descargar











Con un poco de practica se puede conseguir mas rápido

PD: en la ayuda de flash recomiendan usar los consejos de forma en dirección contraria a las agujas del reloj

lunes, 19 de mayo de 2008

Origami

¿Como hacer el pato o grulla de Prison Break?
¿Como hago la grulla que hace Hiro Nakamura en Heroes?

Bueno, ahora pues ver con lujo de detalle como hacer estos Origamis









Si tienes otro origami (famosos o no famosos), mándame un correo a:
gato_lona@hotmail.com, asunto Origami.

Puedes enviarme una imagen, un video o un archivo swf o fla.

si utilizas flash, puedo darte algunos consejos con la interpolación de forma, el Pato de Escofield lo hice solo con interpolaciones de forma.