Este post fue creado por Daniel Muela en el blog http://muelalab.com/blog.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://muelalab.com/blog/actionscript/tutorial-galeria-finita-actionscript-3

Post agregado:

Ahora vamos a hacer uno Tutorial de Actionscript3, para realizar una galeria de imagenes Finitas, de cierta forma es un tutorial super basicoooooo, pero sirvie bien para los que estan migrandose o comenzando con AS3, ademas la idea de este tutorial es crear una galaeria simple, pero luego veremos como aplicar un efecto 3D a la misma que le dara un toque mucho mas vistozo! … Por ultimo cabe decir que para realizar este ejemplo necesitas tener como minimo la version de Flash CS3.
Este sera el resultado final:

Creamos un nuevo documento de Flash y Actionscript 3, lo ponemosa 24Frames/seg y con un ancho de 480 y un alto de 200, ahora nos descargamos estas imagenes de prueba que usaremos para nuestro ejemplo, una ves descargas (y descomprimidas) simplemente las arrastramos de la carpeta al escenario de flash… Y ahora procederemos a ordenarlas tomamos de una por una y las colocamos cada una a 10px de separacion entre ellas… (Pueden colocar una en X=0 Y=0, la siguiente en X=110 y Y=0 y luego X=220 y asi sucesivamente) una ves ordenadas las seleccionamos todas y las convertimos en MovieClip precionando F8, selecionamos el punto de control en el centro y ponemos como nombre img_mc….

Imagenes Seleccionadas Y MovieClip

Una ves echo esto, seleccionamos el MC en el escenario y en el panel de propiedades le ponemsocomo nombre de instancia “img_mc”, por ultimo colocamos el MC centrado (x=240 y=100)… Listo tenemos el MC preparado empecemos con el codigo, que solo son unas cuantas lineas, seleccionamos el primer frame de la pelicula y en el panel de acciones (F9) ponemos el siguiente codigo:

var minX:Number=35;
var maxX:Number=445;
var mitadEscenario:Number=240;
img_mc.addEventListener(Event.ENTER_FRAME,mover);

Explicacion: Es muy simple, creamos 3 Variables que contienen datos sencillos, la coordenada menor (minX) que el mc img_mc puede tener, la coordenada mayor (estas dos las sacamos simplemente haciendo que el mc quede 10px separado del inio y 10 del final del escenario) y la mitad del escenario…
Luego al MC img_mc le colocamos un listener que ejecutara la funcion “mover” cada ves que se haga el evento ENTER_FRAME…

Ahora nos falta crear esa funcion “mover” que como su nombre lo dice se encargara de mover el MC img_mc.. asi que agregamos estas lineas debajo de las anteriores:

function mover(e:Event){
	var movX:Number= ((stage.mouseX-mitadEscenario)/mitadEscenario)*15;
	img_mc.x+=movX;
	if(img_mc.x<minX){
		img_mc.x=minX;
	}else if(img_mc.x>maxX){
		img_mc.x=maxX;
	}
}

Explicacion: Primero obtenemos un valor que seran los pixeles que se movera el MC, para esto usamos una simple formula (stage.mousex: nos da la pocicion del Mouse en la coordenada X del escenario) y la mejor manera de explicarla seria con un ejemplo: Si tenemos el mouse en la coordenada 20, (stage.mouseX-mitadEscenario) nos dara como resultado -220 (esta parte siempre nos dara un numero entre -240 y 240, dependiendo la pociocion del Mouse), ahora si ese -220 lo dividimo entre la mitad del escenario -220/240 nos dara como resultado -.91 (igualmente al hacer esta division siempre obtendremos un numero entre -1 y 1, dependiendo de la pocicion del mouse!!!! =O…) por ultimo este numero lo multiplicamos por 15 (podria ser caulquier valor) y de esta forma obtenemos un movimiento de pixeles de -13.75 (simepre obtendremos un numero entre -15 y 15)… como ven de esta forma dependiendo la pociccion del mouse, la galeria se movera mas o menos rapido y en la direccion correcta!!!.. =)
Ya teniendo este valor!! se lo sumamos al valor actual de “img_mc” y asi se movera…
Por ultimo tenemos 2 condiciones que simplemente verifican si la pocicion de “img_mc” se sale de alguno de los limites que establecimos antes (minX o maxX) y si es asi entonces lo pociciona directamente en el limite…

Y listo!! tenemos nuestra galeria funcionando facilmente!! pocas lineas de codigo y da un muy buen efecto! esto en ActionScript3 =)…

Espero les haya gustado el tutorial y ya saben que cualquier duda comentario o sugerencia escribanos y estare atento =)!!!..
La proxima ves veremos como hacerla con un efecto 3D … Gracias y suerte!!

