Pregunta sobre desplazamiento de objeto (juego de cartas)

[jdelgado79]

Hola. Me gustaría saber si alguién me puede ayudar con una cuestión de flash y tal vez action script. Me gustaría hacer algo parecido al despliegue de cartas que ven en este enlace.

http://www.losarcanos.com/tarot-amor.php

Y les explico que es exactamente lo que me tiene parado al terminar de ejecutar el proyecto. Quiero que me expliquen como hacer, que escoja la carta que escoja, se vayan colocando en el orden en el que ven esta página por ejemplo. O sea 1, 2, 3...y se vayan poniendo en el sitio que les corresponde por ese orden.

Siempre con cualquier carta que escoja.

Agradecería mucho una ayuda. Saludos.

[Sam_Enfot]

veo que nadie contestó, yo no se la respuesta tampoco,

pero puedes probar en repetir la pregunta en el foro preguntando por alguna pagina en concreto con información de movimientos y rotaciones de los -div- o las imagenes.

suerte

[mortiprogramador]

Hola
Sam_Enfot, el mensaje es de hoy, y la paciencia es una virtud

jdelgado79, pues al tener la baraja, tienes n cartas, las cuales tendrán
todas un evento click, que al ser presionadas se muevan a cierta posición
pero aquí viene lo que preguntas, y es que antes de moverse tiene que
verificar si la posición ya contiene otra carta, por esto te recomiendo que
uses un array, en donde cada vez que des clic a una carta, el array se "alimente"
con la información de "cierta carta ya esta en la posición 1"
y por ende, al presionar la carta 2, esta debe revisar todas las posiciones del
array y a medida que encuentre ocupadas, que no haga nada, pero en cuanto
encuentre una desocupada, tome ese lugar

así pues, todas las cartas deben hacer lo mismo, revisar las posiciones,
con un ciclo que recorra el array (bueno, también puedes revisar fisicamente la posición y ver si hay un child (un movieclip agregado allí) pero pues me parece más fácil la opción del array

entonces para resumir
1. necesitas un array de tantas posiciones como a su vez posiciones vaya a tener el tarot (amistad, etc) y cada vez que se de clic a una carta pase lo siguiente
a) en un ciclo (while, for) se revisen las posiciones del array ordenadamente (del 1 a n) y empieze a discriminar que si hay algo en la posición, pase a la siguiente, y si encuentra alguna vacia, tome esta posición y asigne la carta presionada
b) hacer esto para todas las cartas
espero te sirva
saludos

[jdelgado79]

Muchas gracias Morti.

Probaré con lo que me has dicho.

Saludos.

[jdelgado79]

Bueno Morti, cierto es que esta parte me ha quedado clara.

Pero la duda me surge cuando quiero automatizar los movimientos de desplazamiento del tapete hacia cada posición. Por ejemplo que....

Primera tirada:
Seleccionando cualquier carta del tapete, vaya a la posición 1.

Segunda tirada:
Seleccionando cualquier carta del tapete, vaya a la posición 2.

Tercera tirada:
Seleccionando cualquier carta del tapete, vaya a la posición 3.

Y asi sucesivamente como ves en el ejemplo que te envío.

A ver si me puedes ayudar, gracias.

[mortiprogramador]

