Programación de juegos en Flash

¿Como importar de China? - Negocios con China

2011-01-15T17:09:00.000-08:00

A nadie le es extraño o por lo menos le debe parecer nuevo de que las más grandes marcas o firmas del mundo mandan a fabricar sus piezas en China. Tal es el caso del gigante Apple o de otros similares.

Hacer negocios con China tiene la ventaja de darnos mayores margenes de ganancias y menores costos de producción. Por tanto , es como mandar a hacer los productos directamente a una fábrica. Para los Chinos no hay imposibles , ellos hacen cualquier cosa que usted les pida. Si no lo tienen aun , se lo diseñan.

Con la llegada del Internet , el comercio se ha abierto muchisimo , basta con dar una mirada al portal alibaba.com para ver la gama de proveedores y productos que podemos comenzar a importar. Sin embargo , si no se sabe la forma correcta de hacer negocios y verificar las fabricas de proveedores , se podria perder dinero por falta de calidad , fallas en sus pedidos o no saber negociar adecuadamente.

En el Perú , China es uno de nuestros principales proveedores , seguido de Estados Unidos y Brazil. El volumen de importaciones para el 2010 fue mayor para el primero de los mencionados.

¿Qué se puede importar desde China?

Cualquier tipo de piezas , maquinarias , accesorios electronicos , telefonos , muebles , instrumentos musicales , etc. Practicamente todo lo que usted se puede imaginar. Mire a su alrededor , le apuesto de que mas del 98% de los articulos que tiene en su hogar es de alguna manera hecho con materiales importados de China. Habría que mencionar tambien que las fabricas Chinas estan en constante innovacion , sacando al mercado productos novedosos.

¿Cualquier puede importar de China?

Si y No. Si , para los que se capacitan adecuadamente en Tramites Aduaneros , Costos logisticos , Estudio de Mercado , Negociacion , Busqueda de proveedores confiables y Comercializacion final y , de esta manera , reducen significativamente su curva de aprendizaje. Es cierto que todo esto se le puede delegar a una agencia de aduanas , pero por lo general el importador que quiere tener exito en el negocio debe conocer a fondo los elementos o tramites de una importacion para que no le aumenten los costos o cobren de más. Un pequeño aumento en sus costes de importacion , repercutiria negativamente en el precio unitario final de sus productos.

¿Donde se puede aprender a importar de China?

Es facil importar de China , pero hay que capacitarse para no tener dudas y saber qué hacer , cuando hacerlo y como hacerlo. Tambien es vital estudiar casos practicos y hacer pequeños estudios de mercado. En el siguiente link , usted tendrá una herramienta definitiva a su favor. Una capacitacion completa que le enseñara practicamente todo lo que debe saber para realizar una importacion exitosa desde China.

Seminario Importacion de China y Comercilizacion en Internet

Ingrese a :

www.conferenciasperu.com o escribanos a informes@conferenciasperu.com para más información. Este seminario se repite frecuentemente. Consulte la proxima fecha del evento.

Espero le sea util esta informacion. Haga las preguntas que sea pertinente por este medio , le responderé lo mas pronto posible.

Comprometido con su exito personal y profesional
Sinceramente
Jorge Luis Teran

Conferencia Social Media Marketing - 17 de Abril en la PUCP

2010-03-27T17:14:00.000-07:00

El próximo Sábado 17 de abril tendrá lugar en la Pontificia Universidad Católica del Perú la conferencia “Social Media Marketing”, la cual será impartida por Walter Terán, experto en Marketing en Internet, y Jorge Luis Terán, desarrollador de Plataformas de Negocios Online.

Este evento organizado por Marketing Place, con el respaldo de la Fraternidad Freedom Business Consulting, busca acercar a los especialistas en marketing, publicistas, estudiantes y público interesado, a esta excelente forma de incrementar la visibilidad de tu marca, negocio o sitio web de manera efectiva y gratuita.

Temario

Introducción a las Redes sociales.
El Posicionamiento de marca en las redes sociales.
Como hacer una campaña de publicidad en las redes sociales.
Los Errores más comunes en el marketing con redes sociales.
Casos de éxito Peruanos en las redes sociales.

CV de los Ponentes:

Walter Terán: Experto en Marketing en Internet, y Desarrollador y diseñador web. Gerente general de Koalatec S.A.C (www.koalatec.com) , empresa especializada en Diseño Web Profesional. Ha laborado en PERS Corporation como Desarrollador Aplicaciones Flash As2, As3, Flex. Además, ha participado como ponente en varios cursos y seminarios en temas de Marketing en redes sociales, Comercio Electrónico y demás similares conjuntamente con su hermano Jorge Luis Terán. Gran conocer en la Implementación de carritos de compras y catálogos en línea para negocios de comercio exterior.

Página web Personal : www.tallerdelideres.com

Jorge Luis Terán: Desarrollador de plataformas de Negocios Online. Gerente de Proyectos de Koalatec S.A.C, empresa especializada en Diseño Web Profesional. Ha laborado en Soltrónica como Diseñador Gráfico y Web. Conocedor de Técnicas de Ventas y los 12 Cierres.

Página web Personal : www.marketing.koalatec.com

Información General

Día: Sábado 17 de abril
Hora: 4pm.
Duración: 2horas

Lugar: Pabellón Z de la Pontificia Universidad Católica del Perú- Aula Z214

Ubique rápidamente el pabellón Z con el siguiente mapa Virtual del campus

