Juego Colorear

[NopalStudio]

Hola Friends;


Me gustaria hacer un juego en Flash que sea donde el usuario colore una imagen en Flash, ejemplo:

Tenemos 1 imagen "X" en blanco y lineas negras y el usuario tiene varios crayones de colores y el podra elegir de esos colores y dibujar la imagen que tiene...

Espero que alguien pueda ayudarme...

Espero que alguien pueda ayudarme...

Gracias....

Bye bye..

[martininegro]

Debes utilizar la clase Color. Para ello crea un nuevo constructo de la clase color y aplica un evento on Release al objeto a pintar, de modo que al pinchar sobre él cambie de color

Primero:

Crea un clip de pelicula y llamalo bloque_mc


Segundo:

Pon el código AS

micolor=new Color(bloque_mc);

var colorpaleta="0xFF9933";

bloque_mc.onRelease=function() {
micolor.setRGB(colorpaleta);
}


Así ya cambia de color.

Posteriormente puedes asignar una matriz de colores a colorpalete y recuperarlo por ejemplo en un combobox. De modo que el combobox muestre los colores a elegir y con un listener puedes decirle que cambie el color de colorpaleta al pinchar sobre el coor elegido en el combo

Saludos

[Bandit]

Hola NopalStudio:
Visita mi página allí tienes un tutor que se llama: Efecto_pintar y otros más.

Espero que te sean de utilidad.

[martininegro]

Si lo que quieres es pintar con brocha (como en cualquier editor gráfico)

Primero:

Crea un clip a modo de pincel (una bolita)
y llamalo dale nombre de instancia "pincel"

Y luego dale de nombre de "pincelada" en vinculación para tenerlo disponible con AS

Segundo:

Pega el siguiente código en un fotograma:

//****************************

var dimesesion=0;

_root.onEnterFrame=function() {
pincel.swapDepths(dimesesion);
}

var pintar=function(sesion){
var reitero=new Array();

reitero[sesion]=createEmptyMovieClip("pele"+sesion,sesion);

reitero[sesion].attachMovie("pincelada", "pele2"+sesion,sesion);
reitero[sesion]._x=_root.pincel._x;
reitero[sesion]._y=pincel._y;

micolor=new Color(reitero[sesion]);
micolor.setRGB("0x993333");
}


pincel.onPress=function(){
startDrag(pincel);
mueveraton=new Object();
mueveraton.onMouseMove=function(){
dimesesion=dimesesion+1;
trace(dimesesion);
pintar(dimesesion);
};
Mouse.addListener(mueveraton);
}

pincel.onRelease=function(){
stopDrag();
}

//*************************************

Un último consejo: aumenta la velocidad de la película a 120fps para que la pincelada sea más uniforme

Si quieres ver el ejemplo terminado:

-----h-t-t-p-://----w-w-w---cordobaguapa.com/pintarconbrocha.swf------



Te comento el código:

Se trata de duplicar el clip "pincel" a medida que lo movemos pero con otro color

Lo principal es duplicar el movieclip "pincel" pero cada vez en un nivel diferente, porque si lo duplicamos en el mismo nivel se borra lo que hemos pintado anteriormente.

Para ello creamos la variable
var dimesesion=0;
para que empiece en el nivel 0

Si empezamos a pintar el pincel quedará por debjo de lo pintado y no lo podremos ver, para ello le decimos que el pincel se situe en el nivel más alto

_root.onEnterFrame=function() {
pincel.swapDepths(dimesesion);
}


Ahora creamos la función pintar(sesion) que duplica el movieclip en el nivel que le pasamos por parametro "sesion", de modo que vaya duplicando el clip a medida que aumenta el nivel.

Para ellos vamos creando Movieclip vacios en el nivel que va aumentando, y en cada movieclipvacio cargamos en clip "pincel" con AttachMovie. Establecemos que los clip se vayan pintando en las mismas coordenadas que el pincel (ya que nososrtos lo iremos moviendo)

y le cambiamos el color a los clips duplicados con el objeto "color"


Dotamos de movimiento al pincel con starDrag y StopDrag, vinculados a los eventos onpress y on release, de modo que el pincel comience a moverse cuando presionamos sobre él,, y se pare cuando soltemos el ratón.


Sólo nos queda una cosa. Queremos que a la vez que se mueva, también pinte. Por ello dentro de la función que activa el movimiento del pincel

onPress=function(){
startDrag


llamamos a la función pintar y le pasamos el parametro del nivel en el que debe pintar. Para ello creamos un listener que detecta el movimiento del ratón y cada vez que movemos el raton incrementmos en 1 la variable que nos dice el nivel en que debe pintar.

Eso es todo.
No está muy depurado. Seguro que existen formas más sutiles de hacerlo, pero es lo primero que se me ha ocurrido, así a bote pronto.

Espero que te sirva.

[martininegro]

Y para elegir el color, podemos asignar un array multidimensional (NombreColor, Código Color) a un comboBox

Crea un ComboBox y dale de nombre de instancia

color_combo

El código completo quedaría así:

//*********************************

var dimesesion=0;

_root.onEnterFrame=function() {
pincel.swapDepths(dimesesion);
}

var pintar=function(sesion){
var reitero=new Array();

reitero[sesion]=createEmptyMovieClip("pele"+sesion,sesion);

reitero[sesion].attachMovie("pincelada", "pele2"+sesion,sesion);
reitero[sesion]._x=_root.pincel._x;
reitero[sesion]._y=pincel._y;

micolor=new Color(reitero[sesion]);
var colore=color_combo.value;
micolor.setRGB(colore);
}


pincel.onPress=function(){
startDrag(pincel);
mueveraton=new Object();
mueveraton.onMouseMove=function(){
dimesesion=dimesesion+1;
trace(dimesesion);
pintar(dimesesion);
};
Mouse.addListener(mueveraton);
}

pincel.onRelease=function(){
stopDrag();
}

var colore=new Array();
colore=[["Negro","0x000000"],["Rojo","0xFF0000"],["Azul","0x0000FF"],["Amarillo","0xFFFFF00"],["Verde","0x006633"],["Borrar","0xFFFFFF"]];
trace(colore[0][1]);

trace(colore.length);

for (var i=0;i<colore.length;i++){

color_combo.addItem({
label:colore[i][0], data:colore[i][1]});
}

//**************************************+

Y el ejemplo es este:

h-t-t-p://w-w-w.cordobaguapa.com/pintarconbrocha2.swf