Bueno , como no todo en la vida es programacion y codigo y mas codigos !! . solo para dejarles un pequeño respiro en este blog , les dejo estos links a videos motivadores , es realmente importante nunca perder la vision en tus metas. Esto es un aporte de Walter Eduardo Teran (mi hermano). Alli les va :
Nada es imposible Adidas(Este comercial se los dedico tios)
http://www.youtube.com/watch?v=CTsQPO3vtFc
vencer los miedos Saga
http://www.youtube.com/watch?v=qTSYqRmxQaA
Quiero ser humano JOhnnie walker
http://www.youtube.com/watch?v=VvBRsCQtbNg
Black Label Japones JOhnnie walker (El mensaje es interesante)
http://www.youtube.com/watch?v=LEateooc3Ns
Hombres inmortales JOhnnie Walker
http://www.youtube.com/watch?v=qaXOfGIa5D0
Persigue tu sueño JOhnnie Walker
http://www.youtube.com/watch?v=6tZTojhZJ98
Video corporativo JOhnnie Walker
http://www.youtube.com/watch?v=fWJBbAoC7LA
Opinar en la reunion UPC
http://www.youtube.com/watch?v=qTQQN9e4bRY
vida de Alejandro Toledo
http://www.youtube.com/watch?v=8asRG3fekRE
Afirmaciones diarias de el secreto (No se olviden que son Diarias)
http://www.youtube.com/watch?v=tjb3uXHQ528&feature=related
y por ultimo este es nuestros video tios VEANLO ATENTAMENTE ...
Atte
Walter Terán Chiriboga
Koala Technologies (koalatec.com)
Leyendo el blog de mi pata David se me ocurrio la idea de hacer este post , ya que es un tema que se discute tambien en muchos foros y comunidades , muchas veces con respuestas no del todo acertadas o intermedias , yo propongo la siguiente solucion general :
Bueno en primer lugar necestias -> Un hosting gratuito y que te asegure que tu SWF permanecera alli sin ningun tipo de incoveniente
Aqui cuelga tus FLASH
Una vez que colgaste tu Flash alli ( es lo mas facil del mundo como te has dado cuenta) te generara una URL , apunta esa URL , y luego añade este codigo en tu entrada de blog para embeber tu flash ,esto es un aporte de nuestro amigo David :
Las etiquetas object y embed garantizan la compatibilidad con IE y Firefox , asi tu Flash se visualuzara sin problemas en los dos navegadores mas famosos e utilizados del mundo.
El tamaño original del archivo puede conocerse a través de cualquier programa reproductor externo (yo utilizo Swiff Player), capturando la pantalla y "midiéndolo", o leyendo el código fuente de la página OK?.
Hasta la prox Flasheros !
Bueno en primer lugar necestias -> Un hosting gratuito y que te asegure que tu SWF permanecera alli sin ningun tipo de incoveniente
Aqui cuelga tus FLASH
Una vez que colgaste tu Flash alli ( es lo mas facil del mundo como te has dado cuenta) te generara una URL , apunta esa URL , y luego añade este codigo en tu entrada de blog para embeber tu flash ,esto es un aporte de nuestro amigo David :
<center><object width="420" height="320">
<embed width="800" src="AQUI_TU_URL" height="200"/>
</embed></object></center>
Las etiquetas object y embed garantizan la compatibilidad con IE y Firefox , asi tu Flash se visualuzara sin problemas en los dos navegadores mas famosos e utilizados del mundo.
El tamaño original del archivo puede conocerse a través de cualquier programa reproductor externo (yo utilizo Swiff Player), capturando la pantalla y "midiéndolo", o leyendo el código fuente de la página OK?.
Hasta la prox Flasheros !
By Naret
Vamos a crear un efecto nieve que nos sera util para diversas aplicaciones ya sea para un nivel particular de nuestro juego o una simple animacion navideña , por supuesto, utilizando ActionScript 3. Veamos el ejemplo :
- Crea un nuevo documento preferiblemente de color oscuro y digita el siguiente codigo en el primer fotograma :
Vamos a crear un efecto nieve que nos sera util para diversas aplicaciones ya sea para un nivel particular de nuestro juego o una simple animacion navideña , por supuesto, utilizando ActionScript 3. Veamos el ejemplo :
- Crea un nuevo documento preferiblemente de color oscuro y digita el siguiente codigo en el primer fotograma :
// Tamaños pantalla
var width2 = stage.stageWidth;
var height2 = stage.stageHeight;
// Máximo tamaño copos y cantidad
var max_tamaño = 10;
var copos = 100;
function init () {
for (var i:Number=0; i<copos; i++) {
var t:snow=new snow();
addChild(t);
t.alpha = 0.2+Math.random()*0.6;
t.x = -(width2/2)+Math.random()*(1.5*width2);
t.y = -(height2/2)+Math.random()*(1.5*height2);
t.scaleX = t.scaleY=0.5+Math.random()*(max_tamaño*0.1);
t.k = 1+Math.random()*2;
t.viento = -1.5+Math.random()*(1.4*3);
t.addEventListener(Event.ENTER_FRAME, mover);
}
};
function mover(e:*){
e.target.y += e.target.k;
e.target.x += e.target.viento;
if (e.target.y>height2+10) {
e.target.y = -20;
}
if (e.target.x>width2+20) {
e.target.x = -(width2/2)+Math.random()*(1.5*width2);
e.target.y = -20;
}
else if (e.target.x<-20) {
e.target.x = -(width2/2)+Math.random()*(1.5*width2);
e.target.y = -20;
}
}
init();
Para que funcione crea un Movie Clip , que sea un punto blanco difuminado (Blur)
o un circulo que tenga un degradado radial de blanco al centro y transparente alrededor,
para que represente nuestro copo de nieve. Luego en la Biblioteca , le das clic
derecho al Movie Clip , seleccionas Vincular (Linkage) y en Clases(Class) , escribe
snow.
Hola amigos soy Naret. Aunque las cosas no me han salido bien este dia (especialmente por una chica por ahi ) en esta oportunidad , sin embargo , estoy de muchas ganas de mostrarles una interesante introduccion al AS3 y que mejor que Aprender-Haciendolo. Lo que intentaremos realizar es una pelotita con movimiento real , la cual controlaremos mediante las flechas del teclado dandole impulsos a nuestro antojo. Aparte de moverse , podra tambien rebotar en las paredes de la habitacion cerrada y paulatinamente ira disminuyendo su velocidad debido a la perdida de energia durante los choques hasta detener totalemente su movimiento mecanico , a menos que actue una fuerza externa que lo impulse nuevamente. Nos debe quedar algo asi :
NOTA IMPORTANTE : Hazle click al Flash para empezar a controlarlo con el teclado.
Veamos como hacerlo :
1. Sistema de coordenadas en Flash :
En Flash , asi como en la mayoria de programas de computadora , se utiliza siempre un sistema de coordenadas cartesiano para posicionar puntos o elementos en la pantalla. Flash no podia ser la excepcion : El origen (O) se toma desde la esquina superior izquierda del lienzo , las coordenadas Y aumentan hacia abajo y las coordenadas X aumenta hacia la derecha , siendo todas positivas en el cuadrante que determinan los ejes principales.
Observa el grafico , cualquier punto P posicionado en el cuadrante principal cumple que x>0 , y>0 ( coordenadas positivas) , de esto se infiere que las coordenadas Y aumentan de arriba hacia abajo y las X de izquierda a derecha , como ya lo mencionamos anteriormente.
2. Modelo fisico: Pelota + Habitacion.
Identifiquemos a continuacion las variables y elementos involucrados en nuestro sistema ( Pelota + Habitacion ) :
- Las dimensiones de nuestra habitacion seran las dimensiones del documento Flash ( 550px de ancho por 400px de alto)
- Al establecer margenes para nuestra habitacion la pelota ve limitado su movimiento solo al interior de esta. Por lo tanto si identificamos a P(x,y) como la posicion de la pelota para cualquier instante de tiempo , la coordenada X solo podra tomar valores desde 0 a 550 y la coordenada Y de 0 a 400 , esta condicion garantiza que la pelot a s iempre este dentro de la habitacion y nunca fuera de ella.
3.- Dejando todo listo antes de comenzar.
Primero que nada , vamos a crear un documento nuevo en Flash , este debe ser un documento de cualq uier medida , ya que escribiremos el codigo AS3 de tal forma que se adapte a cualquier tamaño de habitacion. En este caso yo eligire 550 px de anch o y 450 px de altura. Fijate tambien de que en la seccion Velocidad de fotogramas dice 12fps , para obtener mayor fluidez y performance en nuestra aplicacion vamos a colocarle en este caso 30fps , no niego que con 12fps tambien funciona pero me parece que el movimiento es algo brusco.
Luego , por cuestiones de orden y elegancia , crearemos 3 capas en nuestra linea de tiempo principal. La primera la llamaremos "Script" , la segunda sera : "Pelota" , y la tercera y ultima "Fondo" apiladas del modo que puedes ver en la imagen de abajo :
En la capa fondo , crea un rectagunlo con degradado y borde grueso , este rectangulo debe calzar en todo el documento completo. En la capa Pelota diseña una pelotita con la herramienta circulo , asignale un relleno y convierte eso en un Clip de pelicula ponle el nombre de "Circulo" luego de esto. Dale un nombre de identificador a la pelotita para poder controlarla desde AS3 , para ello , abre el panel de propiedades (Vetanas>Propiedades), Y asegurandote de que la pelota este seleccionada , asignale un nombre de instancia : "pelota"
Haz lo mismo tambien con el rectangulo que creaste de fondo conviertelo en un Clip de pelicula llamado "Fondo" y dale un nombre de instancia : "marco" ( asignarle un nombre de instancia a nuestra habitacion nos permitira controlarla para que funcione con cualquier tamaño).
4.- Programar el mundo fisico con ActionScript:
Como decia el gran Hector Lavoe : " Mi gente , aqui empieza lo bueno" vamos a tejer nuestro mundo fisico , comenzando por definir algunas variables basicas , veamos :
- Ubicate en el primer frame de la capa Script y presiona F9. Escribiremos nuestras primeras lineas de codigo ( Algo a tener en cuenta y que es una regla en aras del orden y la legibilidad de un codigo bien escrito es que escribamos nuestros Scripts trantando de que todo este en un solo frame). Primeramente , vamos a posicionar nuestra pelota en el centro del documento mediante ActionSc ript :
// Pelicula a 30fps - Pelota Física by Naret
//Posicion inicial de la pelotita en el centro de la habitación
pelota.x = marco.width/2;
pelota.y = marco.height/2;
- Muy bien , hasta este punto hemos llamado a las propiedaes de posicion de nuestra instancia "pelota" para ubicar nuestra pelota al centro de nuestra habitacion , este codigo permite tambien que nuestr o programa funcione para cualquier tamaño de habitacion. Seguidamente definiremos algunas variables importantes:
// Definicion de variables
var ax : Number = 0;
var ay : Number = 0;
var vy : Number = 0;
var vx : Number = 0;
var g : Number = .5; // Por cuestiones meramente esteticas g vale 0.5 y no 0.98
var friccion : Number = .99;
var radio:Number = pelota.height/2;
- Dejemos claro dos cosas , la primera es que estamos definiendo variables anteponiendo la palabra "var" seguida del nombre de dicha variable , luego se define el tipo de variable , en este caso es la palabra Number ( abarca los enteros y decimales largos). Seguidamente le asignamos el valor inicial ( la mayoria de nuestras variables fisicas inician en cero). Vamos a ver de que trata cada una de ellas :
- ax , a y : Variables de Aceleracion
- vx , vy : Variables de Velocidad
- g : Gravedad
- friccion : Variable que simulara los efectos de amortiguamiento del aire y los choques con las paredes.
-radio : Radio de nuestra pelotita.
- Ahora insertemos nuestros Listeners , los listeners son como interruptores que al encenderse invocan y envian informacion de un evento a una funcion particular. Una traduccion al español seria algo como "Escuchador" y precisamente esto es lo que hace un listener , escuchar y proces ar una accion para luego enviarle el "mensaje" a una funcion que respondera del modo que queramos.
Ejemplo : Al presionar la tecla "a" queremos que aparezca un mensaje que diga "hola mundo". En este caso el listener detecta la accion de apretar la tecla "a" e inmediatamente llama a una funcion la cual se encarga de imprimir el mensaje "hola mundo" en la pantalla.
Insertemos nuestros listener para nuestra aplicacion :
// Insertando los listeners
stage.addEventListener (Event.ENTER_FRAME, Entrar_en_frame);
stage.addEventListener (KeyboardEvent.KEY_DOWN, Presionar_tecla);
stage.addEventListener (KeyboardEvent.KEY_UP, Soltar_tecla);
Stage hace referencia a nuestra pelicula o documento principal . Los paremetros de nuestros listeners son basicamente dos : Uno invoca a la libreria de clases y propiedades de un evento , y la otra es la funcion a la cual acudira el listener al activarse el evento , el evento puede ser : presionar un boton , mover el mouse , presionar una tecla ,etc ,etc. Yo se que por ahora es un poco confuso , pero debes acostumbrarte , ya trabajando un poquito mas con esto podras asimilar intuivamente estos conceptos , no te preocupes !!, por ahora sigamos adelante !!.
El primer listener controla el flujo del tiempo (para los que han programado en C++ o Java es como un bucle infinito hecho con While). El segundo y el tercero controlan las instrucciones de teclad o al presionar y soltar las teclas respectivamente.
Ahora escribamos las funciones :
// Insertamos las funciones que seran invocadas por los listeners
function Entrar_en_frame (e: Event): void
{
}
function Presionar_tecla (e:KeyboardEvent):void
{
}
function Soltar_tecla (e:KeyboardEvent):void
{
}
Como te das cuenta las 3 funciones tienen algunos paremetros y cosas extrañas aparte de su nombre , no te preocupes por ellas todavia. las 3 funciones ademas no tienen ninguna instruccion por ahora. Comenzaremos a escribir codigo en la primera funcion. Ojo : cada listener debe tener asoc iada necesariamente una funcion y esta hay que escribirla asi la funcion este vacia o sin instrucciones , como lo acabo de hacer , de lo contrario saldra un mensaje de error al compilar.
Empecemos escribiendo codigo en la primera funcion :
// Al entrar al frame : Esta funcion es ejecutada al cargar la pelicula , y tiene la particularidad de invocarse asi misma todo el tiempo gracias al listener especial que tiene asociado.
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
}
Es un buen momento para ir probando la pelicula (Crt+Intro) , como puedes ver lo unico que hace la pelota es caer libremente en el vacio. Expliquemos un poco el codigo : Recordemos que la aceleracion es algo que afecta y provoca cambios en la velocidad de un objeto , por ello es que tanto al componente X y al componente Y de la velocidad se le suma las aceleraciones "ax" , "ay" y "g". En este caso como no existe aceleracion en X , ax = 0 no hay cambio de movimiento en este eje. En el eje Y no hay ninguna fuerza externa aparte de la gravedad que provoque aceleracion por tanto ay=0 , en el eje Y solo existe la aceleracion de la gravedad g=0.5 , que es la real responsable del movimiento acelerado hacia abajo. Finalmente la velocidad termina cambiando la posicion de un objeto , por ello le sumamos la velocidad a la posicion de nuestra pelotita.
Nota : Los que saben un poco de fisica se estaran arrancando los pelos , debido al hecho de que sumar aceleracion a velocidad , o velocidad a posicion , ¡ No es posible ! , ya que los vectores operados no son del mismo tipo , la razon de hacerlo es la siguiente :
Siguiendo la ecuacion vectorial:
, nos queda...
Date cuenta como al final las cantidades se suman para cada instante de tiempo , lo mismo podemos decir de la suma de la posicion y la velocidad. Cada unidad de tiempo en nuestro programa esta representado por el momento en que la cabecera de Flash lee nuestra funcion Entrar_en_Frame y hace las operaciones respectivas , Asi , entrando y volviendo a entrar.
Añadiendo los limites de al movimiento de la pelota
Escribamos algo mas de codigo para que la pelota pueda chocar con las paredes , fijate como hago las condiciones dentro de los If , y tambien fijate que al chocar la pelota hacemos que su vector de velocidad invierta su direccion multiplicandolo por -1 :
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
if(pelota.y+radio > marco.height)
{
pelota.y=marco.height-radio;
vy=vy*-1;
}
else if(pelota.y-radio<0)
{
pelota.y=radio;
vy=vy*-1;
}
if(pelota.x+radio>marco.width)
{
pelota.x=marco.width-radio;
vx=vx*-1;
}
else if(pelota.x-radio<0)
{
pelota.x=radio;
vx=vx*-1;
}
}
Es hora de probar nuevamente nuestro codigo , esta vez notaras como la pelota rebota continuamente en el piso , sin embargo lo hace sin perder su energia cinetica (Nunca se detiene !!!) eso no pasa en la realidad y lo arreglaremos agregando dos lineas mas de codigo :
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
vx=vx*friccion;
vy=vy*friccion;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
.....
....
....
Con esto simularemos los efectos conjuntos de la friccion del aire y los choques, la pelota ira mas y mas lento hasta detenerse. La varible friccion es un numero fraccional constante que definimos al inicio , asi que la accion de multiplicar es en el fondo una division en partes cada vez menores.
Es hora de escribir el codigo para las intrucciones con teclado , aqui es donde las variables de aceleracion ax y ay cobran su sentido , ya que hasta ahora valian cero :
function Presionar_tecla (e:KeyboardEvent):void
{
switch(e.keyCode) // Analizamos el evento de teclado "e"
// accediento a su propiedad keyCode
{
case Keyboard.LEFT: // Si el evento fue apretar la tecla izquierda
ax=-.5;
break;
case Keyboard.RIGHT: // Si el evento fue apretar la tecla derecha
ax=.5;
break;
case Keyboard.UP: // Si el evento fue apretar la tecla arriba
g=0;
ay=-.5;
break;
case Keyboard.DOWN: // Si el evento fue apretar la tecla abajo
ay=.5;
break;
}
}
function Soltar_tecla (e:KeyboardEvent):void
{
ax=0;
ay=0;
g=.5;
}
Como puedes ver estas funciones lo que hacen es darle una acelaracion extra a nuestra pelotita , por medio del teclado.
La funcion Soltar_tecla es para reiniciar las variables de aceleracion cuando aplicamos una aceleracion extra mediante la funcion Presionar_tecla , si no la pusieramos , las variables de aceleracion extra "ax" y "ay" actuarian constantemente en la pelota alterando su moviemiento natural.
5. Codigo fuente completo :
He aqui el codigo fuente completo y terminado , fijate que coloque los listeners en la parte final del codigo en vez de al principio ya que usualmente se los coloca alli por razones de formalidad. Tu puedes colocarlos donde prefieras , al principio o al final , el codigo funcionara igual , puedes tambien cambiar las dimensiones de la habitacion desde el Documento principal de Flash o los valores de la gravedad y friccion , el radio de la pelota , si quieres. El programa funcionara perfectamente y se adaptara a cualquier cambio.
// Pelicula a 30fps - Pelota fisica
// Posicion inicial de la pelotita en el centro del marco
pelota.x = marco.width/2;
pelota.y = marco.height/2;
// Definicion de variables
var ax : Number = 0;
var ay : Number = 0;
var vy : Number = 0;
var vx : Number = 0;
var g : Number = 0.5;
var friccion : Number = .99;
var radio:Number = pelota.height/2;
// Insertamos las funciones que seran invocadas por los listeners
// Al entrar al frame
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
vx=vx*friccion;
vy=vy*friccion;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
if(pelota.y+radio > marco.height)
{
pelota.y=marco.height-radio;
vy=vy*-1;
}
else if(pelota.y-radio<0)
{
pelota.y=radio;
vy=vy*-1;
}
if(pelota.x+radio>marco.width)
{
pelota.x=marco.width-radio;
vx=vx*-1;
}
else if(pelota.x-radio<0)
{
pelota.x=radio;
vx=vx*-1;
}
}
function Presionar_tecla (e:KeyboardEvent):void
{
switch(e.keyCode)
{
case Keyboard.LEFT:
ax=-.5;
break;
case Keyboard.RIGHT:
ax=.5;
break;
case Keyboard.UP:
g=0;
ay=-.5;
break;
case Keyboard.DOWN:
ay=.5;
break;
}
}
// Al momento de dejar de apretar la tecla
function Soltar_tecla (e:KeyboardEvent):void
{
ax=0;
ay=0;
g=.5;
}
// Listeners
stage.addEventListener (Event.ENTER_FRAME, Entrar_en_frame);
stage.addEventListener (KeyboardEvent.KEY_DOWN, Presionar_tecla);
stage.addEventListener (KeyboardEvent.KEY_UP, Soltar_tecla);
En esta leccion no he escatimado en detalles ya que es una introduccion al AS3 ,
que sin embargo requiere cierta solvencia en Flash y haber programado antes en algun otro lenguaje como C++ , Pascal o Java. En los proximos tutoriales sere mucho mas directo , por ello , seria bueno en este punto que refuerces los conceptos que vimos con otros tutoriales o manuales de Flash , seria bueno tambien revisar un poquito sobre los conceptos de programacion orientada a objetos para poder digerir mejor el AS3 , cosas que con Wikipedia se pueden salvar. Bueno todo a su tiempo no ?? , eso es algo que aprendi de algunas buenas amigas.
Hasta el proximo tutorial Bloggeros !! =)
NOTA IMPORTANTE : Hazle click al Flash para empezar a controlarlo con el teclado.
Veamos como hacerlo :
1. Sistema de coordenadas en Flash :
En Flash , asi como en la mayoria de programas de computadora , se utiliza siempre un sistema de coordenadas cartesiano para posicionar puntos o elementos en la pantalla. Flash no podia ser la excepcion : El origen (O) se toma desde la esquina superior izquierda del lienzo , las coordenadas Y aumentan hacia abajo y las coordenadas X aumenta hacia la derecha , siendo todas positivas en el cuadrante que determinan los ejes principales.
Observa el grafico , cualquier punto P posicionado en el cuadrante principal cumple que x>0 , y>0 ( coordenadas positivas) , de esto se infiere que las coordenadas Y aumentan de arriba hacia abajo y las X de izquierda a derecha , como ya lo mencionamos anteriormente.2. Modelo fisico: Pelota + Habitacion.
Identifiquemos a continuacion las variables y elementos involucrados en nuestro sistema ( Pelota + Habitacion ) :
- Las dimensiones de nuestra habitacion seran las dimensiones del documento Flash ( 550px de ancho por 400px de alto)- Al establecer margenes para nuestra habitacion la pelota ve limitado su movimiento solo al interior de esta. Por lo tanto si identificamos a P(x,y) como la posicion de la pelota para cualquier instante de tiempo , la coordenada X solo podra tomar valores desde 0
Luego , por cuestiones de orden y elegancia , crearemos 3 capas en nuestra linea de tiempo principal. La primera la llamaremos "Script" , la segunda sera : "Pelota" , y la tercera y ultima "Fondo" apiladas del modo que puedes ver en la imagen de abajo :
En la capa fondo , crea un rectagunlo con degradado y borde grueso , este rectangulo debe calzar en todo el documento completo. En la capa Pelota diseña una pelotita con la herramienta circulo , asignale un relleno y convierte eso en un Clip de pelicula ponle el nombre de "Circulo" luego de esto. Dale un nombre de identificador a la pelotita para poder controlarla desde AS3 , para ello , abre el panel de propiedades (Vetanas>Propiedades), Y asegurandote de que la pelota este seleccionada , asignale un nombre de instancia : "pelota"
Haz lo mismo tambien con el rectangulo que creaste de fondo conviertelo en un Clip de pelicula llamado "Fondo" y dale un nombre de instancia : "marco" ( asignarle un nombre de instancia a nuestra habitacion nos permitira controlarla para que funcione con cualquier tamaño).
4.- Pro
- Ubicate en el primer frame de la capa Script y presiona F9. Escribiremos nuestras primeras lineas de codigo ( Algo a tener en cuenta y que es una regla en aras del orden y la legibilidad de un codigo bien escrito es que escribamos nuestros Scripts trantando de que todo este en un solo frame). Primeramente , vamos a posicionar nuestra pelota en el centro del documento mediante ActionSc
// Pelicula a 30fps - Pelota Física by Naret
//Posicion inicial de la pelotita en el centro de la habitación
pelota.x = marco.width/2;
pelota.y = marco.height/2;
- Muy bien , hasta este punto hemos llamado a las propiedaes de posicion de nuestra instancia "pelota" para ubicar nuestra pelota al centro de nuestra habitacion , este codigo permite tambien que nuestr
// Definicion de variables
var ax : Number = 0;
var ay : Number = 0;
var vy : Number = 0;
var vx : Number = 0;
var g :
var friccion : Number = .99;
var radio:Number = pelota.height/2;
- Dejemos claro dos cosas , la primera es que estamos definiendo variables anteponiendo la palabra "var" seguida del nombre de dicha variable , luego se define el tipo de variable , en este caso es la palabra Number ( abarca los enteros y decimales largos). Seguidamente le asignamos el valor inicial ( la mayoria de nuestras variables fisicas inician en cero). Vamos a ver de que trata cada una de ellas :
- ax , a
- vx , vy : Variables de Velocidad
- g : Gravedad
- friccion : Variable que simulara los efectos de amortiguamiento del aire y los choques con las paredes.
-radio : Radio de nuestra pelotita.
- Ahora insertemos nuestros Listeners , los listeners son como interruptores que al encenderse invocan y envian informacion de un evento a una funcion particular. Una traduccion al español seria algo como "Escuchador" y precisamente esto es lo que hace un listener , escuchar y proces
Ejemplo : Al presionar la tecla "a" queremos que aparezca un mensaje que diga "hola mundo". En este caso el listener detecta la accion de apretar la tecla "a" e inmediatamente llama a una funcion la cual se encarga de imprimir el mensaje "hola mundo" en la pantalla.
Insertemos nuestros listener para nuestra aplicacion :
// Insertando los listeners
stage.addEventListener (Event.ENTER_FRAME, Entrar_en_frame);
stage.addEventListener (KeyboardEvent.KEY_DOWN, Presionar_tecla);
stage.addEventListener (KeyboardEvent.KEY_UP, Soltar_tecla);
El primer listener controla el flujo del tiempo (para los que han programado en C++ o Java es como un bucle infinito hecho con While). El segundo y el tercero controlan las instrucciones de teclad
Ahora escribamos las funciones :
// Insertamos las funciones que seran invocadas por los listeners
function Entrar_en_frame (e: Event): void
{
}
{
}
function Soltar_tecla (e:KeyboardEvent):void
{
}
Como te das cuenta las 3 funciones tienen algunos paremetros y cosas extrañas aparte de su nombre , no te preocupes por ellas todavia. las 3 funciones ademas no tienen ninguna instruccion por ahora. Comenzaremos a escribir codigo en la primera funcion. Ojo : cada listener debe tener asoc
Empecemos escribiendo codigo en la primera funcion :
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
}
Es un buen momento para ir probando la pelicula (Crt+Intro) , como puedes ver lo unico que hace la pelota es caer libremente en el vacio. Expliquemos un poco el codigo : Recordemos que la aceleracion es algo que afecta y provoca cambios en la velocidad de un objeto , por ello es que tanto al componente X y al componente Y de la velocidad se le suma las aceleraciones "ax" , "ay" y "g". En este caso como no existe aceleracion en X , ax = 0 no hay cambio de movimiento en este eje. En el eje Y no hay ninguna fuerza externa aparte de la gravedad que provoque aceleracion por tanto ay=0 , en el eje Y solo existe la aceleracion de la gravedad g=0.5 , que es la real responsable del movimiento acelerado hacia abajo. Finalmente la velocidad termina cambiando la posicion de un objeto , por ello le sumamos la velocidad a la posicion de nuestra pelotita.
Nota : Los que saben un poco de fisica se estaran arrancando los pelos , debido al hecho de que sumar aceleracion a velocidad , o velocidad a posicion , ¡ No es posible ! , ya que los vectores operados no son del mismo tipo , la razon de hacerlo es la siguiente :
Siguiendo la ecuacion vectorial:
, nos queda...Date cuenta como al final las cantidades se suman para cada instante de tiempo , lo mismo podemos decir de la suma de la posicion y la velocidad. Cada unidad de tiempo en nuestro programa esta representado por el momento en que la cabecera de Flash lee nuestra funcion Entrar_en_Frame y hace las operaciones respectivas , Asi , entrando y volviendo a entrar.
Añadiendo los limites de al movimiento de la pelota
Escribamos algo mas de codigo para que la pelota pueda chocar con las paredes , fijate como hago las condiciones dentro de los If , y tambien fijate que al chocar la pelota hacemos que su vector de velocidad invierta su direccion multiplicandolo por -1 :
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
if(pelota.y+radio > marco.height)
{
pelota.y=marco.height-radio;
vy=vy*-1;
}
else if(pelota.y-radio<0)
{
pelota.y=radio;
vy=vy*-1;
}
if(pelota.x+radio>marco.width)
{
pelota.x=marco.width-radio;
vx=vx*-1;
}
else if(pelota.x-radio<0)
{
pelota.x=radio;
vx=vx*-1;
}
}
Es hora de probar nuevamente nuestro codigo , esta vez notaras como la pelota rebota continuamente en el piso , sin embargo lo hace sin perder su energia cinetica (Nunca se detiene !!!) eso no pasa en la realidad y lo arreglaremos agregando dos lineas mas de codigo :
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
vx=vx*friccion;
vy=vy*friccion;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
.....
....
....
Con esto simularemos los efectos conjuntos de la friccion del aire y los choques, la pelota ira mas y mas lento hasta detenerse. La varible friccion es un numero fraccional constante que definimos al inicio , asi que la accion de multiplicar es en el fondo una division en partes cada vez menores.
Es hora de escribir el codigo para las intrucciones con teclado , aqui es donde las variables de aceleracion ax y ay cobran su sentido , ya que hasta ahora valian cero :
function Presionar_tecla (e:KeyboardEvent):void
{
switch(e.keyCode) // Analizamos el evento de teclado "e"
// accediento a su propiedad keyCode
{
case Keyboard.LEFT: // Si el evento fue apretar la tecla izquierda
ax=-.5;
break;
case Keyboard.RIGHT: // Si el evento fue apretar la tecla derecha
ax=.5;
break;
case Keyboard.UP: // Si el evento fue apretar la tecla arriba
g=0;
ay=-.5;
break;
case Keyboard.DOWN: // Si el evento fue apretar la tecla abajo
ay=.5;
break;
}
}
function Soltar_tecla (e:KeyboardEvent):void
{
ax=0;
ay=0;
g=.5;
}
Como puedes ver estas funciones lo que hacen es darle una acelaracion extra a nuestra pelotita , por medio del teclado.
La funcion Soltar_tecla es para reiniciar las variables de aceleracion cuando aplicamos una aceleracion extra mediante la funcion Presionar_tecla , si no la pusieramos , las variables de aceleracion extra "ax" y "ay" actuarian constantemente en la pelota alterando su moviemiento natural.
5. Codigo fuente completo :
He aqui el codigo fuente completo y terminado , fijate que coloque los listeners en la parte final del codigo en vez de al principio ya que usualmente se los coloca alli por razones de formalidad. Tu puedes colocarlos donde prefieras , al principio o al final , el codigo funcionara igual , puedes tambien cambiar las dimensiones de la habitacion desde el Documento principal de Flash o los valores de la gravedad y friccion , el radio de la pelota , si quieres. El programa funcionara perfectamente y se adaptara a cualquier cambio.
// Pelicula a 30fps - Pelota fisica
// Posicion inicial de la pelotita en el centro del marco
pelota.x = marco.width/2;
pelota.y = marco.height/2;
// Definicion de variables
var ax : Number = 0;
var ay : Number = 0;
var vy : Number = 0;
var vx : Number = 0;
var g : Number = 0.5;
var friccion : Number = .99;
var radio:Number = pelota.height/2;
// Insertamos las funciones que seran invocadas por los listeners
// Al entrar al frame
function Entrar_en_frame (e: Event): void
{
vy = vy + g;
vy = vy + ay;
vx = vx + ax;
vx=vx*friccion;
vy=vy*friccion;
pelota.x = pelota.x + vx;
pelota.y = pelota.y + vy;
if(pelota.y+radio > marco.height)
{
pelota.y=marco.height-radio;
vy=vy*-1;
}
else if(pelota.y-radio<0)
{
pelota.y=radio;
vy=vy*-1;
}
if(pelota.x+radio>marco.width)
{
pelota.x=marco.width-radio;
vx=vx*-1;
}
else if(pelota.x-radio<0)
{
pelota.x=radio;
vx=vx*-1;
}
}
function Presionar_tecla (e:KeyboardEvent):void
{
switch(e.keyCode)
{
case Keyboard.LEFT:
ax=-.5;
break;
case Keyboard.RIGHT:
ax=.5;
break;
case Keyboard.UP:
g=0;
ay=-.5;
break;
case Keyboard.DOWN:
ay=.5;
break;
}
}
// Al momento de dejar de apretar la tecla
function Soltar_tecla (e:KeyboardEvent):void
{
ax=0;
ay=0;
g=.5;
}
// Listeners
stage.addEventListener (Event.ENTER_FRAME, Entrar_en_frame);
stage.addEventListener (KeyboardEvent.KEY_DOWN, Presionar_tecla);
stage.addEventListener (KeyboardEvent.KEY_UP, Soltar_tecla);
En esta leccion no he escatimado en detalles ya que es una introduccion al AS3 ,
que sin embargo requiere cierta solvencia en Flash y haber programado antes en algun otro lenguaje como C++ , Pascal o Java. En los proximos tutoriales sere mucho mas directo , por ello , seria bueno en este punto que refuerces los conceptos que vimos con otros tutoriales o manuales de Flash , seria bueno tambien revisar un poquito sobre los conceptos de programacion orientada a objetos para poder digerir mejor el AS3 , cosas que con Wikipedia se pueden salvar. Bueno todo a su tiempo no ?? , eso es algo que aprendi de algunas buenas amigas.
Hasta el proximo tutorial Bloggeros !! =)
Hola que tal , mi nombre es Jorge Luis Teran de ahora en adelante alias: Naret , tocaremos el tema de la programacion en Flash , decidi hacer un blog aparte ya que el tema es de por si muy extenso y no se puede mezclar con el diseño grafico o web convencional. Pense que era necesario separar muy bien los dos mundos de Flash : El de los diseñadores y el de los programadores.
para el area de diseñadores esta mi otro blog al cual puedes acceder directamente aqui :
Ciudad Vectorial
Si bien es cierto , ahora con el potente AS3 (ActionScript 3) Flash es equiparable a plataformas de desarrollo tales como Java a la hora de hacer sistemas , este blog solo tocara el tema a nivel de aplicaciones practicas desarrolladas integramente en el entorno de Flash.
Recordemos que AS3 se puede trabajar tambien en entornos como Flex o ID's como Eclipse , combinandolas a su vez con otras avanzadas tecnologias.
Pero la orientacion de la programacion en este blog se hara entorno al desarrollo de elementos web , juegos , animaciones y entornos multimedia interactivos ; que son en realidad las mayores y mas requeridas aplicaciones de Flash a nivel practico.
Dejando claro estos puntos , empecemos.