Inversión (Previa Inscripción) :
Estudiantes PUCP: S/. 25
Público en general: S/. 35

Observaciones:

Los interesados podrán asistir a la Conferencia haciendo efectivo el pago respectivo, según la modalidad a la que pertenezcan (estudiantes PUCP o público en general), el mismo día del evento. Para ello le pedimos asistir al evento 15 minutos antes del inicio de la misma.
*Las vacantes son Limitadas.

Fecha Límite de inscripción para público en general: Lunes 12 de abril.
Fecha Límite de inscripción para estudiantes PUCP: Viernes 16 de abril.

Datos a enviar para efectuar la inscripción:

Apellido Paterno:
Apellido Materno:
Nombres:
DNI:
Teléfono/Celular:
Institución a la que pertenece (Universidad/Centro de Trabajo):
Informes e inscripciones en
E-mail: marketingplace.peru@gmail.com
Telfs: 99647709 / 990491328
Para mayor información visite :
www.marketingplaceperu.com

Seminario “Blog Diamante” 12 y 13 de Diciembre - Eiger sede “Los Olivos” – VIDEO - Lima Perú.

2009-11-29T11:09:00.001-08:00

En este video respondemos las preguntas frecuentes sobre el seminario “Blog Diamante”

Seminario "Blog Diamante" en EIGER los Olivos

Cordiales saludos , este sábado 12 de Diciembre y domingo 13 de diciembre se dictará el seminario Blog “Diamante” , en el cual revelaremos todos los secretos detrás de estas plataformas de Internet para generar ingresos económicos y publicidad para nuestros negocios o actividades afines.

Temas a tratar:

- Cómo utilizar un blog para generar tráfico masivo.

- Cómo rentabilizar un blog con Google Adsense

- Cómo rentabilizar un blog con programas de Afiliados

- Blogs Gratuitos vs Blogs Profesionales

- Estudio de casos de éxito peruanos.

Expositores :

- Walter Eduardo Terán : Experto en Marketing por Internet.

- Jorge Luis Terán : Desarrollador de plataformas de negocios online.

Inversión : 15 soles (Estudiantes Eiger y público en general)

Informes : EIGER sede los Olivos . Calle Palacios Valdez Nro 122 (Frente al Megaplaza)

Telf: 522-5531 / 523-6791 ( Sede EIGER los Olivos)

Deformar bitmaps con el metodo drawTriangles de Actionscript 3

2009-04-22T10:31:00.000-07:00

En este tutorial mostraré un par de sencillos ejemplos en cuanto al uso de una de las novedades de Adobe Flash CS4 que mas me ha llamado la atención (en cuanto a ActionScript se refiere), estoy hablando de la adición del método DrawTriangles() a la clase Graphics.

Este método es muy útil al momento de crear figuras tridimensionales a partir de triángulos, así como también para modificar la apariencia de un bitmap (que explicare mas adelante), y en el mas sencillo de los casos dibujar una figura vectorizada (con forma de triangulo) similar a lo que harían el resto de los métodos de Graphics.

A continuación, el resultado final:

Content on this page requires a newer version of Adobe Flash Player.

Arrastra los recuadros negros, para modificar la imagen.

Como podrás ver, el bitmap esta dividido por 2 triángulos rectángulos, unidos a través de sus hipotenusas formando un rectángulo. Explico a detalle como crearlo:

Aprendiendo la Teoria

Antes de hecharle un vistazo al código completo, pienso que es mas importante comprender la manera básica de como trabaja este.

Primero hay que imaginar que ya tenemos en nuestro escenario, un objeto bitmap sin mayor chiste, cuyo contorno esta formado por algún tipo de cuadrángulo al cual aplicaremos la deformación mas adelante:

Para ello vamos a dividirlo en un par de triángulos iguales, considerando las cuatro vértices propias del cuadrángulo y que son 3 vértices por cada triangulo nos quedarían faltando 2 puntos para completar la figura:

Por fortuna podemos optimizar ese paso, y evitarnos el tener que crear otros dos objetos adicionales definiendo como puntos en común P2 y P3 así ahorrándonos los 2 vértices que nos faltaban:

Para poder graficar y manejar texturas con drawTriangles() es necesario emplear las coordenadas U para el eje horizontal cuyo valor sera igual al ancho total de la imagen (x, width), y V para el eje vertical cuyo valor sera el de la altura total de la imagen (y, heigth).

Como ejemplo usando la siguiente imagen, el triangulo 1 (T1) estará formado por la unión de P1 (0, 0), a P2 (1, 0) para terminar en P3 (0, 1).

Ejemplo utilizando como puntos de coordenadas U, y V

Así mismo podemos definir cualquier triangulo sin batallar por el tamaño de la imagen ya que este sera definido por el tamaño total, en la siguiente imagen podemos ver un triangulo cuyos puntos estarán unidos por P1 (.5, 0), P2 (1, .25) y P3 (0, 1).

Comprendiendo la Practica

Si estabas esperando a ver el código fuente del primer ejemplo, te diré que jamas has estado tan cerca pero aun te falta llegar mas abajo.

Primero crearemos un triangulo rellenado con la bitmapData de un elemento en la biblioteca, instanciado como "Image" y utilizaremos la nueva Clase Vector para ello, no entraré mucho en eso.