Autor del post: Daniel Muela
Enlace original: http://muelalab.com/blog/actionscript/tutorial-galeria-finita-actionscript-3

Este post fue creado por Daniel Muela en el blog http://muelalab.com/blog.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://muelalab.com/blog/actionscript/hittest-y-enterframe-en-actionscript3

Post agregado:

Buenas buenas, bueno seguimos con los tutoriales!, ahora veremos como crear un hitTest y un EnterFrame con Actionscript3, lo veremos ambos en un ejemplo y por ahora dejaremos de lado las clases lo haremos lo mas simple posible…
Usaremos el ejemplo de Drag And Drop con AS3 para poder mover el clip1 sobre el clip2, y usaremos el enterFrame para que verifique continuamente cuando estos clips se estan tocando…
El Ejemplo se vera asi:

Empecemos, Primero crearemos dos nuevos MovieClips, sencillo dibujamos dos cuadros seleccionamos uno y lo convertimos en MC precionando F8, les damos cualquier nombre y luego hacemos lo mismo con el otro, una ves hecho esto, les damos un nombre de instancia en el panel de propiedades (Ctrl+F3) a uno le ponemos “miClip” y al otro “miClip2“… listo tenemos dos clips!!
Ahora creamos un campo de texto de tipo Dinamico, y le ponemos como nombre de instancia “texto”, este servira pra mostrarnos que esta pasando… =)..
Ahora seleccionaremos el primer frame de la pelicula (preferiblemente el de la capa superior) y en el panel de acciones (F9) escribimos el siguiente codigo:

function arrastrar(e:Event):void{
	miClip.startDrag();
}
function soltar(e:Event):void{
	miClip.stopDrag();
}
miClip.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
miClip.addEventListener(MouseEvent.MOUSE_UP,soltar);

Explicacion: Este codigo hace posible que el MC “miClip” se peuda arrastrar (drag&Drop), la explicacion ya esta en el tutorial de Drag y Drop…

Ahora si probamos la pelicula el MC “miClip” se podria arrastrar, pero ahora encesitamos verificar cuando este sobre el MC “miClip2″, para eso usaremos el enterFrame y hitTest.. asi que debajo del codigo anterior escribimos el siguiente codigo:

miClip.addEventListener(Event.ENTER_FRAME,checa_choque);
function checa_choque(e:Event){
	if(miClip.hitTestObject(miClip2)){
    texto.text="Ah!! Chocaron!!!";
	}else{
	texto.text="No Se Tocan =)!";
	}
}

Explicacion: Como ven añadimos un listener a “miClip” que se encargara de ejecutar la funcion “checa_choque” mientras este el evento “Enter_Frame” (que este es mientras que el clip este en escena), luego la funcion “checa_choque” verifica si el clip “miClip” esta chocando con el objeto “miClip2″ (linea 3), si es asi modifica el texto “texto” para avisarnos que esta chocando, en caso contrario… pues no indica lo contrario XD!!..

Como ven sigue siendo simple, sin embargo es un poco mas de codigo que en ActionScript 2, talves por ahora no vean muchas ventajas en AS3.. pero mientras avancemos en el nivel de programacion veremos las ventajas de ActionScript3… Espero les sea de ayuda y cualquier duda aqui estoy con gusto… dejen sus comentarios!..

Gracias y suerte!!

Autor del post: Daniel Muela
Enlace original: http://muelalab.com/blog/actionscript/hittest-y-enterframe-en-actionscript3

Este post fue creado por Daniel Muela en el blog http://muelalab.com/blog.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://muelalab.com/blog/actionscript/drag-y-drop-en-actionscript3-y-flash

Post agregado:

Vamos a ver ahora como hacer un drag and drop de un movieclip con actionscript, anteriormente lo habiamos visto con AS2, pero esta ves lo haremos con ActionScript 3, es algo sencillo en realidad, pero nos servira mucho hasta para practicar… El ejemplo se vera asi:

Creamos un nuevo documento de Flash actionscript3 (Archivo->Nuevo->Archivo De Flash (Actionscript3)), Creamos un nuevo Movieclip y en el panel de propiedades le ponemos como nombre de instancia “miClip”. Seleccionamos el primer frame de nuestra pelicula y en el panel de acciones escribimos el siguiente codigo:

function arrastrar(e:Event):void{
 miClip.startDrag();
}
function soltar(e:Event):void{
 miClip.stopDrag();
}
miClip.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
miClip.addEventListener(MouseEvent.MOUSE_UP,soltar);