Hola
bueno, pues como yo lo veo, las posiciones finales podrian ser ya sea movieclips o solo posiciones en x,y.
Ahora bien, supongamos que doy clic a cualquier carta de la baraja por primera vez, esto debe hacer lo que hablabamos antes de ir a la funciòn, y en este caso, como es la primera carta, y teniendo en cuenta lo de los arrays, pues va a "tomar" la primera posiciòn del array y le asignara un valor (por ej vamos a ponerle a todos el valor 1 cuando estan tomados)
asì pues, vuelvo y escojo de la baraja otra carta, y el ejecuta de nuevo la funciòn, y verà que la primera posiciòn del array esta tomada (esto quiere decir que ya hay algo en el primer movieclip o en la primera posiciòn x,y del tapete, por ende tiene que ir ahora a la segunda y tiene que ponerle valor 1 a la siguiente posiciòn del array, y asi sucesivamente

Ahora bien, veo que en el tapete se manejan 7 posiciones, entonces a su vez yo harìa un array de posiciones x,y que tenga 7 elementos, y dentro de cada posiciòn estaran las coordenadas x,y que tendràn que tomar las cartas, y como se van a poner en orden, entonces a su vez no hay problema, incluso pensandolo mejor tal vez el array anterior (que llenamos con 1) nos sobre, y solo necesitemos este array de posiciones x,y y simplemente necesites una variable que cuente el nùmero de veces que he escogido una carta, y ese nùmero de veces va a ser el elemento del array de posiciones a donde tenemos que movernos, enredado???

a ver que tal se ve así

Código actionscript:

//x,y
var posiciones = [
       ["30", "20"], 
       ["50", "40"],
 ];
 

asì pues posiciones [0][0] nos mostraria 30 y posiciones[1][1] nos mostraria 40,
en este caso la variable i por ej que necesitamos para saber en cual tirada vamos, manejara la primera parte de posiciones, y para movernos en x,y haremos uso del array y esa variable i de este modo

Código actionscript:

//dentro de la funcion
//moveTo(x,y)
carta.moveTo(posiciones[i][0],posiciones[i][1])
 

y teorizando que fuera la primera tirada, entonces i seria 0 y las posiciones serìan 30 y 20 respectivamente, y luego de esto la variable i se debe incrementar en 1 para que la siguiente tirada tome la siguiente posiciòn del array, màs claro asì? espero que asì sea

bueno, pues prueba y nos comentas
saludos

[jdelgado79]

Hola Morti, no consigo generar el movimiento, de la posición A a la posición B, y de la posición C a la B....

Si pudieras mandarme algún ejemplo básico te lo agradecería un montón...

Perdona por el coñazo. Cuando vengas por Tenerife se te agradecerá con unas cañas. :)

Saludos.

[mortiprogramador]

Hola
bueno, pues apunto las cañas

en cuanto a lo tuyo

te pregunto, con actionscript2 o 3? y que conocimiento tienes
del lenguaje??

en cualquiera de los dos casos, piensa en lo siguiente:

1. tienes que tener posiciones fijas para los "arcanos" (para cada tirada)
2. tienes que tener una baraja con n cartas
3. las cartas tienen que tener el evento de mover
4. las cartas en algún momento dejaran de repartirse porque
se llenaron las posiciones, entonces el evento mover ya no es necesario

así las cosas, haremos un ejemplo práctico (en as3):

creamos un fla nuevo, y agregamos 2 figuras (1 gris, 1 azul)
(solo necesitariamos 1
pero pues como no se tu experticia en as lo hago lo más sencillo)

luego seleccionamos la gris, la copiamos y la pegamos 3 veces (esto para hacer las posiciones finales de los arcanos) y las ponemos en las posiciones que queramos

después convertimos la figura azul a movieclip (clic derecho, opción convertir a simbolo) y le damos un nombre (por ej carta1), y una vez hecho esto, quedara convertido a movieclip y en el panel de propiedades veremos un campo llamado nombre de instancia, y allí de nuevo vamos a ponerle un nombre (yo le puse carta1)

listo, ahora tenemos que copiar la figura azul 6 veces (para un total de 7) e igualmente las posicionamos donde queramos, lo único es que a cada copia debemos darle un nombre de instancia distinto (carta2, carta3, etc) en el panel de propiedades

las grises solo serán de uso para saber donde tienen que ir las
otras (azules elegidas), incluso si quieres puedes borrarlos luego, lo que nos interesa
son las coordenadas (x,y) de cada figura gris)

tendremos algo así:




y luego viene el código, el cual pondremos en la línea de tiempo principal, fotograma1

Código actionscript:

import flash.events.MouseEvent;
import flash.display.MovieClip;
    
var pos = 0;
var posicion_y = 51.96;
var posiciones:Array = new Array(106.4,232.4,306.35,378.35);
 
carta1.addEventListener(MouseEvent.CLICK, mover);
carta2.addEventListener(MouseEvent.CLICK, mover);
carta3.addEventListener(MouseEvent.CLICK, mover);
carta4.addEventListener(MouseEvent.CLICK, mover);
carta5.addEventListener(MouseEvent.CLICK, mover);
carta6.addEventListener(MouseEvent.CLICK, mover);
carta7.addEventListener(MouseEvent.CLICK, mover);
 