graphics.clear(); // Borramos cualquier dibujo creado por graphics
graphics.beginBitmapFill(new Image(0,0)); // Indicamos que se use "Image" como color de relleno graphics.drawTriangles( // Comenzamos con el método a explicar
Vector.([10,10, 100,100, 10,300, 100,200]), // Linea A
Vector.([0,1,2, 1,3,2]), // Linea B
Vector.([0,0, 1,0, 0,1, 1,1])); // Linea C

Primero que nada en la linea A fijaremos las coordenadas dentro del escenario de cada punto, estos puntos estarán determinados a través del sistema de coordenadas (U, V) en la linea C tal y como ya explique arriba y finalmente en la linea B indicamos como trazar los triángulos a partir de cada punto que conforman la figura, cosa que también ya fue mencionada. Así se formara una figura similar a la siguiente:

Ahora, comprendido todo lo anterior me parece apropiado mostrar la clase fuente del primer ejemplo con todas sus explicaciones comentadas entre lineas, con algunas referencias hacia los ejemplos anteriores:

package
{
 // Importamos todos los paquetes necesarios 
 import flash.geom.*;
 import flash.events.Event;
 import flash.events.TimerEvent;
 import flash.events.MouseEvent;
 import flash.display.Sprite;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.display.TriangleCulling;
 import flash.display.MovieClip;
 import flash.display.Graphics;
 // 
 public class Main extends MovieClip {
   // Este sera el tamaño de la imagen una vez cargada dentro del escenario 
   private var size:int = 260;
   // Aqui se guardara la bitmapData, como su nombre indica sera el contenedor... 
   // ...cargado al centro del escenario 
   private var container:Sprite;
   // La bitmapData sobre la cual trabajaremos 
   private var bitmapData:BitmapData;
   // Los dos vectores que representaran los catetos y vertices al dibujar los Triangulos 
   private var vertices:Vector.;
   private var catetos:Vector.;
   // Estos seran los Sprites encargados de modificar la BitmapData... 
   // ...al igual que en los ejemplos anteriores se trataran de P1,P2,P3 y P4 
   private var P1:Sprite;
   private var P2:Sprite;
   private var P3:Sprite;
   private var P4:Sprite;
   //   
   public function Main():void
   {
    // Lo primero a hacer sera cargar el objeto bitmap de nuestra biblioteca 
    bitmapData = new bitmap(0, 0);
    // Luego, creamos el contenedor de la BitmapData ya cargada... 
    container = new Sprite();
    // ...y lo colocamos centrado en el escenario 
    container.x = (stage.stageWidth - bitmapData.width) /2;
    container.y = (stage.stageHeight - bitmapData.height) /2;
    addChild(container);
    // Finalmente llamamos a estas dos funciones, que explicare mas adelante... 
    setPoints();
    drawTriangle();
   }
   // A las siguientes dos funciones llegaran todos los listeners de cada punto... 
   // ...por lo que cumplen una importante funcion al querer arrastrar y modificar la bitmap 
   private function EventHandler(event:Event)
   {
    // Diferenciamos los eventos recibidos 
    switch(event.type)
    {
      // Detectamos el evento MouseUp 
      case MouseEvent.MOUSE_UP:
       removeEventListener(MouseEvent.MOUSE_MOVE, EventHandler);
       stopDrag();
      // 
      default: drawTriangle();
    }
   }
   private function startPointDrag(event:MouseEvent):void
   {
    addEventListener(MouseEvent.MOUSE_MOVE, EventHandler);
    event.currentTarget.startDrag();
    drawTriangle();
   }
   // Esta es la funcion que dividira la imagen cargada desde la bilioteca... 
   // ...en dos triangulos, de esto ya hablamos mas arriba 
   private function drawTriangle():void
   {
    vertices = new Vector.();
    catetos = new Vector.();
    // Señalamos los puntos que forman el Triangulo 1 
    vertices.push(P1.x, P1.y);
    vertices.push(P2.x, P2.y);
    vertices.push(P3.x, P3.y);
    // ...y los del Triangulo 2 
    vertices.push(P2.x, P2.y);
    vertices.push(P4.x, P4.y);
    vertices.push(P3.x, P3.y);    
    // Una vez hecho eso, dividimos el cuadrangulo en dos triangulos 
    // Utilizando las coordenadas (U, V) tanto para el Triangulo 1 
    catetos.push(0, 0);
    catetos.push(1, 0);
    catetos.push(0, 1);
    // ...como para el Triangulo 2 
    catetos.push(1, 0);
    catetos.push(1, 1);
    catetos.push(0, 1);
    // 
    container.graphics.clear();
    container.graphics.beginBitmapFill(bitmapData);
    container.graphics.drawTriangles(vertices, null, catetos, TriangleCulling.NONE);
   }
   // Esta funcion esta encargada de acomodar los puntos P1~P4 y... 
   // ...agregarles sus respectivos listeners 
   private function setPoints():void {
    P1 = newPoint();
    P2 = newPoint();
    P3 = newPoint();
    P4 = newPoint();
    // Fijamos cada uno de los puntos en los margenes de la imagen cargada... 
    // ...logrando que cuando utilizemos las coordenadas (U, V) estas queden... 
    // ...acomodadas en los limites debidos 
    P4.x = P2.x = bitmapData.width;
    P4.y = P3.y = bitmapData.height;
    // Añadimos todos los listeners necesarios para cada punto 
    P1.addEventListener(MouseEvent.MOUSE_DOWN, startPointDrag);
    P2.addEventListener(MouseEvent.MOUSE_DOWN, startPointDrag);
    P3.addEventListener(MouseEvent.MOUSE_DOWN, startPointDrag);
    P4.addEventListener(MouseEvent.MOUSE_DOWN, startPointDrag);
    stage.addEventListener(MouseEvent.MOUSE_UP, EventHandler);
   }
   // Esta funcion, llamada por "setPoints" dibuja los puntos P1~P4 a arrastrar 
   private function newPoint():Sprite {
    var point:Sprite = new Sprite();
    point.graphics.beginFill(0x000000);
    point.graphics.drawRect(-5, -5, 10, 10);
    point.graphics.endFill();
    point.buttonMode = true;
    // 
    container.addChild(point);
    return point;
   }
 }
}