Explicacion: Añadimos 2 Listenners a “miClip” estos se encargaran de ejcutar la funcion “arrastrar” y “soltar” al precionar sobre el MC o soltar el MC respectivamente, luego con la propiedad startDrag y stopDrag hacemos que se arraste el clip miClip.

Como ven es sencillismo, si prueban ahora podran arrastar el MC, pero este codigo solo nos permitiria arrastar el MovieClip “miClip”, el siguiente tutorial de AS3 viene de Claes y Paquetes que es la parte “dura e importante” de AS3, explicare que son y como funcionan y veremos como se utilizan para reutilizar codigo (por ejemplo este mismo codigo epr oaplicado a muchos MC facilmente)..

Sigan visitandonos y opinando! q su opinion es la q cuenta!! encerio que si! xd

gracias y suerte!

Autor del post: Daniel Muela
Enlace original: http://muelalab.com/blog/actionscript/drag-y-drop-en-actionscript3-y-flash

Como vemos estamos viendo los eventos al precionar, soltar, pasar por encima o salir de encima… Creamos un nuevo ducumento de Flash ActionScript 3 (les pongo una imagen q seguro ni sabian que existia esa opcion =P!!!), Seleccionamos el primer fotograma y Creamos un campo de texto dinamico, le ponemos como nombre de instancia “campo” (Por suerte esto es igual para AS2 y AS3), Ahora creamos un boton dibujando un simple rectangulo lo seleccionamos y precionamos F8, seleccionamos de tipo “boton” y le ponemos un nobre cualquiera, luego lo volvemos a seleccionar ya en el escenario y en el panel de propiedades (Ctrl+F3) le ponemos como nombre de instancia “bt1_btn”… Por ahora tenemos lo mismo que si usaramos AS2 y con AS2 seleccionariamos el primer frame y usariamos el siguiente codigo para hacer una accion al precionar:

bt1_btn.onRelease=function(){
campo.text="Modificando el Texto";
}

Botones En ActionScrip 3:

Para su mala suerte!! si probaramos ahora tendriamos un error espantoso xD!.. Se acabo ese codigo tan simple y mal escrito (segun los expertos), en AS3 estamos programando orientado a objetos! (OOP)… deberemos crear objetos, y sus respectivos eventos!.. Manos a la obra!! haremos funcionar ese boton ahora mismo! (seleccionamos el primer frame de la pelicula, en AS3 ya no podemos poner acciones en los propios MC o botones…) copiamos este codigo en el panel de acciones (F9):

function alSoltar(evento:Event):void{
	campo.text="Me Soltaste!...";
}

• Explicacion: Primero Creamos una funcion “alSoltar” esta funcion tiene 1 parametro de tipo “Event” (una variable que recibira informacion sobre quien llamo a la funcion, que evento se ejecuto y algunas otras cosas mas)… y esta misma funcion regresara “void” (nada), luego vemos que modifica el campo de texto “campo” con la propeidad “.text” que para nuestra suerte no cambia en AS3…

Ahora necesitaremos hacer que la funcion se ejecute al precionar el boton, pra esto usaremos “listener” (escuchador-perseguidor-vigilador de eventos)… para esto pegamos el siguiente codigo debajo del afuncion anterior:

bt1_btn.addEventListener(MouseEvent.CLICK,alSoltar);

• Explicacion: Como ven indicamos que al boton “bt1_btn” se le añada un Listener, este listener esta pendiente de cuando se haga un Click (MouseEvent.Click) sobre el mismo, y cuando se hace el click llama a la funcion “alSoltar” del segundo parametro..

De esta forma logramos que se haga un llamdo a la funcion, como ven es mas complicado que antes, pero al usar los eventos se nos permitira tener un mejor manejo de acceso de variables al programar en OOP… Ahora ahi mas eventos que usan de igual forma que el MouseEvent.Click como son:

• MouseEvent.MOUSE_DOWN: Al Mantener precionado el raton (onPress AS2)
• MouseEvent.MOUSE_MOVE: Al mover sobre el boton (onRollOver AS2)
• MouseEvent.MOUSE_OUT: Al Salir fuera del boton (onRollOut AS2)

Se usan añadiendo varios listeners, uno para cada evento y cambiando la funcion que queramos que se ejecute!!!…Listo!..

Ahora ya que empesamos a dominar un poquito los botones veremos como seria una funcion para llamar a una URL en AS3, para esto vamos a crear primero la funcion y ya ustedes se la asignan para que se ejecute en algun evento, antes usabamos getURL AS2, ahora no la cambiaron un poquito, el codigo seria el siguiente:

function muelalab(e:Event):void{
navigateToURL(new URLRequest("http://www.muelalab.com"));
}