function mover(e:MouseEvent):void{
    this[e.target.name].x = posiciones[pos];
    pos++;
    this[e.target.name].y = posicion_y;
    if( pos == posiciones.length )
        removeListeners();
}
 
function removeListeners():void{
    carta1.removeEventListener(MouseEvent.CLICK, mover);
    carta2.removeEventListener(MouseEvent.CLICK, mover);
    carta3.removeEventListener(MouseEvent.CLICK, mover);
    carta4.removeEventListener(MouseEvent.CLICK, mover);
    carta5.removeEventListener(MouseEvent.CLICK, mover);
    carta6.removeEventListener(MouseEvent.CLICK, mover);
    carta7.removeEventListener(MouseEvent.CLICK, mover);    
}
 

partes a resaltar

pos será la variable que se incrementara cada vez que se de
clic en alguna carta, y la que nos ayudara a mover la carta seleccionada

posicion_y es la posición en y de las cartas grises (en mi caso tanto las
cartas azules como grises estan en una misma posición)

posiciones es un arreglo donde manejaremos las posiciones en X de las
cartas grises:Array = new Array(106.4,232.4,306.35,378.35);

asi pués la figura gris más a la izquierda tiene x = 106.4 y la que está más a la derecha tiene 378.35 (4 posiciones en total)

y listo, en la función mover lo que hago es precisamente eso, muevo la
carta sobre la que di click a la posición y fija de las grises (posision_y)
y a la posición x que este en el arreglo posiciones que este en la ubicación pos (pues pos es quien se incrementa en 1 cada vez que hay una tirada)
y allí mismo un if donde pregunto si pos es igual al total de posiciones del array, y si se cumple, que remueva la función mover de las cartas, y con eso
ya queda funcionando

espero te sirva de guia y perdona por la demora pero estaba mi equipo
en mantenimiento

saludos

[jdelgado79]

Muchas gracias Mortimer. Perdona que te responda tan tarde pero pensaba que ya no darías señal. Provaré con esto que nos dices a ver que tal.

Y apuntadas esas cañas si señor. Un abrazo.

[jdelgado79]

Bien, Mortí, ya lo hice y genial. Sólo me quedan dos preguntas nada más y con esto termino.

Si quiero que la carta número 2 se coloque en posición horizontal como hago....¿?

Y para añadirle el efecto movimiento a cada una, tendría que crear un movie clip con cada una de ellas imagino....

Un saludo y millón de gracias por la ayuda.

[mortiprogramador]

Hola
bueno pues

1. Si quiero que la carta número 2 se coloque en posición horizontal como hago....¿?
Pues usa la coordenada "y" para moverla en vez de la "x"

2. para añadirle el efecto movimiento a cada una, tendría que crear un movie clip con cada una de ellas imagino..
pues en los ejemplos creo que ya estan como movieclips, así que solo
sería manejar estos, sin embargo podrías revisar las librerías de
Tween o pues hay otras pero la más común es esa que tal vez te colaboren con los efectos que quieres

saludos

[jdelgado79]

Hola Morti, lo del uso del eje y para rotar la carta todavía me está costando un poco.

Aplique como lo aplique sólo consigo moverla de posición, pero no en el eje, que es lo que realmente quiero. Que rote para que se coloque en posición horizontal.

[mortiprogramador]

hola
bueno, te dejo esto para que lo revises con calma
espero te sirva
saludos

[jdelgado79]

Lo miraré. Gracias!.

[jdelgado79]

Hola Morti, una pequeña duda. Ya casi completo el proyecto.

Pero neceito que 1 sea una variable ¿cómo lo hago? Porque me da error en el as3. Es algo lioso.

loader.load(new URLRequest("1.jpg"));

Podías ayudarme...Un saludo, gracias.

[mortiprogramador]

bueno, pues entonces haz algo así

Código actionscript:

loader.load(new URLRequest(n+".jpg"));
 

donde n es el número

saludos