NOTA: Hay un pequeño detalle a tener en cuenta al utilizar este método sobre imágenes vectoriales, y es que al vaciar la imagen como relleno en un bitmap la rasteriza en el proceso, por lo que al dar un acercamiento muy grande los pixeles se harán evidentes.

Clase para usar cualquier imagen de fondo en ActionScript 3

2009-04-22T10:30:00.001-07:00

Esta clase la tenía escrita para usar una imagen tipo mosaico (tile) en mi biblioteca y fijarla como fondo, similar a lo que se puede hacer con background:url() en CSS. Así esta clase pegará la imagen vinculada y la usará como fondo cuando el stage la requiera.

Su uso es muy sencillo, ya que sólo debes identificar una imagen con el nombre de clase Pattern como se muestra en la siguiente imagen.

Bitmap Properties

Esta es la clase:

Código :

package
{
import flash.display.*;
import flash.events.*;
import flash.display.Sprite;
import flash.geom.Matrix;
//
dynamic public class AddPattern extends MovieClip
{
private var maxWidth:Number;
private var maxHeight:Number;
private var Bitmap:BitmapData;
private var RadialGradient:Sprite;
private var BackGround:Sprite;
//
public function AddPattern() : void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Bitmap = new Pattern(0, 0);
//
BackGround = new Sprite();
addChild(BackGround);
//
RadialGradient = new Sprite();
RadialGradient.graphics.beginGradientFill(GradientType.RADIAL,[0x000000,0x000000],[0,.5],[0,255],new Matrix().createGradientBox(stage.stageWidth,stage.stageHeight,0,0,0));
RadialGradient.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
addChild(RadialGradient);
//
maxWidth = stage.stageWidth - 1;
maxHeight = stage.stageHeight - 1;
//
stage.addEventListener(Event.RESIZE, fillStage);
stage.addEventListener(Event.ADDED, fillStage);
}
//
public function fillStage(event:Event) : void
{
if (stage != null)
{
if((stage.stageWidth > maxWidth) || (stage.stageHeight > maxHeight))
{
with (BackGround)
{
graphics.beginBitmapFill(Bitmap, null, true, true);
//
if(stage.stageWidth > maxWidth){maxWidth = stage.stageWidth;}
if(stage.stageHeight > maxHeight){maxHeight = stage.stageHeight;}
//
graphics.drawRect(0, 0, maxWidth, maxHeight);
graphics.endFill();
}
}
updateRadialFilter();
}
}
//
public function updateRadialFilter() : void
{
RadialGradient.width = stage.stageWidth;
RadialGradient.height = stage.stageHeight;
}
}
}

Y aquí hay un ejemplo de su uso, que como verás también es sensible a un cambio de tamaño en la ventana del navegador expandiéndose y manteniéndose a pantalla completa.

Finalmente recomendaría que se considere el tamaño de una imagen al vincularla ya que entre más pequeña (10x10pxs) sea ésta, mayor será el esfuerzo que hará el procesador para hacerla ajustar al tamaño completo de la pantalla.

Eventos Click y Doble CLick

2009-04-22T10:28:00.002-07:00

Siguiendo el tema abierto por tomydb, en el que explicaba cómo detectar un doble click sobre un botón en flash con actionscript 2, explicaré cómo hacerlo con actionscript 3 ya que ahora es más sencillo gracias a que la clase MouseEvent nos permite detectar directamente el evento dobleclick.

El uso de la clase MouseEvent es muy simple y ya ha sido explicada en otros tips. Únicamente hemos de crear un listener que detecte el evento y ejecutar una acción.

Código :

clip.doubleClickEnabled = true
clip.addEventListener(MouseEvent.DOUBLE_CLICK, onDobleClick);
function onDobleClick(event:MouseEvent)
{
   trace("doble click");
}

Hemos de fijarnos en la propiedad doubleClickEnabled que es la que nos indica si la acción de doble click está activa o no. Por defecto la propiedad está con valor false, con lo que debemos pasarla a true en caso contrario el dobleclick no se ejecutaría.

Ahora, para hacer el tip más interesante (y para que a Bleend el tip no le parezca demasiado corto...) explicaré cómo detectar si hemos hecho un click o un dobleclick sobre el mismo botón. Es decir, que si clicamos sobre el botón una vez ejecute una acción y si clicamos doble ejecute otra distinta.

Siguiendo lo explicado en este otro tip empezaremos el código creando la clase para nuestro botón. Crearemos la clase Boton.as

A este botón le añadiremos los eventos de click y double_click.

Código :