Explicacion: Se crea la funcion con su nombre “muelalab” y parametro de tipo “Event”,  luego se usa la funcion “navigateToURL” y a esta funcion tenemos que hacerle un pedido para llamar a una URL, lo hacemos escribiendo “new URLRequest” y dentro de esta funcion colocamos el link…

Listo!… y por que asi tan dificil?? bueno ahora usamos este  metodo que luego veremos mas ampliamente, pero en si la novedad es que podremos enviar un url con datos para formularios GET o POST, o cualquier otro tipo de informacion…

Bueno esso seria todo, espero les sea de ayuda!.. y cualquier duda/sugerencia/comentario estoy para escucharlos!… Estaremos colocando tutoriales muy seguido asi q sigan visitandonos, y recomiendenos con sus amigos xD!.. Gracias y suerte!!!…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Entonces damos el salto o no???
Yo en mi opinion recomiendo dar el salto de AS2 a AS3 si y solo si recien empiesas a usar AS2 (o nunca lo has usado), es decir no sabes muchooo o tambien si crees conocer mucho de AS2. Si estas a un nivel intermedio donde porfin comienzas a comprender AS2 no lo hagas! mejor sigue experimentando con AS2 que como te digo es igualmente poderoso (amenos que haga un codigo muy complejo!! talves se note la diferencia de algunos segundos), y luego cuando lo comprendas mejor haces el salto (y veras q no es tan dificil).

Que pasa?? cual es la diferencia??

Diferencias AS3 y AS2:

• La principal diferencia es que ActionScript 3 esta mucho mas orientado a objetos (OOP), que si nos da un mejor rendimiento, pero es necesario el manejo de Clases y Objetos (que te complica un poco si no esta familiarisado con ellos). Mientras que en AS2 no es necesario el manejo de estos, y en realidad es mucho mas sencillo.
• Muchas funciones o palabras claves se cambiaron para AS3 otras se eliminarion, porsupuesto que no es lo mismo programar en AS2 y AS3 pero es como pasar de C a C++, aqui tienen un enlace que les da referencia a las nuevas funciones y metodos de AS3
• AS3 Ideal para utilizar Flex 2.0 o posterior
• AS3 corre bajo la nueva maquina virtual de ActionScript AVM2 que le da un rendimiento hasta 10veces mayor.

Como ven aunque yo apoyo AS2 la puntuacion a favor la tiene AS3, sin embargo repito una vez mas, aun hoy en dia empresas de diseño grandes utilizan AS2 el por que es simple, AS2 es facil y eficiente, suficientemente poderoso como para crear juegos (y muy buenos!), no se queda atras de AS3. Lo que si es que no podemos escapar de la tecnologia y los avanzes y AS3 es el avance… Por lo tanto has el salto!! lo antes posible… pero solo cuando te sientas preparado aun no hay apuro.

Bueno espero les ayude a formarse una opinion y como les digo yo seguire escribiendo de AS2, pero agregare AS3, asi que quienes quieran hacer el salto, peuden dejarme sus dudas/comentarios o si queiren que les ayude a migrar un codigo de AS2 a AS3 y con gusto estare por aca ayudandoles con su problema =)…

Gracias y suerte!!!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Este post fue creado por SargentoWeb.com en el blog http://www.sargentoweb.com/.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://www.sargentoweb.com/as3/?doc=43

Post agregado:

Autor del post: SargentoWeb.com
Enlace original: http://www.sargentoweb.com/as3/?doc=43

Este post fue creado por SargentoWeb.com en el blog http://www.sargentoweb.com/.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://www.sargentoweb.com/as3/?doc=42

Post agregado:

Autor del post: SargentoWeb.com
Enlace original: http://www.sargentoweb.com/as3/?doc=42

Este post fue creado por SargentoWeb.com en el blog http://www.sargentoweb.com/.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://www.sargentoweb.com/as3/?doc=41

Post agregado:

Autor del post: SargentoWeb.com
Enlace original: http://www.sargentoweb.com/as3/?doc=41

Este post fue creado por SargentoWeb.com en el blog http://www.sargentoweb.com/.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://www.sargentoweb.com/as3/?doc=40

Post agregado:

Autor del post: SargentoWeb.com
Enlace original: http://www.sargentoweb.com/as3/?doc=40

Este post fue creado por SargentoWeb.com en el blog http://www.sargentoweb.com/.
Deberías haber sido redirigido al post original mediante Javascript, de no se así puedes acceder a él desde el siguiente enlace:
http://www.sargentoweb.com/as3/?doc=39

Post agregado:

Autor del post: SargentoWeb.com
Enlace original: http://www.sargentoweb.com/as3/?doc=39