[jdelgado79]

Hola Morti, gracias por toda la información. He conseguido realizar este código pero todo funciona menos la llamada de las imágenes externas que tiene que cargar en cada carta, porque me sale este error:

http://localhost/web/fotos/8.jpg

Error #2044: IOErrorEvent no controlado: text=Error #2124: El archivo cargado es de tipo desconocido.


La ruta es correcta. Te envio el código completo, a ver si nos puedes decir cual puede ser el error. Porque no lo veo.

Un saludo.




import flash.events.MouseEvent;

import flash.display.MovieClip;



/// -------------------------------------------------- XML -------------------------------

//Asigno la url que se va a cargar

var url:String = "xml.php"; /// RANDOM SQL LIMIT 10

var XmlExterno:XML;

var i = 0;

var fotos:Array = new Array();



//Carga el XML

function CargarXML() {

//Creo el objeto cargador

var loader:URLLoader = new URLLoader();

//Le añado los listeners

ponerListeners(loader);

//Creo el objeto que contendrá la petición



var peticion:URLRequest = new URLRequest(url);

//Cargo la petición

loader.load(peticion);

}



//Añade los listeners al cargador

function ponerListeners(dispatcher:IEventDispatcher):void {

dispatcher.addEventListener(Event.COMPLETE, completeHandler);

}



//Funcion que se ejecuta cuando termina la descarga.

function completeHandler(event:Event):void {



var cargador:URLLoader = event.target as URLLoader;

XmlExterno = new XML(cargador.data);



for each(var nodo:XML in XmlExterno.elements()){

fotos[i]=nodo.foto;

i++;

}

}



//Empezamos

CargarXML();

/// -------------------------------------------------- XML -------------------------------

var pos = 0;

var n;

var posicion_y:Array = new Array(305,400.6,500.0,306.0,160.3,306.0,520,400,28 0,160.3);

var posiciones:Array = new Array(252.4,352,252.4,118,252.4,381.5,500,500,500, 500);



carta1.addEventListener(MouseEvent.CLICK, mover);

carta2.addEventListener(MouseEvent.CLICK, mover);

carta3.addEventListener(MouseEvent.CLICK,mover);

carta4.addEventListener(MouseEvent.CLICK, mover);

carta5.addEventListener(MouseEvent.CLICK, mover);

carta6.addEventListener(MouseEvent.CLICK, mover);

carta7.addEventListener(MouseEvent.CLICK, mover);

carta8.addEventListener(MouseEvent.CLICK, mover);

carta9.addEventListener(MouseEvent.CLICK, mover);

carta10.addEventListener(MouseEvent.CLICK, mover);

carta11.addEventListener(MouseEvent.CLICK, mover);

carta12.addEventListener(MouseEvent.CLICK, mover);

carta13.addEventListener(MouseEvent.CLICK, mover);

carta14.addEventListener(MouseEvent.CLICK, mover);

carta15.addEventListener(MouseEvent.CLICK, mover);

carta16.addEventListener(MouseEvent.CLICK, mover);

carta17.addEventListener(MouseEvent.CLICK, mover);

carta18.addEventListener(MouseEvent.CLICK, mover);

carta19.addEventListener(MouseEvent.CLICK, mover);

carta20.addEventListener(MouseEvent.CLICK, mover);

carta21.addEventListener(MouseEvent.CLICK,mover);

carta22.addEventListener(MouseEvent.CLICK, mover);

carta23.addEventListener(MouseEvent.CLICK, mover);

carta24.addEventListener(MouseEvent.CLICK, mover);

carta25.addEventListener(MouseEvent.CLICK, mover);

carta26.addEventListener(MouseEvent.CLICK, mover);

carta27.addEventListener(MouseEvent.CLICK, mover);

carta28.addEventListener(MouseEvent.CLICK, mover);

carta29.addEventListener(MouseEvent.CLICK, mover);

carta30.addEventListener(MouseEvent.CLICK, mover);