package
{
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   //-----------------------------------------
   public class Boton extends MovieClip
   {
      //-----------------------------------------
      public function Boton()
      {
         doubleClickEnabled = true;
         addEventListener(MouseEvent.CLICK, onClick);
         addEventListener(MouseEvent.DOUBLE_CLICK, onDobleClick);
      }
      //-----------------------------------------
      private function onClick(event:MouseEvent):void
      {
         trace("click");
      }
      private function onDobleClick(event:MouseEvent):void
      {
         trace("doble click");
      }
      //-----------------------------------------
   }
}

Si publicasemos ahora este botón veríamos el siguiente problema... al ejecutar el dobleclick tambien se ejecutaría el click normal, ya que los dos listeners son detectados. En el panel salida nos marcaría esto:

panel salida :

click
doble click

Esto no es lo que nos interesa, solo queremos que se ejecute una de las dos. Para solucionar el problema ampliaremos la clase siguiendo este proceso:

Crearemos una variable boleana donde indicaremos si hemos realizado un click o un dobleclick

Código :

private var isDobleClick:Boolean;

El valor de la variable lo cambiaremos a través de las funciones de los eventos:

Código :

private function onClick(event:MouseEvent):void
{
   isDobleClick = false;
}
private function onDobleClick(event:MouseEvent):void
{
   isDobleClick = true;
}

Escribiremos una tercera función que ejecute las acciones según el valor de la variable.

Código :

private function controlaClick(event:TimerEvent):void
{
   if (isDobleClick == false) {
      trace("click");
   } else {
      trace("doble click");
   }
}

Esta función controlaClick() la ejecutaremos desde la función onClick(), pero hemos de darle un margen de tiempo para detectar si hemos realizado un dobleclick, así que la ejecutaremos desde un intervalo. La función quedaría así:

Código :

private function onClick(event:MouseEvent):void
{
   isDobleClick = false;
   espera = new Timer(200, 1);
   espera.addEventListener(TimerEvent.TIMER, controlaClick);
   espera.start();
}

Cómo añadido podemos hacer que si damos un solo click sobre el botón pulsando la tecla "Ctrl" se ejecuten las acciones de un dobleclick, para eso utilizaremos la propiedad ctrlKey del evento MouseEvent. Esta propiedad devuelve true o false según esté pulsada la tecla en el momento del click. (Esta propiedad también está para "shift" y "Alt")

Código :

if (event.ctrlKey) {
   isDobleClick = true;
}

La clase completa sería esta:

Código :

package
{
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   import flash.utils.Timer;
   import flash.events.TimerEvent;
   //-----------------------------------------
   public class Boton extends MovieClip
   {
      private var isDobleClick:Boolean;
      private var espera:Timer;
      //-----------------------------------------
      public function Boton()
      {
         doubleClickEnabled = true;
         addEventListener(MouseEvent.CLICK, onClick);
         addEventListener(MouseEvent.DOUBLE_CLICK, onDobleClick);
      }
      //-----------------------------------------
      private function onClick(event:MouseEvent):void
      {
         isDobleClick = false;
         espera = new Timer(200, 1);
         espera.addEventListener(TimerEvent.TIMER, controlaClick);
         espera.start();
         if (event.ctrlKey) {
            isDobleClick = true;
         }
      }
      private function onDobleClick(event:MouseEvent):void
      {
         isDobleClick = true;
      }
      private function controlaClick(event:TimerEvent):void
      {
         if (isDobleClick == false) {
            trace("click");
         } else {
            trace("doble click");
         }
      }
      //-----------------------------------------
   }
}

Crear ambiente 3D en Flash

2009-04-22T10:28:00.001-07:00

El siguiente tip está referido a simular un espacio 3D (x,y,z) teniendo sólo 2 coordenadas X e Y (x,y). El cual es parte de un tema más amplio llamado Isometría , que se usa mucho en Juegos.
Comencemos:

1.- Crear el ambiente 3D

Flash maneja el siguiente sistema de coordenadas en 2d (Acuérdense que Y está en sentido contrario)

La idea es manejarlas en 3d (no es tan fácil dibujar esto en Fireworks )

Ahora juntemos estos sistemas

* Aquí hay un pequeño truco, estoy utilizando 2 coordenadas que ya existen(x y), solo las he cambiado de ubicación(z y) .
Es la forma más sencilla, creanme... . Si se fijan bien, el nuevo eje X (3D) es una línea oblicua al nuestro eje normal (2D) formando cierto ángulo.

Luego, si proyectamos el 3D en 2D tenemos lo siguiente

