SickboyJV
Conociendo Foroz
Registrado: 02 Abr 2008
Mensajes: 42
|
 Publicado: Sab Abr 05, 2008 1:32 am Título del mensaje: [Tutorial] Movimiento Rectilíneo Uniforme (primera parte) |
 |
|
Este es un tutorial que alguna vez expuso mi amigo sargento, y por mucho creo que es uno de los primeros pasos antes de empezar a crear contenido interactivo con flash y es por esto que hago la adaptación del su tutorial hecho en AS1 hace ya mucho tiempo y lo expongo con ustedes pero en AS3.
Antes de empezar voy a hacer una aclaración, en este tutorial vamos a usar 100% el panel de acciones, voy a intentar explicar en su totalidad todo lo que hago y esto puede resultar un poco extenso, siéntanse libres de preguntar las partes que pudieran resultar confusas, pero antes de preguntar agradecería que leyeran el tutorial completo.
------------------------------------------------------------------------
Para empezar nos situamos sobre nuestro primer frame en nuestra primera capa, nos vamos hacia nuestro panel de acciones (F9) vamos a crear un objeto del tipo Sprite, este objeto es muy similar a un MovieClip, con diferencias básicas pero importantes, entre ellas la falta de una linea de tiempo, esta clase solo esta disponible en Flash CS3.
Let's Script!
| Código: |
var circulo:Sprite = new Sprite();
|
En nuestra primera linea creamos nuestro objeto Srpite, esta linea se compone de 2 partes:
1)La declaración de la variable indicando su nombre:tipo (en AS3 no es opcional el declarar el tipo de nuestra variable, es obligatorio).
2)Asiganmos un valor a nuestra variable, en este caso nuestra palabra clave "new" que indica que vamos a crear algo y a continuación el constructor para crear el objeto deseado"Sprite(), que como habíamos indicado en nuestra variable es un Sprite.
*Nota, siempre es una buena idea al final de cada una de nuestras declaraciones usar " ; ". No es necesario, pero si es muy recomendable.
Ya creamos nuestro Sprite pero aun no hay nada en el, vamos a arreglar eso.
| Código: |
circulo.graphics.beginFill(0x00FF00);
|
Lo que declaramos en esta linea es que accesamos al método graphics de nuestro sprite a su vez accesamos a uno de los métodos de graphics que se llama beginFill, el cual nos pide un valor numerico especifico para un color, "0x" estamos expresando que nuestro color es exadecimal seguido por el color, en este caso verde (00FF00).
| Código: |
circulo.graphics.drawCirlce(10,200,10);
|
En esta linea propiamente hacemos lo mismo excepto que esta vez es al método drawCircle que expresamente dibuja el circulo, nos pide 3 valores, posición en X, posición en Y y el radio del circulo.
Bien ya creamos nuestro circulo, bastante fácil no?, solo falta hacer una cosa, agregarlo al escenario
| Código: |
addChild(circulo);
|
Esta fue la parte donde creamos nuestro circulo, hubiera sido relativamente igual de fácil hacerlo desde la interface gráfica, pero quería que vieran un poco sobre la sintaxis por punto que es el modo en el que accesamos a las propiedades métodos y eventos de nuestros objetos.
Aquí viene la parte interesante, hacer que el circulo se mueva, vamos a necesitar 2 cosas:
1) Una función, que en si es un bloque de código que se ejecuta cuando se le llama, ya sea por un evento o la llamada especifica a la función.
La forma de declarar nuestra función es la siguiente:
function numbre("aquí pueden ir algunos argumentos"):"El tipo" {
//Nuestro código que se va a ejecutar
}
2) Como vamos a querer que nuestra función se ejecute constantemente vamos a requerir crear un listener que por medio de un evento vamos a ejecutar la función.
| Código: |
//creamos nuestra función
fucntion moverCirculo(evt:Event):void{
circulo.x = circulo.x + 10;
}
|
Vamos a explicar estas lineas, creamos nuestra función y de damos el nombre moverCirculo, en los argumentos lo que estamos haciendo es indicando el tipo de argumento que va a recibir, en este caso es un evento y declaramos nuestra función como void, por que no nos va a regresar ningún valor, dentro de nuestra función accesamos a la propiedad x que es la posición en x de nuestro objeto circulo y lo que decimos es que aumente en 10 su posición.
| Código: |
//creamos el listener que va a ejecutar nuestra función
circulo.addEventListener(Event.ENTER_FRAME,moverCirculo);
|
En esta linea se llama al método addEventListener() del objeto de origen, básicamente “suscribiendo” la función al evento especificado de modo que se lleven a cabo las acciones de la función cuando ocurra el evento.
En este caso el Evento es del tipo ENTER_FRAME, que basicamente mientras el circulo este ahí se va a ejecutar (después ahondo más en este Evento).
| Código: |
var circulo:Sprite = new Sprite();
circulo.graphics.beginFill(0x00FF00);
circulo.graphics.drawCircle(10,200,10);
addChild(circulo);
function moverCirculo(evt:Event):void{
circulo.x = circulo.x + 10;
}
circulo.addEventListener(Event.ENTER_FRAME,moverCirculo);
|
Si probamos nuestra pelicula (CTRL + ENTER) veran que el circulo se desplaza a la parte izquierda del escenario.
Aprendimos varias cosas de esta primera parte del tutorial como accesar a las propiedades métodos y eventos de un objeto en este caso un Sprite, , aprendimos a declarar funciones y crear listeners, en la segunda vamos a explicar un poco sobre condicionantes y más cosas.
Espero que sea de su agrado.
Su amigo:
Ernesto Jiménez Villaseñor :.
No olviden visitar mi blog donde pongo noticias sobre flash y algunos otros productos de adobe
http://ejimenez.starlithost.info/ |
|