function mover(e:MouseEvent):void{



this[e.target.name].x = posiciones[pos];

this[e.target.name].y = posicion_y[pos];



// Agregamos el Movie Clip

var contenedorMC:MovieClip = new MovieClip();

addChild(contenedorMC);

// Declaro objeto Loader

var loader:Loader = new Loader();



//loader.load(new URLRequest(this.fotos[pos]));`

n = trace(fotos[pos]);

loader.load(new URLRequest("http://localhost/web/fotos"+n+".jpg"));

// trace(fotos[pos]);



//Lo coloco en su posicion, por ejemplo

loader.x=posiciones[pos]+10;

loader.y=posicion_y[pos]+10;

// lo añado dentro del MovieClip creado antes

if( pos == 1 )

{

this[e.target.name].rotation = 90;

contenedorMC.addChild(loader).rotation = 90;

loader.x=posiciones[pos]-8;/// ROTAR MOVIE CLIP

} else

{

contenedorMC.addChild(loader);

}



pos++;





if( pos == posiciones.length )

removeListeners();

}



function removeListeners():void{



carta1.removeEventListener(MouseEvent.CLICK, mover);

carta2.removeEventListener(MouseEvent.CLICK, mover);

carta3.removeEventListener(MouseEvent.CLICK, mover);

carta4.removeEventListener(MouseEvent.CLICK, mover);

carta5.removeEventListener(MouseEvent.CLICK, mover);

carta6.removeEventListener(MouseEvent.CLICK, mover);

carta7.removeEventListener(MouseEvent.CLICK, mover);

carta8.removeEventListener(MouseEvent.CLICK, mover);

carta9.removeEventListener(MouseEvent.CLICK, mover);

carta10.removeEventListener(MouseEvent.CLICK, mover);

carta11.removeEventListener(MouseEvent.CLICK, mover);

carta12.removeEventListener(MouseEvent.CLICK, mover);

carta13.removeEventListener(MouseEvent.CLICK, mover);

carta14.removeEventListener(MouseEvent.CLICK, mover);

carta15.removeEventListener(MouseEvent.CLICK, mover);

carta16.removeEventListener(MouseEvent.CLICK, mover);

carta17.removeEventListener(MouseEvent.CLICK, mover);

carta18.removeEventListener(MouseEvent.CLICK, mover);

carta19.removeEventListener(MouseEvent.CLICK, mover);

carta20.removeEventListener(MouseEvent.CLICK, mover);

carta21.removeEventListener(MouseEvent.CLICK, mover);

carta22.removeEventListener(MouseEvent.CLICK, mover);

carta23.removeEventListener(MouseEvent.CLICK, mover);

carta24.removeEventListener(MouseEvent.CLICK, mover);

carta25.removeEventListener(MouseEvent.CLICK, mover);

carta26.removeEventListener(MouseEvent.CLICK, mover);

carta27.removeEventListener(MouseEvent.CLICK, mover);

carta28.removeEventListener(MouseEvent.CLICK, mover);

carta29.removeEventListener(MouseEvent.CLICK, mover);

carta30.removeEventListener(MouseEvent.CLICK, mover);



}

[jdelgado79]

Hola Morti, ya lo he solucionado. No hace falta respondas a esta última cuestión.

Saludos y de nuevo muchas, muchas gracias por el apoyo.

[jdelgado79]

La única cuestión por resolver ahora es que en local el flash funciona y carga las carta en sus correspondientes objetos del flash, pero al subirlo al servidor no lo hace.

¿Sabes si puede haber algún tipo de incompatibilidad del as3 con servidores?

Un saludo.

[mortiprogramador]

Iniciado por jdelgado79

Hola Morti, ya lo he solucionado. No hace falta respondas a esta última cuestión.

Saludos y de nuevo muchas, muchas gracias por el apoyo.

bueno, sería bueno que pusieras como lo solucionaste para que otras
personas que lean tu post encuentren solución a eso

en cuanto al problema del servidor, yo revisaria permisos
de carpetas y archivos, y las rutas, que generalmente
son las que molestan

saludos

[jdelgado79]

Hola Morti. El código es el que tienes más arriba, así que si la gente quiere comprobar como se hizo ahí tienen la manera.

Muchas gracias!.

[Lynxcraft]

XDXD yo tengo esto por si les interesa http://crea-flash.com/shop/example/tarot-v2.php