Observemos tanto en el cuadro amarillo como en el triángulo verde , el eje XY y X'Y'Z' :
B: Es el ángulo formado entre X y X'
Punto en 2D: (x,y)
Punto en 3D: (x',y',z')
En el cuadro amarillo, 2 líneas verdes que tiene la misma longitud(eso es demostrable por geometría)
También observemos la longitudes de X' y Y'.

Si nos concentramos en el triángulo verde :

Podemos proyectar X' en XY sabiendo el ángulo de inclinación B (trigonometría), con cual si usamos esto en la longitudes de X' y Y' obtenemos:

Código :

//En Y'
x+x'cos(180-B) = y'
//En X'
x'sen(180-B)+z' = y

// Si ordenamos XY para un lado y X'Y'Z' en el otro

x = y' - x'cos(180-B)
y = z' + x'sen(180-B)

Por tanto, podemos dar la coordenadas (x',y',z') y dibujarlas en (x,y)
En AS3
* Asumamos un ángulo de inclinación de 120 grados, con lo cual tendríamos 60 grados (180-B).Tengan presente que el ángulo debe estar en radianes (60 grados es equivalente a PI/3 radianes)

Código :

public static function coordenadas3d(_x:Number = 0, _y:Number = 0, _z:Number = 0):Point
{
var p:Point = new Point(0,0);
p.x = _y - _x*Math.cos((1/3)*Math.PI);
p.y = _z + _x*Math.sin((1/3)*Math.PI);

return p;
}

Nuestro código en Action

Código :

package view
{
import flash.display.MovieClip;
import flash.geom.Point;

/**
* ...
* @author ASD Eduardo Medina A.
*/
public class Lab01 extends MovieClip
{

public function Lab01()
{
init();
}

private function init():void
{
this.graphics.lineStyle(1, 0x00ff00);
this.graphics.moveTo(200,150); //Centrarlo en el eje
this.graphics.beginFill(0x00ff00, 1);

this.graphics.lineTo(200 + coordenadas3d(0, 100, 0).x,
150+coordenadas3d(0,100,0).y);
this.graphics.lineTo(200 + coordenadas3d(100, 100, 0).x,
150+coordenadas3d(100,100,0).y);
this.graphics.lineTo(200 + coordenadas3d(100, 0, 0).x,
150+coordenadas3d(100,0,0).y);
this.graphics.lineTo(200 + coordenadas3d(0, 0, 0).x,
150 + coordenadas3d(0, 0, 0).y);
this.graphics.endFill();
}
public function coordenadas3d(_x:Number,_y:Number,_z:Number):Point
{
var p:Point = new Point();
p.x = _y - _x*Math.cos((1/3)*Math.PI);
p.y = _z + _x*Math.sin((1/3)*Math.PI);
return p;
}

}

}

2.- Paramétricas en 3d , se acuerdan... enlace
Cono :

Código :

private function mframe(e:Event):void
{
if (t < 150)
{
var _x:Number = t*Math.cos(t);
var _y:Number = t*Math.sin(t);
var _z:Number = t;
cont1.graphics.lineTo(200+coordenadas3d(_x, _y, _z).x, 150+coordenadas3d(_x, _y, _z).y);
cont2.graphics.lineTo(200+coordenadas3d(_x,_y,_z).x, 150+coordenadas3d(_x, _y, -_z).y);

t += 10*Math.PI/180;
}else
{
this.removeEventListener(Event.ENTER_FRAME, mframe);
}
}

Esfera :

Código :

private function mframe(e:Event):void
{
if (t < 150)
{
var _x:Number = 100*Math.cos(u)*Math.cos(t);
var _y:Number = 100*Math.sin(u)*Math.cos(t);
var _z:Number = 100 * Math.sin(t);

cont1.graphics.lineTo(200+coordenadas3d(_x, _y, _z).x, 150+coordenadas3d(_x, _y, _z).y);

t += 16*Math.PI/180;
u += Math.PI/180;
}else
{
this.removeEventListener(Event.ENTER_FRAME, mframe);
}
}

* Ojo aquí hay 2 variables.
Y así como les dije en el tip anterior, las ecuaciones están ahí!!! pero ahora en 3D
Espero que les haya gustado

Reproductor de audio MP3 con AS3

2009-04-22T10:24:00.000-07:00

Este es un pequeño ejemplo de cómo reproducir archivos de sonido en Flash o Flex con actionscript 3.

Esta es la clase que crearemos:

Código :

package {
   import flash.display.Sprite;
   import flash.net.URLRequest;
   import flash.media.Sound;
   import flash.media.SoundLoaderContext;
   //--------------------------
   public class Sonido extends Sprite {     
      private var so:Sound;
      private var url:URLRequest;
      private var buffer:SoundLoaderContext;
      private var ini:Number;
      private var loop:Number;
      //----------------------
      public function Sonido(qUrl:String, qBuffer:Number, qIni:Number, qLoop:Number) {
         url = new URLRequest(qUrl);
         buffer = new SoundLoaderContext(qBuffer*1000);
         ini = qIni*1000;
         loop = (qLoop >= 0) ? qLoop : int.MAX_VALUE;
         so = new Sound(url, buffer);
         so.play(ini, loop);
      }
   }
}

Debe ir en un archivo llamado "Sonido.as", situado junto a nuestro archivo .FLA

Para utilizarla colocaríamos en nuestra película flash:

Código :

import Sonido;
var so:Sonido = new Sonido("audio.mp3", 3, 0, -1);

Explicación del código:

La clase contiene 5 variables privadas, 4 de las cuales debemos introducir como parámetro a la hora de generar la instancia. Estas variables son:

url: ruta del archivo mp3
buffer: tiempo del archivo de audio que estará cargado en memoria antes de reproducirse.
ini: posición en la que se comenzará a reproducir el audio
loop: cantidad de veces que se repetirá el audio.

No hay manera de asignar un loop que se repita continuamente, pero un truco para hacer esto sería colocar un número de repeticiones muy elevado, por eso este código:

loop = (qLoop >= 0) ? qLoop : int.MAX_VALUE;

Controla que el valor que le introducimos sea mayor que cero. En caso de introducirle un valor negativo asignará el número de repeticiones al máximo posible en flash (int.MAX_VALUE) osea 2147483647.

Crear un juego de Pin Pong en Flash

2009-04-22T10:20:00.000-07:00

En este tutorial aprenderás a crear una Clase en Actionscript 3 que generará un juego de Pong totalmente adaptable.

Abre un nuevo documento de Actionscript y guardalo como Pong.as.

Ahora comenzaremos a programar la Clase.

Primero importamos los paquetes necesarios:

package
{
 import flash.display.*;
 import flash.ui.Mouse;
 import flash.events.TimerEvent;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.text.TextFieldType;
 import flash.text.TextFormat;
 import flash.text.TextFieldAutoSize;
 import flash.utils.Timer;

Para una descripción más detallada de lo que hace cada uno, puedes consultar la ayuda de Flash presionando F1.

Ahora nombramos la Clase, que será heredada de la Clase MovieClip para poder utilizar el método addChild().

public class Pong extends MovieClip

{

Procedemos a escribir la función constructora de la clase, que será la encargada de todo el proceso del juego.

public function Pong(bgColor:uint = 0x000000, playerColor:uint = 0xFFFFFF, enemyColor:uint = 0xFFFFFF, ballColor:uint = 0xFFFFFF, middleLineColor:uint = 0xFFFFFF, ballSpeed:int = 2, scoreColor:uint = 0xFFFFFF, msgColor:uint = 0xFFFFFF, msg:String = "Click here", scoreFont:String = "Arial", scoreSize:int = 30):void

{

Como puedes observar se han colocado varios parametros, que a su vez, han sido declarados como predeterminados, a continuación explicaré cada uno de ellos.

Todos los valores uint, son números Hexadecimales en formato 0x. Puedes utilizar cualquier color Hexadecimal.

bgColor: Color del MovieClip que servirá como fondo del stage.
playerColor: Color del jugador.
enemyColor: Color del oponente.
ballColor: Color de la bola.
middleLineColor: Color de la linea que divide el stage.
ballSpeed: Velocidad de la bola.
scoreColor: El color de los marcadores.
msgColor: Color del texto usado como mensaje para comenzar.
msg: Mensaje para comenzar.
scoreFont: La fuente que será utilizada en el marcador.
scoreSize: Tamaño de la fuente de los marcadores.

Ocultamos el Context Menu y establecemos Constantes del tamaño del stage.

stage.showDefaultContextMenu = false;
 
const STAGE_WIDTH:int = stage.stageWidth;
const STAGE_HEIGHT:int = stage.stageHeight;

Ahora creamos el Fondo.

var bg:MovieClip = new MovieClip();
 
bg.graphics.beginFill(bgColor);
bg.graphics.drawRect(0, 0, STAGE_WIDTH, STAGE_HEIGHT);
bg.graphics.endFill();
 
addChild(bg);

Creamos el Jugador y al Oponente y los posicionamos.

var player:MovieClip = new MovieClip();
 
player.graphics.beginFill(playerColor);
player.graphics.drawRect(0, 0, 8, 50);
player.graphics.endFill();
 
player.x = player.width;
player.y = (STAGE_HEIGHT / 2) - (player.height / 2);
 
addChild(player);

var enemy:MovieClip = new MovieClip();
 
enemy.graphics.beginFill(enemyColor);
enemy.graphics.drawRect(0, 0, 8, 50);
enemy.graphics.endFill();
 
enemy.x = STAGE_WIDTH - enemy.width * 2;
enemy.y = (STAGE_HEIGHT / 2) - (enemy.height / 2);
 
addChild(enemy);

El siguiente código crea la bola y la posiciona.

var ball:MovieClip = new MovieClip();
 
ball.graphics.beginFill(ballColor);
ball.graphics.drawRect(0, 0, 10, 10);
ball.graphics.endFill();
 
ball.x = STAGE_WIDTH / 2 - ball.width / 2;
ball.y = STAGE_HEIGHT / 2 - ball.height / 2;
 
addChild(ball);

Ahora creamos la linea que divide el stage.

var middleLine:MovieClip = new MovieClip();
 
middleLine.graphics.lineStyle(2, middleLineColor);
middleLine.graphics.lineTo(0, STAGE_HEIGHT);
 
middleLine.x = STAGE_WIDTH / 2;
middleLine.y = 0;
 
addChild(middleLine);

Creamos una función que será ejecutada por un Evento Timer, ésta se encargará de que el Jugador sea manejado con el Mouse, además de establecer hasta donde se puede mover.

function playerMovement(event:TimerEvent):void
{
   player.y = mouseY - player.height / 2;
  
     if(player.y >= STAGE_HEIGHT - player.height)
   {
       player.y = STAGE_HEIGHT - player.height;
   }
  
     if(player.y <= 0)     {         player.y = 0;
   }
}

La función siguiente se encarga de manejar al Oponente, también establece hasta donde se puede mover.

function enemyAI(event:TimerEvent):void
{
   enemy.y = ball.y - enemy.height / 2;
  
   if(enemy.y >= STAGE_HEIGHT - enemy.height)
   {
       enemy.y = STAGE_HEIGHT - enemy.height;
   }
  
   if(enemy.y <= 0)     {         enemy.y = 0;
   }
}

Ahora creamos el código que manejará la Bola que será explicado con comentarios para una mejor comprensión.

ball.speed = ballSpeed; //Se establece la velocidad, tomada del Parámetro ballSpeed.
ball.dir = 0; //Se crea una variable que manejara la dirección de la Bola.
player.score = 0; //Estos son los marcadores al iniciar.
enemy.score = 0;
 
function ballMovement(event:TimerEvent):void
{
   if(playin) //Se checa si el juego ha comenzado, esta variable será creada más adelante.
   {
       ball.x -= ball.speed; //Estos códigos mueven la Bola.
       ball.y -= ball.dir;
   }
  
   if(ball.x <= player.x) //Si la Bola pasa por detras del Jugador                           
   {                      //o del Oponente, re reinicia la Bola.
       enemy.score++;
       restart();
   }
  
   if(ball.x >= enemy.x)
   {
       player.score++;
       restart();
   }
  
   if(ball.y > (STAGE_HEIGHT - ball.height / 2)) //Estos códigos se encargan de hacer rebotar la Bola.
   {
       ball.dir *= -1;
   }
  
   if(ball.y < class="kw3">height / 2)
   {
       ball.dir *= -1;
   }
}

Ahora checamos las colisiones, si la Bola colisiona con el Jugador o el Oponente, la velocidad será invertida para dirigirse hacia el lado contrario, y la dirección se generará aleatoriamente, si el número generado es positivo la dirección será hacia abajo y si es negativo hacia arriba.

function checkHit(event:TimerEvent):void
{
   if(ball.hitTestObject(player) || ball.hitTestObject(enemy))
   {
       ball.speed *= -1;
       ball.dir = (Math.random() * 1) + (Math.random() * -1);
   }
}

El siguiente código crea los Marcadores y los posiciona, además de crear la función que se encargará de actualizarlos.

var scoreFormat:TextFormat = new TextFormat();
 
scoreFormat.color = scoreColor;
scoreFormat.font = scoreFont;
scoreFormat.size = scoreSize;
 
var playerScore:TextField = new TextField();
 
playerScore.autoSize = TextFieldAutoSize.CENTER;
playerScore.x = STAGE_WIDTH / 4;
playerScore.y = STAGE_HEIGHT / 10;
playerScore.selectable = false;
playerScore.defaultTextFormat = scoreFormat;
playerScore.type = TextFieldType.DYNAMIC;
 
addChild(playerScore);
 
var enemyScore:TextField = new TextField();
 
enemyScore.autoSize = TextFieldAutoSize.CENTER;
enemyScore.x = (STAGE_WIDTH) - (STAGE_WIDTH / 4)
enemyScore.y = STAGE_HEIGHT / 10;
enemyScore.selectable = false;
enemyScore.defaultTextFormat = scoreFormat;
enemyScore.type = TextFieldType.DYNAMIC;
 
addChild(enemyScore);
 
function scoreHandler(event:TimerEvent)
{
   playerScore.text = player.score;
   enemyScore.text = enemy.score;
}

Creamos el mensaje para comenzar, la variable que nos indicará si el juego ha comenzado y la función que se encargará de ocultar el Mouse, iniciar el Timer y borrar el mensaje de inicio.

var startMsg:TextField = new TextField();
 
var startFormat:TextFormat = new TextFormat();
 
startFormat.color = msgColor;
startFormat.bold = true;
 
startMsg.x = 0;
startMsg.y = (STAGE_HEIGHT) - (STAGE_HEIGHT / 12);
startMsg.selectable = false;
startMsg.type = TextFieldType.DYNAMIC;
startMsg.defaultTextFormat = startFormat;
startMsg.text = msg;
 
addChild(startMsg);
 
var playin:Boolean = false;
 
function startHandler(event:MouseEvent):void
{
     Mouse.hide();
   playin = true;
   timer.start();
   startMsg.text = "";
}

Ahora creamos la función de reinicio que se encargará de reestablecer valores cuando el Marcador se actualize.

function restart():void
{
   ball.x = STAGE_WIDTH / 2 - ball.width / 2;
   ball.y = STAGE_HEIGHT / 2 - ball.height / 2;
  
   ball.speed = ballSpeed;
   ball.dir = 0;
}

Por último, creamos el objeto Timer y añadimos los Listeners.

stage.addEventListener(MouseEvent.CLICK, startHandler);
 
var timer:Timer = new Timer(1, 0);
 
timer.addEventListener(TimerEvent.TIMER, playerMovement);
timer.addEventListener(TimerEvent.TIMER, enemyAI);
timer.addEventListener(TimerEvent.TIMER, ballMovement);
timer.addEventListener(TimerEvent.TIMER, checkHit);
timer.addEventListener(TimerEvent.TIMER, scoreHandler);

La Clase debe ser llamada por medio del cuadro de texto Document Class en el Panel de Propiedades de Flash, ya que el objeto stage no permite el uso de import en una Clase de este tipo.
Para modificar los Parámetros lo puedes hacer directamente desde la Clase.

Recuerda que el stage puede ser de cualquier tamaño, la Clase ajustará automáticamente los elementos.

Tomemos un Break !! : Videos motivadores y el secreto

2009-01-29T17:03:00.000-08:00

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 ...

http://www.youtube.com/watch?v=4hdpkk-6IUw

Atte
Walter Terán Chiriboga

Como colgar un SWF de tu PC a tu Blog

2009-01-27T15:12:00.000-08:00

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 :

<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 !

Animacion con AS3 : El efecto nieve en Flash

2009-01-23T02:12:00.001-08:00

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 :

// 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.

Una pelota rebotando en la habitacion : Introduccion a ActionScript 3

2009-01-16T21:26:00.000-08:00

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 pelota siempre 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 cualquier 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 ancho 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 ActionScript :

// 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 nuestro 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 , ay : 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 procesar 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 teclado 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 asociada 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 !! =)

Bienvenidos al Blog de Programacion de juegos en Flash

2009-01-16T01:10:00.000-08:00

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.